@charset "utf-8";
ul {
    list-style-type: none;
}

/* ---------------------tohokulp共通----------------------- */
.post-body p .tohokulp{
	margin: 0;
}
.tohokulp {
	margin-bottom: -5%;
}
.tohokulp > img{
	width: 100%;
}
.tohokulp .inner{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto !important;
}
.tohokulp .mainvl {
	line-height: 0;
}

/* mainvl
------------------------------------------------------- */
.mainvl {
	position: relative;
}

/* リード文
-----------------------------------------*/
.read {
	background: url(img/read-bg.jpg) no-repeat;
	background-size: cover;
	padding: 5% 0;
}
.read .inner {
	padding: 5%;
	border: 1px solid #fff;
	background: #1d3c72;
	border-radius: 30px;
	display: flex;
	flex-direction: column;
	gap: 3em 0;
}
.read p {
	color: #fff;
	text-align: center;
}


/* プレゼント
-----------------------------------------*/
.pre {
	background: url(img/pre-bg.jpg) no-repeat;
	background-size: cover;
	padding: 5% 0;
}
.pre .inner > p {
	font-size: 1.5rem;
	font-weight: 600;
	text-align: center;
	margin-top: 3%;
}
.pre .syasyu {
	padding: 3% 0 0;
}
.pre .syasyu h3 {
	text-align: center;
	color: #fff;
	background: #164278;
	padding: 5px 0;
	border-radius: 20px 20px 0 0;
	font-size: 1.3rem;
}
.pre .syasyu p {
	background: #ffffff;
	padding: 25px;
	border-radius: 0 0 20px 20px;
}
.pre .inner .key {
	text-align: end;
	font-size: 1rem;
    font-weight: 400;
    margin: 5px 0 3%;
}
.pre .syasyu dl {
	background: #ffffff80;
	padding: 25px;
	border-radius: 0 0 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px 0;
}
.pre .syasyu dl div {
	display: flex;
	align-items: center
}
.pre .syasyu dl dt {
	width: 5em;
	text-align: center;
	background: #164278;
	color: #fff;
	border-radius: 10px 0 0 10px;
	min-height: 50px;
	display: flex;
    justify-content: center;
    align-items: center;
}
.pre .syasyu dl dd {
	background: #fff;
	width: calc(100% - 5em);
	border-radius: 0 10px 10px 0;
	min-height: 50px;
	display: flex;
    align-items: center;
    padding: 0 20px;
}
.pre .pre-logo {
    mix-blend-mode: multiply;
    width: 20%;
    margin: 0 auto;
}
.pre .pre-logo img {
    height: 100px;
    object-fit: cover;
}
.pre .pre-itm {
	margin-top: -30px;
}
.pre .pre-itm p {
	font-size: 1.1rem;
	font-weight: 500;
	margin-top: 7px;
}
.pre .pre-color {
	padding: 3% 0;
}
.pre .pre-color h3 {
	text-align: center;
	color: #fff;
	background: #164278;
	padding: 5px 0;
	border-radius: 20px 20px 0 0;
	font-size: 1.2rem;
}
.pre .pre-color .pre-color-bg {
	background: #fff;
	padding: 25px;
	border-radius: 0 0 20px 20px;
}
.pre-color-cnt h4 {
	border-bottom: 2px solid #000;
	font-size: 1.2rem;
	padding-bottom: 3px;
}
.pre-color-cnt ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 2.6%;
	margin-top: 10px;
}
.pre-color-cnt li {
	width: 23%;
}
.pre-color-cnt li span {
	display: flex;
	align-items: center;
	gap: 0 5px;
}
.pre-color-cnt li span::before {
	content: "";
	width: 20px;
	height: 20px;
	background: #000;
	border-radius: 50%;
}
.pre-color-cnt:nth-of-type(1) {
	margin-bottom: 20px;
}
.pre-color-cnt:nth-of-type(1) li:nth-of-type(2) span::before {
	background: #972923;
}
.pre-color-cnt:nth-of-type(1) li:nth-of-type(3) span::before {
	background: #1d4f5e;
}
.pre-color-cnt:nth-of-type(1) li:nth-of-type(4) span::before {
	background: #4c2b1f;
}
.pre-color-cnt:nth-of-type(1) li:nth-of-type(5) span::before {
	background: #a92542;
}
.pre-color-cnt:nth-of-type(1) li:nth-of-type(6) span::before {
	background: #f7b688;
}
.pre-color-cnt:nth-of-type(1) li:nth-of-type(7) span::before {
	background: #8e9e9c;
}
.pre-color-cnt:nth-of-type(1) li:nth-of-type(8) span::before {
	background: #f3eee6;
}
.pre-color-cnt:nth-of-type(1) li:nth-of-type(9) span::before {
	background: #d57611;
}
.pre-color-cnt:nth-of-type(1) li:nth-of-type(10) span::before {
	background: #292d56;
}
.pre-color-cnt:nth-of-type(1) li:nth-of-type(11) span::before {
	background: #9c4423;
}
.pre-color-cnt:nth-of-type(1) li:nth-of-type(12) span::before {
	background: #11472b;
}
.pre-color-cnt:nth-of-type(1) li:nth-of-type(13) span::before {
	background: #d74b16;
}
.pre-color-cnt:nth-of-type(1) li:nth-of-type(14) span::before {
	background: #1cabd1;
}
.pre-color-cnt:nth-of-type(2) {
	display: flex;
}
.pre-color-cnt:nth-of-type(2) .txt {
	width: 70%
}
.pre-color-cnt:nth-of-type(2) .qr {
	width: 30%;
}
.pre-color-cnt:nth-of-type(2) li:nth-of-type(1) span::before {
	background: #152b88;
}
.pre-color-cnt:nth-of-type(2) li:nth-of-type(2) span::before {
	background: #65321a;
}
.pre-color-cnt:nth-of-type(2) li:nth-of-type(3) span::before {
	background: #f3eee6;
}
.pre-color-cnt:nth-of-type(2) li:nth-of-type(4) span::before {
	background: #b9252a;
}
.pre-color-cnt:nth-of-type(2) li:nth-of-type(5) span::before {
	background: #e89d20;
}
.pre-color-cnt:nth-of-type(2) li:nth-of-type(6) span::before {
	background: #ea561b;
}
.pre-color-cnt:nth-of-type(2) li:nth-of-type(7) span::before {
	background: #1b5d35;
}
.pre-color-cnt:nth-of-type(2) li:nth-of-type(8) span::before {
	background: #2f2d3d;
}
.pre-color-cnt:nth-of-type(2) li:nth-of-type(9) span::before {
	background: #eb5a5a;
}
.pre-color-cnt:nth-of-type(2) li:nth-of-type(10) span::before {
	background: #5b102b;
}
.pre-color-cnt:nth-of-type(2) li:nth-of-type(11) span::before {
	background: #7f6d61;
}
.pre-color-cnt:nth-of-type(2) li:nth-of-type(12) span::before {
	background: #2a282b;
}
.pre-color-cnt:nth-of-type(2) li:nth-of-type(13) span::before {
	background: #b9732e;
}
.pre-color-cnt:nth-of-type(2) li:nth-of-type(14) span::before {
	background: #56191b;
}
.pre-color-cnt:nth-of-type(2) li:nth-of-type(15) span::before {
	background: #068a89;
}
.pre-color-cnt:nth-of-type(2) li:nth-of-type(16) span::before {
	background: #b6ce83;
}
.pre .set {
	background: #fff;
	border-radius: 30px;
	padding: 30px 35px 30px;
	margin: calc(3% + 20px) 0 20px;
}
.pre .set h3 {
	background: #3A3132;
	color: #fff;
	font-size: 1.3rem;
	font-weight: 500;
	text-align: center;
	border-radius: 999px;
	padding: 5px;
	width: 65%;
	margin: -50px auto 0;
}
.pre .set-cnt {
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
}
.pre .set-cnt p {
	width: 48%;
	background: #EEF7F9;
	line-height: 0;
}
.pre .inner .tyui {
	font-size: 1rem;
	font-weight: normal;
	text-align: left;
	margin-top: 0;
}

/* ラインアップ
-----------------------------------------*/
.lineup {
	background: url(img/lineup-bg.jpg) no-repeat;
	background-size: cover;
	padding: 5% 0;
}
.lineup h2 {
	width: 90%;
	margin: 0 auto;
}
.lineup-bg {
	margin-top: 5%;
	background: url(img/lineup01-bg.jpg) no-repeat;
	background-size: cover;
	background-position: top center;
    padding: 490px 30px 30px 30px;
}
.lineup-bg:nth-of-type(2) {
	background: url(img/lineup02-bg.jpg) no-repeat;
	background-size: cover;
	background-position: top center;
}
.lineup-bg:nth-of-type(3) {
	background: url(img/lineup03-bg.jpg) no-repeat;
	background-size: cover;
	background-position: top center;
}




/* YouTube
-----------------------------------------*/
.youtube-cnt {
	background: url(img/movbg.jpg) no-repeat;
	background-size: cover;
	padding-bottom: 20px;
}
.youtube {
	width: 100%;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
}
.youtube iframe {
    width: 100%;
    height: 100%;
}

/* suvpre
-----------------------------------------*/
.suvpre {
	line-height: 1;
    display: block;
}


/* 乗用車・軽自動車バナー
-----------------------------------------*/
.bnr-fl {
	display: flex;
	justify-content: space-between;
	padding: 5% 0;
}
.bnr-fl p {
	width: 48%;
	line-height: 0
}


/* aタグhover
------------------------------------------------------- */
.tohokulp a:hover img{
	opacity: 0.7;
}

/* btn
------------------------------------------------------- */
.tohokulp .news {
	width: 90%;
	max-width: 1000px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 auto;
	font-size: 18px;
	align-items: center;
	padding-top: 3%;
}
.tohokulp .news div {
	width: 49%;
}
.tohokulp .news div {
	width: 49%;
}
.tohokulp .news p.button1 a,
.tohokulp .news p.button2 a {
	box-sizing: border-box;
	padding: 15px 40px;
	border-radius: 30px;
	font-size: 20px;
	background-color: #b00a0b;
	color: #fff !important;
	text-decoration: none !important;
	display: block;
	text-align: center;
}
.tohokulp .btn-deco1 a::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 22px;
	background-image: url("img/btn-shop.png");
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 10px;
	vertical-align: middle;
}
.tohokulp .btn-deco2 a::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 14px;
	background-image: url("img/btn-sijo.png");
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 10px;
	vertical-align: middle;
}
.tohokulp .news p.button1 a,
.tohokulp .news p.button2 a{
	transition: ease all 0.3s;
}
.tohokulp .news p.button1 a:hover,
.tohokulp .news p.button2 a:hover{
	background: #D05B2B;
}

@media screen and (max-width: 896px) {
	.tohokulp {
		margin-bottom: -50px;
	}
	.tohokulp .news{
		padding: 1px 0;
		display: flex;
		flex-direction: column;
		gap: 10px 0;
		padding-top: 5%;
	}
	.tohokulp .news div{
		width: 100%;
	}
	.tohokulp .news p.button1 a,
	.tohokulp .news p.button2 a{
		font-size: 1.1em;
	}
}

@media screen and (max-width: 480px) {
	/* 各LPバナー
	-----------------------------------------*/
	.bnr-space{
		gap: 15px;
	}
	
	.bnr-space li{
		width: 90%;
	}
	
	/* read
	-----------------------------------------*/
	.read .inner {
		border-radius: 20px;
		gap: 1.5em 0;
	}
	
	/* プレゼント
	-----------------------------------------*/
	.pre .inner > p {
		font-size: 1.1rem;
	}
	.pre .syasyu h3 {
		font-size: 1.1rem;
	}
	.pre .inner .key {
		font-size: 0.8rem;
		text-align: start;
	}
	.pre .syasyu dl {
		padding: 10px;
	}
	.pre .syasyu p {
    	padding: 10px 15px;
	}
	.pre .syasyu dl div {
		flex-direction: column;
	}
	.pre .syasyu dl dt {
		width: 100%;
		border-radius: 10px 10px 0 0;
		min-height: 30px;	
	}
	.pre .syasyu dl dd {	
	    width: 100%;
	    border-radius: 0 0 10px 10px;
	    padding: 10px;
	}
	.pre .syasyu {
    	padding: 3% 0 0;
	}
	.pre .pre-logo {
		width: 30%;
	}
	.pre .pre-logo img {
	    height: 80px;
	}
	.pre .pre-itm p {
		font-size: 1rem;
		margin-top: 5px;
	}
	.pre .pre-color {
		padding: 5% 0 20px;
	}
	.pre .pre-color h3 {
		font-size: 1rem;
		padding: 10px;
	}
	.pre .pre-color .pre-color-bg {
		padding: 15px;
	}
	.pre-color-cnt h4 {
		font-size: 1rem;
	}
	.pre-color-cnt li {
	    width: 48%;
	}
	.pre-color-cnt:nth-of-type(2) {
		flex-wrap: wrap;
		gap: 10px 0;
	}
	.pre-color-cnt:nth-of-type(2) .txt {
	    width: 100%;
	}
	.pre-color-cnt:nth-of-type(2) .qr {
	    width: 100%;
	}
	.pre .set {
		padding: 20px 20px 20px;
		border-radius: 20px;
	}
	.pre .set h3 {
		font-size: 1.1rem;
		width: 100%;
		margin: -40px auto 0;
	}
	.pre .set-cnt {
		margin-top: 20px;
		flex-direction: column;
		gap: 10px 0;
	}
	.pre .set-cnt p {
		width: 100%;
	}
	.pre .inner .tyui {
		font-size: 0.8rem;
	}
	
	/* ラインアップ
	-----------------------------------------*/
	.lineup-bg {
		padding: 170px 20px 20px 20px;
	}	
	
	
	/* 乗用車・軽自動車バナー
	--------------------------------*/
	.bnr-fl {
		flex-direction: column;
		gap: 10px 0;
	}
	.bnr-fl p {
		width: 100%;
		gap: 5px 0;
	}
}




/* インスタ */
.insta {
    background-color: #fff;
    text-align: center;
    padding-bottom: 50px;
    /* margin-bottom: 7%; */
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}
.insta-list-cover {
	overflow-y: hidden;
    margin: 0 auto;
    height: 421px;
}
    .insta h2 {
	     width: 85%;
        margin: 0 auto;
	    text-align: center;
	    font-size: 2rem !important;
	    padding-bottom: 10px !important;
    }
    .insta > p {
	     width: 85%;
        margin: 0 auto;
	    text-align: center;
    }
    
    .insta-list {
        column-count: 3;
        width: 85%;
        margin: 0 auto;
        padding: 3% 0;
    }
    
    .insta-list .item-insta {
        break-inside: avoid;
        gap: 20px;
        width: 100%;
    }
    /*インスタのminwidthを強制的に変更*/
    
    iframe.instagram-media.instagram-media-rendered {
        min-width: 100% !important;
    }
    /*ボタン*/
    
    .btn2 {
        width: 60%;
        margin: 0 auto;
    }
    
    .btn2 a {
        text-decoration: none;
        display: block;
        background: #1662A3;
        border: 2px solid #1662A3;
        text-align: center;
        color: #fff;
        font-weight: 400;
        font-size: 1.1em;
        padding: 15px 0;
        transition: ease all 0.3s;
        letter-spacing: 2px;
        margin-top: 5%;
    }
    
    .btn2 a:hover {
        background: #fff;
        color: #1662A3;
    }
    
    .btn2 {
        width: 60%;
        margin: 0 auto;
        position: relative;
    }
    
    .btn2::after {
        content: '';
        border: 0;
        border-top: solid 2px #fff;
        border-right: solid 2px #fff;
        display: inline-block;
        width: 10px;
        height: 10px;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%) rotate(45deg);
    }
    
    
    .btn2:hover::after {
        border-top: solid 2px #1662A3;
        border-right: solid 2px #1662A3;
    }
    
    @media screen and (max-width: 480px) {
        /* インスタ */
        .insta {
            padding: 0 0 30px;
        }
        .insta h2 {
	        font-size: 1.5rem !important;
	        width: 100% !important;
        }
        .insta-list-cover {
            width: 90%;
            overflow-x: scroll;
            overflow-y: hidden;
            margin: 0 auto;
            height: 410px;
            margin-bottom: 5%;
        }
        .insta-list {
            column-count: 3;
            width: 900px;
            padding: 7% 0;
        }
        .btn2 {
            width: 100%;
            margin: 0 auto;
        }
    }