/*
* Custom CSS Fix for Offcanvas Menu
* モバイル版オフキャンバスメニュー修正用CSS
*
* 使い方: HTMLファイルの 内、既存のstyle.cssの後に追加してください
*
*
*/
/* オフキャンバスメニューをデフォルトで画面外に配置 */
#fh5co-offcanvas {
transform: translateX(100%);
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transition: transform 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
-o-transition: -o-transform 0.5s ease;
}
/* モバイル版での設定 */
@media screen and (max-width: 768px) {
#fh5co-offcanvas {
display: block !important;
transform: translateX(100%) !important;
-webkit-transform: translateX(100%) !important;
-moz-transform: translateX(100%) !important;
-ms-transform: translateX(100%) !important;
-o-transform: translateX(100%) !important;
}
/* メニューが開いたときだけ画面内に表示 */
.offcanvas-visible #fh5co-offcanvas,
body.offcanvas-visible #fh5co-offcanvas {
transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
-moz-transform: translateX(0) !important;
-ms-transform: translateX(0) !important;
-o-transform: translateX(0) !important;
}
}
/* デスクトップ版では非表示のまま */
@media screen and (min-width: 769px) {
#fh5co-offcanvas {
display: none !important;
}
}
/* ============================================
画像のレスポンシブ対応（モバイル版のみ）
============================================ */
/* モバイル版でのみ画像を調整 */
@media screen and (max-width: 768px) {
/* すべての画像を画面幅に収める */
img {
max-width: 100% !important;
height: auto !important;
width: auto !important;
}
/* 横スクロールを防ぐ */
body,
#fh5co-page {
overflow-x: hidden !important;
max-width: 100vw !important;
}
.container,
.row {
max-width: 100% !important;
overflow-x: hidden !important;
}
/* カラム内の画像も幅を制限 */
.col-md-6 img,
.col-md-offset-3 img,
[class*="col-"] img {
max-width: 100% !important;
height: auto !important;
}
}
/* ============================================
右側の余白を解消
============================================ */
/* figureタグの幅を制限 */
figure {
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
figure img {
max-width: 100% !important;
height: auto !important;
display: block;
}
/* fh5co-lead クラスのfigureも制限 */
.fh5co-lead,
figure.fh5co-lead {
max-width: 100% !important;
overflow: hidden !important;
}
.fh5co-lead img,
figure.fh5co-lead img {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
/* Bootstrapのrowの負のマージンを調整 */
.row {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* コンテナのパディングを調整 */
.container {
padding-left: 15px !important;
padding-right: 15px !important;
max-width: 100% !important;
}
/* すべての要素がボックスサイズを含むように */
* {
box-sizing: border-box !important;
}
/* 固定幅の要素を制限 */
[class*="col-"] {
padding-left: 15px !important;
padding-right: 15px !important;
max-width: 100% !important;
}
/* フッターのAccess内の画像も制限 */
#fh5co-footer img {
max-width: 100% !important;
height: auto !important;
}
/* image-popupクラスの画像 */
.image-popup img,
a.image-popup img {
max-width: 100% !important;
height: auto !important;
}
}
/* ============================================
About BTMJの文章改行を調整
============================================ */
/* About BTMJセクションの段落 */
#sec1 .fh5co-sub-lead {
text-align: left !important;
line-height: 1.8 !important;
}
/* brタグを非表示にして自然な改行に
#sec1 .fh5co-sub-lead br {
display: none;
}*/
/* 段落に適切な余白を追加 */
#sec1 .fh5co-sub-lead {
word-wrap: break-word;
word-break: normal;
overflow-wrap: break-word;
}
}
#fh5co-hero .fh5co-intro > div h1,
h1.animate-box {
color: white !important;
-webkit-text-fill-color: white !important; /* iOS用 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 視認性向上 */
}
/* 背景画像を確実に維持 */
#fh5co-hero {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* トグルメニュー開閉時も背景画像を強制的に表示 */
.offcanvas-visible #fh5co-hero {
background-image: url(../images/top.jpg) !important;
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
}
/* ページ全体の変形時も背景を維持 */
#fh5co-page,
.offcanvas-visible #fh5co-page {
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
}
#fh5co-hero h1,
#fh5co-hero .fh5co-intro-text h1,
section#fh5co-hero .fh5co-intro h1,
#fh5co-hero .container h1 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}