@charset "UTF-8";

#breadcrumb {
    margin-bottom: 10px;
}
/*--------------------
メインコンテンツ
--------------------*/
#blog {
background-size: auto auto;
background-color: rgb(240, 240, 240);
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 25px,
      rgba(0, 0, 0, 0.1) 26px,  rgba(0, 0, 0, 0.1) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.1) 52px,  rgba(0, 0, 0, 0.1) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.1) 78px,  rgba(0, 0, 0, 0.1) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.1) 104px,  rgba(0, 0, 0, 0.1) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.1) 130px,  rgba(0, 0, 0, 0.1) 130px),

    repeating-linear-gradient(to right,
      transparent 25px,
      rgba(0, 0, 0, 0.1) 26px,  rgba(0, 0, 0, 0.1) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.1) 52px,  rgba(0, 0, 0, 0.1) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.1) 78px,  rgba(0, 0, 0, 0.1) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.1) 104px,  rgba(0, 0, 0, 0.1) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.1) 130px,  rgba(0, 0, 0, 0.1) 130px);
font-family: 'M PLUS 1p', sans-serif;
    padding-top:30px;
}


#blog #blogHeader {
    padding: 20px 0 0 0;
    display: block;
}
#blog #blogHeader img {
    width: 100%;
}
#progDetail {
    margin: 10px auto;
    padding: 10px;
    color: #666666;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
    flex-direction: column;
}
#blog #blogHeader #progDetail a.btn {
    max-width: 500px;
    margin-top: 5px;
}
#blog > .container {
}
#blog > .container:last-of-type {
    padding-bottom: 50px;
}
#blog .column01 {
    margin-bottom: 40px;
}
#blog .column02 {
	width: 96%;
	margin: 0 auto 30px auto;
}
#blog .column02 > section {
	margin-bottom: 35px;
}

/*--------------------
メインコンテンツ：記事レイアウト
--------------------*/

.block p img {
	width:100%;
 object-fit: contain;
}

.cpimg {
    width: 100%;
    margin: 15px auto;
    object-fit: contain;
}

article {
    position: relative;
    width: 90%;
    margin: 0 auto;
    padding: 10px 10px 40px 10px;
background-color: rgb(255, 255, 255,0.9);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
article .entryHeader{
    margin-bottom: 30px;
    padding: 15px 10px;
    position: relative;
}
article:after,
article .entryHeader:after {
    content: "";
    width: 100%;
    height: 2px;
    left: 0;
    display: block;
    background-size: 10px 100%;
    position: absolute;
}
article .entryHeader:before {
    top: 0;
}
article:after,
article .entryHeader:after {
    bottom: 0;
}
article .entryHeader h1.entryTtl {
	font-size: 21px;
	color: #666666;
	font-weight: bold;
}
article .entryHeader .entryMeta {
	font-size: 13px;
	color: #888;
}
article .entryHeader .entryMeta > div {
    margin-top: 5px;
}
article .entryHeader .entryMeta > div > svg {
	margin-right: .3em;
}

.col {
	margin:40px auto 5px auto;
	text-align:center;
}

.col img{
    width: 90%;
	object-fit: contain;
}

.cols {
display: flex;
flex-wrap: wrap;
padding: 0;
}

.cols.cols_2>.col {
 width: 100%;
 margin: 0 auto;
	}


/*------ ボタン ------*/

#blog .btn {
    width: 100%;
    margin: 0 auto 20px auto;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 3px;
    position: relative;
    display: table;
    box-sizing: border-box;
    color: #666;
    border: solid 2px #666;
    background: rgba(255, 255, 255, 0.4);
    text-align: center;
    text-decoration: none;
    transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    text-shadow: none;
    padding: 3% 0;
}
#blog .btn:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    display: block;
    content: '';
    background: #666;
    z-index: -1;
    transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#blog .btn.prev:before {
    right: 0;
	left: auto;
}
#blog .btn:hover:before,
#blog .btn:active:before {
    width: 100%;
}
#blog .btn span {
    position: relative;
    display: block;
    padding: 12px;
}
#blog .btn:hover {
    color: #666;
}

/*--- タグ ---*/

article .entryHeader .tag{
    padding-left: 1.3em;
    text-indent: -1.3em;
}
article .entryHeader .tag > *{
	display: inline;
}
article .entryHeader .tag li{
	display: inline-block;
	text-indent: initial;
}
article .entryHeader .tag li:after{
	content:" , ";
}
article .entryHeader .tag li:last-of-type:after{
	content: "";
}
article .entryHeader .tag a {
	color: inherit;
	transition: .3s;
}
article .entryHeader .tag a:hover {
	opacity: .8;
}

/*--- シェアボタン ---*/

article .entryHeader .share {
    display: flex;
    align-items: center;
}
article .entryHeader .share .shareTtl {
	margin-right: 0.3em;
	min-width: 4.5em;
}
article .entryHeader .share .shareTtl span.pc {
	display:none;
}
article .entryHeader .share .shareTtl svg {
	margin-right: 0.3em;
}
article .entryHeader .share ul {
    display: flex;
    justify-content: center;
    width: 100%;
}
article .entryHeader .share li {
    margin-right: 3px;
    width: 100%;
}
article .entryHeader .share li:last-of-type {
    margin-right: 0;
}
article .entryHeader .share a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 18px;
    padding: 6px 5px;
    border-radius: 5px;
    background: #ccc;
    color: #fff;
    transition: all 300ms ease-out;
}
article .entryHeader .share svg {
    transition: all 300ms ease-out;
}
article .entryHeader .share a:hover {
	opacity: .9;
}
article .entryHeader .share a:hover svg {
	transform:scale(1.1);
}
article .entryHeader .share a.facebook {
    background: #1877f2;
}
article .entryHeader .share a.twitter {
    background: #1DA1F2;
}
article .entryHeader .share a.line {
    background: #00b900;
}
article .entryHeader span.deco,
article .entryHeader span.deco:before,
article .entryHeader span.deco:after {
    position: absolute;
    width: 20px;
    height: 2px;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #aaa;
    border-radius: 3px;
}
article .entryHeader span.deco:before,
article .entryHeader span.deco:after {
    content: "";
}
article .entryHeader span.deco {
    transform: rotate(90deg);
    top: -30px;
}
article .entryHeader span.deco:before {
    transform: translate(10px, -50px) rotate(38deg);
}
article .entryHeader span.deco:after {
    transform: translate(10px, 50px) rotate(-38deg);
}
article .entryHeader span.deco span:before,
article .entryHeader span.deco span:after {
    position: absolute;
    width: 15px;
    height: 2px;
    top: 0px;
    left: 0;
    right: 0;
    margin: auto;
    background: linear-gradient(to right, #aaa 25%,transparent 25%) repeat-x;
    background-size: 6px 100%;
    content: "";
    border-radius: 2px;
}
article .entryHeader span.deco span:before {
    transform: translate(4px, -25px) rotate(15deg);
}
article .entryHeader span.deco span:after {
    transform: translate(4px, 25px) rotate(-15deg);
}
article .entryContent {
    font-size: 14px;
    line-height: 1.6;
}



article .entryContent .block {
    margin: 1em auto;
}


article .entryContent .block:last-of-type {
    margin: 0 auto;
}



#blog h2 {
	font-size: 18px;
	color: #333333;
	font-weight: bold;
  position: relative;
  padding: 1rem .5rem;
    margin-top:30px;
}

#blog h2:before,
#blog h2:after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  content: '';
  background-image: -webkit-gradient(linear, right top, left top, from(#30cfd0), to(#330867));
  background-image: -webkit-linear-gradient(right, #30cfd0 0%, #330867 100%);
  background-image: linear-gradient(to left, #30cfd0 0%, #330867 100%);
}

#blog h2:before {
  top: 0;
}

#blog h2:after {
  bottom: 0;
}


article .entryContent figure {
    max-width: 600px;
    width: 90%;
    margin: 0 auto 1.5em auto;
    position: relative;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}
article .entryContent figure.fl {
}
article .entryContent figure.fr {
}
article .entryContent figure img {
    width: 100%;
}
article .entryContent figure figcaption {
    background: rgba(255, 255, 255, .9);
    padding: 5px 10px;
    font-size: 13px;
    display: flex;
    justify-content: center;
}
article .entryContent .btn {
    max-width: 500px;
}

/*------ ページング ------*/

.pagination {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-top: 20px;
}
.pagination li {
    width: 48%;
}
.pagination a {
    display: flex;
    align-items: center;
    transition: .3s;
}
.pagination a:hover {
	opacity: .8;
}
.pagination .prev a {
	justify-content: flex-start;
}
.pagination .next a {
	justify-content: flex-end;
}
.pagination .prev svg {
    margin-right: 0.5em;
}
.pagination .next svg {
    margin-left: 0.5em;
}
.pagination svg {
    opacity: .8;
}
.pagination .disabled {
    visibility: hidden;
}

/*--------------------
公式Twitter・SNS
--------------------*/


.snsCont {
    display: flex;
    margin-top: 10px;
flex-wrap: wrap;
}
.snsCont li {
    width: 33%;
    display: block;
    text-align: center;
}

.float-l li{
    width: 40%;
    margin-right: 3%;
}
.snsCont li p {
    font-size: 0.3em;
    /* margin-top: -5px; */
}

.snsCont li a {
    color: #fff;
    display: block;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    padding: 0.15em 0;
    transition: all 300ms ease-out;
}
.snsCont li a svg {
    transition: all 300ms ease-out;
}
.snsCont li a:hover {
	opacity:.9;
}
.snsCont li a:hover svg {
	transform:scale(1.1);
}
.snsCont li a:hover {
}
.snsCont li a.site {
    background: #2f4f4f;
}

.snsCont li a.cars {
    background: #ff6010;
}
.snsCont li a.facebook {
    background: #1877f2;
}
.snsCont li a.twitter {
    background: #1DA1F2;
    background: #000;
    height: 100%;
    box-sizing: border-box;
}
.snsCont li a.line {
    background: #00b900;
}
.snsCont li a.instagram {
    background: #D93177;
    background:
		radial-gradient(circle farthest-corner at 32% 106%,
		rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%),
		linear-gradient(135deg, rgb(35, 75, 215) 12%,rgb(195, 60, 190) 58%);
}

.snsCont li a.youtube {
    background: #c4302b;
}

/*--------------------
サイド
--------------------*/

.column02 h3.ttl {
    color: #97675a;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.column02 h3.ttl:before,
.column02 h3.ttl:after {
    content: "";
    width: 20%;
    height: 2px;
    display: block;
    background: linear-gradient(to left, #97675a 25%,transparent 25%) repeat-x;
    background-size: 10px 100%;
}
.column02 a {
	transition: .3s;
}
.column02 a:hover {
	opacity: .8;
}

/*------ ナビ ------*/

#progNav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    margin-bottom: 15px;
    width: 100%;
    overflow-x: auto;
    -ms-overflow-style: none;
}
#progNav ul {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}
#progNav li {
    width: 100%;
    margin-right: 1vw;
}
#progNav li:last-child {
	margin-right: 0;
}
#progNav li span {
	text-align: center;
	padding: 2vh 0;
	min-height: 50px;
	background: #fffcf8;
	border: 1px solid #FFBD7A;
	border-bottom: none;
	border-radius: 5px 5px 0 0;
	transform: translateY(2px);
	color: #FFBD7A;
	font-size: 3.4vw;
	font-weight: bold;
	line-height: 1.3;
	transition: .3s;
	position: relative;
	opacity: .8;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media screen and (max-width: 320px){
#progNav li span {
	font-size: 3.8vw;
}
}
#progNav li.current span {
    transform: translateY(0);
    background: #FFF !important;
    opacity: 1;
    z-index: 1;
}
#progNav li:last-child span {
	margin-right: 0;
}
#progNav .current:before {
	 content: "";
	 display: block;
	 width: 100%;
	 height: 1px;
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 background: #FFBD7A;
	 z-index: 1;
}

#progNav01.progNav li span {
	color: #f9bb7c;
	background: #fffcf8;
	border-color: #f9bb7c;
}
#progNav01.progNav li:before{
    background: #f9bb7c;
}

/*------ 最新記事 ------*/

#newArticleWrap h3.ttl {
	padding-top: 25px;
}
#newArticleWrap h3.ttl span.deco {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 80%;
}
#newArticleWrap h3.ttl span.deco {
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	font-size: 65%;
}
#newArticleWrap h3.ttl span.deco:before,
#newArticleWrap h3.ttl span.deco:after {
	content: "";
	width: 2px;
	height: 15px;
	background: #aaa;
	border-radius: 3px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
}
#newArticleWrap h3.ttl span.deco:before {
	transform: translate(-35px, 2px) rotate(-25deg);
}
#newArticleWrap h3.ttl span.deco:after {
    transform: translate(35px, 2px) rotate(25deg);
}
#newArticleWrap li{
	border-bottom: 1px solid #eee;
	padding: 10px 0;
}
#newArticleWrap a {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 96%;
    margin: 0 auto;
}
#newArticleWrap .entryTtl {
    width: 100%;
	font-size: 15px;
    margin-bottom: 6px;
	padding-left: 1.2em;
    text-indent: -1.2em;
}
#newArticleWrap .entryTtl svg {
    font-size: 80%;
    margin-right: 1em;
    transition: .3s;
    opacity: .7;
}
#newArticleWrap figure {
    margin: 0;
    width: 25%;
    overflow: hidden;
    position: relative;
    padding-top: 25%;
    background: rgba(0, 0, 0, .03);
    border: 1px solid rgba(0, 0, 0, .01);
    margin-right: 2%;
}
#newArticleWrap figure img{
    /* width: 100%; */
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 500ms ease-out;
}
#newArticleWrap figure + p{
	width: 72%;
	font-size: 14px;
	line-height: 1.4;
}

/*------ 月別アーカイブ・カテゴリー ------*/

#archiveWrap ul,
#tagWrap ul {
	font-size: 15px;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	justify-content: space-between;
}

#archiveWrap ul {
	padding-left: 2.3em;
	margin-bottom: 15px;
}
#archiveWrap ul li {
    width: 50%;
    margin: 5px 0;
}

#archiveWrap ul a {
    display: block;
    padding: 5px 0;
}
#archiveWrap .year {
    cursor: pointer;
    font-size: 15px;
    width: 100%;
    margin-bottom: 8px;
    border: 1px solid #eee;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 8px 15px;
}
#archiveWrap .year.open svg {
    transform: rotate(90deg);
}
#archiveWrap .year svg {
    font-size: 80%;
    margin-right: 0.8em;
    transition: .3s;
    opacity: .7;
}

#tagWrap ul li {
    min-width: 49%;
    margin: 5px 0;
}

#tagWrap ul a {
    display: block;
    border: 1px solid #eee;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 8px;
    padding-left: 2em;
    text-indent: -1.3em;
}
#tagWrap svg {
    font-size: 80%;
    margin-right: 0.5em;
    opacity: .7;
}






article.archive li{
	border-bottom: 1px solid #eee;
}
article.archive a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px 0;
}
article.archive .date {
    width: 25%;
}
article.archive .entryTtl {
    width: 75%;
    font-size: 15px;
}

/*------ 追記 ------*/
article .entryContent .block_small{
    margin: 2em 2em 0;
}
article .entryContent .flex{
    display: flex;
    flex-wrap: wrap;
}
article .entryContent .flex .caster_img{
    width: 70%;
    margin: 0 auto 1em;
}
article .entryContent .flex .caster_img img{
    width: 100%;
}
article .entryContent .flex .caster_info{
    width: 100%;
}
article .entryContent .flex .caster_info span{
    font-size: 16px;
    margin-right: 1em;
}
article .entryContent .block h5{
    font-size: 21px;
    /* text-align: center; */
}
.block .flex .img_con{
    width: 94%;
    margin: 0 1% 2% 3%;
}
.block .flex .img_con img{
    width: 100%;
}
article .entryContent h3 {
	font-size: 25px;
	color: #fff;
	font-weight: bold;
	padding: 6px 10px;
	margin:0 auto 20px;
	position: relative;
	background: #97675a;
}
.block table{
	margin: 2% auto;
	width: 95%;
}
.block table tr{
  border: 0px none;
  }

.block table th{
  border: 0px none;
	padding: 10px;
	display: block;
	background: #ffeab1;
	border-radius: 100px 25px 100px 25px / 50px 25px 50px 25px;
}
.block table td{
	padding: 10px;
	/* width: 75%; */
	display: block;
}
#blog .flex .btn{
	display: block;
	border: 3px solid #666;
	width: 98%;
	margin: 2% auto;
	padding: 1%;
	text-align: center;
	font-size: 17px;
	color: #666;
	font-weight: bold;
	position: relative;
	z-index: 1;
}
#blog .flex .btn:hover{
	color: #fff!important;
}
article p{
	width: 97%;
	/* margin: 0 auto 2%; */
}
article p.strong{
	font-size: 18px;
}

.honbun{
    text-align: left;
}

.movie{
	display: block;
    padding-top: 56.25%; 
    width: 100%;
    height: auto;
	margin: 10px auto 20px auto;
    position: relative;
}

.movie iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

.movie .movieCon iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    -moz-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
    -webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
    transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}


.mob{
    display: none;
}

.dealer{
    background-color: #ddd;
	padding: 10px;
	margin: 30px auto 10px auto;
    box-sizing: border-box;
	width: 94%;
}
.shop{
	width: 96%;
	font-size: 16px;
	font-weight: bold;
	justify-content: center;
	text-align: center;
	align-items: center;
}
.tel{
    display: block;
	width: 96%;
	font-size: 18px;
	text-align: center;
    font-weight: normal;
}


.mapFrame{
	width: 100%;
	margin: 5% 0;
    display: block;
}

.mapFrame .map img{
	width: 100%;
	float: left;
	margin-bottom: 5px;
}

.mapFrame .map iframe{
	width: 100%;
}