@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, time,
footer, header, hgroup, menu, nav, section, main {
display: block;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

img {
vertical-align: middle;
max-width: 100%;
height: auto;
}

p {
margin: 0 0 1em;
}

summary {
outline: none;
cursor: pointer;
}

/* # =================================================================
# Forms
# ================================================================= */
input {
border-radius: 0;
}

/**
* 1. Firefox 36+

* 1. Firefox 36+
*/
[type="number"] {
width: auto;
/* 1 */
}

/**
* 1. Safari 8+

* 1. Safari 8+
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
}

/**
* 1. Safari 8

* 1. Safari 8
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
/* 1 */
}

/**
* 1. Internet Explorer 11+
* 2. Specify textarea resizability

* 1. Internet Explorer 11+
* 2. textarea要素に、垂直方向のリサイズを指定。
*/
textarea {
overflow: auto;
/* 1 */
resize: vertical;
/* 2 */
}

/**
* 1. Specify font inheritance of form elements

* 1. フォーム要素に、フォントの継承を指定。
*/
button,
input,
optgroup,
select,
textarea {
font: inherit;
/* 1 */
}

/**
* 1. Restore the font weight unset by the previous rule.

* 1. 前の指定により、フォントのウェイトを再定義。
*/
optgroup {
font-weight: bold;
/* 1 */
}

/**
* 1. Address `overflow` set to `hidden` in IE 8/9/10/11

* 1. IE8/9/10/11に、overflow時にhiddenを設定。
*/
button {
overflow: visible;
/* 1 */
}

/**
* Remove inner padding and border in Firefox 4+

* Firefox4+に、内側のpaddingとborderを削除。
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: 0;
padding: 0;
}

/**
* Replace focus style removed in the border reset above

* 1. フォーカス時のスタイルを定義。
*/
button:-moz-focusring,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
outline: 1px dotted ButtonText;
}

/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4
* 2. Correct the inability to style clickable types in iOS

* 1. Android4に、ネイティブのaudio要素とvideo要素のコントロールのバグを防ぐ。
* 2. iOSに、クリッカブルなbutton要素のtypeのスタイルを修正。
*/
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2 */
}

/**
* 1. Firefox 40+, Internet Explorer 11-

* 1. Firefox 40+, Internet Explorer 11-
*/
button,
select {
text-transform: none;
/* 1 */
}

/**
* Remove the default button styling in all browsers

* すべてのブラウザにおいて、デフォルトのボタンのスタイルを削除。
*/
button,
input,
select,
textarea {
background-color: transparent;
border-style: none;
color: inherit;
}

/**
* Style select like a standard input
* 1. Firefox 36+
* 2. Chrome 41+

* 標準的なinput要素のスタイルを選択。
* 1. Firefox 36+
* 2. Chrome 41+
*/
select {
-moz-appearance: none;
/* 1*/
-webkit-appearance: none;
/* 2 */
}

/**
* 1. Internet Explorer 11+

* 1. Internet Explorer 11+
*/
select::-ms-expand {
display: none;
/* 1 */
}

/**
* 1. Internet Explorer 11+

* 1. Internet Explorer 11+
*/
select::-ms-value {
color: currentColor;
/* 1 */
}

/**
* 1. Correct `color` not being inherited in IE 8/9/10/11
* 2. Correct the color inheritance from `fieldset` elements in IE
* 3. Correct the text wrapping in Edge and IE
* 4. Correct the text wrapping in Edge and IE
* 5. Correct the text wrapping in Edge and IE

* 1. IE 8/9/10/11に、カラーの継承を定義。
* 2. IEに、fieldset要素からカラーを継承するように定義。
* 3. EdgeとIEに、テキストのラッピングを修正。
* 4. EdgeとIEに、テキストのラッピングを修正。
* 5. EdgeとIEに、テキストのラッピングを修正。
*/
legend {
border: 0;
/* 1*/
color: inherit;
/* 2 */
display: table;
/* 3 */
max-width: 100%;
/* 4 */
white-space: normal;
/* 5 */
}

/**
* 1. Correct the inability to style clickable types in iOS and Safari
* 2. Change font properties to `inherit` in Chrome and Safari

* 1. iOSとSafariに、クリッカブルなtypeのスタイルを修正。
* 2. ChromeとSafariに、フォントプロパティの継承を変更。
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}

/**
* Correct the text style of placeholders in Chrome, Edge, and Safari

* Chrome, Edge, Safariに、テキストのスタイルを修正。
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}

/**
* 1. Correct the odd appearance in Chrome and Safari
* 2. Correct the outline style in Safari

* 1. ChromeとSafariに、アピアランスを修正。
* 2. Safariに、アウトラインを修正。
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}

@media screen and (max-width: 768px) {
body {
position: relative;
}
}

a img:hover {
opacity: 1;
-webkit-animation: flash 1s;
animation: flash 1s;
}

@-webkit-keyframes flash {
0% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}

@keyframes flash {
0% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}

.wrapper {
width: 100%;
padding: 24px 0;
font-family: sans-serif;
}

@media screen and (max-width: 768px) {
.wrapper {
padding: 10px 0;
}
}

.wrapper__inner {
width: 1020px;
margin: auto;
}

@media screen and (max-width: 768px) {
.wrapper__inner {
width: 100%;
padding: 0 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}

@media screen and (min-width: 769px) {
.wrapper.bg-image {
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(https://cdn.autoc-one.jp/static/article-assets/special/3489026/image/roadway_bg.jpg);
	background-color: #f8f8f8;
}

}

@media screen and (max-width: 768px) {
	.wrapper.bg-image {
		background-position: center bottom;
		background-size: cover;
		background-repeat: no-repeat;
		background-image: url(https://cdn.autoc-one.jp/static/article-assets/special/3489026/image/roadway_bg.jpg);
		background-color: #f8f8f8;
	}
}

.header {
background-color: #222;
}

.header__inner {
width: 1020px;
margin: auto;
padding: 8px 0;
}

@media screen and (max-width: 768px) {
.header__inner {
width: 100%;
}
}

.header__inner a {
font-family: sans-serif;
font-size: 16px;
font-weight: 700;
color: #fff;
text-decoration: none;
}

@media screen and (max-width: 768px) {
.header__inner a {
text-align: center;
display: block;
}
}

.main-image {
	background: url("https://cdn.autoc-one.jp/static/article-assets/special/3489026/image/main-image.jpg") no-repeat center top;
height: 550px;
text-align: center;
}

@media screen and (max-width: 768px) {
.main-image {
	background: url("https://cdn.autoc-one.jp/static/article-assets/special/3489026/image/main-sp.jpg") no-repeat center top;
background-size: cover;
height: auto;
padding-top: 53.291%;
}
}

.is-sp {
display: none;
}

@media screen and (max-width: 768px) {
.is-sp {
display: block;
}
}

.artcile {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.artcile__heading {
font-size: 24px;
font-weight: 500;
line-height: 1;
margin: 0 0 16px;
text-align: center;
background-color: #363636;
color: #fce500;
padding: 18px;
border-radius: 100px;
}

@media screen and (max-width: 768px) {
.artcile__heading {
font-size: 16px;
line-height: 1.3;
padding: 10px;
margin: 0 0 10px;
}
}

.artcile__heading br {
display: none;
}

@media screen and (max-width: 768px) {
.artcile__heading br {
display: block;
}
}

.artcile li {
width: 31%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}

.artcile li:nth-of-type(-n+4) {
width: 100%;
margin: 0 0 32px;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}

@media screen and (max-width: 768px) {
.artcile li:nth-of-type(-n+4) {
margin: 0 0 16px;
}
}

.artcile li:nth-of-type(-n+4) .artcile__title {
font-size: 25px;
line-height: 1.3;
margin: 16px 0 0;
}

@media screen and (max-width: 768px) {
.artcile li:nth-of-type(-n+4) .artcile__title {
font-size: 18px;
}
}

.artcile li:nth-of-type(-n+4) .artcile__thumbnail {
width: 530px;
}

@media screen and (max-width: 768px) {
.artcile li:nth-of-type(-n+4) .artcile__thumbnail {
width: 100%;
}
}

.artcile li:nth-of-type(-n+4) .artcile__meta {
width: calc(100% - 530px);
position: relative;
}

@media screen and (max-width: 768px) {
.artcile li:nth-of-type(-n+4) .artcile__meta {
width: 100%;
}
}

.artcile li:nth-of-type(-n+4) .artcile__description {
font-size: 14px;
margin: 16px 0 0;
}

@media screen and (max-width: 768px) {
.artcile li:nth-of-type(-n+4) .artcile__description {
font-size: 13px;
margin: 8px 0 0;
}
}

.artcile li:nth-of-type(-n+4) .artcile__update {
position: absolute;
right: 20px;
bottom: 20px;
}

@media screen and (max-width: 768px) {
.artcile li:nth-of-type(-n+4) .artcile__update {
position: static;
}
}

.artcile li:last-child {
margin-bottom: 0;
}

.artcile__thumbnail {
width: 100%;
background-color: #FFF;
}

.artcile__thumbnail img {
width: 100%;
height: auto;
}

.artcile__meta {
background-color: #FFF;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 20px;
}

@media screen and (max-width: 768px) {
.artcile__meta {
padding: 12px;
}
}

.artcile__category {
color: #999;
font-size: 12px;
font-weight: 700;
line-height: 1.5;
}

.artcile__title {
font-size: 18px;
font-weight: 700;
line-height: 1.5;
margin: 8px 0 0;
border-left: solid 5px #27509b;
padding: 0 0 0 9px;
word-break: break-all;
}

.artcile__title a {
color: #333;
text-decoration: none;
}

.artcile__title a:hover {
text-decoration: underline;
}

.artcile__description {
color: #666;
font-size: 12px;
line-height: 1.5;
margin: 8px 0 0;
}

@media screen and (max-width: 768px) {
.artcile__description {
display: none;
}
}

.artcile__update {
color: #999;
font-size: 11px;
line-height: 1;
margin: 8px 0 0;
text-align: right;
}

@media screen and (max-width: 768px) {
.related {
margin: 16px 0 0;
}
}

.related__heading {
font-size: 24px;
font-weight: 700;
line-height: 1;
border-bottom: solid 1px #333;
padding: 0 0 16px;
margin: 0 0 16px;
}

@media screen and (max-width: 768px) {
.related__heading {
font-size: 16px;
line-height: 1.3;
}
}

.related__article {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
.related__article {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
}

.related__article li {
width: 49%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
.related__article li:not(:nth-child(-n+2)) {
margin: 24px 0 0;
}
}

@media screen and (max-width: 768px) {
.related__article li {
width: 100%;
border-bottom: 1px solid #ccc;
padding: 0 0 12px;
margin: 0 0 12px;
}
}

.related__thumbnail {
width: 180px;
height: 122px;
border: solid 1px #CCC;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

@media screen and (max-width: 768px) {
.related__thumbnail {
width: 120px;
height: auto;
border: none;
display: block;
}
}

.related__thumbnail img {
width: 180px;
height: 120px;
-o-object-fit: cover;
object-fit: cover;
}

@media screen and (max-width: 768px) {
.related__thumbnail img {
width: 120px;
height: 80px;
}
}

.related__meta {
width: calc(100% - 190px);
}

@media screen and (max-width: 768px) {
.related__meta {
width: calc(100% - 130px);
}
}

.related__title {
font-size: 16px;
font-weight: 700;
line-height: 1.3;
word-break: break-all;
}

@media screen and (max-width: 768px) {
.related__title {
font-size: 15px;
}
}

.related__title a {
color: #333;
text-decoration: none;
}

.related__title a:hover {
text-decoration: underline;
}

.related__description {
color: #666;
font-size: 12px;
line-height: 1.3;
margin: 6px 0 0;
}

@media screen and (max-width: 768px) {
.related__description {
display: none;
}
}

.related__update {
color: #999;
font-size: 11px;
line-height: 1;
margin: 6px 0 0;
}

.related__more {
outline: none;
border: none;
display: none;
width: 40%;
padding: 0;
margin: 24px auto auto;
position: relative;
color: #333;
text-decoration: none;
font-weight: 700;
}

@media screen and (max-width: 768px) {
.related__more {
width: 60%;
margin: 4px auto auto;
}
}

.related__more::before, .related__more::after {
content: "";
width: 0;
height: 2px;
position: absolute;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
background: #C00;
}

.related__more:hover::before, .related__more:hover::after {
width: 100%;
}

.related__more:hover a::before, .related__more:hover a::after {
height: 100%;
}

.related__more a {
text-align: center;
display: block;
padding: 16px;
background-color: #FFF;
border: solid 2px #DDD;
color: #333;
text-decoration: none;
-webkit-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
}

@media screen and (max-width: 768px) {
.related__more a {
padding: 12px;
}
}

.related__more a::before, .related__more a::after {
content: "";
width: 2px;
height: 0;
position: absolute;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
background: #C00;
}

/*----- button 1 -----*/
.btn-1::before, .btn-1::after {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}

.btn-1 a::before, .btn-1 a::after {
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}

.btn-1::before {
right: 0;
top: 0;
}

.btn-1::after {
left: 0;
bottom: 0;
}

.btn-1 a::before {
left: 0;
top: 0;
}

.btn-1 a::after {
right: 0;
bottom: 0;
}

.btn-1:hover::before, .btn-1:hover::after {
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}

.btn-1:hover a::before, .btn-1:hover a::after {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}

.banner__bottom {
margin: 64px 0 0;
text-align: center;
}

@media screen and (max-width: 768px) {
.banner__bottom {
margin: 32px 0 0;
}
}

.banner__bottom a {
display: inline-block;
}

.banner__bottom img {
width: 728px;
height: auto;
}

/*宿バナーここから*/
.banner__yado {
	margin: 64px 0 0;
	text-align: center;
}

.banner__yadoBG{
	background-color: #f3f3f3;
	width: 100%;
	border-bottom: solid 3px #9A824F;
}

@media screen and (max-width: 768px) {
	.banner__yado {
		margin: 0;
		margin: 32px 0 0;
	}
	.banner__yadoBG{
		padding: 0;
	}
}

.banner__yado a {
	display: inline-block;
}

.banner__yado img {
	width: 728px;
	height: auto;
}
/*宿バナーここまで*/

.share-wrap {
position: fixed;
top: 50px;
right: 20px;
width: 40px;
margin-top: 0;
margin-bottom: 0;
height: 100vh;
z-index: 100;
}

@media screen and (max-width: 768px) {
.share-wrap {
width: 100%;
margin: auto;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
top: auto;
height: auto;
background-color: #333;
-webkit-box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.1);
}
}

@media screen and (max-width: 768px) {
.share-wrap .share {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 60%;
margin: auto;
padding: 10px;
}
}

.share-wrap .share a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding: 5px;
margin-bottom: 20px;
width: 30px;
height: 30px;
color: #FFF;
border-radius: 30px;
}

@media screen and (max-width: 768px) {
.share-wrap .share a {
margin-bottom: 0;
}
}

.share-wrap .share a.facebook {
background-color: #3b5998;
}

.share-wrap .share a.twitter {
background-color: #1da1f2;
}

.share-wrap .share a.line {
background-color: #00b900;
}

.share-wrap .share a.hatebu {
background-color: #00a4de;
}

.share-wrap .share a svg {
width: 20px;
height: 20px;
fill: #FFF;
}

.footer {
width: 100%;
}

@media screen and (max-width: 768px) {
.footer {
padding: 0 0 50px;
}
}

.footer__inner {
background-color: #333;
padding: 0 0 10px;
}

.footer__logo {
padding: 15px;
}

.footer__logo img {
width: 120px;
height: auto;
display: block;
margin: auto;
}

.footer__attention {
display: block;
color: #FFF;
font-size: 11px;
text-align: center;
}

@media screen and (max-width: 768px) {
.footer__attention {
font-size: 10px;
}
}

.bottom_20{
	margin-bottom: 20px;
}

.bottom_30{
	margin-bottom: 30px;
}

.bottom_40{
	margin-bottom: 40px;
}

.coming{
	padding: 10px;
}

.coming p{
	color: #fff;
	font-weight: 600;
	font-size: 40px;
	margin: 0 auto;
	width: 360px;
}

@media screen and (min-width: 769px){
.player{
	width: 1020px;
	text-align: center;
	background-color: rgb(44 43 58 / 50%);
	padding: 20px 0;
	border-radius: 18px;
}

.movie{
	width: 800px;
	height: 450px;
}

	.coming p{
		color: #fff;
		font-weight: 600;
		font-size: 40px;
		margin: 0 auto;
		width: 360px;
	}
}

@media screen and (max-width: 768px) {
	.player{
		width: 100%;
		text-align: center;
		margin-bottom: 10px;
	}

	.movie{
		width: 100%;
		height: 240px;
	}

	.coming p{
		color: #fff;
		font-weight: 600;
		font-size: 24px;
		width: 100%;
		text-align: center;
	}
}

/*リンク一時無効化*/
a.disabled{
	pointer-events: none;
}