@charset "UTF-8";

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

body {
    overflow-x: hidden; 
}

html {
    font-size: 100%;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 400;
    font-style: normal;
}
  
.bold {
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
}

/*ヘッダー*/
nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #5b4e5b;
    z-index: 999;
}
.logo {
    width: 8vh;
    z-index: 999;
}
.header_menu {
    display: flex;
    justify-content: space-between;
    font-size: 1vw;
    white-space: nowrap;
    transition: all 0.5s ease-in-out;
    z-index: 999;
}
.header_menu li {
    list-style: none;
    margin-left: 20px;
}
.header_menu a {
    transition: .3s;
}  
.header_menu a:hover {
    color: #8ac8eb;
    transform: scale(1.1);
    transition: .3s;
}
.header_menu a {
    text-decoration: none;
    color: #eeefee;
}
/*ハンバーガーメニュー*/
.burger {
    display: none;
    cursor: pointer;
}
.burger div {
    width: 3.5vw;
    height: 0.2vh;
    background-color: #eeefee;
    border-radius: 15%;
    margin: 20%;
    transition: all 0.2s ease;
}
.nav_active {
    transform: translateX(0%) !important;
}
@media screen and (max-width: 1024px) {
    body {
        overflow-x: hidden;
    }
    nav {
        height: 5vh;
        justify-content: space-between;
        padding-left: 5%;
        padding-right: 5%;
    }
    .logo {
        width: 5vh;
    }
    .header_menu {
        position: fixed;
        right: 0;
        height: 95.5vh;
        top: 4.5vh;
        background-color: #5b4e5b;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        font-size: 2vw;
        padding-top: 5%;
        width: 50%;
        transform: translateX(100%);
        z-index: 9999;
    }
    .header_menu li {
        margin-bottom: 10%;
        opacity: 0;
    }
    .burger {
        display: block;
    }
    @keyframes navLinksFade {
        0% {
            opacity: 0;
            transform: translateX(50px);
        }
        100% {
            opacity: 1;
            transform: translateX(0px);
        }
    }
    .toggle .line1 {
        transform: rotate(-45deg) translate(-20%, 0.4vh);
    }
    .toggle .line2 {
        opacity: 0;
    }
    .toggle .line3 {
        transform: rotate(405deg) translate(-20%, -0.4vh);
    }
}

/*ボタン*/
.enter {
    width: 15vw;
    text-align: center;
    background-color: #FFF100;
    color: #5b4e5b;
    font-size: 1.25vw;
    border-radius: 1.5vw;
    padding: 1vw;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
    border-style: none;
}
.return {
    width: 15vw;
    text-align: center;
    background-color: #d1d1d1;
    color: #5b4e5b;
    font-size: 1.25vw;
    border-radius: 1.5vw;
    padding: 1vw;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
    border-style: none;
}
.ent {
    text-align: center;
    background-color: #FFF100;
    color: #5b4e5b;
    font-size: 1.25vw;
    border-radius: 1.5vw;
    padding: 1vw;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
    border-style: none;
}

/*タブレット*/
@media screen and (max-width: 1025px) and (min-width: 450px) {
    .enter {
        width: 22.5vw;
        font-size: 2vw;
        padding: 1.5vw;
        border-radius: 2.5vw;
        padding-left: 3vw;
        padding-right: 3vw;
    }
    .return {
        width: 22.5vw;
        font-size: 2vw;
        padding: 1.5vw;
        border-radius: 2.5vw;
        padding-left: 3vw;
        padding-right: 3vw;
    }
    .ent {
        font-size: 2vw;
        padding: 1.5vw;
        border-radius: 2.5vw;
        padding-left: 3vw;
        padding-right: 3vw;
    }
}
/*スマホ*/
@media screen and (max-width: 450px) {
    .enter {
        width: 22.5vw;
        font-size: 2vw;
        padding: 1.5vw;
        border-radius: 2.5vw;
        padding-left: 3vw;
        padding-right: 3vw;
    }
    .return {
        width: 22.5vw;
        font-size: 2vw;
        padding: 1.5vw;
        border-radius: 2.5vw;
        padding-left: 3vw;
        padding-right: 3vw;
    }
    .ent {
        font-size: 2vw;
        padding: 1.5vw;
        border-radius: 2.5vw;
        padding-left: 3vw;
        padding-right: 3vw;
    }
}

/*検索フォーム*/
.search_box {
    position: relative;
    width: 80vw;
    height: calc(80vw * 0.75);
    background-color: #5b4e5b;
    border-radius: 1vw;
    margin: 0 auto;
    margin-top: 1.5vw;
    margin-bottom: 15vw;
}
.search_text {
    color: #eeefee;
    font-size: 2.5vw;
    padding-top: 1.8vw;
    padding-left: 2.5vw;
}
.search_inner {
    position: absolute;
    width: 95%;
    height: 78%;
    top: 52.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #5b4e5b;
    background-color: #eeefee;
    border-radius: 1vw;
    z-index: 1;
}
.lending_date {
    margin-top: 2.5vw;
    margin-left: 2vw;
    margin-right: 2vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lending_title {
    font-size: 2vw;
}
.triangle {
    margin-top: 2.5vw;
    font-size: 2.5vw;
    color: #6d9826;
}
.lending_items input {
    width: 12vw;
    padding: 0.6vw;
}
.lending_items select {
    width: 10vw;
    -moz-appearance: menulist;
    -webkit-appearance: menulist;
    appearance: menulist-button;
}
.lending_item {
    border: 1px solid #707070;
    background: #fff;
    border-radius: 0.2vw;
    padding: 0.5vw;
}
.car_box {
    margin-top: 2.5vw;
    margin-left: 2vw;
    margin-right: 2vw;
    margin-bottom: 3vw;
}
.car_selection {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1vw;
    grid-template-rows:10vw 10vw;
}
.item {
    background: #fff;
    border: 1px solid #707070;
    border-radius: 0.5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1vw;
}
.item div {
    width: 100%;
}
.item input[type="checkbox"] {
    margin-left: 0.5vw;
}
.item img {
    width: 10vw;
    max-width: 250px;
    
    height: 5.5vw;
    margin-bottom: 1vw;
}
.all_select {
    text-align: center;
    width: 50%;
    margin: 0 auto;
    font-size: 3vw;
    margin-top: 1.5vw;
    margin-bottom: 1.5vw;
    border-radius: 1vw;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
    background-color: #FFF100;
}
.btn_position {
    margin-left: 50%;
    transform: translate(-50%);
    transition: .3s;
}
.btn_position:hover {
    transform: translate(-50%) scale(1.1);
    transition: .3s;
}
.mobile-hide {
    display: block;
}
/*タブレット*/
@media screen and (max-width: 1025px) and (min-width: 450px) {
    .search_box {
        margin-top: 1.5vw;
        width: 90vw;
        height: calc(100vw * 0.75);
    }
    .search_inner {
        height: 85%;
    }
    .lending_date {
        margin-top: 2vw;
        margin-left: 1.5vw;
        margin-right: 1.5vw;
    }
    .lending_items {
        display: flex;
        flex-direction: column;
    }
    .lending_items input {
        width: 32.5vw;
        padding: 0.5vw;
        font-size: 2.8vw;
        margin-bottom: 1vw;
    }
    .lending_items select {
        width: 32.5vw;
        padding: 0.5vw;
        font-size: 2.8vw;
        margin-bottom: 1vw;
    }
    .car_box {
        margin-top: 2vw;
        margin-left: 1.5vw;
        margin-right: 1.5vw;
        margin-bottom: 1.75vw;
    }
    .car_selection {
        gap: 0.8vw;
        grid-template-rows:12vw 12vw;
    }
    .item label {
        font-size: 1.5vw;
    }
    input[type="date"] {
        height: 4.57vw;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
}
/*スマホ*/
@media screen and (max-width: 450px) {
    .search_box {
        margin-top: 2vw !important;
        width: 90vw;
        height: calc(120vw * 0.75);
        margin: 0 auto;
        margin-bottom: 5vw;
    }
    .search_text {
        font-size: 3.5vw;
    }
    .search_inner {
        height: 85%;
    }
    .lending_title {
        font-size: 3vw;
        margin-bottom: 1vw;
    }
    .triangle {
        font-size: 3.5vw;
    }
    .lending_date {
        margin-top: 2vw;
        margin-left: 1.5vw;
        margin-right: 1.5vw;
    }
    .lending_items {
        display: flex;
        flex-direction: column;
    }
    .lending_items input {
        width: 32.5vw;
        padding: 0.5vw;
        font-size: 2.8vw;
        margin-bottom: 0.5vw;
    }
    .lending_items select {
        width: 32.5vw;
        padding: 0.5vw;
        font-size: 2.8vw;
        margin-bottom: 0.5vw;
    }
    .car_box {
        margin-left: 1.5vw;
        margin-right: 1.5vw;
        margin-bottom: 1.75vw;
    }
    .car_selection {
        gap: 0.8vw;
        grid-template-rows:15vw 15vw;
    }
    .item img {
        width: 10.5vw;
        max-width: 250px;
        margin-bottom: 1vw;
    }
    .item label {
        font-size: 1.5vw;
    }
    .mobile-hide {
        display: none;
    }
    input[type="date"] {
        height: 5.13vw;
    }
}

/*テキスト*/
.main_text {
    color: #eeefee;
    text-align: center;
    font-size: 3.5vw;
}
.side_text {
    color: #eeefee;
    text-align: center;
    font-size: 2vw;
    line-height: 2em;
    margin-top: 2%;
}
.sub_title {
    color: #eeefee;
    text-align: center;
    font-size: 1.5vw;
    margin-top: 0.5%;
}
.sub_text {
    color: #eeefee;
    font-size: 2vw;
    text-align: center;
}
.main_title {
    color: #eeefee;
    text-align: center;
    font-size: 3vw;
}
.main_txt {
    color: #eeefee;
    text-align: center;
    font-size: 2vw;
}
/*タブレット*/
@media screen and (max-width: 1025px) and (min-width: 450px) {
    .main_text {
        font-size: 4vw;
    }
    .side_text {
        font-size: 2.5vw;
        line-height: 2em;
        margin-top: 2%;
    }
    .sub_title {
        font-size: 2.5vw;
        margin-top: 0.5%;
    }
    .sub_text {
        font-size: 2.5vw;
        margin-top: 1%;
        text-align: center;
    }
    .main_title {
        font-size: 5vw;
    }
}
/*スマホ*/
@media screen and (max-width: 450px) {
    .main_text {
        font-size: 4.5vw;
    }
    .side_text {
        font-size: 2.8vw;
        line-height: 2.5em;
        margin-top: 2%;
    }
    .sub_title {
        font-size: 2.8vw;
        margin-top: 0.5%;
    }
    .sub_text {
        font-size: 2.5vw;
        margin-top: 1%;
        text-align: center;
    }
    .main_title {
        font-size: 4.5vw;
    }
}
/*フッター*/
footer {
    background-color: #5b4e5b;
    color: #eeefee;
    position: relative;
    align-items: center;
}
.page_footer {
    display: flex;
    justify-content: space-between;
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
}
.left_footer {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: 10%;
}
.footer_list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 1vw;
    white-space: nowrap;
}
.footer_list ul li {
    margin-bottom: 3vw; 
    list-style: none;
    transition: .3s;
} 
.footer_list ul li:hover {
    transform: scale(1.1);
    transition: .3s;
}
.footer_list ul a {
    transition: .3s;
    color: #eeefee;
    text-decoration: none;
} 
.footer_list ul a:hover {
    color: #8ac8eb;
    transition: .3s;
}
.left_footer img {
    width: 85%;
    align-items: center;
    margin-left: 7%;
    margin-top: 5%;
    margin-bottom: 12.5%;
}
.center {
    width: 25%;
}
.right_footer {
    background-color: #8ac8eb;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-right: 10%;
}
.right_footer h1 {
    font-size: 3vw;
    margin-top: 10%;
    margin-bottom: 2.5%;
}
.right_footer h3 {
    font-size: 1.25vw;
    margin-bottom: 8.5%;
}
.footer_text {
    display: flex;
    margin-bottom: 5%;
}
.footer_text span {
    margin-right: 1em; 
    white-space: nowrap;
}
.open_time {
    display: flex;
    margin-right: 1em;
    white-space: nowrap;
    font-size: 1vw;
}
.open_date {
    display: flex;
    white-space: nowrap;
    font-size: 1vw;
}
.contact_item {
    width: 18vw;
    padding: 1vw;
    font-size: 1.25vw;
    display: flex;
    white-space: nowrap;
    border: solid 0.1vw;
    border-radius: 1.8vw;
    margin-bottom: 4.5%;
}
.contact_items {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.contact_item ion-icon {
    margin-right: 0.5em; 
}
.contact_item {
    transition: .3s;
} 
.contact_item:hover {
    color: #1da2ee;
    transform: scale(1.1);
    transition: .3s;
}
/*表示するテキストが切り替わる*/
.btntextchange{
    /*テキストの基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
    text-align: center;
	display: inline-block;
    text-decoration: none;
    outline: none;
    /*アニメーションの指定*/
    transition: all .0.9s;
}

.btntextchange span{
    /*絶対配置でテキストの位置を決める*/
	position: absolute;
	left: 100%;
	top:50%;
    transform:translate(-0%,-50%);
    /*アニメーションの指定*/
    transition: all .0.9s;
  /*ブロック要素にしてテキスト折り返しなし*/  
	display: block;
	white-space: nowrap;
}

/*差し替わるテキストの設定*/
.btntextchange span:nth-child(2){
	opacity:0;/*透過0に*/
}

/*hoverするとテキストが入れ替わる設定*/
.btntextchange:hover span:nth-child(1){
	opacity:0;/*透過0に*/
}

.btntextchange:hover span:nth-child(2){
	opacity:1;/*不透明に*/
}
footer hr {
    width: 80%;
    max-width: 1300px;
    margin: 0 auto;
}
.under_footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2%;
    padding-bottom: 3%;
    font-size: 1.5vw;
    white-space: nowrap;
}
.under_footer span {
    padding-left: 1.5vw;
    padding-right: 1.5vw;
}
.sns {
    width: 25%;
    margin-top: 1%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sns_icon1, 
.sns_icon2, 
.sns_icon3, 
.sns_icon4 {
    width: 4vw;
    height: 4vw;
    border-radius: 0.8vw;
    text-align: center;
    transition: .3s;
}
.sns_icon1:hover, 
.sns_icon2:hover, 
.sns_icon3:hover, 
.sns_icon4:hover {
    transform: scale(1.1);
    transition: .3s;
}
.sns_icon1 {
    background-image: linear-gradient(22deg, rgba(253, 179, 79, 1) 10%, rgba(220, 46, 116, 1) 32%, rgba(157, 59, 196, 1) 76%, rgba(86, 85, 205, 1) 96%);
    font-size: 3.5vw;
    line-height: 3.7vw;
}
.sns_icon2 {
    background-color: #000000;
    font-size: 3vw;
    line-height: 3.7vw;
}
.sns_icon3 {
    color: #1877F2;
    background-image: radial-gradient(at 50% 52%, rgba(255, 255, 255, 1) 62%, rgba(24, 119, 242, 1) 63%);
    font-size: 4vw;
    line-height: 3.65vw;
}
.sns_icon4 {
    color: #00B900;
    background-image: radial-gradient(at 51% 51%, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0));
    font-size: 4vw;
    line-height: 3.65vw;
}
.copyright {
    width: 100vw;
    background-color: #242424;
    text-align: center;
    padding: 1.5vw;
    font-size: 1.25vw;
}

/*ページトップボタン*/
.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
}
.pagetop a {
    display: block;
    background-color: #218ee7;
    border-radius: 50%;
    text-align: center;
    color: #ffffff;
    font-size: 1vw;
    text-decoration: none;
    padding: 1.8vw;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.pagetop a:hover {
    display: block;
    background-color: #9ac4ff;
    text-align: center;
    color: #fff;
    font-size: 1vw;
    text-decoration: none;
    padding: 1.8vw;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

/*タブレット*/
@media screen and (max-width: 1025px) and (min-width: 450px) {
    footer {
        height: 40.58%;
    }
    .page_footer {
        width: 100%;
    }
    .left_footer {
        margin-left: 5%;
        padding-top: 2.5vw;
        padding-bottom: 1.5vw;
    }
    .footer_list {
        font-size: 1.8vw;
    }
    .left_footer img {
        width: 90%;
    }
    .center {
        width: 10%;
    }
    .right_footer {
        background-color: #8ac8eb;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-right: 5%;
        padding-top: 2.5vw;
        padding-bottom: 1.5vw;
    }
    .right_footer h1 {
        font-size: 3.5vw;
    }
    .right_footer h3 {
        font-size: 1.85vw;
        margin-bottom: 8.5%;
    }
    .open_time {
        font-size: 2vw;
    }
    .open_date {
        font-size: 2vw;
    }
    .contact_item {
        width: 28.5vw;
        padding: 1vw;
        font-size: 2vw;
    }
    .under_footer {
        font-size: 2.5vw;
    } 
    .footer_hr {
        width: 95%;
    }
    .copyright {
        width: 100vw;
        background-color: #242424;
        text-align: center;
        padding: 1.5vw;
        font-size: 1.85vw;
    }
}
/*スマホ*/
@media screen and (max-width: 450px) {
    .page_footer {
        width: 100%;
    }
    .left_footer {
        margin-left: 5%;
        padding-top: 2.5vw;
        padding-bottom: 1.5vw;
    }
    .footer_list {
        font-size: 1.8vw;
    }
    .left_footer img {
        width: 90%;
    }
    .center {
        width: 10%;
    }
    .right_footer {
        background-color: #8ac8eb;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-right: 5%;
        padding-top: 2.5vw;
        padding-bottom: 1.5vw;
    }
    .right_footer h1 {
        font-size: 3.5vw;
    }
    .right_footer h3 {
        font-size: 1.85vw;
        margin-bottom: 8.5%;
    }
    .open_time {
        font-size: 2vw;
    }
    .open_date {
        font-size: 2vw;
    }
    .contact_item {
        width: 28.5vw;
        padding: 1vw;
        font-size: 2vw;
    }
    .under_footer {
        font-size: 2.5vw;
    } 
    .footer_hr {
        width: 95%;
    }
    .copyright {
        width: 100vw;
        background-color: #242424;
        text-align: center;
        padding: 1.5vw;
        font-size: 1.85vw;
    }
}