@charset "UTF-8";
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● style_lang.css */
/* 外国語用CSS 暫定版 */
/* ・ページ固有の処理を記述 */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 各種import */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* カラー設定 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* カラー定義
初期値は default のみだが、
任意の文字列をキーとして使って色を定義すれば、
サイト内で複数のカラー定義を持てる
------------------------------------ */
/* 引数でキーを指定して
上記のマップで定義したカラーを返すfunction
$contents-type: "second-color";
のように $contents-type のキー値を変えておけば
getBaseColor($contents-type);
を使用した際に、別カラーをセットできる仕組み
$base-color-map: (
default: rgb(81,72,63)
second-color: rgb(81,72,63)
);
------------------------------------ */
/* カラー定義
------------------------------------ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* プロパティ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 継承用（試作） */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 仮）疑似要素
::before, ::after で要素付加するときに書きがちな処理
------------------------------------ */
/* 画像の伸縮表示
img要素に対して適用する。imgの幅と高さも定義すること
上記「アスペクト比を保った表示ボックス」と併用推奨
------------------------------------ */
._img_contain {
-o-object-fit: contain !important;
object-fit: contain !important;
}
._img_cover {
-o-object-fit: cover !important;
object-fit: cover !important;
}
/* 仮）ノイズを付加
------------------------------------ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* mixin 定義 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* サイトロゴ
想定しているHTML構造 ※見出しレベル h1～h6 は任意
<h1 class="SiteLogo">
<a href="">
<img src="<?php $this->BcBaser->themeUrl(); ?>img/common/logo/site_logo.svg" alt="" />
</a>
</h1>
適用例 ）
.SiteLogo{
@include site-logo();
}
------------------------------------------------------------------------ */
/* 基本ページ幅
適用例 ）
.hogehoge{
@include page-width-default();
}
------------------------------------------------------------------------ */
/* アスペクト比を保った表示ボックス
※ 旧ブラウザを無視するなら aspect-ratio: ●/●; で済むが
非対応ブラウザにも適用したい場合の処理
・横幅は基本100％で扱う。100%幅以外にしたい場合はこの要素よりも親要素で適用させる
想定しているHTML構造
<p class="Image">
<img src="XXXX">
</p>
などで、.Image に適用させ、img に object-fit でフィット方法を併記して使う
適用例 ）
.Image{
@include aspect-ratio(); //デフォルトのアスペクト比を使う場合
}
.Image{
@include aspect-ratio(6 / 19); //個別にアスペクト比を指定して使う場合
}
------------------------------------------------------------------------ */
/* flex 関連のプロパティをまとめて定義
適用例 ）
.hogehoge{
@include flex();
}
.hogehoge{
@include flex(center, flex-end);
}
------------------------------------------------------------------------ */
/* clearfix
適用例 ）
.hogehoge{
@include clearfix();
}
------------------------------------------------------------------------ */
/* dotline
適用例 ）
.hogehoge{
@include dotline();
}
------------------------------------------------------------------------ */
/* レスポンシブ 対応用 ブレイクポイントによる条件分岐
適用例 ）
@include media-query(under-bp-m) {
$breakpoint-m よりも小さいウィンドウ幅の処理をここに書く
}
------------------------------------------------------------------------ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* World */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* - - SiteHeaderBlock - - */
@media screen and (max-width: 767px) {
.SiteHeaderBlock .BlockContents {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 基本コンテンツ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
.ContentsDivision {
/* 汎用ブロック
--------------------------------------------------- */
}
.ContentsDivision .DefaultBlock {
padding: 0;
}
.ContentsDivision .DefaultBlock .BlockHeader {
position: static;
}
.ContentsDivision .DefaultBlock .BlockHeader .Heading {
-webkit-writing-mode: initial;
-ms-writing-mode: initial;
writing-mode: initial;
line-height: 2.5em;
padding-bottom: 2.5em;
background-image: linear-gradient(to right, currentColor, currentColor 6px, transparent 6px, transparent 10px); /* 幅2の線を作る */
background-size: 10px 1px; /* グラデーションの幅・高さを指定 */
background-position: left bottom; /* 背景の開始位置を指定 */
background-repeat: repeat-x; /* 横向きにのみ繰り返す */
margin-bottom: 2.5em;
}
@media screen and (min-width: 768px), print {
.ContentsDivision .DefaultBlock .BlockHeader .Heading {
text-align: center;
}
}
.ContentsDivision .DefaultBlock .BlockContents .SknTplImageParagraph .ImageItem .SignText {
font-size: 1.2rem;
font-size: 1.4rem;
font-weight: 500;
font-family: "Times New Roman", Times, serif;
margin-top: 1.5em;
letter-spacing: 0.1em;
}
.ContentsDivision .DefaultBlock .BlockContents .SknTplImageParagraph .ImageItem .CaptionText {
font-size: 1.2rem;
line-height: 1.5;
}
@media screen and (min-width: 768px), print {
.ContentsDivision .DefaultBlock .BlockContents .SknTplImageParagraph .TextItem {
width: 65%;
}
}
.ContentsDivision .DefaultBlock .BlockContents .SknTplDecoratedTable table tr {
border: none;
}
@media screen and (max-width: 767px) {
.ContentsDivision .DefaultBlock .BlockContents .SknTplDecoratedTable table tr {
margin-bottom: 1em;
}
}
@media screen and (min-width: 768px), print {
.ContentsDivision .DefaultBlock .BlockContents .SknTplDecoratedTable table tr th {
text-align: right;
vertical-align: top;
}
}
@media screen and (max-width: 767px) {
.ContentsDivision .DefaultBlock .BlockContents .SknTplDecoratedTable table tr th {
padding-bottom: 0;
}
}