/*
Theme Name: 中古車販売店KEEP LINE
Text Domain: keepline-hiace
Version: 1.0
Description: 有限会社Keep Lineがプロデュースするハイエース専門中古車販売サイト用のWordPressテーマです。
Author: 株式会社LIVE
*/

/* CSS Framework */
@import url('https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css');

/* Webfonts */
@import url('https://use.fontawesome.com/releases/v5.6.1/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=M+PLUS+1p:wght@100;300;400;500;700;800;900&family=Audiowide&family=Days+One&family=Molle:ital@1&family=Spicy+Rice&display=swap');

/* mystery */
/* transition-property:font-size, height, width,top, left, color, background;
transition-duration:0.5s; */

body {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 15px;
}

.font-serif {
	font-family: 'Noto Serif JP', serif;
}

/* Header */
header{
	background:url("assets/img/demo1.jpg") no-repeat;
	background-size:cover;
	height:550px;
	position:relative;
}
.catchphrase{ height:500px;}
.catchphrase_style{
	font-family: 'M PLUS 1p', sans-serif;
	font-size:100px;
	font-weight: 900;
	line-height:1.25;
	position:absolute;
	bottom:15px;
	right:0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

@media screen and (max-width:1200px) { 
	header{ height:50vw; min-height:300px;}
	.catchphrase{ height:48vw;}
	.catchphrase_style{ font-size:70px;}
}

@media screen and (max-width:700px) { 
	.catchphrase{ height:46vw; min-height:300px;}
	.catchphrase_style{ font-size:11vw;}
}

h2{ font-size: 32px; line-height: 2.2; font-weight: bold; letter-spacing:3px;}
.wrap{ width:85%; max-width:1300px; position:relative; display:flex;}
.subtitle{ font-family: 'Spicy Rice', cursive; text-shadow: 2px 2px 0 #fff, 3px 3px 0 #3a2819; color:#3a2819; letter-spacing:3px;}
.subtext{ font-weight:bold; color:#3a2819;}
.stockbtn{ background:#3a2819; color:#fff; box-shadow: 3px 3px 0 #fff, 4px 4px 0 #3a2819;}

/* contentsBox ↓*/
.contentsBox:before{
	content:"";
	position:absolute;
	background:url(assets/img/line_x.png) repeat-x;
	width:100%; height:30px; z-index:2;
}
/* 上線 */

.contentsBox:after{
	content:"";
	position:absolute;
	background:url(assets/img/line_x.png) repeat-x;
	width:100%; height:30px; bottom:0; z-index:1;
}
/* 下線 */

.contentsBoxL{
	position:relative;
	background:url(assets/img/line_corner.png)top left no-repeat,url(assets/img/line_corner.png)bottom left no-repeat,url(assets/img/line_y.png)top left repeat-y,url(assets/img/line_x.png) bottom repeat-x; z-index:3;
}
/* 左コーナー　左線*/

.contentsBoxUL{
	position:relative;
	background:url(assets/img/line_corner.png)bottom left no-repeat,url(assets/img/line_y.png)top left repeat-y,url(assets/img/line_x.png) bottom repeat-x; z-index:4;
}
/* 左コーナー　左線*/

.contentsBoxLR{
	position:relative;
	background:url(assets/img/line_corner.png)top right no-repeat,url(assets/img/line_corner.png)top left no-repeat,url(assets/img/line_corner.png)bottom right no-repeat,url(assets/img/line_corner.png)bottom left no-repeat,url(assets/img/line_y.png)top left repeat-y,url(assets/img/line_y.png)top right repeat-y; z-index:5;
}
/* 全コーナー　左右線*/

.contentsBoxU{ margin-top:-30px;}
/* contentsBox */

.Box70{ width: 70%;}
.Box65{ width: 65%;}
.Box60{ width: 60%;}
.Box50{ width: 50%;}
.Box40{ width: 40%;}
.Box35{ width: 35%;}
.Box30{ width: 30%;}

.BoxInner50{ padding:50px;}
.BoxInner_t20lrb35{ padding: 20px 35px 35px 35px;}
.BoxInner_t20lb35{ padding: 20px 0px 35px 35px;}
.BoxInner_t0lrb35{ padding: 0 35px 35px 35px;}
.BoxInner_t20lrb35{ padding: 20px 35px 35px 35px;}
.Boxstock{ overflow: hidden; height: 140px; border-radius: 3px;}
.Boxstock img{ width: 100%; height: 100%; object-fit: cover; vertical-align: bottom;} 
.contentsImage2{ position: relative;}
.wrap1text{ color:#033022; position:absolute; z-index:1;}
.wrap1title{ font-size:1.5vw; font-weight:bold;line-height: 1.2; position:absolute;}
.wrap2text{ color:#033022; font-size:16px;}
.wrap2title{ margin-left: 15px; font-size: 20px; font-weight: bold;}
.topright{ top:8%; right:5%;}
.bottomleft{ bottom:10%; left:10%;}
.eng{ font-family: 'Days One', sans-serif; font-size:4vw; text-shadow: 2px 2px 0 #fff, 3px 3px 0 #222;}
.eng2{ font-family: 'Audiowide', cursive;  font-size:50px;}
.markeryellow{ background:linear-gradient(transparent 55%, #f1e383 55%);}
.txtoutline{ text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;}
.wrapbtn{ width:100%; border:1px solid #333; box-shadow: 2px 2px 0 #fff, 3px 3px 0 #222; background:url(assets/img/arrow.png) 15px no-repeat; padding:7px 10px 7px 40px;}
.wraplist li{ line-height: 26px;}
.wraptitle{ display:inline-block; background:#333; color:#fff;}


.yellowwrap{ width:100%; color:#464220;}
.yellowwrap:before{
	content:"";
	display:block;
	background:url(assets/img/line_yellow_top.png) repeat-x;
	height:22px;
}
.yellowwrap:after{
	content:"";
	display:block;
	background:url(assets/img/line_yellow_bottom.png) repeat-x;
	height:12px;
}
.yellowInner{
	background:linear-gradient(#efcc52, #f0de9f);

}
.greenwrap{ width:100%; color:#aceccf;}
.greenwrap:before{
	content:"";
	display:block;
	background:url(assets/img/line_green_top.png) repeat-x;
	height:22px;
}
.greenwrap:after{
	content:"";
	display:block;
	background:url(assets/img/line_green_bottom.png) repeat-x;
	height:12px;
}
.greenInner{ background:linear-gradient(#64d09f, #aceccf);}
.checkwrap{ width:100%; margin-top:20px; position:relative; z-index:auto;}
.checkwrap:before{
	content:"";
	display:block;
	background:url(assets/img/line_white_tb.png) repeat-x;
	height:24px;
	z-index:1;
	position:relative;
	bottom:-8px;
}
.checkInner{ background:url(assets/img/check.jpg) repeat; padding-top: 2.5rem; padding-bottom: 3.5rem;}
.brownwrap{ width:100%; background:#aa8f61; color:#fff;}
.brownwrap:before{
	content:"";
	display:block;
	background:url(assets/img/line_brown_top.png) repeat-x;
	height:22px;
	z-index:1;
	position:relative;
	bottom:16px;
}
.brownwrap:after{
	content:"";
	display:block;
	background:url(assets/img/line_brown_bottom.png) repeat-x;
	height:12px;
	position: relative;
	bottom: -12px;
}
.brownInner h2{ font-size:20px;}
.decoBox{ display:flex; color:#4ab584;}
.decoBox img{ width:200px; margin: 0 auto;}
.decoBox li{ width:33%; background:#fff; border-radius:10px; margin-left:30px; padding-top:20px; padding-bottom:20px;}
.decoBox li:first-child{ margin:0;}

.shopimg{ position:absolute; top:-5px; left:0; width:50%; height:265px; z-index:-1;}
.shopimg img{ width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;}
.intwrap { width: 85%; max-width: 1300px;}
.introductionImg{
	overflow: hidden;
	height: 250px;
	margin-bottom: 2.4rem;
	border: 8px solid #ffffff;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.columnleft{ padding-top:285px;}
.columnleft h3{ color:#4ab584;}
.introductionText{
	position: relative;
	background: #aceccf;
	padding-top:20px;
	padding-bottom:30px;
}
.introductionText:before {
	content: "";
	position: absolute;
	top: -7px;
	left: -7px;
	width: 100%;
	height: 100%;
	border-top: 3px solid #333;
	border-bottom: 3px solid #333;
}
.columnright{ padding-left:30px;}
.movie{ position: relative;
		height: 300px;
		padding:30px;
		background: url(assets/img/line_corner.png)top right no-repeat,url(assets/img/line_corner.png)top left no-repeat,url(assets/img/line_corner.png)bottom right no-repeat,url(assets/img/line_corner.png)bottom left no-repeat,url(assets/img/line_y.png)top left repeat-y,url(assets/img/line_y.png)top right repeat-y,url(assets/img/line_x.png)top right repeat-x,url(assets/img/line_x.png)bottom right repeat-x;
}
.movie iframe{ width:100%; height:100%;}
.decoimg{ position:absolute; right:-30px; width:50%; height:280px; z-index:-1;}
.decoimg img{ width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;}
.flowtitle{ font-family: 'Spicy Rice', cursive; text-shadow: 3px 3px 0 #3a2819, 5px 5px 0 #f0de9f; color:#f0de9f; letter-spacing:5px;}
.flowsubtitle{ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); letter-spacing:2px; color:#fff;}
.flowtext{ color:#d2bb57; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); letter-spacing:2px;}
.step{ font-family: 'Audiowide', cursive;}
.thankswrap{ background:url(assets/img/whitebg.gif);}
.thanksInner{ padding-top: 1rem; padding-bottom: 2.5rem;}
.thanksBox{ color:#553a0b; background:#fff; border-radius: 10px; letter-spacing: -.4em;}
.thanksBox img{ object-fit: cover; width:100%; height:100%;}
.thanksBox li{ letter-spacing: normal; display:inline-block; width:25%; background:#fff; border-radius:10px; padding:1rem 0; position:relative;}
.thanksBox li:first-child{ margin:0;}
.thanksBox li p{ width:230px; margin:0 auto;}
.thanksimg{ width:90%; display: flex;	overflow: hidden; justify-content: center; align-items: center;	height: 150px; margin:auto; border-radius: 1rem;}
.thankstitle{ font-family: 'Spicy Rice', cursive; text-shadow: 3px 3px 0 #ffffff, 5px 5px 0 #3a2819; color:#3a2819; letter-spacing:5px;}
.thankssubtitle{ letter-spacing:2px; color:#3a2819; text-shadow: 2px 2px 0 #fff;}
.thanksuser{ width:150px; color: #3a2819; background: #fff; padding:10px; border-top: solid 15px #3a2819; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4); position:absolute; bottom:25px; right:5px;}
.undercomment{ position:relative; top:-10px;}
.contactwrap{ padding: 6px 20px; font-size: 1rem; font-weight: bold; background: rgba(255,255,255,0.7); box-shadow: 0px 0px 0px 5px rgba(255,255,255,0.7); border: dashed 2px #efcc52;}
.buywrap{ background-image:url(assets/img/buycar.png); background-size:cover; position:relative; top:-12px;}
.buywrap:before{ content:''; position:absolute; background-color:rgba(0,0,0,0.5); top:0; right:0; bottom:0; left:0;}
.buyInner{ padding-top: 4rem; padding-bottom: 2rem; font-size:20px; color:#fff; letter-spacing:5px;}
.buywrap:after{	content:"";	display:block; background:url(assets/img/line_white_bottom.png) repeat-x;	height:12px; position: relative; bottom: 0;}
.assessmentbtn{ border:1px solid #fff; font-size:20px; padding:5px 20px; position:relative;}

@media screen and (max-width:1199px) {
.spBoxl{ width:55%;}
.spBoxr{ width:45%;}
.spBoxInner{ padding: 60px 30px;}
.sp{ max-height:100%;}
.rightmintitle{line-height: 1.3rem;}
.rightmintext{line-height: 1.2rem; font-size: 11px;}
.wrapbtn{ font-size:11px;}
}

@media screen and (max-width:899px) {
h2{ font-size:4vw; letter-spacing:normal;}
.mainWrap{ position:relative; top:-15px;}
.wrap{ display:block;}
.subcenter{ margin:auto;}
.contentsBox{ display:block;}
.contentsBoxL {
	background: url(./img/line_corner.png)top left no-repeat,url(./img/line_corner.png)bottom left no-repeat,url(./img/line_corner.png)top right no-repeat,url(./img/line_corner.png)bottom right no-repeat,url(./img/line_y.png)top left repeat-y,url(./img/line_y.png)top right repeat-y,url(./img/line_x.png)bottom right repeat-x;
 }
.contentsBoxL2 {
	background: url(./img/line_corner.png)bottom left no-repeat,url(./img/line_corner.png)bottom right no-repeat,url(./img/line_y.png)top left repeat-y,url(./img/line_y.png)top right repeat-y,url(./img/line_x.png)bottom right repeat-x;
 }
.contentsBoxLR {
	background:url(./img/line_corner.png)bottom right no-repeat,url(./img/line_corner.png)bottom left no-repeat,url(./img/line_y.png)top left repeat-y,url(./img/line_y.png)top right repeat-y,url(./img/line_x.png)bottom right repeat-x; width:100%;
}
.contentsBoxUL{
	background: url(./img/line_corner.png)bottom left no-repeat,url(./img/line_corner.png)bottom right no-repeat,url(./img/line_y.png)top left repeat-y,url(./img/line_y.png)top right repeat-y,url(./img/line_x.png) bottom repeat-x; z-index: 4; width:100%;
}
.spBoxl,.spBoxr,.Box65,.Box50{ width:100%;}
.BoxInner_t20lb35 { padding: 20px 30px 40px;}

/* NAV */
/*　-----------HeaderNavi---------　*/
#headNavWrap{
		max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
}
.headNav01{ padding-top: 12px;}
.headNav01 img{ width:200px;}
#headNav{
	width: 100%;
	letter-spacing: -.40em;
	margin-left:50px;
}
#headNav li{
	display: inline-block;
	letter-spacing: normal;
	font-weight: bold;
	font-size:16px;
}
#headNav li a{
	text-decoration:none;
}
#headNav li a:hover{
	color:rgba(249,5,62,1);
}
#headNav li i {
	display: block;
	font-size:2rem;
}
.headNavLink{
	box-sizing: border-box;
	display: block;
	padding-top: 5px;
	padding-left: 20px;
	padding-right: 50px;
	margin-top: 10px;
	border-left: 6px dotted #333;
	line-height: 32px;
}
/*　-----------上へボタン---------　*/
#page_top{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 15px;
	bottom: 15px;
	background: #ef3f98;
	opacity: 0.6;
	border-radius: 50%;
	display:none;
}
#page_top a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
}
#page_top a::before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f106';
	font-size: 25px;
	color: #000;
	position: absolute;
	width: 25px;
	height: 25px;
	top: -10px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}
@media screen and (min-width:900px){
	/*　900px以上 */
.headNav11{ display:none !important;}
#close{ display:none !important;}
#sideNavWrap{ display:none !important;}
}

@media screen and (max-width:899px) { 
	/*　899pxまで*/
/*　-----------Modal---------　*/
#overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  z-index: 1
}
#modalWindow {
	width: 100%;
	height:560px;
	position: fixed;
	display: none;
	top:50px;
	overflow: hidden;
	z-index: 2
}
#close {
  width: 95%;
  height: 50px;
  margin:0 auto;
  font-size: 14px;
  color: #333;
  background: linear-gradient(#ccc, #a1a1a1);
  border: solid 1px #333;
  border-radius: 5px;
  display:block;
}
.navBtn{ position:absolute;
		top: 5px;
		right: 5px;
		background: #fff;
		border-radius: 5px;
		font-size: 10px;
		text-align: center;
		padding: 5px;
}
#headNav li{ position: absolute;
			top: 0;
			right: 0;
}
#headNav li a:hover{ color:#333;}
.headNav01{ display:none !important;}
.headNav02{ display:none !important;}
.headNav03{ display:none !important;}
.headNav04{ display:none !important;}
.headNav05{ display:none !important;}
.headNav06{ display:none !important;}
.headNav07{ display:none !important;}
.headNav08{ display:none !important;}
#headNav{ padding:0;}
.headNavLink{ padding:5px; border:none; margin:0;}
}
/*　-----------SideNavi---------　*/
#sideNavWrap{
	width:25%;
	padding-top:15px;
	display:inline-block;
	letter-spacing: normal;
}
.sideNavImg{ max-width:250px;}
.sideNavImg ul{	list-style:none;}
.sideImgItem img{ width:100%;}
#sideMenuWrap{ max-width:250px;}
.sideMenuIn{ list-style:none;}
.sideMenuItem{
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom:1px dotted #000;
}
.sideMenuItem a{
	display:block;
	padding:6px;
	color:#666;
}
.sideMenuItem a:hover{
	width:100%;
	text-decoration:none;
	background:rgba(255,235,247,1);
}
.sideMenuItem i{
	color:#333;
	margin-right:8px;
}
/*　-----------Modal---------　*/
#overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  z-index: 1
}
#modalWindow {
	width: 100%;
	height:560px;
	position: fixed;
	display: none;
	top:50px;
	overflow: hidden;
	z-index: 2
}
#close {
  width: 95%;
  height: 50px;
  margin:0 auto;
  font-size: 14px;
  color: #333;
  background: linear-gradient(#ccc, #a1a1a1);
  border: solid 1px #333;
  border-radius: 5px;
  display:block;
}
/*　-----------SideNavi---------　*/
#sideNavWrap{
	background: #000;
	width: 100%;
	margin: 0 auto;
	padding-top:0;
}
#sideMenuWrap {
	width: 95%;
	max-width: initial;
	margin: 0 auto;
}
.sideMenuIn{
	letter-spacing: -.40em;
	padding-left:0;
}
.sideNavImg{
	width: 95%;
	max-width: initial;
	margin: 0 auto;
}
.sideNavImg ul{
	padding-left:0;
	margin-bottom:0;
}
.sideNavImg ul li{
	max-width:200px;
}
.sideMenuItem{
	width:50%;
	display: inline-block;
	padding:3px 0;
	border-left:1px dotted #9c9b9b;
	background:#fff;
	letter-spacing: normal;
}
.sideMenuItem i{ font-size: 14px;}
button i{
	margin-right:5px;
	font-size: 14px;
}
}

// Pagination
span.page-numbers, a.page-numbers {
	margin:auto 1em;
}

a.page-numbers {
	text-decoration: underline;
}

.text-primary {
	color: #F0B73F;
}

.bg-primary {
	background-color: #F0B73F;
}