@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/*--------------------------------------------------共通レイアウト--------------------------------------------------*/

/*-------------------------使用カラー登録-------------------------*/

:root {
  --main-bg-1: #384FBE;
  --main-bg-2: #35095D;
  --main-bg-3: #372D8F;
  --main-blue: #153B9B;
  --main-green: #159B73;
  --main-yellow: #C1B338;
  --main-black: #333;
  --main-pink:#D0265C;
  --right-green: #BFE003;
  --right-blue: #008DBC;
}

body{
	font-family: "Lato","Noto Sans JP", serif;
	font-size: 18px;
	font-weight: 400;
	font-style: normal;
}

.lato{
	font-family: "Lato", serif;
	font-style: italic;
	letter-spacing: 0.1em;
}
.button-box{
	margin-top: 50px;
	text-align: center;
}
.button{
	display: inline-block;
	width: 260px;
	border: solid 1px #fff;
	padding: 14px 30px;
	border-radius: 50px;
	color: #fff;
}

.button-2{
	position: relative;
}
.button-2 .wp-element-button{
	display: flex;
  	justify-content: center;
  	align-items: center;
	width: 260px;
	background: linear-gradient(-70deg, var(--main-bg-2) , var(--main-bg-1));
	padding: 30px 30px;
	border-radius: 50px;
	color: #fff;
	position: absolute;
	top:-80px;
}

/*-------------------------トップページタイトル-------------------------*/
.top-title{
	font-size: 74px!important;
	font-family: "Lato", serif;
    font-weight: 900!important;
	background: linear-gradient(-70deg, var(--main-bg-2) , var(--main-bg-1));
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
	padding-top: 50px;
    font-style: italic;
	letter-spacing: 0.1em;
	color:var(--main-blue);
	position: relative;
}


.top-title::before{
	content:"ニュース";
	background: linear-gradient(-70deg, var(--main-bg-2) , var(--main-bg-1));
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
	display: block;
	font-size: 14px;
	color: var(--main-blue);
	font-family: "Noto Sans JP", serif;
	font-weight: 400;
	font-style: normal;
	position: absolute;
	top: 24px;
}
.top-title::after{
	content:"";
	display: block;
	width: 200px;
	height: 3px;
	background-color: var(--main-blue);
	margin-top: 20px;
}

.top-title-2, .p-postSlider__title{
	font-size: 74px!important;
	font-family: "Lato", serif;
    font-weight: 900!important;
    font-style: italic!important;
	text-align: center;
	letter-spacing: 0.1em;
	color:#fff;
}

.top-title-2::before, .p-postSlider__title::before{
	content:"ピックアップ";
	display: block;
	font-size: 14px;
	color: #fff;
	font-family: "Noto Sans JP", serif;
	font-weight: 400;
	font-style: normal;
}
.top-title-2::after,.p-postSlider__title::after{
	content:"";
	display: block;
	width: 200px;
	height: 3px;
	margin: 0 auto;
	background-color: #fff;
}
.title-main-menu::before{
	content:"メインメニュー";
	padding-bottom: 50px;
	left: 50%;
    transform: translate(-50%, -50%);
}
.title-main-menu::after{
	margin-top: 20px;
}
.title-main-menu{
	padding-top: 200px!important;
}

.title-instagram{
	background: linear-gradient(-70deg, var(--main-bg-2) , var(--main-bg-1));
	font-size: 48px!important;
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
	width: fit-content;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	padding-top: 80px;
}
.title-instagram img{
	max-width: 360px;
}
.title-instagram::before{
	content:"インスタグラム";
	background: linear-gradient(-70deg, var(--main-bg-2) , var(--main-bg-1));
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
	display: block;
	font-size: 14px;
	color: var(--main-blue);
	font-family: "Noto Sans JP", serif;
	font-weight: 400;
	font-style: normal;
	position: absolute;
	top: 50px;
	left: 50%;
	transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.title-instagram::after{
	content:"";
	display: block;
	width: 150px;
	height: 3px;
	background-color: var(--main-blue);
	margin-top: 20px;
}

.title-about, .title-recruit{
	font-size: 48px!important;
	width: fit-content;
	padding-top: 80px;
}




/*--------------------------------------------------トップページ--------------------------------------------------*/

/*-------------------------ヘッダー-------------------------*/
#header{
	height:80px;
}
#fix_header{
	height: 84px;
}
/*--------------------ナビ------------------------*/
.header_top_nav{
	display: flex;
	justify-content: flex-end;
}
.header_top_nav li{
	width: 150px;
	height: 30px;
	padding: 0 20px;
	text-align: center;
	color: #fff;
	font-size: 14px;
	background-color: var(--main-blue);
	position:relative;
}
.header_top_nav li a{
	color: #fff;
	padding-top: 4px;
	position:absolute;
  	top:0;
  	left:0;
  	width:100%;
  	height:100%;
}
.header_top_nav li:last-child{
	background-color: var(--main-green);
}

.c-gnav {
	height: 100%;
	font-weight: bold;
	padding: 14px 10px 0 10px;
}
.c-gnav>.menu-item {
    height: 80%;
}

.header_top_nav li a:hover{
	padding-bottom: 10px;
}
.c-gnav>.menu-item>a .ttl,.ttl{
	padding-bottom: 12px;
}

.page_main_content .c-gnav .sub-menu li a{
	height: 2.5em;
	padding-top: 0.8em;
}



.p-fixBtnWrap{
	right: 0!important;
}
.c-fixBtn{
	border-radius: 0!important;
	border: solid 1px #fff;
	background-color: var(--main-blue);
	color: #fff;
	width: 70px;
	height: 70px;
	font-size: 10px;
	
}
.calendar{
	background-color: var(--main-green);
	font-size: 16px;
	line-height: 1.6em;
}
.calendar a:hover{
	background-color: var(--main-green)!important;
}

/*-------------------------フッター-------------------------*/
.w-footer__box:first-child{
	text-align: center;
	position: relative;
}
.w-footer__box h1{
	font-size: 24px;
}
.w-footer__box p{
	width: fit-content;
	text-align: left;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.menu-item a:before{
	display:none;
}
.sub-menu a:before{
	display:block;
}
.c-listMenu a:before {
	transform: rotate(135deg);
	top:12px;
}

.footer_add{
	width: 100%!important;
	text-align: center!important;
}
/*-------------------------追従メニュー-------------------------*/
.l-fixHeader__inner{
	height: 90px;
}

.c-gnavWrap{
	height: 70%;
	font-weight: bold;
}

/*-------------------------スライダー-------------------------*/
.p-mainVisual{
	height: calc(100vh + 100px);

}
.p-mainVisual__inner{
	height: 100%;
		margin-left: 50px;
}
.p-mainVisual img{
	object-fit:cover;
}

.p-mainVisual {
    width: 100%;
    margin: 0;
    padding: 0 0 200px;
    position: relative;
    overflow: hidden;
}

.p-mainVisual__slideTitle{
	font-size: 2.8vw;
	background: linear-gradient(-70deg, var(--main-bg-2) , var(--main-bg-1))!important;
	width: fit-content;
	padding: 10px 20px;
	position: absolute;
	right:0!important;
	bottom: 2em;
}

@media (max-width: 960px) {
	.p-mainVisual__slideTitle{
		bottom: 45%;
	}
}

/*-------------------------スライダー下information-------------------------*/
.main_visual_infomation{
	background-color: #fff;
	margin-left: 50px;
	padding: 20px 50px;
}

.top-info{
	font-size: 24px;
	background: linear-gradient(-70deg, var(--main-bg-2) , var(--main-bg-1));
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
	position: relative;
	padding-left: 100px;
}
.top-info::before{
	content: "";
	display: block;
	height: 3px;
	width: 140px;
	margin-right: 1em;
	background: linear-gradient(-70deg, var(--main-bg-2) , var(--main-bg-1));
	position: absolute;
	top: 20px;
	left: -50px;
}
.top-info-more{
	text-align: right;
	font-size: 18px;
	font-weight: bold;
	background: linear-gradient(-70deg, var(--main-bg-2) , var(--main-bg-1));
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}
.main_visual_infomation p{
	margin-left: 100px;
	padding-top: 10px;
}

/*斜め背景*/
.p-mainVisual::before {
    content: '';
    position: absolute;
	width: 100%;
    top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--main-bg-1);
	background: linear-gradient(to bottom, var(--main-bg-1), var(--main-bg-3));
    clip-path: polygon(0 0, 100% 40%, 100% 100%, 0% 100%);
	z-index: -1;

}

/*-------------------------ポストスライダー（ピックアップ）-------------------------*/
#post_slider{
	background-color: var(--main-bg-1);
	background: linear-gradient(to bottom, var(--main-bg-3), var(--main-bg-2));
	color: #fff;
}

.p-postSlider .swiper-pagination-bullet {
	width: 40px;
    height: 6px;
	border-radius: 0;
	background-color: #fff;
}
/*-------------------------新着情報-------------------------*/
.news-1{ display: flex;}
.news_date{width: 8em; display:inline-block;}
.news_list{width:100%; margin:0; padding:0;}
.news_list li{ display: flex; padding:8px 14px;list-style:none;font-size:16px;}
.news-break{display:none;}
.news_list li:nth-child(odd){background-color:#fff;}
.news_list li:nth-child(even){background-color:#EFEDED;}
.new-m{height:2em; margin:0 10px;padding:2px;background:red; border-radius:2px; color:#fff;font-size:10px;font-weight:bold;}
.news_cat{display: block;min-width: 84px; height:2em; margin:2px 10px 0 10px;padding:2px; text-align: center; background:var(--right-blue); border-radius:2px;font-size:10px; color:#fff;font-weight:bold;}
.cat-new-car{background-color: var(--main-yellow);}
.cat-event{background-color: var(--main-green);}
.cat-news{background-color: var(--main-blue);}
.cat-hitotsu{background-color: var(--main-green);}
.top-news{
	position: relative;
	padding: 100px 3% 0 3%;
}
/*ニュース下栃木県*/
.top-news::after{
	content:url("https://www.tochigi-subaru.jp/wp-content/uploads/2025/02/tochigi.svg");
	position: absolute;
	bottom: -60%;
	right: 50px;
	z-index: 1000;
}

@media (max-width: 780px) {
	.top-news::after{
	display: none;
		}
		.wp-block-heading.top-title{
			margin-bottom:0;
		}
	.news_list{
		padding-left:0!important;
	}

}

/*-------------------------メインメニュー-------------------------*/
.top-main-menu{
	background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURUdwTAAAAJ8qhFEAAAABdFJOUwBA5thmAAAAEklEQVQI12MwYDBgYGBoYGAAAASKAOH8MS30AAAAAElFTkSuQmCC"),url("https://www.tochigi-subaru.jp/wp-content/uploads/2025/04/NEWFORESTER-top2.jpg");
	background-attachment: fixed;
	background-repeat: repeat, no-repeat;
	background-size: 2px, cover;
	background-position: top left, center center;
	background-blend-mode: multiply; /* パターンと画像を自然に合成 */
	clip-path: polygon(0 0, 100% 30%, 100% 100%, 0% 100%);
}

.main-menu-box a{
	text-decoration: none;
	color: #fff;
}
.main-menu-box figure{
	overflow: hidden;
	position: relative;
	border-radius: 10px 10px 0 0;
}

.main-menu-box figure::after {
  content: 'Read More';
  font-size: 16px;
  letter-spacing: .2em;
  text-align: center;
  padding-top: 41%;
  color: #fff;
  width: 100%;
  height: 100%;
  display: block;
  background: rgba(0,0,0,.4);
  transition: .8s;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

a:hover figure::after {
  opacity: 1;
	z-index: 1000;
}


.main-menu-box img {
  width: 100%;
  height: 100%;
  transition: .4s;
}

.main-menu-box a:hover img {
    transform: scale(1.1);
}

.main-menu-c{
	border-radius: 5px!important;
}

/*-------------------------見出し-------------------------*/
h1.c-headLogo{
	font-weight: 900;
}
h1.c-pageTitle {
	width: 100vw;
	font-weight: bold;
	margin-left: -50vw;
	left: 50%;
	position: relative;
	padding: 100px 10px;
	font-size: 30px;
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
}


h2.pagetitle2 {
	width: 100vw;
	margin-left: -50vw;
	left: 50%;
	position: relative;
	padding: 70px 10px 30px;
	font-size: 30px;
	background-color: transparent;
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
	border: none;
	margin-top: 29px;
	margin-bottom: 30px;
	color: #333;
}


/*-------------------------トップページ　MAINメニュー-------------------------*/

div.join-link {
  display: flex;
	margin:100px -30px;
	position:relative;
}
div.join-link  a{
	font-size: 48px!important;
	font-family: "Lato", serif;
    font-weight: 900!important;
    font-style: italic;
	letter-spacing: 0.1em;
	color:#fff;
}
div.join-link > a {
  flex-basis: 100%;
  height: 400px;
  text-align: center;
  line-height: 400px;
  font-size: 2rem;
  text-decoration: none;
}

div.join-link > a:first-of-type {
  background-color: #E7E7E7;
  background-image: url("https://www.tochigi-subaru.jp/wp-content/uploads/2025/05/top-about.jpg");
  background-size: cover;
  background-position: 0% 30%;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
  width: calc(100% + 40px;);
  margin-right -12%;
}

div.join-link > a:last-of-type {
  background-color: #E7E7E7;
  background-image: url("https://www.tochigi-subaru.jp/wp-content/uploads/2025/05/top-saiyou.jpg");
  background-size: cover;
  background-position: 0% 30%;
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
  margin-left: -11.1%;
  position: relative;
}

.title-recruit {
	line-height:0;
	margin:0;
	padding:0;
}
.post_content h2 {
    line-height: 1!important;
}

.about span,.recruit span{
	color:#fff;
	font-family: "Noto Sans JP", serif;
	font-weight: 400;
	font-size: 14px;
}

div.join-link  a h2{
	text-align: left;
}

.title-about{
	position: relative;
	bottom:1em!important;
	background: linear-gradient(-70deg, var(--main-bg-2) , var(--main-bg-1));
	padding:0 30px;
	left: 32px;
	top: 20%;
}

.title-recruit{
	position: relative;
	right: calc(-100% + 5.6em + 40px);
	top: 20%;
	text-align: right!important;
	background: linear-gradient(-70deg, var(--main-bg-2) , var(--main-bg-1));
	padding:0 30px;
}
@media (max-width: 600px) {
 div.join-link {
  flex-direction: column;
}
 div.join-link > a {
  height: 400px;
  line-height: 1.4em;
}

div.join-link > a:first-of-type {
  height: 400px;
  width: calc(100% + 40px);
  margin-right: -12%;
}
div.join-link > a:last-of-type {
	height: 400px;
  margin-left: -11.1%;
}
.title-about{
	margin:100px!important;
	top:100px;
	left:-100px;
}

.title-recruit{
	margin:200px 100px 0px 100px!important;
	bottom:100px!important;
	right:-200px!important;
}
}

/*----------------------------------------------------投稿ぺージレイアウトここから↓----------------------------------------------------*/
.single-page{
	max-width: 1600px!important;
	margin: 100px auto;
	padding:0 60px;
}

.p-articleMetas{
	margin-bottom: 100px;
}

.p-articleThumb{
	width: 50vw;
	margin:0 auto 50px auto;
}

@media (max-width: 600px) {
	.single-page{
	max-width: 100vx!important;
	padding:0 10px;
}
	.p-articleThumb{
	width: calc(100vw - 20px);
}
	div.post_content{
		margin: 0 20px !important;
	}
	h2.wp-block-heading{
		max-width: 96vw!important;
		margin-left:2vw;
	}
}

/*----------------------------------------------------固定ぺージレイアウトここから↓----------------------------------------------------*/
.l-header{
	margin: 0;
}

/*固定ページタイトル設定*/
.page_main_content .c-pageTitle {
	background-color: transparent!important;
	height: 600px;
	text-align: left;
	padding-top: 200px;
	padding-left: 2em;
	font-size: 4vw;
	letter-spacing: 0.2em;

}
.page_main_content .c-pageTitle small{
	display: block;
	margin-top: 1.5em;
	font-size: 20px;
}

.page_main_content .l-mainContent__inner{
	margin:3em 5em;
}
.c-tabList__item button{
	background: linear-gradient(-70deg, var(--main-bg-2) , var(--main-bg-1))!important;
	border-radius: 10px 10px 0 0;
	font-size: 22px;
	font-weight: bold;
}

.c-tabList__item button:hover{
	background: linear-gradient(-70deg, var(--main-bg-2) , var(--main-bg-1))!important;
	border-radius: 10px 10px 0 0;
	opacity(1) ;
}
.is-style-default>.c-tabList .c-tabList__button{
	opacity(1)!important ;
	color: #fff;
}
/*mainコンテンツの横幅*/

.archive_width main,.main-width{
	max-width: 1600px!important;
	margin: 100px auto;
	padding:0 20px;
}
/*デフォルト固定テンプレートのh2位置調整*/
.header-left{
margin:0;
width: fit-content;
left: 0;
margin: 20px 0;
}

/*固定ページタイトルアニメーション*/
.title-span{
   color: transparent;
	background: transparent;
   display: block;
   overflow: hidden;
   position: relative;
   transition: color 0ms 0.5s;
   width: max-content;
	padding: 10px 0 10px 10px;
	max-width: calc(100vw - 20px);
	letter-spacing: 0.1em;
}
.title-span::after{
  content: "";
   top: 0;
  left: 0;
  display: block;
  position: absolute;
  transform: translateX(-100%);
  width: 100%;
  height: 100%;
  padding: 10px;
  background: linear-gradient(-70deg, var(--main-bg-2) , var(--main-bg-1));
}
.title-span.active{
  color: #fff;
	background: linear-gradient(-70deg, var(--main-bg-2) , var(--main-bg-1));
}
.title-span.active::after{
  animation: lineAnime 1s;
}
@keyframes lineAnime {
  0% {
    transform: translateX(-100%)
  }
  50% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(100%)
  }
}



@media (max-width: 600px) {
    .page_main_content .c-pageTitle {
		width: 10em;
        font-size: 30px;
		padding-left: 10px;
		padding-right: 10px;
    }
	.main-width{
	padding:0px;
}
	.page_no_image .title-span {
	left: 0em!important;
	padding-left: 0;
}
	/*-----------------うまくいかないメインメニュー-------------*/
	/*
	.main-menu-box {
	flex-direction: row!important;
	flex-wrap: wrap!important;
	}
	.main-menu-box > div {
		width:50%!important;
	}
	.top-menu-ico{
		width:50%!important;
	}
	div.main-menu-child{
		width:50%!important;
	}
	.main-menu-box > .main-menu-child{
		width:50%!important;
	}
	.main-menu-box .top-menu-ico a {
		width:50%!important;
	}
	*/
}




/*----------------------------------------------------NEWSぺージレイアウトここから↓----------------------------------------------------*/
.news-page ul{
	list-style: none;
}
.news-page ul li{
	border-bottom: solid 2px var(--main-blue);
	padding-bottom: 2em;
}
.news-page ul li h3{
	margin: 0;
	padding: 0.5em 0;
}
/*----------------------------------------------------点検ぺージレイアウトここから↓----------------------------------------------------*/

.news-page .wp-block-query-pagination-numbers{
	display: flex;
	align-items: flex-end;
}

.tenken{
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    }
    .tenken h2{
        color: #fff;
        border-radius: 10px;
		margin: 0 auto;
		padding: 10px;
    }
    .tenken ul{
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    }
	.tenken ul p{
	margin: 0.6em 0;
	}
    
    .tenken ul li{
    background-color: #EAE5E3;
    color: #333;
    border-radius: 10px;
    flex-grow: 1;
    margin:10px;
    }
    .tenken ul li ul{
        justify-content: center;
		list-style: none;
    }

    .tenken ul li ul li{
        color: #fff;
        writing-mode: vertical-rl;
        min-height: 300px;
        border-radius: 10px;
        width: 3em;
        padding: 0 0.8em 0 2em;
        flex-grow: 0;
        font-size: 1vw;
        }
    .tenken ul li ul li span {
            text-combine-upright: all;
          }

    
   .tenken-grad-1 {
	background: linear-gradient(135deg, #1e3c72, #2a5298); /* 青系 */
}
.tenken-grad-2 {
	background: linear-gradient(135deg, #0083b0, #00b4db); /* 青系2*/
}
.tenken-grad-3 {
	background: linear-gradient(135deg, #56ab2f, #a8e063); /* 緑系 */
}
.tenken-grad-4 {
	background: linear-gradient(135deg, #f7971e, #ffd200); /* 黄色系 */
}
.tenken-grad-5 {	
	background: linear-gradient(135deg, #ff7e5f, #feb47b); /* オレンジ */
}
.tenken-grad-6 {
	background: linear-gradient(135deg, #f66a6a, #f48b8b); /* 赤系*/
}



.zei{
	margin-top: -2em!important;
}


@media (max-width: 980px){
    .tenken ul li ul li{
        font-size: 1.5vw;
    }
}

@media (max-width: 600px) {
    .tenken ul{
        flex-direction: column;
        width: 100%;
    }
    .tenken ul li ul li{
        width: calc(100% - calc(10px + 0.7em));
        min-height: 3em;
        height: 1em;
        padding-top: 0.7em;
        writing-mode: horizontal-tb;
        font-size: 3.5vw;
    }
}	

       /*----------------------------------------------------採用ぺージレイアウトここから↓----------------------------------------------------*/
/*リクルートメインビジュアル*/
.recruit-header-wrap{
	position: relative;
}
/*メインビジュアル画像*/
.recruit-header{
	background-image: url('https://www.tochigi-subaru.jp/wp-content/uploads/2025/05/recruit-top2-1.jpg');
	background-size: cover;
	background-position: center;
	width: 100vw;
	height: calc(100vh - 100px);
	/*2つのカードが次の要素に潰されない様に最低高を設定*/
	min-height: 860px;
	margin: 0 calc(50% - 50vw);
	margin-bottom: 160px;
}

/*中央のタイトル　栃木県*/
.recruit-header-inner{
	text-align: center;
	max-width: 500px;
	aspect-ratio: 3 / 3.5;
	background-image: url('https://www.tochigi-subaru.jp/wp-content/themes/swell_child/img/tochigi.svg');
	background-repeat: no-repeat;
	background-position: center;
	margin: 0 auto;
    padding-top: 200px;
}

/*トップ二つのアイコン*/
.ricruit-menu{
	display: flex;
	width: 80%;
    margin:0 auto;
    justify-content: center;
    gap: 20%;
}
.ricruit-menu-ico{
    height: 80px;
}
.ricruit-menu-ico img{
    height: 80px;
}
.ricruit-right img{
    width: 70px;
}
.ricruit-left,.ricruit-right{
	position: relative;
}

a:has(.ricruit-left){
	box-sizing: border-box;
}
.ricruit-left::after,.ricruit-right::after{
	content:"";
	display: block;
	width: 80px;
	height: 80px;
	position: absolute;
	top: 20px;
	left: 20px;
	border-top:4px solid #ccc;
	border-left:4px solid #ccc;
	border-radius: 10px 0 0 0;
}
.ricruit-left::before,.ricruit-right::before{
	content:"";
	display: block;
	width: 80px;
	height: 80px;
	position: absolute;
	top: 20px;
	right: 20px;
	border-top:4px solid #ccc;
	border-right:4px solid #ccc;
	border-radius: 0 10px 0 0;
}
.ricruit-left::before,.ricruit-left::after{
	border-color:#153B9B;
}
.ricruit-right::before,.ricruit-right::after{
	border-color:#159B73;
}
/*見出し↓*/
.recruit-header h1,.recruit-head{
	background: linear-gradient(-70deg, var(--main-bg-2) , var(--main-bg-1));
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}
.recruit-header h1{
	font-size: 40px;
}
h2.recruit-head{
	font-size: 2.5vw;
}
h2.recruit-interview-head{
	text-align: center;
	margin-top: 60px;
	color: var(--main-blue);
}
.recruit-interview-head::after{
	content:"";
	display: block;
	width: 200px;
	height: 3px;
	background-color: var(--main-blue);
	margin: 20px auto 60px auto;
}

h2.recruit-interview-head-white{
	text-align: center;
	margin-top: 60px;
	color: #fff;
	font-size: 2.5vw;
}
.recruit-interview-head-white::after{
	content:"";
	display: block;
	width: 200px;
	height: 3px;
	background-color: #fff;
	margin: 20px auto 60px auto;
}


.ricruit-left h2{
    color: #153B9B;
	margin: 20px 10px;
	font-size: 36px;
}
.ricruit-right h2{
    color: #159B73;
	margin: 20px 10px;
	font-size: 36px;
}
.recruit-header p{
	color: #737373;
	font-size: 30px;
	margin-top:-20px;
}
.recruit-header .recruit_p{
	color: #fff;
	margin-top: 0px;
}


.pc-col4 .p-postList__item{
	width: 25%;
}

.ricruit-menu-inner{
	background-color: #fff;
    border-radius: 10px;
	width: 400px;
	text-align: center;
	justify-content: center;
    padding: 50px 0 ;
    box-shadow: 0 -4px 6px #aaa;
}
.ricruit-menu-inner button{
	font-size: 20px;
	background-color: #000;
	color: #fff;
	border-radius: 40px;
	padding: 5px 40px;
}
.ricruit-left button{
	background-color: #153B9B;
}
.ricruit-right button{
	background-color: #159B73;
}

#entry{
	background-color:#E4EBF7;
	padding: 60px 0;
}
/*無限ループテキスト*/
.ticker {
    white-space:nowrap;
	width: 100vw;
    height: 128px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.ticker ul {
    display: flex;
    align-items: center;
    animation: ticker 50s linear infinite;
	list-style: none;
}
.ticker li {
    margin-right: 20px;
	font-size: 128px;
	color: #EFEDED;
	font-family: "Lato","Noto Sans JP", serif;
	font-weight: 900;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.recruit-interview{
	background-color: #EFEDED;
	padding: 60px 20px;
	margin-top: -20px;
}
/*インスタグラムフィード位置調整*/
.saiyou_insta{
	margin-top: 260px;
}
/*エントリーぐるぐる*/
.rotate {
	align-items: center;
	display: flex;
	width: 10vw;
	height: 10vw;
	justify-content: center;
	text-align: center;
	position: absolute;
	bottom: 40px;
	right: 40px;
}
.rotate::before {
	animation: 20s 0s rotate linear infinite;
	background: url('https://www.tochigi-subaru.jp/wp-content/themes/swell_child/img/entry_bg.svg') center center / 200px auto no-repeat;
	background-size:cover;
	content: '';
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 0;
}
.rotate-text {
	color: #fff;
	display: inline-block;
	font-size: 1.2vw;
	position: relative;
	z-index: 1;
}
@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.recruit-table th,.recruit-table td{
text-align: left!important;
}
.recruit-table th{
width: 25%!important;
}
/*採用投稿　子ページ*/
.toukou-width{
	max-width: 1260px;
	margin-left: 500px;
}

.toukou-width .wp-post-image{
	width: 100%;
	height: auto;
}
.toukou-width h1{
	font-size: 24px;
}
.recruit-sns-box{
	display: flex;
	justify-content: center;
	gap: 10px 20px;
	padding: 10px;
	max-width: 100vw;
	width: 100%;
	margin-bottom: 60px;
}
.recruit-sns-box div{
	max-width: 300px;
}
.recruit-sns-box div img{
	width:100%;
}


@media (max-width: 980px) {
	.pc-col4 .p-postList__item{
	width:50%;
	}
		.rotate {
	top: 40vh;
	right: 20px;
	width: 20vw;
	height: 20vw;
	}
	.rotate-text {
	font-size: 3vw;
	}
}


@media (max-width: 600px) {
	.recruit-header{
		padding-top: 20px;
		background-image: url('https://www.tochigi-subaru.jp/wp-content/uploads/2025/05/recruit-top-sp.jpg');
		background-size: 100%;
		background-repeat: no-repeat;
		background-position:top center;
		margin-bottom: 0;
	}

		.recruit-header-inner{
			max-width: 200px;
			background-size: 100%;
			padding-top: 80px;
			aspect-ratio: 3 / 4;
		}
		.recruit-header-inner h1{
			font-size: 6vw;
		}
			h2.recruit-head{
			font-size: 5vw;
		}
			.ricruit-menu{
			width: 96%;
			gap: 10px;
			margin:0 10px;
			margin-top: 40vh;
		}
		.pc-col4 .p-postList__item{
			width: 25%;
		}
	.ricruit-menu-inner h2{
		font-size: 20px;
		margin-top: -10px;
	}
	.ricruit-menu-inner p{
		font-size: 16px;
	}
	.ricruit-menu-inner button{
		font-size: 16px;
		padding: 5px 20px;
	}
	.ricruit-left::after,.ricruit-right::after{
	width: 40px;
	height: 40px;
	border-width: 3px;
}
	.ricruit-left::before,.ricruit-right::before{
		width: 40px;
		height: 40px;
		border-width: 3px;
	}
	.ricruit-menu-ico img{
    	height: 70px;
}
	.ricruit-right img{
		width: 60px;
	}
		.rotate {
	top: 40vh;
	right: 20px;
	width: 20vw;
	height: 20vw;
	}
	.rotate-text {
	font-size: 3vw;
	}

	.ticker li {
		font-size: 60px;
	}
	.recruit-interview{
	margin-top: -42px;
}

}

/*-------カード-------*/
.card-box {
    max-width: 1600px;
    margin:45px auto;
	 display: grid;
	grid-template-columns: repeat(3, 1fr); 
	grid-auto-rows: auto;
    gap: 45px 20px;
}
 
    .card-box .card {
        box-shadow:0 2px 5px rgba(0, 0, 0, 0.3);
        padding:10px;
        cursor:pointer;
        width: 100%;
        color: #fff;
        border-radius: 10px;
        font-size: 1.6rem;
    }
 
        .card-box .card p.image {
            margin:-10px -10px 0;
        }
        .card img{
            width:100%;
            height: auto;
            border-radius: 10px 10px 0 0;
        }
 
            .card-box .card p.image img {
                vertical-align:top;
            }
 
        .card-box .card p.text {
            margin:10px 0 0;
        }
        

        .card-box .card {
            transition:box-shadow 0.3s, transform 0.3s;
        }
         
        .card-box .card:hover {
            box-shadow:0 6px 14px rgba(0, 0, 0, 0.24);
            transform:translate(0, -10px);
            transform: scale(1.1);
        }
/*流れ*/
.nagare-list{
    list-style: none;
    max-width: 800px;
    margin:45px auto;
    font-size: 1.6rem;
    font-weight: bold;
    color: #fff;
}
.nagare-list li{
    background: linear-gradient(-45deg, #6EC0BD , #00A380);
    padding: 5px 3em;
    border-radius: 36px;
    margin: 40px 0;
    position: relative;
}

.nagare-list li span{
    background: linear-gradient(-45deg, #006FB6 , #163B9B);
    font-size: 2rem;
    position: absolute;
    left: -1em;
    top: -10px;
    display: block;
    padding: 6px 20px;
    border-radius: 40px;
    border: solid 5px #fff;
}


/*---------------------------------------------------------------------SP対応------------------------------------------------------------------------*/
/*1200px以下*/
@media (max-width: 1200px) {
	.card-box {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.card-box .card{
		font-size: 14px;
	}
}
/*960px以下*/
@media (max-width: 960px) {
		#header{
		height: 60px;
		}
		.c-headLogo img{
			width: 200px;
			height: 40px;
	}
	/*-------------------------ニュース-------------------------*/
		.news_list li{
			flex-direction:column;
		}
		.news-2{
			padding-top: 10px;
		}
	/*-------------------------スライダー-------------------------*/
		.p-mainVisual__slideTitle{
			font-size: 24px;
		}
		.top-main-menu{
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		}
	/*-------------------------About-------------------------*/
		div.join-link {
		  flex-direction: column;
		}
		div.join-link > a:first-of-type {
	  	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		}
		div.join-link > a:last-of-type {
	  	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		}
		.title-recruit{
		top: 80px;
		right: calc(-100% + 3.6em);
    	transform: translate(-50%, -50%);
		}
		.news-button-pc{
			display: none!important;
	}
	/*--------------------固定ぺージレイアウトここから↓----------------------*/
		.page_main_content .c-pageTitle {
			background-color: transparent!important;
			height: 400px;
		}

		.page_main_content .l-mainContent__inner{
			margin:2em 1em;
		}
}

/*---------------------------------------------------------------------SP対応------------------------------------------------------------------------*/

/*600px以下*/
@media (max-width: 600px) {
		/*-------------------------トップタイトル-------------------------*/
	.top-title,.top-title-2,.p-postSlider__title{
		font-size: 48px!important;
		}
		/*-------------------------スライダー-------------------------*/
	.p-mainVisual__inner{
			margin-left: 0;
		}	
		/*-------------------------ニュース-------------------------*/
		.top-news{
			padding: 100px 3% 0 3%;
		}
		.news_list li{ 
			flex-wrap: wrap;
		}
		.news-break{display:block;}
		/*-------------------------スライダー下information-------------------------*/
		.main_visual_infomation{
			margin-left: 0;
			padding: 20px ;
		}
	.card-box {
		grid-template-columns: repeat(1, 1fr);
		gap: 30px;
		margin: 30px;
	}
	.card-box .card{
		font-size: 16px;
	}
}




/*--------------------------------------------------店舗一覧ぺージレイアウトここから↓--------------------------------------------------*/
.tenpo-list-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  grid-auto-rows: auto;
  gap: 30px 40px;
}

/*.tenpo-archive-list {
	float: left;
	width: calc(100% / 4 - 60px) ;
	margin: 30px;
	box-sizing: border-box;
	border: solid 1px #eee;
}
.tenpo-list-wrap::after {
	content: "";
	display: block;
	clear: both;
}*/

/*
.bg-tenpo {
	background-image:
		url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURUdwTAAAAJ8qhFEAAAABdFJOUwBA5thmAAAAEklEQVQI12MwYDBgYGBoYGAAAASKAOH8MS30AAAAAElFTkSuQmCC"),
		url("https://www.tochigi-subaru.jp/wp-content/uploads/2025/05/tenpo-top2.jpg");
	background-repeat: repeat, no-repeat;
	background-size: 2px, cover;
	background-position: top left, center center;
	background-blend-mode: multiply;
}
*/
.bg-tenpo {
	background-image: url("https://www.tochigi-subaru.jp/wp-content/uploads/2025/05/tenpo-top2.jpg");
	background-repeat: repeat, no-repeat;
	background-size: cover;
	background-position: center center;
	height: 636px;
}
.tenpo-archive-list {
	border: solid 1px #eee;
	
}
.tenpo-archive-link {
	color: #333;
}
.tenpo-archive-link:hover {
	opacity: 0.8;
}
.tenpo-archive-list h2 {
	font-size: 22px;
	margin-bottom: 10px;
}
h2.long-title {
  font-size: 18px;
}
.tenpo-archive-tel {
	font-size: 18px;
}
.tenpo-archive-text {
	padding: 15px 10px 10px 10px;
	aspect-ratio: 5 / 2.5;
}
.tenpo-archive-img {
	position: relative;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 5 / 4;
}
.tenpo-archive-img img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}
.map-container {
	position: relative;
	width: 50%;
	margin: 0 auto;
	z-index: 0;
}
.map-container img {
	max-width: 100%;
	height: auto;
	position: relative;
    z-index: 0;
}
.pin {
    position: absolute;
    width: 30px;
    height: 30px;
    background: url('https://www.tochigi-subaru.jp/wp-content/uploads/2025/04/Marker.png') no-repeat center center;
    background-size: contain;
    cursor: pointer;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.pin:hover {
    transform: translate(-50%, -50%) scale(1.3); /* ← 30%拡大 */
    filter: brightness(1.2);
    animation: bounce 0.6s ease;
}

@keyframes bounce {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1.3);
    }
    50% {
        transform: translate(-50%, -60%) scale(1.4);
    }
}
.tooltip {
	position: absolute;
	background-color: #fff;
	color: #333;
	padding: 5px 8px;
	border-radius: 5px;
	font-size: 20px;
	white-space: nowrap;
	display: none;
	transform: translate(-50%, -170%);
	z-index: 3;
}
.box-wrap::after {
	content: "";
	display: block;
	clear: both;
}
h2.pagetitle2 span {
	font-size: 24px;
	line-height: 1.9em;
}
@media screen and (max-width: 1800px) {
	.tenpo-archive-text {
		aspect-ratio: 16 / 9;
		overflow: hidden;
	}
}
@media screen and (max-width: 1500px) {
	.tenpo-archive-text {
		aspect-ratio: 16 / 12;
	}
}

@media screen and (max-width: 1200px) {
	.tenpo-list-wrap {
  		grid-template-columns: repeat(3, 1fr); 
	}
}
@media screen and (max-width: 960px) {
	.tenpo-list-wrap {
		grid-template-columns: repeat(1, 1fr);
		margin: 10px;
	}
	.bg-tenpo {
		height: 436px;
	}
}
@media screen and (max-width: 600px) {
	/*
	.tenpo-archive-list {
		float: none;
		width: 100%;
		margin: 0 auto;
		
	}*/
	.tenpo-list-wrap {
		grid-template-columns: repeat(1, 1fr); 
		margin: 10px;
	}
	.map-container {
		width: 100%;
	}
	.pin {
		width: 20px;
		height: 20px;
		transform: translate(-50%, -120%);
	}
	.tenpo-archive-text {
		aspect-ratio: auto;
		overflow: hidden;
	}
	
    .tooltip {
        position: fixed !important;
        top: 40%; /* 任意の高さに調整 */
        left: 50% !important;
        transform: translateX(-50%) !important;
        
        padding: 10px 14px;
        font-size: 14px;
        max-width: 200px;
		white-space: normal;
        text-align: center;
        pointer-events: none;
    }
	.bg-tenpo {
		height: 454px;
	}
}


/*--------------------------------------------------店舗一覧ぺージレイアウトここまで↑--------------------------------------------------*/



/*--------------------------------------------------店舗詳細ぺージレイアウトここから↓--------------------------------------------------*/
/*--------デフォルトCSS上書き（隙間修正）-----↓*/
.post_content {
	margin: 0 !important;
	padding: 0 !important;
}
.l-content {
	margin: 0 !important;
	padding: 0 !important;
}
/*--------デフォルトCSS上書き（隙間修正）-----↑*/
.main-wrapper {
	padding: 0 48px 48px;!important;
}
h1.tenpo-head {
    position: relative;
    padding: 2rem 1rem;
    background-image: url('https://www.tochigi-subaru.jp/wp-content/uploads/2025/04/s4-top2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    margin-top: -200px;
}

.img-container {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	background-color: #333;
	aspect-ratio: 16 / 9;
}
.img-containr img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}

.image-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: 100%;
	margin: 0 auto;
}
.image-grid-item {
	position: relative;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.image-grid-item img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}
.pager {
	display: none;
}

.map-area iframe {
	width: 100%;
	height: 500px;
}
.tenpo-list {
  
}
dl.tenpo-list dt {
	padding: 0;
	padding-bottom: 10px;
	float: left;
	clear: both;
}

dl.tenpo-list dd {
	padding-left: 200px;
	padding-bottom: 10px;
	margin-bottom: 30px;

}
.box-wrap {
	 display: flex;
	 width: 100%;
	margin: 30px 0;
}
.left-box {
	width: 40%;	
}
.right-box {
      width: 60%;
      padding: 20px 20px 20px 40px;
}
.left-box img {
	width: 100%;
	object-fit: cover;
}
.single-tenpo h1.c-pageTitle {
	font-size: 3rem;
	padding: 80px 10px 80px;
}
@media screen and (max-width: 600px) {
	.box-wrap {
	 	display: block;
	 	width: 100%;
	}
	.left-box {
		width: 100%;	
	}
	.right-box {
		width: 100%;
		padding: 0;
	}
	dl.tenpo-list dt {
		float: none;
	}
	dl.tenpo-list dd {
		padding-left: 10px;
	}
	
	 .image-slider-wrapper {
		 position: relative;
		 overflow: hidden;
	}

	.image-grid {
		display: flex;
		transition: transform 0.3s ease-in-out;
		box-sizing: border-box;
		gap:0;
	}
.image-grid-item {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 100%;
	}
		
	.image-grid-item img {
    	display: block;
    	width: 100%;
    	height: auto;
	}

	.pager {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		border: none;
		cursor: pointer;
		z-index: 10;
	}
	.pager {
		display: block;
	}
	.pager.prev {
		left: 10px;
	}
	.pager.next {
		right: 10px;
	}
	.map-area iframe {
		height: 300px;
	}
	.single-tenpo h1.c-pageTitle {
		font-size: 2rem;
		padding: 20px;
	}
}

/*--------------------------------------------------店舗詳細ぺージレイアウトここまで↑--------------------------------------------------*/


/*--------------------------------------新車アーカイブぺージレイアウトここから↓--------------------------------------------------*/
/*.bg-newcar {
	background-image:	url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURUdwTAAAAJ8qhFEAAAABdFJOUwBA5thmAAAAEklEQVQI12MwYDBgYGBoYGAAAASKAOH8MS30AAAAAElFTkSuQmCC"),
		url("https://www.tochigi-subaru.jp/wp-content/uploads/2025/04/NEWFORESTER-top2.jpg");
	background-repeat: repeat, no-repeat;
	background-size: 2px, cover;
	background-position: top left, center center;
	background-blend-mode: multiply; 
	background-color: rgba(0, 0, 0, 0.1);
}*/
.bg-newcar {
	background-image: url("https://www.tochigi-subaru.jp/wp-content/uploads/2025/04/NEWFORESTER-top2.jpg");
	background-repeat: repeat, no-repeat;
	background-size: cover;
	background-position: center center;
	height: 636px;	
}
.test {
	position: relative;
	width: 100vw;
	height: 600px;
	background: url('https://www.tochigi-subaru.jp/wp-content/uploads/2025/04/NEWFORESTER-top3.jpg') no-repeat right center/cover;
	background-size: 70%;
	margin: 0;
	display: flex;
	align-items: center;
	font-weight: bold;
}

.test::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 101%;
	background-color: #fdfdfd;
	clip-path: polygon(0 0, 50% 0, 30% 100%, 0% 100%);
	z-index: 1;
}

.h1-content {
	position: relative;
	left: 10%;
	color: #333;
	z-index: 2;
}

.h1-content h1 {
	background: linear-gradient(to right, #384FBE, #35095D);
	-webkit-background-clip: text;
	color: transparent;
	font-size: 50px;
	position: relative;
}

.h1-content h2::after {
	content: "";
	position: absolute;
	bottom: -20px;
	right: 50%;
	width: 50%;
	height: 3px;
	background-color: #333;
}
.h1-content p {
	font-size: 2rem;
	font-style: italic;
	margin: 0;
}
.tab-container {
	display: flex;
	justify-content: center;
	background-color: #fdfdfd;
	padding: 10px;
	margin: 40px 0 -10px -300px;
}
.tab {
	cursor: pointer;
	margin: 0 5px;
	padding: 20px 60px;
	border-radius: 10px 10px 0 0;
	color: #fff;
}
.jyouyou {
	background: #153b9b;
}
.kei {
	background: #5a9cd9;
}
#jyouyou {
	background: #153b9b;
	width: 100vw;
	padding: 50px;
}
#kei {
	background: #5a9cd9;
	width: 100vw;
	padding: 50px;
}
.newcarcontent {
	display: none;
	width: 100%;
	margin: 0;
}
.newcarcontent.active {
	display: block;
	width: 100%;
	margin-left: -100px;
}
.box-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 50px 20px;
	width: 1200px;
	margin: 0 auto;
}
.car-card {
	background: #fff;
	height: auto;
	color: #333;
	margin: 10px;
	padding: 15px;
	border-radius: 8px;
	width: 100%;
	text-align: center;
	aspect-ratio: 4 / 4;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	
}
.car-card img {
	width: 100%;
	margin: 0;
	padding: 0;
}
#kei .car-card img {
	margin-top: 20px;
}
.car-card h3 {
	font-size: 30px;
	margin-top: 0;

}
p.shousai a {
	display: inline-block;
	margin: -20px auto 20px;
	padding: 10px 50px;
	background: linear-gradient(90deg, #153b9b, #35095d);
	border-radius: 50px;
	color: #fff;
	
}
p.shousai a:hover {
	opacity: 0.8;
}
p.shousai {
	display: inline-block;
	margin: 10px auto;
	padding: 10px 50px;
	background: linear-gradient(90deg, #153b9b, #35095d);
	border-radius: 50px;
	color: #fff;
}
p.shousai.kei-shousai {
	background: linear-gradient(90deg, #99c9f3, #2d74b7);
	margin: 10px auto;
}
p.shousai.trans {
	background: transparent;
}
.newcar-link2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 50px;
	width: 70%;
	margin: 150px auto 0;
}
.newcar-link2 p.shousai2 a {
	margin-top: -80px;
}
.car-card-link:hover .car-card {
  opacity: 0.8;
}
.kounyu-wrap {
	width: 1200px;
	margin: 30px auto 50px;
	display: grid;
	grid-template-columns: repeat(2, 1fr); 
	grid-auto-rows: auto;
	gap: 50px;
}
.kounyu-box {
	width: 100%;
	padding: 30px;
	background: linear-gradient(135deg, #eeeeee, #fafafa);
}
.kounyu-box img {
	display: block;
	width: 100%;
	margin: 0 auto 1em;
	border: solid 1px #fafafa;
}
.kounyu-link {
	color: #333;
}
.kounyu-link:hover {
	opacity: 0.8;
}


@media screen and (max-width: 1200px) {
	.box-grid {
		grid-template-columns: repeat(2, 1fr);
		width: 100%;
	}
	.newcar-link2 {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
		width: 80%;	
	
	}
	.newcar-link2 p.shousai2 a {
		margin: 20px;
	}
	p.shousai a {
		padding: 10px 30px;
	}
	.kounyu-wrap {
		width: 100%;
	}
}

@media screen and (max-width: 960px) {
	.bg-newcar {
		height: 436px;
	}
}
@media screen and (max-width: 600px) {
	#jyouyou {
		padding: 20px 0;
	}
	#kei {
		padding: 20px 0;
	}
	.car-card h3 {
		font-size: 23px;
		margin-top: 0;
		line-height: 1.1em;
	}
	.newcar-link2 {
		grid-template-columns: repeat(1, 1fr);
		gap: 30px;
		width: 100%;
	}
	.newcar-link2 p.shousai2 a {
		margin: 30px 20px;
	}
	.tab-container {
		display: flex;
		justify-content: center;
		background-color: #fdfdfd;
		padding: 10px;
		margin: 40px 0 -10px 0;
	}
	.tab {	
		padding: 20 40px;
		
	}
	.box-grid {
    	grid-template-columns: repeat(2, 1fr);
    	width: 100%;
    	padding: 0 20px;  	
	}

	.car-card {
		margin: 0;
		border-radius: 8px;
		width: 100%;
		text-align: center;
		aspect-ratio: 3 / 4;
		padding: 10px 3px;
	}
	p.shousai {
		font-size: 12px;
		padding: 5px 10px;
		width: 90%;
	}
	p.shousai.kei-shousai {
		font-size: 12px;
		padding: 5px 10px;
		width: 90%;
	}
	#kei .car-card img {
		margin-top: 0;
		width: 100%;
	}
	#jyouyou .car-card img {
		margin-top: -30px;
		width: 100%;
	}
	.car-card h3 {
		font-size: 20px;
	}
	.newcar-link2 p.shousai2 a {
		margin: 10px auto;
		width: 90%;
		display: block;
	}
	.newcar-link2 {
		margin: 70px auto 0;
	}
	.kounyu-wrap {
		display: grid;
		grid-template-columns: repeat(1, 1fr); 
		grid-auto-rows: auto;
		gap: 30px;
	}
	.kounyu-box {
		width: 90%;
		margin: 0 auto;
	}
	.newcarcontent.active {
		margin-left: -15px;
	}
	.bg-newcar {
		height: 454px;
	}
	
}
/*--------------------------------------新車アーカイブぺージレイアウトここまで↑--------------------------------------------------*/





/*--------------------------------------新車詳細ぺージレイアウトここから↓--------------------------------------------------*/
.img-container2 {
	width: 100vw !important;
	margin: 0 auto !important
	padding: 0 auto !important;
}

table.shijyou-list {
	width: 90%;
	margin: 0 auto;
	margin-bottom: 50px !important;
	border-collapse: collapse;
	border: none;
}
table.shijyou-list tr:nth-child(2n+1) {
	background-color: #fff;
}
table.shijyou-list th {
	background-color: #eee;
	color: #333;
	padding: 30px;
	 border: none;
}
table.shijyou-list td {
	padding: 30px;
	 border: none;
}
table.shijyou-list tr {
	border-bottom: solid 1px #eee;
}
img.img-center {
	display: block;
	margin: 0 auto;
}
.newcar-wrap {
	background-color: #fff;
	margin: -40px auto 0 !important;
	padding: 40px 0;
	
}
.newcar-box {
	width: 50%;
	margin: 0 auto;
}
.newcar-box img {
	display: block;
	margin: 0 auto;
}
p.shousai2 a {
	display: inline-block;
	width: 100%;
	margin-bottom: 100px;
	padding: 30px 50px;
	background: linear-gradient(90deg, #153b9b, #35095d);
	border-radius: 50px;
	color: #fff;
	text-align: center;
	font-weight: bold;
}
p.shousai2 a:hover {
	opacity: 0.8;
}
.newcar-link {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	width: 70%;
	margin: 0 auto 50px;
}
/*表示順入れ替え*/
.hyoji-wrap {
  display: flex;
  flex-direction: column;
}

.area1 {
	order: 2;
	padding-top: 100px;
}

.area2 {
	order: 1;
}

.sijyou-yokoku {
	text-align: center;
}
.single-newcar h1.c-pageTitle {
	font-size: 4rem;
	padding: 60px 10px 40px;
}
@media screen and (max-width: 600px) {
  .shijyou-list-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOSでスムーズスクロール */
  }

  .shijyou-list {
    min-width: 1100px; /* テーブルの幅を指定してスクロール可能に */
    width: 100%;
  }
	.newcar-link {
		grid-template-columns: repeat(1, 1fr);
		gap: 0;
		width: 90%;
		margin: 0 auto 50px;
	}
	p.shousai2 a {
		display: block;
		margin: 20px auto;
		width: 100%;
		padding: 20px;
	}
	table.shijyou-list th {
		padding: 15px;
	}
	table.shijyou-list td {
		padding: 15px;
	}
	.newcar-wrap {
		display: none;
	}
	.single-newcar h1.c-pageTitle {
		font-size: 2rem;
		padding: 20px;
	}
}
/*--------------------------------------新車詳細ぺージレイアウトここまで↑--------------------------------------------------*/




/*-------------------------------------エンジンオイルぺージレイアウトここから↓--------------------------------------------*/
 {
}
.oil,table {
	width: 100%;
	margin: 0 auto;
	padding: 0 !important;
	margin-bottom: 50px !important;
	border-collapse: collapse;
}
.oil,table tr:nth-child(2n+1) {
	background-color: #fafafa;
}
.oil,table th {
	background-color: ;
	color: #333;
	padding: 30px;
	 border: none;
	text-align: center !important;
	vertical-align: middle !important;
}
.oil,table td {
	padding: 30px;
	border: none;
	text-align: center !important;
	vertical-align: middle !important;
}
.oil,table tr {
	border-bottom: solid 1px #eee;
}


/*-------------------------------------エンジンオイルぺージレイアウトここまで↑--------------------------------------------*/

.main-image {
	width: 100%;
	max-width: 500px;
	margin: auto;
	display: block;
	border-radius: 8px;
 }
        .thumbnail-gallery {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 15px;
            flex-wrap: wrap;
        }
        .thumbnail-gallery img {
            width: 80px;
            cursor: pointer;
            opacity: 0.6;
            transition: 0.3s;
            border-radius: 5px;
        }
        .thumbnail-gallery img:hover,
        .thumbnail-gallery img.active {
            opacity: 1;
            border: 2px solid #0073aa;
        }
/*-------------------------------------コーティングぺージレイアウトここから↓--------------------------------------------*/

.coating-box h3 {
	font-size: 1.7rem;
}
.coating-box img {
	width: 180px;
}
/*-------------------------------------コーティングぺージレイアウトここまで↑--------------------------------------------*/








/*-------------------------------------お客様ぺージレイアウトここから↓--------------------------------------------*/
.card-box.row1 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.card-box.row2 {
	display: grid;
	
	grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 1200px) {
	.card-box.row2 {	
		grid-template-columns: repeat(2, 1fr);
	}
}
/*-------------------------------------お客様ぺージレイアウトここまで↑--------------------------------------------*/








/*-------------------------------------マイスバルぺージレイアウトここから↓--------------------------------------------*/
/*アプリで出来ること*/
.dekiru-list{
    list-style: none;
    max-width: 800px;
    margin:45px auto;
    font-size: 1.6rem;
    font-weight: bold;
    color: #fff;
}
.dekiru-list dt{
    background: linear-gradient(-45deg, #6EC0BD , #00A380);
    padding: 5px 3em;
    border-radius: 36px;
    margin: 40px 0;
    position: relative;
}

.dekiru-list dt span{
    background: linear-gradient(-45deg, #006FB6 , #163B9B);
    font-size: 2rem;
    position: absolute;
    left: -1em;
    top: -10px;
    display: block;
    padding: 6px 25px;
    border-radius: 40px;
    border: solid 5px #fff;
}
.dekiru-list dd {
	color: #333;
	font-size: 17px;
	margin: -10px 0 50px 0;
	font-weight: normal;
	padding-left: 30px;
}
p.shousai3 a {
	display: block;
	width: 50%;
	font-size: 27px;
	font-weight: bold;
	margin: 50px auto;
	padding: 30px 10px;
	background: linear-gradient(90deg, #153b9b, #35095d);
	border-radius: 70px;
	color: #fff;
	text-align: center;
}
p.shousai3 a:hover {
	opacity: 0.8;
}
@media screen and (max-width: 600px) {
	.dekiru-list {
		width: 100%;
		padding-left: 25px;
	}
	.dekiru-list dt{
    	font-size: 19px;
	}

	.dekiru-list dt span{
		font-size: 19px;
		padding: 10px 22px;
	}
	p.shousai3 a {
		width: 100%;
		font-size: 18px;
	
	}
	.dekiru-list dd {
		margin: -10px 0 50px 0;
		padding-left: 0;
	}
}
/*-------------------------------------マイスバルぺージレイアウトここまで↑--------------------------------------------*/





/*-------------------------------------所有権解除についてぺージレイアウトここから↓--------------------------------------------*/
p.shousai4 a {
	display: block;
	width: 80%;
	font-weight: bold;
	margin: 50px auto;
	padding: 20px;
	background: linear-gradient(90deg, #153b9b, #35095d);
	border-radius: 70px;
	color: #fff;
	text-align: center;
}
p.shousai4 a:hover {
	opacity: 0.8;
}
.bold {
	font-size: 1.2rem;
	font-weight: bold;
	margin: 20px 0 5px;
}
.list-shoyuuken {
	width: 1200px;
	margin: 0 auto;
	font-size: 20px;
}
.transparent-box {
	width: 1200px;
	margin: 0 auto;
	background-color: transparent;
}
.dekiru-list.shoyu dt br {
		display: none;
}

@media screen and (max-width: 1200px) {
	.list-shoyuuken {
		width: 90%;	
	}
	.transparent-box {
		width: 90%;
	}
	
}
@media screen and (max-width: 600px) {
	.list-shoyuuken {
		width: 100%;	
	}
	.transparent-box {
		width: 100%;
	}
	.dekiru-list.shoyu dt {
		height: 4em;
		padding-right: 0;
	}
	.dekiru-list.shoyu dt br {
		display: block;
	}
	.dekiru-list.shoyu dt span{
		font-size: 2rem;
		margin-top: 10px;
		padding: 6px 24px;
	}
}
/*-------------------------------------所有権解除についてぺージレイアウトここまで↑--------------------------------------------*/



/*-------------------------------------メンテナンスぺージレイアウトここから↓--------------------------------------------*/
.kakaku {
	width: 70%;
	margin: 0 auto;
}




/*-------------------------------------メンテナンスぺージレイアウトここまで↑--------------------------------------------*/




/*-------------------------------------自動車保険ぺージレイアウトここから↓--------------------------------------------*/

.hoken-wrap {
	width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr); 
	grid-auto-rows: auto;
	gap: 40px;
}
.hoken-box {
	background-color: #333;
	color: #fff;
	text-align: center;
	font-size: 25px;
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 8px;
}

.hoken-box span {
	display: block;
	font-size: 80px;
	font-weight: bold;
}
.hoken-box.box-1 {
	background: linear-gradient(135deg, #1e3c72, #2a5298); /* 青系 */
}
.hoken-box.box-2 {
	background: linear-gradient(135deg, #0083b0, #00b4db); /* 青系2*/
}
.hoken-box.box-3 {
	background: linear-gradient(135deg, #56ab2f, #a8e063); /* 緑系 */
}
.hoken-box.box-4 {
	background: linear-gradient(135deg, #f7971e, #ffd200); /* 黄色系 */
}
.hoken-box.box-5 {	
	background: linear-gradient(135deg, #ff7e5f, #feb47b); /* オレンジ */
}
.hoken-box.box-6 {
	background: linear-gradient(135deg, #f66a6a, #f48b8b); /* 赤系*/
}

.hokenlink-wrap {
	width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr); 
	grid-auto-rows: auto;
	gap: 40px;
}
.hokenlink-box {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3.5;
	background: linear-gradient(135deg, #b2ebf2, #e0f7fa);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border-radius: 8px;
	overflow: hidden;
	padding: 20px;
	box-sizing: border-box;
}
.hoken-link {
	color: #333;
}
.hoken-link:hover {
	opacity: 0.8;
}
.hokenlink-box img {
	display: block;
	width: 100%;
	margin: 0 auto 1em;
	border: solid 1px #fafafa;
}
.sakutei {
	font-size: 20px;
}
@media screen and (max-width: 1200px) {
	.hoken-box span {
		font-size: 50px;
	}
}
@media screen and (max-width: 1000px) {
	.hoken-wrap {
		width: 100%;
	}
	.hokenlink-wrap {
		width: 100%;
	}
	.hoken-box {
		font-size: 20px;
	}
}

@media screen and (max-width: 600px) {
	.hoken-wrap {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.hoken-box {
		font-size: 13px;
	}
	.hoken-box span {
		font-size: 40px;
	}
	.hokenlink-wrap {
		grid-template-columns: repeat(1, 1fr);
		gap: 20px;
		width: 90%;
	}
	.hokenlink-box {
		aspect-ratio: auto;

	}
}
/*-------------------------------------自動車保険ぺージレイアウトここまで↑--------------------------------------------*/





/*-------------------------------------整備求人ぺージレイアウトここから↓--------------------------------------------*/
.seibi-entry .cap_box_content {
	height: 100px;
}
.seibi-entry {
	
}
.seibi-entry span {
	font-size: 25px;
}
@media screen and (max-width: 600px) {
	.seibi-entry .cap_box_content {
		height: auto;
	}
}
/*-------------------------------------整備求人ぺージレイアウトここまで↑--------------------------------------------*/



/*-------------------------------------栃木スバルの取り組みぺージレイアウトここから↓--------------------------------------------*/

h2.tourokubangou {
	font-size: 30px;
	margin-top: -10px;
}
.torikumi-font {
	font-weight: bold;
	font-size: 33px;
	text-align: center;
}
h3.torikumi {
	color: #153B9B;
	font-size: 40px;
}
p.shousai2.eco a {
	display: inline-block;
	width: 100%;
	margin-top: 100px;
	padding: 30px 50px;
	background: linear-gradient(90deg, #153b9b, #35095d);
	border-radius: 50px;
	color: #fff;
	text-align: center;
	font-weight: bold;
}
p.shousai2.eco a:hover {
	opacity: 0.8;
}






@media screen and (max-width: 600px) {
	h2.tourokubangou {
		font-size: 20px;
	}
	.torikumi-font {
		font-size: 20px;
	}
	h3.torikumi {
		font-size: 23px;
	}
	
}
/*-------------------------------------栃木スバルの取り組みぺージレイアウトここまで↑--------------------------------------------*/

/*-------------------------------------一つのいのちプロジェクトぺージレイアウトここから↓--------------------------------------------*/
p.is-style-big_kakko_box {
	font-size: 35px !important;
}
.inochi-link p.shousai2 a {
	display: inline-block;
	width: 100%;
	margin-bottom: 100px;
	padding: 10px;
	background: linear-gradient(90deg, #153b9b, #35095d);
	border-radius: 50px;
	color: #fff;
	text-align: center;
	font-weight: bold;
}
p.shousai2 a:hover {
	opacity: 0.8;
}
.inochi-link {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	width: 90%;
	margin: 0 auto 50px;
}
.page-id-5389 #top_title_area {
  display: none;
}
.inochi-img {

}
.inochi-img {
	width: 700px;
	display: block;
	margin: 0 auto;
}
img.wp-image-6843 {
	margin-top: -80px;
	margin-bottom: 30px;
}
.pc {
	display: block;
}
.sp {
	display: none;
}
@media screen and (max-width: 700px) {
	.inochi-img {
		width: 100%;
		
	}
	img.wp-image-6843 {
		margin-top: -80px;
		margin-bottom: 30px;
	}	
}
@media screen and (max-width: 600px) {
	p.is-style-big_kakko_box {
		font-size: 20px !important;
	}
  	.inochi-link {
		grid-template-columns: repeat(1, 1fr);
		gap: 0;
		width: 90%;
		margin: 0 auto 50px;
	}
	.inochi-link p.shousai2 a {
		display: block;
		margin: 20px auto;
		width: 100%;
		padding: 10px;
	}
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
}



/*-------------------------------------一つのいのちプロジェクトぺージレイアウトここまで↑--------------------------------------------*/



/*-------------------------------------トップぺージメインメニュースマホ背景画像レイアウトここから↓--------------------------------------------


@media screen and (max-width: 600px) {
  .top-main-menu {
    background-image:
      url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURUdwTAAAAJ8qhFEAAAABdFJOUwBA5thmAAAAEklEQVQI12MwYDBgYGBoYGAAAASKAOH8MS30AAAAAElFTkSuQmCC"),
      url("https://www.tochigi-subaru.jp/wp-content/uploads/2025/05/topmeinmenubg-sp2.png");
    background-size: 2px, auto 100%;
    background-attachment: scroll;
    background-position: top left , top right;
    background-repeat: repeat, no-repeat;
  }
}
/*-------------------------------------トップぺージメインメニュースマホ背景画像レイアウトここまで↑--------------------------------------------*/


@media screen and (max-width: 600px) {
  .top-main-menu {
   
    background-size: 2px, auto 100%;
    background-attachment: scroll;
    background-position: top left , center center !important;
    background-repeat: repeat, no-repeat;
	  padding-top: 0;
  }
	.title-main-menu{
		padding-top: 80px!important;
	}
	
	
	
	
	
}
/*-------------------------------------トップぺージメインメニュースマホ背景画像レイアウトここまで↑--------------------------------------------*/

@media screen and (max-width: 600px) {
	.title-about {
  		position: absolute;
  		bottom: 10px !important;
  		left: -70px !important;
	}

.title-recruit {
  		position: absolute;
  		top: 50px;
  		right: -60% !important;
	}	
}
@media screen and (max-width: 400px) {
	.title-about {
  		position: absolute;
  		bottom: 10px !important;
  		left: -70px !important;
	}

.title-recruit {
  		position: absolute;
  		top: 50px !important;
  		right: -250px !important;
	}	
}
@media screen and (max-width: 375px) {
	.title-about {
  		position: absolute;
  		bottom: 10px !important;
  		left: -70px !important;
	}

.title-recruit {
  		position: absolute;
  		top: 50px !important;
  		right: -220px !important;
	}	
}