@charset "UTF-8";
/*========================================================
colors
========================================================*/
/*========================================================
fonts
========================================================*/
/*========================================================
spacing
========================================================*/
/*========================================================
content
========================================================*/
/*========================================================
animation
========================================================*/
@keyframes slideBackground {
0% {
transform: scale(1, 1);
}
100% {
transform: scale(1.2, 1.2);
}
}
@keyframes transformLeftRight {
0% {
transform: translateX(-200%);
}
100% {
transform: translateX(0);
}
}
@keyframes transformRightLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200%);
}
}
@keyframes transformLeftRotateRight {
0% {
transform: translateX(200%) rotate(-180deg);
}
100% {
transform: translateX(0) rotate(-180deg);
}
}
@keyframes transformRightRotateLeft {
0% {
transform: translateX(0) rotate(-180deg);
}
100% {
transform: translateX(-200%) rotate(-180deg);
}
}
/*========================================================
mixin
========================================================*/
/*========================================================
global
========================================================*/
html {
width: 100%;
height: 100%;
font-size: 14px;
overflow-x: hidden;
}
body {
width: 100%;
font-family: "Zen Kaku Gothic New", sans-serif;
color: #000 !important;
background-color: #f6f1e8 !important;
font-weight: 300 !important;
font-style: normal;
}
body a {
text-decoration: none;
}
body *,
body ::after,
body ::before {
transition: 0.5s;
}
.body-fade {
width: 100%;
height: 100%;
overflow-x: hidden;
margin-top: 100px;
opacity: 0;
transition: 1.5s;
}
.body-fade.show {
margin-top: 0;
opacity: 1;
}
/*========================================================
button
========================================================*/
.b-button.--orange .b-button__link {
width: 264px;
height: 64px;
border-radius: 100px;
display: flex;
align-items: center;
font-size: 16px;
color: #fff;
padding-left: 32px;
position: relative;
background: #F84B20;
margin: 0 auto;
border: 1px solid #F84B20;
cursor: pointer;
}
.b-button.--orange .b-button__link:hover {
background: #fff;
color: #F84B20;
}
.b-button.--orange .b-button__link:hover .b-button__link-arrow {
background: #F84B20;
}
.b-button.--orange .b-button__link:hover .b-button__link-arrow .arrow::before {
animation-name: transformRightLeft;
animation-delay: 0s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.b-button.--orange .b-button__link:hover .b-button__link-arrow .arrow::after {
animation-name: transformLeftRight;
animation-delay: 0.2s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.b-button.--orange .b-button__link-arrow {
width: 48px;
height: 48px;
overflow: hidden;
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
margin: auto 0;
line-height: 1;
border-radius: 100px;
background: #fff;
}
.b-button.--orange .b-button__link-arrow .arrow {
width: 16px;
height: 14px;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.b-button.--orange .b-button__link-arrow .arrow::before, .b-button.--orange .b-button__link-arrow .arrow::after {
content: "";
width: 16px;
height: 14px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
animation-fill-mode: forwards;
animation-duration: 0.6s;
display: block;
}
.b-button.--orange .b-button__link-arrow .arrow::after {
transform: translateX(-100%);
}
.b-button.--white .b-button__link {
width: 264px;
height: 64px;
border-radius: 100px;
display: flex;
align-items: center;
font-size: 16px;
color: #fff;
padding-left: 32px;
position: relative;
margin: 0 auto;
border: 1px solid #fff;
}
.b-button.--white .b-button__link:hover {
background: #fff;
color: #F84B20;
}
.b-button.--white .b-button__link:hover .b-button__link-arrow {
background: #F84B20;
}
.b-button.--white .b-button__link:hover .b-button__link-arrow .arrow::before {
animation-name: transformRightLeft;
animation-delay: 0s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.b-button.--white .b-button__link:hover .b-button__link-arrow .arrow::after {
animation-name: transformLeftRight;
animation-delay: 0.2s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.b-button.--white .b-button__link-arrow {
width: 48px;
height: 48px;
overflow: hidden;
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
margin: auto 0;
line-height: 1;
border-radius: 100px;
background: #fff;
}
.b-button.--white .b-button__link-arrow .arrow {
width: 16px;
height: 14px;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.b-button.--white .b-button__link-arrow .arrow::before, .b-button.--white .b-button__link-arrow .arrow::after {
content: "";
width: 16px;
height: 14px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
animation-fill-mode: forwards;
animation-duration: 0.6s;
display: block;
}
.b-button.--white .b-button__link-arrow .arrow::after {
transform: translateX(-100%);
}
.b-button.--white .b-button__link-tab {
width: 48px;
height: 48px;
background: #fff;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
right: 8px;
margin: auto;
}
.b-button.--white .b-button__link-tab::before {
content: "";
width: 18px;
height: 14px;
background: url(../images/common/icon_blank.png) no-repeat;
background-position: center center;
background-size: contain;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
.b-button.--gray .b-button__link {
width: 264px;
height: 64px;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #fff;
position: relative;
background: #AAAAAA;
margin: 0 auto;
border: 1px solid #AAAAAA;
cursor: pointer;
text-align: right;
padding-left: 20px;
}
.b-button.--gray .b-button__link:hover {
background: #fff;
color: #AAAAAA;
}
.b-button.--gray .b-button__link:hover .b-button__link-arrow {
background: #AAAAAA;
}
.b-button.--gray .b-button__link:hover .b-button__link-arrow .arrow::before {
animation-name: transformRightLeft;
animation-delay: 0s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.b-button.--gray .b-button__link:hover .b-button__link-arrow .arrow::after {
animation-name: transformLeftRight;
animation-delay: 0.2s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.b-button.--gray .b-button__link-arrow {
width: 48px;
height: 48px;
overflow: hidden;
position: absolute;
top: 50%;
left: 8px;
transform: translateY(-50%);
margin: auto 0;
line-height: 1;
border-radius: 100px;
background: #fff;
}
.b-button.--gray .b-button__link-arrow .arrow {
width: 16px;
height: 14px;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transform: rotate(180deg);
}
.b-button.--gray .b-button__link-arrow .arrow::before, .b-button.--gray .b-button__link-arrow .arrow::after {
content: "";
width: 16px;
height: 14px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
animation-fill-mode: forwards;
animation-duration: 0.6s;
display: block;
}
.b-button.--gray .b-button__link-arrow .arrow::after {
transform: translateX(-100%);
}
.b-button.--contact .b-button__link {
width: 322px;
}
.b-button.--contact .b-button__link .b-button__link-arrow {
right: auto;
left: 8px;
}
.b-button.--contact .b-button__link.--tel {
padding-left: 106px;
}
.b-button.--contact .b-button__link.--tel .arrow {
width: 20px;
height: 20px;
}
.b-button.--contact .b-button__link.--tel .arrow::before {
width: 20px;
height: 20px;
animation: none !important;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.b-button.--contact .b-button__link.--tel .arrow:after {
display: none;
}
.b-button.--contact .b-button__link.--tel .b-button__link-txt {
text-align: center;
font-size: 28px;
}
.b-button.--contact .b-button__link.--tel .b-button__link-txt span {
display: block;
font-size: 12px;
line-height: 180%;
}
.b-button.--contact .b-button__link.--tel:hover .arrow::before {
animation: none !important;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.b-button.--contact .b-button__link.--mail {
margin-top: 16px;
padding-left: 90px;
}
.b-button.--contact .b-button__link.--mail .arrow {
width: 20px;
height: 20px;
}
.b-button.--contact .b-button__link.--mail .arrow::before {
width: 20px;
height: 20px;
animation: none !important;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.b-button.--contact .b-button__link.--mail .arrow:after {
display: none;
}
.b-button.--contact .b-button__link.--mail:hover .arrow::before {
animation: none !important;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.b-button__arrow.--orange {
width: 48px;
height: 48px;
line-height: 1;
border-radius: 100px;
position: relative;
background-color: #F84B20;
cursor: pointer;
}
.b-button__arrow.--orange .b-button__arrow-item {
width: 18.4615384615px;
height: 18.4615384615px;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
overflow: hidden;
}
.b-button__arrow.--orange .b-button__arrow-item::before, .b-button__arrow.--orange .b-button__arrow-item::after {
content: "";
width: 16px;
height: 14.1176470588px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
animation-fill-mode: forwards;
animation-duration: 0.6s;
display: block;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.b-button__arrow.--orange .b-button__arrow-item::after {
transform: translateX(-200%);
}
.b-button__arrow.--orange:hover {
background-color: FFFFFF;
}
.b-button__arrow.--orange:hover .b-button__arrow-item::before {
animation-name: transformRightLeft;
animation-delay: 0s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.b-button__arrow.--orange:hover .b-button__arrow-item::after {
animation-name: transformLeftRight;
animation-delay: 0.2s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.b-button__arrow.--white {
width: 48px;
height: 48px;
line-height: 1;
border-radius: 100px;
position: relative;
background-color: #fff;
cursor: pointer;
}
.b-button__arrow.--white .b-button__arrow-item {
width: 18.4615384615px;
height: 18.4615384615px;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
overflow: hidden;
}
.b-button__arrow.--white .b-button__arrow-item::before, .b-button__arrow.--white .b-button__arrow-item::after {
content: "";
width: 16px;
height: 14.1176470588px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
animation-fill-mode: forwards;
animation-duration: 0.6s;
display: block;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.b-button__arrow.--white .b-button__arrow-item::after {
transform: translateX(-200%);
}
.b-button__arrow.--white:hover {
background-color: F84B20;
}
.b-button__arrow.--white:hover .b-button__arrow-item::before {
animation-name: transformRightLeft;
animation-delay: 0s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.b-button__arrow.--white:hover .b-button__arrow-item::after {
animation-name: transformLeftRight;
animation-delay: 0.2s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
/*========================================================
card
========================================================*/
.c-news {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 64px;
justify-content: space-between;
}
@media (max-width: 768px) {
.c-news {
gap: 12px 0;
margin-bottom: 48px;
}
}
.c-news__card {
width: calc(50% - 10px);
background: #fff;
display: flex;
align-items: center;
flex-wrap: wrap;
color: #000;
padding: 30px 100px 30px 30px;
position: relative;
border-radius: 8px;
}
@media (max-width: 768px) {
.c-news__card {
width: 100%;
padding: 24px 50px 24px 24px;
}
}
.c-news__card:hover {
background: #F9F6F1;
}
.c-news__card:hover .c-news__card-arrow::before {
animation-name: transformRightLeft;
animation-delay: 0s;
}
.c-news__card:hover .c-news__card-arrow::after {
animation-name: transformLeftRight;
animation-delay: 0.2s;
}
.c-news__card-arrow {
width: 16px;
height: 14px;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
right: 28px;
margin: auto;
}
@media (max-width: 768px) {
.c-news__card-arrow {
right: 20px;
}
}
.c-news__card-arrow::before, .c-news__card-arrow::after {
content: "";
width: 16px;
height: 14px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
animation-fill-mode: forwards;
animation-duration: 0.6s;
display: block;
}
.c-news__card-arrow::after {
transform: translateX(-100%);
}
.c-news__card-date {
display: inline-block;
margin-right: 16px;
}
.c-news__card-cat {
display: inline-block;
padding: 4px 16px 5px;
color: #fff;
border: 1px solid #C1B092;
border-radius: 100px;
background: #C1B092;
font-size: 12px;
margin-right: 8px;
}
.c-news__card-cat:hover {
opacity: 0.7;
}
.c-news__card-ttl {
line-height: 180%;
font-size: 16px;
margin-top: 16px;
display: block;
width: 100%;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
color: #000;
}
.c-news__card-ttl:hover {
color: #F84B20;
}
@media (max-width: 768px) {
.c-news__card-ttl {
font-size: 14px;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
/*========================================================
modal
========================================================*/
/*========================================================
js
========================================================*/
.js-scroll__txt {
font-size: 128px;
color: #C1B092;
white-space: nowrap;
position: absolute;
left: 0;
top: -108px;
opacity: 0.3;
transition: 0s;
}
@media (max-width: 768px) {
.js-scroll__txt {
font-size: 72px;
top: -62px;
}
}
.js-page__ttl,
.js-page__ttl-sub,
.js-fade__sec,
.js-fade__delay,
.js-fade__bottom {
opacity: 0;
}
.js-page__ttl.--left,
.js-page__ttl-sub.--left,
.js-fade__sec.--left,
.js-fade__delay.--left,
.js-fade__bottom.--left {
transform: translateX(-10px);
}
.js-page__ttl.--right,
.js-page__ttl-sub.--right,
.js-fade__sec.--right,
.js-fade__delay.--right,
.js-fade__bottom.--right {
transform: translateX(100px);
}
.js-page__ttl.--bottom,
.js-page__ttl-sub.--bottom,
.js-fade__sec.--bottom,
.js-fade__delay.--bottom,
.js-fade__bottom.--bottom {
transform: translateY(100px);
}
.js-page__ttl.fade-in,
.js-page__ttl-sub.fade-in,
.js-fade__sec.fade-in,
.js-fade__delay.fade-in,
.js-fade__bottom.fade-in {
opacity: 1;
transform: initial;
transform: initial;
}
.js-fade {
opacity: 0;
transition: ease-in-out 0.7s;
}
.js-fade.--left {
transform: translateX(-100px);
}
.js-fade.--right {
transform: translateX(100px);
}
.js-fade.--bottom {
transform: translateY(100px);
}
.js-fade.fade-in {
opacity: 1;
transform: initial;
transform: initial;
}
.js-recruit__fade {
opacity: 0;
}
.js-recruit__fade.--left {
transform: translateX(-100px);
}
.js-recruit__fade.--bottom {
transform: translateY(100px);
}
.js-recruit__fade.fade-in {
opacity: 1;
transform: initial;
transform: initial;
}
.js-service__fade,
.js-company__fade {
opacity: 0;
}
.js-service__fade.--left,
.js-company__fade.--left {
transform: translateX(-100px);
}
.js-service__fade.fade-in,
.js-company__fade.fade-in {
opacity: 1;
transform: initial;
transform: initial;
}
/*========================================================
ロード画面
========================================================*/
#loader {
position: fixed;
width: 100%;
height: 100vh;
background: url(../images/common/load_bg.png) no-repeat;
z-index: 99999;
background-position: center center;
background-size: cover;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s;
}
#loader.fade-in {
opacity: 1;
}
#loader img {
opacity: 0;
transition: 1s;
}
#loader img.fade-in {
opacity: 1;
}
.block {
display: none;
}
@media (max-width: 1200px) {
.block.--mac {
display: block;
}
}
@media (max-width: 992px) {
.block.--tab {
display: block;
}
}
@media (max-width: 768px) {
.block.--sp {
display: block;
}
}
.none {
display: block;
}
@media (max-width: 1200px) {
.none.--mac {
display: none !important;
}
}
@media (max-width: 992px) {
.none.--tab {
display: none !important;
}
}
@media (max-width: 992px) {
.none.--sp {
display: none !important;
}
}
/*========================================================
header
========================================================*/
.l-header {
position: fixed;
top: 0;
right: 0;
z-index: 11111;
}
.l-header__inner {
position: relative;
}
.l-header__btn-group {
display: flex;
align-items: center;
padding: 0 0 0 24px;
position: relative;
flex: 0 0 auto;
background-color: #fff;
border-radius: 0px 0px 0px 4px;
box-shadow: -4px 4px 4px 0 rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.l-header__btn-group {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
border-radius: 0;
box-shadow: 0 -4px 10px 0 rgba(0, 0, 0, 0.05);
}
}
@media (max-width: 768px) {
.l-header__btn-group.--top {
opacity: 0;
transform: translateY(100px);
transition: 1s;
}
}
.l-header__btn-group.--top.show {
opacity: 1;
transform: translateY(0);
}
.l-header__mail {
padding: 6px 20px 6px 0;
border-right: 1px solid #D9D9D9;
}
.l-header__info {
display: flex;
align-items: center;
margin: 0 24px 0 20px;
}
.l-header__info-text {
margin-left: 12px;
}
.l-header__info-phone {
font-size: 24px;
}
.l-header__info-phone a {
color: #F84B20;
}
.l-header__info-hours {
font-size: 11px;
line-height: 180%;
color: #6D6D6D;
}
.l-header .l-header__nav-btn {
width: 74px;
height: 74px;
background: #F84B20;
position: relative;
cursor: pointer;
}
@media (max-width: 768px) {
.l-header .l-header__nav-btn {
margin-left: auto;
}
}
.l-header .l-header__nav-btn.opened span:nth-child(1) {
top: 0;
bottom: 0;
transform: rotate(45deg);
}
.l-header .l-header__nav-btn.opened span:nth-child(2) {
top: 0;
bottom: 0;
transform: rotate(-45deg);
}
.l-header .l-header__nav-btn.opened span:nth-child(3) {
display: none;
}
.l-header .l-header__nav-btn span {
width: 24px;
height: 1px;
background: #fff;
display: block;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.l-header .l-header__nav-btn span:nth-child(1) {
top: 27px;
}
.l-header .l-header__nav-btn span:nth-child(2) {
top: 0;
bottom: 0;
}
.l-header .l-header__nav-btn span:nth-child(3) {
bottom: 27px;
}
.l-header__nav {
width: 202px;
position: absolute;
top: 98px;
right: 46px;
opacity: 0;
pointer-events: none;
}
@media (max-width: 768px) {
.l-header__nav {
top: auto;
bottom: 94px;
right: 20px;
}
}
.l-header__nav.open {
opacity: 1;
pointer-events: all;
}
.l-header__list {
box-shadow: -4px 4px 4px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
padding: 16px 24px;
background: rgba(255, 255, 255, 0.95);
}
.l-header__list-item {
margin: 5px 0;
}
.l-header__list-link {
font-size: 14px;
line-height: 180%;
color: #000;
}
.l-header__list-link:hover {
opacity: 0.4;
}
.l-header__list .l-header__sub-nav {
position: relative;
padding: 8px 20px 8px 0;
display: inline-block;
cursor: pointer;
}
.l-header__list .l-header__sub-nav:hover {
opacity: 0.4;
}
.l-header__list .l-header__sub-nav.opened:after {
transform: translateY(-50%) rotate(180deg);
}
.l-header__list .l-header__sub-nav:before {
content: "";
width: 10px;
height: 1px;
background: #F84B20;
display: block;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.l-header__list .l-header__sub-nav:after {
content: "";
width: 10px;
height: 1px;
background: #F84B20;
display: block;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%) rotate(90deg);
}
.l-header__list .l-header__sub-item {
display: none;
transition: none;
}
.l-header__list .l-header__sub-link {
color: #6D6D6D;
font-size: 12px;
padding: 2.5px 0;
line-height: 180%;
display: block;
}
.l-header__list .l-header__sub-link:hover {
opacity: 0.4;
}
/*========================================================
footer
========================================================*/
.l-footer {
background: #4F4030;
margin-top: -1px;
}
.l-footer .l-footer_inner {
padding: 60px 0 90px;
width: 1120px;
margin: 0 auto;
}
@media (max-width: 1440px) {
.l-footer .l-footer_inner {
width: 1120px;
}
}
@media (max-width: 992px) {
.l-footer .l-footer_inner {
width: 90%;
}
}
@media (max-width: 768px) {
.l-footer .l-footer_inner {
width: 100%;
padding: 20px 20px 100px;
}
}
.l-footer .l-footer__flex {
display: flex;
justify-content: space-between;
padding-bottom: 50px;
border-bottom: 1px solid #fff;
}
@media (max-width: 768px) {
.l-footer .l-footer__flex {
display: block;
padding: 0;
border: 0;
}
}
@media (max-width: 992px) {
.l-footer .l-footer__flex-item.--left {
width: 20%;
}
}
@media (max-width: 768px) {
.l-footer .l-footer__flex-item.--left {
width: 100%;
text-align: center;
}
}
@media (max-width: 992px) {
.l-footer .l-footer__flex-item.--right {
width: 80%;
padding-left: 20px;
}
}
@media (max-width: 768px) {
.l-footer .l-footer__flex-item.--right {
width: 100%;
padding: 0;
}
}
.l-footer .l-footer__flex-item .l-footer__logo {
margin-bottom: 70px;
}
@media (max-width: 992px) {
.l-footer .l-footer__flex-item .l-footer__logo {
margin-bottom: 20px;
}
}
@media (max-width: 768px) {
.l-footer .l-footer__flex-item .l-footer__logo {
width: 173px;
margin: -13px auto 40px;
}
}
.l-footer .l-footer__flex-item .l-footer__link {
color: #fff;
font-size: 14px;
line-height: 180%;
}
.l-footer .l-footer__flex-item .l-footer__link:hover {
opacity: 0.6;
}
.l-footer .l-footer__flex-item .l-footer__nav {
display: flex;
flex-wrap: wrap;
gap: 0 34px;
max-width: 566px;
}
@media (max-width: 768px) {
.l-footer .l-footer__flex-item .l-footer__nav {
max-width: 100%;
}
}
.l-footer .l-footer__flex-item .l-footer__nav-item {
width: calc(50% - 17px);
}
@media (max-width: 768px) {
.l-footer .l-footer__flex-item .l-footer__nav-item {
width: 100%;
}
}
.l-footer .l-footer__flex-item .l-footer__nav-item.--sub {
display: flex;
flex-wrap: wrap;
padding: 10px 0 2px 0;
border-bottom: 1px solid #fff;
}
@media (max-width: 768px) {
.l-footer .l-footer__flex-item .l-footer__nav-item.--sub {
padding: 16px 0 0;
}
}
.l-footer .l-footer__flex-item .l-footer__nav-item.--sub .l-footer__sub-link {
color: #fff;
display: inline-block;
margin: 0 16px 8px 0;
font-size: 12px;
line-height: 180%;
}
.l-footer .l-footer__flex-item .l-footer__nav-item.--sub .l-footer__sub-link:hover {
opacity: 0.6;
}
@media (max-width: 768px) {
.l-footer .l-footer__flex-item .l-footer__nav-item:nth-child(1) {
order: 1;
}
}
@media (max-width: 768px) {
.l-footer .l-footer__flex-item .l-footer__nav-item:nth-child(2) {
order: 6;
}
}
@media (max-width: 768px) {
.l-footer .l-footer__flex-item .l-footer__nav-item:nth-child(3) {
order: 2;
}
}
@media (max-width: 768px) {
.l-footer .l-footer__flex-item .l-footer__nav-item:nth-child(4) {
order: 7;
}
}
@media (max-width: 768px) {
.l-footer .l-footer__flex-item .l-footer__nav-item:nth-child(5) {
order: 3;
}
}
@media (max-width: 768px) {
.l-footer .l-footer__flex-item .l-footer__nav-item:nth-child(6) {
order: 8;
}
}
@media (max-width: 768px) {
.l-footer .l-footer__flex-item .l-footer__nav-item:nth-child(7) {
order: 4;
}
}
@media (max-width: 768px) {
.l-footer .l-footer__flex-item .l-footer__nav-item:nth-child(8) {
order: 8;
}
}
@media (max-width: 768px) {
.l-footer .l-footer__flex-item .l-footer__nav-item:nth-child(9) {
order: 5;
}
}
@media (max-width: 768px) {
.l-footer .l-footer__flex-item .l-footer__nav-item:nth-child(10) {
order: 10;
}
}
.l-footer .l-footer__flex-item .l-footer__nav-link {
color: #fff;
font-size: 14px;
line-height: 180%;
padding: 16px 8px;
border-bottom: 1px solid #fff;
display: block;
position: relative;
}
.l-footer .l-footer__flex-item .l-footer__nav-link:hover {
opacity: 0.6;
}
.l-footer .l-footer__flex-item .l-footer__nav-link::before {
content: "";
width: 16px;
height: 14px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
position: absolute;
top: 0;
bottom: 0;
right: 6.5px;
margin: auto;
display: block;
}
.l-footer .l-footer__copy {
text-align: center;
margin-top: 24px;
line-height: 180%;
color: #AAAAAA;
font-size: 12px;
}
@media (max-width: 768px) {
.l-footer .l-footer__copy {
margin-top: 40px;
}
}
/*========================================================
section
========================================================*/
.s-section__inner {
width: 1120px;
margin: 0 auto;
padding: 100px 0;
}
@media (max-width: 1200px) {
.s-section__inner {
width: 100%;
padding: 50px 20px;
}
}
@media (max-width: 768px) {
.s-section__inner.--news {
padding: 50px 20px 0;
}
}
@media (max-width: 768px) {
.s-section__inner.--about {
padding: 80px 20px 30px;
}
}
.s-section__inner.--service {
width: 100%;
padding: 100px 150px 100px 0;
}
@media (max-width: 1200px) {
.s-section__inner.--service {
padding: 100px 50px 100px 0;
}
}
@media (max-width: 992px) {
.s-section__inner.--service {
padding: 100px 20px;
}
}
@media (max-width: 768px) {
.s-section__inner.--service {
padding: 50px 20px;
}
}
.s-section__inner.--recruit {
width: 100%;
}
@media (max-width: 992px) {
.s-section__inner.--recruit {
padding: 50px 0;
}
}
@media (max-width: 768px) {
.s-section__inner.--recruit {
padding: 0 0 30px 0;
}
}
.s-section__inner.--environment {
padding: 0 0 100px;
}
@media (max-width: 1440px) {
.s-section__inner.--environment {
padding: 0 20px;
}
}
.s-section__inner.--message {
padding: 120px 0;
}
@media (max-width: 1200px) {
.s-section__inner.--message {
padding: 60px 20px;
}
}
.s-section__inner.--contact {
width: 950px;
}
@media (max-width: 768px) {
.s-section__inner.--contact {
width: 100%;
}
}
.s-section__inner.--thanks {
padding: 0 0 70px;
}
.s-page__head {
position: relative;
}
.s-page__head.--privacy {
text-align: left;
}
.s-page__head-inner {
padding: 0 150px;
width: 100%;
height: 470px;
background: url(../images/common/page_head_bg.png) no-repeat;
background-position: center bottom;
background-size: cover;
}
@media (max-width: 992px) {
.s-page__head-inner {
height: 325px;
padding: 0 50px;
}
}
@media (max-width: 768px) {
.s-page__head-inner {
background: url(../images/common/page_head_bg_sp.png) no-repeat;
background-position: center bottom;
background-size: cover;
padding: 40px 20px 44px;
height: auto;
margin-bottom: 32px;
}
}
.s-page__head-logo {
position: absolute;
top: 60px;
left: 100px;
}
@media (max-width: 1440px) {
.s-page__head-logo {
width: 128px;
top: 67px;
left: 104px;
}
}
@media (max-width: 992px) {
.s-page__head-logo {
width: 98px;
top: 44px;
left: 100px;
}
}
@media (max-width: 768px) {
.s-page__head-logo {
position: inherit;
display: block;
margin-bottom: 64px;
}
}
.s-page__head-ttl {
color: #fff;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
@media (max-width: 768px) {
.s-page__head-ttl {
position: inherit !important;
transform: translateY(0) !important;
}
}
.s-page__head-ttl h1, .s-page__head-ttl h2 {
font-size: 96px;
}
@media (max-width: 992px) {
.s-page__head-ttl h1, .s-page__head-ttl h2 {
font-size: 56px;
}
}
@media (max-width: 768px) {
.s-page__head-ttl h1, .s-page__head-ttl h2 {
line-height: 0.9;
}
}
.s-page__head-ttl h1 span, .s-page__head-ttl h2 span {
display: inline-block;
transition: 0s;
opacity: 0;
}
.s-page__head-ttl p {
font-size: 20px;
}
@media (max-width: 768px) {
.s-page__head-ttl h2.--first {
margin: 0;
}
}
.s-page__head-txt {
text-align: center;
line-height: 180%;
font-size: 16px;
}
@media (max-width: 992px) {
.s-page__head-txt {
padding: 0 20px;
text-align: left;
}
}
@media (max-width: 768px) {
.s-page__head-txt {
text-align: left;
padding: 0 20px;
font-size: 14px;
}
}
.s-page__head-txt.--contact {
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
padding-bottom: 30px;
border-bottom: 1px solid #ddd;
}
@media (max-width: 768px) {
.s-page__head-txt.--contact {
text-align: center;
padding-bottom: 24px;
}
}
.s-page__bottom-txt {
display: flex;
align-items: flex-end;
justify-content: center;
margin-top: 30px;
}
@media (max-width: 768px) {
.s-page__bottom-txt {
margin-top: 24px;
flex-wrap: wrap;
}
}
@media (max-width: 768px) {
.s-page__bottom-txt img {
width: 30px;
height: 30px;
}
}
.s-page__bottom-txt .s-page__bottom-phone {
font-size: 40px;
color: #F84B20;
margin-left: 5px;
display: block;
}
@media (max-width: 768px) {
.s-page__bottom-txt .s-page__bottom-phone {
font-size: 36px;
}
}
.s-page__bottom-txt .s-page__bottom-hours {
color: #6D6D6D;
margin-left: 16px;
margin-bottom: 3px;
}
@media (max-width: 768px) {
.s-page__bottom-txt .s-page__bottom-hours {
margin-left: 0;
margin-top: 8px;
font-size: 16px;
}
}
.s-font__en {
font-family: "EB Garamond", sans-serif;
}
.s-ttl {
padding-left: 40px;
position: relative;
margin-bottom: 80px;
display: flex;
align-items: flex-end;
}
@media (max-width: 768px) {
.s-ttl {
margin-bottom: 40px;
flex-wrap: wrap;
padding-left: 30px;
}
}
.s-ttl.--recruit {
display: inline-block;
}
.s-ttl.--contact {
margin-bottom: 50px;
}
@media (max-width: 992px) {
.s-ttl.--contact {
display: inline-block;
}
}
@media (max-width: 768px) {
.s-ttl.--contact {
margin-bottom: 24px;
margin-left: -30px;
}
}
.s-ttl.--company {
margin: 0 auto;
}
.s-ttl.--others {
display: inline-block;
}
.s-ttl.--entry {
display: inline-block;
margin-bottom: 0;
}
.s-ttl .icon-plus {
width: 24px;
height: 24px;
position: absolute;
top: 0;
left: 0;
}
@media (max-width: 768px) {
.s-ttl .icon-plus {
width: 20px;
height: 20px;
}
}
.s-ttl .icon-plus::before {
content: "";
width: 24px;
height: 24px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: absolute;
top: 0;
left: 0;
display: block;
}
@media (max-width: 768px) {
.s-ttl .icon-plus::before {
width: 20px;
height: 20px;
}
}
.s-ttl__text {
font-size: 64px;
display: inline-block;
margin-right: 24px;
}
@media (max-width: 768px) {
.s-ttl__text {
font-size: 56px;
display: block !important;
width: 100%;
margin: 0 0 8px 0;
}
}
.s-ttl__text.--service {
display: none;
}
.s-ttl__text.--white {
color: #fff;
}
.s-ttl__text .fade-txt {
display: inline-block;
opacity: 0;
}
.s-ttl__desp {
font-size: 20px;
margin-bottom: 10px;
display: inline-block;
}
@media (max-width: 768px) {
.s-ttl__desp {
font-size: 16px !important;
display: block;
}
}
.s-ttl__desp.--white {
color: #fff;
}
@media (max-width: 768px) {
.s-ttl__desp.--service {
margin-top: 10px;
}
}
/*========================================================
contact
========================================================*/
.s-contact {
background: url(../images/common/footer_bg.png) no-repeat;
background-position: center bottom;
background-size: contain;
}
@media (max-width: 992px) {
.s-contact .s-section__inner {
padding: 50px 0 150px;
}
}
@media (max-width: 768px) {
.s-contact .s-section__inner {
padding: 50px 0 100px;
}
}
@media (max-width: 992px) {
.s-contact .section-ttl {
text-align: center;
}
}
.s-contact .contact-layout__flex {
width: 1140px;
margin: 0 auto;
padding: 100px 100px 120px;
background: url(../images/common/contact_bg.png) no-repeat;
background-position: center center;
background-size: cover;
display: flex;
color: #fff;
justify-content: space-between;
align-items: flex-end;
border-radius: 8px;
}
@media (max-width: 1440px) {
.s-contact .contact-layout__flex {
width: 100%;
padding: 100px 50px;
}
}
@media (max-width: 992px) {
.s-contact .contact-layout__flex {
display: block;
margin-bottom: 50px;
border-radius: 0;
}
}
@media (max-width: 700px) {
.s-contact .contact-layout__flex {
background: url(../images/common/contact_bg_sp.png) no-repeat;
background-position: center center;
background-size: cover;
padding: 48px 20px;
margin-bottom: 0;
}
}
.s-contact .contact-layout__flex .contact__head-txt {
font-size: 16px;
line-height: 180%;
}
@media (max-width: 992px) {
.s-contact .contact-layout__flex .contact__head-txt {
text-align: center;
margin-bottom: 50px;
}
}
@media (max-width: 768px) {
.s-contact .contact-layout__flex .contact__head-txt {
text-align: left;
}
}
/*========================================================
関連コンテンツ
========================================================*/
.s-contents {
background: #F3EAD9;
}
.s-contents__flex {
display: flex;
gap: 0 30px;
}
@media (max-width: 992px) {
.s-contents__flex {
flex-wrap: wrap;
gap: 16px 0;
}
}
.s-contents__flex-item {
width: calc(33.3333333333% - 15px);
position: relative;
overflow: hidden;
border-radius: 8px;
}
@media (max-width: 992px) {
.s-contents__flex-item {
width: 60%;
margin: 0 auto;
height: 200px;
}
}
@media (max-width: 700px) {
.s-contents__flex-item {
width: 100%;
}
}
.s-contents__flex-item:hover {
opacity: 0.7;
}
.s-contents__flex-item:hover img {
transform: scale(1.1, 1.1);
}
.s-contents__flex-item:hover .b-button__arrow-item::before {
animation-name: transformRightLeft;
animation-delay: 0s;
}
.s-contents__flex-item:hover .b-button__arrow-item::after {
animation-name: transformLeftRight;
animation-delay: 0.2s;
}
.s-contents__flex-item .s-contents__ttl {
position: absolute;
top: 40px;
left: 16px;
color: #fff;
padding-left: 40px;
}
.s-contents__flex-item .s-contents__ttl::before {
content: "";
width: 24px;
height: 24px;
position: absolute;
top: 0;
left: 0;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
display: block;
}
.s-contents__flex-item .s-contents__ttl .s-contents__ttl-txt {
font-size: 40px;
margin-bottom: 8px;
}
.s-contents__flex-item .s-contents__ttl .s-contents__ttl-desp {
font-size: 16px;
}
.s-contents__flex-item .s-contents__btn {
position: absolute;
right: 24px;
bottom: 40px;
}
/*========================================================
サービス詳細
========================================================*/
.s-service {
background: #F3EAD9;
}
.s-service .section-ttl {
text-align: center;
}
.s-service .section-ttl .s-ttl {
display: inline-block;
}
.s-service__flex {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 60px;
gap: 32px;
}
.s-service__flex-item {
padding: 32px 24px 40px;
background: #fff;
border-radius: 0 8px 0 8px;
width: calc(33.3333333333% - 32px);
position: relative;
}
@media (max-width: 992px) {
.s-service__flex-item {
width: 100%;
}
}
.s-service__flex-item:before {
content: "";
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 24px;
height: 24px;
position: absolute;
top: -12px;
left: -12px;
}
.s-service__flex-ttl {
color: #F84B20;
font-size: 20px;
display: block;
text-align: center;
margin-bottom: 24px;
line-height: 150%;
}
.s-service__flex-txt {
line-height: 180%;
}
.s-service .s-service__txt {
line-height: 180%;
text-align: center;
font-size: 16px;
}
@media (max-width: 768px) {
.s-service .s-service__txt {
text-align: left;
font-size: 14px;
}
}
/*========================================================
サービス概要
========================================================*/
@media (max-width: 768px) {
.s-about {
margin-top: 50px;
}
}
.s-about .s-about__flex {
display: flex;
justify-content: space-between;
}
@media (max-width: 992px) {
.s-about .s-about__flex {
flex-wrap: wrap;
}
}
.s-about .s-about__flex .--about {
margin-bottom: 48px;
}
@media (max-width: 768px) {
.s-about .s-about__flex .--about {
margin-bottom: 24px;
}
}
.s-about .s-about__item {
width: 50%;
}
@media (max-width: 992px) {
.s-about .s-about__item {
width: 100%;
}
}
.s-about .s-about__item.--txt {
padding-right: 67px;
}
@media (max-width: 992px) {
.s-about .s-about__item.--txt {
padding-right: 0;
}
}
.s-about .s-about__item-ttl {
color: #F84B20;
font-size: 24px;
line-height: 180%;
display: block;
margin-bottom: 32px;
}
@media (max-width: 768px) {
.s-about .s-about__item-ttl {
font-size: 20px;
margin-bottom: 24px;
}
}
.s-about .s-about__item-txt {
line-height: 180%;
}
.s-about .s-about__item-img {
display: block;
margin-left: auto;
}
@media (max-width: 992px) {
.s-about .s-about__item-img {
text-align: center;
margin: 40px auto 0;
display: block;
}
}
/*========================================================
ページリンク
========================================================*/
.s-page__link.--consultant {
background: url(../images/common/page_link_bg_01.png) no-repeat;
background-size: contain;
background-position: top center;
}
@media (max-width: 768px) {
.s-page__link.--consultant {
background: url(../images/common/page_link_bg_01_sp.png) no-repeat;
background-size: contain;
background-position: top center;
}
}
.s-page__link.--due-diligence {
background: url(../images/common/page_link_bg_02.png) no-repeat;
background-size: contain;
background-position: top center;
}
@media (max-width: 768px) {
.s-page__link.--due-diligence {
background: url(../images/common/page_link_bg_02_sp.png) no-repeat;
background-size: contain;
background-position: top center;
}
}
.s-page__link.--company-setup {
background: url(../images/common/page_link_bg_03.png) no-repeat;
background-size: contain;
background-position: top center;
}
@media (max-width: 768px) {
.s-page__link.--company-setup {
background: url(../images/common/page_link_bg_03_sp.png) no-repeat;
background-size: contain;
background-position: top center;
}
}
.s-page__link.--other-service {
background: url(../images/common/page_link_bg_04.png) no-repeat;
background-size: contain;
background-position: top center;
}
@media (max-width: 768px) {
.s-page__link.--other-service {
background: url(../images/common/page_link_bg_04_sp.png) no-repeat;
background-size: contain;
background-position: top center;
}
}
.s-page__link .s-section__inner {
padding: 300px 0 0;
}
@media (max-width: 1200px) {
.s-page__link .s-section__inner {
padding: 150px 0px 0;
}
}
@media (max-width: 992px) {
.s-page__link .s-section__inner {
padding: 150px 20px 0;
}
}
.s-page__link .s-page__link-flex {
padding: 64px;
background: #fff;
display: flex;
}
@media (max-width: 992px) {
.s-page__link .s-page__link-flex {
border-radius: 8px;
display: block;
padding: 40px 24px;
}
}
.s-page__link .s-page__flex-item.--img {
width: 250px;
}
@media (max-width: 992px) {
.s-page__link .s-page__flex-item.--img {
margin: 0 auto 40px;
}
}
@media (max-width: 768px) {
.s-page__link .s-page__flex-item.--img {
width: 210px;
}
}
.s-page__link .s-page__flex-item.--img p {
margin-top: 16px;
}
@media (max-width: 1440px) {
.s-page__link .s-page__flex-item.--img p {
text-align: center;
}
}
.s-page__link .s-page__flex-item.--img span {
font-size: 20px;
display: inline-block;
margin-left: 16px;
}
.s-page__link .s-page__flex-item.--txt {
width: calc(100% - 250px);
padding-left: 48px;
}
@media (max-width: 992px) {
.s-page__link .s-page__flex-item.--txt {
width: 100%;
padding: 0;
}
}
.s-page__link .s-page__item-ttl {
font-size: 28px;
padding-left: 40px;
position: relative;
margin-bottom: 20px;
display: block;
}
@media (max-width: 768px) {
.s-page__link .s-page__item-ttl {
font-size: 20px;
line-height: 180%;
}
}
.s-page__link .s-page__item-ttl::before {
content: "";
width: 24px;
height: 24px;
position: absolute;
top: -7px;
left: 0;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
display: block;
}
@media (max-width: 768px) {
.s-page__link .s-page__item-ttl::before {
width: 20px;
height: 20px;
top: 0;
}
}
.s-page__link .s-page__item-txt {
font-size: 16px;
line-height: 180%;
margin-bottom: 48px;
}
@media (max-width: 768px) {
.s-page__link .s-page__item-txt {
font-size: 14px;
}
}
.s-page__link .s-page__flex-btn {
display: flex;
gap: 0 16px;
}
@media (max-width: 1440px) {
.s-page__link .s-page__flex-btn {
flex-wrap: wrap;
gap: 16px;
justify-content: center;
}
}
/*========================================================
ページャー
========================================================*/
.s-pager .wp-pagenavi {
display: flex;
align-items: center;
justify-content: center;
gap: 0 16px;
}
@media (max-width: 768px) {
.s-pager .wp-pagenavi {
gap: 0 8px;
}
}
.s-pager .wp-pagenavi .current {
width: 48px;
height: 48px;
border-radius: 50%;
font-weight: 500;
font-size: 20px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: #F84B20;
color: #fff;
border: none;
padding-bottom: 6px;
}
@media (max-width: 768px) {
.s-pager .wp-pagenavi .current {
width: 38px;
height: 38px;
}
}
.s-pager .wp-pagenavi .extend {
margin: 0;
border: none;
padding: 0;
font-size: 20px;
margin-bottom: 10px;
color: #F84B20;
letter-spacing: 5px;
font-weight: bold;
}
@media (max-width: 768px) {
.s-pager .wp-pagenavi .extend {
font-size: 10px;
margin-bottom: 6px;
}
}
.s-pager .wp-pagenavi .previouspostslink {
position: relative;
transform: rotate(-180deg);
}
.s-pager .wp-pagenavi .previouspostslink:hover {
background: #F84B20;
}
.s-pager .wp-pagenavi .previouspostslink:hover::before {
animation-name: transformRightLeft;
animation-delay: 0s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.s-pager .wp-pagenavi .previouspostslink:hover::after {
animation-name: transformLeftRight;
animation-delay: 0.2s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.s-pager .wp-pagenavi .previouspostslink::before, .s-pager .wp-pagenavi .previouspostslink::after {
content: "";
width: 16px;
height: 14px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
animation-fill-mode: forwards;
animation-duration: 0.6s;
display: block;
}
.s-pager .wp-pagenavi .previouspostslink::after {
transform: translateX(-200%);
}
.s-pager .wp-pagenavi .nextpostslink {
position: relative;
}
.s-pager .wp-pagenavi .nextpostslink:hover {
background: #F84B20;
}
.s-pager .wp-pagenavi .nextpostslink:hover::before {
animation-name: transformRightLeft;
animation-delay: 0s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.s-pager .wp-pagenavi .nextpostslink:hover::after {
animation-name: transformLeftRight;
animation-delay: 0.2s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.s-pager .wp-pagenavi .nextpostslink::before, .s-pager .wp-pagenavi .nextpostslink::after {
content: "";
width: 16px;
height: 14px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
animation-fill-mode: forwards;
animation-duration: 0.6s;
display: block;
}
.s-pager .wp-pagenavi .nextpostslink::after {
transform: translateX(-200%);
}
.s-pager .wp-pagenavi a {
width: 48px;
height: 48px;
border-radius: 50%;
font-weight: 500;
font-size: 20px;
color: #F84B20;
background: #fff;
display: block;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: none;
padding-bottom: 6px;
}
@media (max-width: 768px) {
.s-pager .wp-pagenavi a {
width: 38px;
height: 38px;
}
}
.s-pager .wp-pagenavi a:hover {
background: #F84B20;
color: #fff;
}
#top {
/*========================================================
fv
========================================================*/
/*========================================================
news
========================================================*/
/*========================================================
about
========================================================*/
/*========================================================
service
========================================================*/
/*========================================================
column
========================================================*/
/*========================================================
company
========================================================*/
/*========================================================
recruit
========================================================*/
}
#top .fv-inner {
position: relative;
width: 100%;
height: calc(100vh + 120px);
overflow: hidden;
z-index: 0;
}
@media (max-width: 768px) {
#top .fv-inner {
height: 100vh;
}
}
#top .fv-inner .section_bg {
position: absolute;
width: 100%;
bottom: -1px;
z-index: 999;
}
#top .fv-inner .fv-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100vh + 120px);
/* aspect-ratio: 90 / 59; */
opacity: 0;
z-index: 1;
display: block;
}
@media (max-width: 768px) {
#top .fv-inner .fv-img {
height: calc(100vh + 120px);
aspect-ratio: initial;
}
}
#top .fv-inner .fv-img.slider_01 {
background: url(../images/top/fv_01_pc.png) no-repeat;
background-size: cover;
background-position: 0 50%;
}
@media (max-width: 768px) {
#top .fv-inner .fv-img.slider_01 {
background: url(../images/top/fv_01_sp.png) no-repeat;
background-position: 0 30%;
background-size: cover;
}
}
#top .fv-inner .fv-img.slider_02 {
background: url(../images/top/fv_02_pc.png) no-repeat;
background-size: cover;
background-position: center bottom;
}
@media (max-width: 768px) {
#top .fv-inner .fv-img.slider_02 {
background: url(../images/top/fv_02_sp.png) no-repeat;
background-position: center bottom;
background-size: cover;
}
}
#top .fv-inner .fv-img.slider_03 {
background: url(../images/top/fv_03_pc.png) no-repeat;
background-size: cover;
background-position: 0 50%;
}
@media (max-width: 768px) {
#top .fv-inner .fv-img.slider_03 {
background: url(../images/top/fv_03_sp.png) no-repeat;
background-position: 50% 100%;
background-size: cover;
}
}
#top .fv-inner .fv-img.--show {
opacity: 1;
z-index: 111;
animation: slideBackground 10s linear;
}
#top .fv-logo {
position: absolute;
top: 3.8%;
left: 5.94%;
z-index: 99999;
}
@media (max-width: 768px) {
#top .fv-logo {
bottom: 30px;
left: 20px;
width: 150px;
}
}
#top .fv-text {
position: absolute;
bottom: 20%;
left: 11.46%;
color: #fff;
font-size: 40px;
letter-spacing: 0;
line-height: 180%;
position: absolute;
margin: 0;
z-index: 99999;
}
@media (max-width: 768px) {
#top .fv-text {
font-size: 29px;
bottom: 120px;
left: 20px;
}
}
#top .fv-text .fade-text {
display: inline-block;
transition: 0s;
opacity: 0;
}
#top .news .news-cat__list {
display: flex;
gap: 0 8px;
margin-bottom: 48px;
}
@media (max-width: 768px) {
#top .news .news-cat__list {
flex-wrap: wrap;
gap: 10px 8px;
margin-bottom: 32px;
}
}
#top .news .news-cat__list-item.--active a {
background: #C1B092;
color: #fff;
}
#top .news .news-cat__list-item a {
display: inline-block;
padding: 7px 24px;
color: #C1B092;
border: 1px solid #C1B092;
border-radius: 100px;
}
@media (max-width: 768px) {
#top .news .news-cat__list-item a {
padding: 7px 20px;
font-size: 12px;
}
}
#top .news .news-cat__list-item a:hover {
background: #C1B092;
color: #fff;
}
#top .about {
background: url(../images/top/about_bg_pc.png) no-repeat;
background-size: contain;
background-position: top center;
margin-top: 115px;
position: relative;
}
@media (max-width: 768px) {
#top .about {
background: url(../images/top/about_bg_sp.png) no-repeat;
background-size: contain;
}
}
#top .about__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 80px;
}
@media (max-width: 768px) {
#top .about__head {
display: block;
margin-bottom: 55px;
}
}
#top .about__head-txt {
line-height: 180%;
font-size: 16px;
color: #fff;
}
@media (max-width: 768px) {
#top .about__head-txt {
margin-bottom: 37px;
}
}
@media (max-width: 768px) {
#top .about__head .b-button__link {
margin: 0;
}
}
#top .about .about-flex {
display: flex;
gap: 0 30px;
justify-content: space-between;
align-items: flex-start;
}
@media (max-width: 992px) {
#top .about .about-flex {
display: block;
}
}
#top .about .about-flex__item {
width: calc(33.3333333333% - 15px);
background: #fff;
border-radius: 0 16px 0 16px;
padding: 32px 30px;
position: relative;
opacity: 0;
transform: translateY(50px);
transition: ease-in-out 0.7s;
}
@media (max-width: 992px) {
#top .about .about-flex__item {
transform: none;
width: 70%;
margin: 0 auto;
}
}
@media (max-width: 768px) {
#top .about .about-flex__item {
width: 100%;
}
}
#top .about .about-flex__item:nth-child(2) {
margin-top: 72px;
}
@media (max-width: 992px) {
#top .about .about-flex__item:nth-child(2) {
margin-top: 30px;
}
}
#top .about .about-flex__item:nth-child(3) {
margin-top: 144px;
}
@media (max-width: 992px) {
#top .about .about-flex__item:nth-child(3) {
margin-top: 30px;
}
}
#top .about .about-flex__item.fade-in {
opacity: 1;
transform: translateY(0px);
}
#top .about .about-flex__img {
display: block;
text-align: center;
margin-bottom: 30px;
}
@media (max-width: 768px) {
#top .about .about-flex__img {
width: 129px;
margin: 0 auto 30px;
}
}
#top .about .about-flex__ttl {
text-align: center;
}
@media (max-width: 1200px) {
#top .about .about-flex__ttl {
line-height: 180%;
}
}
#top .about .about-flex__ttl span {
display: inline-block;
font-size: 20px;
margin-bottom: 32px;
position: relative;
line-height: 150%;
}
@media (max-width: 768px) {
#top .about .about-flex__ttl span {
margin-bottom: 20px;
}
}
#top .about .about-flex__ttl span::before {
content: "";
width: 24px;
height: 24px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: absolute;
top: -14px;
left: -30px;
display: block;
}
@media (max-width: 768px) {
#top .about .about-flex__ttl span::before {
width: 20px;
height: 20px;
}
}
#top .about .about-flex__txt {
line-height: 180%;
height: 100px;
}
@media (max-width: 768px) {
#top .about .about-flex__txt {
height: auto;
}
}
#top .about .about-flex__num {
color: #F84B20;
opacity: 0.1;
font-size: 128px;
position: absolute;
bottom: -17px;
right: 6px;
}
@media (max-width: 768px) {
#top .about .about-flex__num {
font-size: 96px;
right: 8px;
bottom: -14px;
}
}
#top .service .service-layout__flex {
display: flex;
align-items: flex-start;
gap: 0 120px;
}
@media (max-width: 1200px) {
#top .service .service-layout__flex {
gap: 0 60px;
}
}
@media (max-width: 992px) {
#top .service .service-layout__flex {
display: block;
}
}
#top .service .service-layout__flex .flexitem__left {
width: calc(50% - 60px);
}
@media (max-width: 1200px) {
#top .service .service-layout__flex .flexitem__left {
width: calc(50% - 30px);
}
}
@media (max-width: 992px) {
#top .service .service-layout__flex .flexitem__left {
display: none;
}
}
#top .service .service-layout__flex .flexitem__right {
width: calc(50% - 60px);
}
@media (max-width: 1200px) {
#top .service .service-layout__flex .flexitem__right {
width: calc(50% - 30px);
}
}
@media (max-width: 992px) {
#top .service .service-layout__flex .flexitem__right {
width: 70%;
margin: 0 auto;
}
}
@media (max-width: 768px) {
#top .service .service-layout__flex .flexitem__right {
width: 100%;
}
}
#top .service .service-layout__flex .flexitem__right .flexitem__list {
position: relative;
}
#top .service .service-layout__flex .flexitem__right .flexitem__list + .flexitem__list {
margin-top: 16px;
}
#top .service .service-layout__flex .flexitem__right .flexitem__list .flexitem__link {
border-radius: 8px;
background: #F3EAD9;
padding: 32px 112px 32px 32px;
display: block;
}
@media (max-width: 768px) {
#top .service .service-layout__flex .flexitem__right .flexitem__list .flexitem__link {
padding: 24px 88px 24px 24px;
}
}
#top .service .service-layout__flex .flexitem__right .flexitem__list .flexitem__link.clicked {
opacity: 1 !important;
}
#top .service .service-layout__flex .flexitem__right .flexitem__list-ttl {
color: #F84B20;
font-size: 20px;
}
#top .service .service-layout__flex .flexitem__right .flexitem__list-txt {
font-size: 16px;
line-height: 180%;
color: #000;
height: 0px !important;
display: block;
overflow: hidden;
transition: ease-in-out 0.5s;
}
@media (max-width: 768px) {
#top .service .service-layout__flex .flexitem__right .flexitem__list-txt {
font-size: 14px;
}
}
#top .service .service-layout__flex .flexitem__right .flexitem__list-txt.fade-in {
margin-top: 16px;
height: 120px !important;
}
@media (max-width: 500px) {
#top .service .service-layout__flex .flexitem__right .flexitem__list-txt.fade-in {
height: 230px !important;
opacity: 1;
}
}
#top .service .service-layout__flex .flexitem__right .flexitem__list:hover .flexitem__link {
opacity: 0.6;
}
#top .service .service-layout__flex .flexitem__right .flexitem__list:hover .flexitem__list-arrow {
background: #F84B20;
}
#top .service .service-layout__flex .flexitem__right .flexitem__list:hover .flexitem__list-arrow .arrow::before {
animation-name: transformRightLeft;
animation-delay: 0s;
}
#top .service .service-layout__flex .flexitem__right .flexitem__list:hover .flexitem__list-arrow .arrow::after {
width: 16px;
height: 14px;
animation-name: transformLeftRight;
animation-delay: 0.2s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
#top .service .service-layout__flex .flexitem__right .flexitem__list-arrow {
width: 48px;
height: 48px;
overflow: hidden;
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
margin: auto 0;
line-height: 1;
border-radius: 100px;
background: #F84B20;
}
@media (max-width: 768px) {
#top .service .service-layout__flex .flexitem__right .flexitem__list-arrow {
width: 40px;
height: 40px;
right: 24px;
}
}
#top .service .service-layout__flex .flexitem__right .flexitem__list-arrow .arrow {
width: 16px;
height: 14px;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#top .service .service-layout__flex .flexitem__right .flexitem__list-arrow .arrow::before, #top .service .service-layout__flex .flexitem__right .flexitem__list-arrow .arrow::after {
content: "";
width: 12px;
height: 12px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
animation-fill-mode: forwards;
animation-duration: 0.6s;
display: block;
}
#top .service .service-layout__flex .flexitem__right .flexitem__list-arrow .arrow::after {
transform: translateX(-120%);
}
#top .service .service-layout__flex .flexitem__right .service__btn a {
margin: 40px 0 0 0;
}
#top .column {
background: url(../images/top/column_bg_pc.png) no-repeat;
background-size: cover;
background-position: top center;
position: relative;
padding-top: 80px;
}
@media (max-width: 766px) {
#top .column {
background: url(../images/top/column_bg_sp.png) no-repeat;
padding-top: 20px;
padding-bottom: 40px;
margin-top: 30px;
background-size: cover;
background-position: top center;
}
}
#top .column__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 140px;
}
@media (max-width: 1200px) {
#top .column__head {
margin-bottom: 100px;
}
}
@media (max-width: 766px) {
#top .column__head {
display: block;
margin-bottom: 60px;
}
}
#top .column__head-txt {
line-height: 180%;
font-size: 16px;
color: #fff;
}
@media (max-width: 766px) {
#top .column__head-txt {
margin-bottom: 35px;
}
}
@media (max-width: 766px) {
#top .column__head .b-button__link {
margin: 0;
}
}
#top .column .slick-slider div {
transition: none;
}
@media (max-width: 1440px) {
#top .column .column__slider {
padding: 0 50px 0;
}
}
@media (max-width: 766px) {
#top .column .column__slider {
padding: 0 0 80px 0;
}
}
#top .column .column__slider .slick-list {
padding-top: 50px;
}
@media (max-width: 768px) {
#top .column .column__slider .slick-list {
margin-left: -10px;
margin-right: -10px;
}
}
#top .column .column__slider .slider-arrow {
width: 48px;
height: 48px;
overflow: hidden;
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: auto 0;
line-height: 1;
border-radius: 100px;
background: #fff;
}
@media (max-width: 766px) {
#top .column .column__slider .slider-arrow {
bottom: 0px;
top: auto;
transform: translateY(0);
}
}
#top .column .column__slider .slider-arrow::before, #top .column .column__slider .slider-arrow::after {
display: none;
}
#top .column .column__slider .slider-arrow.--prev {
left: -80px;
}
@media (max-width: 1440px) {
#top .column .column__slider .slider-arrow.--prev {
left: -20px;
}
}
@media (max-width: 992px) {
#top .column .column__slider .slider-arrow.--prev {
left: -10px;
}
}
@media (max-width: 766px) {
#top .column .column__slider .slider-arrow.--prev {
right: 75px;
left: auto;
}
}
#top .column .column__slider .slider-arrow.--next {
right: -80px;
}
@media (max-width: 1440px) {
#top .column .column__slider .slider-arrow.--next {
right: -20px;
}
}
@media (max-width: 992px) {
#top .column .column__slider .slider-arrow.--next {
right: -10px;
}
}
@media (max-width: 766px) {
#top .column .column__slider .slider-arrow.--next {
right: 15px;
}
}
#top .column .column__slider .slider-arrow:hover {
color: #fff;
background: #F84B20;
}
#top .column .column__slider .slider-arrow:hover .arrow.--prev::before {
animation-name: transformLeftRotateRight;
animation-delay: 0.2s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
#top .column .column__slider .slider-arrow:hover .arrow.--prev::after {
animation-name: transformRightRotateLeft;
animation-delay: 0s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
#top .column .column__slider .slider-arrow:hover .arrow.--next::before {
animation-name: transformRightLeft;
animation-delay: 0s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
#top .column .column__slider .slider-arrow:hover .arrow.--next::after {
animation-name: transformLeftRight;
animation-delay: 0.2s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
#top .column .column__slider .slider-arrow .arrow {
width: 16px;
height: 14px;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#top .column .column__slider .slider-arrow .arrow::before, #top .column .column__slider .slider-arrow .arrow::after {
content: "";
width: 16px;
height: 14px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
animation-fill-mode: forwards;
animation-duration: 0.6s;
display: block;
}
#top .column .column__slider .slider-arrow .arrow.--prev::before, #top .column .column__slider .slider-arrow .arrow.--prev::after {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
transform: rotate(-180deg);
}
#top .column .column__slider .slider-arrow .arrow.--next::before, #top .column .column__slider .slider-arrow .arrow.--next::after {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
#top .column .column__slider .slider-arrow .arrow::after {
transform: translateX(-100%);
}
#top .column .column__slider-item {
background: #fff;
padding: 0 24px 32px;
border-radius: 0 16px 0 16px;
margin: 0 16px;
}
#top .column .column__slider-link {
color: #000;
}
#top .column .column__slider-link:hover .column__slider-ttl {
color: #F84B20;
opacity: 0.6;
}
#top .column .column__slider-img {
display: block;
transform: translateY(-50px);
}
#top .column .column__slider-date {
display: block;
margin-top: -28px;
font-size: 12px;
color: #AAAAAA;
}
#top .column .column__slider-ttl {
margin-top: 8px;
line-height: 180%;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
#top .column .column__slider .column__cat {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 26px;
}
#top .column .column__slider .column__cat-link a {
display: inline-block;
padding: 4px 16px 5px;
background: #C1B092;
color: #fff;
border: 1px solid #C1B092;
border-radius: 100px;
font-size: 12px;
}
@media (max-width: 768px) {
#top .column .column__slider .column__cat-link a {
padding: 7px 20px;
}
}
#top .column .column__slider .column__cat-link a:hover {
opacity: 0.6;
}
#top .company .company__inner {
padding: 300px 0 0;
background: url(../images/top/company_bg_pc.png) no-repeat;
background-size: contain;
background-position: top center;
width: 100%;
}
@media (max-width: 1200px) {
#top .company .company__inner {
padding: 200px 0 0;
}
}
@media (max-width: 768px) {
#top .company .company__inner {
background: url(../images/top/company_bg_sp.png) no-repeat;
background-size: contain;
background-position: top center;
padding: 164px 0 0;
}
}
#top .company .company-layout__flex {
display: flex;
}
#top .company .company-layout__flex .flex-item__left {
width: 1040px;
background: #fff;
padding: 80px 150px;
border-radius: 0 16px 16px 0;
margin-bottom: 50px;
}
@media (max-width: 1200px) {
#top .company .company-layout__flex .flex-item__left {
width: 80%;
padding: 50px 100px;
}
}
@media (max-width: 768px) {
#top .company .company-layout__flex .flex-item__left {
width: calc(100% - 40px);
padding: 40px 32px;
}
}
#top .company .company-layout__flex .company__head-txt {
font-size: 16px;
line-height: 180%;
margin-bottom: 50px;
}
#top .company .company-layout__flex .company__btn {
display: flex;
gap: 32px;
justify-content: flex-start;
}
@media (max-width: 768px) {
#top .company .company-layout__flex .company__btn {
display: block;
}
}
#top .company .company-layout__flex .company__btn a {
margin: 0;
}
@media (max-width: 768px) {
#top .company .company-layout__flex .company__btn a + a {
margin-top: 16px;
}
}
#top .company .company-layout__flex .flex-item__right {
position: relative;
}
#top .company .company-layout__flex .flex-item__right-txt {
font-size: 96px;
color: #C1B092;
line-height: 120%;
white-space: nowrap;
position: absolute;
transform: translateY(100%) rotate(90deg);
left: -200px;
bottom: 60px;
opacity: 0;
}
@media (max-width: 1200px) {
#top .company .company-layout__flex .flex-item__right-txt {
left: -300px;
}
}
@media (max-width: 768px) {
#top .company .company-layout__flex .flex-item__right-txt {
font-size: 56px;
left: -250px;
bottom: -260px;
}
}
#top .company .company-layout__flex .flex-item__right-txt.fade-in {
opacity: 0.3;
transform: translateY(0) rotate(90deg);
}
#top .recruit .recruit__inner {
position: relative;
}
#top .recruit .recruit__head {
width: 500px;
margin: 0 auto;
text-align: center;
}
@media (max-width: 992px) {
#top .recruit .recruit__head {
width: 100%;
}
}
#top .recruit .recruit__head-txt {
margin-bottom: 60px;
font-size: 16px;
line-height: 180%;
}
@media (max-width: 992px) {
#top .recruit .recruit__img {
margin-top: -150px;
position: relative;
width: 100%;
height: 310px;
display: block;
}
}
@media (max-width: 768px) {
#top .recruit .recruit__img {
margin-top: 48px;
}
}
#top .recruit .recruit__img img {
border-radius: 8px;
}
#top .recruit .recruit__img .recruit__img-01 {
position: absolute;
width: 294px;
height: auto;
top: 50px;
left: 0;
}
@media (max-width: 1200px) {
#top .recruit .recruit__img .recruit__img-01 {
width: 250px;
}
}
@media (max-width: 992px) {
#top .recruit .recruit__img .recruit__img-01 {
width: 195px;
top: 0;
}
}
#top .recruit .recruit__img .recruit__img-01.fade-in {
transition-delay: 0s;
}
#top .recruit .recruit__img .recruit__img-02 {
position: absolute;
width: 317px;
height: auto;
top: 50px;
right: 0;
}
@media (max-width: 1200px) {
#top .recruit .recruit__img .recruit__img-02 {
width: 250px;
}
}
@media (max-width: 992px) {
#top .recruit .recruit__img .recruit__img-02 {
width: 150px;
right: 20px;
}
}
@media (max-width: 768px) {
#top .recruit .recruit__img .recruit__img-02 {
top: 70px;
}
}
#top .recruit .recruit__img .recruit__img-02.fade-in {
transition-delay: 0.5s;
}
#top .recruit .recruit__img .recruit__img-03 {
position: absolute;
width: 216px;
height: auto;
bottom: 0;
left: 210px;
}
@media (max-width: 1200px) {
#top .recruit .recruit__img .recruit__img-03 {
width: 150px;
left: 150px;
}
}
@media (max-width: 992px) {
#top .recruit .recruit__img .recruit__img-03 {
width: 140px;
left: 34px;
bottom: 40px;
}
}
#top .recruit .recruit__img .recruit__img-03.fade-in {
transition-delay: 1s;
}
#top .recruit .recruit__img .recruit__img-04 {
position: absolute;
width: 178px;
height: auto;
bottom: 0;
right: 229px;
}
@media (max-width: 1200px) {
#top .recruit .recruit__img .recruit__img-04 {
width: 150px;
right: 150px;
}
}
@media (max-width: 992px) {
#top .recruit .recruit__img .recruit__img-04 {
width: 192px;
right: 0;
}
}
#top .recruit .recruit__img .recruit__img-04.fade-in {
transition-delay: 1.5s;
}
#top .recruit .recruit__img .break {
display: none;
}
@media (max-width: 992px) {
#top .recruit .recruit__img .break {
flex-basis: 100%;
display: block;
}
}
/*========================================================
about
========================================================*/
#about .about-point__flex {
display: flex;
justify-content: space-between;
padding: 40px 90px 40px 70px;
background: #fff;
position: relative;
overflow: hidden;
border-radius: 0 16px 0 16px;
}
@media (max-width: 992px) {
#about .about-point__flex {
display: block;
}
}
@media (max-width: 768px) {
#about .about-point__flex {
padding: 32px 32px 40px;
}
}
#about .about-point__flex + .about-point__flex {
margin-top: 20px;
}
#about .about-point__flex-item.--left {
width: 166px;
}
@media (max-width: 992px) {
#about .about-point__flex-item.--left {
width: 100%;
display: block;
text-align: center;
margin-bottom: 30px;
}
}
@media (max-width: 768px) {
#about .about-point__flex-item.--left {
width: 128px;
margin: 0 auto 20px;
}
}
#about .about-point__flex-item.--right {
width: calc(100% - 214px);
}
@media (max-width: 992px) {
#about .about-point__flex-item.--right {
width: 100%;
}
}
@media (max-width: 992px) {
#about .about-point__flex-item.--right .about-point__ttl {
text-align: center;
}
}
#about .about-point__flex-item.--right .about-point__ttl-txt {
padding: 10px 0 0 35px;
position: relative;
font-size: 24px;
margin-bottom: 44px;
display: inline-block;
}
@media (max-width: 992px) {
#about .about-point__flex-item.--right .about-point__ttl-txt {
margin-bottom: 24px;
}
}
@media (max-width: 768px) {
#about .about-point__flex-item.--right .about-point__ttl-txt {
font-size: 20px;
line-height: 150%;
transform: translateX(-10px);
}
}
#about .about-point__flex-item.--right .about-point__ttl-txt:before {
content: "";
width: 24px;
height: 24px;
position: absolute;
top: 0;
left: 0;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
#about .about-point__flex-item.--right .about-point__txt {
line-height: 180%;
}
#about .about-point__flex-item.--right .about-point__img {
margin-top: 44px;
display: block;
}
#about .about-point__flex-item.--right .about-point__num {
font-size: 200px;
color: #F84B20;
opacity: 0.1;
position: absolute;
bottom: -30px;
right: 48px;
}
@media (max-width: 768px) {
#about .about-point__flex-item.--right .about-point__num {
font-size: 120px;
right: 6px;
bottom: -18px;
}
}
#about .s-contents__flex a:nth-child(1) {
order: 2;
}
#about .s-contents__flex a:nth-child(2) {
order: 3;
}
#about .s-contents__flex a:nth-child(3) {
order: 1;
}
/*========================================================
service
========================================================*/
#service .service-content__flex {
display: flex;
align-items: center;
padding: 60px 0 60px 56px;
position: relative;
}
@media (max-width: 768px) {
#service .service-content__flex {
padding: 48px 22px;
flex-wrap: wrap;
overflow: hidden;
}
}
#service .service-content__flex + .service-content__flex {
margin-top: 40px;
}
#service .service-content__flex:before {
content: "";
width: 100%;
background: #F3EAD9;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#service .service-content__flex-item.--left {
width: calc(100% - 385px);
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
#service .service-content__flex-item.--left {
width: 100%;
}
}
#service .service-content__flex-item.--left .service-content__ttl {
font-size: 32px;
margin-bottom: 24px;
display: block;
color: #F84B20;
}
@media (max-width: 768px) {
#service .service-content__flex-item.--left .service-content__ttl {
font-size: 24px;
}
}
#service .service-content__flex-item.--left .service-content__ttl-txt {
display: block;
font-size: 20px;
margin-bottom: 24px;
}
@media (max-width: 768px) {
#service .service-content__flex-item.--left .service-content__ttl-txt {
font-size: 16px;
margin-bottom: 12px;
}
}
#service .service-content__flex-item.--left .service-content__txt {
line-height: 180%;
}
#service .service-content__flex-item.--right {
width: 385px;
transform: translateX(62px);
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
#service .service-content__flex-item.--right {
width: 100%;
text-align: center;
transform: translateX(0);
margin: 32px 0;
}
}
@media (max-width: 768px) {
#service .service-content__flex-item.--right img {
width: 100%;
}
}
@media (max-width: 768px) {
#service .service-content__flex .service-content__btn {
position: relative;
z-index: 1;
}
}
#service .service-content__flex .service-content__btn .b-button__link {
margin-left: 0;
margin-right: auto;
margin-top: 48px;
}
@media (max-width: 768px) {
#service .service-content__flex .service-content__btn .b-button__link {
margin-top: 0;
}
}
#service .service-content__flex .service-content__en-txt {
font-size: 128px;
color: #F84B20;
opacity: 0.1;
position: absolute;
bottom: 20px;
right: 0;
}
@media (max-width: 768px) {
#service .service-content__flex .service-content__en-txt {
font-size: 72px;
text-align: right;
bottom: -7px;
}
}
/*========================================================
company
========================================================*/
#company .section-ttl {
text-align: center;
margin-bottom: 80px;
}
@media (max-width: 768px) {
#company .section-ttl {
margin-bottom: 40px;
}
}
#company .section-ttl .--company {
display: inline-block;
}
@media (max-width: 768px) {
#company .section-ttl .--about {
display: inline-block;
margin-bottom: 0;
}
}
@media (max-width: 768px) {
#company .s-section__inner.--outline {
padding: 50px 0;
}
}
#company .company-info .company-info__row {
display: flex;
padding: 40px 60px;
line-height: 180%;
}
@media (max-width: 768px) {
#company .company-info .company-info__row {
padding: 16px 32px 24px;
flex-wrap: wrap;
}
}
#company .company-info .company-info__row:nth-child(odd) {
background: #F3EAD9;
}
#company .company-info .company-info__row:nth-child(even) {
background: #F9F5EC;
}
#company .company-info .company-info__item {
font-size: 18px;
}
#company .company-info .company-info__item:nth-child(1) {
width: 19.3%;
color: #F84B20;
}
@media (max-width: 768px) {
#company .company-info .company-info__item:nth-child(1) {
width: 100%;
display: block;
font-size: 16px;
}
}
#company .company-info .company-info__item:nth-child(2) {
width: 80.7%;
}
@media (max-width: 768px) {
#company .company-info .company-info__item:nth-child(2) {
width: 100%;
display: block;
font-size: 15px;
}
}
#company .company-info .company-info__item:nth-child(2).--setup {
line-height: 180%;
}
#company .access-flex {
display: flex;
justify-content: space-between;
}
@media (max-width: 768px) {
#company .access-flex {
display: block;
}
}
#company .access-flex__txt {
font-size: 18px;
line-height: 180%;
}
@media (max-width: 1200px) {
#company .access-flex__txt {
width: 40%;
}
}
@media (max-width: 768px) {
#company .access-flex__txt {
width: 100%;
font-size: 16px;
margin-bottom: 32px;
}
}
@media (max-width: 1200px) {
#company .access-flex__map {
width: 60%;
}
}
@media (max-width: 768px) {
#company .access-flex__map {
width: 100%;
}
}
@media (max-width: 1200px) {
#company .access-flex__map iframe {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
}
@media (max-width: 700px) {
#company .access-flex__map iframe {
height: 418px;
aspect-ratio: inherit;
}
}
#company .greeting {
background: url(../images/company/greeting_bg.png) no-repeat;
background-size: cover;
}
#company .greeting .greeting-flex {
display: flex;
}
@media (max-width: 768px) {
#company .greeting .greeting-flex {
display: block;
}
}
#company .greeting .greeting-flex__txt {
font-size: 16px;
line-height: 180%;
color: #fff;
padding-right: 48px;
width: calc(100% - 520px);
}
@media (max-width: 768px) {
#company .greeting .greeting-flex__txt {
width: 100%;
font-size: 14px;
padding: 0;
margin-bottom: 50px;
}
}
#company .greeting .greeting-flex__txt span {
font-size: 24px;
display: inline-block;
margin-left: 16px;
}
#company .greeting .greeting-flex__img {
width: 520px;
}
@media (max-width: 768px) {
#company .greeting .greeting-flex__img {
width: 100%;
text-align: center;
display: block;
}
}
/*========================================================
recruit
========================================================*/
#recruit .recruit {
margin-bottom: 100px;
}
#recruit .recruit .recruit__inner {
position: relative;
}
#recruit .recruit .recruit-head {
width: 550px;
margin: 0 auto;
text-align: center;
}
@media (max-width: 992px) {
#recruit .recruit .recruit-head {
width: 100%;
padding: 0 20px;
text-align: left;
}
}
#recruit .recruit .recruit-head .section-ttl {
text-align: center;
}
#recruit .recruit .recruit-head__ttl {
margin-bottom: 60px;
font-size: 32px;
line-height: 180%;
color: #F84B20;
text-align: center;
position: relative;
display: inline-block;
}
@media (max-width: 1200px) {
#recruit .recruit .recruit-head__ttl {
font-size: 24px;
}
}
@media (max-width: 992px) {
#recruit .recruit .recruit-head__ttl {
margin: 0 auto 80px;
font-size: 24px;
}
}
@media (max-width: 768px) {
#recruit .recruit .recruit-head__ttl {
margin-bottom: 24px;
font-size: 20px;
}
}
#recruit .recruit .recruit-head__ttl .icon-plus {
width: 36px;
height: 36px;
position: absolute;
top: 0;
left: 0;
}
@media (max-width: 768px) {
#recruit .recruit .recruit-head__ttl .icon-plus {
width: 24px;
height: 24px;
}
}
#recruit .recruit .recruit-head__ttl .icon-plus:before {
content: "";
width: 36px;
height: 36px;
background-image: url(../images/common/icon_plus_lg.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: absolute;
top: 0;
left: 0;
display: block;
}
@media (max-width: 768px) {
#recruit .recruit .recruit-head__ttl .icon-plus:before {
width: 24px;
height: 24px;
}
}
#recruit .recruit .recruit-head__ttl-txt {
display: inline-block;
padding-left: 64px;
}
@media (max-width: 768px) {
#recruit .recruit .recruit-head__ttl-txt {
padding-left: 32px;
}
}
#recruit .recruit .recruit-head__txt {
margin-bottom: 60px;
font-size: 16px;
line-height: 180%;
text-align: left;
}
@media (max-width: 768px) {
#recruit .recruit .recruit-head__txt {
font-size: 14px;
}
}
@media (max-width: 992px) {
#recruit .recruit .recruit__img {
position: relative;
width: 100%;
height: 310px;
display: block;
}
}
@media (max-width: 768px) {
#recruit .recruit .recruit__img {
margin-top: 48px;
}
}
#recruit .recruit .recruit__img img {
border-radius: 8px;
}
#recruit .recruit .recruit__img .recruit__img-01 {
position: absolute;
width: 294px;
height: auto;
top: 50px;
left: 0;
}
@media (max-width: 1200px) {
#recruit .recruit .recruit__img .recruit__img-01 {
width: 195px;
top: 0;
}
}
#recruit .recruit .recruit__img .recruit__img-01.fade-in {
transition-delay: 0s;
}
#recruit .recruit .recruit__img .recruit__img-02 {
position: absolute;
width: 317px;
height: auto;
top: 50px;
right: 0;
}
@media (max-width: 1200px) {
#recruit .recruit .recruit__img .recruit__img-02 {
width: 150px;
top: 70px;
right: 0;
}
}
#recruit .recruit .recruit__img .recruit__img-02.fade-in {
transition-delay: 0.5s;
}
#recruit .recruit .recruit__img .recruit__img-03 {
position: absolute;
width: 216px;
height: auto;
bottom: 0;
left: 100px;
}
@media (max-width: 1200px) {
#recruit .recruit .recruit__img .recruit__img-03 {
width: 140px;
bottom: 40px;
left: 34px;
}
}
#recruit .recruit .recruit__img .recruit__img-03.fade-in {
transition-delay: 1s;
}
#recruit .recruit .recruit__img .recruit__img-04 {
position: absolute;
width: 178px;
height: auto;
bottom: 0;
right: 148px;
}
@media (max-width: 1200px) {
#recruit .recruit .recruit__img .recruit__img-04 {
width: 192px;
right: 0;
bottom: 0;
}
}
#recruit .recruit .recruit__img .recruit__img-04.fade-in {
transition-delay: 1.5s;
}
#recruit .recruit .recruit__img .break {
display: none;
}
@media (max-width: 992px) {
#recruit .recruit .recruit__img .break {
flex-basis: 100%;
display: block;
}
}
#recruit .culture {
background: url(../images/recruit/culture_bg.png) no-repeat;
background-size: contain;
background-position: top center;
padding: 170px 0 100px;
}
@media (max-width: 1440px) {
#recruit .culture {
padding: 70px 0 100px;
}
}
@media (max-width: 992px) {
#recruit .culture {
background: url(../images/recruit/culture_bg_sp.png) no-repeat;
background-size: contain;
background-position: top center;
padding: 70px 0 100px;
}
}
#recruit .culture .culture-content {
padding: 64px 240px 64px 64px;
background: #fff;
position: relative;
}
@media (max-width: 768px) {
#recruit .culture .culture-content {
padding: 32px 24px 50px;
border-radius: 8px;
}
}
#recruit .culture .culture-head__txt {
font-size: 28px;
line-height: 180%;
margin-bottom: 50px;
}
@media (max-width: 768px) {
#recruit .culture .culture-head__txt {
font-size: 20px;
}
}
@media (max-width: 768px) {
#recruit .culture .section_ttl {
text-align: left;
}
}
#recruit .culture .section_ttl .s-ttl {
margin-bottom: 64px;
}
#recruit .culture .culture-ttl {
font-size: 20px;
color: #F84B20;
padding-left: 40px;
position: relative;
margin-bottom: 30px;
display: block;
}
@media (max-width: 768px) {
#recruit .culture .culture-ttl {
padding-left: 28px;
font-size: 18px;
}
}
#recruit .culture .culture-ttl::before {
content: "";
width: 24px;
height: 24px;
position: absolute;
top: -7px;
left: 0;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
display: block;
}
@media (max-width: 768px) {
#recruit .culture .culture-ttl::before {
width: 20px;
height: 20px;
}
}
#recruit .culture .culture-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
#recruit .culture .culture-list__item {
padding: 11px 16px;
background: #F6F1E8;
border-radius: 0 16px 0 16px;
font-size: 16px;
}
@media (max-width: 768px) {
#recruit .culture .culture-list__item {
width: 100%;
display: block;
text-align: center;
line-height: 150%;
padding: 16px 0;
}
}
#recruit .culture .culture-txt__en {
font-size: 96px;
color: #C1B092;
transform: translateY(100px) rotate(90deg);
position: absolute;
top: 245px;
right: -360px;
opacity: 0.3;
line-height: 120%;
opacity: 0;
}
@media (max-width: 1440px) {
#recruit .culture .culture-txt__en {
right: -300px;
}
}
@media (max-width: 1200px) {
#recruit .culture .culture-txt__en {
font-size: 60px;
right: -200px;
top: 200px;
}
}
@media (max-width: 768px) {
#recruit .culture .culture-txt__en {
transform: translateY(0) rotate(0);
font-size: 42px;
text-align: center;
top: auto;
bottom: -80px;
}
}
#recruit .culture .culture-txt__en.fade-in {
opacity: 0.3;
transform: translateY(0) rotate(90deg);
}
@media (max-width: 768px) {
#recruit .culture .culture-txt__en.fade-in {
left: 0;
right: 0;
transform: translateY(-5px) rotate(0);
}
}
@media (max-width: 768px) {
#recruit .environment {
padding: 0 0px 80px;
}
}
@media (max-width: 768px) {
#recruit .environment .s-ttl__desp {
display: inline-block;
margin: 0 auto 10px;
}
}
#recruit .environment .environment-flex {
display: flex;
padding-bottom: 48px;
border-bottom: 1px solid #DDDDDD;
margin-bottom: 48px;
}
@media (max-width: 768px) {
#recruit .environment .environment-flex {
flex-wrap: wrap;
}
}
#recruit .environment .environment-flex:last-child {
border-bottom: 0;
}
@media (max-width: 768px) {
#recruit .environment .environment-flex:last-child {
padding-bottom: 0;
margin-bottom: 0;
}
}
#recruit .environment .environment-flex__item.--txt {
width: calc(100% - 522px);
padding: 48px 40px 0;
}
@media (max-width: 1200px) {
#recruit .environment .environment-flex__item.--txt {
width: 50%;
padding: 20px 20px 0;
}
}
@media (max-width: 768px) {
#recruit .environment .environment-flex__item.--txt {
width: 100%;
order: 1;
padding: 0 0;
}
}
#recruit .environment .environment-flex__item.--img {
width: 522px;
}
@media (max-width: 1200px) {
#recruit .environment .environment-flex__item.--img {
width: 50%;
}
}
@media (max-width: 768px) {
#recruit .environment .environment-flex__item.--img {
width: 100%;
order: 2;
margin-top: 30px;
}
}
@media (max-width: 768px) {
#recruit .environment .environment-flex__item.--img img {
width: 100%;
}
}
#recruit .environment .environment-flex__ttl {
font-size: 36px;
color: #F84B20;
padding-left: 40px;
position: relative;
margin-bottom: 30px;
display: block;
font-weight: 500;
}
#recruit .environment .environment-flex__ttl::before {
content: "";
width: 24px;
height: 24px;
position: absolute;
top: -7px;
left: 0;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
display: block;
}
#recruit .environment .environment-flex__ttl-sub {
font-size: 16px;
font-weight: normal;
}
@media (max-width: 1200px) {
#recruit .environment .environment-flex__ttl-sub {
display: block;
margin-top: 10px;
}
}
#recruit .environment .environment-flex__txt {
line-height: 180%;
}
#recruit .news {
background: #F3EAD9;
}
#recruit .news .news-head {
display: flex;
align-items: center;
}
@media (max-width: 992px) {
#recruit .news .news-head {
display: block;
}
}
#recruit .news .news-head__txt {
font-size: 16px;
line-height: 180%;
margin-bottom: 80px;
margin-left: 120px;
}
@media (max-width: 992px) {
#recruit .news .news-head__txt {
margin: 0 0 40px 0px;
text-align: left;
font-size: 14px;
}
}
@media (max-width: 768px) {
#recruit .news .b-button__link {
margin: 0;
}
}
#recruit .message {
background: url(../images/company/greeting_bg.png) no-repeat;
background-size: cover;
}
#recruit .message .message-flex {
display: flex;
}
@media (max-width: 768px) {
#recruit .message .message-flex {
display: block;
}
}
#recruit .message .message-flex__txt {
font-size: 16px;
line-height: 180%;
color: #fff;
padding-right: 48px;
width: calc(100% - 520px);
}
@media (max-width: 1200px) {
#recruit .message .message-flex__txt {
width: 60%;
}
}
@media (max-width: 768px) {
#recruit .message .message-flex__txt {
width: 100%;
padding-right: 0;
margin-bottom: 40px;
}
}
#recruit .message .message-flex__txt .message-flex__txt-l {
font-size: 24px;
display: inline-block;
margin-left: 16px;
}
@media (max-width: 768px) {
#recruit .message .message-flex__txt .message-flex__txt-l {
font-size: 20px;
}
}
#recruit .message .message-flex__ttl {
align-items: baseline;
padding-top: 20px;
}
@media (max-width: 1200px) {
#recruit .message .message-flex__ttl {
display: block;
margin-bottom: 40px;
}
}
@media (max-width: 1200px) {
#recruit .message .message-flex__ttl .s-ttl__desp {
margin-top: 20px;
margin-bottom: 0;
}
}
@media (max-width: 768px) {
#recruit .message .message-flex p {
font-size: 14px;
}
}
#recruit .message .message-flex__img {
width: 520px;
}
@media (max-width: 1200px) {
#recruit .message .message-flex__img {
width: 40%;
}
}
@media (max-width: 768px) {
#recruit .message .message-flex__img {
width: 100%;
display: block;
text-align: center;
}
}
#recruit .entry {
margin-top: 150px;
background: url(../images/common/footer_bg.png) no-repeat;
background-position: center bottom;
background-size: contain;
padding-bottom: 100px;
}
@media (max-width: 768px) {
#recruit .entry {
margin-top: 50px;
}
}
#recruit .entry .entry-inner {
padding: 80px 0;
background: url(../images/recruit/entry_bg.png) no-repeat;
background-position: center center;
background-size: cover;
}
@media (max-width: 768px) {
#recruit .entry .entry-inner {
margin-bottom: 50px;
}
}
@media (max-width: 500px) {
#recruit .entry .entry-inner {
background: url(../images/recruit/entry_bg_sp.png) no-repeat;
background-position: center center;
background-size: cover;
margin-bottom: 0;
}
}
#recruit .entry .entry-inner .section-ttl {
text-align: center;
color: #fff;
margin-bottom: 40px;
}
#recruit .entry .entry-inner .entry-txt {
color: #fff;
font-size: 16px;
line-height: 180%;
text-align: center;
margin-bottom: 40px;
}
@media (max-width: 768px) {
#recruit .entry .entry-inner .entry-txt {
font-size: 14px;
text-align: left;
padding: 0 20px;
}
}
/*========================================================
other
========================================================*/
#other .other .other-flex {
display: flex;
margin-bottom: 40px;
}
@media (max-width: 1300px) {
#other .other .other-flex {
align-items: center;
justify-content: space-between;
}
}
@media (max-width: 992px) {
#other .other .other-flex {
flex-wrap: wrap;
background: #F3EAD9;
padding: 40px 24px 30px;
margin-bottom: 24px;
}
}
#other .other .other-flex__item.--txt {
width: calc(100% - 424px);
padding: 40px 40px 56px;
background: #F3EAD9;
}
@media (max-width: 1300px) {
#other .other .other-flex__item.--txt {
padding: 20px 20px 30px;
width: calc(100% - 450px);
}
}
@media (max-width: 992px) {
#other .other .other-flex__item.--txt {
width: 100%;
order: 1;
padding: 0;
background: none;
}
}
#other .other .other-flex__item.--txt.--left {
border-radius: 8px 0 0 8px;
}
#other .other .other-flex__item.--txt.--right {
border-radius: 0 8px 8px 0;
}
#other .other .other-flex__item.--img {
width: 424px;
}
@media (max-width: 992px) {
#other .other .other-flex__item.--img {
width: 100%;
order: 2;
margin-top: 30px;
text-align: center;
}
}
@media (max-width: 768px) {
#other .other .other-flex__item.--img {
border-radius: 8px;
overflow: hidden;
}
}
#other .other .other-flex__ttl {
font-size: 24px;
color: #F84B20;
margin-bottom: 24px;
display: block;
}
@media (max-width: 768px) {
#other .other .other-flex__ttl {
line-height: 150%;
}
}
#other .other .other-flex__ttl-sub {
font-size: 20px;
display: block;
font-weight: normal;
margin-bottom: 24px;
}
@media (max-width: 768px) {
#other .other .other-flex__ttl-sub {
font-size: 16px;
margin-bottom: 8px;
}
}
#other .other .other-flex__txt {
line-height: 180%;
}
/*========================================================
price
========================================================*/
#price .price .att-txt {
font-size: 16px;
margin-bottom: 60px;
}
#price .price .price-ttl {
font-size: 24px;
padding-left: 35px;
padding-top: 16px;
position: relative;
margin-bottom: 30px;
display: block;
}
@media (max-width: 992px) {
#price .price .price-ttl {
font-size: 18px;
margin-bottom: 24px;
}
}
#price .price .price-ttl::before {
content: "";
width: 24px;
height: 24px;
position: absolute;
top: 0;
left: 0;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
display: block;
}
@media (max-width: 992px) {
#price .price .price-ttl::before {
width: 20px;
height: 20px;
}
}
@media (max-width: 992px) {
#price .price .price-scroll {
overflow-x: scroll;
}
}
@media (max-width: 768px) {
#price .price .price-scroll {
margin-bottom: 48px;
}
}
@media (max-width: 768px) {
#price .price .price-scroll table {
margin: 0;
}
}
#price .price table {
margin-bottom: 80px;
}
@media (max-width: 992px) {
#price .price table {
width: 1200px;
}
}
@media (max-width: 768px) {
#price .price table {
width: -moz-max-content;
width: max-content;
margin-bottom: 48px;
}
}
#price .price table thead th {
background: #4F4030;
color: #fff;
line-height: 150%;
font-size: 16px;
text-align: center;
padding: 22px 24px;
font-weight: normal;
border: solid #D9D9D9;
border-width: 0 1px 0 0;
}
@media (max-width: 992px) {
#price .price table thead th {
font-size: 14px;
font-weight: 500;
}
}
#price .price table thead th:last-child {
border: none;
}
#price .price table tbody td {
font-size: 16px;
padding: 15px 24px;
background: #fff;
border: solid #D9D9D9;
border-width: 0 1px 1px 0;
text-align: left;
}
@media (max-width: 768px) {
#price .price table tbody td {
font-size: 14px !important;
}
}
#price .price table tbody td:first-child {
background: #99886A;
color: #fff;
}
#price .price table tbody td:last-child {
border-width: 0 0 1px 0;
}
@media (max-width: 992px) {
#price .price table tbody td {
font-size: 14px;
}
}
#price .price .table-flex {
display: flex;
}
@media (max-width: 992px) {
#price .price .table-flex {
display: block;
}
}
#price .price .table-flex__item table {
width: 448px;
}
@media (max-width: 992px) {
#price .price .table-flex__item table {
width: 100%;
}
}
#price .price .table-flex__item + .table-flex__item {
margin-left: 80px;
}
@media (max-width: 992px) {
#price .price .table-flex__item + .table-flex__item {
margin: 0;
}
}
/*========================================================
news
========================================================*/
.news .news-cat {
font-weight: 500;
padding-left: 24px;
position: relative;
margin-bottom: 16px;
}
.news .news-cat:before {
content: "";
width: 16px;
height: 16px;
background: url(../images/common/icon_plus.png) no-repeat;
background-position: center center;
background-size: contain;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
}
.news .news-cat__list {
display: flex;
gap: 0 8px;
margin-bottom: 48px;
}
@media (max-width: 768px) {
.news .news-cat__list {
flex-wrap: wrap;
gap: 8px 8px;
}
}
.news .news-cat__list-item.--active a {
background: #C1B092;
color: #fff;
}
.news .news-cat__list-item a {
display: inline-block;
padding: 7px 24px;
color: #C1B092;
border: 1px solid #C1B092;
border-radius: 100px;
}
@media (max-width: 768px) {
.news .news-cat__list-item a {
padding: 7px 20px;
font-size: 12px;
}
}
.news .news-cat__list-item a:hover {
background: #C1B092;
color: #fff;
}
/*========================================================
single
========================================================*/
#single .single .single-head {
padding-bottom: 40px;
margin-bottom: 40px;
border-bottom: 1px solid #DDDDDD;
display: flex;
align-items: center;
flex-wrap: wrap;
}
@media (max-width: 768px) {
#single .single .single-head {
padding-bottom: 32px;
margin-bottom: 32px;
}
}
#single .single .single-head__date {
font-size: 16px;
margin-right: 16px;
display: inline-block;
}
@media (max-width: 768px) {
#single .single .single-head__date {
font-size: 12px;
}
}
#single .single .single-head__cat {
display: inline-block;
padding: 4px 16px 5px;
color: #fff;
border: 1px solid #C1B092;
border-radius: 100px;
background: #C1B092;
font-size: 12px;
}
#single .single .single-head__ttl {
width: 100%;
margin-top: 8px;
line-height: 180%;
font-size: 24px;
}
@media (max-width: 768px) {
#single .single .single-head__ttl {
font-size: 18px;
}
}
#single .single .single-content__thum {
margin-bottom: 40px;
}
#single .single .single-content * {
margin-bottom: 24px;
line-height: 150%;
}
#single .single .single-content h2 {
color: #F84B20;
font-size: 20px;
padding-left: 36px;
position: relative;
}
@media (max-width: 768px) {
#single .single .single-content h2 {
font-size: 18px;
padding-left: 30px;
}
}
#single .single .single-content h2::before {
content: "";
width: 20px;
height: 20px;
background: url(../images/common/icon_plus.png) no-repeat;
background-position: center center;
background-size: contain;
position: absolute;
top: 0;
left: 0;
display: block;
}
#single .single .single-content h3 {
font-size: 18px;
}
#single .single .single-content p {
line-height: 180%;
}
#single .single .single-content a {
color: #F84B20;
text-decoration: underline;
}
#single .single .single-back {
margin-top: 50px;
}
#single .single .single-back .--single {
transform: rotate(-180deg);
}
#single .others {
background: #F3EAD9;
}
#single .others .section-ttl {
text-align: center;
}
/*========================================================
column
========================================================*/
#column .column .column-cat {
font-weight: 500;
padding-left: 24px;
position: relative;
margin-bottom: 16px;
}
#column .column .column-cat:before {
content: "";
width: 16px;
height: 16px;
background: url(../images/common/icon_plus.png) no-repeat;
background-position: center center;
background-size: contain;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
}
#column .column .column-cat__list {
display: flex;
gap: 0 8px;
margin-bottom: 120px;
}
@media (max-width: 768px) {
#column .column .column-cat__list {
flex-wrap: wrap;
gap: 10px 8px;
}
}
#column .column .column-cat__list-item.--active a {
background: #C1B092;
color: #fff;
}
#column .column .column-cat__list-item a {
display: inline-block;
padding: 7px 24px;
color: #C1B092;
border: 1px solid #C1B092;
border-radius: 100px;
}
@media (max-width: 768px) {
#column .column .column-cat__list-item a {
padding: 7px 20px;
font-size: 12px;
}
}
#column .column .column-cat__list-item a:hover {
background: #C1B092;
color: #fff;
}
#column .column .column-list {
display: flex;
flex-wrap: wrap;
gap: 120px 32px;
margin-bottom: 80px;
}
@media (max-width: 768px) {
#column .column .column-list {
gap: 100px 30px;
}
}
#column .column .column-list__item {
width: calc(33.3333333333% - 32px);
background: #fff;
padding: 0 24px 32px;
border-radius: 0 16px 0 16px;
}
@media (max-width: 768px) {
#column .column .column-list__item {
width: calc(50% - 32px);
}
}
@media (max-width: 500px) {
#column .column .column-list__item {
width: 100%;
}
}
#column .column .column-list__item:hover .column-list__ttl {
color: #F84B20;
opacity: 0.6;
}
#column .column .column-list__link {
color: #000;
}
#column .column .column-list__img {
display: block;
transform: translateY(-50px);
}
#column .column .column-list__date {
display: block;
margin-top: -28px;
font-size: 12px;
color: #AAAAAA;
}
#column .column .column-list__ttl {
margin-top: 8px;
line-height: 180%;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
#column .column .column-list__cat {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 26px;
}
#column .column .column-list__cat-link a {
display: inline-block;
padding: 3px 16px;
background: #C1B092;
color: #fff;
border: 1px solid #C1B092;
border-radius: 100px;
font-size: 12px;
margin: 0;
}
#column .column .column-list__cat-link a:hover {
opacity: 0.6;
}
/*========================================================
single-column
========================================================*/
#single-column .head-flex {
display: flex;
justify-content: space-between;
margin-bottom: 120px;
margin-top: 80px;
}
@media (max-width: 1440px) {
#single-column .head-flex {
margin-top: 50px;
margin-bottom: 0;
}
}
@media (max-width: 992px) {
#single-column .head-flex {
display: block;
}
}
@media (max-width: 992px) {
#single-column .head-flex__item {
width: 100%;
}
}
#single-column .head-flex__item:nth-child(1) {
width: 60%;
}
@media (max-width: 1440px) {
#single-column .head-flex__item:nth-child(1) {
width: 50%;
}
}
@media (max-width: 768px) {
#single-column .head-flex__item:nth-child(1) {
width: 100%;
}
}
#single-column .head-flex__item:nth-child(2) {
width: 40%;
}
@media (max-width: 1440px) {
#single-column .head-flex__item:nth-child(2) {
width: 50%;
}
}
@media (max-width: 768px) {
#single-column .head-flex__item:nth-child(2) {
width: 100%;
}
}
@media (max-width: 992px) {
#single-column .head-flex__item + .head-flex__item {
width: 100%;
padding-left: 20px;
margin-top: 50px;
}
}
#single-column .head-flex__item-txt {
padding: 0 60px 0 150px;
}
@media (max-width: 1200px) {
#single-column .head-flex__item-txt {
padding: 0 40px;
}
}
@media (max-width: 768px) {
#single-column .head-flex__item-txt {
padding: 0 20px;
}
}
#single-column .head-flex__item-date {
font-size: 16px;
margin-bottom: 16px;
display: block;
}
#single-column .head-flex__item-ttl {
font-size: 24px;
line-height: 180%;
margin-bottom: 16px;
}
@media (max-width: 768px) {
#single-column .head-flex__item-ttl {
font-size: 18px;
}
}
#single-column .head-flex__item-cat {
display: inline-block;
padding: 3px 16px;
background: #C1B092;
color: #fff;
border: 1px solid #C1B092;
border-radius: 100px;
font-size: 12px;
}
#single-column .head-flex__item-cat a {
color: #fff;
}
#single-column .head-flex__item-cat:hover {
opacity: 0.6;
}
#single-column .head-flex__item-img {
width: 100%;
height: 400px;
display: block;
border-radius: 8px 0 0 8px;
}
@media (max-width: 768px) {
#single-column .head-flex__item-img {
height: 210px;
}
}
#single-column .column-content__toc {
background: #fff;
width: 64.58%;
margin: 0 auto 120px;
padding: 50px 100px;
counter-reset: number 0;
}
@media (max-width: 992px) {
#single-column .column-content__toc {
width: 100%;
margin: 0 0 50px;
}
}
@media (max-width: 768px) {
#single-column .column-content__toc {
padding: 40px 20px;
}
}
#single-column .column-content__toc-ttl {
display: block;
text-align: center;
margin-bottom: 30px;
}
#single-column .column-content__toc-ttl span {
display: block;
}
#single-column .column-content__toc-ttl span:nth-child(1) {
color: #F84B20;
margin-bottom: 16px;
}
#single-column .column-content__toc-ttl span:nth-child(2) {
font-size: 20px;
}
#single-column .column-content__toc-list {
font-size: 16px;
color: #F84B20;
padding: 18px 10px;
border-bottom: 1px solid #ddd;
}
@media (max-width: 768px) {
#single-column .column-content__toc-list {
font-size: 14px;
}
}
#single-column .column-content__toc-list a {
color: #F84B20;
}
#single-column .column-content__toc-list a:hover {
opacity: 0.7;
}
#single-column .column-content__toc-list:before {
counter-increment: number 1;
content: counter(number) ". ";
font-size: 20px;
}
#single-column .content {
line-height: 180%;
font-family: "Zen Kaku Gothic New", sans-serif !important;
}
#single-column .content * {
margin-bottom: 32px;
}
@media (max-width: 768px) {
#single-column .content * {
margin-bottom: 24px;
}
}
#single-column .content h2 {
padding: 20px 10px;
border-bottom: 1px solid #ddd;
position: relative;
font-size: 20px;
color: #F84B20;
}
@media (max-width: 768px) {
#single-column .content h2 {
font-size: 18px;
}
}
#single-column .content h2:before {
content: "";
width: 147px;
height: 5px;
background: #F84B20;
position: absolute;
bottom: -5px;
left: 0;
}
#single-column .content h3 {
font-size: 20px;
color: #F84B20;
padding: 4px 10px 4px 36px;
position: relative;
}
@media (max-width: 768px) {
#single-column .content h3 {
font-size: 18px;
padding: 2px 10px 2px 30px;
}
}
#single-column .content h3:before {
content: "";
width: 20px;
height: 20px;
background: url(../images/common/icon_plus.png) no-repeat;
background-position: center center;
background-size: contain;
position: absolute;
top: 0;
left: 0;
}
#single-column .content h4 {
font-size: 16px;
}
#single-column .content a {
display: block;
width: 382px;
line-height: 64px;
border-radius: 100px;
text-align: center;
color: #fff;
background: #F84B20;
font-size: 16px;
position: relative;
}
#single-column .content a:hover {
opacity: 0.7;
}
@media (max-width: 599px) {
#single-column .content a {
width: 100%;
}
}
#single-column .content a:before {
content: "";
width: 48px;
height: 48px;
background: #fff;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
right: 8px;
margin: auto;
}
#single-column .content a:after {
content: "";
width: 18px;
height: 14px;
background: url(../images/common/icon_blank.png) no-repeat;
background-position: center center;
background-size: contain;
position: absolute;
top: 0;
bottom: 0;
right: 23px;
margin: auto;
}
#single-column .content-point {
padding: 60px 40px;
background: #F3EAD9;
}
@media (max-width: 768px) {
#single-column .content-point {
margin-bottom: 50px;
padding: 40px 20px;
}
}
#single-column .content-point__ttl {
text-align: center;
font-size: 20px;
color: #F84B20;
margin-bottom: 24px;
position: relative;
display: inline-block;
padding-left: 33px;
}
@media (max-width: 768px) {
#single-column .content-point__ttl {
font-size: 18px;
text-align: left;
}
}
#single-column .content-point__ttl:before {
content: "";
width: 20px;
height: 20px;
background: url(../images/common/icon_plus.png) no-repeat;
background-position: center center;
background-size: contain;
position: absolute;
top: 0;
left: 0;
}
@media (max-width: 768px) {
#single-column .content-point__txt {
margin: 0;
}
}
#single-column .prev-next__flex {
display: flex;
position: relative;
margin-top: 120px;
}
#single-column .prev-next__flex::before {
content: "";
width: 1px;
height: 100%;
background: #ddd;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
#single-column .prev-next__flex .prev-next__item {
width: 50%;
padding: 20px 100px;
position: relative;
}
@media (max-width: 992px) {
#single-column .prev-next__flex .prev-next__item {
padding: 10px 16px 10px 60px;
}
}
@media (max-width: 768px) {
#single-column .prev-next__flex .prev-next__item {
padding: 10px 16px 10px 30px;
}
}
#single-column .prev-next__flex .prev-next__item.--back {
display: flex;
align-items: center;
}
#single-column .prev-next__flex .prev-next__item.--back span {
margin-bottom: 0;
}
@media (max-width: 992px) {
#single-column .prev-next__flex .prev-next__item.--next {
padding: 10px 60px 10px 16px;
}
}
@media (max-width: 768px) {
#single-column .prev-next__flex .prev-next__item.--next {
padding: 10px 30px 10px 16px;
}
}
#single-column .prev-next__flex .prev-next__item:hover .prev-next__item-ttl {
opacity: 0.6;
}
#single-column .prev-next__flex .prev-next__item:hover .b-button__arrow-item::before {
animation-name: transformRightLeft;
animation-delay: 0s;
}
#single-column .prev-next__flex .prev-next__item:hover .b-button__arrow-item::after {
animation-name: transformLeftRight;
animation-delay: 0.2s;
}
@media (max-width: 768px) {
#single-column .prev-next__flex .prev-next__item .b-button__arrow {
width: 15px;
height: 12px;
background: none;
}
}
#single-column .prev-next__flex .prev-next__item-arrow {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
#single-column .prev-next__flex .prev-next__item-arrow.--prev {
left: 0;
transform: rotate(-180deg);
}
#single-column .prev-next__flex .prev-next__item-arrow.--next {
right: 0;
}
#single-column .prev-next__flex .prev-next__item-txt {
font-size: 20px;
color: #F84B20;
display: block;
margin-bottom: 10px;
}
@media (max-width: 768px) {
#single-column .prev-next__flex .prev-next__item-txt {
font-size: 14px;
}
}
#single-column .prev-next__flex .prev-next__item-ttl {
font-size: 16px;
line-height: 180%;
color: #000;
}
@media (max-width: 768px) {
#single-column .prev-next__flex .prev-next__item-ttl {
font-size: 12px;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
#single-column .single-back {
margin-top: 50px;
}
#single-column .single-back .--single {
transform: rotate(-180deg);
}
#single-column .others {
background: #F3EAD9;
}
#single-column .others .section-ttl {
text-align: center;
margin-bottom: 40px;
}
#single-column .others .others__slider {
margin-bottom: 50px;
}
@media (max-width: 1440px) {
#single-column .others .others__slider {
padding: 0 50px 0;
}
}
@media (max-width: 766px) {
#single-column .others .others__slider {
padding: 0 0 80px 0;
}
}
@media (max-width: 599px) {
#single-column .others .others__slider {
padding: 0 0 0px 0;
}
}
#single-column .others .others__slider .slick-list {
padding-top: 50px;
}
#single-column .others .others__slider .slider-arrow {
width: 48px;
height: 48px;
overflow: hidden;
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: auto 0;
line-height: 1;
border-radius: 100px;
background: #fff;
}
@media (max-width: 766px) {
#single-column .others .others__slider .slider-arrow {
bottom: 0px;
top: auto;
transform: translateY(0);
}
}
#single-column .others .others__slider .slider-arrow::before, #single-column .others .others__slider .slider-arrow::after {
display: none;
}
#single-column .others .others__slider .slider-arrow.--prev {
left: -80px;
}
@media (max-width: 1440px) {
#single-column .others .others__slider .slider-arrow.--prev {
left: -20px;
}
}
@media (max-width: 992px) {
#single-column .others .others__slider .slider-arrow.--prev {
left: -10px;
}
}
@media (max-width: 766px) {
#single-column .others .others__slider .slider-arrow.--prev {
right: 75px;
left: auto;
}
}
#single-column .others .others__slider .slider-arrow.--next {
right: -80px;
}
@media (max-width: 1440px) {
#single-column .others .others__slider .slider-arrow.--next {
right: -20px;
}
}
@media (max-width: 992px) {
#single-column .others .others__slider .slider-arrow.--next {
right: -10px;
}
}
@media (max-width: 766px) {
#single-column .others .others__slider .slider-arrow.--next {
right: 15px;
}
}
#single-column .others .others__slider .slider-arrow:hover {
color: #fff;
background: #F84B20;
}
#single-column .others .others__slider .slider-arrow:hover .arrow.--prev::before {
animation-name: transformLeftRotateRight;
animation-delay: 0.2s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
#single-column .others .others__slider .slider-arrow:hover .arrow.--prev::after {
animation-name: transformRightRotateLeft;
animation-delay: 0s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
#single-column .others .others__slider .slider-arrow:hover .arrow.--next::before {
animation-name: transformRightLeft;
animation-delay: 0s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
#single-column .others .others__slider .slider-arrow:hover .arrow.--next::after {
animation-name: transformLeftRight;
animation-delay: 0.2s;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
#single-column .others .others__slider .slider-arrow .arrow {
width: 16px;
height: 14px;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#single-column .others .others__slider .slider-arrow .arrow::before, #single-column .others .others__slider .slider-arrow .arrow::after {
content: "";
width: 16px;
height: 14px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
animation-fill-mode: forwards;
animation-duration: 0.6s;
display: block;
}
#single-column .others .others__slider .slider-arrow .arrow.--prev::before, #single-column .others .others__slider .slider-arrow .arrow.--prev::after {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
transform: rotate(-180deg);
}
#single-column .others .others__slider .slider-arrow .arrow.--next::before, #single-column .others .others__slider .slider-arrow .arrow.--next::after {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
#single-column .others .others__slider .slider-arrow .arrow::after {
transform: translateX(-100%);
}
#single-column .others .others__slider-item {
background: #fff;
padding: 0 24px 32px;
border-radius: 0 16px 0 16px;
margin: 0 16px;
}
@media (max-width: 599px) {
#single-column .others .others__slider-item {
margin: 0 0 100px 0;
}
}
@media (max-width: 599px) {
#single-column .others .others__slider-item:nth-child(n+3) {
margin: 0;
}
}
@media (max-width: 599px) {
#single-column .others .others__slider-item:nth-child(n+4) {
display: none;
}
}
#single-column .others .others__slider-link {
color: #000;
}
#single-column .others .others__slider-link:hover .column__slider-ttl {
color: #F84B20;
opacity: 0.6;
}
#single-column .others .others__slider-img {
display: block;
transform: translateY(-50px);
}
#single-column .others .others__slider-date {
display: block;
margin-top: -28px;
font-size: 12px;
color: #AAAAAA;
}
#single-column .others .others__slider-ttl {
margin-top: 8px;
line-height: 180%;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
#single-column .others .others__slider .others__cat {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 26px;
}
#single-column .others .others__slider .others__cat-link a {
display: inline-block;
padding: 3px 16px;
background: #C1B092;
color: #fff;
border: 1px solid #C1B092;
border-radius: 100px;
font-size: 12px;
margin: 0;
}
#single-column .others .others__slider .others__cat-link a:hover {
opacity: 0.6;
}
/*========================================================
contact
========================================================*/
#contact .contact {
background: url(../images/common/footer_bg.png) no-repeat;
background-position: center bottom;
background-size: contain;
padding-bottom: 300px;
}
@media (max-width: 768px) {
#contact .contact {
padding-bottom: 100px;
}
}
#contact .contact-form {
background: #fff;
padding: 70px 80px;
}
@media (max-width: 768px) {
#contact .contact-form {
padding: 40px 20px;
border-radius: 0 8px 0 8px;
}
}
#contact .contact-form .wpcf7-not-valid-tip {
margin-top: 10px;
font-family: "Zen Kaku Gothic New", sans-serif;
}
#contact .contact-form .wpcf7-response-output {
text-align: center;
font-size: 16px;
border: 0;
font-family: "Zen Kaku Gothic New", sans-serif;
}
#contact .contact-form__row {
display: flex;
}
@media (max-width: 768px) {
#contact .contact-form__row {
flex-wrap: wrap;
}
}
#contact .contact-form__row + .contact-form__row {
margin-top: 30px;
}
@media (max-width: 768px) {
#contact .contact-form__row + .contact-form__row {
margin-top: 16px;
}
}
#contact .contact-form__row.--required .--item {
position: relative;
}
#contact .contact-form__row.--required .--item:before {
content: "*";
position: absolute;
right: -15px;
top: 10px;
color: #FF0000;
font-size: 16px;
display: none;
}
@media (max-width: 768px) {
#contact .contact-form__row.--required .--item:before {
display: block;
}
}
#contact .contact-form__row.--required .--input {
position: relative;
}
#contact .contact-form__row.--required .--input:before {
content: "*";
position: absolute;
left: -16.5px;
top: 10px;
color: #FF0000;
font-size: 16px;
}
@media (max-width: 768px) {
#contact .contact-form__row.--required .--input:before {
display: none;
}
}
#contact .contact-form__row-item.--item {
width: 28%;
font-size: 16px;
padding: 10px 0;
}
@media (max-width: 768px) {
#contact .contact-form__row-item.--item {
width: -moz-fit-content;
width: fit-content;
}
}
#contact .contact-form__row-item.--input {
width: 72%;
}
@media (max-width: 768px) {
#contact .contact-form__row-item.--input {
width: 100%;
}
}
#contact .contact-form__row-item.--input .mwform-tel-field {
display: flex;
align-items: center;
}
#contact .contact-form__row-item.--input .mwform-tel-field input {
margin: 0 5px;
}
#contact .contact-form__row-item.--input.--address {
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
}
@media (max-width: 768px) {
#contact .contact-form__row-item.--input.--address {
padding-left: 26px;
}
}
#contact .contact-form__row-item.--input.--address span:nth-child(1) {
width: 30%;
}
@media (max-width: 768px) {
#contact .contact-form__row-item.--input.--address span:nth-child(1) {
width: 50%;
}
}
#contact .contact-form__row-item.--input.--address span:nth-child(2) {
width: 100%;
margin: 10px 0 0 0;
}
#contact .contact-form__row-item.--input.--address:before {
content: "〒";
position: absolute;
left: -23px;
top: 6px;
font-size: 16px;
}
@media (max-width: 768px) {
#contact .contact-form__row-item.--input.--address:before {
left: 0;
}
}
#contact .contact-form__row-item.--input.--message {
position: relative;
}
#contact .contact-form__row-item.--input.--message:before {
content: "*";
position: absolute;
left: -16.5px;
top: 10px;
color: #FF0000;
font-size: 16px;
}
#contact .contact-form__row-item.--input input, #contact .contact-form__row-item.--input textarea {
width: 100%;
padding: 10px;
background: #F9F9F9;
border: 0;
font-size: 16px;
outline: none;
border: 1px solid transparent;
font-family: "Zen Kaku Gothic New", sans-serif;
}
#contact .contact-form__row-item.--input input:focus, #contact .contact-form__row-item.--input input:focus-visible, #contact .contact-form__row-item.--input textarea:focus, #contact .contact-form__row-item.--input textarea:focus-visible {
border: 1px solid #bbb;
}
#contact .contact-form__row-item.--input input.address, #contact .contact-form__row-item.--input textarea.address {
margin-bottom: 10px;
width: 180px;
}
#contact .contact-form__row-item.--input textarea {
height: 287px;
resize: vertical;
}
#contact .contact-form .praivacy-check {
display: flex;
align-items: center;
justify-content: center;
margin-top: 70px;
}
#contact .contact-form .praivacy-check + .praivacy-check {
margin-bottom: 24px;
margin-top: 10px;
}
#contact .contact-form .praivacy-check input {
width: -moz-fit-content;
width: fit-content;
margin: 0;
border: 1px solid #808080;
width: 16px;
height: 16px;
margin-right: 8px;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
}
#contact .contact-form .praivacy-check input:checked {
background: #F84B20;
border: 1px solid #F84B20;
}
#contact .contact-form .praivacy-check input:checked::before {
display: block;
}
#contact .contact-form .praivacy-check input:before {
content: "";
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
position: absolute;
top: -1px;
left: 0;
right: 0;
margin: auto;
display: none;
}
#contact .contact-form .praivacy-check input:after {
content: "*";
position: absolute;
left: -16.5px;
top: 2px;
color: #FF0000;
font-size: 16px;
}
#contact .contact-form .praivacy-check label {
cursor: pointer;
}
#contact .contact-form .submit-button .b-button__link {
padding-left: 0;
}
#contact .contact-form .submit-button .b-button__link:hover input {
color: #F84B20;
}
#contact .contact-form .submit-button input {
cursor: pointer;
width: 264px;
height: 64px;
border-radius: 100px;
background: none;
border: none;
color: #fff;
font-size: 16px;
text-align: left;
padding-left: 32px;
}
#comfirm .comfirm {
background: url(../images/common/footer_bg.png) no-repeat;
background-position: center bottom;
background-size: contain;
padding-bottom: 300px;
}
@media (max-width: 768px) {
#comfirm .comfirm {
padding-bottom: 100px;
}
}
#comfirm h4 {
color: #F84B20;
font-size: 24px;
text-align: center;
margin-bottom: 48px;
}
@media (max-width: 768px) {
#comfirm h4 {
font-size: 20px;
}
}
#comfirm .comfirm-form {
background: #fff;
padding: 70px 80px;
}
@media (max-width: 768px) {
#comfirm .comfirm-form {
padding: 40px 20px;
border-radius: 0 8px 0 8px;
}
}
#comfirm .comfirm-form__row {
display: flex;
}
@media (max-width: 768px) {
#comfirm .comfirm-form__row {
flex-wrap: wrap;
}
}
#comfirm .comfirm-form__row + .contact-form__row {
margin-top: 30px;
}
@media (max-width: 768px) {
#comfirm .comfirm-form__row + .contact-form__row {
margin-top: 16px;
}
}
#comfirm .comfirm-form__row-item.--item {
width: 28%;
font-size: 16px;
padding: 10px 0;
line-height: 180%;
font-weight: bold;
}
@media (max-width: 768px) {
#comfirm .comfirm-form__row-item.--item {
width: 100%;
padding: 0;
}
}
#comfirm .comfirm-form__row-item.--input {
width: 72%;
padding: 10px 0;
line-height: 180%;
font-size: 16px;
}
@media (max-width: 768px) {
#comfirm .comfirm-form__row-item.--input {
width: 100%;
padding: 0;
margin: 8px 0 30px;
}
}
#comfirm .btn__group {
display: flex;
align-items: center;
justify-content: center;
margin-top: 70px;
}
@media (max-width: 768px) {
#comfirm .btn__group {
display: block;
margin-top: 40px;
}
}
#comfirm .btn__group .--send {
margin-left: 16px;
}
@media (max-width: 768px) {
#comfirm .btn__group .--send {
margin-left: 0;
margin-top: 16px;
}
}
#comfirm .btn__group .--send .b-button__link {
justify-content: center;
padding-left: 0;
padding-right: 20px;
}
#thanks .thanks {
text-align: center;
background: url(../images/common/footer_bg.png) no-repeat;
background-position: center bottom;
background-size: contain;
padding-bottom: 300px;
}
@media (max-width: 768px) {
#thanks .thanks {
padding-bottom: 150px;
}
}
@media (max-width: 768px) {
#thanks .thanks .s-section__inner {
padding: 0 20px;
}
}
#thanks .thanks .thanks-ttl {
line-height: 180%;
color: #F84B20;
font-size: 96px;
}
@media (max-width: 768px) {
#thanks .thanks .thanks-ttl {
font-size: 64px;
}
}
#thanks .thanks .thanks-ttl span {
display: inline-block;
opacity: 0;
transition: 0s;
}
#thanks .thanks .thanks-ttl__txt {
line-height: 180%;
font-size: 16px;
margin-bottom: 70px;
}
@media (max-width: 768px) {
#thanks .thanks .thanks-ttl__txt {
font-size: 14px;
}
}
#thanks .thanks .thanks-ttl__txt span {
display: block;
font-size: 24px;
margin-bottom: 40px;
line-height: 150%;
}
@media (max-width: 768px) {
#thanks .thanks .thanks-ttl__txt span {
font-size: 20px;
}
}
/*========================================================
privacy
========================================================*/
@media (max-width: 768px) {
#privacy .privacy .s-section__inner {
padding: 0 20px;
}
}
#privacy .privacy .privacy-head {
font-size: 16px;
line-height: 180%;
padding-bottom: 50px;
border-bottom: 1px solid #ddd;
margin-bottom: 50px;
}
@media (max-width: 768px) {
#privacy .privacy .privacy-head {
font-size: 14px;
padding-bottom: 32px;
margin-bottom: 32px;
}
}
#privacy .privacy dt, #privacy .privacy dd {
line-height: 180%;
}
#privacy .privacy dt {
font-size: 16px;
color: #F84B20;
margin-bottom: 16px;
font-weight: 500;
}
@media (max-width: 768px) {
#privacy .privacy dt {
margin-bottom: 8px;
}
}
#privacy .privacy dd {
margin-bottom: 50px;
}
@media (max-width: 768px) {
#privacy .privacy dd {
font-size: 12px;
margin-bottom: 32px;
}
}