@charset "UTF-8"; /* =================================================================== CSS information file name : isech.css author : Ability Consultant style info : 更新用グループWEBサイト予約特典CSS =================================================================== */ /* =================================================================== CSS information file name : default.css style info : リセット及びbody初期設定 (このスタイルシートは基本的に変更しない) =================================================================== */ /*--- reset */ @import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Yuji+Syuku&display=swap"); html { overflow-y: scroll; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, article, aside, figure, dialog, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; word-wrap: break-word; overflow-wrap: break-word; font-feature-settings: "palt"; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; word-wrap: break-word; overflow-wrap: break-word; } table { border-collapse: collapse; border-spacing: 0; } caption, th { text-align: left; } q:before, q:after { content: ''; } object, embed { vertical-align: top; } hr, legend { display: none; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } img, abbr, acronym, fieldset { border: 0; } li { list-style-type: none; } sup { vertical-align: super; font-size: 0.5em; } img { vertical-align: top; } i { font-style: normal; } svg { vertical-align: middle; } article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block; } nav ul { list-style: none; } /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* foundation Styleguide 1.0.0 */ /* _variable.scss 変数をまとめて宣言 Styleguide 1.1.0 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* 各カラー設定 ※フォントサイズなどは適宜変更可 Markup:

ベースフォントカラー



背景 color



ポイントカラー

Styleguide 1.1.1.1 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* _functions.scss Styleguide 1.2.0 */ /* %計算 wCon($width , $f-val-columnWidth) Styleguide 1.2.1 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* _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 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* _view.scss レスポンシブ表示切替 Markup:

PCのみ表示



PC・TABのみ表示



TABのみ表示



TAB・SPのみ表示



SPのみ表示



Styleguide 1.5.0 */ /* ----------------------------------------------------------- レスポンシブ表示切替 ----------------------------------------------------------- */ @media only screen and (min-width: 1280px) { .f-view--pc { display: block; } .f-view--tab_sp, .f-view--tab { display: none !important; } } @media print { .f-view--pc { display: block; } .f-view--tab_sp, .f-view--tab { display: none !important; } } @media only screen and (min-width: 768px) { .f-view--sp { display: none !important; } } @media print { .f-view--sp { display: none !important; } } @media only screen and (max-width: 1279px) { .f-view--pc { display: none !important; } .f-view--tab_sp { display: block; } } @media only screen and (min-width: 768px) and (max-width: 1279px) { .f-view--tab { display: block; } } @media only screen and (max-width: 767px) { .f-view--sp { display: block; } .f-view--pc_tab, .f-view--tab { display: none !important; } } /* ----------------------------------------------------------- 設定 ----------------------------------------------------------- */ * { font-family: "Noto Serif JP", serif; } body { background-color: #1d1d1d; } #contents { overflow: hidden; } #contents .btn_fix_reserve { position: fixed; top: 0; right: 0; z-index: 10; } #contents .btn_fix_reserve a { display: flex; align-items: center; font-size: 17px; color: #fff; writing-mode: vertical-rl; background-color: #5f0303; padding: 12px 18px 18px 18px; transition: 0.2s; } @media only screen and (min-width: 768px) and (max-width: 1279px) { #contents .btn_fix_reserve a { font-size: 17px; } } @media only screen and (max-width: 767px) { #contents .btn_fix_reserve a { font-size: 1em; } } @media only screen and (max-width: 767px) { #contents .btn_fix_reserve a { padding: 10px 10px 14px 10px; } } #contents .btn_fix_reserve a:before { content: ''; display: inline-block; width: 28px; height: 28px; background-image: url(../../../lp/ninja_room/images/ic_shuriken02.png); background-repeat: no-repeat; background-size: contain; vertical-align: middle; margin-bottom: 10px; } @media only screen and (max-width: 767px) { #contents .btn_fix_reserve a:before { width: 14px; height: 14px; margin-bottom: 5px; } } #contents .btn_fix_reserve a:hover { opacity: 0.7; } /* ------------------------------------------------------------------- #header ------------------------------------------------------------------- */ #header { max-width: 1920px; width: 100%; margin: 0 auto; position: relative; } #header h1 { opacity: 1; display: flex; flex-direction: column; position: absolute; z-index: 1; } @media only screen and (min-width: 1280px) { #header h1 { top: 40%; left: 16%; } } @media print { #header h1 { top: 40%; left: 16%; } } @media only screen and (min-width: 768px) and (max-width: 1279px) { #header h1 { top: 50%; left: 6%; transform: translateY(-50%); } } @media only screen and (max-width: 767px) { #header h1 { top: 20%; left: 20px; } } #header h1 .title_sub { font-family: "Yuji Syuku", serif; font-weight: 400; font-size: 20px; color: #fff; } @media only screen and (min-width: 768px) and (max-width: 1279px) { #header h1 .title_sub { font-size: 14px; } } @media only screen and (max-width: 767px) { #header h1 .title_sub { font-size: 1em; } } #header h1 .title_main { font-family: "Yuji Syuku", serif; font-weight: 400; font-size: 70px; color: #fff; } @media only screen and (min-width: 768px) and (max-width: 1279px) { #header h1 .title_main { font-size: 50px; } } @media only screen and (max-width: 767px) { #header h1 .title_main { font-size: 3em; } } #header h1:before { content: ''; display: inline-block; background-image: url(../../../lp/ninja_room/images/ic_cloud01.png); background-repeat: no-repeat; background-size: contain; vertical-align: middle; position: absolute; } @media only screen and (min-width: 1280px) { #header h1:before { width: 314px; height: 96px; top: -80px; right: -200px; } } @media print { #header h1:before { width: 314px; height: 96px; top: -80px; right: -200px; } } @media only screen and (min-width: 768px) and (max-width: 1279px) { #header h1:before { width: calc(314px * 0.8); height: 75%; top: -80px; right: -100px; } } @media only screen and (max-width: 767px) { #header h1:before { width: calc(314px * 0.6); height: 75%; top: -40px; right: -100px; } } #header h1:after { content: ''; display: inline-block; background-image: url(../../../lp/ninja_room/images/ic_cloud02.png); background-repeat: no-repeat; background-size: contain; vertical-align: middle; position: absolute; } @media only screen and (min-width: 1280px) { #header h1:after { width: 379px; height: 102px; left: -200px; bottom: -100px; } } @media print { #header h1:after { width: 379px; height: 102px; left: -200px; bottom: -100px; } } @media only screen and (min-width: 768px) and (max-width: 1279px) { #header h1:after { width: calc(379px * 0.8); height: 80%; left: -100px; bottom: -100px; } } @media only screen and (max-width: 767px) { #header h1:after { width: calc(379px * 0.6); height: 80%; left: -80px; bottom: -80px; } } /* ------------------------------------------------------------------- .con_intro ------------------------------------------------------------------- */ .con_intro { background-color: #000; padding: 160px 0; margin: 0 auto; position: relative; } @media only screen and (min-width: 1280px) { .con_intro { max-width: 1920px; } } @media print { .con_intro { max-width: 1920px; } } @media only screen and (max-width: 767px) { .con_intro { padding: 80px 0; } } .con_intro:before { content: ''; display: inline-block; width: 480px; height: 409px; background-image: url(../../../lp/ninja_room/images/ic_moon.png); background-repeat: no-repeat; background-size: contain; vertical-align: middle; position: absolute; top: 0; left: 0; } @media only screen and (max-width: 767px) { .con_intro:before { width: 260px; height: 223px; top: -30px; left: -60px; } } .con_intro:after { content: ''; display: inline-block; background-image: url(../../../lp/ninja_room/images/ic_ninja.png); background-repeat: no-repeat; background-size: contain; vertical-align: middle; position: absolute; animation-name: fade, move_a; animation-fill-mode: backwards, backwards; animation-duration: 15s, 15s; animation-iteration-count: infinite, infinite; animation-timing-function: ease, ease; animation-delay: 3s, 3s; animation-direction: normal, normal; } @media only screen and (min-width: 1280px) { .con_intro:after { width: 299px; height: 313px; left: 8%; bottom: -20px; } } @media print { .con_intro:after { width: 299px; height: 313px; left: 8%; bottom: -20px; } } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_intro:after { width: calc(299px * 0.8); height: 23%; left: 8%; bottom: -40px; z-index: 2; } } @media only screen and (max-width: 767px) { .con_intro:after { width: calc(299px * 0.6); height: 28%; left: 4%; bottom: -40px; z-index: 2; } } @keyframes fade { 40% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } @keyframes move_a { 0% { transform: translateX(-1000px); } 1% { transform: translateX(0); } } .con_intro .inner { position: relative; z-index: 1; } @media only screen and (min-width: 1280px) { .con_intro .inner { display: flex; align-items: center; max-width: 1620px; margin-left: auto; } } @media print { .con_intro .inner { display: flex; align-items: center; max-width: 1620px; margin-left: auto; } } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_intro .inner { width: 95%; margin-left: auto; } } .con_intro .inner .box_txt { flex: 1; } @media only screen and (max-width: 767px) { .con_intro .inner .box_txt { width: 90%; margin: 0 auto; } } .con_intro .inner .box_txt h2 { font-family: "Yuji Syuku", serif; font-weight: 400; font-size: 40px; color: #fff; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_intro .inner .box_txt h2 { font-size: 40px; } } @media only screen and (max-width: 767px) { .con_intro .inner .box_txt h2 { font-size: 2em; } } .con_intro .inner .box_txt .txt_intro { font-size: 17px; color: #fff; line-height: 2; margin-top: 20px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_intro .inner .box_txt .txt_intro { font-size: 17px; } } @media only screen and (max-width: 767px) { .con_intro .inner .box_txt .txt_intro { font-size: 1em; } } .con_intro .inner .box_txt .btn_ninja { width: 400px; margin-top: 40px; } @media only screen and (max-width: 767px) { .con_intro .inner .box_txt .btn_ninja { width: calc(100vw * 0.8); margin: 40px auto 0; } } .con_intro .inner .box_txt .btn_ninja a { box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 17px; background-color: #fff; border: solid 1px #000; padding: 18px 20px 18px 40px; transition: 0.2s; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_intro .inner .box_txt .btn_ninja a { font-size: 17px; } } @media only screen and (max-width: 767px) { .con_intro .inner .box_txt .btn_ninja a { font-size: 1em; } } @media only screen and (max-width: 767px) { .con_intro .inner .box_txt .btn_ninja a { justify-content: center; padding: 18px 20px; } } .con_intro .inner .box_txt .btn_ninja a:after { font-family: "Font Awesome 5 Free"; content: '\f061'; font-weight: 900; } @media only screen and (max-width: 767px) { .con_intro .inner .box_txt .btn_ninja a:after { margin-left: 10px; } } .con_intro .inner .box_txt .btn_ninja a:hover { opacity: 0.7; } @media only screen and (min-width: 1280px) { .con_intro .inner .box_img { max-width: 960px; width: 60%; margin-left: 60px; } } @media print { .con_intro .inner .box_img { max-width: 960px; width: 60%; margin-left: 60px; } } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_intro .inner .box_img { max-width: 960px; width: 100%; margin-top: 60px; } } @media only screen and (max-width: 767px) { .con_intro .inner .box_img { width: 95%; margin-left: auto; margin-top: 40px; } } /* ------------------------------------------------------------------- .con_appeal ------------------------------------------------------------------- */ .con_appeal { padding: 270px 0 200px; margin: 0 auto; position: relative; overflow: hidden; } @media only screen and (min-width: 1280px) { .con_appeal { max-width: 1920px; margin: 0 auto; } } @media print { .con_appeal { max-width: 1920px; margin: 0 auto; } } @media only screen and (max-width: 767px) { .con_appeal { padding: 120px 0 270px; } } .con_appeal:before { content: ''; display: inline-block; background-image: url(../../../lp/ninja_room/images/ic_cloud03.png); background-repeat: no-repeat; background-size: contain; vertical-align: middle; position: absolute; } @media only screen and (min-width: 1280px) { .con_appeal:before { width: 863px; height: 186px; top: 310px; right: -240px; } } @media print { .con_appeal:before { width: 863px; height: 186px; top: 310px; right: -240px; } } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_appeal:before { width: calc(863px * 0.8); height: 10%; top: 360px; right: -350px; } } @media only screen and (max-width: 767px) { .con_appeal:before { width: calc(863px * 0.5); height: 6%; top: 190px; right: -260px; } } .con_appeal:after { content: ''; display: inline-block; background-image: url(../../../lp/ninja_room/images/ic_ninja_cloud.png); background-repeat: no-repeat; background-size: contain; vertical-align: middle; position: absolute; animation-name: move_b; animation-fill-mode: backwards; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: ease; animation-delay: 3s; animation-direction: normal; } @media only screen and (min-width: 1280px) { .con_appeal:after { width: 863px; height: 364px; left: -100px; bottom: 40px; } } @media print { .con_appeal:after { width: 863px; height: 364px; left: -100px; bottom: 40px; } } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_appeal:after { width: calc(863px * 0.8); height: 19%; left: -100px; bottom: 40px; } } @media only screen and (max-width: 767px) { .con_appeal:after { width: calc(863px * 0.5); height: 12%; left: -100px; bottom: 30px; } } @keyframes move_b { 0% { transform: translateX(0); } 2% { transform: translateX(20px); } 4% { transform: translateX(0); } 6% { transform: translateX(20px); } 8% { transform: translateX(0); } 10% { transform: translateX(20px); } 12% { transform: translateX(0); } } .con_appeal .inner { margin: 0 auto; position: relative; z-index: 1; } @media only screen and (min-width: 1280px) { .con_appeal .inner { max-width: 1280px; width: 100%; } } @media print { .con_appeal .inner { max-width: 1280px; width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_appeal .inner { width: 90%; } } @media only screen and (max-width: 767px) { .con_appeal .inner { width: 80%; } } .con_appeal .inner h2 { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .con_appeal .inner h2 .title_fukidashi { display: flex; align-items: center; justify-content: center; width: 111px; height: 75px; color: #fff; background-image: url(../../../lp/ninja_room/images/ic_fukidashi.png); background-repeat: no-repeat; background-size: contain; position: absolute; top: calc(50% - 60px); left: calc(50% - 260px); transform: translateX(-50%) translateY(-50%); } @media only screen and (max-width: 767px) { .con_appeal .inner h2 .title_fukidashi { width: 20%; height: 54%; top: calc(50% - 66%); left: calc(50% - 51%); } } .con_appeal .inner h2 .title_fukidashi span { font-family: "Yuji Syuku", serif; font-weight: 400; font-size: 28px; transform: translateY(-4px) rotate(-5deg); } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_appeal .inner h2 .title_fukidashi span { font-size: 28px; } } @media only screen and (max-width: 767px) { .con_appeal .inner h2 .title_fukidashi span { font-size: 1.2em; } } @media only screen and (max-width: 767px) { .con_appeal .inner h2 .title_fukidashi span { transform: translateX(-2%) translateY(-2%) rotate(-5deg); } } .con_appeal .inner h2 .title_main { font-family: "Yuji Syuku", serif; font-weight: 400; font-size: 50px; color: #fff; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_appeal .inner h2 .title_main { font-size: 50px; } } @media only screen and (max-width: 767px) { .con_appeal .inner h2 .title_main { font-size: 2.6em; } } .con_appeal .inner h2 .title_sub { font-family: "Yuji Syuku", serif; font-weight: 400; font-size: 18px; color: #fff; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_appeal .inner h2 .title_sub { font-size: 18px; } } @media only screen and (max-width: 767px) { .con_appeal .inner h2 .title_sub { font-size: 1em; } } .con_appeal .inner h2:before { content: ''; display: inline-block; width: 70px; height: 70px; background-image: url(../../../lp/ninja_room/images/ic_shuriken01.png); background-repeat: no-repeat; background-size: contain; vertical-align: middle; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); } @media only screen and (max-width: 767px) { .con_appeal .inner h2:before { width: 40px; height: 40px; top: -40px; } } .con_appeal .inner .box_main { margin-top: 60px; } @media only screen and (min-width: 768px) { .con_appeal .inner .box_main { display: flex; flex-wrap: wrap; } } @media print { .con_appeal .inner .box_main { display: flex; flex-wrap: wrap; } } @media only screen and (max-width: 767px) { .con_appeal .inner .box_main { margin-top: 40px; } } @media only screen and (min-width: 1280px) { .con_appeal .inner .box_main .box_con:nth-of-type(1), .con_appeal .inner .box_main .box_con:nth-of-type(3) { width: 45%; margin-right: 10%; } .con_appeal .inner .box_main .box_con:nth-of-type(2), .con_appeal .inner .box_main .box_con:nth-of-type(4) { width: 45%; margin-top: 150px; } } @media print { .con_appeal .inner .box_main .box_con:nth-of-type(1), .con_appeal .inner .box_main .box_con:nth-of-type(3) { width: 45%; margin-right: 10%; } .con_appeal .inner .box_main .box_con:nth-of-type(2), .con_appeal .inner .box_main .box_con:nth-of-type(4) { width: 45%; margin-top: 150px; } } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_appeal .inner .box_main .box_con:nth-of-type(1), .con_appeal .inner .box_main .box_con:nth-of-type(3) { width: 48%; margin-right: 4%; } .con_appeal .inner .box_main .box_con:nth-of-type(2), .con_appeal .inner .box_main .box_con:nth-of-type(4) { width: 48%; margin-top: 150px; } } @media only screen and (max-width: 767px) { .con_appeal .inner .box_main .box_con:nth-of-type(n+2) { margin-top: 40px; } } .con_appeal .inner .box_main .box_con .box_img img { max-width: 800px; width: 100%; } .con_appeal .inner .box_main .box_con h3 { margin-top: -20px; position: relative; z-index: 1; } @media only screen and (min-width: 768px) { .con_appeal .inner .box_main .box_con h3 { text-align: center; } } @media print { .con_appeal .inner .box_main .box_con h3 { text-align: center; } } .con_appeal .inner .box_main .box_con h3 span { display: inline-block; font-family: "Yuji Syuku", serif; font-weight: 400; font-size: 30px; color: #fff; line-height: 1; background-color: #000; padding: 2px 12px 6px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_appeal .inner .box_main .box_con h3 span { font-size: 30px; } } @media only screen and (max-width: 767px) { .con_appeal .inner .box_main .box_con h3 span { font-size: 1.8em; } } .con_appeal .inner .box_main .box_con h3 span:nth-of-type(2) { margin-top: 10px; } @media only screen and (max-width: 767px) { .con_appeal .inner .box_main .box_con h3 span:nth-of-type(2) { margin-top: 5px; } } .con_appeal .inner .box_main .box_con .txt_con { font-size: 17px; color: #fff; line-height: 2; margin-top: 15px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_appeal .inner .box_main .box_con .txt_con { font-size: 17px; } } @media only screen and (max-width: 767px) { .con_appeal .inner .box_main .box_con .txt_con { font-size: 1em; } } @media only screen and (min-width: 768px) { .con_appeal .inner .box_main .box_con .txt_con { text-align: center; } } @media print { .con_appeal .inner .box_main .box_con .txt_con { text-align: center; } } .con_appeal .slick-arrow { transition: 0.2s; position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); } .con_appeal .slick-arrow:hover { cursor: pointer; opacity: 0.8; } .con_appeal .prev-arrow { width: 100px; height: 100px; left: -60px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_appeal .prev-arrow { width: 60px; height: 60px; left: -30px; } } @media only screen and (max-width: 767px) { .con_appeal .prev-arrow { width: 60px; height: 60px; left: -30px; } } .con_appeal .prev-arrow:before { content: ''; display: block; width: 100px; height: 1px; background-color: #786c4f; position: absolute; top: calc(50% - 20px); left: 50%; transform: translateX(-50%) translateY(-50%) rotate(-45deg); } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_appeal .prev-arrow:before { width: 60px; height: 1px; top: calc(50% - 10px); } } @media only screen and (max-width: 767px) { .con_appeal .prev-arrow:before { width: 60px; height: 1px; top: calc(50% - 10px); } } .con_appeal .prev-arrow:after { content: ''; display: block; width: 100px; height: 1px; background-color: #786c4f; position: absolute; top: calc(50% + 20px); left: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_appeal .prev-arrow:after { width: 60px; height: 1px; top: calc(50% + 10px); } } @media only screen and (max-width: 767px) { .con_appeal .prev-arrow:after { width: 60px; height: 1px; top: calc(50% + 10px); } } .con_appeal .next-arrow { width: 100px; height: 100px; right: -60px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_appeal .next-arrow { width: 60px; height: 60px; right: -30px; } } @media only screen and (max-width: 767px) { .con_appeal .next-arrow { width: 60px; height: 60px; right: -30px; } } .con_appeal .next-arrow:before { content: ''; display: block; width: 100px; height: 1px; background-color: #786c4f; position: absolute; top: calc(50% - 20px); left: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_appeal .next-arrow:before { width: 60px; height: 1px; top: calc(50% - 10px); } } @media only screen and (max-width: 767px) { .con_appeal .next-arrow:before { width: 60px; height: 1px; top: calc(50% - 10px); } } .con_appeal .next-arrow:after { content: ''; display: block; width: 100px; height: 1px; background-color: #786c4f; position: absolute; top: calc(50% + 20px); left: 50%; transform: translateX(-50%) translateY(-50%) rotate(-45deg); } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_appeal .next-arrow:after { width: 60px; height: 1px; top: calc(50% + 10px); } } @media only screen and (max-width: 767px) { .con_appeal .next-arrow:after { width: 60px; height: 1px; top: calc(50% + 10px); } } /* ------------------------------------------------------------------- .con_room ------------------------------------------------------------------- */ .con_room { background-color: #000; padding: 270px 0 200px; position: relative; } @media only screen and (min-width: 1280px) { .con_room { max-width: 1920px; margin: 0 auto; } } @media print { .con_room { max-width: 1920px; margin: 0 auto; } } @media only screen and (max-width: 767px) { .con_room { padding: 120px 0 80px; } } .con_room:after { content: ''; display: inline-block; background-image: url(../../../lp/ninja_room/images/ic_cloud04.png); background-repeat: no-repeat; background-size: contain; vertical-align: middle; position: absolute; } @media only screen and (min-width: 1280px) { .con_room:after { width: 698px; height: 170px; top: 400px; right: -100px; } } @media print { .con_room:after { width: 698px; height: 170px; top: 400px; right: -100px; } } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_room:after { width: calc(698px * 0.8); height: 9%; top: 350px; right: -100px; } } @media only screen and (max-width: 767px) { .con_room:after { width: calc(698px * 0.6); height: 10%; top: 150px; right: -200px; } } .con_room h2 { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; z-index: 1; } .con_room h2 .title_main { font-family: "Yuji Syuku", serif; font-weight: 400; font-size: 50px; color: #fff; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_room h2 .title_main { font-size: 50px; } } @media only screen and (max-width: 767px) { .con_room h2 .title_main { font-size: 2.6em; } } .con_room h2 .title_sub { font-family: "Yuji Syuku", serif; font-weight: 400; font-size: 18px; color: #fff; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_room h2 .title_sub { font-size: 18px; } } @media only screen and (max-width: 767px) { .con_room h2 .title_sub { font-size: 1em; } } .con_room h2:before { content: ''; display: inline-block; width: 70px; height: 70px; background-image: url(../../../lp/ninja_room/images/ic_shuriken01.png); background-repeat: no-repeat; background-size: contain; vertical-align: middle; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); } @media only screen and (max-width: 767px) { .con_room h2:before { width: 40px; height: 40px; top: -40px; } } .con_room .box_main { margin-top: 60px; position: relative; z-index: 1; } @media only screen and (min-width: 1280px) { .con_room .box_main { display: flex; align-items: center; max-width: 1620px; margin-right: auto; } } @media print { .con_room .box_main { display: flex; align-items: center; max-width: 1620px; margin-right: auto; } } @media only screen and (max-width: 767px) { .con_room .box_main { margin-top: 40px; } } @media only screen and (min-width: 1280px) { .con_room .box_main .box_slider { width: 65%; margin-right: 100px; } } @media print { .con_room .box_main .box_slider { width: 65%; margin-right: 100px; } } .con_room .box_main .box_slider .lst_detail .box_detail img { width: 100%; } .con_room .box_main .box_txt { flex: 1; } @media only screen and (max-width: 1279px) { .con_room .box_main .box_txt { width: 90%; margin: 10px auto 0; } } .con_room .box_main .box_txt .txt_room { font-size: 17px; color: #fff; line-height: 2; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_room .box_main .box_txt .txt_room { font-size: 17px; } } @media only screen and (max-width: 767px) { .con_room .box_main .box_txt .txt_room { font-size: 1em; } } .con_room .box_main .box_txt table { width: 100%; margin-top: 30px; } @media only screen and (max-width: 767px) { .con_room .box_main .box_txt table { margin-top: 10px; } } .con_room .box_main .box_txt table tr th { width: 36%; font-size: 17px; color: #fff; border-top: solid 1px #786c4f; padding: 10px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_room .box_main .box_txt table tr th { font-size: 17px; } } @media only screen and (max-width: 767px) { .con_room .box_main .box_txt table tr th { font-size: 1em; } } @media only screen and (max-width: 767px) { .con_room .box_main .box_txt table tr th { padding: 8px 10px; } } .con_room .box_main .box_txt table tr th:last-of-type { border-bottom: solid 1px #786c4f; } .con_room .box_main .box_txt table tr td { font-size: 17px; color: #fff; border-top: solid 1px #1d1d1d; padding: 10px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_room .box_main .box_txt table tr td { font-size: 17px; } } @media only screen and (max-width: 767px) { .con_room .box_main .box_txt table tr td { font-size: 1em; } } @media only screen and (max-width: 767px) { .con_room .box_main .box_txt table tr td { padding: 8px 10px; } } .con_room .box_main .box_txt table tr td:last-of-type { border-bottom: solid 1px #1d1d1d; } .con_room .box_main .box_txt .btn_reserve { width: 400px; margin-top: 40px; } @media only screen and (max-width: 767px) { .con_room .box_main .box_txt .btn_reserve { width: calc(100vw * 0.8); margin: 40px auto 0; } } .con_room .box_main .box_txt .btn_reserve a { box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 17px; color: #fff; background-color: #5f0303; padding: 18px 20px 18px 40px; transition: 0.2s; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_room .box_main .box_txt .btn_reserve a { font-size: 17px; } } @media only screen and (max-width: 767px) { .con_room .box_main .box_txt .btn_reserve a { font-size: 1em; } } @media only screen and (max-width: 767px) { .con_room .box_main .box_txt .btn_reserve a { justify-content: center; padding: 18px 20px; } } .con_room .box_main .box_txt .btn_reserve a:after { font-family: "Font Awesome 5 Free"; content: '\f061'; font-weight: 900; } @media only screen and (max-width: 767px) { .con_room .box_main .box_txt .btn_reserve a:after { margin-left: 10px; } } .con_room .box_main .box_txt .btn_reserve a:hover { opacity: 0.7; } #slider_room .slide-dots { display: flex; justify-content: center; position: relative; bottom: 30px; } #slider_room .slide-dots li { width: 12px; height: 12px; margin: 0 14px 0 0; } #slider_room .slide-dots li:last-of-type { margin: 0; } #slider_room .slide-dots li button { width: 12px; height: 12px; background-color: transparent; border: solid 1px #786c4f; text-indent: -9999px; padding: 0; transform: rotate(45deg); } #slider_room .slide-dots li.slick-active button { background-color: #786c4f; } .slick-dotted.slick-slider { margin-bottom: 0; } /* ------------------------------------------------------------------- .con_hotel ------------------------------------------------------------------- */ .con_hotel { background-color: #f0f0f0; padding: 270px 0 200px; margin: 170px auto 0; } @media only screen and (min-width: 1280px) { .con_hotel { max-width: 1920px; width: 100%; } } @media print { .con_hotel { max-width: 1920px; width: 100%; } } @media only screen and (max-width: 767px) { .con_hotel { padding: 120px 0 80px; margin: 80px auto 0; } } .con_hotel .inner { margin: 0 auto; position: relative; z-index: 1; } @media only screen and (min-width: 1280px) { .con_hotel .inner { max-width: 1280px; width: 100%; } } @media print { .con_hotel .inner { max-width: 1280px; width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_hotel .inner { width: 90%; } } @media only screen and (max-width: 767px) { .con_hotel .inner { width: 80%; } } .con_hotel .inner h2 { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .con_hotel .inner h2 .title_main { font-family: "Yuji Syuku", serif; font-weight: 400; font-size: 50px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_hotel .inner h2 .title_main { font-size: 50px; } } @media only screen and (max-width: 767px) { .con_hotel .inner h2 .title_main { font-size: 2.6em; } } .con_hotel .inner h2 .title_sub { font-family: "Yuji Syuku", serif; font-weight: 400; font-size: 18px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_hotel .inner h2 .title_sub { font-size: 18px; } } @media only screen and (max-width: 767px) { .con_hotel .inner h2 .title_sub { font-size: 1em; } } .con_hotel .inner h2:before { content: ''; display: inline-block; width: 70px; height: 70px; background-image: url(../../../lp/ninja_room/images/ic_shuriken01.png); background-repeat: no-repeat; background-size: contain; vertical-align: middle; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); } @media only screen and (max-width: 767px) { .con_hotel .inner h2:before { width: 40px; height: 40px; top: -40px; } } .con_hotel .inner .box_main { margin-top: 60px; } @media only screen and (min-width: 768px) { .con_hotel .inner .box_main { display: flex; align-items: center; } } @media print { .con_hotel .inner .box_main { display: flex; align-items: center; } } @media only screen and (max-width: 767px) { .con_hotel .inner .box_main { margin-top: 40px; } } @media only screen and (min-width: 1280px) { .con_hotel .inner .box_main .box_img { max-width: 555px; width: 60%; margin-right: 60px; } } @media print { .con_hotel .inner .box_main .box_img { max-width: 555px; width: 60%; margin-right: 60px; } } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_hotel .inner .box_main .box_img { width: 50%; margin-right: 5%; } } .con_hotel .inner .box_main .box_txt { flex: 1; } @media only screen and (max-width: 767px) { .con_hotel .inner .box_main .box_txt { margin-top: 15px; } } .con_hotel .inner .box_main .box_txt .txt_route span { font-family: "Yuji Syuku", serif; font-weight: 400; font-size: 15px; color: #fff; line-height: 1; background-color: #000; padding: 0 8px 3px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_hotel .inner .box_main .box_txt .txt_route span { font-size: 15px; } } @media only screen and (max-width: 767px) { .con_hotel .inner .box_main .box_txt .txt_route span { font-size: 1em; } } .con_hotel .inner .box_main .box_txt h3 { font-family: "Yuji Syuku", serif; font-weight: 500; font-size: 30px; border-bottom: solid 1px #000; padding-bottom: 10px; margin-top: 20px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_hotel .inner .box_main .box_txt h3 { font-size: 30px; } } @media only screen and (max-width: 767px) { .con_hotel .inner .box_main .box_txt h3 { font-size: 1.8em; } } @media only screen and (max-width: 767px) { .con_hotel .inner .box_main .box_txt h3 { margin-top: 10px; } } .con_hotel .inner .box_main .box_txt .txt_access { line-height: 2; margin-top: 20px; } .con_hotel .inner .box_main .box_txt .btn_hotel { width: 400px; margin-top: 40px; } @media only screen and (max-width: 767px) { .con_hotel .inner .box_main .box_txt .btn_hotel { width: calc(100vw * 0.8); margin: 40px auto 0; } } .con_hotel .inner .box_main .box_txt .btn_hotel a { box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 17px; background-color: #fff; border: solid 1px #000; padding: 18px 20px 18px 40px; transition: 0.2s; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_hotel .inner .box_main .box_txt .btn_hotel a { font-size: 17px; } } @media only screen and (max-width: 767px) { .con_hotel .inner .box_main .box_txt .btn_hotel a { font-size: 1em; } } @media only screen and (max-width: 767px) { .con_hotel .inner .box_main .box_txt .btn_hotel a { justify-content: center; padding: 18px 20px; } } .con_hotel .inner .box_main .box_txt .btn_hotel a:after { font-family: "Font Awesome 5 Free"; content: '\f061'; font-weight: 900; } @media only screen and (max-width: 767px) { .con_hotel .inner .box_main .box_txt .btn_hotel a:after { margin-left: 10px; } } .con_hotel .inner .box_main .box_txt .btn_hotel a:hover { opacity: 0.7; } /* ------------------------------------------------------------------- #footer ------------------------------------------------------------------- */ #footer { background-image: url(../../../lp/ninja_room/images/bg_nami.png); background-repeat: no-repeat; background-position: bottom 0 left 0; padding: 300px 0 30px; } @media only screen and (min-width: 1280px) { #footer { max-width: 1920px; margin: 0 auto; } } @media print { #footer { max-width: 1920px; margin: 0 auto; } } @media only screen and (max-width: 767px) { #footer { background-size: 250%; background-position: bottom 0 left 40%; padding: 200px 0 20px; } } #footer .inner { margin: 0 auto; position: relative; z-index: 1; } @media only screen and (min-width: 1280px) { #footer .inner { max-width: 1280px; } } @media print { #footer .inner { max-width: 1280px; } } @media only screen and (min-width: 768px) and (max-width: 1279px) { #footer .inner { width: 90%; } } @media only screen and (max-width: 767px) { #footer .inner { width: 95%; } } @media only screen and (min-width: 768px) and (max-width: 1279px) { #footer .inner h2 { text-align: center; } } @media only screen and (max-width: 767px) { #footer .inner h2 { width: 70%; margin: 0 auto; } } #footer .inner .box_list { margin-top: 50px; } #footer .inner .box_list .lst_detail { display: flex; flex-wrap: wrap; } @media only screen and (min-width: 1280px) { #footer .inner .box_list .lst_detail { padding: 0 60px; } } @media print { #footer .inner .box_list .lst_detail { padding: 0 60px; } } @media only screen and (min-width: 1280px) { #footer .inner .box_list .lst_detail .box_detail { width: calc(100% / 4); } } @media print { #footer .inner .box_list .lst_detail .box_detail { width: calc(100% / 4); } } @media only screen and (min-width: 768px) and (max-width: 1279px) { #footer .inner .box_list .lst_detail .box_detail { width: calc(100% / 3); } } @media only screen and (max-width: 767px) { #footer .inner .box_list .lst_detail .box_detail { width: calc(100% / 2); } } #footer .inner .box_list .lst_detail .box_detail a { font-size: 15px; color: #fff; line-height: 2; } @media only screen and (min-width: 768px) and (max-width: 1279px) { #footer .inner .box_list .lst_detail .box_detail a { font-size: 15px; } } @media only screen and (max-width: 767px) { #footer .inner .box_list .lst_detail .box_detail a { font-size: 0.8em; } } #footer .inner .txt_copy { font-size: 15px; color: #fff; color: #fff; text-align: center; margin-top: 200px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { #footer .inner .txt_copy { font-size: 15px; } } @media only screen and (max-width: 767px) { #footer .inner .txt_copy { font-size: 0.8em; } } /* ------------------------------------------------------------------- .con_pamphlet ------------------------------------------------------------------- */