/*----------
基本設定
----------*/
/* 選択部分色設定 */
::selection {
background: #37414f;
color: #fff;
}
::-moz-selection {
background: #37414f;
color: #fff;
}
/* カラー設定 */
:root {
    --color-base: #f5f5f3;
    --color-dark: #2b2d2f;
    --color-main: #1b365d;
    --color-sub: #967844;
    --color-point: #d03b1b;
    --color-main50: rgba(27,54,93,.5);
    --color-sub50: rgba(150,120,68,.5);
    --color-point50: rgba(208,59,27,.5);
    --font-noto: "Noto Sans JP", sans-serif;
    --font-shippori: "Shippori Mincho", serif;
    --font-cookie: "Cookie", cursive;
    --font-price: "DM Serif Display", serif;
    --font-awesome: "Font Awesome 6 free";
}
/* フォント設定 */
body {
    color: #2b2d2f;
    font-family: "Roboto", "Noto Sans JP", sans-serif;
    font-weight: 400;
}
a {
    color: #2b2d2f;
    text-decoration: none;
}
/* NOTOsansJP */
.ft-noto {
    font-family: "Noto Sans JP", sans-serif;
}
/* しっぽり明朝 boldは600、イタリックなし */
.ft-shippori {
    font-family: "Shippori Mincho", serif;
}
/* Cookie boldなし、イタリックなし */
.ft-cookie {
    font-family: "Cookie", cursive;
}
/* DM Serif Display boldなし、イタリックあり */
.ft-price {
    font-family: "DM Serif Display", serif;
}
strong {
    font-weight: 600;
}
/* 背景設定 */
.bg-gray {
    background: var(--color-base);
}
.bg-stripe {
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 0);
    background-image: repeating-linear-gradient(-70deg, transparent, transparent 3px, var(--color-sub) 3px, var(--color-sub) 4px );
}

/*----------
共通部分設定
----------*/
/* ヘッダー */
.site-header .site-concept {
    width: 100%;
    height: 2rem;
    background: var(--color-dark);
    overflow: hidden;
}
.site-header .site-concept p {
    margin: 0;
    line-height: 2rem;
    color: #fff;
    white-space: nowrap;
    animation: flow 20s linear infinite;    
}
@keyframes flow {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
.site-header .site-branding {
    padding: 1rem 3rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.site-header .site-branding .site-title a {
    width: 222px;
    height: 4.5rem;
    background: url("img/common/logo-hdr.png") left center no-repeat;
    display: block;
    text-indent: -9999px;
}
.site-header .site-branding .main-navigation {
    width: auto;
}
.site-header .site-branding .main-navigation ul.nav-menu {
    display: flex;
    justify-content: flex-end;
    color: var(--color-dark);
    gap: 1em;
}

/* 背景設定 */
.bg-none,
.bg-gray {
    padding: 3rem calc(50% - 36rem);
}
.bg-gray {
    background: var(--color-base);
}

/* 見出し設定 */
h2.defH2:first-of-type {
    margin-top: 0 !important;
}
h2.defH2 {
    padding-left: 1.5rem;
    color: var(--color-main);
    font-family: var(--font-shippori);
    font-weight: 600;
    font-size: 2.25rem;
    white-space: nowrap;
    line-height: 3.375rem;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
h2.defH2::before,
h2.defH2::after {
    content: '';
}
h2.defH2::before {
    width: .5rem;
    height: 3.375rem;
    background: var(--color-sub);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}
h2.defH2::after {
    width: 100%;
    height: .5rem;
    margin-left: 1em;
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 0);
    background-image: repeating-linear-gradient(-70deg, transparent, transparent 3px, var(--color-sub) 3px, var(--color-sub) 4px );
    display: block;
}
h2.defH2 > span {
    font-family: var(--font-noto);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5em;
    position: absolute;
    right: 0;
    bottom: 0;
}
h2.defH2 > span::after {
    content: '\f101';
    margin-left: .5em;
    font-family: var(--font-awesome);
    font-weight: 900;
    color: var(--color-dark);
}
h3.defH3 {
    padding-left: 2rem;
    font-family: var(--font-shippori);
    font-weight: 600;
    font-size: 1.875rem;
    line-height: 2.625rem;
    position: relative;
}
h3.defH3::before,
h3.defH3::after {
    content: '';
    width: 28px;
    height: 28px;
    transform: rotate(45deg);
    display: block;
    position: absolute;
    left: 0;
}
h3.defH3::before {
    background: var(--color-main50);
    top: 0;
}
h3.defH3::after {
    background: var(--color-sub50);
    bottom: 0;
}

/* 検索 */
.search-country {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
}
.search-country li {
    width: 6.75rem;
}
.search-country li figure {
    width: 100%;
    margin: 0;
}
.search-country li figure img {
    border: 1px solid var(--color-sub);
}
.search-country li figure figcaption {
    text-align: center;
    font-weight: 600;
    line-height: 1.5em;
}
.search-list {
    padding-left: 1rem;
    margin: 1rem 0 3rem 0;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
}
.search-list > li::after {
    content: '｜';
    margin-left: 1em;
}
.search-list > li:last-child::after {
    content: '';
}
.search-list > li > a:hover {
    text-decoration: underline;
}

/*----------
トップページ
----------*/
.sitecopy {
    width: 100%;
    height: 12.5rem;
    background: url("img/top/pagetitle-top.jpg") center center no-repeat;
    background-size: cover;
    position: relative;
}
.sitecopy::before {
    content: '';
    background: rgba(0,0,0,.4);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.sitecopy p {
    margin: 0;
    color: #fff;
    font-size: 3rem;
    font-style: italic;
    font-family: var(--font-shippori);
    position: absolute;
    left: 3rem;
    bottom: 1rem;
}
.sitecopy .search-form {
    position: absolute;
    top: 1rem;
    right: 3rem;
}
.sitecopy .search-form input[type="text"] {
    height: 2.25rem;
    font-family: var(--font-noto);
    font-size: .875rem;
}
.sitecopy .search-form button[type="submit"] {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: var(--color-main);
    border: none;
    cursor: pointer;
}
.sitecopy .search-form button[type="submit"] > i {
    color: #fff;
    line-height: 2.25rem;
    text-align: center;
}
.area-news {
    padding: 0;
    margin: 1rem 0 0;
    list-style: none;
}
.area-news > li {
    width: 100%;
    padding: 1rem;
    margin-bottom: .5rem;
    background: #fff;
    line-height: 1em;
}
.area-news > li > article {
    display: flex;
    flex-wrap: nowrap;
}
.area-news > li h1 {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    display: block;
}
.area-news > li time {
    margin-right: 2rem;
    font-size: .875em;
    color: var(--color-main);
    line-height: 1rem;
}

/* 車両一覧 */
.list-vehicle {
    display: flex;
    flex-wrap: wrap;
}
.list-vehicle.list-box {
    gap: 2rem 1rem;
}
.list-vehicle.list-box a {
    width: 17.25rem;
    min-height: 21.5rem;
    height: auto;
    box-shadow: 4px 4px 4px 0 rgba(0,0,0,.1);
}
.list-vehicle.list-box a:hover {
    box-shadow: none;
    transform: translate(4px,4px);
    transition-duration: .6s;
}
.list-vehicle.list-box a .link-vehicle {
    background: #fff;
    padding-bottom: 1rem;
}
.list-vehicle.list-box a .link-vehicle figure {
    width: 100%;
    margin: 0 0 1rem;
    overflow: hidden;
}
.list-vehicle.list-box a .link-vehicle figure img {
    height: 13rem;
    margin-bottom: 1rem;
    object-fit: cover;
}
.list-vehicle.list-box a .link-vehicle figure figcaption h1 {
    padding: 0 1rem;
    margin: 0;
    font-size: 1rem;
    color: var(--color-main);
    font-weight: 600;
}
.list-vehicle.list-box a .link-vehicle dl {
    padding: 0 1rem;
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    color: var(--color-dark);
    display: flex;
    flex-wrap: wrap;
}
.list-vehicle.list-box a .link-vehicle dl dt {
    width: 30%;
}
.list-vehicle.list-box a .link-vehicle dl dd {
    width: 70%;
    margin: 0;
}



