@charset "UTF-8"; /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* foundation Styleguide 1.0.0 */ /* _variable.scss 変数をまとめて宣言 Styleguide 1.1.0 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* 各カラー設定 ※フォントサイズなどは適宜変更可 Markup:

ベースフォントカラー



背景 color



ポイントカラー

Styleguide 1.1.1.1 */ /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* _font.scss ベースフォント Styleguide 1.1.2 */ /* ベースフォント ※フォントサイズなどは適宜変更可 Markup:

＜全施設共通＞



ベースフォント



ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz12345678910



ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz12345678910



Styleguide 1.1.2.1 */ @font-face { font-family: 'Roboto Regular'; font-display: swap; font-style: normal; font-weight: 400; src: local("Roboto-Regular"), url("../../webfonts/Roboto-Regular.woff2") format("woff2"), url("../../webfonts/Roboto-Regular.woff") format("woff"), url("../../webfonts/Roboto-Regular.ttf") format("truetype"), url("../../webfonts/Roboto-Regular.eot") format("embedded-opentype"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto Light'; font-display: swap; font-style: normal; font-weight: 400; src: local("Roboto-Light"), url("../../webfonts/Roboto-Light.woff2") format("woff2"), url("../../webfonts/Roboto-Light.woff") format("woff"), url("../../webfonts/Roboto-Light.ttf") format("truetype"), url("../../webfonts/Roboto-Light.eot") format("embedded-opentype"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ----------------------------------------------------------- スタイルガイド用記述 ----------------------------------------------------------- */ /* _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 */ /* ---------------------------------------- 共通 ---------------------------------------- */ .l-header__con-h1 .h1, .l-header__con-h1 .h2 { display: none; } /* ---------------------------------------- .con_title ---------------------------------------- */ .con_title { margin-top: 20px; } .con_title .inner { position: relative; } .con_title .inner h2 { position: absolute; } @media only screen and (min-width: 1280px) { .con_title .inner h2 { top: 50%; left: 50px; transform: translateY(-50%); } } @media print { .con_title .inner h2 { top: 50%; left: 50px; transform: translateY(-50%); } } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_title .inner h2 { top: 50%; left: 30px; transform: translateY(-50%); } } @media only screen and (max-width: 767px) { .con_title .inner h2 { top: 50%; left: 20px; transform: translateY(-50%); } } .con_title .inner h2 .main { display: block; font-family: "IBM Plex Sans JP", sans-serif; font-weight: 600; font-style: normal; font-size: 60px; color: #fff; font-feature-settings: "palt"; letter-spacing: 0.01em; line-height: 1.4em; text-indent: -0.1em; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_title .inner h2 .main { font-size: 40px; } } @media only screen and (max-width: 767px) { .con_title .inner h2 .main { font-size: 30px; } } .con_title .inner h2 .sub { display: block; font-family: "IBM Plex Sans JP", sans-serif; font-weight: 400; font-style: normal; font-size: 24px; color: #fff; font-feature-settings: "palt"; letter-spacing: 0.05em; margin-top: 10px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_title .inner h2 .sub { font-size: 14px; } } @media only screen and (max-width: 767px) { .con_title .inner h2 .sub { font-size: 14px; } } .con_title .inner .txt_caution { position: relative; font-family: "IBM Plex Sans JP", sans-serif; font-weight: 200; font-style: normal; font-size: 13px; color: #fff; font-feature-settings: "palt"; letter-spacing: 0.05em; text-align: right; filter: drop-shadow(0px 0px 5px #42322e) drop-shadow(0px 0px 5px #42322e) drop-shadow(0px 0px 5px #42322e); right: 10px; top: -25px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_title .inner .txt_caution { font-size: 13px; } } @media only screen and (max-width: 767px) { .con_title .inner .txt_caution { font-size: 11px; } } @media only screen and (max-width: 767px) { .con_title .inner .txt_caution { right: 5px; top: -20px; } } /* ---------------------------------------- .con_main ---------------------------------------- */ .con_main { margin-top: 100px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_main.f-base__cnt-w { width: 80%; } } @media only screen and (max-width: 767px) { .con_main { margin-top: 60px; } } .con_main .box_room, .con_main .box_spa, .con_main .box_multi { position: relative; } @media only screen and (min-width: 1280px) { .con_main .box_room, .con_main .box_spa, .con_main .box_multi { display: flex; } } @media print { .con_main .box_room, .con_main .box_spa, .con_main .box_multi { display: flex; } } @media only screen and (min-width: 1280px) { .con_main .box_room .box_img, .con_main .box_spa .box_img, .con_main .box_multi .box_img { width: 50%; } } @media print { .con_main .box_room .box_img, .con_main .box_spa .box_img, .con_main .box_multi .box_img { width: 50%; } } .con_main .box_room .box_img .slide_main, .con_main .box_spa .box_img .slide_main, .con_main .box_multi .box_img .slide_main { line-height: 0; } .con_main .box_room .box_img .slide_main li span, .con_main .box_spa .box_img .slide_main li span, .con_main .box_multi .box_img .slide_main li span { position: relative; font-family: "IBM Plex Sans JP", sans-serif; font-weight: 200; font-style: normal; font-size: 13px; color: #fff; font-feature-settings: "palt"; letter-spacing: 0.05em; filter: drop-shadow(0px 0px 5px #42322e) drop-shadow(0px 0px 5px #42322e); left: 10px; top: -15px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_main .box_room .box_img .slide_main li span, .con_main .box_spa .box_img .slide_main li span, .con_main .box_multi .box_img .slide_main li span { font-size: 13px; } } @media only screen and (max-width: 767px) { .con_main .box_room .box_img .slide_main li span, .con_main .box_spa .box_img .slide_main li span, .con_main .box_multi .box_img .slide_main li span { font-size: 11px; } } @media only screen and (max-width: 767px) { .con_main .box_room .box_img .slide_main li span, .con_main .box_spa .box_img .slide_main li span, .con_main .box_multi .box_img .slide_main li span { left: 5px; top: -10px; } } .con_main .box_room .box_txt, .con_main .box_spa .box_txt, .con_main .box_multi .box_txt { flex: 1; align-items: center; position: relative; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_main .box_room .box_txt, .con_main .box_spa .box_txt, .con_main .box_multi .box_txt { margin-top: 30px; } } @media only screen and (max-width: 767px) { .con_main .box_room .box_txt, .con_main .box_spa .box_txt, .con_main .box_multi .box_txt { margin-top: 30px; } } .con_main .box_room .box_txt h3, .con_main .box_spa .box_txt h3, .con_main .box_multi .box_txt h3 { font-family: "IBM Plex Sans JP", sans-serif; font-weight: 600; font-style: normal; font-size: 30px; font-feature-settings: "palt"; letter-spacing: 0.05em; line-height: 1.5em; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_main .box_room .box_txt h3, .con_main .box_spa .box_txt h3, .con_main .box_multi .box_txt h3 { font-size: 30px; } } @media only screen and (max-width: 767px) { .con_main .box_room .box_txt h3, .con_main .box_spa .box_txt h3, .con_main .box_multi .box_txt h3 { font-size: 30px; } } .con_main .box_room .box_txt .txt_main, .con_main .box_spa .box_txt .txt_main, .con_main .box_multi .box_txt .txt_main { font-family: "IBM Plex Sans JP", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; line-height: 1.8em; margin-top: 30px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_main .box_room .box_txt .txt_main, .con_main .box_spa .box_txt .txt_main, .con_main .box_multi .box_txt .txt_main { font-size: 14px; } } @media only screen and (max-width: 767px) { .con_main .box_room .box_txt .txt_main, .con_main .box_spa .box_txt .txt_main, .con_main .box_multi .box_txt .txt_main { font-size: 14px; } } .con_main .box_room .box_txt .box_detail, .con_main .box_spa .box_txt .box_detail, .con_main .box_multi .box_txt .box_detail { margin-top: 30px; } .con_main .box_room .box_txt .box_detail table, .con_main .box_spa .box_txt .box_detail table, .con_main .box_multi .box_txt .box_detail table { width: 100%; } .con_main .box_room .box_txt .box_detail table tr th, .con_main .box_spa .box_txt .box_detail table tr th, .con_main .box_multi .box_txt .box_detail table tr th { width: 140px; font-family: "IBM Plex Sans JP", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; text-align: center; font-feature-settings: "palt"; letter-spacing: 0.05em; border: 1px solid #c3c2c3; padding: 10px 16px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_main .box_room .box_txt .box_detail table tr th, .con_main .box_spa .box_txt .box_detail table tr th, .con_main .box_multi .box_txt .box_detail table tr th { font-size: 14px; } } @media only screen and (max-width: 767px) { .con_main .box_room .box_txt .box_detail table tr th, .con_main .box_spa .box_txt .box_detail table tr th, .con_main .box_multi .box_txt .box_detail table tr th { font-size: 14px; } } .con_main .box_room .box_txt .box_detail table tr td, .con_main .box_spa .box_txt .box_detail table tr td, .con_main .box_multi .box_txt .box_detail table tr td { border: 1px solid #c3c2c3; padding: 10px 16px; } .con_main .box_room .box_txt .box_detail table tr td ul, .con_main .box_spa .box_txt .box_detail table tr td ul, .con_main .box_multi .box_txt .box_detail table tr td ul { display: flex; flex-wrap: wrap; padding-left: 1em; } .con_main .box_room .box_txt .box_detail table tr td ul li, .con_main .box_spa .box_txt .box_detail table tr td ul li, .con_main .box_multi .box_txt .box_detail table tr td ul li { list-style: circle; font-family: "IBM Plex Sans JP", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; text-indent: -0.5em; margin-right: 30px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_main .box_room .box_txt .box_detail table tr td ul li, .con_main .box_spa .box_txt .box_detail table tr td ul li, .con_main .box_multi .box_txt .box_detail table tr td ul li { font-size: 14px; } } @media only screen and (max-width: 767px) { .con_main .box_room .box_txt .box_detail table tr td ul li, .con_main .box_spa .box_txt .box_detail table tr td ul li, .con_main .box_multi .box_txt .box_detail table tr td ul li { font-size: 14px; } } .con_main .box_room .box_txt .box_detail table tr td .txt_detail, .con_main .box_spa .box_txt .box_detail table tr td .txt_detail, .con_main .box_multi .box_txt .box_detail table tr td .txt_detail { font-family: "IBM Plex Sans JP", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_main .box_room .box_txt .box_detail table tr td .txt_detail, .con_main .box_spa .box_txt .box_detail table tr td .txt_detail, .con_main .box_multi .box_txt .box_detail table tr td .txt_detail { font-size: 14px; } } @media only screen and (max-width: 767px) { .con_main .box_room .box_txt .box_detail table tr td .txt_detail, .con_main .box_spa .box_txt .box_detail table tr td .txt_detail, .con_main .box_multi .box_txt .box_detail table tr td .txt_detail { font-size: 14px; } } .con_main .box_room .box_txt .box_detail table tr td .txt_caution, .con_main .box_spa .box_txt .box_detail table tr td .txt_caution, .con_main .box_multi .box_txt .box_detail table tr td .txt_caution { font-family: "IBM Plex Sans JP", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_main .box_room .box_txt .box_detail table tr td .txt_caution, .con_main .box_spa .box_txt .box_detail table tr td .txt_caution, .con_main .box_multi .box_txt .box_detail table tr td .txt_caution { font-size: 14px; } } @media only screen and (max-width: 767px) { .con_main .box_room .box_txt .box_detail table tr td .txt_caution, .con_main .box_spa .box_txt .box_detail table tr td .txt_caution, .con_main .box_multi .box_txt .box_detail table tr td .txt_caution { font-size: 14px; } } .con_main .box_room .box_txt .txt_en, .con_main .box_spa .box_txt .txt_en, .con_main .box_multi .box_txt .txt_en { opacity: 0.5; mix-blend-mode: hard-light; font-family: "Ubuntu", sans-serif; font-weight: 700; font-size: 120px; color: #42322e; line-height: 1em; white-space: nowrap; position: absolute; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_main .box_room .box_txt .txt_en, .con_main .box_spa .box_txt .txt_en, .con_main .box_multi .box_txt .txt_en { font-size: 120px; } } @media only screen and (max-width: 767px) { .con_main .box_room .box_txt .txt_en, .con_main .box_spa .box_txt .txt_en, .con_main .box_multi .box_txt .txt_en { font-size: 120px; } } .con_main .box_room .box_treat, .con_main .box_spa .box_treat, .con_main .box_multi .box_treat { display: flex; position: absolute; z-index: -1; } .con_main .box_room .box_treat span, .con_main .box_spa .box_treat span, .con_main .box_multi .box_treat span { display: block; background-color: #42322e; } .con_main .box_room .slick-dots, .con_main .box_spa .slick-dots, .con_main .box_multi .slick-dots { display: flex; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); } .con_main .box_room .slick-dots li:not(:last-child), .con_main .box_spa .slick-dots li:not(:last-child), .con_main .box_multi .slick-dots li:not(:last-child) { margin-right: 15px; } .con_main .box_room .slick-dots li button, .con_main .box_spa .slick-dots li button, .con_main .box_multi .slick-dots li button { width: 10px; height: 10px; background-color: #fff; border: none; border-radius: 10000px; text-indent: -9999px; padding: 0; } .con_main .box_room .slick-dots li.slick-active button, .con_main .box_spa .slick-dots li.slick-active button, .con_main .box_multi .slick-dots li.slick-active button { background-color: #42322e; } @media only screen and (min-width: 1280px) { .con_main .box_room .box_img { margin-right: 60px; } } @media print { .con_main .box_room .box_img { margin-right: 60px; } } .con_main .box_room .box_txt h3 { font-size: 30px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_main .box_room .box_txt h3 { font-size: 30px; } } @media only screen and (max-width: 767px) { .con_main .box_room .box_txt h3 { font-size: 22px; } } .con_main .box_room .box_txt .txt_en { right: -30px; bottom: -110px; } .con_main .box_room .box_treat { left: 500px; top: -40px; } .con_main .box_room .box_treat span:nth-of-type(1) { opacity: 0.05; width: 300px; height: 300px; } .con_main .box_room .box_treat span:nth-of-type(2) { opacity: 0.1; width: 120px; height: 120px; margin-top: 250px; margin-left: 15px; } .con_main .box_spa { flex-direction: row-reverse; margin-top: 180px; } @media only screen and (max-width: 767px) { .con_main .box_spa { margin-top: 80px; } } @media only screen and (min-width: 1280px) { .con_main .box_spa .box_img { margin-left: 60px; } } @media print { .con_main .box_spa .box_img { margin-left: 60px; } } .con_main .box_spa .box_txt .txt_en { left: -30px; bottom: -50px; } .con_main .box_spa .box_treat { left: 340px; top: 240px; } .con_main .box_spa .box_treat span:nth-of-type(1) { opacity: 0.1; width: 120px; height: 120px; } .con_main .box_spa .box_treat span:nth-of-type(2) { opacity: 0.05; width: 200px; height: 200px; margin-top: 50px; margin-left: 15px; } .con_main .box_multi { margin-top: 180px; } @media only screen and (max-width: 767px) { .con_main .box_multi { margin-top: 80px; } } @media only screen and (min-width: 1280px) { .con_main .box_multi .box_img { margin-right: 60px; } } @media print { .con_main .box_multi .box_img { margin-right: 60px; } } .con_main .box_multi .box_txt h3 { font-size: 40px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_main .box_multi .box_txt h3 { font-size: 30px; } } @media only screen and (max-width: 767px) { .con_main .box_multi .box_txt h3 { font-size: 22px; } } .con_main .box_multi .box_txt .txt_en { right: -30px; bottom: -90px; } .con_main .box_multi .box_treat { left: 500px; top: -40px; } .con_main .box_multi .box_treat span:nth-of-type(1) { opacity: 0.05; width: 300px; height: 300px; } .con_main .box_multi .box_treat span:nth-of-type(2) { opacity: 0.1; width: 120px; height: 120px; margin-top: 250px; margin-left: 15px; } .con_main .midashi { margin-top: 100px; display: block; font-family: "IBM Plex Sans JP", sans-serif; font-weight: 600; font-style: normal; font-size: 50px; color: #42322e; text-align: center; font-feature-settings: "palt"; letter-spacing: 0.05em; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_main .midashi { font-size: 30px; } } @media only screen and (max-width: 767px) { .con_main .midashi { font-size: 25px; } } /* ---------------------------------------- .con_information ---------------------------------------- */ .con_information { background-color: #42322e; padding: 80px 0; margin-top: 150px; } @media only screen and (max-width: 767px) { .con_information { padding: 60px 0; margin-top: 60px; } } .con_information .inner { max-width: 800px; } .con_information .inner h2 .jp { display: block; font-family: "IBM Plex Sans JP", sans-serif; font-weight: 300; font-style: normal; font-size: 32px; color: #fff; text-align: center; font-feature-settings: "palt"; letter-spacing: 0.05em; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_information .inner h2 .jp { font-size: 32px; } } @media only screen and (max-width: 767px) { .con_information .inner h2 .jp { font-size: 32px; } } .con_information .inner h2 .en { display: block; font-family: "IBM Plex Sans JP", sans-serif; font-weight: 300; font-style: normal; font-size: 14px; color: #fff; text-align: center; font-feature-settings: "palt"; letter-spacing: 0.1em; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_information .inner h2 .en { font-size: 14px; } } @media only screen and (max-width: 767px) { .con_information .inner h2 .en { font-size: 14px; } } .con_information .inner .box_detail { margin-top: 30px; } .con_information .inner .box_detail table { width: 100%; } .con_information .inner .box_detail table tr th.title, .con_information .inner .box_detail table tr td.title { width: 200px; } @media only screen and (max-width: 767px) { .con_information .inner .box_detail table tr th.title, .con_information .inner .box_detail table tr td.title { width: 70px; } } .con_information .inner .box_detail table tr th.price, .con_information .inner .box_detail table tr td.price { width: 200px; } @media only screen and (max-width: 767px) { .con_information .inner .box_detail table tr th.price, .con_information .inner .box_detail table tr td.price { width: 100px; } } .con_information .inner .box_detail table tr th { font-family: "IBM Plex Sans JP", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; color: #fff; text-align: center; font-feature-settings: "palt"; letter-spacing: 0.05em; border: 1px solid #fff; padding: 10px 16px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_information .inner .box_detail table tr th { font-size: 14px; } } @media only screen and (max-width: 767px) { .con_information .inner .box_detail table tr th { font-size: 14px; } } .con_information .inner .box_detail table tr td { font-family: "IBM Plex Sans JP", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; color: #fff; font-feature-settings: "palt"; letter-spacing: 0.05em; border: 1px solid #fff; padding: 10px 16px; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_information .inner .box_detail table tr td { font-size: 14px; } } @media only screen and (max-width: 767px) { .con_information .inner .box_detail table tr td { font-size: 14px; } } .con_information .inner .box_caution { margin-top: 10px; } .con_information .inner .box_caution ul li { font-family: "IBM Plex Sans JP", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; color: #fff; text-indent: -1em; padding-left: 1em; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .con_information .inner .box_caution ul li { font-size: 14px; } } @media only screen and (max-width: 767px) { .con_information .inner .box_caution ul li { font-size: 13px; } } .con_information .inner .box_caution ul li.em { font-weight: 600; } /* ---------------------------------------- .con_faq ---------------------------------------- */ #capsule .con_faq { max-width: 800px; margin-top: 100px; } #capsule .con_faq h2 .jp { display: block; font-family: "IBM Plex Sans JP", sans-serif; font-weight: 300; font-style: normal; font-size: 32px; text-align: center; font-feature-settings: "palt"; letter-spacing: 0.05em; } @media only screen and (min-width: 768px) and (max-width: 1279px) { #capsule .con_faq h2 .jp { font-size: 32px; } } @media only screen and (max-width: 767px) { #capsule .con_faq h2 .jp { font-size: 32px; } } #capsule .con_faq h2 .en { display: block; font-family: "IBM Plex Sans JP", sans-serif; font-weight: 300; font-style: normal; font-size: 14px; text-align: center; font-feature-settings: "palt"; letter-spacing: 0.1em; } @media only screen and (min-width: 768px) and (max-width: 1279px) { #capsule .con_faq h2 .en { font-size: 14px; } } @media only screen and (max-width: 767px) { #capsule .con_faq h2 .en { font-size: 14px; } } #capsule .con_faq .box_faq { margin-top: 30px; } #capsule .con_faq .box_faq > ul li .txt_question { font-size: 14px; text-indent: calc(-1em + 4px); background-color: rgba(66, 50, 46, 0.1); cursor: pointer; padding: 10px 32px 10px calc(1em + 22px); transition: 0.3s; position: relative; } @media only screen and (min-width: 768px) and (max-width: 1279px) { #capsule .con_faq .box_faq > ul li .txt_question { font-size: 14px; } } @media only screen and (max-width: 767px) { #capsule .con_faq .box_faq > ul li .txt_question { font-size: 13px; } } #capsule .con_faq .box_faq > ul li .txt_question > span { display: inline-block; margin-right: 5px; } #capsule .con_faq .box_faq > ul li .txt_question:hover { opacity: 0.7; } #capsule .con_faq .box_faq > ul li .txt_question:after { content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); transition: 0.3s; } #capsule .con_faq .box_faq > ul li .txt_question.active:after { transform: translateY(-50%) scaleY(-1); } #capsule .con_faq .box_faq > ul li .txt_anser { display: none; text-indent: calc(-1em + 4px); font-size: 14px; padding: 10px 16px 10px calc(1em + 22px); } @media only screen and (min-width: 768px) and (max-width: 1279px) { #capsule .con_faq .box_faq > ul li .txt_anser { font-size: 14px; } } @media only screen and (max-width: 767px) { #capsule .con_faq .box_faq > ul li .txt_anser { font-size: 13px; } } #capsule .con_faq .box_faq > ul li .txt_anser > span { display: inline-block; margin-right: 5px; } #capsule .con_faq .box_faq > ul li:nth-of-type(n+2) { margin-top: 4px; }