/* Theme Name: タイガーハウス Theme URI: Author: Author URI: Description: Version: 1.0 License: License URI: Tags: Text Domain: */ @charset "UTF-8"; /*------------------------------------------------------------------ ******************************************************************** * ▼構成 * ・ベースとなるCSS * ・スマホのみ（@media screen and (max-width: 767px) {} ） * * リセットCSSは、 内で destyle.min.css を読み込んでます。 * モジュール系CSSは、内で default.css を読み込んでます。 ******************************************************************** --------------------------------------------------------------------*/ /*--- 基本 ---*/ body { margin: 0px; padding: 0px; background: none repeat scroll 0% 0%; background-attachment: scroll; /* font-family: "NotoSansJP", YuGothic, "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */ font-family: "Poppins", "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 1.6; letter-spacing: 0.8px; font-size: 14px; font-weight: 400; color: #333; } /*--- テキスト ---*/ .red{ color: #ff0000; } .blue{ color: #0000ff; } .green{ color: #008000; } .black{ color: #000; } .white{ color: #fff; } /*--- リンク系（アンカー） ---*/ a { color: #333; text-decoration: none; transition: all 1s ease; } a:hover { color: #007dcc; } a img{ display: block; transition: 0.5s; } a img:hover { opacity: 0.7; transition: 0.5s; } a[href^="tel:"] { pointer-events: none; color: #333; } /*--- フェードイン系 ---*/ del { text-decoration: line-through red; /* 取り消し線だけ赤 */ } /*-------------------------------------------------- ************************************************** PCのみ ************************************************** --------------------------------------------------*/ @media screen and (min-width: 768px) { /*--- ヘッダー ---*/ header { height:65px; padding:0 0 0 30px; } .head_logo img { width:auto; height:40px; } /*--- グローバルナビゲーション ---*/ .fullscreen-nav { display:flex; position:relative; align-items:center; } .main-menu { display:flex; } .main-menu li { margin-right:20px; } .main-menu li a { color:#333; display:block; } #header_tel { margin-right:20px; } #header_tel a { font-size:16px; font-weight:700; } .sns_share { display:flex; align-items:center; padding:10px; background:#f4fcff; height:65px; } .sns_share p { font-weight:500; } .sns_share ul { display:flex; margin-left:5px; } .sns_share ul li { margin-left:5px; } .sns_share ul li img { width:30px; height:30px; } /*--- パンクズ ---*/ .breadcrumb{ margin:10px 30px 0; display: flex; padding: 0; white-space: nowrap; overflow: auto; -webkit-overflow-scrolling: touch; font-size:13px; } .breadcrumb br { display:none; } .breadcrumb span { padding:0 5px; } /*--- メインコンテンツ ---*/ /*--- 下層 h1 ---*/ .page h1 { padding:30px 0; text-align:center; background:#fafafa; font-weight:700; font-size:21px; } /*--- 見出し系 ---*/ /*--- CTA ---*/ /*--- フッター ---*/ footer{ width: 100%; margin: 80px auto 0; padding:50px 0 30px; background:#fafafa; } .footer_logo { width:200px; margin:0 auto; } .footer_logo img { width:100%; height:auto; display:block; } .footer_tel { margin-top:20px; text-align:center; font-size:24px; } footer ul { width:768px; margin:20px auto 0; display:flex; flex-wrap:wrap; justify-content:center; } footer ul li { font-size:16px; margin:5px 10px; } #copyright{ padding: 20px 0 0; font-size: 14px; text-align:center; } }/* pc end */ /* レスポンシブ対応 (ブレイクポイントを調整してください) */ @media (max-width: 767px) { } /*-------------------------------------------------- ************************************************** スマホのみ ************************************************** --------------------------------------------------*/ @media screen and (max-width: 767px) { /*--- 基本 ---*/ body { font-size: 16px; } #container{ overflow: hidden; } img{ max-width: 100%; height: auto; } /*--- リンク系（アンカー） ---*/ a[href^="tel:"] { pointer-events: auto; } .link_btn_01{ min-width: 200px; font-size: 13px; } /*--- ヘッダー ---*/ header{ position: relative; height: 65px; padding: 0 20px; } header .head_logo{ width: 60%; } /* ハンバーガーメニューアイコン */ .hamburger-menu { display: none; /* デフォルトでは非表示 (PCでは使わない) */ background: none; border: none; cursor: pointer; /* padding: 10px; */ position: relative; z-index: 101; /* メニューより手前に */ } .hamburger-menu .bar { display: block; width: 30px; height: 3px; background-color: #333; margin: 6px 0; transition: all 0.3s ease; /* アニメーション用 */ } /* ハンバーガーメニューがアクティブ（開いている）時の×ボタン化 */ .hamburger-menu.is-active .bar-1 { transform: translateY(9px) rotate(45deg); } .hamburger-menu.is-active .bar-2 { opacity: 0; } .hamburger-menu.is-active .bar-3 { transform: translateY(-9px) rotate(-45deg); } /* 全画面オーバーレイメニュー */ .fullscreen-nav { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(255, 255, 255, 1); /* 半透明の黒 */ display: flex; justify-content: center; align-items: center; flex-direction:column; visibility: hidden; /* デフォルトでは非表示 */ opacity: 0; /* 透明にしておく */ transition: opacity 0.4s ease, visibility 0.4s ease; /* アニメーション */ z-index: 99; /* ヘッダーより奥、コンテンツより手前 */ } .fullscreen-nav.is-open { visibility: visible; /* 表示 */ opacity: 1; /* 不透明にする */ } .fullscreen-nav .main-menu { text-align: center; } .fullscreen-nav .main-menu li { } .fullscreen-nav .main-menu li a { color: #333; font-size: 5vw; font-weight: bold; padding: 10px 0; display: block; transition: color 0.3s ease; } #header_tel { margin-top:10px; font-size:6vw; font-weight:700; } .sns_share { margin-top:30px; } .sns_share p { font-size:5vw; font-weight:700; text-align:center; } .sns_share ul { display:flex; justify-content:center; margin-top:10px; } .sns_share ul li { margin:0 10px; width:10vw; } .site-header .header-inner nav { display: none; } .hamburger-menu { display: block; } body.no-scroll { overflow: hidden; } /*--- ハンバーガーメニュー ---*/ #hamburger{ position: relative; cursor: pointer; width: 40px; height: 40px; } #hamburger::after{ content: "Open"; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); font-family: "Quicksand"; font-size: 12px; font-weight: 400; } #hamburger span{ position: absolute; left: 0; display: inline-block; width: 40px; height: 2px; background-color: #007dcc; transition: all .4s; } #hamburger span:nth-of-type(1){ top: 0; } #hamburger span:nth-of-type(2){ top: 10px; } #hamburger span:nth-of-type(3){ top: 20px; } #hamburger.active::after{ content: "Close"; } #hamburger.active span:nth-of-type(1){ top: 10px; transform: rotate(-25deg); } #hamburger.active span:nth-of-type(2){ opacity: 0; } #hamburger.active span:nth-of-type(3){ top: 10px; transform: rotate(25deg); } /*--- グローバルナビゲーション ---*/ .gnavi{ position: absolute; top: 65px; left: 0; transform: translateX(100%); z-index: 10; width: 100%; margin: 0; padding: 20px 0 40px; background-color: #fff; border-bottom: #ccc 1px solid; transition: all .4s; } #hamburger.active + .gnavi{ transform: translateX(0); } /*--- メインコンテンツ ---*/ /*--- 下層ページタイトル ---*/ /*--- 下層 h1 ---*/ .page h1 { padding:20px 0; text-align:center; background:#fafafa; font-weight:700; font-size:4vw; } /*--- パンクズ ---*/ .breadcrumb{ width:90%; margin:10px auto 0; display: flex; padding: 0; white-space: nowrap; overflow: auto; -webkit-overflow-scrolling: touch; font-size:3vw; } .breadcrumb br { display:none; } .breadcrumb span { padding:0 2px; } /*--- モジュール系 ---*/ /*--- CTA ---*/ /*--- フッター ---*/ footer{ width: 100%; margin: 80px auto 0; padding:50px 5% 30px; background:#fafafa; } .footer_logo { width:60%; margin:0 auto; } .footer_logo img { width:100%; height:auto; display:block; } .footer_tel { margin-top:10px; text-align:center; font-size:5vw; } footer ul { margin:20px 0 0; display:flex; flex-wrap:wrap; justify-content:center; } footer ul li { font-size:4vw; margin:5px 10px; } #copyright{ padding: 20px 0 0; font-size: 3vw; text-align:center; } }/* End SP */