@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
vertical-align: baseline;
border: 0;
outline: 0;
}
header,
footer,
article,
section,
aside,
hgroup,
nav,
menu,
figure,
figcaption,
time {
display: block;
}
li {
list-style: none;
}
ol li {
list-style: decimal;
}
img {
max-width: 100%;
height: auto;
font-size: 0;
line-height: 0;
vertical-align: top;
border: 0;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
caption,
th {
text-align: left;
}
hr {
display: block;
height: 1px;
margin: 1em 0;
padding: 0;
border: 0;
border-top: 1px solid #ccc;
}
input,
select {
vertical-align: middle;
}
input,
textarea {
margin: 0;
padding: 0;
}
/*----------------------------------------
Common
----------------------------------------*/
html {
width: 100%;
font-size: 62.5%;
}
body {
font-family: "Noto Sans CJK JP", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Droid Sans", sans-serif;
font-size: 1.5rem;
font-weight: inherit;
position:relative;
z-index: 0;
line-height: 1.6;
color: #231F20;
-webkit-font-variant-ligatures: none;
font-variant-ligatures: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
overflow-x: hidden;
height: 100%;
position: relative;
}
a {
color: #007DCD;
outline: none;
overflow: hidden;
text-decoration: underline;
}
a:hover {
color: #007DCD;
text-decoration: none;
}
a[href^="tel:"] {
cursor: default;
}
.show-mobile-inline,
.show-mobile {
display: none;
}
.hide-mobile {
display: block;
}
.hide-mobile-inline {
display: inline-block;
}
.br-mobile {
display: none !important;
}
.inner {
width: 94%;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.f-bold {
font-weight: bold;
}
.mt-1 {
margin-top: 1rem;
}
.mb-1 {
margin-bottom: 1rem;
}
.mb-2 {
margin-bottom: 2rem;
}
.mb-4 {
margin-bottom: 4rem;
}
.t-blue {
color: #00B2D8;
}
.t-red {
color: #E34371;
}
@media only screen and (max-width: 767px) {
body {
font-size: 1.4rem;
}
.show-mobile {
display: block;
}
.show-mobile-inline {
display: inline-block;
}
.hide-mobile {
display: none;
}
.hide-mobile-inline {
display: none;
}
.br-mobile {
display: block !important;
}
main {
overflow-x: hidden;
}
}
/*----------------------------------------
Animation
----------------------------------------*/
.fadeIn {
transition: opacity 1s .1s;
opacity: 0;
}
.fadeIn.inview {
opacity: 1;
}
.fadeUpIn {
transition: transform 1s cubic-bezier(.4, 0, .2, 1) .1s, opacity 1s .1s;
transform: translateY(30px);
opacity: 0;
}
.fadeUpIn.inview{
transform: translateY(0);
opacity: 1;
}
.blurIn {
animation-name: blurInAnime;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
opacity: 0;
}
@keyframes blurInAnime {
0% {
filter:blur(15px);
transform:scale(1.02);
opacity:0
}
100% {
filter:blur(0);
transform:scale(1);
opacity:1
}
}
/*----------------------------------------
Components
----------------------------------------*/
.c-input-text,
.c-input-textarea {
width: 100%;
padding: 1.2rem .8rem;
border: none;
border-radius: .4rem;
background-color: #EDEDED;
font-size: inherit;
}
.c-input-textarea {
min-height: 18rem;
}
.c-input-year {
width: 80px !important;
}
.c-input-month {
width: 60px !important;
}
.c-input-radio {
padding: 0.7rem 0;
display: block;
}
.c-input-select {
max-width: 100%;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
background-color: #EDEDED;
padding: 1.2rem .8rem;
border-radius: .4rem;
vertical-align: middle;
border: none;
font-size: inherit;
}
.c-button {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 1.8rem 0 2.2rem 0;
background: #E74400 url(../img/car/allow_white.svg) no-repeat right 1.6rem center;
background-size: 10px auto;
border-radius: 0.5rem;
font-size: 1.8rem;
font-weight: bold;
text-decoration: none;
/* appearance: button; */
border: none;
cursor: pointer;
box-shadow: 0 0.1rem 1.6rem rgb(0 0 0 / 40%);
transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}
.c-button:hover {
opacity: .75;
color: #fff;
text-decoration: none;
}
.c-button.red {
background-color: #E34371;
}
.c-button.blue {
color: #FFE900;
background: #00B2D8 url(../img/car/allow_yellow.svg) no-repeat right 1.6rem center;
background-size: 10px auto;
}
.c-button[type=submit] {
padding: 2.2rem 0 2.2rem 0;
}
.c-required {
font-size: 1.4rem;
color: #E74400;
}
.c-input-unit {
margin: 0 2rem 0 .4rem;
}
@media only screen and (max-width: 767px) {
.c-input-unit {
margin: 0 1rem 0 0.2rem;
}
}
/*----------------------------------------
Layout
----------------------------------------*/
.l-main {
min-width: 1000px;
}
@media only screen and (max-width: 767px) {
.l-main {
min-width: initial;
padding-top: 7.7rem;
}
}
/*----------------------------------------
Loading
----------------------------------------*/
.p-loading {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100000;
background: #fff;
}
/*----------------------------------------
Header
----------------------------------------*/
header {
width: 100vw;
border: 1px solid #E0E0E0;
}
.p-header {
width: 95vw;
max-width: 1280px;
margin: 0 auto 0 auto;
padding: 3rem 0 2.4rem 0;
display: flex;
align-items: center;
justify-content: space-between;
line-height: 1;
position: relative;
}
.p-header .logo {
width: 14rem;
}
.p-header .logo a {
display: block;
width: 100%;
transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}
.p-header .logo a:hover {
opacity: .75;
}
.p-header__navi {
display: flex;
align-items: center;
justify-content: space-between;
width: 42.4rem;
}
.p-header__navi a {
display: block;
width: 20.6rem;
transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}
.p-header__navi a:hover {
opacity: .75;
}
/* トップページ */
.page-top .p-header {
padding: 4rem 0 3rem 0;
}
.page-top .p-header .logo {
width: 18rem;
margin: 0 auto;
}
.page-top .p-header__navi {
display: none;
}
/* スマボメニューボタン */
.p-header-sp-btn {
display: none;
width: 5rem;
height: 5rem;
position: absolute;
top: 4rem;
right: 2rem;
z-index: 1000;
transform: translateY(-50%);
cursor: pointer;
transition: .4s ease-in-out;
}
.p-header-sp-btn span {
display: block;
width: 3.2rem;
height: 2px;
border-radius: 2px;
background-color: #616161;
position: absolute;
left: calc(50% - 1.5rem);
transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.p-header-sp-btn span.l1 {
top: .8rem;
}
.p-header-sp-btn span.l2 {
top: 1.6rem;
}
.p-header-sp-btn span.l3 {
top: 2.4rem;
}
.p-header-sp-btn p {
width: 100%;
position: absolute;
font-size: 1rem;
text-align: center;
top: 3.3rem;
text-align: center;
}
.sp-menu-open .p-header-sp-btn .l1 {
top: 1.6rem;
transform: rotate(315deg);
}
.sp-menu-open .p-header-sp-btn .l2 {
opacity: 0;
}
.sp-menu-open .p-header-sp-btn .l3 {
top: 1.6rem;
transform: rotate(-315deg);
}
/* スマホメニュー */
.p-header-sp-menu {
width: 100vw;
height: 100vh;
/* height: calc( 100vh - 7.7rem); */
background-color: #EDEDED;
padding: 4%;
position: fixed;
top: 7.7rem;
right: 0;
right: -100vw;
z-index: 1000;
overflow-x: hidden;
overflow-y: scroll;
transition: .2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.sp-menu-open .p-header-sp-menu {
right: 0;
}
.p-header-sp-menu nav.menu {
}
.p-header-sp-menu nav.menu ul {
}
.p-header-sp-menu nav.menu ul li {
opacity: 0;
transform: translate3d(0, 20px, 0);
transition: opacity .2s cubic-bezier(0.215, 0.61, 0.355, 1),transform .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.sp-menu-open .p-header-sp-menu nav.menu ul li {
opacity: 1;
transform: translate3d(0, 0, 0);
transition: opacity .6s cubic-bezier(0.215, 0.61, 0.355, 1) .1s,transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) .1s;
}
.sp-menu-open .p-header-sp-menu nav.menu ul li:nth-of-type(2) {
transition: opacity .6s cubic-bezier(0.215, 0.61, 0.355, 1) .15s,transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) .15s;
}
.sp-menu-open .p-header-sp-menu nav.menu ul li:nth-of-type(3) {
transition: opacity .6s cubic-bezier(0.215, 0.61, 0.355, 1) .2s,transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) .2s;
}
.sp-menu-open .p-header-sp-menu nav.menu ul li:nth-of-type(4) {
transition: opacity .6s cubic-bezier(0.215, 0.61, 0.355, 1) .25s,transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) .25s;
}
.sp-menu-open .p-header-sp-menu nav.menu ul li:nth-of-type(5) {
transition: opacity .6s cubic-bezier(0.215, 0.61, 0.355, 1) .3s,transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) .3s;
}
.sp-menu-open .p-header-sp-menu nav.menu ul li:nth-of-type(6) {
transition: opacity .6s cubic-bezier(0.215, 0.61, 0.355, 1) .35s,transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) .35s;
}
.sp-menu-open .p-header-sp-menu nav.menu ul li:nth-of-type(7) {
transition: opacity .6s cubic-bezier(0.215, 0.61, 0.355, 1) .4s,transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) .4s;
}
.sp-menu-open .p-header-sp-menu nav.menu ul li:nth-of-type(8) {
transition: opacity .6s cubic-bezier(0.215, 0.61, 0.355, 1) .45s,transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) .45s;
}
.p-header-sp-menu nav.menu ul li a {
display: block;
color: #231F20;
font-size: 1.5rem;
line-height: 1;
text-decoration: none;
background: url(../img/common/dot_link.svg) no-repeat left 2.6rem top 1.8rem;
background-size: 1.4rem auto;
padding: 1.6rem 2rem 1.6rem 5rem;
border-bottom: 1px solid #fff;
}
.p-header-sp-menu nav.menu ul li:last-of-type a {
border-bottom: none;
}
.p-header-sp-menu nav.link {
width: 70vw;
margin: 4rem auto 0 auto;
}
.p-header-sp-menu nav.link a {
display: block;
margin-top: 2rem;
box-shadow: 0 0.1rem 1.6rem rgb(0 0 0 / 40%);
border-radius: 1rem;
opacity: 0;
transform: translate3d(0, 20px, 0);
transition: opacity .2s cubic-bezier(0.215, 0.61, 0.355, 1),transform .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.p-header-sp-menu nav.link a:last-of-type {
margin-top: 2rem;
}
.sp-menu-open .p-header-sp-menu nav.link a {
opacity: 1;
transform: translate3d(0, 0, 0);
transition: opacity .6s cubic-bezier(0.215, 0.61, 0.355, 1) .5s,transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
}
.sp-menu-open .p-header-sp-menu nav.link a:nth-of-type(2) {
transition: opacity .6s cubic-bezier(0.215, 0.61, 0.355, 1) .55s,transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) .55s;
}
@media only screen and (max-width: 767px) {
.p-header {
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: #fff;
transition: all .3s ease;
}
.when_scroll:not(.sp-menu-open) .p-header {
transform: translateY(-120%);
}
.page-top .p-header,
.p-header {
padding: 2rem 0 2rem 0;
}
.page-top .p-header .logo,
.p-header .logo {
width: 12rem;
margin: 0 0 0 2rem;
}
.p-header__navi {
display: none;
}
/* スマボメニューボタン */
.p-header-sp-btn {
display: block;
}
}
/*----------------------------------------
Footer
----------------------------------------*/
footer {
background-color: #EDEDED;
padding: 3rem 0 2rem 0;
margin-top: 10rem;
}
.p-footer .inner {
display: flex;
justify-content: space-between;
}
.p-footer__left {
width: 46%;
position:relative;
min-height: 100px;
}
.p-footer__right {
width: 46%;
max-width: 34rem;
display: flex;
justify-content: space-between;
}
.p-footer__left .logo {
width: 14rem;
}
.p-footer__left .kobo-logo {
width: 12rem;
position: absolute;
left: 0;
bottom: 0;
}
.p-footer__right nav {
}
.p-footer__right nav ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.p-footer__right nav ul li {
width: 46%;
background: url(../img/common/dot_link.svg) no-repeat left center;
background-size: 1.2rem auto;
padding: 0.6rem 0 0.6rem 1.6rem;
border-bottom: 1px solid #A8A8A8;
}
.p-footer__right nav ul li:nth-last-of-type(-n+2) {
border-bottom: none;
}
.p-footer__right nav ul li a {
color: #231F20;
font-size: 1.2rem;
display: block;
text-decoration: none;
transition: opacity .2s linear;
}
.p-footer__right nav ul li a:hover {
opacity: .75;
}
@media only screen and (max-width: 767px) {
footer {
padding: 3rem 2rem 2rem 2rem;
margin-top: 5rem;
}
.p-footer .inner {
flex-direction: column-reverse;
}
.p-footer__left {
width: 100%;
min-height: inherit;
display: flex;
justify-content: space-between;
}
.p-footer__left .logo {
width: 10rem;
}
.p-footer__left .kobo-logo {
width: 10rem;
position: relative;
left: inherit;
bottom: inherit;
}
.p-footer__right {
width: 100%;
max-width: initial;
margin-bottom: 3rem;
}
.p-footer__right nav ul li {
padding: 0.8rem 0 1rem 1.6rem;
}
}
/*----------------------------------------
共通パーツ
----------------------------------------*/
/* ステータスバー */
.p-status-bar.red,
.p-status-bar.blue {
background-color: #00B2D8;
color: #fff;
font-size: 1.8rem;
font-weight: bold;
text-align: center;
line-height: 1;
padding: 1.1rem 0 1.6rem 0;
}
.p-status-bar.red {
background-color: #E34371;
}
.p-status-bar.gray {
text-align: center;
padding: 1.1rem 0 1.6rem 0;
line-height: 1;
background-color: #EDEDED;
}
/* マッチング受付中の車両 */
.p-matching-car-data .date {
font-family: 'Heebo', sans-serif;
font-size: 1.7rem;
margin-right: 0.2rem;
}
.p-matching-car-data .number {
font-family: 'Heebo', sans-serif;
font-size: 2.4rem;
margin-left: 0.6rem;
margin-right: 0.2rem;
}
/*----------------------------------------
ページTOPへ・車両一覧へ戻る
----------------------------------------*/
.p-buck-list,
.p-gotop {
display: flex;
justify-content: center;
align-items: center;
margin-top: 4rem;
}
.p-gotop span {
display: flex;
background: url(../img/common/icon_gotop.svg) no-repeat right center;
background-size: 1.8rem auto;
padding: 1rem 3rem 1rem 1rem;
cursor: pointer;
}
.p-buck-list a {
display: flex;
background: url(../img/common/icon_bucklist.svg) no-repeat left center;
background-size: 1.8rem auto;
padding: 1rem 0 1rem 3rem;
text-decoration: none;
color: #231F20;
}
/*----------------------------------------
トップページ
----------------------------------------*/
/* VISUAL */
.p-top-visual {
width: 100%;
height: 70rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background: url(../img/top/bg_main.jpg) no-repeat center;
background-size: cover;
padding-top: 8rem;
}
.p-top-visual__content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.p-top-visual-logo {
color: #fff;
width: 34rem;
text-align: center;
}
.p-top-visual-logo strong {
display: block;
font-size: 2.2rem;
margin-bottom: 2rem;
}
.p-top-visual-navi {
margin-top: 14rem;
}
.p-top-visual-navi ul {
display: flex;
justify-content: space-between;
width: 84rem;
}
.p-top-visual-navi ul li {
width: 40rem;
text-align: center;
color: #fff;
}
.p-top-visual-navi ul li a {
display: block;
margin-bottom: 1rem;
}
.p-top-visual-navi ul li span {
display: block;
font-weight: bold;
}
.p-top-data {
border-bottom: 8px solid #E0E0E0;
/* margin-bottom: 8rem; */
}
.p-top-data .p-status-bar.gray {
padding: 1.5rem 0 1.6rem 0;
}
@media only screen and (max-width: 767px) {
.p-top-visual {
height: 70rem;
background: url(../img/top/bg_main_sp.jpg) no-repeat center;
background-size: cover;
padding-top: 5rem;
}
.p-top-visual-logo {
width: 70vw;
}
.p-top-visual-logo strong {
font-size: 1.8rem;
}
.p-top-visual-navi {
margin-top: 16rem;
}
.p-top-visual-navi ul {
flex-direction: column;
width: 80vw;
}
.p-top-visual-navi ul li {
width: 100%;
}
.p-top-visual-navi ul li:first-of-type {
margin-bottom: 4rem;
}
.p-top-visual-navi ul li span {
font-size: 1.2rem;
}
}
/* ニュース一覧 */
.p-news-heading {
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 4.6rem;
line-height: 1;
text-align: center;
margin-bottom: 6rem;
}
.p-news-heading span {
color: #00B2D8;
}
.p-news-heading span:nth-of-type(even) {
color: #E34371;
}
.p-news-navi {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 94%;
margin-left: auto;
margin-right: auto;
margin-bottom: 3rem;
}
.p-news-navi a {
color: #00B2D8;
font-family: 'Lato', sans-serif;
font-weight: 600;
display: block;
letter-spacing: .05rem;
padding: 0 1.4rem;
margin-bottom: 1rem;
line-height: 1.4;
text-decoration: none;
border-right: 1px solid #E0E0E0;
}
.p-news-navi a:last-child {
border-right: none;
}
.p-news-navi a:hover {
text-decoration: underline;
}
.p-news-navi a.current {
color: #231F20;
}
.p-news-list {
max-width: 90rem;
margin-top: 8rem;
margin-left: auto;
margin-right: auto;
}
.p-news-list li {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #BBBBBB;
padding: 5rem 2rem;
}
.p-news-list li:first-of-type {
border-top: 1px solid #BBBBBB;
}
.p-news-list li figure {
width: 30rem;
}
.p-news-list li figure a {
display: block;
overflow: hidden;
position: relative;
}
.p-news-list li figure a:before {
content: '';
display: block;
padding-top: 66.66%;
}
.p-news-list li figure a img {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 50%;
display: block;
width: 100%;
height: auto;
transform: translate(-50%,-50%);
}
.p-news-list li .content {
width: calc(100% - 34rem);
}
.p-news-list li .content .meta {
font-family: 'Lato', sans-serif;
font-size: 1.7rem;
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
}
.p-news-list li .content .meta .date {
font-size: 1.5rem;
}
.p-news-list li .content .meta .new {
color: #E34371;
font-weight: 700;
margin-left: 0.6rem;
}
.p-news-list li .content .meta .tags span {
color: #00B2D8;
font-weight: 600;
font-size: 1.3rem;
border: 1px solid #00B2D8;
padding: 0.3rem 1.2rem;
}
.p-news-list li .content h3 {
font-size: 2.2rem;
margin-bottom: 1rem;
}
.p-news-list li .content h3 a {
text-decoration: none;
color: #231F20;
}
.p-news-list li .content h3 a:hover {
color: #007DCD;
}
.p-news-list li .content .p {
}
.p-news-list li .content .p a {
}
.p-news-list__more a {
font-size: 2.2rem;
font-weight: bold;
display: block;
width: fit-content;
text-align: center;
margin: 4rem auto;
}
/* カウマッチとは？バナー */
.p-about-banner {
margin: 6rem auto;
display: flex;
justify-content: center;
align-items: center;
max-width: 70rem;
}
.p-about-banner a {
transition: transform .3s cubic-bezier(.175, .885, .32, 1.275);
}
.p-about-banner a:first-of-type {
display: flex;
align-items: center;
justify-content: center;
width: 30rem;
margin-right: 4rem;
color: #383231;
text-decoration: none;
padding: 2.4rem 0 2.2rem 0;
border-radius: 1.4rem;
box-shadow: 0 0.5rem 2.4rem rgb(0 0 0 / 30%);
}
.p-about-banner a:first-of-type img {
width: 14rem;
}
.p-about-banner a:first-of-type span {
font-size: 2.2rem;
font-weight: bold;
margin-left: .5rem;
}
.p-about-banner a:hover {
transform: scale(.94);
}
@media only screen and (max-width: 767px) {
.p-news-list {
padding: 0 2rem;
}
.p-news-list li {
flex-direction: column;
padding: 5rem 0;
}
.p-news-list li figure {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-bottom: 2rem;
}
.p-news-list li .content {
width: 100%;
}
.p-news-list li .content h3 {
font-size: 1.8rem;
}
.p-news-list__more a {
font-size: 1.8rem;
}
.p-about-banner {
margin: 4rem 0;
flex-direction: column;
align-items: center;
}
.p-about-banner a:first-of-type {
margin-right: 0;
margin-bottom: 4rem;
}
}
/*----------------------------------------
オプション料金について
----------------------------------------*/
.p-option {
}
.p-option h1 {
color: #007DCD;
font-weight: bold;
font-size: 2.2rem;
text-align: center;
margin: 6rem 0;
}
.p-option section {
}
.p-option__heading {
background-color: #EDEDED;
text-align: center;
padding: 1rem 0;
}
.p-option__heading h2 {
font-size: 1.8rem;
}
.p-option__content {
text-align: center;
padding: 5rem 0;
margin: 0 auto;
width: 90%;
max-width: 1000px;
}
.p-option__content p {
margin-bottom: 2rem;
}
.p-option__content dl {
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 1rem;
}
.p-option__content dl.border-top {
border-top: 1px solid #BBBBBB;
padding-top: 1.4rem;
}
.p-option__content dl:last-of-type {
margin-bottom: 2rem;
}
.p-option__content dl dt {
margin-right: 2rem;
font-size: 1.7rem;
}
.p-option__content dd {
font-size: 2rem;
}
.p-option__content dd .t-small {
font-size: 1.4rem;
}
.p-option__content dl .t-strong {
font-size: 3rem;
}
/* プラン */
.p-plan {
padding: 5rem 0;
margin: 0 auto;
width: 94%;
max-width: 90rem;
}
.p-plan h3 {
text-align: center;
margin-bottom: 2.8rem;
}
.p-plan-content {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.p-plan-content__left {
width: 46%;
}
dl.p-plan-content__summary {
width: 100%;
display: flex;
flex-wrap: wrap;
font-size: 1.3rem;
margin-bottom: 4rem;
}
dl.p-plan-content__summary dt {
width: 30%;
padding: 1.2rem 2% 1.4rem 2%;
border-bottom: 1px solid #000;
display: flex;
align-items: center;
font-weight: 600;
}
dl.p-plan-content__summary dd {
width: 70%;
padding: 1.2rem 4% 1.4rem 4%;
border-bottom: 1px solid #E5E5E5;
}
.p-plan-content__right {
width: 50%;
}
table.p-plan-content__price {
width: 100%;
border-top: 1px solid #E5E5E5;
border-left: 1px solid #E5E5E5;
font-size: 1.3rem;
line-height: 1;
}
table.p-plan-content__price tr {
border-bottom: 1px solid #E5E5E5;
}
table.p-plan-content__price tr th {
padding: 1.2rem 2% 1.4rem 2%;
background-color: #E34371;
color: #fff;
border-right: 1px solid #E5E5E5;
text-align: center;
}
table.p-plan-content__price tr td {
padding: 1.2rem 2% 1.4rem 2%;
border-right: 1px solid #E5E5E5;
font-weight: bold;
}
.p-car-size-sample {
margin-top: 2rem;
font-size: 1.3rem;
}
.p-car-size-sample strong {
font-weight: bold;
margin-top: 1rem;
}
.p-car-size-sample p {
font-size: 1.2rem;
}
.t-sale-red {
color: #E34371;
}
.p-revos-under-coating {
max-width: 800px;
display: flex;
justify-content: space-between;
margin-top: 5rem;
margin-left: auto;
margin-right: auto;
}
.p-revos-under-coating figure {
width: 46%;
}
.p-revos-under-coating figure figcaption {
font-family: 'Heebo', sans-serif;
font-size: 1.7rem;
color: #231F20;
margin-top: .4rem;
font-weight: bold;
color: #E34371;
margin-bottom: 2rem;
}
.p-revos-under-coating figure:first-of-type figcaption {
color: #00B2D8;
}
@media only screen and (max-width: 767px) {
.p-option h1 {
font-size: 2rem;
margin: 4rem 0;
}
.p-option__heading h2 {
font-size: 1.6rem;
}
.p-option__content {
padding: 2rem 0;
}
.p-option__detail {
text-align: left;
}
.p-option__content dl {
font-size: 1.6rem;
}
.p-option__content dl .t-strong {
font-size: 2.5rem;
}
.p-option section:last-of-type {
border-bottom: 1px solid #BBBBBB;
}
.p-plan-content {
flex-direction: column;
}
table.p-plan-content__price tr td {
padding: 1.5rem 1% 1.7rem 1%;
}
.p-plan-content__left,
.p-plan-content__right {
width: 100%;
}
.p-plan-content__left {
margin-bottom: 2rem;
}
.p-revos-under-coating {
flex-direction: column;
}
.p-revos-under-coating figure {
width: 100%;
}
.p-revos-under-coating figure:first-of-type {
margin-bottom: 3rem;
}
}
/*----------------------------------------
買うTOP
----------------------------------------*/
.p-buy-search {
background-color: #ccc;
padding: 2rem 0;
}
.p-buy-search .inner {
background-color: #fff;
border-radius: .4rem;
padding: 2rem 3rem 3rem 3rem;
}
.p-buy-search .inner > strong {
display: block;
text-align: center;
line-height: 1;
padding-bottom: 1.4rem;
border-bottom: 1px solid #bbb;
}
.p-buy-search .inner .item {
padding: 2rem 1.4rem 1.4rem 1.4rem;
border-bottom: 1px solid #bbb;
}
.p-buy-search .inner .item.is-last {
padding-bottom: 2rem;
}
.p-buy-search .inner .item strong {
display: block;
line-height: 1;
margin-bottom: 1.8rem;
}
.p-buy-search .inner .item ul {
display: flex;
flex-wrap: wrap;
}
.p-buy-search .inner .item ul li {
display: flex;
align-items: center;
margin-right: 2rem;
margin-bottom: 1rem;
white-space: nowrap;
}
.p-buy-search .inner .item ul li input {
margin-right: .5rem;
}
.p-buy-search__button {
margin-top: 2.6rem;
}
.p-buy-search__button .c-button {
max-width: 32rem;
}
/* 車両リスト */
.p-car-list {
margin-top: 4rem;
}
.p-car-list_sort {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #BBBBBB;
margin-bottom: 1rem;
padding-bottom: 1.6rem;
}
.p-car-list_sort strong {
}
.p-car-list_sort nav {
display: flex;
}
.p-car-list_sort nav a {
display: flex;
justify-content: center;
align-items: center;
padding: 0.8rem 2rem;
margin-right: 2rem;
border-radius: 4px;
color: #231F20;
border: 1px solid #BBBBBB;
line-height: 1;
font-weight: bold;
}
.p-car-list_sort nav a:last-of-type {
margin-right: 0;
}
.p-car-list > .inner {
width: 990px;
}
.p-car-list .item {
border-bottom: 8px solid #E0E0E0;
padding: 3rem 0 3rem 0;
}
.p-car-list .item .heading {
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 1.6rem;
}
.p-car-list .item .heading h2 {
display: flex;
flex-direction: column;
line-height: 1.4;
}
.p-car-list .item .heading h2 .maker {
font-size: 1.6rem;
margin-bottom: 0.2rem;
}
.p-car-list .item .heading h2 .name {
font-size: 2.6rem;
margin-right: 2rem;
color: inherit;
text-decoration: none;
}
.p-car-list .item .heading .price {
min-width: fit-content;
display: flex;
align-items: baseline;
line-height: 1;
}
.p-car-list .item .heading .price span {
display: block;
}
.p-car-list .item .heading .price > span {
margin-right: 1.2rem;
font-size: 1.4rem;
color: #777777;
}
.p-car-list .item .heading .price .price-number {
min-width: fit-content;
display: flex;
align-items: baseline;
}
.p-car-list .item .heading .price .price-number span:first-of-type {
font-weight: bold;
font-size: 2.7rem;
color: #00B2D8;
margin-right: 0.4rem;
}
.p-car-list .item .heading .price .price-number span:last-of-type {
font-weight: bold;
}
.p-car-list .item .body {
display: flex;
}
.p-car-list .item .body .content {
display: flex;
align-items: start;
margin-right: 4rem;
}
.p-car-list .item .body .content figure {
width: 27rem;
margin-right: 2rem;
}
.p-car-list .item .body .meta {
width: 28rem;
display: flex;
flex-wrap: wrap;
border-top: 1px solid #bbb;
line-height: 1;
}
.p-car-list .item .body .meta dt {
width: 8rem;
font-size: 1.4rem;
color: #777;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px dotted #bbb;
border-right: 1px solid #bbb;
padding: 0.6rem 1rem;
}
.p-car-list .item .body .meta dd {
width: calc( 100% - 8rem );
display: flex;
align-items: center;
border-bottom: 1px dotted #bbb;
padding: 0.6rem 1rem 0.6rem 1.4rem;
}
.p-car-list .item .body .meta dt:last-of-type,
.p-car-list .item .body .meta dd:last-of-type {
border-bottom: 1px solid #bbb;
}
.p-car-list .item .body .meta dd strong {
margin-right: .2rem;
}
.p-car-list .item .body .meta dd .confirmed {
color: #4F9D2E;
background: url(../img/car/icon_confirmed.svg) no-repeat left center;
background-size: 18px auto;
line-height: 1;
padding: 0.3rem 0 0.3rem 2.2rem;
}
.p-car-list .item .matching {
width: 100%;
}
.p-car-list .item .matching h4 {
font-size: 1.4rem;
color: #EB8D00;
font-weight: bold;
padding: 0 0 1rem 4rem;
background: url(../img/car/icon_owner_comment.svg) no-repeat left center;
background-size: 28px auto;
}
.p-car-list .item .matching p {
line-height: 1.4;
margin-bottom: 2rem;
}
.p-car-list .item .matching a {
}
/* ページ送り */
.p-pagenation {
}
.p-pagenation .inner {
max-width: 99rem;
display: flex;
justify-content: space-around;
margin: 4rem auto;
padding-bottom: 4rem;
/* border-bottom: 1px solid #bbb; */
font-weight: bold;
}
.p-pagenation__prev a,
.p-pagenation__next a {
display: flex;
text-decoration: none;
color: #231F20;
}
.p-pagenation__prev a {
background: url(../img/car/allow_prev.svg) no-repeat left center;
background-size: 13px auto;
padding: 1rem 0 1rem 3rem;
}
.p-pagenation__next a {
background: url(../img/car/allow_next.svg) no-repeat right center;
background-size: 13px auto;
padding: 1rem 3rem 1rem 0;
}
.wp-pagenavi {
display: flex;
justify-content: center;
align-items: center;
}
.wp-pagenavi a:not(.nextpostslink),
.wp-pagenavi span:not(.extend) {
text-decoration: none;
border: none;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
margin: .5rem;
}
/* 検索結果０件 */
.p-search-result-none {
margin-top: 7rem;
text-align: center;
}
@media only screen and (max-width: 767px) {
.p-status-bar.red,
.p-status-bar.blue {
font-size: 1.4rem;
}
.p-buy-search .inner .item {
padding: 2rem 0 1.4rem 0;
}
.p-car-list_sort nav a {
font-size: 1.3rem;
padding: 0.8rem 1rem;
margin-right: 1rem;
text-decoration: none;
}
.p-car-list > .inner {
width: 94%;
}
.p-car-list .item .heading h2 .maker {
font-size: 1.4rem;
}
.p-car-list .item .heading h2 .name {
font-size: 2rem;
margin-right: 1rem;
}
.p-car-list .item .heading .price {
flex-direction: column;
flex-wrap: wrap;
justify-content: end;
}
.p-car-list .item .heading .price > span {
margin-right: 0;
margin-bottom: 0.6rem;
text-align: right;
font-size: 1rem;
width: 100%;
}
.p-car-list .item .heading .price .price-number span:first-of-type {
font-size: 2.4rem;
}
.p-car-list .item .body {
flex-direction: column;
}
.p-car-list .item .body .content {
justify-content: space-between;
margin-right: 0;
margin-bottom: 2rem;
}
.p-car-list .item .body .content figure {
width: 50%;
margin-right: 0;
}
.p-car-list .item .body .meta {
width: 47%;
font-size: 1rem;
}
.p-car-list .item .body .meta dt {
width: 5.4rem;
padding: 0.3rem 0.5rem;
font-size: 1rem;
}
.p-car-list .item .body .meta dd {
width: calc(100% - 5.4rem);
padding: 0.3rem 1rem;
}
.p-car-list .item .body .meta dd .confirmed {
background-size: 14px auto;
padding: 0.3rem 0 0.3rem 1.8rem;
}
.p-car-list .item .matching h4 {
background: none;
padding-left: 0;
}
.p-car-list .item .matching p {
padding: 0 0 0 4.6rem;
background: url(../img/car/icon_owner_comment.svg) no-repeat left 8px top 3px;
background-size: 24px auto;
}
.p-car-list .item .matching a {
width: 100%;
padding: 2rem 0 2.2rem 0;
}
}
.not-recruiting-label {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background-color: #999;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 1.8rem 0 2.2rem 0;
border-radius: 0.5rem;
font-size: 1.8rem;
font-weight: bold;
text-decoration: none;
border: none;
cursor: not-allowed;
}
/*----------------------------------------
車両情報
----------------------------------------*/
/* 車両情報 */
.p-car-detail {
margin: 3rem 0 6rem 0;
}
.p-car-detail .inner {
width: 990px;
}
.p-car-detail .heading {
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 1.6rem;
}
.p-car-detail .heading h1 {
display: flex;
flex-direction: column;
line-height: 1.4;
}
.p-car-detail .heading h1 .maker {
font-size: 1.6rem;
margin-bottom: 0.2rem;
}
.p-car-detail .heading h1 .name {
font-size: 2.6rem;
margin-right: 2rem;
}
.p-car-detail .heading .price {
min-width: fit-content;
display: flex;
flex-direction: column;
align-items: end;
line-height: 1;
}
.p-car-detail .heading .price span {
display: block;
}
.p-car-detail .heading .price > span {
font-size: 1.4rem;
color: #777777;
margin-bottom: 1rem;
}
.p-car-detail .heading .price .price-number {
min-width: fit-content;
display: flex;
align-items: baseline;
}
.p-car-detail .heading .price .price-number span:first-of-type {
font-family: 'Heebo', sans-serif;
font-weight: bold;
font-size: 3.2rem;
color: #00B2D8;
margin-right: 0.4rem;
}
.p-car-detail .heading .price .price-number span:last-of-type {
font-weight: bold;
}
.p-car-detail .body {
display: flex;
justify-content: space-between;
align-items: start;
}
.p-car-detail-image {
width: 56%;
background-color: #000;
color: #fff;
}
.p-car-detail-content {
width: 40%;
}
/* 車両写真 */
.p-car-detail-image__main {
position: relative;
width: 100%;
overflow: hidden;
}
.p-car-detail-image__main img {
width: 100%;
max-height: 50rem;
object-fit: contain;
}
.p-car-detail-image__thumb {
overflow: hidden;
padding: 1rem 1rem 1.6rem 1rem;
}
.p-car-detail-image .caption {
padding: 0 1rem 1.6rem 1rem;
}
.p-car-detail-image__main .swiper-wrapper {
align-items: center;
}
.p-car-detail-image__main .swiper-button-next:after,
.p-car-detail-image__main .swiper-container-rtl .swiper-button-prev:after,
.p-car-detail-image__main .swiper-button-prev:after,
.p-car-detail-image__main .swiper-container-rtl .swiper-button-next:after {
content: '';
}
.p-car-detail-image__main .swiper-button-prev,
.p-car-detail-image__main .swiper-button-next {
position: absolute;
top: 50%;
width: 24px;
height: 54px;
margin-top: -27px;
}
.p-car-detail-image__main .swiper-button-next {
background: url(../img/car/icon_slide_right.svg) no-repeat left center;
background-size: 100% auto;
}
.p-car-detail-image__main .swiper-button-prev {
background: url(../img/car/icon_slide_left.svg) no-repeat left center;
background-size: 100% auto;
}
.p-car-detail-image__thumb .swiper-slide-thumb-active {
border-bottom: 4px solid #00B2D8;
}
/* 車両基本情報 */
.p-car-detail-content .meta {
display: flex;
flex-wrap: wrap;
border-top: 1px solid #bbb;
line-height: 1.4;
margin-bottom: 1.6rem;
}
.p-car-detail-content .meta dt {
width: 8rem;
font-size: 1.4rem;
color: #777;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
border-bottom: 1px dotted #bbb;
border-right: 1px solid #bbb;
padding: 0.8rem 1rem;
}
.p-car-detail-content .meta dd {
width: calc( 100% - 8rem );
display: flex;
align-items: center;
border-bottom: 1px dotted #bbb;
padding: 0.8rem 1rem 0.8rem 1.4rem;
}
.p-car-detail-content .meta dt:last-of-type,
.p-car-detail-content .meta dd:last-of-type {
border-bottom: 1px solid #bbb;
}
.p-car-detail-content .meta dd strong {
margin-right: .2rem;
}
.p-car-detail-content .meta dd .confirmed {
color: #4F9D2E;
background: url(../img/car/icon_confirmed.svg) no-repeat left center;
background-size: 18px auto;
line-height: 1;
padding: 0.3rem 0 0.3rem 2.2rem;
}
.p-car-detail-content .matching {
margin-top: 2.4rem;
}
.p-car-detail-content .matching h4 {
font-size: 1.4rem;
color: #EB8D00;
font-weight: bold;
padding: 0 0 .5rem 0;
}
.p-car-detail-content .matching p {
margin-bottom: 2rem;
}
.p-car-detail-content .matching a {
}
.p-car-detail-content .matching a:hover {
opacity: .75;
}
/* 現車確認レポート */
.p-car-report {
background-color: #EDEDED;
padding: 3rem 0 7rem 0;
}
.p-car-report > .heading {
width: 900px;
}
.p-car-report > .heading h2 {
display: flex;
flex-direction: column;
padding: 1rem 0 1rem 5.8rem;
width: fit-content;
margin: 0 auto 2rem auto;
line-height: 1;
background: url(../img/car/icon_report_heading.svg) no-repeat left center;
background-size: 48px auto;
}
.p-car-report > .heading h2 span {
font-size: 1.3rem;
font-weight: normal;
text-indent: 0.1rem;
margin-bottom: 0.7rem;
}
.p-car-report > .heading h2 strong {
font-size: 2.2rem;
color: #00B2D8;
}
.p-car-report > .body {
width: 900px;
background-color: #fff;
border-radius: 6px;
padding: 3rem 7.5rem 7rem 7.5rem;
}
.p-car-report__content {
margin-bottom: 5rem;
}
.p-car-report__content h3 {
font-size: 2.2rem;
padding: 2rem 0 2rem 6.5rem;
width: fit-content;
margin: 0 0 1.6rem 0;
line-height: 1;
}
.p-car-report__content.good h3 {
background: url(../img/car/icon_report_good.svg) no-repeat left center;
background-size: 60px auto;
}
.p-car-report__content.check h3 {
background: url(../img/car/icon_report_check.svg) no-repeat left center;
background-size: 60px auto;
}
.p-car-report__content p {
line-height: 1.6;
text-align: justify;
}
.p-car-report__slide {
margin-bottom: 2rem;
}
.p-car-report__slide .swiper {
position: relative;
overflow: hidden;
}
.p-car-report__slide .swiper::before {
content: "";
display: block;
height: 50rem;
}
.p-car-report__slide .swiper .swiper-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.p-car-report__slide .swiper .swiper-wrapper .swiper-slide {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.p-car-report__slide .swiper-pagination {
position: relative;
text-align: center;
transition: 300ms opacity;
transform: initial;
z-index: 10;
margin-top: 5px;
}
.swiper-pagination-bullet {
width: 10px;
height: 10px;
}
.p-car-report__slide .swiper-pagination-bullet {
margin: 0 5px;
}
.p-car-report__slide .swiper-button-next:after,
.p-car-report__slide .swiper-container-rtl .swiper-button-prev:after,
.p-car-report__slide .swiper-button-prev:after,
.p-car-report__slide .swiper-container-rtl .swiper-button-next:after {
content: '';
}
.p-car-report__slide .swiper-button-prev,
.p-car-report__slide .swiper-button-next {
position: absolute;
top: 50%;
width: 24px;
height: 54px;
margin-top: -27px;
}
.p-car-report__slide .swiper-button-prev {
background: url(../img/car/icon_slide_left.svg) no-repeat left center;
background-size: 100% auto;
}
.p-car-report__slide .swiper-button-next {
background: url(../img/car/icon_slide_right.svg) no-repeat left center;
background-size: 100% auto;
}
.p-car-report__slide .swiper-pagination-bullet-active {
background: #00B2D8;
}
/* カウマッチ評価 */
.p-car-report__evaluation {
background-color: #EDEDED;
padding: 2.6rem;
}
.p-car-report__evaluation .heading {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 1rem;
}
.p-car-report__evaluation .heading h4 {
font-weight: bold;
font-size: 2.2rem;
margin-left: 2rem;
}
.p-car-report__evaluation .heading span {
font-size: 1.4rem;
color: #777;
}
.p-car-report__evaluation .body {
background: #fff;
padding: 2rem;
}
.p-car-report__evaluation .body dl {
display: flex;
align-items: center;
flex-wrap: wrap;
border-bottom: 1px solid #BBBBBB;
}
.p-car-report__evaluation .body dl dt,
.p-car-report__evaluation .body dl dd {
font-size: 2rem;
font-weight: bold;
padding: 1.4rem 1rem;
}
.p-car-report__evaluation .body dl dt {
width: calc( 100% - 22rem );
}
.p-car-report__evaluation .body dl dd {
font-family: 'Heebo', "Noto Sans CJK JP", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Droid Sans", sans-serif;
width: 22rem;
text-align: right;
}
.p-car-report__evaluation .body dl dd strong {
font-size: 3.4rem;
color: #00B2D8;
}
.p-car-report__evaluation .body dl.total dt,
.p-car-report__evaluation .body dl.total dd {
padding: 3rem 1rem;
}
.p-car-report__evaluation .body dl.total dt {
padding-left: 4rem;
}
.p-car-report__evaluation .body dl.total dd {
background-color: #FFFF00;
padding-right: 4rem;
}
.p-car-report__evaluation .body dl.total dd strong {
font-size: 4.8rem;
}
.p-car-report__evaluation .supplement {
margin-top: 2rem;
}
.p-car-report__application {
margin-top: 2.6rem;;
}
.p-car-report__application a {
max-width: 54rem;
}
.evaluation-pdf {
margin-top: 2rem;
}
@media only screen and (max-width: 767px) {
/* 車両情報 */
.p-car-detail .inner {
width: 100%;
}
.p-car-detail .heading {
padding-left: 4%;
padding-right: 4%;
margin-bottom: 1rem;
}
.p-car-detail .heading h1 .maker {
font-size: 1.4rem;
}
.p-car-detail .heading h1 .name {
font-size: 2rem;
margin-right: 1rem;
}
.p-car-detail .heading .price {
flex-direction: column;
flex-wrap: wrap;
justify-content: end;
}
.p-car-detail .heading .price > span {
margin-right: 0;
margin-bottom: 0.6rem;
text-align: right;
font-size: 1rem;
width: 100%;
}
.p-car-detail .heading .price .price-number span:first-of-type {
font-size: 2.4rem;
}
.p-car-detail .body {
flex-direction: column;
border-top: 4px solid #E0E0E0;
}
.p-car-detail-image {
width: 100%;
}
.p-car-detail-content {
width: 92%;
margin-left: auto;
margin-right: auto;
}
.p-car-detail-image .caption {
padding: 1.6rem 4%;
background: #fff;
color: #231F20;
}
/* 現車確認レポート */
.p-car-report {
background-color: #EDEDED;
padding: 4rem 0 2rem 0;
}
.p-car-report > .heading {
width: 100%;
}
.p-car-report > .heading h2 {
background-size: 44px auto;
padding: 1rem 0 1rem 5.4rem;
}
.p-car-report > .heading h2 span {
font-size: 1.1rem;
}
.p-car-report > .heading h2 strong {
font-size: 1.8rem;
}
.p-car-report > .body {
width: 100%;
padding: 2rem 0;
}
.p-car-report__content h3 {
font-size: 1.6rem;
padding: 1.4rem 0 1.4rem 5.5rem;
width: 94%;
margin: 0 auto 1.2rem auto;
}
.p-car-report__content.good h3 {
background-size: 45px auto;
}
.p-car-report__content.check h3 {
background-size: 45px auto;
}
.p-car-report__slide .swiper::before {
height: 27rem;
}
.p-car-report__slide .swiper-button-prev,
.p-car-report__slide .swiper-button-next {
width: 17px;
}
.p-car-report__content p {
padding: 0 6%;
}
.p-car-report__slide .swiper-pagination {
margin-top: 14px;
}
.p-car-report__evaluation {
background-color: #EDEDED;
padding: 3rem 4%;
}
.p-car-report__evaluation .heading h4 {
font-size: 1.8rem;
margin-left: 0;
}
.p-car-report__evaluation .heading span {
font-size: 1.1rem;
}
.p-car-report__evaluation .body dl dt,
.p-car-report__evaluation .body dl dd {
font-size: 1.3rem;
padding: 1.2rem 0.5rem;
}
.p-car-report__evaluation .body dl dd strong {
font-size: 2rem;
}
.p-car-report__evaluation .body dl.total dd strong {
font-size: 3rem;
}
.p-car-report__evaluation .body dl dt {
width: calc( 100% - 14rem );
}
.p-car-report__evaluation .body dl dd {
width: 14rem;
}
.p-car-report__evaluation .body dl.total dt {
padding-left: 2rem;
}
.p-car-report__evaluation .body dl.total dd {
padding-right: 2rem;
padding: 2rem 1rem;
}
.p-car-report__evaluation .supplement {
font-size: 1.1rem;
margin-top: 1rem;
}
.p-car-report__application a {
font-size: 1.6rem;
}
}
/*----------------------------------------
車両情報（パスワード保護）
----------------------------------------*/
.p-car-opportunity {
background-color: #EDEDED;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10rem 0;
}
.p-car-opportunity__heading {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.p-car-opportunity__heading img {
width: 8rem;
margin-bottom: 1.6rem;
}
.p-car-opportunity__heading h2 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 3rem;
}
.p-car-opportunity > p {
text-align: center;
margin-bottom: 3rem;
}
.p-car-opportunity > form {
display: flex;
}
.p-car-opportunity > form input[type="password"] {
margin-right: 1rem;
padding: 1.2rem;
border-radius: .6rem;
border: 1px solid #BCBCBC;
background-color: #fff;
font-size: 1.5rem;
}
.p-car-opportunity > form input[type="submit"] {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background: #00B2D8;
line-height: 1;
text-decoration: none;
padding: 1.2rem;
border-radius: .6rem;
letter-spacing: .1rem;
font-size: 1.5rem;
font-weight: 700;
width: 12rem;
position: relative;
z-index: 0;
overflow: hidden;
transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
-webkit-appearance: button;
appearance: button;
border: none;
cursor: pointer;
box-shadow: 0 0.3rem 1rem rgb(0 0 0 / 30%);
}
.p-car-opportunity > form input[type="submit"]:hover {
opacity: .75;
}
@media only screen and (max-width: 767px) {
.p-car-opportunity > form input[type="submit"] {
width: 10rem;
}
}
/*----------------------------------------
車両情報（商談中）
----------------------------------------*/
.p-opportunity-topics .date {
color: #FFE900;
margin-right: 1rem;
}
.p-opportunity-steps {
line-height: 1;
background-color: #EDEDED;
}
.p-opportunity-steps ul {
width: 990px;
display: flex;
}
.p-opportunity-steps ul li {
width: 16rem;
padding: 1rem 0;
}
.p-opportunity-steps ul li p {
display: flex;
flex-direction: column;
align-items: center;
border-right: 1px solid #B5B5B5;
padding: 1.2rem 0 2rem 0;
}
.p-opportunity-steps ul li:last-of-type p {
border-right: none;
}
.p-opportunity-steps ul li p img {
width: 7.4rem;
}
.p-opportunity-steps ul li.active {
background: #FFE900 url(../img/car/bg_active_step.svg) no-repeat center bottom;
background-size: 4rem;
}
.p-opportunity-steps ul li.done p img,
.p-opportunity-steps ul li.done p span {
opacity: .5;
}
.p-opportunity-content {
width: 990px;
justify-content: space-between;
padding: 2rem 0;
border-bottom: 4px solid #E0E0E0;
}
.p-opportunity-content__intro {
text-align: center;
margin-bottom: 2rem;
}
.p-opportunity-content__meta {
display: flex;
justify-content: space-between;
font-size: 1.7rem;
}
.p-opportunity-content__meta dl {
width: 48%;
display: flex;
align-items: center;
padding: 1.4rem 1rem 1.6rem 1rem;
border-top: 4px solid #E0E0E0;
border-bottom: 1px solid #bbb;
}
.p-opportunity-content__meta dl dt {
width: 12rem;
color: #00B2D8;
}
.p-opportunity-content__meta dl dd {
flex: 1;
}
.p-opportunity-content__estimate {}
.p-opportunity-content__estimate > strong {
display: block;
color: #00B2D8;
font-weight: normal;
font-size: 1.7rem;
padding: 1.4rem 1rem 1.6rem 1rem;
}
.p-opportunity-estimates {
display: flex;
justify-content: space-between;
}
.p-opportunity-estimates .item {
width: 48%;
border-bottom: 1px solid #bbb;
}
.p-opportunity-estimates .item span,
.p-opportunity-estimates .item a {
display: flex;
align-items: center;
justify-content: center;
color: #000;
width: 100%;
padding: 1.6rem 0 2rem 0;
border-radius: 0.5rem;
font-size: 1.8rem;
font-weight: bold;
text-decoration: none;
box-shadow: 0 0.3rem .8rem rgb(0 0 0 / 50%);
transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}
.p-opportunity-estimates .item a:hover {
opacity: .75;
}
.p-opportunity-estimates .item span img,
.p-opportunity-estimates .item a img {
width: 4rem;
height: auto;
}
.p-opportunity-estimates .item span {
opacity: .5;
}
.p-opportunity-estimates .item.link a {
background-color: #FFE900;
}
.p-opportunity-estimates .item.pdf a {
background-color: #EDEDED;
}
.p-opportunity-estimates .item p {
text-align: center;
padding: 1.6rem 0;
}
.p-opportunity-contact {
display: flex;
justify-content: space-between;
width: 48%;
margin: 4rem 0 2rem auto;
}
.p-opportunity-contact a {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
width: 48%;
padding: 1.2rem 0 1.6rem 0;
border-radius: 0.5rem;
font-size: 1.7rem;
font-weight: bold;
text-decoration: none;
box-shadow: 0 0.3rem .8rem rgb(0 0 0 / 50%);
transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}
.p-opportunity-contact a:hover {
opacity: .75;
}
.p-opportunity-contact a img {
width: 4rem;
height: auto;
}
.p-opportunity-contact a:first-of-type {
background-color: #E74400;
}
.p-opportunity-contact a:last-of-type {
background-color: #007DCD;
}
@media only screen and (max-width: 767px) {
.p-opportunity-steps ul {
width: 100%;
justify-content: space-evenly;
}
.p-opportunity-steps ul li.active {
background-size: 3rem;
}
.p-opportunity-steps ul li p {
font-size: 1rem;
padding: 0 0 1rem 0;
}
.p-opportunity-steps ul li p img {
width: 70%;
}
.p-opportunity-estimates .item span,
.p-opportunity-estimates .item a {
font-size: 1.6rem;
}
.p-opportunity-content {
width: 100%;
border-bottom: none;
padding-bottom: 0;
}
.p-opportunity-contact a img {
width: 3.4rem;
}
.p-opportunity-content__intro {
text-align: left;
padding: 0 4%;
}
.p-opportunity-content__meta {
flex-direction: column;
padding: 0 4%;
border-top: 4px solid #E0E0E0;
font-size: 1.4rem;
}
.p-opportunity-content__meta dl {
width: 100%;
border-top: none;
}
.p-opportunity-content__estimate {
padding: 0 4%;
}
.p-opportunity-estimates {
flex-direction: column;
}
.p-opportunity-content__estimate > strong {
font-size: 1.4rem;
}
.p-opportunity-estimates .item {
width: 100%;
margin-bottom: 2.8rem;
}
.p-opportunity-estimates .item.pdf {
padding-bottom: 3rem;
}
.p-opportunity-contact {
width: 92%;
margin: 0 auto 1rem auto;
}
.p-opportunity-contact a {
font-size: 1.4rem;
padding: 1rem 0 1.2rem 0;
}
.page-car-detail.is-limited .heading {
background: #EDEDED;
padding-top: 2rem;
}
}
/* 掲載残り日数 */
.p-usedcar-days-left {
font-size: 1.4rem;
color: #777777;
margin-bottom: 1rem;
border: 1px solid #bbb;
display: inline-block;
padding: 0.2rem 1rem;
}
.p-usedcar-days-left svg {
margin-right: .5rem;
}
/*----------------------------------------
フォーム共通
----------------------------------------*/
.p-form {
padding: 0 0 6rem 0;
border-bottom: 1px solid #BBBBBB;
}
.p-form > dl {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid #BBBBBB;
position: relative;
}
.p-form > dl:last-of-type {
border-bottom: none;
}
.p-form > dl::after {
content: attr(data-step);
display: block;
font-size: 1.3rem;
position: relative;
top: 3rem;
right: 0;
color: #8D8D8D;
}
.p-form > dl > dt {
width: 18rem;
font-weight: bold;
padding: 3rem 0;
}
.p-form > dl > dd {
width: calc( 100% - 20rem );
padding: 3rem 3rem 3rem 0;
}
.p-form > dl > dd dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
/* align-items: center; */
}
.p-form > dl > dd dl:last-of-type {
/* margin-bottom: 1rem; */
}
.p-form > dl > dd dl dt {
width: 14rem;
margin-top: 1rem;
margin-bottom: 1rem;
font-size: 1.4rem;
}
.p-form > dl > dd dl dd {
width: calc( 100% - 14rem );
margin-bottom: 2rem;
}
.p-form > dl > dd dl:last-of-type dd {
margin-bottom: 0;
}
.p-form p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.p-file-upload-notice {
font-size: 1.2rem;
margin-top: 1rem;
}
.p-form__acceptance {
padding: 4rem 0;
border-top: 1px solid #BBBBBB;
text-align: center;
}
.p-form .p-form__acceptance p {
color: #E34371;
}
.p-form .p-form__import-category {
margin-top: 1rem;
margin-left: -1rem;
margin-bottom: 1rem;
}
input[type="submit"][disabled].c-button.blue,
input[type="submit"][disabled].c-button.red {
color: #fff;
background: #999 url(../img/car/allow_white.svg) no-repeat right 1.6rem center;
background-size: 10px auto;
}
/* Contact form 7 Output */
.wpcf7 form .wpcf7-response-output {
width: 90%;
margin: 20px auto;
color: #398f14;
font-weight: 700;
text-decoration: none;
font-size: 16px;
text-align: center;
line-height: 1.4;
padding: 12px;
border: none !important;
}
span.wpcf7-not-valid-tip,
.wpcf7-not-valid-tip-no-ajax {
color: #c00;
text-decoration: underline;
}
.wpcf7 form.invalid .wpcf7-response-output,
div.wpcf7-validation-errors {
color: #c00;
font-weight: 700;
text-decoration: underline;
border: none;
}
.wpcf7-mail-sent-ok {
color: #365899;
font-weight: 700;
text-decoration: underline;
border: none;
}
@media only screen and (max-width: 767px) {
.p-form {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.p-form > dl {
flex-direction: column;
}
.p-form > dl::after {
font-size: 1.4rem;
position: absolute;
top: 2.2rem
}
.p-form > dl > dt {
width: 100%;
text-align: center;
font-size: 1.8rem;
padding: 2rem 0 0 0;
}
.p-form> dl > dd {
width: 100%;
padding: 2rem 0;
}
.p-form .c-input-select {
width: 100%;
}
.p-form > dl > dd dl {
border-top: 1px solid #bbb;
}
.p-form > dl > dd dl:last-of-type {
border-bottom: 1px solid #bbb;
}
.p-form > dl > dd dl dt {
margin-top: 0.8rem;
margin-bottom: 0;
padding: 2rem 0;
}
.p-form > dl > dd dl dd {
border-left: 1px dotted #bbb;
padding: 2rem 0 2rem 2rem;
margin-bottom: 0;
}
.p-form p {
text-align: center;
margin-bottom: 1.6rem;
}
.p-form .p-form__acceptance p {
text-align: left;
}
}
/*----------------------------------------
売るTOP
----------------------------------------*/
.p-cell-form {
background-color: #ccc;
padding: 2rem 0;
}
.p-cell-form .inner {
background-color: #fff;
border-radius: .4rem;
padding: 5rem;
}
.p-cell-form h1 {
font-size: 1.8rem;
text-align: center;
margin-bottom: 1.6rem;
}
.p-cell-form .p-form {
border-bottom: none;
padding-bottom: 2rem;
}
.p-cell-form .p-form > dl {
justify-content: center;
}
.p-cell-form .p-form dd .c-input-text.full-length {
width: 100% !important;
max-width: initial !important;
}
.p-cell-form .p-form > dl > dd {
width: calc( 100% - 44rem );
}
.p-cell-form .p-form > dl > dd .c-input-text {
max-width: 20rem;
}
.p-cell-form .p-form .t-small-red {
font-size: 1.1rem;
color: #E34371;
}
.p-cell-form__submit .c-button {
max-width: 35rem;
margin-top: 2rem;
}
/* 車両ボディタイプ */
.p-car-type .wpcf7-radio {
display: flex;
flex-wrap: wrap;
}
.p-car-type .wpcf7-list-item {
width: 25%;
margin-bottom: 2rem;
position: relative;
}
.p-car-type .wpcf7-list-item-label {
align-items: center;
cursor: pointer;
display: flex;
flex-direction: column;
font-size: 1rem;
line-height: 1;
white-space: nowrap;
}
/* デフォルトのボタン */
.p-car-type input[type="radio"] {
opacity: 0;
position: absolute;
}
/* チェック前のボタン */
.p-car-type .wpcf7-list-item .wpcf7-list-item-label::before {
background-repeat: no-repeat;
background-size: contain;
content: "";
display: inline-block;
height: 50px;
width: 80px;
}
/* チェック後のボタン */
.p-car-type input[type="radio"]:checked + .wpcf7-list-item-label {
color: #E34371;
}
.p-car-type input[type="radio"]:checked + .wpcf7-list-item-label::after {
content: "";
display: block;
height: 70px;
width: 110px;
position: absolute;
top: -4px;
z-index: 0;
border: 1px solid #E34371;
border-radius: 4px;
}
/* 各ボディタイプ画像 */
.p-car-type .wpcf7-list-item:nth-of-type(1) .wpcf7-list-item-label::before {
background-image: url(../img/car/icon_car_type_1.svg);
}
.p-car-type .wpcf7-list-item:nth-of-type(2) .wpcf7-list-item-label::before {
background-image: url(../img/car/icon_car_type_2.svg);
}
.p-car-type .wpcf7-list-item:nth-of-type(3) .wpcf7-list-item-label::before {
background-image: url(../img/car/icon_car_type_3.svg);
}
.p-car-type .wpcf7-list-item:nth-of-type(4) .wpcf7-list-item-label::before {
background-image: url(../img/car/icon_car_type_4.svg);
}
.p-car-type .wpcf7-list-item:nth-of-type(5) .wpcf7-list-item-label::before {
background-image: url(../img/car/icon_car_type_5.svg);
}
.p-car-type .wpcf7-list-item:nth-of-type(6) .wpcf7-list-item-label::before {
background-image: url(../img/car/icon_car_type_6.svg);
}
.p-car-type .wpcf7-list-item:nth-of-type(7) .wpcf7-list-item-label::before {
background-image: url(../img/car/icon_car_type_7.svg);
}
.p-car-type .wpcf7-list-item:nth-of-type(8) .wpcf7-list-item-label::before {
background-image: url(../img/car/icon_car_type_8.svg);
}
.p-car-type .wpcf7-list-item:nth-of-type(9) .wpcf7-list-item-label::before {
background-image: url(../img/car/icon_car_type_9.svg);
}
.p-car-type .wpcf7-list-item:nth-of-type(10) .wpcf7-list-item-label::before {
background-image: url(../img/car/icon_car_type_10.svg);
}
.p-car-type .wpcf7-list-item:nth-of-type(11) .wpcf7-list-item-label::before {
background-image: url(../img/car/icon_car_type_11.svg);
}
.p-car-type .wpcf7-list-item:nth-of-type(12) .wpcf7-list-item-label::before {
background-image: url(../img/car/icon_car_type_12.svg);
}
@media only screen and (max-width: 767px) {
.p-cell-form .inner {
border-radius: 0;
padding: 2rem 0;
width: 100%;
}
.p-cell-form h1 {
font-size: 1.4rem;
border-bottom: 6px solid #E0E0E0;
padding-bottom: 1.6rem;
}
.p-cell-form .p-form > dl {
border-bottom: none;
}
.p-cell-form .p-form > dl > dd {
width: 100%;
}
.p-cell-form .p-form > dl > dd .c-input-text {
max-width: 12rem;
}
.p-car-type .wpcf7-radio {
justify-content: center;
}
.p-car-type .wpcf7-list-item {
width: 33%;
margin: 0 0 2rem 0;
}
}
/*----------------------------------------
問い合わせフォーム
----------------------------------------*/
.p-contact {
width: 630px;
padding: 5rem 0 0 0;
}
.p-contact h1 {
font-size: 1.8rem;
text-align: center;
margin-bottom: 1.6rem;
}
.p-contact__submit .c-button {
max-width: 35rem;
}
@media only screen and (max-width: 767px) {
.p-contact {
width: 100%;
padding: 1.4rem 0 0 0;
border-top: 6px solid #E0E0E0;
}
.p-contact h1 {
font-size: 1.4rem;
border-bottom: 6px solid #E0E0E0;
padding-bottom: 1.6rem;
}
}
/*----------------------------------------
カウマッチとは
----------------------------------------*/
.p-about {
}
.p-about-heading {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-weight: bold;
margin: 8rem 0 14rem 0;
}
.p-about-heading h1 {
display: flex;
flex-direction: column;
align-items: center;
}
.p-about-heading h1 img {
width: 18rem;
}
.p-about-heading h1 span {
display: block;
}
.p-about-heading figure {
margin-top: 4rem;
}
.p-about-heading figure img {
width: 33rem;
}
.p-about-lead {
display: flex;
align-items: center;
margin: 0 auto 3.4rem auto;
width: fit-content;
}
.p-about-lead figure {
display: block;
width: 9.8rem;
margin-right: 2rem;
}
.p-about-lead__copy {
display: flex;
flex-direction: column;
font-weight: bold;
}
.p-about-lead__copy span {
display: block;
}
.p-about-lead__copy span:nth-of-type(2) {
font-size: 2.4rem;
}
.p-about-content {
width: 90rem;
}
/* 代表あいさつ */
.p-about-greeting {
border-top: 1px solid #bbb;
padding: 4rem 4rem;
}
.p-about-greeting p {
line-height: 1.75;
margin-bottom: 4rem;
text-align: justify;
}
.p-about-greeting figure {
margin-bottom: 4rem;
}
.p-about-greeting h3 {
font-size: 2rem;
margin-bottom: 1.6rem;
}
/* 代表プロフィール */
.p-about-profile {
display: flex;
align-items: center;
padding: 0 4rem 0 4rem;
margin-bottom: 10rem;
}
.p-about-profile figure {
width: 37rem;
margin-right: 5rem;
}
.p-about-profile .name {
display: flex;
flex-direction: column;
}
.p-about-profile .name span:first-of-type {
font-size: 1.3rem;
font-weight: normal;
}
.p-about-profile .name span:last-of-type {
font-size: 1.7rem;
}
.p-about-profile__content {
width: calc(100% - 42rem);
}
.p-about-profile__content .history {
margin-top: 1.6rem;
padding: 1.6rem 0;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
}
.p-about-profile__content .history strong {
font-weight: normal;
}
.p-about-profile__content .history dl {
display: flex;
flex-wrap: wrap;
}
.p-about-profile__content .history dl dt {
width: 10rem;
}
.p-about-profile__content .history dl dd {
width: calc(100% - 10rem);
}
/* 特徴 */
.p-feature {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6rem;
padding-top: 6rem;
border-top: 1px solid #bbb;
}
.p-feature:nth-of-type(odd) {
flex-direction: row-reverse;
}
.p-feature:last-of-type {
margin-bottom: 16rem;
}
.p-feature figure {
width: 37rem;
}
.p-feature-content {
width: calc(100% - 42rem);
}
.p-feature-content .heading {
text-align: center;
}
.p-feature-content .heading strong {
display: block;
font-size: 2.6rem;
font-weight: bold;
color: #E34371;
margin-bottom: 1rem;
}
.p-feature-content .heading h2 {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 1.6rem;
}
/* アクションセクション */
.p-action-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: url(../img/about/bg_action.jpg) no-repeat center;
background-size: cover;
padding: 10rem 0;
margin-top: 10rem;
}
.p-action-box-logo {
color: #fff;
width: 34rem;
text-align: center;
}
.p-action-box-logo strong {
display: block;
font-size: 2.2rem;
margin-bottom: 2rem;
}
.p-action-box-navi {
margin-top: 14rem;
}
.p-action-box-navi ul {
display: flex;
justify-content: space-between;
width: 84rem;
}
.p-action-box-navi ul li {
width: 40rem;
text-align: center;
color: #fff;
}
.p-action-box-navi ul li a {
display: block;
margin-bottom: 1rem;
}
.p-action-box-navi ul li span {
display: block;
font-weight: bold;
}
/* 販売までの流れ */
.p-flow {
width: 100%;
max-width: 72rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 12rem;
}
.p-flow-title {
font-size: 2rem;
font-weight: bold;
text-align: center;
margin-bottom: 5rem;
}
.p-flow-image.is-pc {
}
.p-flow-image.is-sp {
display: none;
}
.p-flow-image-tab {
display: flex;
margin-bottom: 3rem;
}
.p-flow-image-tab li {
width: 50%;
line-height: 1;
padding: 0.9rem 0 1.2rem 0;
background-color: #fff;
font-size: 1.8rem;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #DADADA;;
}
.p-flow-image-tab li:first-of-type {
color: #00B2D8;
}
.p-flow-image-tab li:last-of-type {
color: #E34371;
}
.p-flow-image-tab li.current {
color: #fff;
border-bottom: 1px solid #fff
}
.p-flow-image-tab li:first-of-type.current {
background-color: #00B2D8;
}
.p-flow-image-tab li:last-of-type.current {
background-color: #E34371;
}
.p-flow-image.is-sp figure {
display: none;
max-width: 30rem;
margin-left: auto;
margin-right: auto;
}
.p-flow-image.is-sp figure:first-of-type {
display: block;
}
.p-flow__attention {
margin-top: 2rem;
text-align: center;
}
@media only screen and (max-width: 767px) {
.p-flow-image.is-pc {
display: none;
}
.p-flow-image.is-sp {
display: block;
}
.p-flow__attention {
max-width: 30rem;
margin-left: auto;
margin-right: auto;
}
.p-about-content {
width: 94%;
}
.p-about-heading figure img {
width: 24rem;
}
.p-about-lead figure {
width: 9rem;
margin-right: 1.6rem;
}
.p-about-lead__copy span:nth-of-type(2) {
font-size: 2rem;
}
.p-about-greeting {
padding: 4rem 0;
}
.p-about-profile {
flex-direction: column;
align-items: inherit;
padding: 0;
}
.p-about-profile figure {
width: 100%;
margin-right: 0;
}
.p-about-profile__content {
width: 100%;
margin-top: 2rem;
}
.p-feature {
flex-direction: column;
margin-bottom: 4rem;
padding-top: 4rem;
}
.p-feature:nth-of-type(odd) {
flex-direction: column;
}
.p-feature figure {
width: 100%;
}
.p-feature-content {
width: 100%;
margin-top: 1.6rem;
}
/* アクションセクション */
.p-action-box {
height: 70rem;
background: url(../img/about/bg_action_sp.jpg) no-repeat center;
background-size: cover;
}
.p-action-box-logo {
width: 70vw;
}
.p-action-box-logo strong {
font-size: 1.8rem;
}
.p-action-box-navi ul {
flex-direction: column;
width: 80vw;
}
.p-action-box-navi ul li {
width: 100%;
}
.p-action-box-navi ul li:first-of-type {
margin-bottom: 4rem;
}
.p-action-box-navi ul li span {
font-size: 1.2rem;
}
}
/*----------------------------------------
404ページ
----------------------------------------*/
.p-404 {
text-align: center;
padding: 10rem 0 6rem 0;
}
.p-404 h1 {
line-height: 1;
margin: 0 auto 8rem auto;
font-family: 'Lato', sans-serif;
font-weight: 700;
}
.p-404 h1 span {
display: block;
font-size: 3rem;
letter-spacing: .05em;
}
.p-404 h1 span:first-of-type {
font-size: 16rem;
margin-bottom: 2rem;
color: #00B2D8;
}
.p-404-back-navi {
margin-top: 4rem;
}
.p-404-back-navi a {
width: 50%;
max-width: 30rem;
margin-left: auto;
margin-right: auto;
}
/*----------------------------------------
固定ページ（テンプレート埋め込みタイプ）
----------------------------------------*/
.p-fix-page {
}
.p-fix-page__head {
padding: 6rem 0;
display: flex;
align-items: center;
justify-content: center;
}
.p-fix-page__head h1 {
color: #007DCD;
font-weight: bold;
font-size: 2.2rem;
text-align: center;
}
.p-fix-page__body {
}
.p-fix-page__intro {
padding: 0 0 4rem 0;
margin: 0 auto;
width: 90%;
max-width: 1000px;
text-align: center;
}
.p-fix-page__section-head {
background-color: #EDEDED;
text-align: center;
padding: 1rem 0 1.4rem 0;
}
.p-fix-page__section-head h2 {
font-size: 1.8rem;
}
.p-fix-page__section-body {
padding: 4rem 0 5rem 0;
margin: 0 auto;
width: 90%;
max-width: 1000px;
}
.p-fix-page__section-body ul {
padding-left: 2rem;
}
.p-fix-page__section-body ul li {
list-style: disc;
margin-bottom: 1.6rem;
}
@media only screen and (max-width: 767px) {
.p-fix-page__intro {
text-align: left;
}
}
/*----------------------------------------
企業情報
----------------------------------------*/
.p-company {
}
.p-company .p-fix-page__section-body {
max-width: 600px;
}
.p-company__definition-list {
display: flex;
flex-wrap: wrap;
}
.p-company__definition-list dt {
width: 24%;
padding: 2rem 2% 2.4rem 2%;
border-bottom: 1px solid #000;
display: flex;
align-items: center;
font-weight: 600;
}
.p-company__definition-list dd {
width: 76%;
padding: 2rem 4% 2.4rem 4%;
border-bottom: 1px solid #E5E5E5;
}
@media only screen and (max-width: 767px) {
.p-company__definition-list dt {
width: 30%;
padding: 2rem 1% 2.4rem 1%;
}
.p-company__definition-list dd {
width: 70%;
}
}
/*----------------------------------------
店舗情報
----------------------------------------*/
.l-shop {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
.l-shop__left {
width: 54%;
}
.l-shop__right {
width: 40%;
}
.p-shop {
}
.p-shop__item {
}
.p-shop__movie {
width: 100%;
aspect-ratio: 16 / 9;
}
.p-shop__movie iframe {
width: 100%;
height: 100%;
}
.p-shop__data {
margin-bottom: 4rem;
display: flex;
flex-wrap: wrap;
font-size: 1.4rem;
}
.p-shop__data dt {
width: 30%;
padding: 1.2rem 2% 1.4rem 2%;
border-bottom: 1px solid #000;
display: flex;
align-items: center;
font-weight: 600;
}
.p-shop__data dd {
width: 70%;
padding: 1.2rem 4% 1.4rem 4%;
border-bottom: 1px solid #E5E5E5;
}
.p-shop__photos {
display: flex;
justify-content: space-between;
margin-top: 4rem;
}
.p-shop__photos figure {
width: 30%;
}
.p-shop__summary {
margin-top: 2rem;
}
.p-shop__map {
margin-top: 4rem;
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.p-shop__map iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.p-shop__staff {
}
.p-shop__staff figure {
max-width: 24rem;
}
.p-shop__staff figcaption {
font-weight: bold;
color: #000;
line-height: 1.4;
margin-top: 1rem;
}
.p-shop__staff figcaption strong {
font-size: 2rem;
}
.l-shop-revos {
display: flex;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 767px) {
.l-shop {
flex-direction: column;
}
.l-shop__right,
.l-shop__left {
width: 100%;
}
.p-shop__data {
margin-top: 3rem;
font-size: 1.3rem;
}
.p-shop__staff {
display: flex;
justify-content: center;
}
}
/*----------------------------------------
よくあるご質問
----------------------------------------*/
.p-faq-list {
max-width: 90rem;
margin-top: 8rem;
margin-left: auto;
margin-right: auto;
}
.p-faq-list li {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #BBBBBB;
padding: 5rem 2rem;
}
.p-faq-list li:first-of-type {
border-top: 1px solid #BBBBBB;
}
.p-faq-list li .content .meta {
font-family: 'Lato', sans-serif;
font-size: 1.7rem;
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
}
.p-faq-list li .content .meta .tags span {
color: #00B2D8;
font-weight: 600;
font-size: 1.3rem;
border: 1px solid #00B2D8;
padding: 0.3rem 1.2rem;
}
.p-faq-list li .content h3 {
font-size: 2.2rem;
margin-bottom: 2rem;
line-height: 1.4;
}
.p-faq__contact {
width: 90%;
max-width: 90rem;
margin-top: 8rem;
margin-left: auto;
margin-right: auto;
padding: 2.4% 4% 4% 4%;
border: 2px solid #f2f2f2;
}
.p-faq__contact h2 {
margin-bottom: 1rem;
text-align: center;
}
.p-faq__contact-address {
margin-bottom: 2rem;
}
.p-faq__contact-mail {
margin-bottom: 2rem;
}
.p-faq__contact-mail strong {
display: block;
margin-bottom: 0.6rem;
}
.p-faq__contact-tel strong {
display: block;
margin-bottom: 0.6rem;
}
.p-faq__contact-form {
margin-top: 4rem;
display: flex;
align-items: center;
justify-content: center;
}
.p-faq__contact-form a {
width: 26rem;
}
@media only screen and (max-width: 767px) {
.p-faq__contact {
padding: 3rem 2rem 4rem 2rem;
}
}
/*----------------------------------------
固定ページ
----------------------------------------*/
.p-page {
width: 90%;
max-width: 90rem;
margin-left: auto;
margin-right: auto;
}
.p-page .p-page__head {
padding: 6rem 0;
display: flex;
align-items: center;
justify-content: center;
}
.p-page .p-page__body {
}
/*----------------------------------------
投稿ページ
----------------------------------------*/
.p-post {
width: 90%;
max-width: 90rem;
margin-left: auto;
margin-right: auto;
}
.p-post .p-post__head {
padding: 6rem 0;
display: flex;
align-items: center;
}
.p-post__head-inner {
width: 100%;
}
.p-post .p-post__head .meta {
display: flex;
justify-content: space-between;
font-size: 1.7rem;
margin-bottom: 1rem;
font-family: 'Lato', sans-serif;
}
.p-post .p-post__head .meta .date {
font-size: 1.6rem;
}
.p-post .p-post__head .meta .new {
color: #E34371;
font-weight: 700;
margin-left: 0.6rem;
}
.p-post .p-post__head .meta .tags span {
color: #00B2D8;
font-weight: 600;
font-size: 1.4rem;
border: 1px solid #00B2D8;
padding: 0.3rem 1.2rem;
}
.p-post .p-page__body {
}
/* カラム */
.p-page__body .wp-block-columns {
margin-bottom: 2rem;
}
/* 見出し */
.p-page__body h1 {
font-size: 2.8rem;
font-weight: bold;
margin-top: 2rem;
margin-bottom: 2rem;
}
.p-page__body h2 {
font-size: 2.4rem;
font-weight: bold;
margin-top: 2rem;
margin-bottom: 2rem;
}
.p-page__body h3 {
font-size: 2rem;
font-weight: bold;
margin-top: 2rem;
margin-bottom: 1rem;
}
.p-page__body h4 {
font-size: 1.6rem;
font-weight: bold;
margin-top: 2rem;
margin-bottom: 1rem;
}
/* キャプション共通 */
figcaption {
font-size: 1.3rem;
color: #696969;
text-align: center;
}
/* 段落 */
.p-page__body p {
margin-bottom: 2rem;
}
/* 画像 */
.p-page__body .wp-block-image figcaption {
margin-top: 0.4rem;
}
/* 引用 */
.p-page__body .wp-block-quote {
margin-bottom: 2rem;
}
.p-page__body .wp-block-quote p {
margin-bottom: 0;
padding: 0 0 0 1.6rem;
border-left: 4px solid #C4C4C4;
}
.p-page__body .wp-block-quote cite {
font-size: 1.3rem;
color: #696969;
}
/* ギャラリー */
.p-page__body figure.wp-block-gallery.has-nested-images {
align-items: normal;
margin-bottom: 2rem;
}
.p-page__body .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
background: none;
bottom: initial;
left: initial;
margin-bottom: inherit;
max-height: initial;
overflow: inherit;
padding: initial;
position: relative;
width: 100%;
box-sizing: border-box;
color: #696969;
}
.p-page__body .wp-container-9 {
gap: 4rem;
}
.p-page__body .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
/* width: 30%; */
}
.p-page__body .wp-container-13,
.p-page__body .wp-container-11 {
gap: 4rem;
}
.p-page__body .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
.p-page__body .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2)~figure.wp-block-image:not(#individual-image) {
width: 44%;
}
.p-page__body .wp-block-gallery.has-nested-images figcaption {
font-size: 1.3rem;
color: #696969;
}
/* メディアとテキスト */
.wp-block-media-text .wp-block-media-text__content {
padding-right: 0 !important;
}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
padding-left: 0 !important;
padding-right: 8% !important;
}
/* 表 */
.p-page__body .wp-block-table {
}
.p-page__body .wp-block-table table {
border-top: 1px solid #B8B8B8;
border-left: 1px solid #B8B8B8;
}
.p-page__body .wp-block-table table tr {
border-bottom: 1px solid #B8B8B8;
}
.p-page__body .wp-block-table table tr td {
border-right: 1px solid #B8B8B8;
padding: 0.3rem 0.8rem 0.5rem 0.8rem;
}
.p-page__body .wp-block-table figcaption {
margin-top: 0.4rem;
}
/* リスト */
.p-page__body ol,
.p-page__body ul {
margin-left: 2rem;
margin-bottom: 2rem;
}
.p-page__body ol li,
.p-page__body ul li {
list-style: inherit;
margin-bottom: .3rem;
}
.p-page__body ol {
margin-left: 2rem;
}
/* 区切り */
.p-page__body .wp-block-separator {
border-top: 1px solid #333;
border-bottom: none;
margin: 2rem 0;
}
/* 詩（罫線付き補足） */
.p-page__body .wp-block-verse {
font-size: 1.3rem;
padding: 1rem 1.6rem;
border: 1px solid #B8B8B8;
margin-bottom: 2rem;
}
/* 添付ファイル */
.p-page__body .wp-block-file .wp-block-file__button {
background-color: #E74400;
border-radius: 4rem;
color: #fff;
font-size: 1.3rem;
font-weight: 500;
padding: 0.4rem 1rem 0.6rem 1rem;
}
/* 動画 */
.p-page__body .wp-block-embed {
width: fit-content;
margin: 0 0 2rem;
}
.p-page__body .wp-block-embed figcaption {
margin-top: 0;
margin-bottom: 0;
font-size: 1.3rem;
text-align: center;
}
/* ボタン */
.p-page__body .wp-container-1 {
}
.p-page__body .wp-block-buttons>.wp-block-button {
}
.p-page__body .wp-block-button__link {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background: #E74400;
border: 3px solid rgba(255, 255, 255, .8);
border-radius: 4rem;
line-height: 1;
text-decoration: none;
padding: 1.4rem 2.4rem 1.6rem 2.4rem;
letter-spacing: .14rem;
font-weight: 500;
min-width: 17rem;
max-width: fit-content;
position: relative;
z-index: 0;
overflow: hidden;
transition: all .5s cubic-bezier(0.43, 0.05, 0.17, 1);
}
@media only screen and (max-width: 767px) {
/* メディアとテキスト */
.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
padding: 0 !important;
}
/* 引用 */
.p-page__body .wp-block-quote cite {
font-size: 1.2rem;
}
/* キャプション */
.p-page__body figcaption,
.p-page__body .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
font-size: 1.2rem;
text-align: left;
line-height: 1.4;
}
}
/*----------------------------------------
スペシャルページ（2023.08.10）
----------------------------------------*/
.p-special-visual {
width: 100%;
/* height: 70rem; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background: url(../img/special/bg_main.jpg) no-repeat center;
background-size: cover;
padding-top: 66%;
}
.p-special-visual__content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.p-special-visual-copy {
width: 42vw;
position: absolute;
top: 11%;
}
.p-special-visual-navi {
position: absolute;
bottom: 6%;
right: 7%;
}
.p-special-visual-navi img {
width: 23vw;
max-width: 14rem;
display: block;
}
.p-special-data {
border-bottom: 8px solid #E0E0E0;
margin-bottom: 8rem;
font-weight: bold;
}
.p-special-content {
margin-bottom: 7rem;
}
.p-special-content h2 {
font-size: 3.2rem;
line-height: 1.8;
text-align: center;
}
.p-special-content h2 .t-pink {
color: #e34371;
}
.p-special-content h2 .t-blue {
color: #0d79c3;
}
.p-special-content strong {
text-decoration: underline;
}
.p-special-reg-link {
margin-top: 8rem;
padding-bottom: 5rem;
border-bottom: 8px solid #e0e0e0;
}
.p-special-reg-link a {
display: flex;
justify-content: center;
align-items: center;
background-color: #e34371;
color: #fff;
text-decoration: none;
padding: 1.6rem 0;
border-radius: 0.8rem;
box-shadow: 0 0.5rem 2.4rem rgb(0 0 0 / 30%);
width: 44rem;
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
.p-special-reg-link a span {
font-weight: bold;
font-size: 2rem;
}
.p-special-reg-link a img {
width: 1.2rem;
height: auto;
margin-left: 1rem;
}
.page-special .p-about-banner a:first-of-type {
margin-right: 0;
}
.page-special .p-gotop {
margin-bottom: -5rem;
}
@media only screen and (max-width: 767px) {
.p-special-visual {
height: 50rem;
background: url(../img/special/bg_main_sp.jpg) no-repeat center;
background-size: cover;
padding-top: 5rem;
}
.p-special-visual-copy {
width: 70vw;
top: 11%;
}
.p-special-visual-navi img {
max-width: 10rem;
}
.p-special-content h2 {
font-size: 2.4rem;
}
.p-special-reg-link {
margin-top: 5rem;
}
.page-special .p-gotop {
margin-bottom: 0;
}
}
/*----------------------------------------
TOP（修正2024.1.21）
----------------------------------------*/
.p-top-shop-info {
}
.p-top-shop-info__visual {
}
.p-top-shop-info__visual img {
width: 100%;
height: auto;
}
.p-top-shop-info__content {
max-width: 90rem;
margin-top: 8rem;
margin-bottom: 10rem;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
}
.p-top-shop-info__contact {
}
.p-top-shop-info__contact .logo {
max-width: 30rem;
margin-bottom: 3.2rem;
}
.p-top-shop-info__contact .phone-number {
font-family: 'Lato', sans-serif;
font-size: 3.2rem;
line-height: 1.2;
font-weight: 600;
margin-bottom: .8rem;
}
.p-top-shop-info__contact .phone-number h4 {
font-size: 1.5rem;
margin-bottom: 0.8rem;
}
.p-top-shop-info__contact .phone-number a {
text-decoration: none;
color: #231F20;
}
.p-top-shop-info__contact .phone-number .fax {
font-size: 1.8rem;
}
.p-top-shop-info__contact .address {
margin-bottom: 2.4rem;
}
/* XO Event Calendar */
.p-top-shop-info__calendar {
max-width: 37rem;
}
.p-top-shop-info__calendar h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.holiday-titles {
display: flex;
}
.holiday-title {
margin-right: 2rem !important;
}
.xo-event-calendar p.holiday-title {
font-size: 1rem !important;
}
.xo-event-calendar table.xo-month button span.nav-prev,
.xo-event-calendar table.xo-month button span.nav-next {
height: 10px !important;
width: 10px !important;
}
.xo-event-calendar table.xo-month .month-header>span {
font-weight: 600;
font-size: 1.8rem;
}
.xo-event-category {
display: none !important;
}
@media only screen and (max-width: 767px) {
.p-top-shop-info__content {
width: 84%;
flex-direction: column;
align-items: center;
text-align: center;
}
.p-top-shop-info__contact {
margin-bottom: 5.6rem;
}
}