/*--------------------------------------------------------------------------
汎用
--------------------------------------------------------------------------*/
body {padding: 68px 0 57px;}

/*sp限定*/
.pc {display: none!important;}

/*コンティナ*/
.container {padding: 0 15px;}

/*パンくず*/
.breadcrumbs {padding: 5px 15px;}
.breadcrumbs ul {width: 100%; overflow-x: scroll;}

/*1カラム*/
.no-column {margin: 40px auto 80px;}

/*2カラム*/
.col_box {display: block;}
.col_box #main {width: 100%; margin: 20px 0;}

/*固定*/
#fix-contact a {padding: 12px 0;}
#fix-contact a span {font-size: 1.2rem; margin-left: 8px;}
#fix-contact a.tel img {height: 23px;}
#fix-contact a.net img {height: 25px;}

/*ページ内スクロール*/
#scroll {position: fixed; right: 15px; bottom: 74px;width: 48px; height: 48px;}

/*reCAPCHER v3*/
.grecaptcha-badge {bottom: 80px !important; z-index: 100;}

/* ローディング画面の背景 */
#loading .animation img {width: 150px; height: auto;}

/*--------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------*/
header {position: fixed; top: 0; left: 0; width: 100%; padding: 8px 0; z-index: 1001;}

header .logo img {width: 80px;}
header .logo span {font-size: 1.2rem; font-weight: 900; margin-left: 12px;}

header .g-navi {position: fixed; top: 68px; left: 0; width: 100%; max-height: calc(100vh - 92px); background: #e40012; transform: scale(1,0); transform-origin: top; transition: .5s ease; z-index: 1001;}
header .g-navi ul {display: block; border-top: 1px solid #fff;}
header .g-navi ul li {color: #fff; font-size: 1.15rem; padding: 14px 16px; border-bottom: 1px solid #fff;}
header .g-navi .link {display: flex; align-items: center; padding: 14px 16px;}
header .g-navi .link i {font-size: 2rem; margin-right: 8px;}

header #nav-toggle {display: block; position: relative; width: 30px; height: 32px; padding: 10px; z-index: 1001; transition: .3s ease;}
header #nav-toggle div {position: relative; display: block; width: 30px; height: 2px; background: #fff; transition: .3s ease;}
header #nav-toggle div:nth-child(1) {top: 6px;}
header #nav-toggle div:nth-child(2) {top: 12px; opacity: 1;}
header #nav-toggle div:nth-child(3) {top: 18px;}
header #nav-toggle span {position: relative; top: 18px; width: 36px; display: block; color: #666; font-size: .6rem; font-weight: 700; text-align: center;}

.open header #nav-toggle div:nth-child(1) {transform: rotate(45deg); top: 15px;}
.open header #nav-toggle div:nth-child(2) {opacity: 0;}
.open header #nav-toggle div:nth-child(3) {transform: rotate(-45deg); top: 11px;}

.open header .g-navi {transform: scale(1,1);}

header.monthly {padding: 14px 0; border-bottom-width: 4px;}
header.monthly .logo {margin: 0 auto;}
header.monthly .logo img {width: 275px; margin: 0 auto;}
header.monthly .tel,
header.monthly .reserve {display: none;}

/*--------------------------------------------------------------------------
フッター
--------------------------------------------------------------------------*/
footer {padding: 10px 0;}
footer .container {display: block; margin-bottom: 20px; text-align: center;}
footer .logo {display: block; margin: 30px 0; text-align: center;}
footer .logo img {width: 280px; margin: 0 auto 5px;}
footer .logo span {color: #e40012; font-size: 1.5rem; font-weight: 900;}
footer dl {display: inline-flex; justify-content: center;}
footer dl dt {margin-right: .5rem;}
footer .sns-share {margin: 30px 0;}

/*--------------------------------------------------------------------------
サイドバー
--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
記事一覧
--------------------------------------------------------------------------*/
.post-sec {margin: 0 0 40px;}

.post-list {display: block;}
.post-list .entry {width: 100%; margin-bottom: 20px;}
.post-list .entry:nth-child(odd) {margin-right: 0;}

.post-list .entry .img {height: 240px;}

.post-list .entry h3 {margin: 8px 15px;}

.post-list .entry .state {margin: 0 15px;}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
フロントページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
#front .top-slider {width: 100%; height: 45vw;}
#front .top-slider #top-slider,
#front .top-slider #top-slider li {width: 100%; height: 45vw;}

/*ABOUT*/
#front .about {background: url(../img/front/about-back_sp.jpg) center 100%/100% auto no-repeat;}
#front .about .inner {padding: 60px 0 200px;}
#front .about .g-h {margin-bottom: 20px;}
#front .about h2 {text-align: center;}
#front .about p {font-size: 1rem;}

/*比較*/
#front .hikaku {padding: 60px 0;}
#front .hikaku h2.lowprice {display: block; text-align: center;}
#front .hikaku h2.lowprice img {width: 200px; margin: 0 auto 20px;}
#front .hikaku h2.lowprice span {display: inline-block; font-size: 2.125rem; line-height: 1.25; text-align: left;}
#front .hikaku .car-img {display: block; margin: 60px 0;}
#front .hikaku .car-img li.hakoren {margin-top: 40px;}
#front .hikaku .car-img li.other img.img {width: 278px; max-width: 354px;}
#front .hikaku .car-img li.hakoren img.img {width: 320px; max-width: 473px;}

#front .hikaku .car-img li.other img.txt {width: 100%; max-width: 306px; margin-top: -25px;}
#front .hikaku .car-img li.hakoren img.txt {width: 100%; max-width: 358px; margin-top: -25px;}

#front .hikaku .bottom-price {white-space: nowrap; display: flex; flex-direction: column; justify-content: center; margin: 60px auto; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
#front .hikaku .bottom-price h2 {font-size: 3.5rem; line-height: 1.2;}
#front .hikaku .bottom-price .num {-webkit-text-combine: horizontal; -ms-text-combine-horizontal: all; text-combine-upright: all;}
#front .hikaku .bottom-price small {font-size: 1.3rem; margin-right: 10px;}
#front .hikaku .booking {width: 100%; margin: 30px auto; padding: 15px 0;}
#front .hikaku .booking img {width: 38px;}
#front .hikaku .booking span {font-size: 1.75rem; margin-left: 12px;}

/*SPOT*/
#front .spot {padding: 60px 0;}
#front .spot h2 {margin: 120px 0 40px;}
#front .spot h2 img {position: absolute; top: -80px; left: 50%; transform: translate(-50%,0); width: 72px;}
#front .spot h2 span {font-size: 2rem;}
#front .spot .more {font-size: 1.15rem; margin: 50px 15px 0;}


/*インスタ*/
#instagram {background: #cbcbcb;}
#instagram .container {padding: 0 0 20px;}
#instagram .container .insta-box .insta-item {width: 50%; height: 180px; position: relative;}

#instagram .container .link {display: flex; justify-content: center; align-items: center; margin: 20px 25px 0; transition: .3s ease;}
#instagram .container .link a {display: flex; justify-content: center; align-items: center; width: 100%; height: 69px; margin: 0 auto 0; }
#instagram .container .link a i {font-size: 40px; margin-right: 15px;}
#instagram .container .link:hover {opacity: .7;}


/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
テンプレ＆固定ページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
投稿ページ・固定ページ (single.php,page.php)
--------------------------------------------------------------------------*/
#single-info {width: auto;}
#single-info h1.single {font-size: 1.4rem; margin: 20px 5px 15px;}

#single {margin-bottom: 30px;}
#single * {font-size: .95rem;}

/*--見出し--*/
#single h2 {font-size: 1.35rem; padding: 10px 10px 10px 15px;}
#single h3 {font-size: 1.25rem; padding: 5px 10px;}
#single h4 {font-size: 1.15rem; padding: 9px 10px 8px 15px;}
#single h5 {font-size: 1.05rem; padding-left: 8px;}

/*--テーブル--*/
#single .scroll-table {overflow: auto; white-space: nowrap; margin: 30px 0;}
#single table {margin: 0;}

/*--その他--*/
#single blockquote {position: relative; font-style: italic; margin: 30px 0; padding: 15px 15px 0; border: 2px solid #b3b3b3;}
#single blockquote:before {position: absolute; left: 15px; top: 15px; font-family: "Font Awesome 5 Free";  content: "\f10d"; font-weight: 900; font-size: 1.2rem; color: #b3b3b3;}

/*追加*/
#single a.link-btn {padding: 12px 16px;}

#single iframe,
#single object,
#single embed {max-width: 100%;}

/*前後記事*/
#postlink a {max-width: 100%;}
#postlink a .arrow {font-size: .85rem; padding: 4px 12px 2px;}
#postlink a.prev {margin-top: 30px;}

/*--------------------------------------------------------------------------
マンスリープラン
--------------------------------------------------------------------------*/
#monthly {margin-top: -20px;}

#monthly .btn {margin: 0 auto;}
#monthly .btn a {display: block; width: 240px; margin: 0 auto 8px;}
#monthly .btn.flex {display: block;}

#monthly .top {padding-bottom: 12px;}
#monthly .top .desc {font-size: 21px; line-height: 1.5; letter-spacing: -.05em; margin: 12px 0 18px;}

#monthly .plan {padding: 32px 16px;}
#monthly .plan .inner {padding: 12px; border-radius: 10px;}

#monthly .photo {height: 300px;}

#monthly .point {padding: 24px 0;}
#monthly .point .point-img:not(:last-child) {margin-bottom: 20px;}
#monthly .point .btn {margin-bottom: 20px;}

#monthly .price {padding: 24px 0;}
#monthly .price h2 {margin-bottom: 12px;}

#monthly .contact {padding: 25px 0 15px; background-size: 175% auto; background-position: center bottom;}
#monthly .contact .btn {margin: 150px auto 0;}

/*--------------------------------------------------------------------------
お問い合わせ
--------------------------------------------------------------------------*/
#contact p {margin: 20px auto;}

#contact dl {}
#contact dl:not(:last-of-type) {border-bottom: none;}
#contact dl dt,
#contact dl dd {padding: 12px 12px;}
#contact dl dt {line-height: 25px; border-bottom: 1px solid #d7d7d7;}
#contact dl dd {}

#contact input[type="text"],
#contact input[type="password"],
#contact input[type="datetime"],
#contact input[type="date"],
#contact input[type="month"],
#contact input[type="time"],
#contact input[type="week"],
#contact input[type="number"],
#contact input[type="email"],
#contact input[type="url"],
#contact input[type="search"],
#contact input[type="tel"],
#contact input[type="color"],
#contact select,
#contact textarea {padding: 6px 8px;}

#contact input[type="submit"] {font-size: 16px; width: 300px; margin: 40px auto 20px; padding: 12px;}

/*--------------------------------------------------------------------------
404ページ
--------------------------------------------------------------------------*/
#notfound {height: calc(100vh - 360px);}
#notfound h1 {margin-bottom: 30px;}
#notfound h1 span.big {font-size: 1.75rem; margin-bottom: 10px;}
#notfound a.link {padding: 15px 20px;}