@charset "shift_jis";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
/* CSS Document */
/****************************
トップページ専用cssです
※新規制作の際は下記cssを全て消してから制作してください
****************************/
body{
font-family: 'Noto Sans JP', "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.pc_off{
display: none;
}
a{
color:#333;
text-decoration: none;
transition: 0.2s;
}
a:hover{
transition: 0.2s;
}
.header_wrap{
border-bottom:none;
}
.over_wrap {
overflow: hidden;
position: relative;
}
/*--main--*/
.main_wrap {
padding: 0 30px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
min-width: 1000px;
margin: 0 auto;
box-sizing: border-box;
position: relative;
}
.main_inner {
width: calc(100% - 24%);
border-radius: 30px;
height: calc(100vh - 200px);
position: relative;
}
/*--anime--*/
.main_imgBox {
height: 100%;
overflow: hidden;
position: relative;
border-radius: 20px;
}
.main_img {
z-index: 10;
opacity: 0;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
-webkit-animation: anime 32s 0s infinite;
animation: anime 32s 0s infinite;
}
.main_img:nth-of-type(2) {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.main_img:nth-of-type(3) {
-webkit-animation-delay: 10s;
animation-delay: 10s;
}
.main_img:nth-of-type(4) {
-webkit-animation-delay: 15s;
animation-delay: 15s;
}
.main_img:nth-of-type(5) {
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
.main_img:nth-of-type(6) {
-webkit-animation-delay: 25s;
animation-delay: 25s;
}
@keyframes anime {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
25% {
opacity: 1;
}
30% {
opacity: 0;
transform: scale(1.2);
z-index: 9;
}
100% {
opacity: 0;
}
}
/*--/anime--*/
.main_title {
position: absolute;
background: none;
bottom: 5%;
left: 3%;
z-index: 50;
width: 550px;
}
.main_suzuki{
position: absolute;
background: none;
bottom: -16px;
right: 10px;
z-index: 50;
width: 380px;
}
.main_suzuki img{
width:100%;
}
.main_title img {
width: 450px;
object-fit: contain;
}
.menu_box{
position: absolute;
right: 30px;
bottom: 0px;
height: 706px;
width: 21%;
min-width: 302px;
background-image: url(/img/top/main_menu_bg.webp);
background-position-y: 0px;
background-position-x: right;
background-size: 521px;
display: flex;
align-items: self-end;
}
.menu_box_in{
background-color: #f6f3f0;
padding: 43px;
box-sizing: border-box;
border-radius: 10px;
}
.menu_img{
position: absolute;
bottom: 0px;
right: 0px;
width: 100%;
background-color: #fff;
}
.menu_title{
font-size:18px;
font-weight:bold;
margin:0px 0px 12px 0px;
}
.menu_title img{
padding-left: 8px;
}
.menu_shubetsu_list{
margin: 0px 0px 18px 0px;
}
.menu_shubetsu_list ul{
margin:0px;
padding:0px;
list-style-type:none;
display: flex;
justify-content: space-between;
}
.menu_shubetsu_list ul li{
width:23%;
}
.menu_shubetsu_list ul li a{
display: block;
font-size: 14px;
font-weight: bold;
border: solid 1px #e3ded9;
padding: 18px 0px;
text-align: center;
background-color: #fff;
border-radius: 10px 20px 10px 20px;
}
.menu_shubetsu_list ul li a:hover{
background-color: #72bf43;
color: #ffffff;
}
.menu_conts_list{
}
.menu_conts_list ul{
margin: 0px;
padding: 0px;
list-style-type: none;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.menu_conts_list ul li{
margin: 0px 0px 12px 0px;
width: 48%;
}
.menu_conts_list ul li:last-child{
margin-bottom:0px;
}
.menu_conts_list ul li a{
display:block;
}
.menu_conts_list ul li a:hover{
opacity: 0.7;
}
.menu_conts_list ul li a img{
width:100%;
}
@media screen and (max-width: 1447px){
.main_inner{
width: calc(100% - 329px);
}
.main_suzuki {
width: 260px;
}
.menu_shubetsu_list ul li a{
font-size:12px;
}
}
@media screen and (max-width: 1100px){
.menu_box{
display:none;
}
.main_inner{
width:100%;
}
.menu_box{
background:none;
}
.main_wrap {
min-width: 780px;
}
}
.t_info_wrap{
width: 1000px;
margin: 70px auto 70px auto;
display: flex;
justify-content: space-between;
align-items: self-start;
}
.t_info_wrap iframe{
border: none;
width: 770px;
height: 186px;
}
.t_info_l{
}
.t_info_l h2{
font-size:26px;
font-weight:bold;
margin:0px 0px 0px 0px;
}
.t_info_l h2 img{
display: block;
margin: 13px 0px 0px 0px;
}
.t_info_link{
display: block;
width: 200px ;
border: solid 1px #333;
padding: 10px 0px;
position: relative;
font-size: 15px;
font-weight: bold;
color: #333;
text-align: center;
border-radius: 40px;
margin: 38px 0px 0px 0px;
box-shadow:0px 5px #e7e7e7;
}
.t_info_link:hover{
background-color: #72bf43;
margin-top: 43px;
box-shadow: none;
color: #fff;
}
.t_info_link::before {
content: "";
right: 23px;
top: 15px;
width: 9px;
height: 9px;
border-top: 1px solid #72bf44;
border-right: 1px solid #72bf44;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
}
.t_info_link:hover::before {
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
.t_info_box{
width:740px;
display: flex;
justify-content: space-between;
align-items: self-start;
}
.t_info_box ul{
margin:0px;
padding:0px;
list-style-type:none;
width:100%;
}
.t_info_box ul li{
}
.t_info_box ul li a{
padding: 20px 0px;
display: flex;
justify-content: space-between;
border-bottom: solid 1px #ccc;
}
.t_info_box ul li a:hover{
background-color: #f1f1f1;
}
.t_info_box ul li:last-child a{
border-bottom:none;
}
.t_info_box ul li a span{
color:#72bf44;
font-size:15px;
}
.t_info_box ul li a p{
margin: 0px;
padding: 0px;
font-size: 15px;
width: 644px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.t_company_wrap{
background-image:url(/img/top/jimoto_bg.webp);
background-repeat:no-repeat;
background-position-x:center;
padding:100px 0px;
margin:0px 0px 100px 0px;
}
.t_company_wrap iframe{
width: 100%;
height: 377px;
border: none;
margin-top:40px;
}
.t_company_box{
width: 1000px;
margin: auto;
background-color: #fff;
padding: 111px 50px 50px 50px;
box-sizing: border-box;
border-radius: 20px 50px 20px 50px;
box-shadow: 0 0 10px #d3d3d3;
}
.t_company_box h2{
font-size:33px;
font-weight:bold;
text-align:center;
margin:0px 0px 40px 0px;
position:relative;
}
.t_company_box h2::before{
content: "";
background-image: url(/img/top/jimoto_icon.webp);
width: 56px ;
height: 36px;
top: -62px;
left: 0px;
right: 0px;
margin: auto;
position: absolute;
}
.t_company_g{
color:#72bf44;
}
.t_company_o{
color:#ff6c00;
}
.t_company_box p{
text-align:center;
font-size:18px;
line-height:30px;
margin:0px 0px 45px 0px;
}
.t_company_box ul{
margin:0px;
padding:0px;
list-style-type:none;
display: flex;
justify-content: space-between;
align-items: self-start;
}
.t_company_box ul li{
width:170px;
}
.t_company_box ul li a{
display:block;
border:solid 1px #333;
font-size:15px;
font-weight:bold;
padding:15px 0px;
text-align:center;
border-radius: 40px;
position:relative;
box-shadow: 0px 5px #e7e7e7;
}
.t_company_box ul li a:hover{
background-color: #72bf43;
margin-top: 5px;
margin-bottom:-5px;
box-shadow: none;
color: #fff;
}
.t_company_box ul li a::before {
content: "";
right: 22px;
top: 19px;
width: 9px;
height: 9px;
border-top: 1px solid #72bf44;
border-right: 1px solid #72bf44;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
}
.t_company_box ul li a:hover::before {
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
.t_staff_list{
}
.t_staff_list ul{
margin:0px;
padding:0px;
list-style-type:none;
}
.t_staff_list ul li{
width:280px;
}
.t_staff_list ul li a{
display: block;
background-color: #FFF;
border-radius: 50px 10px 50px 10px;
background-color: #FFF;
color: #333;
overflow: hidden;
text-align: left;
box-shadow: 0 0 10px #d3d3d3;
text-decoration: none;
}
.t_staff_list ul li a:hover{
background-color: #f1f1f1;
}
.t_staff_img{
height: 210px;
background-color:#ccc;
}
.t_staff_img img{
}
.t_staff_tex{
padding: 25px;
background-repeat:no-repeat;
background-position-x: 186px;
background-position-y: 56px;
}
.t_staff_list ul li a p{
font-size:15px;
font-weight:bold;
margin:0px 0px 10px 0px;
}
.t_staff_name{
font-size:22px;
font-weight:bold;
}
.t_staff_name span{
display: block;
font-size: 16px;
font-weight: bold;
color: #72bf44;
margin: 10px 0px 0px 0px;
}
.t_voice_wrap{
margin:0px 0px 100px 0px;
}
.t_voice_wrap iframe{
width: 100%;
height: 377px;
border: none;
}
.t_voice_wrap h2{
text-align:center;
font-size:22px;
font-weight:bold;
text-align:center;
margin:0px 0px 60px 0px;
}
.t_voice_wrap h2 img{
display:block;
margin:0px auto 20px auto;
}
.t_voice_list{
}
.t_voice_list ul{
margin:0px;
padding:0px;
list-style-type:none;
}
.t_voice_list ul li{
width:280px;
}
.t_voice_list ul li a{
display: block;
background-color: #FFF;
border-radius: 50px 10px 50px 10px;
color: #333;
box-shadow: 0 0 10px #d3d3d3;
overflow:hidden;
text-decoration:none;
}
.t_voice_list ul li a:hover{
color: #72bf44;
}
.t_voice_img{
height: 210px;
background-color:#ccc;
}
.t_voice_img img{
}
.t_voice_tex{
padding: 20px;
}
.t_voice_list ul li a p{
font-size: 15px;
font-weight: bold;
margin: 0px 0px 10px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height:25px;
}
.t_voice_link{
display:block;
width:205px;
margin:auto;
margin:auto;
border:solid 1px #333;
font-size:15px;
font-weight:bold;
padding:15px 0px;
text-align:center;
border-radius: 40px;
box-shadow:0px 5px #e7e7e7;
position:relative;
}
.t_voice_link:hover{
background-color: #72bf43;
margin-top: 5px;
margin-bottom:-5px;
box-shadow: none;
color: #fff;
}
.t_voice_link::before {
content: "";
right: 22px;
top: 19px;
width: 9px;
height: 9px;
border-top: 1px solid #72bf44;
border-right: 1px solid #72bf44;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
}
.t_voice_link:hover::before {
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
.t_search_wrap{
background-image: url(/img/top/searchi_bg.webp);
background-repeat: no-repeat;
background-position-x: center;
padding: 100px 0px 0px 0px;
margin:0px 0px 100px 0px;
}
.t_search{
width:1100px;
margin:auto;
display: flex;
justify-content: space-between;
align-items: self-start;
}
.t_search_l{
width: 397px;
margin:145px 0px 0px 0px;
}
.t_search_l h2{
font-size:31px;
font-weight:bold;
color:#333;
margin:0px 0px 60px 0px;
}
.t_search_l p{
margin: 0px;
font-size: 16px;
line-height: 26px;
}
.t_search ul{
width: 658px;
margin: 0px;
padding: 0px;
list-style-type: none;
display: flex;
justify-content: space-between;
align-items: self-start;
flex-wrap: wrap;
}
.t_search ul li{
width: 312px;
height: 200px;
margin:0px 0px 34px 0px;
}
.t_search ul li a{
display: block;
background-repeat: no-repeat;
background-position-x: center;
height: 100%;
overflow: hidden;
}
.t_search ul li:hover p{
background-color: #72bf43;
color: #fff;
position:relative;
z-index:1;
}
.t_search ul li:hover p::before{
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
.t_search ul li:nth-child(1) a{
background-image:url(/img/top/searchi_kyoju_bg.webp);
}
.t_search ul li:nth-child(2) a{
background-image:url(/img/top/searchi_parking_bg.webp);
}
.t_search ul li:nth-child(3) a{
background-image:url(/img/top/searchi_jigyou_bg.webp);
}
.t_search ul li:nth-child(4) a{
background-image:url(/img/top/searchi_contena_bg.webp);
}
.t_search ul li a p{
width: 200px;
margin:134px auto 0px auto;
border: solid 1px #333;
font-size: 15px;
font-weight: bold;
padding: 13px 0px;
text-align: center;
border-radius: 40px;
background-color:#FFF;
color:#333;
position:relative;
}
.t_search ul li a p::before {
content: "";
right: 22px;
top: 17px;
width: 9px;
height: 9px;
border-top: 1px solid #72bf44;
border-right: 1px solid #72bf44;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
}
.t_conts_wrap{
position:relative;
}
.t_conts_wrap::before{
content: "";
background-color: #f5f2ef;
width: 74%;
height: 1440px;
top: 320px;
left: 0px;
position: absolute;
z-index: -1;
}
.t_conts_box{
height: 607px;
display: flex;
align-items: center;
margin: 0px 0px 130px 0px;
background-position-x:center;
}
.t_conts{
width: 1100px;
margin: auto;
}
.t_conts_tex_box{
width: 610px;
padding: 70px 90px 60px 90px;
background-color: #FFF;
box-shadow: 0 0 10px #d3d3d3;
box-sizing: border-box;
border-radius: 20px 50px 20px 50px;
margin: 0px 0px 0px auto;
background-repeat: no-repeat;
background-position-x: center;
}
.t_conts_box_kanri{
background-image:url(/img/top/kanri_bg.webp);
}
.t_conts_box_sale{
background-image:url(/img/top/sale_bg.webp);
}
.t_conts_box_sale .t_conts_tex_box{
margin: 0px auto 0px 0px;
}
.t_conts_box_emptyhouse{
background-image:url(/img/top/akiya_bg.webp);
}
.t_conts_tex_box h2{
font-size:31px;
font-weight:bold;
}
.t_conts_tex_box h2 img{
display:block;
margin:20px 0px 0px 0px;
}
.t_conts_tex_box p{
font-size: 16px;
margin: 40px 0px;
line-height: 30px;
}
.t_conts_tex_box ul{
margin:0px;
padding:0px;
list-style-type:none;
display: flex;
justify-content: space-between;
}
.t_conts_tex_box ul li{
width: 205px;
}
.t_conts_tex_box ul li a{
display:block;
border: solid 1px #333;
font-size: 15px;
font-weight: bold;
padding: 13px 0px;
text-align: center;
border-radius: 40px;
background-color: #FFF;
color: #333;
box-shadow:0px 5px #e7e7e7;
position:relative;
}
.t_conts_tex_box ul li a:hover{
background-color: #72bf43;
margin-top: 5px;
margin-bottom:-5px;
box-shadow: none;
color: #fff;
}
.t_conts_tex_box ul li a::before {
content: "";
right: 22px;
top: 19px;
width: 9px;
height: 9px;
border-top: 1px solid #72bf44;
border-right: 1px solid #72bf44;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
}
.t_conts_tex_box ul li a:hover::before {
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
.t_conts_link{
display:block;
width:100%;
border: solid 1px #333;
font-size: 15px;
font-weight: bold;
padding: 13px 0px;
text-align: center;
border-radius: 40px;
background-color: #FFF;
color: #333;
box-shadow:0px 5px #e7e7e7;
position:relative;
}
.t_conts_link:hover{
background-color: #72bf43;
box-shadow: none;
color: #fff;
transform: translate(0px, 3px);
box-shadow: 0px 2px #e7e7e7;
}
.t_conts_link::before {
content: "";
right: 22px;
top: 17px;
width: 9px;
height: 9px;
border-top: 1px solid #72bf44;
border-right: 1px solid #72bf44;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
}
.t_conts_link:hover::before {
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
.t_company_box ul li a::before {
content: "";
right: 22px;
top: 19px;
width: 9px;
height: 9px;
border-top: 1px solid #72bf44;
border-right: 1px solid #72bf44;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
}
.t_shop_wrap{
margin:0px 0px 0px 0px;
padding-bottom:100px;
position:relative;
}
.t_shop_wrap::before{
content: "";
width: 100%;
left: 0px;
bottom: 0px;
height: 460px;
background-color: #f4f4f4;
position: absolute;
z-index: -1;
}
.t_shop_box{
width:1100px;
margin:auto;
}
.t_shop_box h2{
font-size: 22px;
font-weight: bold;
text-align: center;
margin: 0px 0px 60px 0px;
}
.t_shop_box h2 img{
display: block;
margin: 0px auto 15px auto;
}
.t_shop_list{
}
.t_shop_list ul{
margin: 0px 0px 40px 0px;
padding: 0px;
list-style-type: none;
display: flex;
justify-content: space-between;
}
.t_shop_list ul li{
width: 340px;
box-shadow: 0 0 10px #d3d3d3;
border-radius: 50px 10px 50px 10px;
background-color:#FFF;
}
.t_shop_list_img{
}
.t_shop_list_img img{
}
.t_shop_list_texbox{
padding: 30px 30px 0px 30px;
}
.t_shop_list_title{
font-size:20px;
font-weight:bold;
margin:0px 0px 20px 0px;
}
.t_shop_list_tel{
font-size: 27px;
font-weight: bold;
padding: 0px 0px 0px 20px;
margin: 0px 0px 20px 0px;
line-height: 25px;
background-image: url(/img/common/tel_icon.webp);
background-repeat: no-repeat;
background-position-x: 0px;
background-position-y: 3px;
}
.t_shop_list ul li ul{
margin: 0px 0px 0px 0px;
padding: 0px;
list-style-type: none;
display: block;
}
.t_shop_list ul li ul li{
font-size: 14px;
margin: 0px 0px 8px 0px;
background-color: #FFF;
box-shadow: none;
border-radius: 0px;
width: auto;
display: flex;
justify-content: left;
flex-wrap: wrap;
}
.t_shop_list ul li ul li span{
color: #72bf44;
font-weight: bold;
width: 70px;
display: block;
}
.t_shop_list_link {
display: block;
width: 280px;
margin: 30px auto 30px auto;
border: solid 1px #333;
font-size: 15px;
font-weight: bold;
padding: 13px 0px;
text-align: center;
border-radius: 40px;
background-color: #FFF;
color: #333;
box-sizing: border-box;
box-shadow:0px 5px #e7e7e7;
position:relative;
}
.t_shop_list_link:hover{
background-color: #72bf43;
margin-top: 35px;
margin-bottom:-5px;
box-shadow: none;
color: #fff;
}
.t_shop_list_link::before {
content: "";
right: 22px;
top: 17px;
width: 9px;
height: 9px;
border-top: 1px solid #72bf44;
border-right: 1px solid #72bf44;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
}
.t_shop_list_link:hover::before {
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
.t_shop_sub{
}
.t_shop_sub ul{
margin:0px;
padding:0px;
list-style-type:none;
display: flex;
justify-content: space-between;
}
.t_shop_sub ul li{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: self-start;
width: 530px;
background-color: #FFF;
box-shadow: 0 0 10px #d3d3d3;
border-radius: 50px 10px 50px 10px;
padding: 30px;
box-sizing: border-box;
}
.t_shop_sub_title{
position: relative;
width: 100%;
margin:0px 0px 20px 0px;
}
.t_shop_sub_title span{
background-color:#FFF;
padding-right:20px;
z-index:1;
font-size: 20px;
font-weight: bold;
position:relative;
}
.t_shop_sub_title::before{
content: "";
height:1px;
width:100%;
background-color:#72bf44;
position:absolute;
left:0px;
top:0px;
bottom:0px;
margin:auto;;
}
.t_shop_sub_tel{
font-size: 27px;
font-weight: bold;
padding: 0px 0px 0px 20px;
margin: 0px 0px 10px 0px;
line-height: 25px;
background-image: url(/img/common/tel_icon.webp);
background-repeat: no-repeat;
background-position-x: 0px;
background-position-y: 3px;
}
.t_shop_sub ul li p{
font-size:14px;
margin:0px;
}
.t_shop_sub_link{
display: block;
width: 230px;
margin: 5px 0px 0px 0px;
border: solid 1px #333;
font-size: 15px;
font-weight: bold;
padding: 13px 0px;
text-align: center;
border-radius: 40px;
background-color: #FFF;
color: #333;
box-sizing: border-box;
box-shadow:0px 5px #e7e7e7;
position:relative;
}
.t_shop_sub_link:hover{
background-color: #72bf43;
margin-top: 10px;
margin-bottom:-5px;
box-shadow: none;
color: #fff;
}
.t_shop_sub_link::before {
content: "";
right: 22px;
top: 17px;
width: 9px;
height: 9px;
border-top: 1px solid #72bf44;
border-right: 1px solid #72bf44;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
}
.t_shop_sub_link:hover::before {
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
.t_shop_sub ul li:last-child .t_shop_sub_link::before{
background-image: url(/img/top/blank_icon.webp);
background-repeat: no-repeat;
border: none;
top: 15px;
right: 17px;
width: 17px;
height: 15px;
transform: none;
-webkit-transform: none;
}
.t_shop_sub ul li:last-child .t_shop_sub_link:hover::before{
background-image: url(/img/top/blank_icon_on.webp);
}