@charset "UTF-8";
/* ===================================================================
CSS information
file name : isech.css author : Ability Consultant style info : 更新用グループWEBサイト予約特典CSS
=================================================================== */
/* -----------------------------------------------------------
スタイルガイド用記述
----------------------------------------------------------- */
/*
foundation
Styleguide 1.0.0
*/
/*
_variable.scss
変数をまとめて宣言
Styleguide 1.1.0
*/
/* -----------------------------------------------------------
スタイルガイド用記述
----------------------------------------------------------- */
/*
各カラー設定
※フォントサイズなどは適宜変更可
Markup:
ベースフォントカラー
背景 color
ポイントカラー
Styleguide 1.1.1.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
*/
/* -----------------------------------------------------------
レスポンシブ表示切替
----------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700&family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700&display=swap");
@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; } }
.h2 { display: none; }
/* -----------------------------------------------------------
.con_main
----------------------------------------------------------- */
.con_main { margin-top: 20px; position: relative; }
.con_main h2 { position: absolute; }
@media only screen and (min-width: 768px) { .con_main h2 { top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } }
@media print { .con_main h2 { top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } }
@media only screen and (max-width: 767px) { .con_main h2 { top: 20%; left: 50%; transform: translateX(-50%); } }
.con_main h2 .en { font-family: 'Kumbh Sans', 'Noto Sans JP', sans-serif; font-weight: 100; font-size: 80px; color: #fff; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_main h2 .en { font-size: 80px; } }
@media only screen and (max-width: 767px) { .con_main h2 .en { font-size: 60px; } }
.con_main h2 .jp { font-family: 'Kumbh Sans', 'Noto Sans JP', sans-serif; font-weight: 300; font-size: 24px; color: #fff; letter-spacing: 0.05em; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_main h2 .jp { font-size: 24px; } }
@media only screen and (max-width: 767px) { .con_main h2 .jp { font-size: 18px; } }
/* -----------------------------------------------------------
.con_intro
----------------------------------------------------------- */
.con_intro { margin-top: 80px; }
.con_intro .box_img { width: 400px; margin: 0 auto; }
@media only screen and (max-width: 767px) { .con_intro .box_img { width: 80%; } }
.con_intro .txt_intro { font-family: 'Kumbh Sans', 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 14px; text-align: center; letter-spacing: 0.05em; line-height: 2em; margin-top: 40px; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_intro .txt_intro { font-size: 14px; } }
@media only screen and (max-width: 767px) { .con_intro .txt_intro { font-size: 14px; } }
/* -----------------------------------------------------------
.con_entry
----------------------------------------------------------- */
.con_entry { background-color: #0082a5; padding: 80px 0; margin-top: 80px; }
.con_entry h3 { text-align: center; }
.con_entry h3 .en { font-family: 'Kumbh Sans', 'Noto Sans JP', sans-serif; font-weight: 100; font-size: 40px; color: #fff; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_entry h3 .en { font-size: 40px; } }
@media only screen and (max-width: 767px) { .con_entry h3 .en { font-size: 36px; } }
.con_entry h3 .jp { font-family: 'Kumbh Sans', 'Noto Sans JP', sans-serif; font-weight: 300; font-size: 20px; color: #fff; letter-spacing: 0.05em; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_entry h3 .jp { font-size: 20px; } }
@media only screen and (max-width: 767px) { .con_entry h3 .jp { font-size: 18px; } }
.con_entry .txt_entry { font-family: 'Kumbh Sans', 'Noto Sans JP', sans-serif; font-weight: 300; font-size: 14px; color: #fff; text-align: center; letter-spacing: 0.05em; line-height: 2em; margin-top: 40px; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_entry .txt_entry { font-size: 14px; } }
@media only screen and (max-width: 767px) { .con_entry .txt_entry { font-size: 14px; } }
.con_entry .box_btn { margin-top: 40px; }
@media only screen and (min-width: 768px) { .con_entry .box_btn .lst_contents { display: flex; justify-content: center; } }
@media print { .con_entry .box_btn .lst_contents { display: flex; justify-content: center; } }
.con_entry .box_btn .lst_contents .box_content { width: 240px; }
@media only screen and (min-width: 768px) { .con_entry .box_btn .lst_contents .box_content:nth-of-type(n+2) { margin-left: 10px; } }
@media print { .con_entry .box_btn .lst_contents .box_content:nth-of-type(n+2) { margin-left: 10px; } }
@media only screen and (max-width: 767px) { .con_entry .box_btn .lst_contents .box_content { margin: 0 auto; }
.con_entry .box_btn .lst_contents .box_content:nth-of-type(n+2) { margin-top: 10px; } }
.con_entry .box_btn .lst_contents .box_content a { display: block; width: 100%; font-family: 'Kumbh Sans', 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 14px; color: #fff; text-align: center; letter-spacing: 0.1em; background-color: #0082a5; border: solid 1px #fff; padding: 15px 0; transition: 0.3s; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_entry .box_btn .lst_contents .box_content a { font-size: 14px; } }
@media only screen and (max-width: 767px) { .con_entry .box_btn .lst_contents .box_content a { font-size: 14px; } }
.con_entry .box_btn .lst_contents .box_content a:hover { color: #0082a5; background-color: #fff; }
/* -----------------------------------------------------------
.con_version
----------------------------------------------------------- */
.con_version { margin-top: 80px; position: relative; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_version { margin-top: 120px; } }
@media only screen and (min-width: 768px) { .con_version .inner { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } }
@media print { .con_version .inner { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } }
@media only screen and (max-width: 767px) { .con_version .inner { margin-top: 40px; } }
.con_version .inner .box_txt { position: relative; }
@media only screen and (min-width: 768px) { .con_version .inner .box_txt { width: 50%; margin-right: auto; background-color: rgba(255, 255, 255, 0.5); }
.con_version .inner .box_txt:after { content: ''; display: block; width: 60px; height: 100%; background-color: rgba(255, 255, 255, 0.5); position: absolute; top: 0; right: -60px; } }
@media print { .con_version .inner .box_txt { width: 50%; margin-right: auto; background-color: rgba(255, 255, 255, 0.5); }
.con_version .inner .box_txt:after { content: ''; display: block; width: 60px; height: 100%; background-color: rgba(255, 255, 255, 0.5); position: absolute; top: 0; right: -60px; } }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_version .inner .box_txt { width: 55%; } }
.con_version .inner .box_txt h3 .en { font-family: 'Kumbh Sans', 'Noto Sans JP', sans-serif; font-weight: 100; font-size: 40px; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_version .inner .box_txt h3 .en { font-size: 40px; } }
@media only screen and (max-width: 767px) { .con_version .inner .box_txt h3 .en { font-size: 36px; } }
.con_version .inner .box_txt h3 .jp { font-family: 'Kumbh Sans', 'Noto Sans JP', sans-serif; font-weight: 300; font-size: 20px; letter-spacing: 0.05em; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_version .inner .box_txt h3 .jp { font-size: 20px; } }
@media only screen and (max-width: 767px) { .con_version .inner .box_txt h3 .jp { font-size: 18px; } }
.con_version .inner .box_txt .txt_main { font-family: 'Kumbh Sans', 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 14px; letter-spacing: 0.05em; line-height: 2em; margin-top: 20px; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_version .inner .box_txt .txt_main { font-size: 14px; } }
@media only screen and (max-width: 767px) { .con_version .inner .box_txt .txt_main { font-size: 14px; } }
.con_version .inner .box_txt .btn_version { width: 240px; margin-top: 40px; }
@media only screen and (max-width: 767px) { .con_version .inner .box_txt .btn_version { margin: 40px auto 0; } }
.con_version .inner .box_txt .btn_version a { display: block; width: 100%; font-family: 'Kumbh Sans', 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 14px; color: #fff; text-align: center; letter-spacing: 0.1em; background-color: #0082a5; border: solid 1px #0082a5; padding: 15px 0; transition: 0.3s; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_version .inner .box_txt .btn_version a { font-size: 14px; } }
@media only screen and (max-width: 767px) { .con_version .inner .box_txt .btn_version a { font-size: 14px; } }
.con_version .inner .box_txt .btn_version a:hover { color: #0082a5; background-color: #fff; }
@media only screen and (min-width: 1280px) { .con_version .box_img { text-align: right; } }
@media print { .con_version .box_img { text-align: right; } }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_version .box_img { width: 50%; margin-left: auto; } }
/* -----------------------------------------------------------
.con_details
----------------------------------------------------------- */
.con_details { margin-top: 100px; position: relative; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_details { margin-top: 120px; } }
@media only screen and (min-width: 768px) { .con_details .inner { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } }
@media print { .con_details .inner { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } }
@media only screen and (max-width: 767px) { .con_details .inner { margin-top: 40px; } }
.con_details .inner .box_txt { position: relative; }
@media only screen and (min-width: 768px) { .con_details .inner .box_txt { width: 50%; background-color: rgba(255, 255, 255, 0.5); padding: 60px 0; margin-left: auto; }
.con_details .inner .box_txt:after { content: ''; display: block; width: 60px; height: 100%; background-color: rgba(255, 255, 255, 0.5); position: absolute; top: 0; left: -60px; } }
@media print { .con_details .inner .box_txt { width: 50%; background-color: rgba(255, 255, 255, 0.5); padding: 60px 0; margin-left: auto; }
.con_details .inner .box_txt:after { content: ''; display: block; width: 60px; height: 100%; background-color: rgba(255, 255, 255, 0.5); position: absolute; top: 0; left: -60px; } }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_details .inner .box_txt { width: 55%; } }
.con_details .inner .box_txt h3 .en { font-family: 'Kumbh Sans', 'Noto Sans JP', sans-serif; font-weight: 100; font-size: 40px; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_details .inner .box_txt h3 .en { font-size: 40px; } }
@media only screen and (max-width: 767px) { .con_details .inner .box_txt h3 .en { font-size: 36px; } }
.con_details .inner .box_txt h3 .jp { font-family: 'Kumbh Sans', 'Noto Sans JP', sans-serif; font-weight: 300; font-size: 20px; letter-spacing: 0.05em; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_details .inner .box_txt h3 .jp { font-size: 20px; } }
@media only screen and (max-width: 767px) { .con_details .inner .box_txt h3 .jp { font-size: 18px; } }
.con_details .inner .box_txt .txt_main { font-family: 'Kumbh Sans', 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 14px; letter-spacing: 0.05em; line-height: 2em; margin-top: 20px; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_details .inner .box_txt .txt_main { font-size: 14px; } }
@media only screen and (max-width: 767px) { .con_details .inner .box_txt .txt_main { font-size: 14px; } }
.con_details .inner .box_txt .btn_version { width: 240px; margin-top: 40px; }
@media only screen and (max-width: 767px) { .con_details .inner .box_txt .btn_version { margin: 40px auto 0; } }
.con_details .inner .box_txt .btn_version a { display: block; width: 100%; font-family: 'Kumbh Sans', 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 14px; color: #fff; text-align: center; letter-spacing: 0.1em; background-color: #0082a5; border: solid 1px #0082a5; padding: 15px 0; transition: 0.3s; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_details .inner .box_txt .btn_version a { font-size: 14px; } }
@media only screen and (max-width: 767px) { .con_details .inner .box_txt .btn_version a { font-size: 14px; } }
.con_details .inner .box_txt .btn_version a:hover { color: #0082a5; background-color: #fff; }
@media only screen and (min-width: 1280px) { .con_details .box_img { text-align: left; } }
@media print { .con_details .box_img { text-align: left; } }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_details .box_img { width: 50%; margin-right: auto; } }
/* -----------------------------------------------------------
設定
----------------------------------------------------------- */
/* -------------------------------------------------------------------
.con_pamphlet
------------------------------------------------------------------- */