/* @import './custom/base.css';
@import './custom/utility.css';
@import './custom/custom.css';
@import './custom/responsive.css'; */
/*========= css base ===========*/
:root {
    --primary-color: #006934;
    --background-color: #ffffff;
    --background-color-creamy: #eadece;
    --color-light-blue: #aaddf8;
    --color-red: #e50012;
    --color-orage: #ff9933;
    --color-white: #fff;
    --color-light-blue: #95bae4;
    --color-black: #252525;
    --color-green: #42b880;
    --color-medium-green: #83BD35;
    --color-light-green: #dfdb;
    --color-dark-green: #3A5735;
    --color-darker-green: #315a6f;
    --color-navi: #49579e;
    --color-gray: #575757;
    --color-light-gray: #f5f5f4;
    --color-dark-blue: #333399;
    --color-blue: #3E6EB4;
    --font-size-base: 16px;
    --banner-adv: url(/templates/oirase/img/banner/top-project.webp);
    --banner-con: url(/templates/oirase/img/banner/concept_bn.webp);
    --font-name: 'Noto Sans JP', 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
}

main {
    position: relative;
    align-items: center;
}

section {
    width: 100%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    caret-color: transparent;
}

header {
    position: relative;
    z-index: 1;
}

body {
    font-family: var(--font-name);
    position: relative;
    background-color: var(--background-color);
    width: 100%;
}

header {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 4;
    left: 0;
    background-color: rgba(0, 0, 0, 0.2);
}


ul {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0px;
    margin: 0px;
}

a {
    text-decoration: none;
    color: var(--color-black);
    cursor: pointer;
}

.lighter {
    font-weight: lighter;
    color: var(--color-gray);
}

.font-serif {
    font-family: serif;
}

.text-red__sp>p:first-child {
    color: var(--color-red);
    font-weight: bold;
    font-size: calc(var(--font-size-base) + 20px);
}

.text-sp_two>p:first-child,
.text-sp>p:first-child {
    font-weight: bold;
    font-size: calc(var(--font-size-base) + 6px);
}

.test-light__blue {
    color: var(--color-light-blue);
}

.text-sp_two>p:first-child {
    color: var(--color-darker-green);
}

.text-sp>p:first-child {
    color: var(--color-light-blue);
}

.exception-style__text p:first-child {
    font-family: serif;
    font-size: calc(var(--font-size-base) + 4px);
    margin-top: 20px;
}

.img-config {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

input,
textarea,
[contenteditable="true"] {
    caret-color: auto;
}

input,
select,
textarea {
    outline: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

td,
th,
tbody,
thead,
table {
    margin: 0px;
    padding: 0px;
}

/*========= css utility ===========*/
.text-white {
    color: var(--color-white);
}

.text-black {
    color: var(--color-black);
}

.text-gray {
    color: var(--color-gray);
}

.text-primary {
    color: var(--primary-color);
}

.text-green {
    color: var(--color-green);
}

.text-light-blue {
    color: var(--color-light-blue);
}

.text-red {
    color: var(--color-red);
}

.text-dark-green {
    color: var(--color-dark-green);
}

.bg-white {
    background-color: var(--color-white);
}

.bg-primary {
    background-color: var(--primary-color);
}

.bg-gray {
    background-color: var(--color-gray);
}

.bg-light-blue {
    background-color: var(--color-light-blue);
}

.bg-light-gray {
    background-color: var(--color-light-gray);
}

.bg-red {
    background-color: var(--color-red);
}

.rounded {
    border-radius: 10px;
}

.rounded-full {
    border-radius: 999px;
}

.shadow {
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.1);
}

.flex {
    display: flex;
}

.grid {
    display: grid;
}

.center {
    justify-content: center;
    align-items: center;
}

.uppercase {
    text-transform: uppercase;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.text-center {
    text-align: center;
}

.align-center {
    justify-content: center;
}

.flex-col {
    flex-direction: column;
}

.container-exsmall {
    max-width: 900px;
    width: calc(100% - 40px);
    margin: 0 auto;
}

.container-exsmall-padding {
    max-width: 900px;
    margin: 0 auto;
}

.container-small-padding {
    max-width: 1200px;
    margin: 0 auto;
    width: calc(100% - 40px);
}

.container-small {
    max-width: 1200px;
    margin: 0 auto;
}

.container-larger-padding {
    max-width: 1920px;
    margin: 0 auto;
    width: calc(100% - 20px);
}

.container-larger {
    max-width: 1920px;
    margin: 0 auto;
}

.container-medium-padding {
    max-width: 1400px;
    margin: 0 auto;
    width: calc(100% - 20px);
}

.container-medium {
    max-width: 1400px;
    margin: 0 auto;
}

/*========= css custom ===========*/
/* ===== css menu container ===== */

/* ===== css menu container ===== */

.site-header {
    height: fit-content;
    position: absolute;
    top: 0;
    z-index: 11;
    width: 100%;
}

.site-header__wrapper {
    justify-content: right;
    padding: 30px 30px;
}

.site-header__wrapper {
    justify-content: space-between;
    padding: 30px 30px 0px 0px;
    padding-left: clamp(40px, 10vw, 200px);
}

/* ===== custom menu ===== */

.menu-container {
    height: 100vh;
    width: 90%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10;
    padding: 120px 40px 30px;
    max-width: 400px;

    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;

    transition: transform 4ms ease-in-out, opacity 4ms ease-in-out, visibility 4ms ease-in-out;
}

.menu-container.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.menu-list {
    gap: 20px;
}

.menu-list li a:hover {
    opacity: 0.6;
}

.menu-list a {
    color: var(--color-white);
    font-size: var(--font-size-base);
}

.menu-list .disabled-menu {
    color: var(--color-white);
    font-size: var(--font-size-base);
}

.menu-list li>ul {
    list-style: disc;
    color: var(--color-white);
    margin-left: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0px 0px 0px;
}

.lang-container {
    width: 100%;
    margin-bottom: 50px;
    justify-content: center;
}

.lang-select {
    appearance: none;
    background-color: transparent;
    border: 1px solid var(--color-white);
    color: var(--color-white);
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 16px;
    position: relative;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    width: 201px;
}

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

.lang-select>option {
    color: var(--color-black);
    font-size: 16px;
    max-width: 201px;
    width: 100%;
    text-align: left;
    text-align-last: center;
    -ms-text-align-last: center;
    -moz-text-align-last: center;
}


/* Optional: hover/focus */
.lang-select:hover,
.lang-select:focus {
    border-color: #ddd;
    outline: none;
}

/* ===== icon animation bars ===== */

.icon-bar {
    all: unset;
    width: 55px;
    height: 55px;
    position: relative;
    cursor: pointer;
    background-color: var(--primary-color);
    border: none;
}

.icon-bar span {
    display: block;
    height: 2px;
    background: var(--color-white);
    margin: 12px auto;
    width: 60%;
}

.disp_n {
    background-color: transparent !important;
}

.icon-bar .disp_n {
    position: absolute;
    top: 39%;
    left: 37%;
    transform: translate(-50%, -50%);
    font-size: 47px;
    color: var(--color-white);
    display: none;
    pointer-events: none;
    line-height: 1;
    height: 61px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Animations */
@keyframes rotate-cw {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(720deg);
    }
}

@keyframes rotate-ccw {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-720deg);
    }
}

@keyframes shrink-out {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

/* Class add by JS */
.animate .nth-1 {
    animation: rotate-cw 0.6s ease forwards;
}

.animate .nth-2 {
    animation: shrink-out 0.6s ease forwards;
}

.animate .nth-3 {
    animation: rotate-ccw 0.6s ease forwards;
}

.animate-reverse .nth-1 {
    animation: rotate-cw 0.6s ease reverse forwards;
}

.animate-reverse .nth-2 {
    animation: shrink-out 0.6s ease reverse forwards;
}

.animate-reverse .nth-3 {
    animation: rotate-ccw 0.6s ease reverse forwards;
}


/* -- css header menu */
.header-menu {
    justify-content: right;
    padding: 10px;
    position: fixed;
    display: none;
    z-index: 15;
}

/* -- main container */
.main-container {
    align-items: center;
    max-width: 1920px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* -- css header */

.custom-header {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* -- css banner -- */
.top-infobox {
    width: 100%;
    position: relative;
    /* padding-bottom: 30px; */
}

.hover {
    text-decoration: underline;
    color: blue;
}

.logo {
    cursor: pointer;
    z-index: 2;
    width: 148px;
    height: 97px;
    display: block;
    top: 30px;
}

.logo:hover {
    opacity: 0.6;
}

.logo img {
    width: 100%;
    height: auto;
}


.inner {
    position: absolute;
    z-index: 10;
    flex-direction: column;
    gap: 15px;
    bottom: 10vh;
}

.pos_r {
    background-color: rgba(0, 105, 52, 0.7);
    padding: 40px;
    width: 487px;
}

.fs_23 {
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-white);
    font-weight: normal;
    font-size: calc(var(--font-size-base) + 7px) !important;
}

.text {
    font-size: var(--font-size-base);
    color: var(--color-white);
    /* line-height: 2; */
}

.content-mobile {
    display: none;
}

.content-mobile .text {
    color: var(--color-black);
}

.slidebox {
    position: relative;
    width: 160%;
    margin-left: -30%;
    z-index: 1;
}

.slidebox img {
    aspect-ratio: 1920 / 937;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* -- css advertisement */
.advertisement-image {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 20px 0px 10px 0px;
    margin-bottom: 20px;
}

.advertisement-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.advertisement-image div {
    aspect-ratio: 16 / 10;
}

/* css place advertisement */
.place-adv__container {
    margin-top: 20px;
    gap: 20px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.place-adv__btn {
    height: fit-content;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    max-width: 350px;
    width: 100%;
    color: var(--color-white);
    background-color: var(--primary-color);
}

.place-adv__btn p {
    flex-grow: 1;
    text-align: center;
    font-size: calc(var(--font-size-base) + 4px);
}

.place-adv__btn img {
    filter: brightness(0) invert(1);
    width: 12px;
    height: 12px;
}

/* Css are you know */
.areYouKnow__container {
    grid-template-columns: 1fr 60%;
    gap: 58px;
}

.areYouKnow__leaf img {
    aspect-ratio: 447 / 252;
    width: 100%;
    height: auto;
    max-width: 223px;
}

.areYouKnow__image img {
    aspect-ratio: 9 / 13;
    width: 100%;
    height: auto;
}

.areYouKnow__content {}

.areYouKnow__title {
    font-size: calc(var(--font-size-base) + 14px);
    font-weight: bold;
    margin-bottom: 40px;
}

.areYouKnow__info {
    background-color: var(--color-light-blue);
    padding: 20px;
    border-radius: 20px;
    gap: 20px;
    margin-bottom: 74px;
}

.areYouKnow__info>span {
    font-size: calc(var(--font-size-base) + 4px);
    text-align: center;
    font-weight: bold;
    line-height: 2;
}

.areYouKnow__info p {
    font-size: var(--font-size-base);
    line-height: 2;
}

.areYouKnow-padding {
    padding-bottom: 50px;
}

/* -- css top container -- */

.top-project__container {
    position: relative;
    background-image: var(--banner-adv);
    background-size: cover;
    background-position: center;
    aspect-ratio: 1920 / 655;
    width: 100%;
    margin: 50px 0px;
}

.top-project__content {
    margin: 120px 0px;
    gap: 50px;
    align-items: center;
}

.top-project__sup,
.top-project__title {
    color: var(--color-white);
    text-align: center;
}

.top-project__title {
    font-weight: bold;
}

.top-project__title {
    font-size: calc(var(--font-size-base) + 14px);
}

.top-project__sup {
    line-height: 2.5;
    font-size: var(--font-size-base);
}

/* -- css scenic */
.scenic__btn,
.top-project__btn {
    background-color: var(--primary-color);
    padding: 20px;
    max-width: 350px;
    justify-content: space-between;
    cursor: pointer;
    transition: 0.3s ease;
    width: 100% !important;
}

.scenic__btn:hover,
.top-project__btn:hover {
    opacity: 0.7;
}

.scenic__btn {
    border-radius: 50px;
    width: fit-content;
    height: fit-content;
    position: absolute;
    bottom: 20%;
    left: 32%;
}

.scenic__btn img,
.top-project__btn img {
    filter: brightness(0) invert(1);
    width: 12px;
    height: 12px;
}

.scenic__btn p,
.top-project__btn p {
    flex-grow: 1;
    text-align: center;
    color: var(--color-white);
    font-size: calc(var(--font-size-base) + 4px);
}

.scenic-container {
    background-image: var(--banner-con);
    background-size: cover;
    background-position: center;
    aspect-ratio: 1400 / 473;
    width: 100%;
    margin: 50px 0px;
    position: relative;
    min-height: 473px;
}

/* -- css event --*/

.event-container {
    gap: 10px;
}

.event-leaf {
    justify-content: right;
    margin-right: 25%;
}

.event-leaf img {
    max-width: 231px;
    aspect-ratio: 463 / 284;
    height: auto;
    width: 100%;
}

.event-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding-bottom: 23%;
}

.event-img img {
    transform: scale(1.6);
    transform-origin: right top;
}

.event-img,
.event-img img {
    aspect-ratio: 103 / 52;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: auto;
}

.event-info {
    gap: 40px;
}

.event-info>p {
    line-height: 2;
    font-size: var(--font-size-base);
    color: var(--primary-color);
}

.event-title {
    font-size: calc(var(--font-size-base) + 16px);
    font-weight: bold;
    color: var(--color-black);
}



/* -- css pamphlet -- */
.pamphlet {
    border: 1px solid var(--primary-color);
    grid-template-columns: 30% 1fr;
    padding: 50px 99px 50px ;
    margin: 50px 0px;
    /* align-items: center; */
}

.pamphlet-title {
    margin-top: 34%;
    align-items: center;
    gap: 10px;
    text-align: center;
    font-weight: bold;
    font-size: calc(var(--font-size-base) + 14px);
}

.pamphlet-img,
.pamphlet-img img {
    aspect-ratio: 1920 / 937;
    width: 100%;
    height: auto;
    max-width: 780px;
}

.pamphlet-img:hover {
    opacity: 0.6;
}

/* -- css img flex -- */
.image-flex {
    padding: 30px 0 80px;
    gap: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.image-flex img {
    aspect-ratio: 185 / 123;
    object-fit: cover;
    object-position: center;
    width: calc(100% / 3 - 20px);
    height: auto;
}

.image-flex__container {
    margin: 50px 0px;
}

.image-flex__title {
    text-decoration: underline;
    color: blue;
}

/* -- css youtube --  */
.youtube-container {
    max-width: 1409px;
    width: 100%;
    padding: 50px 0px;
    gap: 50px;
}

.youtube-title div {
    height: 100%;
}

.youtube-title span {
    font-size: calc(var(--font-size-base) + 14px);
    font-weight: bold;
    color: var(--color-black);
    height: 100%;
}

.youtube-title {
    justify-content: center;
    gap: 30px;
    align-items: center;
}

.leaf-first {
    aspect-ratio: 546 / 382;
    width: 273px;
    height: auto;
}

.leaf-second {
    aspect-ratio: 76 / 39;
    width: auto;
    height: 117px;
}

.youtube-link {
    margin-bottom: 50px;
    transition: all 0.7 ease;
    cursor: pointer;
}

.youtube-link:hover {
    opacity: 0.7;
}

.youtube-link img {
    aspect-ratio: 35 / 13;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* -- css slide img adv -- */

.slide-adv img {
    aspect-ratio: 21 / 5;
    width: 100%;
    height: auto;
}

.slide-adv {
    position: relative;
    padding: 100px 0 50px;
}

.slick-arrow {
    position: absolute;
    top: 53%;
    z-index: 4;
    content: none;
    background-color: transparent;
    border: unset;
    cursor: pointer;
}

.slick-arrow img {
    aspect-ratio: 1 / 2;
    width: 20px;
    height: auto;
}

.slick-prev {
    left: 0;
}

.slick-next {
    right: 0;
}

/* -- css box -- */

.box-container__first,
.box-container__second {
    padding: 50px 0px;
}

.box-container__first a,
.box-container__second a {
    position: relative;
    display: inline-block;
    transition: filter 0.3s ease;
}

.box-container__first a::after,
.box-container__second a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.box-container__first a:hover::after,
.box-container__second a:hover::after {
    opacity: 1;
}

.box-container__first {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
}

.box-container__first img {
    width: 58px;
    aspect-ratio: 1 / 1;
    height: auto;
}

.box-container__first p {
    color: var(--color-white);
    font-size: calc(var(--font-size-base) + 14px);
    font-weight: bold;
}

.box-container__second {
    gap: 50px;
    margin-bottom: 73.5px;
}

.box-container__second a {
    width: calc(100% / 3);
}

.box-container__second img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
}

.アクセス,
.お問い合わせ {
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
    aspect-ratio: 960 / 371;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.アクセス {
    background-image: url(/templates/oirase/img/banner/top-access.webp);
}

.お問い合わせ {
    background-image: url(/templates/oirase/img/banner/top-contact.webp);
}


/* -- css banner rel -- */
.relbanner {
    padding: 150px 0px;
}

.rel-container {
    gap: 30px;
}

.rel-banner img {
    aspect-ratio: 1000 / 274;
    width: 100%;
    height: auto;
}

/* -- css footer -- */
.footer-container {
    padding: 40px 40px;
    gap: 40px;
    position: relative;
}

.footer-logo img {
    aspect-ratio: 200 / 124;
    width: 200px;
    height: auto;
}

.pagetop {
    z-index: 4;
    position: absolute;
    width: 100%;
    top: -64px;
    cursor: pointer;
    transition: all 0.6s ease;
    left: 0px;
}

.pagetop:hover {
    opacity: 0.6;
}

.pagetop img {
    aspect-ratio: 288 / 128;
    width: 144px;
    height: auto;
}

.footer-content {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.footer-content a:hover {
    opacity: 0.6;
}

.footer-list {
    gap: 20px;
}

.footer-copyRight p,
.footer-list a {
    font-size: var(--font-size-base);
    color: var(--color-white);
}

.footer-copyRight p {
    text-align: center;
    margin-top: 41px;
}

.hidden-section {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out, filter 0.9s ease-out;
    will-change: opacity, transform, filter;
}

.show-up {
    opacity: 1;
    transform: translateY(0);
}

/* ===== css website parking ===== */

.top-banner img {
    aspect-ratio: 1920 / 937;
    width: 160%;
    height: auto;
    margin-left: -30%;
}

/* ===== css project html ===== */

.content {
    margin: 0 auto;
    background-image: url(/templates/oirase/img/banner/image99.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    padding: 100px 20px 20px;
}

.content>h1 {
    font-size: calc(var(--font-size-base) + 9px);
    margin-bottom: 70px;
    font-weight: normal;
    font-family: serif !important;
}

.content>h2 {
    background-image: url(/templates/oirase/img/icon/h3_ico.gif);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-top: 15px;
    padding: 12px 0 5px 40px;
    border-bottom: 1px solid var(--primary-color);
    font-size: calc(var(--font-size-base) + 1.72px);
}

.container-content {
    padding: 15px;
    font-size: var(--font-size-base);
    gap: 48px;
    margin-bottom: 24px;
}

.container-content a {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
}

.content__sp {
    color: var(--color-light-blue);
    font-size: calc(var(--font-size-base) + 8px);
    font-weight: bold;
}


.content-list-number,
.content-list {
    margin: 14px;
    list-style: none;
}


.content-list-number {
    list-style: none;
}

.content-list li,
.content-list-number li {
    padding: unset !important;
}

.content-attention {
    margin-bottom: 15px;
    gap: 10px;
}

.content-attention p {
    /* font-size: calc(var(--font-size-base) - 4px) ; */
    width: fit-content;
}

/* ===== css link html ===== */
.custom-link>ul>li:last-child {
    padding-bottom: 50px;
}

.custom-link>ul>li {
    padding: 10px 15px !important;
}

.custom-link>ul>li>a {
    color: blue;
    text-decoration: underline;
}

/* ===== css detail html ===== */

.detail-container {
    margin: 20px 0 30px;
}

.detail-title {
    font-size: calc(var(--font-size-base) + 14px);
    font-weight: bold;
    color: var(--color-red);
    margin-bottom: 10px;
}

.detail-stop {
    align-items: center;
    gap: 10px;
}

.detail-stop p {
    font-size: calc(var(--font-size-base) + 2px);
    font-weight: bold;
    color: var(--color-red);
}

.detail-stop img {
    aspect-ratio: 1 / 1;
    width: 54px;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.detail-content__first-en,
.detail-content__second-en,
.detail-content__second,
.detail-content__first {
    padding: 5px;
    justify-content: center;
    align-items: end;
    gap: 5px;
    align-items: baseline;
}


.detail-content__second span,
.detail-content__first span {
    font-size: var(--font-size-base);
    color: var(--color-black);
}

.detail-content__first-en,
.detail-content__first {
    border-bottom: 2px dashed var(--color-red);
}

.detail-content__second-en,
.detail-content__second {
    border-bottom: 6px solid var(--color-red);
    margin-bottom: 24px;
}

.detail-content__first-en p,
.detail-content__second-en p,
.detail-content__first p,
.detail-content__second p,
.content-big,
.content-medium {
    font-weight: bold;
    color: var(--color-black);
}

.detail-content__first-en p:nth-child(2),
.detail-content__second-en p:nth-child(2),
.detail-content__first-en p:nth-child(6),
.detail-content__second-en p:nth-child(6),
.detail-content__first p:nth-child(2),
.detail-content__first p:nth-child(4),
.detail-content__first p:nth-child(7),
.detail-content__second p:nth-child(2),
.detail-content__second p:nth-child(4),
.detail-content__second p:nth-child(7),
.content-big {
    font-size: calc(var(--font-size-base) + 12px) !important;
}

.detail-content__first-en p:nth-child(7),
.detail-content__second-en p:nth-child(7),
.detail-content__first-en p:nth-child(3),
.detail-content__second-en p:nth-child(3),
.detail-content__first p:nth-child(3),
.detail-content__second p:nth-child(3),
.detail-content__first p:nth-child(5),
.detail-content__second p:nth-child(5),
.detail-content__first p:nth-child(8),
.detail-content__second p:nth-child(8),
.content-medium {
    font-size: calc(var(--font-size-base) + 2px) !important;
}

.detail-content__first p:nth-child(8),
.detail-content__second p:nth-child(8) {
    margin-right: 15px;
}

.detail-content__second-en p:nth-child(3),
.detail-content__second p:nth-child(5)>strong,
.content-blue {
    color: var(--color-blue) !important;
}

.detail-content__second-en p:nth-child(7),
.detail-content__second p:nth-child(8)>strong,
.content-red {
    color: var(--color-red) !important;
}

.panel-container {
    padding: 15px;
    gap: 15px;
    margin-bottom: 30px;
    background-color: var(--color-light-gray);
}

.panel-container__title {
    align-items: center;
    padding: 2px 59px;
    max-height: 26px;
}

.panel-container__title img {
    height: 30px;
    margin-top: -2px 0px;
    aspect-ratio: 1 / 1;
    width: 30px;
}

.panel-container__title p {
    font-size: calc(var(--font-size-base) - 2px);
    color: var(--color-white);
}

.panel-title {
    font-weight: bold;
}

.panel-container p,
.arrow-two,
.arrow-one {
    margin: 0px 15px;
}

.arrow-one {}

.arrow-one__title,
.arrow-two__title {
    min-width: 120px;
    min-height: 44px;
    font-size: calc(var(--font-size-base) - 2px);
    color: var(--color-white);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    font-weight: bold;
    align-items: center;
    padding-left: 5px;
    width: 10%;
}

.arrow-one__title {
    background-image: url(/templates/oirase/img/icon/detail-arrow-1.webp);
}

.arrow-two__title {
    background-image: url(/templates/oirase/img/icon/detail-arrow-2.webp);
}

.arrow-one__content>p {
    font-size: var(--font-size-base);
    font-weight: bold;
    color: var(--color-blacks);
}


.arrow-two {}

.arrow-two__content {
    flex-direction: column;
    align-items: start;
}

.arrow-two__content p {
    font-size: calc(var(--font-size-base) - 4px);
}

.arrow-two__redirect p {
    color: blue;
    font-weight: bold;
}

.detail-img {
    width: 100%;
}

.detail-img img {
    aspect-ratio: 2575 / 3354;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}


/* ===== css banner copyright ===== */
.banner-size {
    gap: 24px;
}

.banner-size__title {}

.banner-size__image88x31,
.banner-size__image160x40,
.banner-size__image170x50,
.banner-size__image230x50,
.banner-size__image340x88 {
    gap: 20px;
}

.banner-size__image88x31 img,
.banner-size__image160x40 img,
.banner-size__image170x50 img,
.banner-size__image230x50 img,
.banner-size__image340x88 img {
    object-fit: contain;
    object-position: center;
    aspect-ratio: 4 / 1;
    height: auto;
    width: 100%;
    margin-bottom: 20px;
}

.banner-size__image88x31 img {
    max-width: 88px;
}

.banner-size__image160x40 img {
    max-width: 160px;
}

.banner-size__image170x50 img {
    max-width: 170px;
}

.banner-size__image230x50 img {
    max-width: 230px;
}

.banner-size__image340x88 img {
    max-width: 340px;
}

/* ===== guide html ====== */

.guide-list {
    padding: 15px;
    gap: 24px;
    list-style: number;
}

.guide-list li {
    font-size: var(--font-size-base);
}

.guide-list__lv2 {
    list-style: none;
}

.guide-list__lv3 {
    list-style: disc;
    margin-left: 5%;
}

.guide-list__lv3>li:last-child {
    margin-bottom: 24px;
}

.content a,
.content ul>li {
    padding: 15px;
}

.content_image_second a {
    color: blue;
    text-decoration: underline;
    text-align: center;
}

.content_image_second a:hover {
    opacity: 0.6;
}

/* ===== contact html ===== */

.contact-list {
    gap: 24px;
    padding: 15px;
    margin-bottom: 24px;
}

.contact-list>li {
    font-weight: bold;
    font-size: var(--font-size-base);
    padding: unset !important;
    line-height: 1.6;
}

.contact-list__level li {
    font-weight: 300;
    padding: unset !important;
    margin-left: 10px;
}



/* ===== css access page ===== */
.custom-accesslayout h3 {
    font-size: calc(var(--font-size-base) - 2px);
    font-weight: bold;
}

.custom-accesslayout {
    margin: 24px 0px 48px 5px;
    gap: 24px;
}

.custom-accesslayout a {
    cursor: pointer;
}

.custom-accesslayout ul {
    margin-left: 5px;
}

.custom-accesslayout__second-level {
    gap: 24px;
}

.custom-accesslayout__second-level h4 {
    font-weight: bold;
    font-size: var(--font-size-base);
}

.acccess-image {
    width: 100%;
    padding: 15px;
}

.acccess-image img {
    width: 80%;
    height: auto;
    aspect-ratio: 521 / 725;
    object-fit: contain;
    object-position: center;
}


/* ===== css team html ===== */


.team-title {
    margin: 15px 0 5px;
    border: 2px solid var(--color-medium-green);
    flex-wrap: wrap;
    padding: 5px;
}

.team-title span {
    color: var(--color-dark-green);
    font-weight: bold;
    font-size: var(--font-size-base);
}

.team-partner {
    border-top: 1px solid var(--color-black);
    border-left: 1px solid var(--color-black);
    border-right: 1px solid var(--color-black);
}

.partner>a {
    padding: 0px !important;
    font-size: var(--font-size-base) + 0.8;
    font-weight: bold;
    color: var(--color-dark-blue);
}

.partner {
    padding: 5px 3px 5px 20px;
    gap: 2px;
    align-items: center;
    border-bottom: 1px solid var(--color-black);
}

.team-list {
    grid-template-columns: repeat(3, 1fr);
    margin: 5px 0px;
    border-top: 1px solid var(--color-black);
    border-left: 1px solid var(--color-black);
}

.team-list__item {
    padding: 1px 3px 1px 5px;
    border-bottom: 1px solid var(--color-black);
    border-right: 1px solid var(--color-black);
}

.team-list__item a {
    font-size: calc(var(--font-size-base) - 1.6px);
}

.note-team {
    font-size: calc(var(--font-size-base) - 2.6px);
}

/* css walking page */
.content_image img {
    aspect-ratio: 1140 / 3396;
    width: 60%;
    height: auto;
}

.subtitle-img {
    font-size: var(--font-size-base);
    color: var(--color-blacks);
    padding: 15px;
    margin-bottom: 15px;
}

.walking_content {
    gap: 15px;
    padding: 15px 0px;
}

.walking_content strong {
    font-size: calc(var(--font-size-base) + 2px);
}

.walking-table {
    max-width: 650px;
    gap: 10px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.walking-table>div>img {
    aspect-ratio: 400 / 284;
    min-width: 200px;
    width: 100%;
    height: auto;
}

.title-nowrap {
    display: inline-block;
    min-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-content__list p {
    width: fit-content;
    gap: 10px;
}

.content_image_second {
    padding: 15px;
    gap: 15px;
}

.content_image_second img {
    aspect-ratio: 1366 / 1948;
    width: 85%;
    height: auto;
}

.walking-table__content>table {
    border: unset !important;
}

.walking-table__content>table>tbody>tr>td:nth-child(2),
.walking-table__content>table>tbody>tr>td:first-child {
    vertical-align: top;
}

.walking-table__content>table>tbody>tr>td:first-child {
    white-space: nowrap;
}

/* css phần concept */
.concept-content__container {
    padding: 15px;
    gap: 24px;
}

.concept-content__container p,
.concept-content__container span {
    font-size: var(--font-size-base);
}

.concept-content__container p {
    font-weight: normal;
}

.concept-content__container span {
    font-weight: lighter;
    color: var(--color-gray);
}

.concept-content__container table {
    border-top: 1px solid var(--color-black) !important;
    border-right: 1px solid var(--color-black) !important;
    border-left: 1px solid var(--color-black) !important;
}



.concept-btn__showpdf {
    margin-bottom: 48px;
    margin-top: 35px;
    text-decoration: none !important;
    max-width: unset !important;
    width: fit-content;
    color: var(--color-white) !important;
    white-space: nowrap;
}

.concept-album {
    flex-wrap: wrap;
    gap: 15px 2%;
}

.concept-album__item {
    width: calc(100% / 2 - 20px);
}

.concept-album__item img {
    aspect-ratio: 400 / 250;
    width: 100%;
    height: auto;
}

.concept-album__item p {
    font-size: var(--font-size-base);
    color: var(--color-black);
}

.concept-content__container>table>tbody>tr>td {
    padding: 10px;
}

.concept-content__container>figure>div {
    width: inherit;
}

.concept-content__figure>img {
    aspect-ratio: 1440 / 2080;
    width: 100%;
    height: auto;
}

.concept-content__figure>div>ul>li {
    padding: unset;
}

.concept-content__container strong {
    margin-bottom: 15px;
}

.concept-content__figure {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.concept-content__figure figcaption {
    gap: 24px;
}

/* css phần menu */
.custom-scroll {
    max-height: 85%;
    overflow-y: auto;
}

/* Custom scrollbar cho trình duyệt WebKit (Chrome, Safari) */
.custom-scroll::-webkit-scrollbar {
    width: 7px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(0deg, #43e2c6, #3183d0);
    border-radius: 3px;
}

.custom-scroll::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Firefox */
.custom-scroll {
    scrollbar-color: #3fc1ff transparent;
    scrollbar-width: thin;
}

/* css packing  html*/
.parking-content__sp,
.parking-content {
    padding: 15px;
    margin-top: 24px;
}

.parking-content__note__busship,
.content-noti,
.parking-content__note {
    padding: 15px;
    margin: 5px 0px;
    line-height: 1.6;
}

.parking-content__note__busship p:first-child {
    color: var(--color-black) !important;
    font-weight: normal !important;
}

.parking-content span {
    color: blue
}

.parking-map__img {
    aspect-ratio: 2472 / 2903;
    width: 100%;
    height: auto;
}

/* 
.content-noti,
.parking-content__sp figcaption {
    padding: 15px;
    margin: 5px 0px;
} */


.parking-content__note__busship,
.parking-content__note {
    background-color: var(--background-color-creamy);
    letter-spacing: -0.15px;
}

.parking-content__note__busship p,
.parking-content__note p {
    font-size: var(--font-size-base) !important;
}

.parking-content__note__busship p:last-child,
.parking-content__note p:last-child {
    font-weight: bold;
}

.parking-content__note__busship p>strong,
.parking-content__note p:last-child>strong {
    color: var(--color-navi) !important;
}



.parking-content strong {
    font-weight: 600;
}

.parking-note p {
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
}

.parking-note strong {
    color: var(--color-orage);
}

.parking-note-green {
    font-weight: bold;
    margin-top: 20px;
}

.parking-note-green strong {
    color: #83BD35;
}

.parking-note__list {
    flex-wrap: wrap;
    gap: 10px;
}

.parking-note__list>div>img {
    aspect-ratio: 1 / 1;
    width: 30px;
    height: 30px;
}

.custom-text__parking {
    font-weight: bold;
    font-size: var(--font-size-base);
}

.custom-text__parking strong {
    color: var(--color-light-blue);
}

.parking-note__list div {
    gap: 10px;
    font-weight: bold;
    font-size: var(--font-size-base);
}

#map2 {
    margin-bottom: 59px;
    margin-top: 15px;
}

#map1 {
    margin: 15px 0px;
}

#map2,
#map1 {
    width: 100%;
    height: 400px;
}

.next-page a {
    padding: 0px;
    text-decoration: none !important;
    color: var(--color-black);
}

.next-page {
    justify-content: right;
    align-items: center;
    gap: 10px;
}

#yasumiya-parking {
    color: var(--color-medium-green);
    font-size: var(--font-size-base);
    display: flex;
    gap: 10px;
    font-weight: bold;
}

#yasumiya-parking p {
    color: var(--color-black);
    padding: 0px;
    margin: 0px;
}

.busship-top img {
    aspect-ratio: 2500 / 3000;
    width: 100%;
    height: auto;
}

.busship-top strong {
    margin: 0px;
}

.busship-top p:first-child {
    color: var(--color-darker-green);
    font-weight: bold;
    padding-bottom: 33px;
    padding-top: 20px;
}

.busship-top p:last-child {
    margin-bottom: 24px;
}

.busship-top a {
    text-decoration: underline;
    cursor: pointer;
}

.bus-ship__calender {
    padding: 15px;
    gap: 20px;
}

.calender-infotmation__pdf {
    cursor: pointer;
}

.calender-infotmation__pdf:hover {
    opacity: 0.6;
}


.calender-infotmation__pdf img {
    aspect-ratio: 900 / 508;
    width: 100%;
    height: auto;
}

.bus-ship__item-red p,
.bus-ship__item-green p {
    font-size: var(--font-size-base);
    color: var(--color-black);
    text-align: center;
    width: 100%;
    margin-bottom: 5px;
}

.bus-ship__item-red,
.bus-ship__item-green {
    width: calc(100% / 2);
}

.bus-ship__item-red p:nth-child(3),
.bus-ship__item-green p:nth-child(3) {
    min-height: 120px;
}

.bus-ship__item-red p>a,
.bus-ship__item-green p>a {
    text-decoration: underline;
    color: var(--color-blue);
}


.bus-ship__item-red strong,
.bus-ship__item-green strong {
    margin-right: 5px;
}

.bus-ship__item-red strong {
    color: var(--color-orage);
}

.bus-ship__item-green strong {
    color: var(--color-medium-green);
}

.bus-ship__item-red p:first-child,
.bus-ship__item-green p:first-child {
    background-color: var(--color-blue);
    padding: 3px;
    color: var(--color-white);
    font-weight: bold;
    margin-bottom: unset !important;
}

.bus-ship__item-red p:nth-child(2),
.bus-ship__item-green p:nth-child(2) {
    background-color: var(--color-white);
    border: 1px solid var(--color-blue);
    font-weight: bold;
    padding: 3px;
}

.bus-ship__calender-footer {
    font-size: var(--font-size-base);
    width: 100%;
    text-align: center;
    margin-bottom: 48px;
}

/* css faq custom */

.content table {
    margin-top: 20px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.content>table th,
.content>table td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    padding: 5px 5px 10px;
}

.content>table td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    padding: 5px 5px 10px;
}

.content>table td img {
    aspect-ratio: 720 / 1040;
    width: 100%;
    height: auto;
}

.content>table>tbody>tr>td>table>tbody>tr:first-child {
    background-color: var(--color-light-green);
}

.content>table>tbody>tr>td>table {
    width: 100%;
}

.table-sp {
    border: 1px solid var(--color-black);
    padding-left: 10px;
}

.faq-img_two,
.faq-img_one {
    max-width: 200px !important;
    height: auto !important;
    vertical-align: middle !important;
    display: inline-block;
}

.faq-img_one {
    aspect-ratio: 389 / 259 !important;
}

.faq-img_two {
    aspect-ratio: 475 / 199 !important;
}

.table-td_sp-blue {
    color: var(--color-blue);
}

.table-td_sp-red {
    color: var(--color-red);
}

.table-div__sp {
    border: 2px solid black;
}

.table-div__sp p {
    margin-left: 10px;
}

.faq-custom>table>tbody>tr:nth-child(12)>td:nth-child(3)>p {
    color: var(--color-red);
}

.table-second__custom>tbody>tr:nth-child(3)>td:nth-child(2)>p {
    margin-left: 45px;
}

.faq-custom>table>tbody>tr>td>a {
    text-decoration: underline;
    color: blue;
    max-width: 200px;
    word-break: break-word;
}

@media (max-width: 1920px) {

    /* .logo,
    .inner {
        left: 30px;
    } */
}

@media (max-width: 1450px) {
    .site-header__wrapper {
        padding-left: 20px;
    }

    body .about-content {
        padding-left: unset;
    }

    body .drivingeffort-content>ul,
    body .features-content {
        padding-right: unset;
    }

}

@media (max-width: 1440px) and (min-width: 1025px) {

    .logo,
    .inner {
        left: 10px;
    }

    .inner {
        bottom: 5vh;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .inner {
        bottom: 6vh;
    }

    .logo,
    .inner {
        left: 10px;
    }

    .drivingeffort-content {
        flex-direction: column;
        flex-grow: 1;
    }

    .drivingeffort-title__position {
        padding-left: unset;
    }

    .realization-content {
        flex-direction: column;
    }

    body .realization-weakness,
    body .list-container {
        width: 100%;
    }

    .realization-weakness__container ul {
        width: 100%;
    }

    .realization-weakness__container ul li {
        text-align: left !important;
    }

    .operation-custom__container {
        flex-wrap: wrap;
    }

    .custom-container {
        flex-direction: column-reverse;
    }

    .custom-container__header {
        flex-direction: column;
    }

    body .about-content {
        width: 100%;
    }

    body .about-img {
        width: 100%;
    }
}

@media (max-width: 768px) and (min-width:555px) {
    .inner {
        bottom: 4vh;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }

    .logo,
    .inner {
        left: 10px;
        bottom: 13%;
    }

    .fs_23 {
        font-size: calc(var(--font-size-base) + 2px);
    }

    .pos_r {
        padding: 20px;
        max-width: 240px;
    }
}

@media screen and (max-width: 768px) {
    .concept-content__figure {
        grid-template-columns: 1fr;
    }

    .concept-content__figure img {
        margin-top: 18px;
    }
}


@media (max-width:554px) {
    .footer-content a {
        font-size: calc(var(--font-size-base) + 2px) !important;
    }

    :root {
        --font-size-base: 14px;
    }

    .inner {
        width: 60% !important;
        padding: 20px;
        bottom: 4vh;
    }

    .logo,
    .inner {
        left: 10px;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-copyRight p {
        text-align: center;
    }

    .event-info .top-project__btn {
        min-width: 200px;
    }

    .panel-container__title {
        padding: 2px 6%;
    }

    .arrow-two,
    .arrow-one {
        flex-direction: column;
        gap: 10px;
    }

    .arrow-one__title,
    .arrow-two__title {
        background-position: left;
    }

    .rel-container {
        flex-direction: column;
    }

    .detail-content__second,
    .detail-content__first {
        flex-wrap: wrap;
    }

    .content_image img {
        width: 100%;
    }

    .walking-table {
        flex-direction: column;
    }

    .walking-table img {
        width: 100%;
    }

    .content_image_second img {
        width: 100%;
    }

    /* .bus-ship__calender {
        flex-direction: column;
    } */

    .top-project__content {
        width: calc(100% - 20px);
    }

    .top-project__btn {
        min-width: unset;
    }

    .top-project__sup {
        line-height: 2;
    }

    .scenic__btn {
        width: fit-content;
        min-width: unset;
        padding: 20px 100px;
    }
}

@media screen and (max-width: 375px) {
    .footer-content {
        display: none;
    }
}

/* ==== reposive exception ==== */
@media screen and (max-width: 1429px) {
    .inner {
        width: 45%;
    }
}

@media (max-width: 992px) {
    .image-flex img {
        width: 100%;
    }

    .image-flex {
        flex-wrap: wrap;
        gap: 0;
    }

    .event-leaf {
        margin-right: 0;
    }

    .event-content {
        grid-template-columns: 1fr;
    }

    .event-img {
        order: 2;
    }

    .event-img img {
        transform: scale(1.2);
    }

    .event-info {
        order: 1;
    }

}

@media screen and (max-width: 456px) {
    .concept-btn__showpdf {
        width: 100%;
        white-space: normal;
    }


}

@media screen and (max-width: 800px) {

    .pamphlet-title{
        margin-top: 0%;
    }

    .pamphlet {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 50px 60px 50px 50px;
    }

    .box-container__first {
        grid-template-columns: 1fr;
    }

    .leaf-first {
        max-width: 273px;
        width: 30%;
        margin-left: 0;
    }

    .leaf-second {
        max-height: 117px;
        height: 10%;
        width: 30%;
    }

    .youtube-title {
        flex-direction: column;
        width: 100%;
        gap: 10;
    }

    .youtube-title__content,
    .leaf-first__container,
    .leaf-second__container {
        display: flex;
        width: 100%;
    }

    .youtube-title__content {
        justify-content: center;
    }

    .leaf-first__container {
        justify-content: left;
    }

    .leaf-second__container {
        justify-content: right;
    }

    .footer-list {
        margin-left: 15%;
    }

    .acccess-image img {
        width: 100%;
    }

    body .detail-driving-space__item {
        max-width: unset;
    }

    .scenic__btn {
        left: 2%;
    }

}

@media screen and (max-width: 767px) {
    .inner p {
        display: none;
    }

    .fs_23 {
        border-bottom: none;
    }

    .content-mobile {
        display: block;
    }

    .advertisement-image {
        grid-template-columns: repeat(2, 1fr);
    }

    .areYouKnow__container {
        grid-template-columns: 1fr;
    }

    .areYouKnow__title {
        width: 100%;
    }

    .areYouKnow__content {
        align-items: center;
    }

    .top-project__content {
        margin: 60px 0px;
        gap: 50px;
    }

    .pamphlet {
        padding: 20px 30px 20px 20px;
    }

    .concept-album__item {
        width: calc(100% - 20px);
    }

    .custom-container {
        flex-direction: column-reverse;
    }

    .custom-container__header {
        flex-direction: column;
    }

    body .about-img,
    body .about-content {
        width: 100%;
    }

    .autonomous-custom p {
        display: block;
    }

    .realization-content {
        flex-direction: column;
    }

    body .list-container,
    body .realization-weakness {
        width: 100%;
    }

    body .drivingeffort-title__position {
        padding-left: unset;
    }

    body .drivingeffort-content {
        flex-direction: column;
    }

    body .item-container,
    body .operation-item,
    body .traffic-item {
        max-width: 100vw;
    }

    .traffic-custom {
        flex-direction: column;
    }
}

@media screen and (max-width: 420px) {
    .pos_r {
        padding: 20px 10px;
        min-width: 200px;
    }

    .box-container__second {
        flex-wrap: wrap;
    }

    .box-container__second a {
        width: 100%;
    }

    .rel-container {
        flex-wrap: wrap;
    }

    .rel-banner {
        width: 100%;
    }

    .concept-btn__showpdf p {
        white-space: unset;
    }

    .bus-ship__calender {
        flex-direction: column;
    }

    .bus-ship__item-green,
    .bus-ship__item-red {
        width: 100%;
    }

    .youtube-link img {
        aspect-ratio: 16 / 9;
    }

    .footer-content {
        display: none;
    }

    .panel-container p,
    .arrow-two,
    .arrow-one {
        margin: 0px;
    }
}

html {
    scroll-behavior: smooth;
}

.custom-label {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2px 5px;
    border: 1px solid black;
    border-radius: 3px;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-family: "Noto Sans JP", "Helvetica", "Arial", sans-serif;
}

/* css autonomous page */
.autonomous-custom p {
    font-size: calc(var(--font-size-base) + 7px);
    color: var(--color-white);
    font-weight: bold;
    text-align: center;
}

.custom-container__header,
.custom-container {
    padding: 50px 0px;
    gap: 30px;
}

.about-content {
    width: calc(100% / 2);
    padding-left: 320px;
    gap: 30px;
}

.content__title {
    width: 100%;
    gap: 10px;
    align-items: center;
}

.content__title p:first-child {
    font-family: 'Times New Roman', Times, serif;
    font-size: calc(var(--font-size-base) + 66px);
}

.drivingeffort-content>p,
.content__title p:last-child {
    font-size: calc(var(--font-size-base) + 32px) !important;
    text-align: center;
    width: 80%;
}

.content__title p:first-child,
.content__title p:last-child {
    color: var(--primary-color);
    font-weight: bold;
}

.content__list>li {
    text-align: center;
    align-items: baseline;
}

.content__list li::before {
    content: "\f192";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 12px;
    font-size: 14px;
}

.about-img {
    width: calc(100% / 2);
    position: relative;
}

.about-img img {
    aspect-ratio: 1192 / 696;
    width: 100%;
    height: auto;
    display: block;
}

.features-content {
    padding-right: 320px;
}

.traffic {
    gap: 12px;
}

.title-style {
    padding: 12px 24px;
    font-size: var(--font-size-base);
    color: var(--color-white);
    background-color: var(--primary-color);
    width: fit-content;
    border-radius: 50px;
    white-space: nowrap;
}

.traffic-img img {
    aspect-ratio: 1360 / 84;
    width: 100%;
    height: auto;
}

.efforts {
    padding-top: 50px;
    gap: 18px;
}

.efforts-title p:last-child {
    width: 100% !important;
}

.traffic-custom {
    gap: 40px;
    padding: 24px 0px 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.item-container,
.operation-item,
.traffic-item {
    max-width: 300px;
    border-radius: 10px;
    border: 1px solid var(--primary-color);
    position: relative;
}

.item-container p {
    padding: 10px 10px 30px;
    text-align: center;
    font-size: calc(var(--font-size-base) + 2px) !important;
}

.item-container {
    min-height: 600px;
}


.item-container h3,
.operation-item h3,
.traffic-item h3 {
    text-align: center;
    margin: 15px 0;
    font-size: calc(var(--font-size-base) + 6px);
    padding-left: 27px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #64AA44;
    padding-top: 12px;
    padding-bottom: 3px;
    margin-top: 15px;
    background: url(/img/icon/h3_ico.gif) no-repeat left bottom;
    line-height: 1.2;
}

.item-container img,
.traffic-item img {
    aspect-ratio: 485 / 366;
    width: 100%;
    height: auto;
}

.item-container:after,
.operation-item:after,
.traffic-item:after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 8px;
    right: 8px;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

.traffic-item p {
    text-align: center;
    padding: 10px 10px 30px 10px;
    font-size: calc(var(--font-size-base) + 2px);
}

.operation-custom {
    margin-top: 30px;
    gap: 30px;
}

.operation-custom__container {
    gap: 40px;
    padding-bottom: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

.operation-item {
    max-width: 300px;
    width: 100%;
}

.operation-item img {
    aspect-ratio: 485 / 366;
    width: 100%;
    height: auto;
}

.realization-title p:last-child {
    width: fit-content !important;
}

.realization-subtitle p {
    font-size: calc(var(--font-size-base) + 8px);
    color: var(--color-black);
    padding-left: 20vw;
    margin-bottom: 30px;
}

.list-container {
    width: 60%;
}

.list-container>li {
    text-align: center;
}

.realization-weakness {
    width: 30%;
}

.realization-content {
    gap: 16px;
    margin-bottom: 50px;
}

.realization-weakness__container {
    padding: 20px;
    border: 1px dotted var(--primary-color);
    border-radius: 20px;
    gap: 30px;
}

.drivingeffort-custom {
    margin-top: 50px;
}

.drivingeffort-title__position {
    padding-left: 29vw;
    overflow: hidden;
}

.realization-weakness__container p {
    text-align: center;
}

.drivingeffort-content span {
    font-size: calc(var(--font-size-base) + 8px);
}

.drivingeffort-content {
    margin-bottom: 30px;
    gap: 30px;
}

.drivingeffort-content>ul {
    padding-right: 320px;
}

.drivingeffort-content img {
    aspect-ratio: 751 / 456;
    width: 100%;
    height: auto;
}

.searching-img {
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.searching-img img {
    aspect-ratio: 4504 / 2256;
    width: 100%;
    height: auto;
}

.detail-driving-space__custom {
    margin: 50px 0px;
    gap: 30px;
}

.detail-driving-space__custom p {
    font-size: calc(var(--font-size-base) + 6px);
    color: var(--color-black);
    font-weight: bold;
}

.detail-driving-space__container {
    gap: 40px;
    justify-content: center;
    flex-wrap: wrap;
}

.detail-driving-space__item {
    gap: 60px;
    align-items: center;
    width: 100%;
    max-width: 360px;
}

.features-img img {
    aspect-ratio: 623 / 577;
    width: 100%;
    height: auto;
}