@charset "UTF-8"; /* ------------------------------------------------------------------- CSS information file name : layout.css author : Ability Consultant style info : 更新用各店舗共通CSS ------------------------------------------------------------------- */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* _mixins.scss Styleguide 1.3.0 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* 各デバイス別処理 @include mq($device) {
//処理
};

$device : pc or tab or sp or pc_tab or tab_sp or tab_l or tab_s or sp_l or sp_s Styleguide 1.3.1 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* フォントサイズ指定 @include fsz(任意のサイズ,親要素のサイズ);
※px不要 Styleguide 1.3.1.1 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* 値を振り分け(choiceValue) @include cV(プロパティ,pc幅,tab~sp幅);
or
@include cV(プロパティ,pc幅,tab幅,sp幅); Styleguide 1.3.1.2 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* マウスホバー Styleguide 1.3.1.3 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* 幅を決めて中央寄せ(choiceWidth) @include cW(任意の幅px); Styleguide 1.3.1.4 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* 画像を拡大 @include zoomImg(拡大率,x軸基点); Styleguide 1.3.1.5 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* ホバー時リンクの下線を逆にする @include reverseDecoration; Styleguide 1.3.1.6 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* プロパティにプレフィックスを付与 @include PropertySetPrefix(プロパティ,値); Styleguide 1.3.1.7 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* 値にプレフィックスを付与 @include ValueSetPrefix(プロパティ,値); Styleguide 1.3.1.8 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* スマホ用フォントサイズを設定する @include SpFontSize(幅); Styleguide 1.3.1.9 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* 縦方向のグラデーション 2色 @include gradientL-2(上側のカラー,上側のカラーの位置％,下側のカラー,下側のカラーの位置％); Styleguide 1.3.2 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* 縦方向のグラデーション 3色 @include gradientL-3(上側のカラー,上側のカラーの位置％,中間のカラー,中間のカラーの位置％,下側のカラー,下側のカラーの位置％); Styleguide 1.3.2.1 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* 横方向のグラデーション 2色 @include gradientW-2(左側のカラー,左側のカラーの位置％,右側のカラー,右側のカラーの位置％); Styleguide 1.3.2.2 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* 横方向のグラデーション 3色 @include gradientW-3(左側のカラー,左側のカラーの位置％,中間のカラー,中間のカラーの位置％,右側のカラー,右側のカラーの位置％); Styleguide 1.3.2.3 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* ioniconをcssで指定する用 Styleguide 1.3.2.4 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* fontawesomeをcssで指定する用 Styleguide 1.3.2.5 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* fontawesomeをcssで指定する用 Styleguide 1.3.2.6 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* fontawesomeをcssで指定する用 Styleguide 1.3.2.7 */ /* ------------------------------------------------------------------- 例： 共通既存スタイルの上書き or 新規共通スタイル layout/ 内にあるスタイルをまとめて記述する ------------------------------------------------------------------- */ /* ------------------------------------------------------------------- タイトル部分 ------------------------------------------------------------------- */ .l-header__con-h1 .h2 .t .en { display: block; font-family: Roboto Light,serif; font-size: 80%; line-height: 1em; color: #555; } .l-header__con-h1 .h2 .t .en em { color: #2a61ab; } /* ------------------------------------------------------------------- Gナビのフォントサイズ ------------------------------------------------------------------- */ .l-header__gnav li a { font-size: 15px; } .l-fixgnav__con-inner .l-header__gnav li a { font-size: 14px; } /* ------------------------------------------------------------------- 個人情報保護方針に基づく具体的な取組み ------------------------------------------------------------------- */ .f-cms-title--main .jp_hogo { font-size: 200%; } @media only screen and (max-width: 640px) { .f-cms-title--main .jp_hogo { font-size: 1.4em; } } .l-yakkan__wrp-tbl h5 .jp { color: #00a19e; font-weight: 500; margin-bottom: 10px; font-size: 120%; display: block; } /* ------------------------------------------------------------------- マップ部分の修正 ------------------------------------------------------------------- */ .l-homepage__con-map-group .box-map .ishikawa li:nth-child(5) { margin-left: -375px; margin-top: 226px; } @media only screen and (max-width: 1279px) and (min-width: 768px) { .l-homepage__con-map-group .box-map .ishikawa li:nth-child(5) { margin-left: -29.5vw; margin-top: 18vw; } } .l-homepage__con-map-group .box-map .fukui li:first-child { margin-left: -375px; margin-top: 295px; } @media only screen and (max-width: 1279px) and (min-width: 768px) { .l-homepage__con-map-group .box-map .fukui li:first-child { margin-left: -29.5vw; margin-top: 23.5vw; } } .l-homepage__con-map-group .box-map .niigata li:first-child { margin-left: 240px; margin-top: 176px; } @media only screen and (max-width: 1279px) and (min-width: 768px) { .l-homepage__con-map-group .box-map .niigata li:first-child { margin-left: 18vw; margin-top: 14vw; } } .l-homepage__con-map-group .box-map .toyama li:first-child { margin-left: 240px; margin-top: 226px; } @media only screen and (max-width: 1279px) and (min-width: 768px) { .l-homepage__con-map-group .box-map .toyama li:first-child { margin-left: 18vw; margin-top: 18vw; } } .l-homepage__con-map-group .box-map .hyogo li:first-child { margin-left: 0; margin-top: 0; } @media only screen and (max-width: 1279px) and (min-width: 768px) { .l-homepage__con-map-group .box-map .hyogo li:first-child { margin-left: -2vw; margin-top: 0.6vw; } } .l-homepage__con-map-group .box-map .gifu li:first-child { margin-left: 127px; margin-top: 283px; } @media only screen and (max-width: 1279px) and (min-width: 768px) { .l-homepage__con-map-group .box-map .gifu li:first-child { margin-left: 8vw; margin-top: 22.5vw; } } .l-homepage__con-map-group .box-map .mie li:nth-child(12) { display: none; } .l-homepage__con-map-group .box-map .aichi li:first-child { margin-left: 450px; margin-top: -226px; } @media only screen and (max-width: 1279px) and (min-width: 768px) { .l-homepage__con-map-group .box-map .aichi li:first-child { margin-left: 33vw; margin-top: -17vw; } } .l-homepage__con-map-group .box-map .aichi li:nth-child(2) { margin-left: 400px; margin-top: -143px; } @media only screen and (max-width: 1279px) and (min-width: 768px) { .l-homepage__con-map-group .box-map .aichi li:nth-child(2) { margin-left: 32vw; margin-top: -11vw; } } .l-homepage__con-map-group .box-map .aichi li:nth-child(3) { margin-left: 360px; margin-top: -56px; } @media only screen and (max-width: 1279px) and (min-width: 768px) { .l-homepage__con-map-group .box-map .aichi li:nth-child(3) { margin-left: 30vw; margin-top: -4.5vw; } } .l-homepage__con-map-group .box-map .mie li:nth-child(14) { margin-left: -40px; margin-top: 260px; } @media only screen and (max-width: 1279px) and (min-width: 768px) { .l-homepage__con-map-group .box-map .mie li:nth-child(14) { margin-left: -3vw; margin-top: 20.71786vw; } } .l-homepage__con-map-group .box-map .mie li:nth-child(15) { margin-left: -110px; margin-top: 306px; } @media only screen and (max-width: 1279px) and (min-width: 768px) { .l-homepage__con-map-group .box-map .mie li:nth-child(15) { margin-left: -8.5vw; margin-top: 24.31786vw; } } /* ------------------------------------------------------------------- マップ部分（SP）の修正 ------------------------------------------------------------------- */ .l-homepage__con-map-group .outer-box-acd .box-acd dl dt.btn-gifu a { background-color: #2f8583; } .l-homepage__con-map-group .outer-box-acd .box-acd dl .is-active .js-acd-box .mie li:nth-child(11) { display: none; } /* ------------------------------------------------------------------- ホテルリストの追加時の調整 ------------------------------------------------------------------- */ .f-grid-flex--single-4-line-margin-3per .hotelis_hiro { margin-left: 3%; } @media only screen and (max-width: 767px) { .f-grid-flex--single-4-line-margin-3per .hotelis_hiro { margin-left: 0; } } #list .f-base__content-warp .l-list__cnt-list .box-link .f-grid-flex--jus-center { justify-content: start; } /* ------------------------------------------------------------------- pointページの　ベストイン追加 ------------------------------------------------------------------- */ .f-grid-flex--single-2-line-margin-3per .point_uozu_left { margin-left: 3%; } /* ------------------------------------------------------------------- ホテル一覧 ------------------------------------------------------------------- */ .box-thumb .f-grid-flex--single-5-line-margin-1per { justify-content: center; } /* ------------------------------------------------------------------- footerのSNSアイコンの調整（PC） ------------------------------------------------------------------- */ .l-footer__box-gp > dl dd .box_sns { display: flex; justify-content: center; margin-top: 20px; } @media only screen and (max-width: 767px) { .l-footer__box-gp > dl dd .box_sns { margin-top: 2rem; } } .l-footer__box-gp > dl dd .box_sns li { transition: 0.2s; } .l-footer__box-gp > dl dd .box_sns li:not(:last-of-type) { margin-right: 10px; } @media only screen and (max-width: 767px) { .l-footer__box-gp > dl dd .box_sns li:not(:last-of-type) { margin-right: 1rem; } } .l-footer__box-gp > dl dd .box_sns li:hover { opacity: 0.7; } .l-footer__box-gp > dl dd .box_sns li a { padding-left: 0; display: inline; position: static; } .l-footer__box-gp > dl dd .box_sns li a:before { display: none; } /* ------------------------------------------------------------------- footerのSNSアイコンの調整（SP） ------------------------------------------------------------------- */ .l-footer__con-copy .box_sns { display: flex; justify-content: center; margin-top: 2rem; } .l-footer__con-copy .box_sns li { transition: 0.2s; } .l-footer__con-copy .box_sns li:not(:last-of-type) { margin-right: 1rem; } .l-footer__con-copy .box_sns li:hover { opacity: 0.7; } .l-footer__con-copy .box_sns li a { padding-left: 0; display: inline; position: static; } .l-footer__con-copy .box_sns li a:before { display: none; } /* ------------------------------------------------------------------- .con_pamphlet ------------------------------------------------------------------- */ .con_pamphlet a { display: block; text-align: center; background-color: #00a19e; padding: 2rem 0; transition: 0.2s; } @media only screen and (max-width: 1279px) and (min-width: 768px) { .con_pamphlet a { padding: 1.5rem 0; } } @media only screen and (max-width: 767px) { .con_pamphlet a { padding: 1rem 0; } } .con_pamphlet a span { display: inline-block; border: solid 1px #fff; padding: 1em 8em; } @media only screen and (max-width: 767px) { .con_pamphlet a span { padding: 1em 6em; } } .con_pamphlet a span .txt_main { font-size: 120%; font-weight: bold; color: #fff; text-align: center; } .con_pamphlet a span .txt_main:before { font-family: "Font Awesome 5 Free"; content: '\f518'; font-weight: 900; margin-right: 7px; } .con_pamphlet a span .txt_sub { font-size: 80%; font-weight: bold; color: #fff; text-align: center; } .con_pamphlet a:hover { opacity: 0.7; } /* ------------------------------------------------------------------- .con_pamphlet ------------------------------------------------------------------- */ .con_bn { margin-top: 16px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .con_bn a { transition: 0.2s; } .con_bn a:hover { opacity: 0.8; } /* ------------------------------------------------------------------- .個人情報保護方針 ------------------------------------------------------------------- */ .l-privacy__cnt-pri .box-hotel ul li { display: flex; align-items: center; } /* ------------------------------------------------------------------- 総合TOP ------------------------------------------------------------------- */ .l-homepage__con-map-group .outer-box-acd .box-acd dl dd > div ul li a .t { max-width: 75%; } /* ------------------------------------------------------------------- ホテル一覧 ------------------------------------------------------------------- */ @media only screen and (min-width: 768px) { .l-list__cnt-list .box-list .wrp-list > li .text .name { flex: 1; width: auto; } } @media only screen and (min-width: 1280px) { .l-list__cnt-list .box-list .wrp-list > li .text .ctg { width: 30%; } } @media only screen and (max-width: 1279px) and (min-width: 768px) { .l-list__cnt-list .box-list .wrp-list > li .text .ctg { width: 45%; } }