@charset "UTF-8";
/* ===================================================================
CSS information
 file name  : group.css author     : Ability Consultant style info :  団体予約のSASS
=================================================================== */
/* -----------------------------------------------------------
	スタイルガイド用記述
----------------------------------------------------------- */
/*
foundation

Styleguide 1.0.0
*/
/*
_variable.scss

変数をまとめて宣言

Styleguide 1.1.0
*/
/* -----------------------------------------------------------
	スタイルガイド用記述
----------------------------------------------------------- */
/*
各カラー設定

※フォントサイズなどは適宜変更可

Markup:
<P style="color:$f-val-FontColor; font-size: 1.6em; line-height: 1.4em;">ベースフォントカラー</p>
<br><br>
<p>背景 color</p>
<span style="background-color:$f-val-bgcolor; width:60px; height:60px; display: inline-block;"></span>
<span style="background-color:$f-val-bgcolor-secondary; width:60px; height:60px; display: inline-block;"></span>
<span style="background-color:$f-val-bgcolor-tertiary; width:60px; height:60px; display: inline-block;"></span>
<br><br>
<p>ポイントカラー</p>

Styleguide 1.1.1.1
*/
/* -----------------------------------------------------------
	スタイルガイド用記述
----------------------------------------------------------- */
/*
_mixins.scss

Styleguide 1.3.0
*/
/* -----------------------------------------------------------
	スタイルガイド用記述
----------------------------------------------------------- */
/*
各デバイス別処理 

@include mq($device) {<br>
	//処理<br>
};<br><br>
$device : pc <small>or</small> tab <small>or</small> sp <small>or</small> pc_tab <small>or</small> tab_sp <small>or</small> tab_l <small>or</small> tab_s <small>or</small> sp_l <small>or</small> sp_s

Styleguide 1.3.1
*/
/* -----------------------------------------------------------
	スタイルガイド用記述
----------------------------------------------------------- */
/*
フォントサイズ指定

@include fsz(任意のサイズ,親要素のサイズ);<br>
※px不要

Styleguide 1.3.1.1
*/
/* -----------------------------------------------------------
	スタイルガイド用記述
----------------------------------------------------------- */
/*
値を振り分け(choiceValue)

@include cV(プロパティ,pc幅,tab~sp幅);<br>
<small>or</small><br>
@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:
<br><br>
<P class="f-view--pc">PCのみ表示</p>
<br><br>
<P class="f-view--pc_tab">PC・TABのみ表示</p>
<br><br>
<P class="f-view--tab">TABのみ表示</p>
<br><br>
<P class="f-view--tab_sp">TAB・SPのみ表示</p>
<br><br>
<P class="f-view--sp">SPのみ表示</p>
<br><br>

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; } }
/* -----------------------------------------------------------
	.con_intro
----------------------------------------------------------- */
.con_intro { margin-top: 40px; }
.con_intro .txt_intro { font-size: 18px; text-align: center; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_intro .txt_intro { font-size: 18px; } }
@media only screen and (max-width: 767px) { .con_intro .txt_intro { font-size: 16px; } }
.con_intro .btn_intro { text-align: center; margin-top: 20px; }
.con_intro .btn_intro a { display: inline-block; font-size: 18px; color: #fff; background-color: #00a19e; border-radius: 5px; padding: 10px 40px; transition: 0.3s; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_intro .btn_intro a { font-size: 18px; } }
@media only screen and (max-width: 767px) { .con_intro .btn_intro a { font-size: 16px; } }
.con_intro .btn_intro a:after { content: "\f0a9"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: 10px; }
.con_intro .btn_intro a:hover { opacity: 0.7; }

/* -----------------------------------------------------------
	.con_group
----------------------------------------------------------- */
.con_group { margin-top: 80px; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_group { width: 80% !important; } }
.con_group h2 { font-weight: 400; }
.con_group h2 .jp { display: block; font-size: 24px; color: #00a19e; text-align: center; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_group h2 .jp { font-size: 24px; } }
@media only screen and (max-width: 767px) { .con_group h2 .jp { font-size: 20px; } }
.con_group h2 .en { display: block; font-family: Roboto Light, serif; font-size: 54px; text-align: center; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_group h2 .en { font-size: 54px; } }
@media only screen and (max-width: 767px) { .con_group h2 .en { font-size: 40px; } }
.con_group h2 .en .green { color: #00a19e; }
.con_group .box_main { margin-top: 80px; }
@media only screen and (max-width: 767px) { .con_group .box_main { margin-top: 40px; } }
@media only screen and (min-width: 1280px) { .con_group .box_main > ul > li { display: flex; align-items: center; } }
@media print { .con_group .box_main > ul > li { display: flex; align-items: center; } }
.con_group .box_main > ul > li.hoge { position: relative; }
.con_group .box_main > ul > li.hoge:after { content: ''; width: 100vw; height: 100vw; background-color: #eee; background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png"); position: absolute; top: 300px; left: 200px; z-index: -1; opacity: 0.4; }
.con_group .box_main > ul > li.fuga { position: relative; }
.con_group .box_main > ul > li.fuga:after { content: ''; width: 100vw; height: 100vw; background-color: #eee; background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png"); position: absolute; top: 50px; right: 200px; z-index: -1; opacity: 0.4; }
@media only screen and (min-width: 1280px) { .con_group .box_main > ul > li .box_txt { width: 60%; } }
@media print { .con_group .box_main > ul > li .box_txt { width: 60%; } }
.con_group .box_main > ul > li .box_txt h3 { display: flex; align-items: center; font-weight: 400; }
.con_group .box_main > ul > li .box_txt h3 .num { display: flex; justify-content: center; align-items: center; height: 90px; width: 90px; font-size: 48px; color: #fff; background-color: #00a19e; border: 6px solid #b7b7b7; border-radius: 10000px; margin-right: 20px; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_group .box_main > ul > li .box_txt h3 .num { font-size: 48px; } }
@media only screen and (max-width: 767px) { .con_group .box_main > ul > li .box_txt h3 .num { font-size: 32px; } }
@media only screen and (max-width: 767px) { .con_group .box_main > ul > li .box_txt h3 .num { height: 60px; width: 60px; border: 4px solid #b7b7b7; margin-right: 10px; } }
.con_group .box_main > ul > li .box_txt h3 .main { flex: 1; display: block; font-size: 26px; color: #00a19e; line-height: 1.4em; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_group .box_main > ul > li .box_txt h3 .main { font-size: 26px; } }
@media only screen and (max-width: 767px) { .con_group .box_main > ul > li .box_txt h3 .main { font-size: 20px; } }
.con_group .box_main > ul > li .box_txt > .box_img { margin-top: 30px; }
.con_group .box_main > ul > li .box_txt > .box_img img { position: relative; }
.con_group .box_main > ul > li .box_txt > .box_img img:after { content: ''; width: 100%; height: 100%; border: #eee; position: absolute; top: -10px; left: -10px; z-index: -1px; }
.con_group .box_main > ul > li .box_txt .txt_main { font-size: 18px; line-height: 1.8em; margin-top: 30px; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_group .box_main > ul > li .box_txt .txt_main { font-size: 18px; } }
@media only screen and (max-width: 767px) { .con_group .box_main > ul > li .box_txt .txt_main { font-size: 16px; } }
.con_group .box_main > ul > li .box_txt .txt_main .red { font-size: 130%; color: #f00; }
.con_group .box_main > ul > li .box_txt .box_sub { display: flex; margin-top: 30px; }
.con_group .box_main > ul > li .box_txt .box_sub .box_img { width: calc(50% - 5px); }
.con_group .box_main > ul > li .box_txt .box_sub .box_img:nth-of-type(n+2) { margin-left: 10px; }
@media only screen and (max-width: 767px) { .con_group .box_main > ul > li .box_txt .box_sub .box_img { width: calc(50% - 2.5px); }
  .con_group .box_main > ul > li .box_txt .box_sub .box_img:nth-of-type(n+2) { margin-left: 5px; } }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_group .box_main > ul > li .box_txt .box_sub { margin-top: 10px; } }
@media only screen and (max-width: 767px) { .con_group .box_main > ul > li .box_txt .box_sub { margin-top: 5px; } }
.con_group .box_main > ul > li .box_txt table { width: 100%; margin-top: 20px; }
.con_group .box_main > ul > li .box_txt table tr th { width: 200px; font-weight: 400; font-size: 16px; color: #fff; text-align: center; background-color: #00a19e; border-top: 1px solid #00a19e; border-bottom: 1px solid #00a19e; padding: 6px 0; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_group .box_main > ul > li .box_txt table tr th { font-size: 16px; } }
@media only screen and (max-width: 767px) { .con_group .box_main > ul > li .box_txt table tr th { font-size: 14px; } }
@media only screen and (max-width: 767px) { .con_group .box_main > ul > li .box_txt table tr th { width: 140px; } }
.con_group .box_main > ul > li .box_txt table tr td { font-size: 16px; border-top: 1px solid #00a19e; border-bottom: 1px solid #00a19e; padding: 6px 20px; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_group .box_main > ul > li .box_txt table tr td { font-size: 16px; } }
@media only screen and (max-width: 767px) { .con_group .box_main > ul > li .box_txt table tr td { font-size: 14px; } }
.con_group .box_main > ul > li > .box_img img { filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3)); }
@media only screen and (min-width: 1280px) { .con_group .box_main > ul > li:nth-of-type(even) > .box_img { margin-left: 60px; } }
@media print { .con_group .box_main > ul > li:nth-of-type(even) > .box_img { margin-left: 60px; } }
@media only screen and (min-width: 1280px) { .con_group .box_main > ul > li:nth-of-type(odd) { flex-direction: row-reverse; }
  .con_group .box_main > ul > li:nth-of-type(odd) > .box_img { margin-right: 60px; } }
@media print { .con_group .box_main > ul > li:nth-of-type(odd) { flex-direction: row-reverse; }
  .con_group .box_main > ul > li:nth-of-type(odd) > .box_img { margin-right: 60px; } }
.con_group .box_main > ul > li:nth-of-type(n+2) { margin-top: 100px; }
@media only screen and (max-width: 767px) { .con_group .box_main > ul > li:nth-of-type(n+2) { margin-top: 60px; } }

/* -----------------------------------------------------------
	.con_foot
----------------------------------------------------------- */
.con_foot { margin-top: 80px; }
.con_foot .btn_foot { text-align: center; }
.con_foot .btn_foot a { display: inline-block; font-size: 18px; color: #fff; background-color: #00a19e; border-radius: 5px; padding: 10px 40px; transition: 0.3s; }
@media only screen and (min-width: 768px) and (max-width: 1279px) { .con_foot .btn_foot a { font-size: 18px; } }
@media only screen and (max-width: 767px) { .con_foot .btn_foot a { font-size: 16px; } }
.con_foot .btn_foot a:after { content: "\f0a9"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: 10px; }
.con_foot .btn_foot a:hover { opacity: 0.7; }