@charset "utf-8";

.pc{
    display: none;
}
.sp{
    display: block;
}
.text_indent{
    padding-left: 1em;
    text-indent: -1em;
}
.red{
    color:#FF0000;
}
.small{
    font-size: .85rem;
}
.right {
    text-align: right;
}
.ib{
    display: inline-block;
}
.fadeup{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(50px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
:root {
    --animation-duration: 0.4s; /* アニメーション継続時間 */
    --animation-delay: 2s; /* アニメーション間の間隔 */
    --animation-amp: 1.2deg; /* anime2アニメーションの揺れ幅 */
}
.anime {
    animation: anime2 var(--animation-duration, 1s) ease-in-out 0s infinite;
    transform-origin: center;
    opacity: 1; /* 初期値を設定 */
}

@keyframes anime1 {
    0% {
        transform: scale(1) translateX(0px);
        opacity: 1;
    }
    50% {
        transform: scale(0.95) translateX(0px);
        opacity: 0.6; /* 透過を下げる */
    }
    100% {
        transform: scale(1) translateX(0px);
        opacity: 1; /* 元に戻す */
    }
}

@keyframes anime2 {
    0% {transform: translate(0, 0) rotate(0);}

    14% {transform:translate(0, 0) rotate(calc(-1 * var(--animation-amp, 3deg)));}
    28% {transform:translate(0, -1px) rotate(0deg);}
    42% {transform:translate(0, -1px) rotate(var(--animation-amp, 3deg));}

    56% {transform:translate(1px, 0) rotate(calc(-1 * var(--animation-amp, 3deg) * 3 / 4));}
    70% {transform:translate(0, 1px) rotate(0deg);}
    84% {transform:translate(0, 0) rotate(var(--animation-amp, 3deg));}

    98% {transform: translate(0, 0) rotate(0);}
    100% {transform: translate(0, 0) rotate(0);}
}



#header{
    padding:30px 40px 10px;
    background-color: #FFF;
}
.logo{
    max-width: 200px;
    width:100%;
    margin-inline: auto;
}
.check_text{
    margin-inline:auto;
    margin-bottom: 10px;
    max-width: 740px;
    width: 90%;
}
/* 追従バナー */
.fixed-button {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    background: url(../images/fixed-button-bg-sp.png) no-repeat center center / cover;
    z-index: 99;
}
.fixed-button a {
    display: block;
    font-size: 18px;
    font-weight: bold;
    vertical-align: middle;
    color: #FFF;
    text-align: center;
}

.fixed-button-sp{
    margin-inline: auto;
    max-width: 270px;
}
.fixed-button a:hover {
    opacity: 1;
}
.fv{
    padding-left:3.5%;
    padding-right:3.5%;
}
/* mainエリア */
#main{
    padding: 0 3.5%;
}

.container { 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.26% 4%;
    grid-auto-flow: row;
    grid-template:
    "item15 item15 item15"
    "item04 item04 item05"
    "item06 item02 item02"
    "item01 item01 item01"
    "item08 item03 item03"
    "item07 item07 item07"
    "item11 item11 item11"
    "item12 item12 item12"
    "item16 item16 item16"
    "item14 item14 item14"
    "item13 item13 item13"
  }
  .item01 { grid-area: item01; width: 100%; height: 100%; }
  
  .item04 { grid-area: item04; width: 100%; height: 100%; }
  
  .item05 { grid-area: item05; width: 100%; height: 100%; }

  .item06 { grid-area: item06; width: 100%; height: 100%; }
    
  .item02 { grid-area: item02; width: 100%; height: 100%; }
  
  .item03 { grid-area: item03; width: 100%; height: 100%; }
  
  .item07 { grid-area: item07; width: 100%; height: 100%; }
  
  .item08 { grid-area: item08; width: 100%; height: 100%; }
      
  .item11 { grid-area: item11; width: 100%; height: 100%; }
  
  .item12 { grid-area: item12; width: 100%; height: 100%; }
  
  .item13 { grid-area: item13; width: 100%; height: 100%; }

  .item14 { grid-area: item14; width: 100%; height: 100%; }
  
  .item15 { grid-area: item15; width: 100%; height: 100%; }

  .item16 { grid-area: item16; width: 100%; height: 100%; }

.item04 img {
    width: 100%;
    /* height: 100%; */
}
.item07{
    position: relative;
}

.car_series{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5vw;
    width: 85%;
    /* aspect-ratio: 636 / 287; */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 5.5%                                   ;
}

.car_series li{
    width:100%;
}

.item08 {
    display: grid;
    grid-template-rows: 60% 1fr;
    gap: 4%;
}
.item08 a img {
    width: 100%;
    height: 100%;
}

.item13{
    border: 3px solid #D0D0D0;
    border-radius: 25px;
    padding: 3% 6% 3%;
	box-sizing: border-box;
    background: url(../images/item13-bg.jpg) no-repeat center center / cover;
}
.item13 .nx_info{
    max-width: 650px;
    width:100%;
    margin-inline: auto;
}
.item13_address{
    margin-top: 14px;
    text-align: center;
    font-size: 15px;
}
.item13_tel{
    margin-top: 0px;
    /* margin-bottom: 20px; */
    max-width: 500px;
    width:100%;
    display: block;
    margin-inline: auto;
    /* border-bottom: 4px solid #000; */
}
.item13_time{
    max-width: 400px;
    display: flex;
    margin-bottom: 15px;
    margin-inline: auto;
}
.item13_time>dt{
    font-size: 16px;
    color:#FFF;
    background-color: #000000;
    width:116px;
    height: 27px;
    border-radius: 30px;
    text-align: center;
    margin-right: 10px;
}
.item13_time>dd{
    flex:1;
    font-size: 16px;
}
.item13_time-mgn{
    margin-bottom: 30px;
}
.item13_map {
    height: 350px;
}


.item14{
    width: 80%;
    border-radius: 30px;
    margin-top:140px;
    margin-inline: auto;
}
.item14_btn{
    display: flex;
    flex-direction: column;
}

.item14_btn li.btn01 a{
    display: block;
    border:7px solid #FFF;
    background: url(../images/btn01-bg.jpg) no-repeat center center / cover;
    color:#FFF;
    font-weight: bold;
    padding:12px;
    position: relative;
    padding-left: 2em;
    text-align: center;
    margin:0 auto 10px;
    border-radius: 24px;
    box-shadow: 0 3px 7px #0000006f ;
}

.item14_btn li.btn01:last-child{
    margin-bottom: 30px;
}

.btn01 a::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 0;
    border-top: solid 4px #FFF;
    border-right: solid 4px #FFF;
    position: absolute;
    transform: rotate(45deg);
    top:50%;
    transform: translateY(-50%) rotate(45deg);
    margin-left:-2.4em;
}
#footer{
    padding-top:80px;
    padding-bottom:110px;
}

.footer_nav{
    padding-top:40px;
    padding-bottom: 40px;
    background: #000;
}

.footer_nav-area{
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.footer_nav-area li{
    width: 28%;
}
.lower .copyright {
    padding-top: 28px;
    background: #000;
    color: #fff;
    border-top: 2px solid #fff;
    padding-bottom: 80px;
}
.copyright{
    text-align: center;
    font-size: 14px;
    padding-top:0px;
    padding-bottom: 120px;
}

.anim-box.poyopoyo {
    animation: poyopoyo 2s ease-out infinite;
    opacity: 1;
  }
  @keyframes poyopoyo {
    0%, 40%, 60%, 80% {
      transform: scale(1.0);
    }
    50%, 70% {
      transform: scale(0.95);
    }
  }

@media screen and (min-width:745px){
.pc{
    display: block;
}
.sp{
    display: none;
}
.mr30{
    margin-right:30px;
}

.fv{
    margin-right:0 40px;
    margin-left:0 40px;
}
/* 追従バナー */

.fixed-button {
    display: inline-block;
    width: unset;
    bottom: 30px;
    right: 14px;
    background: url(../images/fixed-button-bg.png) no-repeat center center / contain;
}
.fixed-button a {
    display: inline-block;
    font-size: 29px;
    font-weight: 700;
    line-height: 1.3;
    padding: 56px 38px;
}
.fixed-button a::before {
    display: none;
}
.fixed-button:hover {
    opacity: 0.94;
}

.fixed-button a::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 0;
    border-top: solid 4px #FFF;
    border-right: solid 4px #FFF;
    position: absolute;
    transform: rotate(45deg);
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    margin-left: -2.4em;
}

#main{
    padding: 0 2.8%;
}
.item04 img {
    width: 100%;
    height: auto;
}
.car_series{
    padding-bottom: 2.2vw;
}

.item13_address{
    font-size: 21px;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    gap: 0.5% 2%;
    grid-auto-flow: row;
    grid-template-areas:
    "item15 item15 item15 item15 item15 item15"
    "item01 item01 item01 item04 item04 item05"
    "item07 item07 item07 item04 item04 item05"
    "item07 item07 item07 item06 item02 item02"
    "item03 item03 item08 item06 item02 item02"
    "item03 item03 item08 item11 item11 item11"
    "item12 item12 item12 item12 item12 item12"
    "item16 item16 item16 item16 item16 item16"
    "item13 item13 item13 item13 item13 item13";
}
    .item14{
        width: 100%;
    }
    .item14_btn{
        display: flex;
        flex-direction:row;
        justify-content: center;
    }
    .btn01{
        max-width: 422px;
        width:100%;
        margin-left:15px;
        margin-right:15px;
    }
    .btn01 a{
        font-size:28px;
    }
    .btn01 a::before {
        width: 12px;
        height: 12px;
        margin-left:-1.4em;
    }
    .item02{
        margin-top:-9%;
    }
    .item06{
        margin-top:-19%;
    }
    .item08 {
        gap: 4.7%;
    }
    .item11{
        margin-top:-4%;
    }
    .item13_time>dt{
        font-size: 21px;
        height:36px;
    }
    .item13_time>dd{
        font-size: 21px;
    }
    .copyright {
        padding-top: 0px;
        padding-bottom: 80px;
    }
    .footer_nav-area li{
        width: 115px;
    }
    .lower .copyright {
        padding-bottom: 40px;
    }
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　下層ページ共通
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　*/
.inner{
    max-width:1086px;
    width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
    padding-left:15px;
    padding-right:15px;
    padding-bottom: 20px;
}

@media screen and (min-width:745px){
    .single-area02_btn {
        width: 100%;
    }
}

@media screen and (min-width: 745px){
.fv{
    padding-left:40px;
    padding-right:40px;
}
.btn01 {
    max-width: 422px;
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
}

.single-area02_btn{
    flex-direction: row;
}
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 745px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

/*20230925 注意部分調整*/
@media screen and (min-width:745px){
	
		_::-webkit-full-page-media, _:future, :root .container {
        	gap: 0.38em 1.1em;
		}
		/* _::-webkit-full-page-media, _:future, :root .item02{
			margin-top:-1.9em;
		}
		_::-webkit-full-page-media, _:future, :root .item03{
			margin-top:0.2em;
		} */
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
   _::-webkit-full-page-media, _:future, :root .container {
        	gap: 0.58em 1.1em;
		}
		/* _::-webkit-full-page-media, _:future, :root .item02{
			margin-top:-1.8em;
		}
		_::-webkit-full-page-media, _:future, :root .item03{
			margin-top:0.01em;
		} */
}