/*-------------------------------------------------------------------------- 汎用 --------------------------------------------------------------------------*/ body {min-width: 320px; min-height: calc(100vh - 114px); padding: 56px 0 60px;} /*sp限定*/ .pc {display: none!important;} /*コンティナ*/ .container {padding: 0 15px;} /*汎用flex*/ .flex {display: flex;} /*1カラム*/ .no-column {margin: 40px auto 80px;} /*2カラム*/ .col_box {width: 100%; display: block; margin: 0 auto;} .col_box #main {margin: 25px 0; padding: 0 15px;} /*-------------------------- 背景がイラスト時の背景 --------------------------*/ .back-illust {background: url(../img/common/footer-img.png) right 15% bottom 35px/910px auto no-repeat #d7f3f1; padding: 65px 0 140px;} .back-illust:before {height: 35px; background: repeating-linear-gradient(to right, #abd34e, #abd34e 60px, #a1ce3a 60px, #a1ce3a 180px, #abd34e 180px, #abd34e 240px);} .back-illust > .inner {margin: 0 15px; padding: 20px 15px; border-radius: 10px;} /*-------------------------- 汎用見出し(固定ページ最上位向け) --------------------------*/ .g-h {font-size: 1.625rem; padding: 20px 10px;} /*-------------------------- 汎用見出し(よくある質問・お役立ち情報のTOP) --------------------------*/ .g-h2 {font-size: 1.375rem; margin-bottom: 18px; padding-left: 8px; border-left-width: 6px;} /*-------------------------- ページャー --------------------------*/ #pagination {margin: 10px 0 30px;} /*-------------------------- ページ内スクロール --------------------------*/ #scroll {right: 16px; bottom: 76px; transform: translate(0,100px); width: 48px; height: 48px;} /*-------------------------- ブログへのリンク --------------------------*/ .blog-link {display: block; padding: 42px 15px;} .blog-link a {width: 100%; margin-bottom: 18px;} .blog-link a:last-child {margin-bottom: 0;} @media screen and (min-width: 768px) { .blog-link {display: flex; justify-content: space-between;} .blog-link a {width: 32%; margin: 0;} } /*-------------------------- 下固定メニュー --------------------------*/ .fix-booking {position: fixed; bottom: 0; width: 100%; height: 60px; background: #fff; border: 3px solid #e72100; box-sizing: border-box; transition: .3s ease; z-index: 2002;} .fix-booking a {justify-content: center; align-items: center; width: 50%;} .fix-booking a:hover {text-decoration: none;} .fix-booking a img {width: 28px; height: auto; margin-left: 8px;} .fix-booking a span {color: #e72100; font-size: .875rem; letter-spacing: 0;} .fix-booking a span strong {display: inline-block; color: inherit; font-style: italic; font-size: 1.275rem; font-weight: 700; margin-right: 3px;} .fix-booking a.tel {background: #e72100;} .fix-booking a.tel span {color: #fff;} @media screen and (max-width: 320px) { .fix-booking a img {width: 26px; margin-left: 6px;} .fix-booking a span {font-size: .825rem;} } /*-------------------------- 電話ポップアップ --------------------------*/ .fix-tel.sp {display: block; position: fixed; bottom: 60px; width: 100%; max-height: calc(100vh - 60px); text-align: center; background: #fff; padding: 0 20px; box-sizing: border-box; transition: .3s ease; transform: translateY(100%); visibility: hidden; z-index: 2001;} .fix-tel .logo {display: inline-flex; justify-content: center; align-items: center; width: 242px; margin: 30px 0;} .fix-tel .logo .mark {width: 86px; height: auto; margin: -4px 4px 0 0;} .fix-tel .logo .title {width: 144px; height: auto;} .fix-tel ul li:not(:last-child) {margin-bottom: 12px;} .fix-tel ul li a {display: block; font-size: 1.325rem; font-weight: 700; line-height: 1; text-align: left; padding: 20px 0 20px 54px; background: url(../img/common/icon_phone-circle.svg) 18px center/26px 26px no-repeat; border: 3px solid #e72100;} .fix-tel ul li a em {font-size: 1.625rem; font-weight: inherit; line-height: 1;} .fix-tel ul li a:hover {text-decoration: none;} .fix-tel .txt {margin: 30px 0 60px;} .fix-tel .txt p {font-size: .825rem; font-weight: 700; margin-bottom: 2px;} .fix-tel .txt p.time {font-size: 1.425rem;} .fix-tel .txt p.time strong {color: #e72100; font-size: inherit; font-weight: inherit; margin-right: .5em;} .fix-tel.sp.active {transform: translateY(0); visibility: visible;} .fix-tel .close {position: absolute; bottom: 20px; right: 20px; width: 20px; height: 20px; border: 2px solid #e72100;} .fix-tel .close:before, .fix-tel .close:after {content: ""; position: absolute; top: calc(50% - 1px); left: calc(50% - 7px); width: 14px; height: 2px; background: #e72100;} .fix-tel .close:before {transform: rotate(45deg);} .fix-tel .close:after {transform: rotate(-45deg);} @media screen and (max-width: 320px) { .fix-tel ul li a {font-size: 1.275rem; padding: 20px 0 20px 44px; background-position: 12px center;} .fix-tel ul li a em {font-size: 1.575rem;} } /*-------------------------- 車両リスト&リボン --------------------------*/ .h-ribbon {margin: 0 15px;} .h-ribbon img {width: 100%; max-width: 347px;} .h-ribbon.ribbon-recommended img {max-width: 346px;} .h-ribbon.ribbon-review img {max-width: 361px; left: -11px;} .car-list {display: block;} .car-list .entry {margin-bottom: 50px;} .car-list .entry * {font-size: 1.025rem;} .car-list .entry:lats-child {margin-bottom: 0;} .car-list .entry .img {margin-bottom: 10px;} .car-list .entry .img img {max-height: 250px; width: auto;} .car-list .entry h3, .car-list .entry p {margin: 0 15px;} .car-list .entry .more {margin: 20px auto 0;} .car-list .entry .more span {font-size: 1.025rem;} @media screen and (min-width: 640px) { .car-list .entry {text-align: center;} .car-list .entry .txt {display: inline-block;} } @media screen and (max-width: 320px) { .car-list .entry h3, .car-list .entry p {margin: 0;} } /*-------------------------------------------------------------------------- ヘッダー --------------------------------------------------------------------------*/ header {position: fixed; top: 0; height: 54px; border-bottom: 2px solid #b11700;} header .container {position: relative; background: #e72100; padding: 0; z-index: 1002;} header .logo {width: 204px; align-items: center; margin: 0 auto 0 15px;} header .logo .mark {width: 77px; height: auto; margin: -2px 8px 0 0;} header .logo .title {width: 126px; height: auto;} header .logo .st0 {fill: #fff;} header .user-info {padding: 0 5px;} header .user-info .img {width: 28px; height: 28px;} header .user-info .txt {color: #fff; font-size: .5rem;} header #full-navi {position: fixed; top: 56px; left: 0; width: 100%; max-height: calc(100vh - 116px); background: #fff; z-index: -1; overflow-y: scroll; transform: translateY(-100%); transition: .3s ease; z-index: 1001;} header #full-navi .g-navi .main-menu {padding: 8px 20px;} header #full-navi .g-navi .main-menu > li {display: flex; flex-wrap: wrap; position: relative;} header #full-navi .g-navi .main-menu > li:not(:first-child) {border-top: 1px solid #949494;} header #full-navi .g-navi .main-menu > li > a {display: block; width: calc(100% - 60px); font-size: 1.075rem; font-weight: 700; white-space: nowrap; padding: 13px 5px;} header #full-navi .g-navi .main-menu > li > div.sub-menu-open {display: flex; justify-content: center; align-items: center; width: 50px; height: 50px;} header #full-navi .g-navi .main-menu > li > div.sub-menu-open div {position: relative; width: 15px; height: 15px; border: 1px solid #e52100;} header #full-navi .g-navi .main-menu > li > div.sub-menu-open div:before, header #full-navi .g-navi .main-menu > li > div.sub-menu-open div:after {content: ""; position: absolute; background: #e52100; transition: .3s ease;} header #full-navi .g-navi .main-menu > li > div.sub-menu-open div:before {width: 1px; height: 9px; left: 50%; top: calc(50% - 4px);} header #full-navi .g-navi .main-menu > li > div.sub-menu-open div:after {width: 9px; height: 1px; left: calc(50% - 4px); top: 50%;} header #full-navi .g-navi .main-menu > li > div.sub-menu-open.open div:before {opacity: 0;} header #full-navi .g-navi .main-menu .sub-menu {display: none; position: relative; width: 100%; border-top: 1px solid #a4a4a4;} header #full-navi .g-navi .main-menu .sub-menu li {margin-left: 16px;} header #full-navi .g-navi .main-menu .sub-menu li:not(:first-child) {border-top: 1px solid #a4a4a4;} header #full-navi .g-navi .main-menu .sub-menu li a {position: relative; display: block; color: #424242; font-size: 1rem; padding: 12px 6px;} header #full-navi .g-navi .main-menu .sub-menu li a:before, header #full-navi .g-navi .main-menu .sub-menu li a:after {content: ""; position: absolute; right: 16px; width: 10px; height: 3px; background: #e52100;} header #full-navi .g-navi .main-menu .sub-menu li a:before {transform: rotate(-45deg); top: calc(50%);} header #full-navi .g-navi .main-menu .sub-menu li a:after {transform: rotate(45deg); top: calc(50% - 5px);} header #nav-toggle {display: block; position: relative; width: 24px; height: 24px; padding: 15px; z-index: 1001; transition: .3s ease;} header #nav-toggle div {position: relative; display: block; width: 24px; height: 2px; background: #fff; transition: .3s ease;} header #nav-toggle div:nth-child(1) {top: 5px;} header #nav-toggle div:nth-child(2) {top: 9px; opacity: 1;} header #nav-toggle div:nth-child(3) {top: 13px;} header #nav-toggle span {position: relative; top: 16px; left: -8px; width: 40px; display: block; color: #fff; font-size: .5rem; line-height: 1; font-weight: 700; text-align: center;} header #nav-toggle span:before {display: block; content: "";} .open header .container {background: #fff; border-bottom-color: #374149;} .open header .logo .st0 {fill: #e72100;} .open header .user-info .txt {color: #374149;} .open header #nav-toggle {background: #374149;} .open header #nav-toggle div:nth-child(1) {transform: rotate(45deg); top: 4px;} .open header #nav-toggle div:nth-child(2) {opacity: 0;} .open header #nav-toggle div:nth-child(3) {transform: rotate(-45deg); top: 0px;} .open header #nav-toggle span:before {display: block; content: "閉じる";} .open header #full-navi {transform: translateY(0);} @media screen and (max-width: 320px) { header .logo {width: 190px;} header .logo .mark {width: 70px; margin: -2px 8px 0 0;} header .logo .title {width: 119px;} } /*-------------------------------------------------------------------------- フッター --------------------------------------------------------------------------*/ footer {padding: 0 15px 15px;} footer .logo {width: 242px; align-items: center;} footer .logo .mark {width: 86px; height: auto; margin: -4px 4px 0 0;} footer .logo .title {width: 144px; height: auto;} footer .sns {display: none;} footer nav {display: block; padding: 15px;} footer nav > ul {padding: 15px 0; box-sizing: border-box;} footer nav > ul:not(:first-child) {border-top: 1px solid #ff593d;} footer nav ul > li {margin: 0 0 12px;} footer nav ul .menu-2nd {margin: 0 0 14px;} footer nav ul h3, footer nav ul .menu-2nd li {margin: 0 0 8px;} /*-------------------------------------------------------------------------- サイドバー --------------------------------------------------------------------------*/ #sidebar {width: 100%; border-top: 1px solid #b3b3b3;} #sidebar > div {padding: 30px 15px;} #sidebar > div.bottom-sec {border-top: 1px solid #b3b3b3;} /*電子BOOK*/ #sidebar .book {padding: 15px;} #sidebar .book .inner {padding: 8px;} #sidebar .book .inner .txt {width: calc(100% - 118px); margin-left: 8px;} /*-------------------------------------------------------------------------- 記事一覧 --------------------------------------------------------------------------*/ .post-sec {margin: 0 0 60px;} .post-list {display: block;} .post-list .entry {width: 100%; margin-bottom: 30px;} .post-list .entry:nth-child(odd) {margin-right: 0;} .post-list .entry h3 {font-size: 1.05rem;} /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- フロントページ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ #front .top {flex-direction: column-reverse;} #front .top .booking-form {max-width: 560px; margin: 0 auto;} #front .top .booking-form .inner {padding: 35px 30px;} #front .top-slider, #front .top-slider #top-slider, #front .top-slider #top-slider li {width: 100%; height: 48.5vw;} #front .important-news {padding: 16px 15px;} #front .important-news * {font-size: .875rem;} #front .important-news .container {display: block;} #front .important-news h2 {margin-bottom: 10px;} #front .flow-line {background: #fff;} #front .flow-line img {width: auto;} #front .flow-line .tel-booking, #front .flow-line .acc-btn {align-items: center; padding: 15px 28px;} #front .flow-line .tel-booking {background: #374149;} #front .flow-line .acc-btn {background: #fffde7; border-bottom: 1px solid #b4b4b4;} #front .flow-line .tel-booking .icon {height: 34px; margin: 0 6px;} #front .flow-line .shop .acc-btn .icon {height: 32px; margin: 0 3px;} #front .flow-line .car .acc-btn .icon {height: 30px;} #front .flow-line .tel-booking .arrow, #front .flow-line .acc-btn .arrow {width: 25px; height: 25px; margin: 0 0 0 auto;} #front .flow-line .acc-btn .arrow {transform: rotateZ(90deg);} #front .flow-line .acc-btn.open .arrow {transform: rotateZ(90deg) rotateY(180deg);} #front .flow-line .tel-booking .arrow .st0 {fill: #fff;} #front .flow-line .tel-booking span, #front .flow-line .acc-btn span {font-size: 24px; font-weight: 700; margin-left: 20px;} #front .flow-line .tel-booking span {color: #fff;} #front .flow-line .acc-list {display: none; border-bottom: 1px solid #a4a4a4;} #front .flow-line .acc-list a {align-items: center; padding: 14px 28px; border-bottom: 1px solid #efefef;} #front .flow-line .acc-list a:nth-child(even) {background: #fffde7;} #front .flow-line .acc-list a:last-child {border-bottom: none;} #front .flow-line .acc-list a span {font-size: .825rem; font-weight: 700;} #front .flow-line .acc-list a span strong {font-size: 1.2rem; font-weight: inherit;} #front .flow-line .acc-list a .arrow {width: 18px; height: 18px; margin: 0 0 0 auto;} #front .flow-line a:hover {text-decoration: none; opacity: .7;} #front .recommended {padding: 0 0 24px;} #front .recommended h2 {margin-bottom: 44px; padding: 18px 0;} #front .recommended h2 .mark {width: 65px; margin-right: 12px;} #front .recommended h2 .reco .en-txt {width: 254px;} #front .recommended h2 .reco .jp-txt {font-size: 14px; margin-top: 2px;} #front .about h2 {justify-content: center; align-items: center; margin-bottom: 18px;} #front .about h2 img {width: 22px; height: auto; margin-right: 8px;} #front .about h2 span {font-size: 1.375rem;} #front .about p.disc {font-size: 1.05rem; text-align: center; margin-bottom: 30px;} #front .about li {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 77px 0 40px;} #front .about li .img {margin: 0 auto;} #front .about .about-list {position: relative;} #front .about .slide-arrow {display: inline-block; position: absolute; top: calc(50% - 12px); padding: 8px; background: rgba(0,0,0, .125); z-index: 2;} #front .about .slide-arrow .desvg {width: 16px; height: 16px;} #front .about .slide-arrow .desvg .st0 {fill: #fff;} #front .about .slide-arrow.next-arrow {right: 0;} #front .about .slide-arrow.prev-arrow {left: 0;} #front .about .slide-arrow.prev-arrow .desvg {transform: rotate(-180deg);} #front .useful h2 {padding: 40px 0;} #front .useful h2 img {width: 27px; height: auto;} #front .useful h2 span {font-size: 1.625rem; margin-left: 12px;} #front .useful .useful-list {display: block; padding-bottom: 25px;} #front .useful .useful-list li {margin-bottom: 24px;} #front .useful .useful-list li h3 {font-size: 1.075rem;} #front .posts h2 {justify-content: center; align-items: center; padding: 40px 0;} #front .posts h2 span {font-size: 1.375rem;} #front .posts h2 img {width: 30px; height: auto; margin-right: 10px;} #front .posts .container {padding: 0;} #front .posts .posts-list > li a .img {width: 100%; height: 168px; border-top: 1px solid #a4a4a4; border-bottom: 1px solid #a4a4a4;} #front .posts .posts-list > li a .img img {width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: "object-fit: cover; object-position: 50%;";} #front .posts .posts-list > li a .state, #front .posts .posts-list > li a h3 {font-size: 1.125rem; padding: 0 15px;} #front .posts .posts-list > li a .state {margin: 15px 0 5px;} #front .posts .posts-list > li a .state .cat-list {margin-left: 10px;} #front .posts .posts-list > li a .state .cat-list .cat {font-size: .725rem; margin: 0 4px 4px 0; padding: 4px 8px;} #front .posts .posts-list > li a h3 {margin-bottom: 15px;} #front .posts .more {justify-content: center; width: 120px; margin: 0 auto 30px; padding: 5px 0; background: #e72100; border: 2px solid #e72100;} #front .posts .more span {color: #fff;} #front .posts .more svg .st0 {fill: #fff;} #front .posts .more:hover {text-decoration: none; opacity: .7;} #front .hakolist {padding-bottom: 40px;} #front .hakolist h2 {padding: 40px 0;} #front .hakolist h2 .hakolist-logo {max-width: 90%;} #front .hakolist h3 {padding: 40px 0 20px; flex-direction: column;} #front .hakolist .hakolist-video img.hakolist_signboard {width: 60%; height: auto; margin: 30px 0 0 15px;} #front .hakolist .hakolist-video img.hakolist_map {width: 80%; height: auto; margin: -15% 0 0 auto;} #front .hakolist h3 {text-align: center;} #front .hakolist h3 .insta-logo {margin-bottom: 0.5em;} #front .hakolist a.link-insta {margin-bottom: 40px;} #front .hakolist .hakolist-gallery a {width: 50%; height: calc((100vw - 30px) / 2);} @media screen and (max-width: 320px) { #front .top .booking-form .inner {padding: 35px 15px;} #front .flow-line .tel-booking, #front .flow-line .acc-btn {padding: 15px 20px;} #front .flow-line .tel-booking .icon {height: 32px; margin: 0 4px;} #front .flow-line .shop .acc-btn .icon {height: 30px; margin: 0 2px;} #front .flow-line .car .acc-btn .icon {height: 28px;} #front .flow-line .tel-booking .arrow, #front .flow-line .acc-btn .arrow {width: 24px; height: 24px;} #front .flow-line .tel-booking span, #front .flow-line .acc-btn span {font-size: 22px;} #front .flow-line .acc-list a {padding: 14px 20px;} #front .flow-line .acc-list a span {font-size: .85rem;} #front .flow-line .acc-list a span strong {font-size: 1.15rem;} #front .flow-line .acc-list a .arrow {width: 16px; height: 16px;} #front .recommended h2 .mark {width: 58px;} #front .recommended h2 .reco .en-txt {width: 227px;} } @media screen and (min-width: 640px) { #front .recommended {padding: 48px 0;} #front .recommended h2 {margin-bottom: 40px;} #front .useful .useful-list {display: flex; flex-wrap: wrap;} #front .useful .useful-list li {width: calc((100% - 24px) / 2); margin-right: 24px;} #front .useful .useful-list li:nth-child(even) {margin-right: 0;} #front .posts .container {padding: 0 20px;} #front .posts .posts-list {display: flex; flex-wrap: wrap;} #front .posts .posts-list > li {width: calc((100% - 24px) / 2); margin: 0 24px 6px 0;} #front .posts .posts-list > li:nth-child(even) {margin-right: 0;} #front .posts .posts-list > li a .img {height: 204px; border: 1px solid #a4a4a4;} #front .posts .more {padding: 10px 15px;} } @media screen and (min-width: 768px) { #front .hakolist .hakolist-gallery a {width: calc(100% / 3); height: calc((100vw - 30px) / 3);} #front .hakolist .hakolist-gallery a:last-child {display: none;} } /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- テンプレ＆固定ページ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- 車種・料金プラン (page-carclass-list.php) --------------------------------------------------------------------------*/ #car-list .headline {margin: 0 15px 18px;} #car-list .recommended {padding: 75px 0 50px;} #car-list .recommended h2 {margin: -80px auto 30px;} #car-list .lineup h2 {margin: -50px auto 30px;} /*-------------------------------------------------------------------------- 車両クラス・料金詳細 (page-carclass-detail.php) --------------------------------------------------------------------------*/ #car-detail h1 {margin: -48px auto 25px;} #car-detail .headline {margin-bottom: 36px;} #car-detail .headline h2 {font-size: 1.25rem; padding-left: 8px;} #car-detail .headline .option {margin-left: 15px;} #car-detail .headline .option li {font-size: .75rem; padding: 4px 8px; border-radius: 4px;} #car-detail .detailed-info {flex-direction: column;} #car-detail .detailed-info section {margin-bottom: 30px;} #car-detail .detailed-info section h2 {font-size: 1.5rem; margin-bottom: 10px; padding-bottom: 8px;} #car-detail .car-exterior {order: 1; margin-bottom: 15px;} #car-detail .car-detail {order: 3; margin-bottom: 30px;} #car-detail .car-detail .capacity {margin-bottom: 20px;} #car-detail .car-detail .capacity .number-img {display: none;} #car-detail .car-detail dl {margin-bottom: 18px;} #car-detail .car-detail dl dt {display: inline-block; font-size: 1.075rem; margin-bottom: 8px; padding: 5px 10px;} #car-detail .car-interior {order: 2; margin-bottom: 20px;} #car-detail .car-interior img {margin: 0 auto;} #car-detail .car-price {order: 4; margin-bottom: 30px;} #car-detail .car-price .price-list thead * {font-size: .9rem;} #car-detail .car-price .price-list tbody * {font-size: .975rem;} #car-detail .car-price .price-list tr th, #car-detail .car-price .price-list tr td {padding: 10px 12px;} #car-detail .feature {order: 5;} #car-detail .equipment {order: 6;} #car-detail .equipment .equip-list li {width: 75px;} #car-detail .equipment .equip-list li span {font-size: .6rem;} #car-detail .booking-form {padding: 18px;} #car-detail .booking-form h2 {flex-direction: column; margin: 16px 0 32px;} #car-detail .booking-form h2 img {max-height: 100px; margin: 0 0 12px;} #car-detail .booking-form #searchform {flex-direction: column;} #car-detail .booking-form #searchform .date-box {display: block; width: 100%; max-width: 300px;} #car-detail .booking-form #searchform dl {display: block; margin-bottom: 16px;} #car-detail .booking-form #searchform dl dt {color: #797979; margin-bottom: 8px;} #car-detail .booking-form #searchform dl dd {display: block;} #car-detail .booking-form #searchform .label-control {margin-bottom: 14px;} #car-detail .booking-form #searchform .label-control.used_shop, #car-detail .booking-form #searchform .label-control.smoking {margin-right: 32px;} #car-detail .booking-form #searchform .search-btn {width: 100%; max-width: 280px; margin: 20px auto;} /*-------------------------------------------------------------------------- 店舗詳細情報 (page-shop-detail.php) --------------------------------------------------------------------------*/ #shop-detail .main-photo img {max-height: 200px;} #shop-detail .inner {display: block;} #shop-detail h2 .desvg {margin-right: 9px;} #shop-detail h2 span {font-size: 1.425rem;} #shop-detail .shop-about {margin-bottom: 40px;} #shop-detail .shop-about h2 {margin: 15px 0 30px;} #shop-detail .shop-about h2 .desvg {width: 48px;} #shop-detail .shop-about dl {display: block; margin-bottom: 12px;} #shop-detail .shop-about dl dt {margin-bottom: 6px;} #shop-detail .shop-about dl dd {padding-left: 5px;} #shop-detail .shop-about .sns {margin: 24px 0 28px;} #shop-detail .shop-about .contact .desvg {margin-right: 16px;} #shop-detail .shop-about .contact span {line-height: 1.375;} #shop-detail .shop-comment {margin: 0 -15px 40px; padding: 10px;} #shop-detail .shop-comment h2 {padding: 4px 0 14px;} #shop-detail .shop-comment h2 .desvg {width: 20px; margin: 4px 7px 0 6px;} #shop-detail .shop-comment h2 span {font-size: 1.25rem;} #shop-detail .shop-comment .txt {padding: 15px 16px;} #shop-detail .shop-comment .txt p {font-size: .95rem;} #shop-detail .shop-map {height: 400px; margin: 35px 0;} #shop-detail .shop-transfer h2 {margin-bottom: 30px;} #shop-detail .shop-transfer h2 .desvg {width: 52px;} #shop-detail .shop-transfer section {display: block;} #shop-detail .shop-transfer section:not(:last-child) {margin-bottom: 40px;} #shop-detail .shop-transfer section .txt {margin-bottom: 30px;} #shop-detail .shop-transfer section .txt h3 {font-size: 1.25rem;} #shop-detail .shop-transfer section .txt p + h3 {margin-top: 35px;} #shop-detail .shop-transfer section .txt p {font-size: .95rem; margin-bottom: 1.25em;} #shop-detail .shop-transfer section .map {border: 4px solid #4cb3f1;} #shop-detail .shop-transfer section .map h3 {font-size: 1.4rem; padding: 6px 0 10px;} #shop-detail .shop-transfer section .map img {width: 100%; height: auto;} #shop-detail .car-check {width: 100%; max-width: 494px; height: 56px; margin: 36px auto 18px; border: 2px solid #ff2600; border-radius: 5px;} #shop-detail .car-check span {font-size: 1.1rem; letter-spacing: 0px;} #shop-detail .car-check .desvg {width: 16px; height: auto; margin-left: 3px;} @media screen and (max-width: 425px) { #shop-detail .shop-about .sns a.review {margin-top: 18px;} } @media screen and (max-width: 320px) { #shop-detail .car-check span {font-size: .9rem;} #shop-detail .car-check .desvg {width: 14px;} } @media screen and (min-width: 768px) { #shop-detail .main-photo img {max-height: 400px;} #shop-detail .shop-about dl {display: flex;} #shop-detail .shop-about dl dd {padding: 3px 0;} } /*-------------------------------------------------------------------------- よくあるご質問 (page-faq.php) --------------------------------------------------------------------------*/ #faq .link-list {flex-wrap: wrap; padding: 32px 15px 21px;} #faq .link-list li {width: 100%; margin: 0 0 15px 0;} #faq .link-list li:nth-child(2n) {margin-right: 0;} #faq .link-list li a {height: 56px;} #faq .link-list li a span {font-size: 1rem; padding: 5px 0 5px 32px; background-size: 22.5px auto;} #faq .faq-main {padding-bottom: 48px;} #faq .faq-main .inner {padding: 15px;} #faq .faq-main .qanda {margin-bottom: 15px;} #faq .faq-main .qanda .question {font-size: 1.125rem; padding: 12px 12px 28px 56px;} #faq .faq-main .qanda .answer {margin: 0 15px; padding: 48px 0 0;} #faq .faq-main .qanda .answer p {font-size: 1rem;} #faq .faq-main .qanda .question:before {width: 36px; height: 36px; font-size: 1.5rem; left: 12px; top: 12px;} #faq .faq-main .qanda .answer:before {width: 28px; height: 28px; font-size: 1rem; left: 0; top: 12px;} #faq .faq-main .qanda .question:after {bottom: 10px; left: calc(50% - 6px); width: 20px; height: 12px; background-size: 20px 12px;} @media screen and (max-width: 320px) { #faq .faq-main .qanda .question:before {width: 32px; height: 32px; font-size: 1.375rem;} #faq .faq-main .qanda .question {font-size: 1.05rem; padding: 10px 10px 28px 52px;} #faq .faq-main .qanda .answer p {font-size: .95rem;} } @media screen and (min-width: 768px) { #faq .link-list li {width: calc((100% - 15px) / 2); margin: 0 15px 15px 0;} #faq .link-list li:nth-child(2n) {margin-right: 0;} #faq .link-list li a {height: 64px;} #faq .link-list li a span {font-size: 1.05rem; padding: 5px 0 5px 34px; background-size: 25px auto;} #faq .faq-main .qanda .question {font-size: 1.175rem; padding: 15px 50px 15px 56px;} #faq .faq-main .qanda .answer {margin: 0 15px; padding: 15px 0 0 38px;} #faq .faq-main .qanda .question:after {top: calc(50% - 6px); left: auto; right: 15px;} } /*-------------------------------------------------------------------------- お役立ち情報 (page-useful.php) --------------------------------------------------------------------------*/ #useful .container {padding: 25px 15px 35px;} #useful .two-col .main-col {padding: 15px;} #useful .two-col .side-col {padding: 15px; border-top: 1px solid #bababa;} #useful .main-img {margin: -15px -15px 0;} #useful .anchor-list {margin-right: -16px; padding: 12px 0;} #useful .anchor-list li {margin-right: 16px;} #useful .anchor-list li a {font-size: 1rem; padding-left: 15px; background: url(../img/useful/icon_anchor-arrow.svg) 0 center/10px 7px no-repeat;} #useful .two-col .side-col h2 {margin: 0 0 10px;} #useful .two-col .side-col h2 img {width: 20px; height: 18px; margin: 0 8px 0 0;} #useful .two-col .side-col h2 span {font-size: 1.375rem;} #useful .two-col .side-col .useful-list li {margin-bottom: 12px;} #useful .two-col .side-col .useful-list li h3 {font-size: 1.05rem;} @media screen and (min-width: 768px) { #useful .two-col .side-col .useful-list {display: flex; flex-wrap: wrap; margin-bottom: -16px;} #useful .two-col .side-col .useful-list li {width: calc((100% - 16px) / 2); margin-bottom: 16px;} #useful .two-col .side-col .useful-list li:nth-child(odd) {margin-right: 16px;} } /*-------------------------- 初めてご利用の方へ (first.php) --------------------------*/ #useful .first section {margin-bottom: 30px;} #useful .first h2.step {height: 40px; margin: 0 -16px 18px;} #useful .first h2.step span.num {margin-left: 12px;} #useful .first h2.step span.name {font-size: 1.275rem; margin: 0 0 0 15px;} #useful .first .disc {margin-bottom: 18px;} #useful .first .content {display: block; margin-bottom: 12px; padding: 12px; border: 3px solid #e5e5e5;} #useful .first .content h3 {font-size: 1.275rem; margin: 5px 0 10px;} /*楽々! クイック乗り出し*/ #useful .first .web-booking .img {margin-bottom: 14px;} #useful .first .web-booking .img p {font-size: .85rem;} #useful .first .web-booking .txt .search {margin: 15px auto;} /*最寄りの各店へお電話でもご予約いただけます｡*/ #useful .first .tel-booking .img {margin-bottom: 14px;} #useful .first .tel-booking .tel-list dl {margin-bottom: 4px;} #useful .first .tel-booking .tel-list dl * {font-size: 1.125rem;} /*ご来店時にご持参いただくもの*/ #useful .first .bring ul li {flex-direction: column; margin-bottom: 15px;} #useful .first .bring ul li .img {margin-bottom: 6px;} #useful .first .bring ul li .img img {margin: 0 auto;} /*規則を守って快適ドライブを!*/ #useful .first .rule > p {margin: 0 auto 12px;} #useful .first .rule .caution {display: block; padding: 8px;} #useful .first .rule .caution img {float: left; width: 43px; height: auto; margin-right: 6px;} #useful .first .rule .caution p {font-size: .925rem;} /*ご返却時のお手続き*/ #useful .first .check .return {flex-direction: column;} #useful .first .check .return img {margin-bottom: 18px;} #useful .first .check .return ul li {font-size: 1.05rem; padding-left: .5em; text-indent: -.5em;} @media screen and (min-width: 768px) { #useful .first h2.step {height: 45px; margin-bottom: 36px;} #useful .first h2.step span.num {margin-left: 32px; margin-right: auto;} #useful .first h2.step span.name {font-size: 1.325rem; margin: 0 auto 0 -85px;} #useful .first .content {margin-bottom: 15px; padding: 15px;} #useful .first .content h3 {font-size: 1.325rem; margin: 8px 0 16px;} #useful .first .web-booking {display: flex; align-items: center;} #useful .first .web-booking .img {width: 180px; margin: 0 15px 0 0;} #useful .first .web-booking .txt .search {margin: 20px auto 0;} #useful .first .tel-booking {display: flex; align-items: center;} #useful .first .tel-booking .img {width: 180px; margin: 0 15px 0 0;} #useful .first .tel-booking .tel-list dl {display: flex;} #useful .first .tel-booking .tel-list dl dt {width: 140px;} #useful .first .bring ul li {flex-direction: row; justify-content: flex-start; margin: 0 auto 20px;} #useful .first .bring ul li .img {width: 148px; margin: 0 12px;} #useful .first .rule > p {margin: 0 auto 16px;} #useful .first .rule .caution {padding: 10px;} #useful .first .rule .caution img {width: 57px; height: auto; margin-right: 6px;} #useful .first .rule .caution p {font-size: 1rem;} #useful .first .check .return {flex-direction: row; justify-content: center;} #useful .first .check .return img {margin: 0 15px 0 0;} } /*-------------------------- 3つの安心保証 (first.php) --------------------------*/ #useful .insurance > section {margin-bottom: 32px;} #useful .insurance h2 {font-size: 1.25rem; margin-bottom: 10px; padding: 12px 18px;} #useful .insurance p.disp {font-size: 1rem;} /*ハコレンタカーの3つの安心補償*/ #useful .insurance .compensation-list {position: relative; display: block; margin: 20px 0 0;} #useful .insurance .compensation-list > li {width: 100%; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #cbcbcb;} #useful .insurance .compensation-list > li:last-of-type {padding-bottom: 10px; margin-bottom: 10px; border-bottom: none;} #useful .insurance .compensation-list .illust {display: none; position: absolute; bottom: 10px; left: 10px; width: 220px; height: auto;} /*補償*/ #useful .insurance .intro h3 {font-size: 1.275rem; margin-bottom: 4px;} #useful .insurance .intro p.disp {font-size: 1rem; margin-bottom: 10px;} /*基本の保証リスト*/ #useful .insurance .include {display: block; margin: 15px 0 5px;} #useful .insurance .include dl {width: 100%; margin: 0 0 15px;} /*保険・補償制度が適用されない例*/ #useful .insurance .other-list {padding: 20px 18px;} #useful .insurance .other-list h3 {font-size: 1.45rem; margin-bottom: 14px;} /*図*/ #useful .insurance .img-flow {flex-direction: column;} #useful .insurance .img-flow .price {margin: 20px 0 10px;} #useful .insurance .img-flow .arrow {height: 48px; margin: 0 0 10px;} #useful .insurance .img-flow .arrow:before {top: 0; left: calc(50% - 13.5px); width: 27px; height: 24px;} #useful .insurance .img-flow .arrow:after {bottom: 0; left: calc(50% - 28.5px); border-style: solid; border-width: 24px 28.5px 0 28.5px; border-color: #e42100 transparent transparent transparent;} @media screen and (min-width: 768px) { #useful .insurance .compensation-list {display: flex;} #useful .insurance .compensation-list > li {width: calc(100% / 3); padding: 12px; border-right: 1px solid #cbcbcb; border-bottom: none;} #useful .insurance .compensation-list > li:last-of-type {border-right: none;} #useful .insurance .compensation-list > li.standard {margin-bottom: 90px;} #useful .insurance .compensation-list .illust {display: block;} #useful .insurance .include {display: flex; flex-wrap: wrap; margin: 20px 0 5px;} #useful .insurance .include dl {width: calc((100% - 15px) / 2); margin: 0 15px 15px 0;} #useful .insurance .include dl:nth-child(even) {margin-right: 0;} #useful .insurance .other-list h3 {font-size: 1.5rem;} #useful .insurance .img-flow {flex-direction: row;} #useful .insurance .img-flow .price {margin: 0 25px;} #useful .insurance .img-flow .arrow {width: 48px; margin: 0 20px 0 0;} #useful .insurance .img-flow .arrow:before {top: calc(50% - 13.5px); left: 0; width: 24px; height: 27px;} #useful .insurance .img-flow .arrow:after {top: calc(50% - 28.5px); left: auto; right: 0; border-style: solid; border-width: 28.5px 0 28.5px 24px; border-color: transparent transparent transparent #e42100;} } /*-------------------------- 法人向けプラン (business_contact.php) --------------------------*/ #useful .business > section {margin-bottom: 56px;} #useful .business .signup {margin: 24px auto;} #useful .business .signup span {font-size: 1.35rem;} #useful .business .signup .desvg {width: 22px; height: 22px; margin-left: 4px;} #useful .business .intro h2 {font-size: 1.35rem; margin: 24px 0 18px;} #useful .business .intro .about {margin-bottom: 30px;} #useful .business .intro .feature {display: block;} #useful .business .intro .feature li {margin-bottom: 20px;} #useful .business .value h2 {margin-bottom: 16px;} #useful .business .value p.disp {font-size: 1.05rem;} #useful .business .value .graph {margin: 42px 0;} #useful .business .value .graph h3 {font-size: 1.45rem; margin-bottom: 14px;} #useful .business .value .option .options {margin-bottom: 32px;} #useful .business .value .option .options li {margin: 0 auto 20px;} #useful .business .value .option .form {font-size: 1.05rem;} @media screen and (min-width: 768px) { #useful .business > section {margin-bottom: 76px;} #useful .business .signup {margin: 36px auto;} #useful .business .intro h2 {font-size: 1.95rem;} #useful .business .intro .about {margin-bottom: 35px;} #useful .business .intro .about p, #useful .business .intro .about ul li {font-size: 1.075rem;} #useful .business .intro .feature {display: flex;} #useful .business .intro .feature li {width: calc((100% - 48px) / 2); margin: 0 24px 0 0;} #useful .business .intro .feature li:nth-child(3n) {margin-right: 0;} #useful .business .value h2 {margin-bottom: 28px;} #useful .business .value p.disp {font-size: 1.075rem;} #useful .business .value .graph {margin: 56px 0;} #useful .business .value .graph h3 {font-size: 1.8rem; margin-bottom: 24px;} #useful .business .value .option .options {width: 520px; height: 540px; margin: 0 auto 64px;} #useful .business .value .option .options li, #useful .business .value .option .options .illust {position: absolute; margin: 0;} #useful .business .value .option .options li.etc {top: 27px; left: 0;} #useful .business .value .option .options li.carnavi {top: 0; right: 5px;} #useful .business .value .option .options li.dispatch {bottom: 0; left: 17px;} #useful .business .value .option .options .illust {right: -4px; bottom: 92px;} #useful .business .value .option .form {display: flex; justify-content: center; font-size: 1.25rem;} } /*-------------------------- ワンボックスカーの魅力 (one-box.php) --------------------------*/ #useful .head-img {margin-bottom: 15px;} #useful .head-img:last-child {margin-bottom: 0;} #useful .one-box > section {padding: 36px 0;} /*プロが教える*/ #useful .one-box h2.teach {margin: 0 0 28px;} #useful .one-box h2.teach .crown {width: 78px; height: auto; margin-right: 16px;} #useful .one-box h2.teach .point {width: 117px; height: auto;} /*イントロ*/ #useful .one-box .intro {margin: 20px 0 36px;} #useful .one-box .intro p.disp {font-size: .95rem;} /*汎用*/ #useful .one-box .serial-sec:not(:last-child) {margin-bottom: 30px;} #useful .one-box .serial-sec h4 {font-size: 1.125rem; margin-bottom: 10px;} #useful .one-box .serial-sec .flex {flex-direction: column-reverse;} #useful .one-box .serial-sec .img {width: 100%; margin-top: 12px;} #useful .one-box .serial-sec p {width: 100%;} /*point1*/ #useful .one-box .point1 .intro .graph {position: relative; right: -4px;} #useful .one-box .point1 .intro .graph {margin: 20px auto 0;} #useful .one-box .point1 .suit h3 {margin-bottom: 20px;} #useful .one-box .point1 .suit h3 .icon {width: 18px; height: 18px; margin-right: 10px;} #useful .one-box .point1 .suit h3 .txt {width: 223px; height: auto;} #useful .one-box .point1 .suit h4 {font-size: 1.45rem; margin-bottom: 10px;} #useful .one-box .point1 .suit section:not(:last-child) {margin-bottom: 36px;} #useful .one-box .point1 .suit .posture {margin-top: 32px;} #useful .one-box .point1 .suit .posture .comparison {margin: 20px auto 0;} #useful .one-box .point1 .suit .posture .difference {display: block; margin: 0 0 16px;} #useful .one-box .point1 .suit .posture .difference li {margin: 72px 0 0;} #useful .one-box .point1 .suit .posture .difference li p {font-size: .9rem;} #useful .one-box .point1 .suit .posture .explan {display: block;} #useful .one-box .point1 .suit .posture .explan p {padding: 15px; box-sizing: border-box;} #useful .one-box .point1 .suit .posture .explan p:before {bottom: -26px; right: calc(50% - 27px); width: 0; height: 0; border-style: solid; border-width: 26px 27px 0 27px; border-color: #fff58e transparent transparent transparent;} #useful .one-box .point1 .suit .posture .explan img {margin: 20px auto 0;} #useful .one-box .point1 .non-stress p {margin-bottom: 30px;} #useful .one-box .point1 .non-stress .img {display: block;} #useful .one-box .point1 .non-stress .img img {width: 100%; height: auto;} #useful .one-box .point1 .non-stress .img img:not(:last-child) {margin-bottom: 15px;} #useful .one-box .point1 .comfort p {margin: 15px 0 30px;} #useful .one-box .point1 .comfort .img {display: block;} #useful .one-box .point1 .comfort .img figure {width: 100%; height: auto;} #useful .one-box .point1 .comfort .img figure:not(:last-child) {margin-bottom: 15px;} #useful .one-box .point1 .comfort .img figcaption {font-size: .925rem; margin-top: 12px;} /*point2*/ #useful .one-box .point2 {margin: 0 -15px; padding: 36px 15px;} /*finished*/ #useful .one-box .finished {padding: 16px 0 32px;} #useful .one-box .finished .head-img {margin-bottom: 22px;} #useful .one-box .finished h2 {margin-bottom: 32px;} #useful .one-box .finished .car-check span {font-size: 1.1rem;} #useful .one-box .finished .car-check .desvg {width: 16px; height: 16px; margin-left: 10px;} @media screen and (min-width: 768px) { #useful .one-box > section {padding: 64px 0;} #useful .one-box > section > .inner {width: 540px; margin: 0 auto;} /*プロが教える*/ #useful .one-box h2.teach {margin: 0 0 48px;} #useful .one-box h2.teach .crown {width: 105px; height: auto; margin-right: 22px;} #useful .one-box h2.teach .point {width: 156px; height: auto;} /*イントロ*/ #useful .one-box .intro {margin: 32px 0 64px;} /*汎用*/ #useful .one-box .serial-sec:not(:last-child) {margin-bottom: 50px;} #useful .one-box .serial-sec h4 {font-size: 1.25rem; margin-bottom: 10px;} #useful .one-box .serial-sec .flex {flex-direction: row;} #useful .one-box .serial-sec .img {width: 302px; margin-right: 12px;} #useful .one-box .serial-sec p {width: calc(100% - 314px);} /*point1*/ #useful .one-box .point1 .intro .graph {position: relative; right: -18px;} #useful .one-box .point1 .intro .graph {margin: 40px auto 0;} #useful .one-box .point1 .suit h3 {margin-bottom: 40px;} #useful .one-box .point1 .suit h3 .icon {width: 28px; height: 28px; margin-right: 8px;} #useful .one-box .point1 .suit h3 .txt {width: 343px; height: auto;} #useful .one-box .point1 .suit h4 {font-size: 1.9rem; margin-bottom: 15px;} #useful .one-box .point1 .suit section:not(:last-child) {margin-bottom: 52px;} #useful .one-box .point1 .suit .posture {margin-top: 90px;} #useful .one-box .point1 .suit .posture .comparison {margin: 42px auto;} #useful .one-box .point1 .suit .posture .difference {display: flex; justify-content: center; margin: 84px 0 32px;} #useful .one-box .point1 .suit .posture .difference li {margin: 0 18px;} #useful .one-box .point1 .suit .posture .explan {display: flex; align-items: center;} #useful .one-box .point1 .suit .posture .explan p {width: 50%; padding: 18px; box-sizing: border-box;} #useful .one-box .point1 .suit .posture .explan p:before {top: calc(50% - 27px); right: -26px; width: 0; height: 0; border-style: solid; border-width: 27px 0 27px 26px; border-color: transparent transparent transparent #fff58e;} #useful .one-box .point1 .suit .posture .explan img {margin: auto;} #useful .one-box .point1 .non-stress p {margin-bottom: 35px;} #useful .one-box .point1 .non-stress .img {display: flex; justify-content: space-between;} #useful .one-box .point1 .non-stress .img img {width: calc((100% - 20px) / 2); height: auto; margin: 0!important;} #useful .one-box .point1 .comfort p {margin: 20px 0 35px;} #useful .one-box .point1 .comfort .img {display: flex; justify-content: space-between;} #useful .one-box .point1 .comfort .img figure {width: calc((100% - 20px) / 2); height: auto; margin: 0;} #useful .one-box .point1 .comfort .img figcaption {font-size: .95rem; margin-top: 14px;} /*point2*/ #useful .one-box .point2 {margin: 0 -15px; padding: 64px 0;} /*finished*/ #useful .one-box .finished {padding: 32px 0 64px;} #useful .one-box .finished .head-img {margin-bottom: 42px;} #useful .one-box .finished h2 {margin-bottom: 64px;} #useful .one-box .finished .car-check {padding: 16px 0; border-radius: 10px;} #useful .one-box .finished .car-check span {font-size: 1.2rem;} #useful .one-box .finished .car-check .desvg {width: 18px; height: 18px; margin-left: 16px;} } /*-------------------------- ハコレンタカーの特徴 (feature.php) --------------------------*/ #useful .feature > section {margin-bottom: 48px;} /*detail*/ #useful .feature .detail {margin: 5px 0;} #useful .feature .detail h2 {margin: 0 4px 12px;} #useful .feature .detail p {font-size: 1rem; margin: 10px 5px;} /*feature-sec*/ #useful .feature .feature-sec {margin: 32px 0;} #useful .feature h3.ribbon {width: 245px; margin: 0 auto 24px;} #useful .feature h3.ribbon span {font-size: 1.35rem;} #useful .feature h3.ribbon:before, #useful .feature h3.ribbon:after {bottom: -6px; width: 10px; border: solid #ca3301; border-top-width: 15px; border-bottom-width: 15px; border-left-width: 7.5px; border-right-width: 7.5px;} #useful .feature h3.ribbon:before {left: -14px; border-left-color: transparent;} #useful .feature h3.ribbon:after {right: -14px; border-right-color: transparent;} #useful .feature h3.big {font-size: 1.7rem; margin-bottom: 8px;} #useful .feature .flex {align-items: flex-start;} #useful .feature p.disp {font-size: 1.025rem; margin-bottom: 16px;} /*殺菌*/ #useful .feature .disinfection {margin-top: 24px; padding: 15px 18px;} #useful .feature .disinfection h4 {font-size: 1.35rem; margin-bottom: 12px;} #useful .feature .disinfection p {font-size: 1rem;} #useful .feature .disinfection img {display: none;} /*サポート*/ #useful .feature .support {display: block; margin: 24px auto 36px;} #useful .feature .support li {width: 100%; margin-bottom: 24px;} #useful .feature .support h4 {font-size: 1.625rem; margin: 8px 0;} #useful .feature .support p {font-size: 1rem;} /*注意事項*/ #useful .feature .notice {margin-bottom: 40px;} #useful .feature .notice h4 {font-size: 1.1rem; margin-bottom: 14px;} #useful .feature .notice p {font-size: .9rem;} #useful .feature .car-check span {font-size: 1.1rem;} #useful .feature .car-check .desvg {width: 16px; height: 16px; margin-left: 10px;} @media screen and (min-width: 768px) { #useful .feature > section {margin-bottom: 96px;} /*detail*/ #useful .feature .detail {margin: 20px 0;} #useful .feature .detail h2 {margin: 0 8px 24px;} #useful .feature .detail p {font-size: 1.125rem; margin: 20px 5px;} /*feature-sec*/ #useful .feature .feature-sec {margin: 64px 20px;} #useful .feature h3.ribbon {width: 345px; margin: 0 auto 48px;} #useful .feature h3.ribbon span {font-size: 1.75rem;} #useful .feature h3.ribbon:before, #useful .feature h3.ribbon:after {bottom: -6px; width: 10px; border: solid #ca3301; border-top-width: 20px; border-bottom-width: 20px; border-left-width: 10px; border-right-width: 10px;} #useful .feature h3.ribbon:before {left: -18px; border-left-color: transparent;} #useful .feature h3.ribbon:after {right: -18px; border-right-color: transparent;} #useful .feature h3.big {font-size: 2.9rem;} #useful .feature .flex {align-items: flex-start;} #useful .feature p.disp {font-size: 1.5rem; margin-bottom: 24px;} /*殺菌*/ #useful .feature .disinfection {margin-top: 40px; padding: 20px 28px;} #useful .feature .disinfection h4 {font-size: 1.6rem; margin-bottom: 15px;} #useful .feature .disinfection p {width: calc(100% - 114px - 24px); font-size: 1.05rem;} #useful .feature .disinfection img {width: 114px; height: auto; margin-left: 24px;} /*サポート*/ #useful .feature .support {display: flex; margin: 42px auto;} #useful .feature .support li {width: calc((100% - 36px) / 2); margin-bottom: 32px;} #useful .feature .support li:nth-child(odd) {margin-right: 36px;} #useful .feature .support h4 {font-size: 1.875rem; margin: 8px 0;} #useful .feature .support p {font-size: 1.05rem;} /*注意事項*/ #useful .feature .notice {margin-bottom: 60px;} #useful .feature .notice h4 {font-size: 1.25rem; margin-bottom: 18px;} #useful .feature .notice p {font-size: .95rem;} #useful .feature .car-check {padding: 16px 0; border-radius: 10px;} #useful .feature .car-check span {font-size: 1.2rem;} #useful .feature .car-check .desvg {width: 18px; height: 18px; margin-left: 16px;} } /*-------------------------------------------------------------------------- お問い合わせ (contact.php) --------------------------------------------------------------------------*/ #contact section {margin-bottom: 48px;} #contact section.form {margin: 48px 0 0;} #contact p.disc {margin-bottom: 28px;} #contact h2 {font-size: 1.125rem; margin: 0 0 24px; padding: 3px 12px;} #contact .notice {margin: 0 0 28px; padding: 15px 20px;} #contact .qanda {margin: 0 0 20px;} #contact .qanda dt, #contact .qanda dd {padding: 10px 16px;} #contact .tel-list li {margin-bottom: 26px;} #contact .tel-list li h3 {font-size: 1.1rem;} #contact .tel-list li a {font-size: 1.375rem; margin: 25px 0;} #contact .tel-list li .time {margin-bottom: 12px;} #contact .tel-list li .all-year {padding: 4px 0;} #contact .form dl dt, #contact .form dl dd {font-size: .95rem; padding: 12px;} #contact .form dl dt {background: #f5feff; border-bottom: 1px solid #e6e6e6;} #contact .form dl.agree dt {background: transparent;} #contact .form input[type="text"], #contact .form input[type="email"], #contact .form input[type="tel"], #contact .form select, #contact .form textarea {font-size: .95rem; padding: 4px 8px;} /*-------------------------------------------------------------------------- ブログ一覧ページ (blog.php) --------------------------------------------------------------------------*/ .tag-list li a {font-size: .75rem; padding: 2px 12px;} #blog-arc .blog-list {display: block;} #blog-arc .blog-list .entry {margin-bottom: 35px;} #blog-arc .notfound {margin-bottom: 35px;} #blog-arc .shops-box:not(:last-child) {margin-bottom: 50px;} #blog-arc .more {margin: -10px 0 10px;} @media screen and (min-width: 768px) { #blog-arc .blog-list {display: flex; flex-wrap: wrap;} #blog-arc .blog-list .entry {width: calc((100% - 30px) / 3); margin: 0 15px 30px 0;} #blog-arc .blog-list .entry:nth-child(3n) {margin-right: 0;} } /*-------------------------------------------------------------------------- ブログ個別ページ (single-blog.php) --------------------------------------------------------------------------*/ #blog-single .two-col .main-col {margin-bottom: 50px;} #blog-single .two-col .side-col {margin: 0 -15px -56px; padding: 32px 15px;} #blog-single .blog-single-info {margin-top: -5px;} #blog-single .blog-single-info .back {font-size: .925rem;} #blog-single .blog-single-info h1 {font-size: 1.425rem; margin-bottom: 15px; padding: 40px 5px; border-bottom: 1px solid #ccc;} #blog-single .blog-single-info time {font-size: .95rem; padding: 4px 4px 8px;} #blog-single .tag-list {margin-bottom: 15px;} #blog-single .eyecatch {margin-bottom: 20px;} /*エリア・タグ*/ #blog-single .two-col .main-col .cat-box * {font-size: .9rem;} #blog-single .two-col .main-col .cat-box > div.area {margin-right: 20px;} #blog-single .two-col .main-col .cat-box > div span {margin-right: 8px;} /*サイドバー*/ #blog-single .two-col .side-col article {margin-bottom: 36px;} #blog-single .two-col .side-col h2 {font-size: 1.2rem; margin-bottom: 14px;} #blog-single .two-col .side-col .tag .tag-list li {margin: 0 10px 12px 0;} @media screen and (min-width: 768px) { #blog-single .two-col .side-col .posts .posts-list {display: flex; flex-wrap: wrap;} #blog-single .two-col .side-col .posts .posts-list li {width: calc((100% - 30px) / 2);} #blog-single .two-col .side-col .posts .posts-list li:not(:nth-child(even)) {margin-right: 30px;} } /*-------------------------------------------------------------------------- 口コミ (single-review.php) --------------------------------------------------------------------------*/ #review-single .two-col .main-col {margin-bottom: 56px;} #review-single h1 {margin: -39px 0 20px;} #review-single h2.headline {margin-bottom: 18px; padding: 8px 16px;} #review-single h2.headline span {font-size: 1.25rem; margin-left: 6px;} #review-single h2.headline .shop {width: 32px; height: auto;} #review-single h2.headline .car {width: 36px; height: auto;} #review-single .two-col .side-col article {margin-bottom: 32px;} #review-single .two-col .side-col h2 {margin-bottom: 16px;} #review-single .two-col .side-col .review-list li {margin-bottom: 10px;} #review-single .two-col .side-col .review-list li a {font-size: 1rem;} /*口コミ*/ .review-totals {flex-direction: column-reverse; margin: 5px 0 20px!important;} .review-totals .reviews-break, .review-totals .reviews-summary {text-align: left; margin: 0!important;} .ic_rev_review {padding: 24px 12px!important;} .review-right .review-rating {margin-bottom: 12px;} .review-right .review-title {margin: .25em 0 12px 8px;} .logged-in-as, .comment-notes {margin: 30px 0 20px!important;} /*コメント*/ #review-single .comment-respond input[type="submit"] {margin: 30px auto;} @media screen and (min-width: 768px) { .review-totals {justify-content: flex-end; align-items: center; flex-direction: row-reverse;} .review-totals .reviews-summary {margin-left: 50px!important;} #review-single .two-col .side-col {display: flex; justify-content: space-between; width: 100%;} #review-single .two-col .side-col article {width: calc((100% - 30px) / 2);} } /*-------------------------------------------------------------------------- 投稿ページ・固定ページ (single.php,page.php) --------------------------------------------------------------------------*/ #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: 4px 8px;} #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: 0 0 30px;} #single table {margin: 0;} /*--その他--*/ #single blockquote {padding: 15px 15px 0;} /*追加*/ #single a.link-btn {padding: 12px 16px;} #single iframe, #single object, #single embed {max-width: 100%;} /*前後記事*/ .postlink a {font-size: .95rem;} /*-------------------------------------------------------------------------- 404ページ --------------------------------------------------------------------------*/ #notfound {height: 400px;} #notfound h1 span.big {font-size: 1.5rem;} #notfound h1 span.small {font-size: .9rem;} #notfound a.link {font-size: 1rem;}