/****************************************************************** サイトコンテンツスタイルシート（スマホ版） Author: T.Sugiyama Author URI: http://fromdime.com ******************************************************************/ /****************************************************************** ******************************************************************* メディアクエリー ******************************************************************* ******************************************************************/ /* 1281px ~ : PC Large screens -> Default */ /* ~ 1280px : PC screens */ @media only screen and (max-width: 80em) { } /* ~ 1180px : PC screens */ @media only screen and (max-width: 73.75em) { :root { /* font-size scale */ --font-size-xl-lg: calc(var(--base-rem) * 64); --font-size-xl-md: calc(var(--base-rem) * 58); --font-size-xl-sm: calc(var(--base-rem) * 40); --font-size-lg-lg: calc(var(--base-rem) * 37); --font-size-lg-md: calc(var(--base-rem) * 29); --font-size-lg-sm: calc(var(--base-rem) * 25); --font-size-md-xl: calc(var(--base-rem) * 24); --font-size-md-lg: calc(var(--base-rem) * 22); --font-size-md-md: calc(var(--base-rem) * 20); --font-size-md-sm: calc(var(--base-rem) * 18); --font-size-md-xs: calc(var(--base-rem) * 16); --font-size-sm-md: calc(var(--base-rem) * 14); --font-size-sm-sm: calc(var(--base-rem) * 12); } /*------------------------------------------- トップページ -------------------------------------------*/ /*------------------------------------------- 固定ページ -------------------------------------------*/ /*------------------------------------------- フッター -------------------------------------------*/ } /* ~ 1024px : Medium screens */ @media only screen and (max-width: 64em) { /*------------------------------------------- トップページ -------------------------------------------*/ } /* ~ 960px : Tablet screens */ @media only screen and (max-width: 60em) { /*------------------------------------------- 固定ページ -------------------------------------------*/ } /* ~ 896px : スマホ横 */ @media only screen and (max-width: 56em) { /*------------------------------------------- 固定ページ -------------------------------------------*/ } /* ~ 812px : iphone X screens */ @media only screen and (max-width: 50.750em) { :root { --base-rem: calc(0.9375rem / 16); /* font-size scale */ --font-size-xl-lg: calc(var(--base-rem) * 56); --font-size-xl-md: calc(var(--base-rem) * 52); --font-size-xl-sm: calc(var(--base-rem) * 40); --font-size-lg-lg: calc(var(--base-rem) * 34); --font-size-lg-md: calc(var(--base-rem) * 28); --font-size-lg-sm: calc(var(--base-rem) * 24); --font-size-md-xl: calc(var(--base-rem) * 22); --font-size-md-lg: calc(var(--base-rem) * 22); --font-size-md-md: calc(var(--base-rem) * 20); --font-size-md-sm: calc(var(--base-rem) * 18); --font-size-md-xs: calc(var(--base-rem) * 16); --font-size-sm-md: calc(var(--base-rem) * 14); --font-size-sm-sm: calc(var(--base-rem) * 12); /* margin scale */ --margin-size-xl-lg: 8.0rem; --margin-size-xl-md: 6.0rem; --margin-size-xl-sm: 4.0rem; --margin-size-lg-xl: 3.5rem; --margin-size-lg-lg: 3.0rem; --margin-size-lg-md: 2.5rem; --margin-size-lg-sm: 2.0rem; --margin-size-lg-xs: 1.5rem; --margin-size-md-xl: 1.5rem; --margin-size-md-lg: 1.0rem; --margin-size-md-md: 1.0rem; --margin-size-md-sm: 1.0rem; --margin-size-md-xs: 0.5rem; } html { font-size: var(--font-size-base); } /*------------------------------------------- トップページ -------------------------------------------*/ /*------------------------------------------- 固定ページ -------------------------------------------*/ /*------------------------------------------- フッター -------------------------------------------*/ } /* ~ 767px : Tablet screens */ @media only screen and (max-width: 47.938em) { /*------------------------------------------- ゲストライダー -------------------------------------------*/ .home #guest-rider .section_main .guest-rider-list { grid-template-columns: repeat(1, 1fr); } .home #guest-rider .section_main .guest-rider-list > li { max-width: 450px; margin: 0 auto; } .home #guest-rider .section_main .guest-rider-list > li .guest-rider-profile { min-height: auto; } /*------------------------------------------- スペシャルライブ -------------------------------------------*/ .home #special-live .section_flexitem.section_header { flex-basis: 100%; max-width: 100%; } .home #special-live .section_flexitem.section_main { flex-basis: 100%; max-width: 100%; } .home #special-live .section_flexitem.section_main .thumb { max-width: 450px; margin: 0 auto; } /*------------------------------------------- サクラバンダについて -------------------------------------------*/ .home #about .about-keyword-list { grid-template-columns: repeat(1, 1fr); } .home #access .section_main .access-list { grid-template-columns: 1fr; } .home #access .section_main .access-list > li.google-map iframe { aspect-ratio: 968 / 729; } } /* 640px以下:Small screens */ @media only screen and (max-width: 40em) { :root { /* font-size scale */ --font-size-xl-lg: calc(var(--base-rem) * 55); --font-size-xl-md: calc(var(--base-rem) * 48); --font-size-xl-sm: calc(var(--base-rem) * 30); --font-size-lg-lg: calc(var(--base-rem) * 28); --font-size-lg-md: calc(var(--base-rem) * 26); --font-size-lg-sm: calc(var(--base-rem) * 22); --font-size-md-xl: calc(var(--base-rem) * 22); --font-size-md-lg: calc(var(--base-rem) * 20); --font-size-md-md: calc(var(--base-rem) * 19); --font-size-md-sm: calc(var(--base-rem) * 18); --font-size-md-xs: calc(var(--base-rem) * 17); --font-size-sm-md: calc(var(--base-rem) * 15); --font-size-sm-sm: calc(var(--base-rem) * 14); /* border */ --border-width: 4px; --border-radius: 30px; } /****************************************************************** 共通 ******************************************************************/ html { font-size: var(--font-size-base); } h1, h2, h3, h4, h5, h6 { line-height: 1.4; } h1 { font-size: 1.3rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.2rem; } h4 { font-size: 1.15rem; } h5 { font-size: 1.1rem; } h6 { font-size: 1.05rem; } .button { /* padding: 0.4rem 1rem 0.35rem 1rem;*/ } .button_wrapper { text-align: center; } img { width: 100%; } .home #main .button { font-size: 1.0rem; } /*------------------------------------------- テーブルの基本レイアウト -------------------------------------------*/ table.base_table { } table.base_table tr { } table.base_table tr th, table.base_table tr td { display: block; width: 100%; } table.base_table tr th { padding: 1.2rem 0 0.2rem 0; border-bottom: none; } table.base_table tr td { padding: 0.2rem 0 1.2rem 0; } /****************************************************************** 構造調整タグ ******************************************************************/ .wrapper_width { padding-left: 0.5rem; padding-right: 0.5rem; } .base_width { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .base_width.base_width_sp { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } .inner_width { width: 100% !important; margin: 0 auto !important; } .home #main { /* padding-top: 0; */ /* padding-bottom: 2rem; */ } .home #main section { /* margin-bottom: 3rem; */ } br.br-pc { display: none; } br.br-sp { display: block; } /*------------------------------------------- テーブルの基本レイアウト -------------------------------------------*/ /****************************************************************** 汎用パーツ ******************************************************************/ /* 横並びレイアウト */ .flexbox { flex-flow: row wrap; } .flexbox-wrap { } .flexbox-center { } .intlink-wrapper { text-align: center; margin: 0 auto; } .headline_wrapper { } .headline { font-size: 1.4rem; padding: 1rem 0; } .headline.icon-title, .section_title.icon-title { margin-bottom: 1rem; font-size: 1.4rem; } .headline.icon-title:before, .section_title.icon-title:before { width: 40px; height: 40px; } .block-sp { margin-left: 0; display: block; } /****************************************************************** プラグイン ******************************************************************/ .slick-dots li button { width: 13px; height: 13px; } .slick-dots { bottom: -3rem; } /****************************************************************** ヘッダー ******************************************************************/ /****************************************************************** サイドバー ******************************************************************/ /****************************************************************** ユーティリティナビゲーション ******************************************************************/ /****************************************************************** フッター ******************************************************************/ /****************************************************************** トップページ(toppage) ******************************************************************/ .home #program .section_title_inner { display: block; } .home #program .section_main #time-table .icon-program { top: -66px; width: 75px; } .home #program .section_main .time-table-list > li { grid-template-columns: 70px minmax(0, 1fr); } .home #program .section_main .time-table-time { font-size: var(--font-size-md-lg); } .home #program .section_main .time-table-title { font-size: var(--font-size-md-lg); } .home #program .section_main .trial-lesson-box { padding: 2rem 6% 2rem; border-radius: 15px; } /* .home #program .section_main .trial-lesson-notes { font-size: var(--font-size-base); } */ .home #guest-rider .section_main .guest-rider-list > li .guest-rider-name { font-size: var(--font-size-lg-md); } .home #guest-rider .section_main .guest-rider-list > li .guest-rider-name-en { font-size: var(--font-size-sm-sm); } .home #banner-area .section_title-ja { font-size: var(--font-size-lg-md); } .home #banner-area .section_inner_title-en { font-size: var(--font-size-lg-md); } .home #banner-area .section_main .banner-list, .home #banner-area .silver-sponsors .banner-list, .home #banner-area .bronze-sponsors .banner-list { gap: 0.5rem 2.0%; } /****************************************************************** 投稿（お知らせ） ******************************************************************/ /****************************************************************** 固定ページ(page) ******************************************************************/ /****************************************************************** カスタム投稿 ******************************************************************/ /****************************************************************** 404 Page Not Found ******************************************************************/ /****************************************************************** お問い合わせフォーム ******************************************************************/ } /* 641以下end */ /* 479px以下: SP screens */ @media only screen and (max-width: 29.938em) { #footer .company-info .logo-wrapper { max-width: 150px; } }