@charset "UTF-8";
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● base.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)
);
------------------------------------ */
/* カラー定義
------------------------------------ */
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo {
background-image: repeating-linear-gradient(90deg, #f8f8f2, #f8f8f2 1px, transparent 1px, transparent 10px), repeating-linear-gradient(0deg, #f8f8f2, #f8f8f2 1px, #fff 1px, #fff 10px);
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* プロパティ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 継承用（試作） */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 仮）疑似要素
::before, ::after で要素付加するときに書きがちな処理
------------------------------------ */
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .LinkText::after, .BreathOfArtBlock .IllustMapGroup .MapPinList li a .Label::after, .DefaultArea.DecoratedBg::before, .DefaultArea.DecoratedBg::after, .AccordionParent .ToggleButton .Icon::before, .AccordionParent .ToggleButton .Icon::after, .BreadCrumb p .Partition::after, .Icon::after, .BallonTable tbody tr th::after, .LangMenuList > li:not(:last-child)::after, .Heading.Type2::after,
.NewsBlogBlock.Detail .BlockHeader .BlogName::after, .Heading.Type1::after,
.NewsBlogBlock.Detail .BlockHeader .Title::after {
content: "";
position: absolute;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
}
/* 画像の伸縮表示
img要素に対して適用する。imgの幅と高さも定義すること
上記「アスペクト比を保った表示ボックス」と併用推奨
------------------------------------ */
._img_contain {
-o-object-fit: contain !important;
object-fit: contain !important;
}
._img_cover {
-o-object-fit: cover !important;
object-fit: cover !important;
}
/* 仮）ノイズを付加
------------------------------------ */
.ContentsLinkParagraph .ParagraphHeader, .TabMenu .TabList li a {
position: relative;
overflow: hidden;
z-index: 1;
}
.ContentsLinkParagraph .ParagraphHeader > *, .TabMenu .TabList li a > * {
z-index: 3;
}
.ContentsLinkParagraph .ParagraphHeader::after, .TabMenu .TabList li a::after {
content: "";
position: absolute;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
background-image: url(../img/common/decoration/noize_strong.svg);
background-position: 50% 50%;
background-repeat: repeat;
width: 100%;
height: 100%;
mix-blend-mode: color-burn;
z-index: 2;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 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 よりも小さいウィンドウ幅の処理をここに書く
}
------------------------------------------------------------------------ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Style Reset */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote {
margin: 0;
padding: 0;
font-size: 100%;
}
body {
overflow-wrap: break-word;
word-wrap: break-word;
}
body.TbView,
body.SpView {
cursor: pointer;
}
address {
font-style: normal;
}
em {
font-style: normal;
}
img {
border: none;
vertical-align: bottom;
image-rendering: -webkit-optimize-contrast;
}
a {
color: inherit;
}
a, a:hover {
text-decoration: none;
}
hr {
border: none;
height: 2rem;
background-image: linear-gradient(to right, currentColor, currentColor 6px, transparent 6px, transparent 10px); /* 幅2の線を作る */
background-size: 10px 1px; /* グラデーションの幅・高さを指定 */
background-position: left 50%; /* 背景の開始位置を指定 */
background-repeat: repeat-x; /* 横向きにのみ繰り返す */
}
/* 自動文字サイズ調整をOFF iPod,iPhone,iPad用 */
html {
-webkit-text-size-adjust: none;
}
/* ボックスサイズの算出方法を指定 */
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* スクロール固定背景のがたつき防止 ie用 */
/*
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
*/
/* 画像のレンダリングをバイキュービックで */
img {
-ms-interpolation-mode: bicubic;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Option Style */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
.NoDisplay {
display: none;
}
.Partition {
display: none;
}
/* ----- Adjust Height Rendering ----- */
.clearfix:after, .SknTplDecoratedBox.Type2 > .DecoratedBox > .inner:after, .SknTplDecoratedBox.Type1 > .DecoratedBox > .inner:after, .FaqParagraph .Answer:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0; /* firefox footer margin */
}
.clearfix, .SknTplDecoratedBox.Type2 > .DecoratedBox > .inner, .SknTplDecoratedBox.Type1 > .DecoratedBox > .inner, .FaqParagraph .Answer {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix, * html .SknTplDecoratedBox.Type2 > .DecoratedBox > .inner, * html .SknTplDecoratedBox.Type1 > .DecoratedBox > .inner, .FaqParagraph html .Answer {
height: 1%;
}
.clearfix, .SknTplDecoratedBox.Type2 > .DecoratedBox > .inner, .SknTplDecoratedBox.Type1 > .DecoratedBox > .inner, .FaqParagraph .Answer {
display: block;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 同階層のSCSSをimport */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● heading.css */
/* 共通部品 */
/* ・見出し */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 見出し common
--------------------------------------------------- */
.Heading {
margin: 1.5em 0;
position: relative;
font-weight: 700;
clear: both;
}
.Heading em {
font-weight: initial;
background: none;
}
.Heading:first-child {
margin-top: 0;
}
.Heading:last-child {
margin-bottom: 0;
}
/* 見出しバリエーション
--------------------------------------------------- */
/* Type1 ::::::::::::::::::::::::: */
.Heading.Type1,
.NewsBlogBlock.Detail .BlockHeader .Title {
padding-left: 0.75em;
font-size: 3rem;
}
@media screen and (max-width: 767px) {
.Heading.Type1,
.NewsBlogBlock.Detail .BlockHeader .Title {
font-size: 2.5rem;
margin-bottom: 0.5em;
}
}
.Heading.Type1::after,
.NewsBlogBlock.Detail .BlockHeader .Title::after {
height: 0.7rem;
width: 0.7rem;
border-radius: 100%;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
background-color: #e6551e;
position: absolute;
top: calc(0.875em - 0.35rem);
left: 0;
}
.Heading.Type1:first-child,
.NewsBlogBlock.Detail .BlockHeader .Title:first-child {
margin-top: 0;
}
.Heading.Type1:last-child,
.NewsBlogBlock.Detail .BlockHeader .Title:last-child {
margin-bottom: 0;
}
/* Type2 ::::::::::::::::::::::::: */
.Heading.Type2,
.NewsBlogBlock.Detail .BlockHeader .BlogName {
padding-left: 1.25em;
font-size: 2.6rem;
}
@media screen and (max-width: 767px) {
.Heading.Type2,
.NewsBlogBlock.Detail .BlockHeader .BlogName {
font-size: 2.3rem;
}
}
.Heading.Type2::after,
.NewsBlogBlock.Detail .BlockHeader .BlogName::after {
height: 0.2rem;
width: 2.2rem;
border-radius: 1em;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
background-color: #dccfc5;
position: absolute;
top: calc(50% - 0.1rem);
left: 0;
}
.Heading.Type2:first-child,
.NewsBlogBlock.Detail .BlockHeader .BlogName:first-child {
margin-top: 0;
}
.Heading.Type2:last-child,
.NewsBlogBlock.Detail .BlockHeader .BlogName:last-child {
margin-bottom: 0;
}
/* Type3 ::::::::::::::::::::::::: */
.Heading.Type3 {
font-size: 2.4rem;
}
@media screen and (max-width: 767px) {
.Heading.Type3 {
font-size: 2.1rem;
}
}
.Heading.Type3 .Sub {
font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
.Heading.Type3 .Sub {
font-size: 1.4rem;
}
}
.Heading.Type3:first-child {
margin-top: 0;
}
.Heading.Type3:last-child {
margin-bottom: 0;
}
/* Type4 ::::::::::::::::::::::::: */
.Heading.Type4 {
font-size: 2.2rem;
color: #009420;
}
@media screen and (max-width: 767px) {
.Heading.Type4 {
font-size: 2rem;
}
}
.Heading.Type4:first-child {
margin-top: 0;
}
.Heading.Type4:last-child {
margin-bottom: 0;
}
/* Type5 ::::::::::::::::::::::::: */
.Heading.Type5 {
font-size: 2rem;
}
@media screen and (max-width: 767px) {
.Heading.Type5 {
font-size: 1.8rem;
}
}
.Heading.Type5:first-child {
margin-top: 0;
}
.Heading.Type5:last-child {
margin-bottom: 0;
}
/* Type6 ::::::::::::::::::::::::: */
.Heading.Type6 {
font-size: 1.6rem;
}
.Heading.Type6:first-child {
margin-top: 0;
}
.Heading.Type6:last-child {
margin-bottom: 0;
}
/* キャッチ ::::::::::::::::::::::::: */
.Catch {
font-weight: 600 !important;
font-size: 125%;
margin-bottom: 1em;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● text.css */
/* 共通部品 */
/* ・テキスト */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* テキストリンク（汎用）
--------------------------------------------------- */
.DefaultLink,
.DefaultBlock .BlockContents p:not(.MoreLink) a:not(.ImageLink),
.DefaultTable tbody tr th a,
.DefaultTable tbody tr td a,
.SknTplDecoratedTable table tbody tr th a,
.FormTable tbody tr th a,
.SknTplDecoratedTable table tbody tr td a,
.FormTable tbody tr td a,
.AsteriskList li a:not(.ImageLink),
.DecoratedList li a:not(.ImageLink) {
color: #009420;
font-weight: 500;
background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
background-image: linear-gradient(180deg, currentColor, currentColor);
background-repeat: no-repeat;
-webkit-transition: 0.5s all;
transition: 0.5s all;
position: relative;
display: inline;
padding: 0.2rem;
margin: 0 0.5rem;
background-position: 100% 100%;
background-size: 100% 1px;
}
.DefaultArea.Type1 .DefaultLink,
.DefaultArea.Type1 .DefaultBlock .BlockContents p:not(.MoreLink) a:not(.ImageLink),
.DefaultBlock .BlockContents p:not(.MoreLink) .DefaultArea.Type1 a:not(.ImageLink),
.DefaultArea.Type1 .DefaultTable tbody tr th a,
.DefaultTable tbody tr th .DefaultArea.Type1 a,
.DefaultArea.Type1 .DefaultTable tbody tr td a,
.DefaultTable tbody tr td .DefaultArea.Type1 a,
.DefaultArea.Type1 .SknTplDecoratedTable table tbody tr th a,
.SknTplDecoratedTable .DefaultArea.Type1 table tbody tr th a,
.DefaultArea.Type1 .FormTable tbody tr th a,
.SknTplDecoratedTable table tbody tr th .DefaultArea.Type1 a,
.FormTable tbody tr th .DefaultArea.Type1 a,
.DefaultArea.Type1 .SknTplDecoratedTable table tbody tr td a,
.SknTplDecoratedTable .DefaultArea.Type1 table tbody tr td a,
.DefaultArea.Type1 .FormTable tbody tr td a,
.SknTplDecoratedTable table tbody tr td .DefaultArea.Type1 a,
.FormTable tbody tr td .DefaultArea.Type1 a,
.DefaultArea.Type1 .AsteriskList li a:not(.ImageLink),
.AsteriskList li .DefaultArea.Type1 a:not(.ImageLink),
.DefaultArea.Type1 .DecoratedList li a:not(.ImageLink),
.DecoratedList li .DefaultArea.Type1 a:not(.ImageLink) {
color: #fff;
}
.DefaultLink:hover,
.DefaultBlock .BlockContents p:not(.MoreLink) a:hover:not(.ImageLink),
.DefaultTable tbody tr th a:hover,
.DefaultTable tbody tr td a:hover,
.SknTplDecoratedTable table tbody tr th a:hover,
.FormTable tbody tr th a:hover,
.SknTplDecoratedTable table tbody tr td a:hover,
.FormTable tbody tr td a:hover,
.AsteriskList li a:hover:not(.ImageLink),
.DecoratedList li a:hover:not(.ImageLink) {
-webkit-animation: txt_underline 0.5s backwards;
animation: txt_underline 0.5s backwards;
}
.DefaultLink:not(.ExternalLink)::after,
.DefaultBlock .BlockContents p:not(.MoreLink) a:not(.ExternalLink):not(.ImageLink)::after,
.DefaultTable tbody tr th a:not(.ExternalLink)::after,
.DefaultTable tbody tr td a:not(.ExternalLink)::after,
.SknTplDecoratedTable table tbody tr th a:not(.ExternalLink)::after,
.FormTable tbody tr th a:not(.ExternalLink)::after,
.SknTplDecoratedTable table tbody tr td a:not(.ExternalLink)::after,
.FormTable tbody tr td a:not(.ExternalLink)::after,
.AsteriskList li a:not(.ExternalLink):not(.ImageLink)::after,
.DecoratedList li a:not(.ExternalLink):not(.ImageLink)::after {
margin-right: 0;
color: #fff;
background-color: #009420;
width: 1.5em;
height: 1.5em;
font-size: 0.75em;
border-radius: 1em;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
vertical-align: middle;
margin-left: 0.5rem;
}
.DefaultLink:not(.ExternalLink):not([href^="#"])::after,
.DefaultBlock .BlockContents p:not(.MoreLink) a:not(.ExternalLink):not([href^="#"]):not(.ImageLink)::after,
.DefaultTable tbody tr th a:not(.ExternalLink):not([href^="#"])::after,
.DefaultTable tbody tr td a:not(.ExternalLink):not([href^="#"])::after,
.SknTplDecoratedTable table tbody tr th a:not(.ExternalLink):not([href^="#"])::after,
.FormTable tbody tr th a:not(.ExternalLink):not([href^="#"])::after,
.SknTplDecoratedTable table tbody tr td a:not(.ExternalLink):not([href^="#"])::after,
.FormTable tbody tr td a:not(.ExternalLink):not([href^="#"])::after,
.AsteriskList li a:not(.ExternalLink):not([href^="#"]):not(.ImageLink)::after,
.DecoratedList li a:not(.ExternalLink):not([href^="#"]):not(.ImageLink)::after {
font-family: "add-icons";
content: "\e804";
}
.DefaultLink:not(.ExternalLink)[href^="#"],
.DefaultBlock .BlockContents p:not(.MoreLink) a:not(.ExternalLink)[href^="#"]:not(.ImageLink),
.DefaultTable tbody tr th a:not(.ExternalLink)[href^="#"],
.DefaultTable tbody tr td a:not(.ExternalLink)[href^="#"],
.SknTplDecoratedTable table tbody tr th a:not(.ExternalLink)[href^="#"],
.FormTable tbody tr th a:not(.ExternalLink)[href^="#"],
.SknTplDecoratedTable table tbody tr td a:not(.ExternalLink)[href^="#"],
.FormTable tbody tr td a:not(.ExternalLink)[href^="#"],
.AsteriskList li a:not(.ExternalLink)[href^="#"]:not(.ImageLink),
.DecoratedList li a:not(.ExternalLink)[href^="#"]:not(.ImageLink) {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.DefaultLink:not(.ExternalLink)[href^="#"]::after,
.DefaultBlock .BlockContents p:not(.MoreLink) a:not(.ExternalLink)[href^="#"]:not(.ImageLink)::after,
.DefaultTable tbody tr th a:not(.ExternalLink)[href^="#"]::after,
.DefaultTable tbody tr td a:not(.ExternalLink)[href^="#"]::after,
.SknTplDecoratedTable table tbody tr th a:not(.ExternalLink)[href^="#"]::after,
.FormTable tbody tr th a:not(.ExternalLink)[href^="#"]::after,
.SknTplDecoratedTable table tbody tr td a:not(.ExternalLink)[href^="#"]::after,
.FormTable tbody tr td a:not(.ExternalLink)[href^="#"]::after,
.AsteriskList li a:not(.ExternalLink)[href^="#"]:not(.ImageLink)::after,
.DecoratedList li a:not(.ExternalLink)[href^="#"]:not(.ImageLink)::after {
font-family: "add-icons";
content: "\e802";
}
/* 外部リンク（汎用）
--------------------------------------------------- */
/* リンクつき画像（汎用）
--------------------------------------------------- */
/* DefaultText
--------------------------------------------------- */
.DefaultText,
.DefaultBlock .BlockContents p:not(.MoreLink):not(.Catch),
.InlineList {
margin-bottom: 1.75em;
}
.DefaultText:last-child,
.DefaultBlock .BlockContents p:last-child:not(.MoreLink):not(.Catch),
.InlineList:last-child {
margin-bottom: 0;
}
/* blockquote
--------------------------------------------------- */
blockquote {
position: relative;
padding: 35px 15px 10px 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-style: italic;
background: #f5f5f5;
color: #777777;
border-left: 4px solid #009420;
/*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);*/
}
blockquote::before {
display: inline-block;
position: absolute;
top: 5px;
left: 3px;
content: "“";
color: #009420;
font-size: 30px;
line-height: 1;
}
blockquote p {
padding: 0;
margin: 7px 0;
line-height: 1.7;
}
blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}
/* tel link
--------------------------------------------------- */
/* Price
--------------------------------------------------- */
.Price {
font-size: 156.25%;
}
/* LargeNumber
--------------------------------------------------- */
.LargeNumber {
font-size: 156.25%;
}
/* sup
--------------------------------------------------- */
sup {
font-size: x-small;
line-height: 1.1;
}
/* 丸付き文字
--------------------------------------------------- */
.Circled {
color: #282832;
border: 1px solid #282832;
background: #fff;
border-radius: 3em;
display: inline-block;
width: 1.5em;
width: calc(1.5em + 2px);
line-height: 1.5em;
text-align: center;
vertical-align: middle;
}
/* tooltip
--------------------------------------------------- */
.Tooltip {
border-bottom: 1px dashed;
cursor: pointer;
margin: 0 0.25em;
color: #2098d1;
}
.Tooltip::before {
margin-right: 0.25em;
}
.Tooltip:hover,
.Tooltip:focus {
border-bottom: none;
}
.ui-tooltip {
-webkit-box-shadow: none;
box-shadow: none;
color: #2098d1;
background: white;
border: 2px solid;
width: 20em;
max-width: 50%;
padding: 20px;
z-index: 100;
text-align: left;
}
/* Balloon（フキダシ）
--------------------------------------------------- */
.wrap_Balloon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.Balloon.Type1 {
position: relative;
margin: 1em auto 0;
text-align: left;
background-color: #94ffab;
min-width: 15em;
border-radius: 0.5em;
padding: 0.75em 1em;
line-height: inherit;
font-size: 1.4rem !important;
color: rgba(0, 0, 0, 0.75);
width: auto;
display: inline-block;
-webkit-clip-path: none !important;
clip-path: none !important;
}
.Balloon.Type1::before {
content: "";
position: absolute;
border: 0.75em solid transparent;
}
.Balloon.Type1.bottom-left {
margin: 0 auto 0 0;
}
.Balloon.Type1.bottom-left::before {
bottom: 100%;
left: 2em;
margin-left: -0.75em;
border-bottom: 0.75em solid #94ffab;
}
.Balloon.Type1.bottom-right {
margin: 0 0 0 auto;
}
.Balloon.Type1.bottom-right::before {
bottom: 100%;
right: 2em;
margin-right: -0.75em;
border-bottom: 0.75em solid #94ffab;
}
/* 強調
--------------------------------------------------- */
em {
font-weight: 700;
background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 148, 32, 0)), color-stop(65%, rgba(0, 148, 32, 0.85)));
background: linear-gradient(rgba(0, 148, 32, 0) 65%, rgba(0, 148, 32, 0.85) 65%);
}
/* font
--------------------------------------------------- */
/* basic */
.FontDefault,
body {
font-family: "游ゴシック", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: 700;
font-weight: 500;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
}
.FontSansSerif {
font-family: "游ゴシック", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: 500;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
}
.FontSerif,
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .DecoratedBox p,
.Catch {
font-family: "YuMincho", "游明朝", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "MS PMincho", "ＭＳＰ明朝", "MS Mincho", "ＭＳ明朝", serif;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
font-weight: 400;
}
.Monospace,
.FontMonospace,
.DefaultTable tbody tr td,
.SknTplDecoratedTable table tbody tr td,
.FormTable tbody tr td {
/*font-family: "Osaka-mono", "ＭＳ ゴシック", "MS Gothic", monospace;*/
-webkit-font-feature-settings: "fwid";
font-feature-settings: "fwid";
-webkit-font-feature-settings: initial;
font-feature-settings: initial;
}
.FontDecoratedLatin,
.BlogList > li > .inner.New .TextItem .Meta::after,
.BlogList > li > .inner .TextItem .Meta .Date,
.swiper-controller .swiper-pagination.swiper-pagination-fraction,
.MenuTrigger a .Label,
.GoPageTop p a .Label,
ol.DecoratedList > li::before {
font-family: "Hammersmith One", "Arial", "Helvetica", sans-serif;
font-weight: 500;
}
/* 縦書き */
.TextVertical {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
/* TextOverFlowNone
--------------------------------------------------- */
.TextOverFlowNone {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
/* Annotation（注釈）
--------------------------------------------------- */
.Annotation {
font-size: 1.2rem;
padding: 1em 0 1em 2em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
opacity: 0.75;
}
@media screen and (max-width: 767px) {
.Annotation {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
}
.Annotation .Heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
white-space: nowrap;
margin: 0;
font-weight: 500;
}
@media screen and (min-width: 768px), print {
.Annotation .Heading {
margin-right: 1em;
}
}
@media screen and (max-width: 767px) {
.Annotation .Heading {
margin-bottom: 0.5em;
}
}
.Annotation .Heading::before {
content: "※";
}
.Annotation .Heading::after {
content: "：";
}
.Annotation p {
max-width: 50em;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● list.css */
/* 共通部品 */
/* ・リスト */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* リスト（汎用）
--------------------------------------------------- */
.DefaultList,
.DefaultBlock .BlockContents ul:not([class]),
.DefaultBlock .BlockContents ol:not([class]) {
margin: 1em 0;
}
@media screen and (max-width: 767px) {
.DefaultList,
.DefaultBlock .BlockContents ul:not([class]),
.DefaultBlock .BlockContents ol:not([class]) {
font-size: 87.5%;
}
}
.DefaultList li,
.DefaultBlock .BlockContents ul:not([class]) li,
.DefaultBlock .BlockContents ol:not([class]) li {
margin-left: 2em;
line-height: 2;
position: relative;
}
.DefaultList.NoMargin li,
.DefaultBlock .BlockContents ul.NoMargin:not([class]) li,
.DefaultBlock .BlockContents ol.NoMargin:not([class]) li {
margin-top: 0;
margin-bottom: 0;
}
/* LinkList （汎用リンクリスト）
--------------------------------------------------- */
.LinkList,
.FileLinkList {
margin: 1em 0;
list-style: none;
}
@media screen and (max-width: 767px) {
.LinkList,
.FileLinkList {
font-size: 87.5%;
}
}
.LinkList li,
.FileLinkList li {
margin: 0 auto;
}
.LinkList li a,
.FileLinkList li a {
padding: 0.25em;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.LinkList li a .Icon,
.FileLinkList li a .Icon {
width: 3rem;
}
.LinkList li a:hover, .LinkList li a:focus,
.FileLinkList li a:hover,
.FileLinkList li a:focus {
color: #fff;
background: #222;
}
/* FileLinkList （ファイルリンクリスト ※ファイルリンク用の派生）
--------------------------------------------------- */
.FileLinkList li a::after,
.FileLinkList li .Label::after {
display: none !important;
}
/* ほか
--------------------------------------------------- */
/* 装飾付きリスト */
.DecoratedList {
padding-left: 3em;
margin-left: 3em;
margin-bottom: 1.75em;
}
@media screen and (max-width: 767px) {
.DecoratedList {
padding-left: 1.5em;
margin-left: 1.5em;
}
}
.DecoratedList:last-child {
margin-bottom: 0;
}
.DecoratedList li {
margin-bottom: 0.75em;
position: relative;
}
.DecoratedList li:last-child {
margin-bottom: 0;
}
ol.DecoratedList {
list-style: none;
counter-reset: mycounter;
border-left: 2px solid #e6551e;
}
ol.DecoratedList > li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
ol.DecoratedList > li::before {
counter-increment: mycounter;
content: counter(mycounter) "．";
color: #e6551e;
white-space: nowrap;
}
ul.DecoratedList {
border-left: 2px solid currentColor;
}
/* 定義リスト（ckエディタ上では使えないので注意） */
dl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 1em;
}
dl dt {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
white-space: nowrap;
}
/* ※印付きリスト : */
.AsteriskList {
list-style: none;
margin-left: 3em;
margin-bottom: 1.75em;
}
@media screen and (max-width: 767px) {
.AsteriskList {
margin-left: 1.5em;
}
}
.AsteriskList:last-child {
margin-bottom: 0;
}
.AsteriskList > li {
position: relative;
}
.AsteriskList > li::before {
content: "※";
position: absolute;
left: -1.25em;
top: 0;
}
.AsteriskList li {
margin: 0.25em 0;
}
/* InlineList（インライン表示させるリスト）
--------------------------------------------------- */
.InlineList {
list-style: none;
margin-bottom: 0;
}
.InlineList li {
display: inline-block;
margin-right: 1em;
white-space: nowrap;
}
.InlineList li::before {
content: "・";
}
/* CategoryList （カテゴリリスト）
--------------------------------------------------- */
.CategoryList {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
margin: 0 0 3rem;
}
.CategoryList li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: #252525;
background: #f8f8f2;
border: 1px solid #f8f8f2;
padding: 0.125em 0.75em;
min-width: 7em;
border-radius: 1.5em;
font-weight: 600;
font-size: 1.6rem;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 1.5;
margin: 0.25rem;
}
.DecoratedBg.Type2 .CategoryList li a {
background: #fff;
}
.CategoryList li a:hover {
color: #fff;
background: #e6551e !important;
border-color: #e6551e;
}
.CategoryList li.Active a, .CategoryList li.current a {
color: #fff;
background: #e6551e !important;
border-color: #e6551e;
}
/* MenuList（Baserが出力するメニューリスト）
--------------------------------------------------- */
.MenuList {
list-style: none;
gap: 1.5em 0.75em;
}
.MenuList li {
white-space: nowrap;
}
.MenuList li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.MenuList li a .Icon {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.MenuList li a .Icon.icon-cursor-right {
font-size: 1.3rem;
color: #fff !important;
}
.MenuList li a .Icon.icon-cursor-right::after {
background: #252525 !important;
}
.MenuList li a .Label {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.MenuList.multi-level .sub-nav {
margin-top: 1.5rem;
margin-left: 4rem;
}
.MenuList.multi-level .sub-nav .MenuList {
font-size: smaller;
font-weight: 500;
gap: 1em 0.75em;
}
.MenuList.multi-level li.li-level-1 > a {
font-weight: 600;
}
.MenuList.multi-level li.li-level-1 > a .Label {
padding-left: 2rem;
}
.MenuList.multi-level li.li-level-2 > a {
font-weight: 600;
-webkit-box-align: first baseline;
-ms-flex-align: first baseline;
align-items: first baseline;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.MenuList.multi-level li.li-level-2 > a .Label {
padding-left: 1.25rem;
}
.MenuList.multi-level li.li-level-2 > a .Icon {
width: 1em;
height: 1em;
}
.MenuList.multi-level li.li-level-2 > a .Icon::before {
display: none;
}
.MenuList.multi-level li.li-level-2 > a .Icon::after {
width: 100%;
height: 1px;
top: 50%;
left: 0%;
}
.LangMenuList {
color: #6c6c6c;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.LangMenuList > li {
margin: 0;
position: relative;
}
.LangMenuList > li:not(:first-child) {
padding-left: 1.5em;
}
.LangMenuList > li:not(:last-child) {
padding-right: 0.75em;
}
.LangMenuList > li:not(:last-child)::after {
width: 2px;
height: 90%;
border-radius: 1em;
background-color: currentColor;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
left: calc(100% + 0.25em);
top: 10%;
}
.LangMenuList > li a {
font-weight: 500;
}
html[lang=ja] .LangMenuList > li a[data-langmenu=jp], html[lang=en] .LangMenuList > li a[data-langmenu=en] {
color: #009420;
font-weight: 800;
}
/* SearchResultList（サイト内検索の結果表示リスト）
--------------------------------------------------- */
.SearchResultList {
list-style: none;
}
.SearchResultList li {
margin: 0;
position: relative;
padding: 1.5em;
margin: 0.5em;
background: #333;
}
.SearchResultList li strong {
color: #e6551e;
color: #009420;
}
.SearchResultList li .result-head {
font-size: 112.5%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0.25em 0;
margin-bottom: 1em;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
@media screen and (max-width: 767px) {
.SearchResultList li .result-head {
font-size: 100%;
}
}
.SearchResultList li .result-head a .Icon {
color: #009420;
margin-right: 0.25em;
}
.SearchResultList li .result-body {
font-size: 87.5%;
margin-left: 4rem;
}
@media screen and (max-width: 767px) {
.SearchResultList li .result-body {
margin-left: 0rem;
font-size: 87.5%;
}
}
/* PageList（未使用）
--------------------------------------------------- */
/* PageList （本文エリア内に表示させるページリスト） */
/* アイコン付きメニュー
--------------------------------------------------- */
.IllustIconList, .SnsList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
-ms-flex-pack: distribute;
justify-content: space-around;
margin: 0 auto;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.IllustIconList li a, .SnsList li a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0.5rem;
}
.IllustIconList li a .Icon, .SnsList li a .Icon {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
font-size: 3.5rem;
width: 2em;
height: 2em;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #009420;
background: #fff;
border-radius: 100%;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.IllustIconList li a .Icon.ExtIcon, .SnsList li a .Icon.ExtIcon {
display: none;
}
.IllustIconList li a .Label, .SnsList li a .Label {
margin-top: 1em;
font-size: 1.4rem;
}
/* SNS メニュー
--------------------------------------------------- */
.SnsList {
gap: 2.5rem;
}
.SnsList li {
margin: 0;
}
.SnsList li a {
margin: 0;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-line-pack: center;
align-content: center;
gap: 0.5rem;
}
.SnsList li a .Label {
display: none;
color: #252525;
font-weight: 600;
margin: 0;
}
.SnsList li a .Icon {
font-size: 2rem;
width: 1.6em;
height: 1.6em;
color: #fff;
}
.SnsList li a .Icon::after {
background: #009420;
}
.SnsList li a .Icon.icon-facebook::after {
background-color: #1877f2;
}
.SnsList li a .Icon.icon-twitter::after {
background-color: #1da1f2;
background-color: #000;
}
.SnsList li a .Icon.icon-instagram::after {
background: linear-gradient(195deg, #804999 0%, #427eff 20%, #f13f79 70%, #f9ce00 100%) no-repeat;
}
.SnsList li a .Icon.icon-youtube::after {
background-color: #f00;
}
/* BannerList
--------------------------------------------------- */
.BannerList {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 1rem;
}
.BannerList li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 50rem;
}
.BannerList li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: #fff;
overflow: hidden;
}
.BannerList li a .Icon {
display: none;
}
.BannerList li a img {
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
width: 75%;
height: 90%;
-o-object-fit: contain;
object-fit: contain;
}
.BannerList li a[href="#"] {
cursor: default;
}
html.PcView .BannerList li a:not([href="#"]):hover img, html.PcView .BannerList li a:not([href="#"]):focus img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
opacity: 1;
}
.DefaultArea .BannerList {
margin: 2rem auto;
gap: 4rem 3rem;
}
@media screen and (max-width: 767px) {
.DefaultArea .BannerList {
margin: 0 auto;
gap: 2rem;
}
}
@media screen and (min-width: 768px), print {
.DefaultArea .BannerList li {
width: calc((100% - 4rem) / 2);
}
}
.DefaultArea .BannerList li a {
background: #efefef;
border-radius: 1rem;
overflow: hidden;
z-index: 1;
}
.DefaultArea .BannerList li a img {
width: 100%;
height: initial;
}
/* ThumbnailList
--------------------------------------------------- */
.ThumbnailList {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start !important;
-ms-flex-pack: start !important;
justify-content: flex-start !important;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 5rem;
}
.ThumbnailList li .ImageItem .Image {
margin-bottom: 1.5rem !important;
}
.ThumbnailList li .ImageItem .Image img {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
}
.ThumbnailList.Landscape img {
aspect-ratio: 15/11;
}
.ThumbnailList.Portrait img {
aspect-ratio: 11/15;
}
/* ImageLinkList
ImageItemを背景として前面にTextItemを配置する
装飾的なリンクリスト
--------------------------------------------------- */
.ImageLinkList {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
gap: 1rem;
}
@media screen and (min-width: 768px), print {
.ImageLinkList {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media screen and (max-width: 767px) {
.ImageLinkList {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.ImageLinkList li {
position: relative;
}
.ImageLinkList li a {
display: block;
position: relative;
}
.ImageLinkList li .ImageItem {
margin: 0;
padding: 0;
}
.ImageLinkList li .ImageItem .Image {
margin: 0;
padding: 0;
display: block;
}
.ImageLinkList li .ImageItem .Image img {
width: 100%;
-o-object-fit: cover !important;
object-fit: cover !important;
}
@media screen and (min-width: 768px), print {
.ImageLinkList li .ImageItem .Image img {
height: 20rem;
}
}
@media screen and (max-width: 767px) {
.ImageLinkList li .ImageItem .Image img {
aspect-ratio: 9/4;
}
}
.ImageLinkList li .TextItem {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
-webkit-backdrop-filter: brightness(40%);
backdrop-filter: brightness(40%);
z-index: 5;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.ImageLinkList li .TextItem .Title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.ImageLinkList li .TextItem .Title .Main {
font-size: 3rem;
font-weight: 600;
letter-spacing: 0.125em;
}
@media screen and (max-width: 767px) {
.ImageLinkList li .TextItem .Title .Main {
font-size: 2.5rem;
}
}
.ImageLinkList li .TextItem .Title .Sub {
font-size: 1.4rem;
}
.ImageLinkList li .TextItem .Icon {
font-size: 2rem;
color: #009420 !important;
position: absolute;
right: 2rem;
bottom: 2rem;
}
@media screen and (max-width: 767px) {
.ImageLinkList li .TextItem .Icon {
font-size: 1.4rem;
}
}
.ImageLinkList li .TextItem .Icon::after {
background-color: #fff;
}
/* ボタンリスト （共通）
--------------------------------------------------- */
.ButtonList {
list-style: none;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 1rem;
/* 左揃えバリエーション */
}
.ButtonList li a {
width: 100%;
}
.ButtonList li a .Label {
font-weight: 600;
}
.ButtonList li a.ExternalLink::after {
display: none;
}
.ButtonList li:first-child:last-child {
margin-left: auto;
margin-right: auto;
}
.ButtonList li:first-child:last-child a {
min-width: 20em;
}
.ButtonList.AlignLeft {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.ButtonList.AlignLeft li:first-child:last-child {
margin-left: initial;
margin-right: initial;
}
.ButtonList.ContentsNavi {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.ButtonList.ContentsNavi li a {
padding-left: 0.75em;
padding-right: 0.75em;
}
.ButtonList.ContentsNavi li a .Icon {
margin: 0;
}
.ButtonList.ContentsNavi li:last-child a .Label {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.ButtonList.ContentsNavi li:last-child a .Icon {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
/* TabMenu （共通）
--------------------------------------------------- */
.TabMenu {
/* - - list - - */
}
.TabMenu .TabList {
list-style: none;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.TabMenu .TabList li {
margin: 0;
margin-right: 1rem;
}
.TabMenu .TabList li a {
color: #fff;
background-color: #bfbfbf;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 1rem 1rem 0 0;
position: relative;
cursor: pointer;
font-weight: 600;
margin-top: 0em;
}
@media screen and (min-width: 768px), print {
.TabMenu .TabList li a {
height: 3em;
min-width: 7.5em;
}
}
@media screen and (max-width: 767px) {
.TabMenu .TabList li a {
height: 2.5em;
min-width: 5em;
font-size: 1.4rem;
}
}
html.PcView .TabMenu .TabList li a:hover, html.PcView .TabMenu .TabList li a:focus {
margin-top: -0.5em;
background-color: #009420;
}
@media screen and (min-width: 768px), print {
html.PcView .TabMenu .TabList li a:hover, html.PcView .TabMenu .TabList li a:focus {
height: 3.5em;
min-width: 8.5em;
}
}
@media screen and (max-width: 767px) {
html.PcView .TabMenu .TabList li a:hover, html.PcView .TabMenu .TabList li a:focus {
height: 3em;
min-width: 5.5em;
}
}
.TabMenu .TabList li.Active a {
background-color: #009420;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● table.css */
/* 共通部品 */
/* ・テーブル */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* table クラス名無し
--------------------------------------------------- */
table {
margin: 2em auto;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table th,
table td {
padding: 0.75em 1rem;
}
/* DefaultTable
--------------------------------------------------- */
.DefaultTable,
.SknTplDecoratedTable table,
.FormTable {
margin: 0em auto 1.75em;
width: 100%;
text-align: left;
border-collapse: collapse;
/* Scrollable */
/* + + + + + レスポンシブ + + + + + */
}
.DefaultTable caption,
.SknTplDecoratedTable table caption,
.FormTable caption {
padding: 0.25em 0;
}
.DefaultTable th.PaddingNone,
.DefaultTable td.PaddingNone,
.SknTplDecoratedTable table th.PaddingNone,
.FormTable th.PaddingNone,
.SknTplDecoratedTable table td.PaddingNone,
.FormTable td.PaddingNone {
padding: 0;
}
@media screen and (min-width: 768px), print {
.DefaultTable.AutoWidth,
.SknTplDecoratedTable table.AutoWidth,
.AutoWidth.FormTable {
width: auto;
}
}
.DefaultTable.PaddingNone td,
.SknTplDecoratedTable table.PaddingNone td,
.PaddingNone.FormTable td {
padding: 0;
}
.DefaultTable tbody tr,
.SknTplDecoratedTable table tbody tr,
.FormTable tbody tr {
border-bottom: 1px solid;
}
.DefaultTable tbody tr:first-of-type,
.SknTplDecoratedTable table tbody tr:first-of-type,
.FormTable tbody tr:first-of-type {
border-top: 1px solid;
}
.DefaultTable tbody tr th,
.DefaultTable tbody tr td,
.SknTplDecoratedTable table tbody tr th,
.FormTable tbody tr th,
.SknTplDecoratedTable table tbody tr td,
.FormTable tbody tr td {
padding: 1.75rem 2rem;
}
.DefaultTable tbody tr th,
.SknTplDecoratedTable table tbody tr th,
.FormTable tbody tr th {
font-weight: 900;
text-align: left;
width: 30%;
}
.DefaultTable tbody tr td,
.SknTplDecoratedTable table tbody tr td,
.FormTable tbody tr td {
width: 70%;
}
.DefaultTable tbody tr td > .SimpleTable,
.SknTplDecoratedTable table tbody tr td > .SimpleTable,
.FormTable tbody tr td > .SimpleTable {
margin: 0.25em auto;
width: 100%;
text-align: left;
border-collapse: collapse;
}
.DefaultTable tbody tr td > .SimpleTable tbody tr:not(:last-child),
.SknTplDecoratedTable table tbody tr td > .SimpleTable tbody tr:not(:last-child),
.FormTable tbody tr td > .SimpleTable tbody tr:not(:last-child) {
border-bottom: 1px dashed #ccc;
}
.DefaultTable tbody tr td > .SimpleTable tbody tr th,
.DefaultTable tbody tr td > .SimpleTable tbody tr rd,
.SknTplDecoratedTable table tbody tr td > .SimpleTable tbody tr th,
.FormTable tbody tr td > .SimpleTable tbody tr th,
.SknTplDecoratedTable table tbody tr td > .SimpleTable tbody tr rd,
.FormTable tbody tr td > .SimpleTable tbody tr rd {
padding: 0.25em 0.5rem;
}
.DefaultTable.LargeTable thead,
.SknTplDecoratedTable table.LargeTable thead,
.LargeTable.FormTable thead {
display: table-header-group;
}
.DefaultTable.LargeTable thead th,
.SknTplDecoratedTable table.LargeTable thead th,
.LargeTable.FormTable thead th {
display: table-cell;
text-align: center;
padding: 0.75rem 1rem;
background-color: #efefe1;
font-size: 1.4rem;
}
.DefaultTable.LargeTable tr,
.SknTplDecoratedTable table.LargeTable tr,
.LargeTable.FormTable tr {
display: table-row;
}
.DefaultTable.LargeTable tr th,
.DefaultTable.LargeTable tr td,
.SknTplDecoratedTable table.LargeTable tr th,
.LargeTable.FormTable tr th,
.SknTplDecoratedTable table.LargeTable tr td,
.LargeTable.FormTable tr td {
display: table-cell;
border: 1px solid;
}
.DefaultTable.LargeTable tr th,
.SknTplDecoratedTable table.LargeTable tr th,
.LargeTable.FormTable tr th {
width: 10em;
}
.DefaultTable.LargeTable tr td,
.SknTplDecoratedTable table.LargeTable tr td,
.LargeTable.FormTable tr td {
width: auto;
}
@media screen and (max-width: 767px) {
.DefaultTable,
.SknTplDecoratedTable table,
.FormTable {
/* notScrollable */
}
.DefaultTable:not(.LargeTable) thead,
.SknTplDecoratedTable table:not(.LargeTable) thead,
.FormTable:not(.LargeTable) thead {
display: none;
}
.DefaultTable:not(.LargeTable) tr,
.DefaultTable:not(.LargeTable) th,
.DefaultTable:not(.LargeTable) td,
.SknTplDecoratedTable table:not(.LargeTable) tr,
.FormTable:not(.LargeTable) tr,
.SknTplDecoratedTable table:not(.LargeTable) th,
.FormTable:not(.LargeTable) th,
.SknTplDecoratedTable table:not(.LargeTable) td,
.FormTable:not(.LargeTable) td {
display: block;
width: auto !important;
border-left: none;
border-right: none;
}
.DefaultTable:not(.LargeTable) tr,
.SknTplDecoratedTable table:not(.LargeTable) tr,
.FormTable:not(.LargeTable) tr {
margin-bottom: 0;
}
.DefaultTable:not(.LargeTable) tr th,
.SknTplDecoratedTable table:not(.LargeTable) tr th,
.FormTable:not(.LargeTable) tr th {
width: auto;
text-align: left;
}
}
/* FormTable
--------------------------------------------------- */
.FormTable tbody tr {
border: none !important;
}
.FormTable tbody tr th,
.FormTable tbody tr td {
vertical-align: top;
}
.FormTable tbody tr th {
padding-left: 0rem !important;
padding-right: 0rem !important;
}
@media screen and (min-width: 768px), print {
.FormTable tbody tr th {
width: 20%;
}
}
@media screen and (max-width: 767px) {
.FormTable tbody tr th {
padding: 0 !important;
}
}
.FormTable tbody tr td {
padding-right: 0rem !important;
}
@media screen and (min-width: 768px), print {
.FormTable tbody tr td {
width: 80%;
}
}
@media screen and (max-width: 767px) {
.FormTable tbody tr td {
padding-left: 0 !important;
}
}
/* BallonTable （バルーンヘルプ風テーブル）
--------------------------------------------------- */
.BallonTable tbody {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.BallonTable tbody tr {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: #fff;
border-radius: 1rem;
padding: 2.5rem 5rem;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.BallonTable tbody tr th,
.BallonTable tbody tr td {
padding: 0;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.BallonTable tbody tr th::after {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
width: 4.5rem;
margin: 0 1rem;
background-image: linear-gradient(to right, currentColor, currentColor 2px, transparent 2px, transparent 8px); /* 幅2の線を作る */
background-size: 5px 2px; /* グラデーションの幅・高さを指定 */
background-position: left 50%; /* 背景の開始位置を指定 */
background-repeat: repeat-x; /* 横向きにのみ繰り返す */
position: relative;
}
/* [カレンダー] テーブル
--------------------------------------------------- */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● icon.css */
/* 共通部品 */
/* ・リスト */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* アイコン 等 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* アイコンに下線が付くのを回避 */
.Icon, a .Icon, a:hover .Icon,
.Icon::before,
a .Icon::before,
a:hover .Icon::before {
text-decoration: none !important;
}
/* アイコン用のWEBフォントを適用するための継承用クラス
--------------------------------------------------- */
._webfont-icon::before, .DefaultLink:not(.ExternalLink)::before,
.DefaultBlock .BlockContents p:not(.MoreLink) a:not(.ExternalLink):not(.ImageLink)::before,
.DecoratedList li a:not(.ExternalLink):not(.ImageLink)::before,
.AsteriskList li a:not(.ExternalLink):not(.ImageLink)::before,
.DefaultTable tbody tr th a:not(.ExternalLink)::before,
.DefaultTable tbody tr td a:not(.ExternalLink)::before,
.SknTplDecoratedTable table tbody tr th a:not(.ExternalLink)::before,
.SknTplDecoratedTable table tbody tr td a:not(.ExternalLink)::before,
.FormTable tbody tr th a:not(.ExternalLink)::before,
.FormTable tbody tr td a:not(.ExternalLink)::before {
font-style: normal;
font-weight: normal;
speak: none;
margin: 0 0.25em 0 0;
display: inline-block;
text-decoration: none !important;
width: 1em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
}
._webfont-icon::before, .DefaultLink:not(.ExternalLink)::before,
.DefaultBlock .BlockContents p:not(.MoreLink) a:not(.ExternalLink):not(.ImageLink)::before,
.DecoratedList li a:not(.ExternalLink):not(.ImageLink)::before,
.AsteriskList li a:not(.ExternalLink):not(.ImageLink)::before,
.DefaultTable tbody tr th a:not(.ExternalLink)::before,
.DefaultTable tbody tr td a:not(.ExternalLink)::before,
.SknTplDecoratedTable table tbody tr th a:not(.ExternalLink)::before,
.SknTplDecoratedTable table tbody tr td a:not(.ExternalLink)::before,
.FormTable tbody tr th a:not(.ExternalLink)::before,
.FormTable tbody tr td a:not(.ExternalLink)::before {
font-family: "add-icon";
}
/* アイコンへの装飾
--------------------------------------------------- */
.Icon {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.Icon::before {
z-index: 2;
}
.Icon::after {
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
border-radius: 2em;
}
.icon-decorate-circle, .PerformerBlock .PerformerList > li a .PerformerFooter .LinkText .Icon.icon-cursor-right, .swiper-controller .PrevSlideButton .Icon,
.swiper-controller .NextSlideButton .Icon, .MoreLink a .Icon.icon-cursor-right, .DefaultButton .Icon.ExtIcon, .DefaultButton .Icon.icon-cursor-right, .SearchButton .Icon, .FormButton .Icon.icon-cursor-right, .LinkList li a .Icon.icon-right-dir,
.FileLinkList li a .Icon.icon-right-dir, .ImageLinkList li .TextItem .Icon,
.BlogBlock.Detail .BlockFooter .ButtonList .prev-link .Icon,
.BlogBlock.Detail .BlockFooter .ButtonList .next-link .Icon,
.bx-wrapper .bx-next .Icon,
.bx-wrapper .bx-prev .Icon,
.icon-file-pdf,
.icon-file-excel,
.icon-file-word,
.icon-file-image,
.icon-file-archive,
.MenuList li a .Icon.icon-cursor-right {
color: #252525;
width: 1.5em;
height: 1.5em;
}
.icon-decorate-circle::after, .PerformerBlock .PerformerList > li a .PerformerFooter .LinkText .Icon.icon-cursor-right::after, .swiper-controller .PrevSlideButton .Icon::after,
.swiper-controller .NextSlideButton .Icon::after, .MoreLink a .Icon.icon-cursor-right::after, .DefaultButton .Icon.ExtIcon::after, .DefaultButton .Icon.icon-cursor-right::after, .SearchButton .Icon::after, .FormButton .Icon.icon-cursor-right::after, .LinkList li a .Icon.icon-right-dir::after,
.FileLinkList li a .Icon.icon-right-dir::after, .ImageLinkList li .TextItem .Icon::after,
.BlogBlock.Detail .BlockFooter .ButtonList .prev-link .Icon::after,
.BlogBlock.Detail .BlockFooter .ButtonList .next-link .Icon::after,
.bx-wrapper .bx-next .Icon::after,
.bx-wrapper .bx-prev .Icon::after,
.icon-file-pdf::after,
.icon-file-excel::after,
.icon-file-word::after,
.icon-file-image::after,
.icon-file-archive::after,
.MenuList li a .Icon.icon-cursor-right::after {
background: #fff;
}
/* アイコン配置
--------------------------------------------------- */
/* icon position left */
/* 特殊なアイコン用のスタイル */
.icon-file-pdf:before,
.icon-file-excel:before,
.icon-file-word:before,
.icon-file-image:before,
.icon-file-archive:before {
border-color: currentColor;
}
.icon-file-pdf::before {
color: #bb0708 !important;
}
.icon-file-excel::before {
color: #12824b !important;
}
.icon-file-word::before {
color: #3b67a7 !important;
}
.icon-file-image::before {
color: #222 !important;
}
.icon-file-archive::before {
color: #30b4df !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* GoogleFonts Icon定義 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
.Icon.material-icons::before {
font-family: "Material Symbols Outlined";
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● form.css */
/* フォーム */
/* ・フォーム関連全般 */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ContentsDivision
--------------------------------------------------- */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Form Setting [Common] */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* FormTable 微調整
--------------------------------------------------- */
@media screen and (min-width: 768px), print {
.FormTable th .col-head-wrap {
padding: 1.6rem 0;
}
#ContentsArea div[class*=ConfirmPage].Freezed .FormTable th .col-head-wrap {
padding: 0;
}
}
@media screen and (max-width: 767px) {
.FormTable th .col-head-wrap {
padding: 1em 0 0;
}
}
/* FormItem （入力枠 1つ分）
--------------------------------------------------- */
.FormItem {
/* 入力枠の共通スタイル */
}
.FormItem p {
margin-bottom: 0;
}
.FormItem input[type=text],
.FormItem input[type=password],
.FormItem input[type=date],
.FormItem input[type=number],
.FormItem input[type=tel],
.FormItem input[type=mail],
.FormItem input[type=email],
.FormItem select {
line-height: 1.25;
}
.FormItem input[type=text],
.FormItem input[type=password],
.FormItem input[type=date],
.FormItem input[type=number],
.FormItem input[type=tel],
.FormItem input[type=mail],
.FormItem input[type=email],
.FormItem input[type=file],
.FormItem select,
.FormItem textarea {
max-width: 100%;
width: calc(100% - 5px);
border: none;
font-size: 1.6rem;
font-weight: 600;
padding: 1em 1rem;
margin-top: 2.5px;
margin-bottom: 2.5px;
background: #f0f0f0;
vertical-align: middle;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: inherit;
}
.FormItem .RadioButtonGroup,
.FormItem .CheckBoxGroup {
padding: 1em 0em;
}
.FormItem input[type=text],
.FormItem input[type=password],
.FormItem input[type=date],
.FormItem input[type=number],
.FormItem input[type=tel],
.FormItem input[type=mail],
.FormItem input[type=email],
.FormItem textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.FormItem input[type=number] {
width: 3.5em;
text-align: right;
-webkit-appearance: none;
-moz-appearance: textfield;
margin-right: 0.25em;
}
.FormItem input[type=file] {
cursor: pointer;
}
.FormItem select {
position: relative;
min-width: 8em;
}
.FormItem .wrap_select {
position: relative;
display: inline-block;
}
@media screen and (max-width: 767px) {
.FormItem .wrap_select {
display: block;
}
}
.FormItem .wrap_select::before {
content: "";
position: absolute;
right: 0.75em;
top: 50%;
z-index: 1;
margin-top: -4px;
width: 5px;
height: 5px;
border-top: 2px solid #000;
border-right: 2px solid #000;
-webkit-transform: rotate(135deg) translate3d(0, 0, 0);
transform: rotate(135deg) translate3d(0, 0, 0);
pointer-events: none;
line-height: 1.1;
vertical-align: bottom;
}
.FormItem .wrap_select select {
position: static;
width: auto;
padding-right: 1.75em !important;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #252525;
}
.FormItem .wrap_select select::-ms-expand {
display: none;
}
.FormItem .wrap_select select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #828c9a;
}
.FormItem .wrap_select select option {
color: #252525;
}
.FormItem textarea {
width: 100%;
height: 12em;
}
.FormItem .TelGroup input[type].InputTel,
.FormItem .FaxGroup input[type].InputTel {
width: 6em;
text-align: center;
}
.FormItem .TelGroup input[type].InputTel2,
.FormItem .FaxGroup input[type].InputTel2 {
width: 5em;
}
.FormItem input[type].InputZip {
width: 10em;
text-align: left;
margin: 0 3px;
}
.FormItem .ZipGroup input[type].InputZip {
text-align: center;
}
.FormItem .ZipGroup input[type].InputZip1 {
width: 5em;
}
.FormItem .ZipGroup input[type].InputZip2 {
width: 6em;
}
.FormItem input[type=checkbox],
.FormItem input[type=radio] {
margin-right: 0.5rem;
}
.FormItem .RadioButtonGroup,
.FormItem .CheckBoxGroup {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.125em 0.5em;
margin-top: -0.25em;
margin-bottom: -0.25em;
}
.FormItem .RadioButtonGroup label,
.FormItem .CheckBoxGroup label {
white-space: nowrap;
border-radius: 0.5em;
padding: 0.25em 0.75em;
cursor: pointer;
vertical-align: middle;
position: relative;
padding-left: 2.5rem;
-webkit-transition: background 0.2s;
transition: background 0.2s;
}
.FormItem .RadioButtonGroup label:not(.Invalid),
.FormItem .CheckBoxGroup label:not(.Invalid) {
cursor: pointer;
}
html.PcView .FormItem .RadioButtonGroup label:not(.Invalid):hover,
html.PcView .FormItem .CheckBoxGroup label:not(.Invalid):hover {
background: rgba(0, 0, 0, 0.125);
}
.FormItem .RadioButtonGroup label:not(.Invalid).Checked,
.FormItem .CheckBoxGroup label:not(.Invalid).Checked {
background: rgba(0, 0, 0, 0.125);
}
.FormItem .RadioButtonGroup label input[type=checkbox],
.FormItem .RadioButtonGroup label input[type=radio],
.FormItem .CheckBoxGroup label input[type=checkbox],
.FormItem .CheckBoxGroup label input[type=radio] {
border: none;
height: 1px;
width: 1px;
opacity: 0;
}
.FormItem .RadioButtonGroup label .outside,
.FormItem .CheckBoxGroup label .outside {
display: inline-block;
position: absolute;
left: 0.5em;
top: 50%;
margin-top: -1rem;
width: 2rem;
height: 2rem;
border-radius: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #f0f0f0;
}
.FormItem .RadioButtonGroup label .inside,
.FormItem .CheckBoxGroup label .inside {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: inline-block;
border-radius: 50%;
width: 1rem;
height: 1rem;
background: #e6551e;
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
-webkit-transition: -webkit-transform 0.2s;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
margin-left: -0.5rem;
margin-top: -0.5rem;
}
.no-transforms .FormItem .RadioButtonGroup label .inside,
.no-transforms .FormItem .CheckBoxGroup label .inside {
left: auto;
top: auto;
width: 0;
height: 0;
}
.FormItem .RadioButtonGroup label input:checked + .outside .inside,
.FormItem .CheckBoxGroup label input:checked + .outside .inside {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
/* placeholder */
::-webkit-input-placeholder {
color: rgba(37, 37, 37, 0.5);
font-weight: 500 !important;
font-size: 1.4rem;
}
::-moz-placeholder {
color: rgba(37, 37, 37, 0.5);
font-weight: 500 !important;
font-size: 1.4rem;
}
:-ms-input-placeholder {
color: rgba(37, 37, 37, 0.5);
font-weight: 500 !important;
font-size: 1.4rem;
}
::-ms-input-placeholder {
color: rgba(37, 37, 37, 0.5);
font-weight: 500 !important;
font-size: 1.4rem;
}
::placeholder {
color: rgba(37, 37, 37, 0.5);
font-weight: 500 !important;
font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
::-webkit-input-placeholder {
font-size: 1.2rem;
}
::-moz-placeholder {
font-size: 1.2rem;
}
:-ms-input-placeholder {
font-size: 1.2rem;
}
::-ms-input-placeholder {
font-size: 1.2rem;
}
::placeholder {
font-size: 1.2rem;
}
}
/* focus時 */
input:not([readonly]):focus,
select:not([readonly]):focus,
textarea:not([readonly]):focus {
border: 1px solid #009420;
}
/* エラー時 */
.form-error:not([type=radio]),
.form-error:not([type=checkbox]),
.RadioButtonGroup.form-error,
.CheckBoxGroup.form-error {
border: 2px solid #f00 !important;
}
.form-error-msg {
color: #f00;
display: block;
font-size: 87.5%;
}
html.safari .form-error[type=radio],
html.safari .form-error[type=checkbox] {
background: #333;
}
/* readonly */
input[readonly],
select[readonly],
textarea[readonly] {
border: none !important;
background: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* invalid */
input[invalid],
select[invalid],
textarea[invalid] {
color: #777 !important;
background: #ccc !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-color: #aaa;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* baserフォーム部品のスタイル */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
.FormBlock .BlockContents .Heading.Type1 {
margin-bottom: 0.5em;
}
.FormBlock .BlockContents .required {
color: #e6551e;
font-size: 1.4rem;
}
.FormBlock .BlockContents .Attention {
color: #e6551e;
}
.BaserMailFormTable {
margin-top: 5rem;
}
.BaserMailFormTable .required {
vertical-align: super;
}
.BaserMailFormTable td {
/* 補足テキストのスタイル - - - - - - */
}
.BaserMailFormTable td .FormItem {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 1rem;
}
.BaserMailFormTable td .FormItem .Unit {
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
}
#ContentsArea div[class*=ConfirmPage].Freezed .BaserMailFormTable td .FormItem .Unit {
-webkit-box-flex: initial;
-ms-flex-positive: initial;
flex-grow: initial;
}
.BaserMailFormTable td .FormItem .RadioButtonGroup .Unit,
.BaserMailFormTable td .FormItem .CheckBoxGroup .Unit {
-webkit-box-flex: initial;
-ms-flex-positive: initial;
flex-grow: initial;
position: absolute;
}
.BaserMailFormTable td .FormItem .RadioButtonGroup label,
.BaserMailFormTable td .FormItem .CheckBoxGroup label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.BaserMailFormTable td .FormItem[id*=FieldMessageZip] .Unit, .BaserMailFormTable td .FormItem[id*=FieldMessageAddress1] .Unit {
-webkit-box-flex: initial;
-ms-flex-positive: initial;
flex-grow: initial;
}
.BaserMailFormTable td .FormItem[id*=Tel1], .BaserMailFormTable td .FormItem[id*=Tel2], .BaserMailFormTable td .FormItem[id*=Tel3] {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 0;
margin-right: 0.5rem;
}
.BaserMailFormTable td .FormItem[id*=Tel1] .Unit, .BaserMailFormTable td .FormItem[id*=Tel2] .Unit, .BaserMailFormTable td .FormItem[id*=Tel3] .Unit {
width: 7.5em;
}
@media screen and (max-width: 767px) {
.BaserMailFormTable td .FormItem[id*=Tel1] .Unit, .BaserMailFormTable td .FormItem[id*=Tel2] .Unit, .BaserMailFormTable td .FormItem[id*=Tel3] .Unit {
width: 5.5em;
}
}
.BaserMailFormTable td .FormItem#FieldMessageCareerStarted {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.BaserMailFormTable td .FormItem#FieldMessageCareerStarted .Unit {
width: 6.5em;
-webkit-box-flex: initial;
-ms-flex-positive: initial;
flex-grow: initial;
}
.BaserMailFormTable td .FormItem#FieldMessageBirthYear, .BaserMailFormTable td .FormItem#FieldMessageBirthMonth {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.BaserMailFormTable td .FormItem#FieldMessageBirthYear .Unit select, .BaserMailFormTable td .FormItem#FieldMessageBirthMonth .Unit select {
min-width: 5em;
}
.BaserMailFormTable td .FormItem#FieldMessageBirthYear:not(:first-child), .BaserMailFormTable td .FormItem#FieldMessageBirthMonth:not(:first-child) {
margin-left: 1em;
}
.BaserMailFormTable td p {
margin: 0;
}
.BaserMailFormTable td .mail-after-attachment,
.BaserMailFormTable td .mail-description,
.BaserMailFormTable td .mail-attention {
font-size: 1.4rem;
}
.BaserMailFormTable td .mail-description,
.BaserMailFormTable td .mail-attention {
margin: 0.5em 0;
}
.BaserMailFormTable td .mail-before-attachment {
min-width: 7em;
}
.BaserMailFormTable td .FormItem#auth-captcha {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 0.5rem;
}
.BaserMailFormTable td .FormItem#auth-captcha .Unit {
width: 20em;
}
.BaserMailFormTable td .error-message {
background: #e6551e;
color: white;
font-size: 1.2rem;
line-height: 1.25;
min-width: 10em;
font-weight: 600;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
padding: 1rem;
}
/* ボタンリスト （フォーム用）
--------------------------------------------------- */
.FormButtonList {
list-style: none;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 1rem;
}
.FormButtonList li a {
width: 100%;
}
.FormButtonList li a .Label {
font-weight: 600;
}
.FormButtonList li:first-child:last-child {
margin-left: auto;
margin-right: auto;
}
.FormButtonList li:first-child:last-child a {
min-width: 20em;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● crumb.css */
/* 共通部品 */
/* ・パンくずナビ */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* BreadCrumb
--------------------------------------------------- */
.BreadCrumb {
padding: 1.5em 0;
font-size: 1.4rem;
line-height: 1.25;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 767px) {
.BreadCrumb {
font-size: 1.2rem;
}
}
@media screen and (min-width: 768px), print {
.BreadCrumb {
width: 100%;
max-width: 1200px;
}
}
@media screen and (max-width: 1199px), print {
.BreadCrumb {
width: calc(100% - 2rem);
}
}
@media screen and (max-width: 767px) {
.BreadCrumb {
width: calc(100% - 4rem);
min-width: 320px;
}
}
.BreadCrumb p {
text-align: left;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.5em;
}
.BreadCrumb p > * {
letter-spacing: 0em;
}
.BreadCrumb p .Partition {
padding: 0;
padding-right: 0.5rem;
color: rgba(37, 37, 37, 0);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 0.1rem;
}
.BreadCrumb p .Partition::after {
display: inline-block;
position: static;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
width: 0.75rem;
height: 0.75rem;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.BreadCrumb p .Unit {
text-align: left;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #999;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.BreadCrumb p .Unit.Last {
font-weight: 700;
color: #252525;
}
.BreadCrumb p a {
color: inherit;
}
.BreadCrumb p a:hover .Unit {
color: #252525;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● pagenaition.css */
/* 共通部品 */
/* ・ページネーション */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* pagination
--------------------------------------------------- */
.pagination {
text-align: center;
margin: 0.75em auto;
font-size: 1.6rem;
font-weight: 600;
}
.pagination p {
padding: 0.25em 0.25em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 1rem;
}
.pagination p a {
background-image: none;
text-decoration: none !important;
}
.pagination p a::after {
-webkit-transition: color 0.2s, background 0.2s, -webkit-transform 0.2s;
transition: color 0.2s, background 0.2s, -webkit-transform 0.2s;
transition: transform 0.2s, color 0.2s, background 0.2s;
transition: transform 0.2s, color 0.2s, background 0.2s, -webkit-transform 0.2s;
-webkit-transform: scale(1);
transform: scale(1);
z-index: -1;
}
html.PcView .pagination p a:hover, html.PcView .pagination p a:focus {
color: #fff !important;
text-decoration: none;
}
html.PcView .pagination p a:hover::after, html.PcView .pagination p a:focus::after {
background-color: #009420;
background-image: url(../img/common/decoration/noize_strong.svg);
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
html.PcView .DecoratedBg.Type1 .pagination p a:hover, html.PcView .DecoratedBg.Type1 .pagination p a:focus {
color: #009420 !important;
}
html.PcView .DecoratedBg.Type1 .pagination p a:hover::after, html.PcView .DecoratedBg.Type1 .pagination p a:focus::after {
background: #fff !important;
}
.pagination p a,
.pagination p .current {
display: inline-block;
text-align: center;
vertical-align: middle;
text-decoration: none;
line-height: 2.25em;
padding: 0 !important;
min-width: 2.25em;
color: #009420;
border-radius: 5em;
}
.DecoratedBg.Type1 .pagination p a,
.DecoratedBg.Type1 .pagination p .current {
color: #fff !important;
}
.pagination p .current {
color: #fff !important;
}
.pagination p .current::after {
background-color: #009420;
background-image: url(../img/common/decoration/noize_strong.svg);
z-index: -1;
}
.DecoratedBg.Type1 .pagination p .current {
color: #009420 !important;
}
.DecoratedBg.Type1 .pagination p .current::after {
background: #fff !important;
}
.pagination p .first,
.pagination p .last {
margin: 0 2rem;
}
.pagination p .first a,
.pagination p .last a {
color: #fff !important;
text-decoration: none;
}
.pagination p .first a::after,
.pagination p .last a::after {
background-color: #009420;
background-image: url(../img/common/decoration/noize_strong.svg);
}
.DecoratedBg.Type1 .pagination p .first a,
.DecoratedBg.Type1 .pagination p .last a {
color: #009420 !important;
}
.DecoratedBg.Type1 .pagination p .first a::after,
.DecoratedBg.Type1 .pagination p .last a::after {
background: #fff !important;
}
.pagination p .disabled {
display: none;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● column.css */
/* 共通部品 */
/* ・段組み */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Column Setting */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ColumnGroup
--------------------------------------------------- */
.ColumnGroup {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 3rem;
}
/* - - column common - - */
.ColumnGroup > * {
width: 100%;
margin-left: initial;
margin-right: initial;
}
/* 要素数をクラス名に持たせて自動配置 ※ulにクラス名をつけて使用 */
/* ColumnGroup（数字）elements が横並び数（幅に応じて変化） */
/* - - two columns - - */
.ColumnGroup2elements > * {
width: calc((100% - 3rem) / 2);
}
@media screen and (max-width: 767px) {
.ColumnGroup2elements:not(.FixedNumber) > * {
width: 100%;
}
}
/* - - three columns - - */
.ColumnGroup3elements > * {
width: calc((100% - 6rem) / 3);
}
@media screen and (max-width: 767px) {
.ColumnGroup3elements:not(.FixedNumber) > * {
width: 100%;
}
}
/* - - four columns - - */
.ColumnGroup4elements > * {
width: calc((100% - 9rem) / 4);
}
@media screen and (max-width: 767px) {
.ColumnGroup4elements:not(.FixedNumber) > * {
width: calc((100% - 3rem) / 2);
}
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● button.css */
/* 共通部品 */
/* ・ボタン */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 共通設定 */
.Button,
.ContactButton,
.DefaultButton,
.FormButton input[type=button],
.FormButton input[type=submit],
.FormButton input[type=reset] {
display: inline-block;
text-align: center;
cursor: pointer;
position: relative;
-webkit-transition: all 0.2s;
transition: all 0.2s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
html.PcView .Button:hover, html.PcView .Button:focus,
html.PcView .ContactButton:hover,
html.PcView .DefaultButton:hover,
html.PcView .FormButton input[type=button]:hover,
.FormButton html.PcView input[type=button]:hover,
html.PcView .FormButton input[type=submit]:hover,
.FormButton html.PcView input[type=submit]:hover,
html.PcView .FormButton input[type=reset]:hover,
.FormButton html.PcView input[type=reset]:hover,
html.PcView .ContactButton:focus,
html.PcView .DefaultButton:focus,
html.PcView .FormButton input[type=button]:focus,
.FormButton html.PcView input[type=button]:focus,
html.PcView .FormButton input[type=submit]:focus,
.FormButton html.PcView input[type=submit]:focus,
html.PcView .FormButton input[type=reset]:focus,
.FormButton html.PcView input[type=reset]:focus {
text-decoration: none;
}
.Button .Icon.ExtIcon,
.ContactButton .Icon.ExtIcon,
.DefaultButton .Icon.ExtIcon,
.FormButton input[type=button] .Icon.ExtIcon,
.FormButton input[type=submit] .Icon.ExtIcon,
.FormButton input[type=reset] .Icon.ExtIcon {
display: none;
}
/* SimpleButton [ input type="button" ]
--------------------------------------------------- */
.FormButton input[type=button],
.FormButton input[type=submit],
.FormButton input[type=reset] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
border: none;
vertical-align: middle;
color: #009420;
background-color: #f8f8f2;
border-radius: 5em;
padding: 1.5rem;
padding-left: 2rem;
padding-right: 7.5em;
font-size: 1.6rem;
font-family: inherit;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
text-decoration: none;
position: relative;
font-weight: 600;
}
.FormButton .Icon {
position: absolute;
right: 2rem;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
z-index: 50;
}
.FormButton .Icon.icon-cursor-right {
color: #fff;
}
.FormButton .Icon.icon-cursor-right::after {
background-color: #009420;
background-image: url(../img/common/decoration/noize_strong.svg);
}
/* 検索ボタン
--------------------------------------------------- */
.SearchButton .Icon {
color: #fff;
}
.SearchButton .Icon::after {
background: #009420;
}
/* ボタンのバリエーション
--------------------------------------------------- */
/* デフォルト */
.DefaultButton {
color: #009420;
background-color: #f8f8f2;
border-radius: 5em;
padding: 1.5rem;
padding-left: 2rem;
font-size: 1.6rem;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
text-decoration: none;
position: relative;
/* 特定の要素内の場合は白背景にする */
}
.DefaultButton .Label {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
padding-right: 1.5em;
font-weight: 600;
letter-spacing: 0.05em;
}
.DefaultButton .Icon {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.DefaultButton .Icon.ExtIcon, .DefaultButton .Icon.icon-cursor-right {
color: #fff;
}
.DefaultButton .Icon.ExtIcon::after, .DefaultButton .Icon.icon-cursor-right::after {
background-color: #009420;
background-image: url(../img/common/decoration/noize_strong.svg);
}
.DefaultButton.ExternalLink .Icon.ExtIcon {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.DefaultButton.ExternalLink .Icon:not(.ExtIcon) {
display: none;
}
.SknTplDecoratedBox.Type1 .DefaultButton, .DefaultBlock.Type3 .DefaultButton, .DecoratedBg.Type2 .DefaultButton, .DefaultButton.White {
background: white;
}
.SknTplDecoratedBox.Type2 .DefaultButton {
background-color: #f8f8f2;
}
/* お問い合わせ等のボタン （フッタとハンバーガーで使用しているのみ） */
.ContactButton {
color: #009420;
background: #fff;
border-radius: 4em;
padding: 1.25rem 1rem;
line-height: 1.25;
min-width: 20rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.ContactButton .Icon {
margin-right: 1em;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.ContactButton .Label {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
display: inline-block;
font-weight: 700;
letter-spacing: 0.05em;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* GoPageTop */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* GoPageTop
--------------------------------------------------- */
.GoPageTop {
line-height: 1;
display: none;
position: fixed;
position: sticky;
bottom: 1.5rem;
z-index: 100;
}
@media screen and (max-width: 767px) {
.GoPageTop {
position: absolute;
top: 5rem;
right: 2rem;
}
}
.GoPageTop * {
line-height: 1;
}
.GoPageTop p a .Icon,
.GoPageTop p a .Icon::before {
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.GoPageTop p a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.GoPageTop p a .Label {
text-align: center;
}
.GoPageTop p a .Label br {
display: none;
}
.GoPageTop p a .Icon {
width: 3.6rem;
height: 3.6rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: normal;
border-radius: 100%;
color: #fff;
margin: 0 0 0.75rem;
padding: 0;
position: relative;
top: 0;
}
.GoPageTop p a .Icon::after {
background: #252525;
}
.GoPageTop p a .Icon::before {
margin: 0;
padding: 0;
}
/* menu-trigger (開閉式メニュー)
--------------------------------------------------- */
.MenuTrigger {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 1rem;
line-height: 1;
cursor: pointer;
}
.MenuTrigger a {
-webkit-transition: all 0.2s;
transition: all 0.2s;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
/* hover */
/* Active */
}
.MenuTrigger a .Icon,
.MenuTrigger a .Label {
display: block;
}
.MenuTrigger a .Label {
text-align: center;
color: #009420;
margin-top: 0.5em;
font-size: 1.2rem;
letter-spacing: 0.05em;
}
.MenuTrigger a .Icon {
position: relative;
width: 3.75em;
height: 3.75em;
font-size: 1rem !important;
}
.MenuTrigger a .Icon span.Shape {
position: absolute;
display: inline-block;
left: 0%;
width: 100%;
height: 0.4em;
margin-top: -0.15em;
background-color: #009420;
-webkit-transition: all 0.2s;
transition: all 0.2s;
opacity: 1;
border-radius: 1em;
}
.MenuTrigger a .Icon span.Shape:nth-of-type(1) {
top: 20%;
}
.MenuTrigger a .Icon span.Shape:nth-of-type(2) {
top: 50%;
}
.MenuTrigger a .Icon span.Shape:nth-of-type(3) {
top: 80%;
}
.MenuTrigger a .Icon span.Illust {
position: absolute;
right: -0.375em;
bottom: -0.25em;
font-size: 2.5em;
color: #009420;
background: #fff;
border-radius: 2em;
padding: 0.025em;
opacity: 1;
-webkit-transition: opacity 0.2s, -webkit-transform 0.1s;
transition: opacity 0.2s, -webkit-transform 0.1s;
transition: opacity 0.2s, transform 0.1s;
transition: opacity 0.2s, transform 0.1s, -webkit-transform 0.1s;
-webkit-transform-origin: 80% 80%;
transform-origin: 80% 80%;
-webkit-transform: scale(1.125);
transform: scale(1.125);
}
html.PcView .MenuTrigger a:hover {
text-decoration: none;
}
html.PcView .MenuTrigger a:hover .Icon span.Shape {
background: #009420;
}
html.PcView .MenuTrigger a:hover .Icon span.Illust {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
.MenuTrigger a.Active .Icon span.Shape:nth-of-type(1) {
-webkit-transform: rotate(-330deg);
transform: rotate(-330deg);
top: 50%;
}
.MenuTrigger a.Active .Icon span.Shape:nth-of-type(2) {
opacity: 0;
}
.MenuTrigger a.Active .Icon span.Shape:nth-of-type(3) {
-webkit-transform: rotate(330deg);
transform: rotate(330deg);
top: 50%;
}
.MenuTrigger a.Active .Icon span.Illust {
opacity: 0;
}
.MenuTrigger a.Active:hover {
background: none !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● other.css */
/* 共通部品 */
/* ・その他 */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* レスポンシブ 表示ON/OFF */
/* + + + + + レスポンシブ + + + + + */
@media screen and (min-width: 768px), print {
.hide-wide {
display: none !important;
}
}
@media screen and (max-width: 767px) {
.hide-narrow {
display: none !important;
}
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* images */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
img {
max-width: 100%;
height: auto;
}
/* googlemap 内の画像は適用外 */
#GoogleMap img {
max-width: none;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* video */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
video {
max-width: 100%;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* iframe */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
iframe:not(.cboxIframe) {
aspect-ratio: 16/9;
width: 100%;
height: auto;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* DropDown */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ドロップダウン
※開閉処理は JSに置き換えたためコメントアウト
--------------------------------------------------- */
/* 特殊な段落のスタイル定義
--------------------------------------------------- */
/* - - （FAQ 汎用） - - */
.FaqParagraph {
background: rgba(248, 248, 242, 0.25);
border: 1px solid #ccc;
border-radius: 0.5em;
margin: 0 auto 1em;
-webkit-transition: all 0.2s;
transition: all 0.2s;
/* 開閉ボタン・hover */
/* - - question - - */
/* - - answer - - */
}
.FaqParagraph .Question,
.FaqParagraph .Answer {
position: relative;
padding: 1.5em 1.5em;
padding-left: 4em;
}
@media screen and (max-width: 767px) {
.FaqParagraph .Question,
.FaqParagraph .Answer {
padding: 1em 1em;
padding-left: 3em;
}
}
.FaqParagraph .Question::before,
.FaqParagraph .Answer::before {
position: absolute;
top: 1.75em;
left: 2em;
font-weight: normal;
font-family: "Arial";
-webkit-transform: scale(1.75);
transform: scale(1.75);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
@media screen and (max-width: 767px) {
.FaqParagraph .Question::before,
.FaqParagraph .Answer::before {
top: 1em;
left: 1.5em;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
.FaqParagraph .Answer::before {
content: "A.";
color: rgb(240, 100, 120);
}
.FaqParagraph .Question::before {
content: "Q.";
color: #009420;
}
.FaqParagraph .Question::after {
content: "×";
color: #777;
background: #009420;
position: absolute;
font-weight: 800;
font-size: 1.5rem;
border-radius: 3em;
line-height: 3rem;
text-align: center;
width: 3rem;
opacity: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
top: 0.5rem;
right: 0.5rem;
}
.FaqParagraph:not(.Active):hover, .FaqParagraph:not(.Active):focus {
border-color: #009420;
}
.FaqParagraph .ParagraphHeader {
cursor: pointer;
}
.FaqParagraph .ParagraphHeader .Heading {
position: relative;
}
@media screen and (min-width: 768px), print {
.FaqParagraph .ParagraphHeader .Heading {
padding-right: 1em !important;
}
}
.FaqParagraph .ParagraphHeader:hover::after, .FaqParagraph .ParagraphHeader:focus::after {
color: #fff;
}
.FaqParagraph.Active .ParagraphHeader:after {
opacity: 1;
}
.FaqParagraph .Question {
font-weight: bold;
margin: 0;
}
.FaqParagraph .Question .Heading {
margin: 0;
font-weight: 700;
font-size: 112.5%;
}
@media screen and (max-width: 767px) {
.FaqParagraph .Question .Heading {
font-size: 100%;
}
}
.FaqParagraph .Answer {
border-top: 1px dashed #ccc;
}
.FaqParagraph .Answer .DefaultText {
margin: 0;
font-size: 100%;
}
@media screen and (max-width: 767px) {
.FaqParagraph .Answer .DefaultText {
font-size: 100%;
}
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 開閉コンテンツ（アコーディオン） */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
.AccordionParent {
-webkit-transition: all 0.2s;
transition: all 0.2s;
position: relative;
}
.AccordionParent .ToggleButton {
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
right: 0;
z-index: 10;
}
.AccordionParent .ToggleButton .Icon {
position: relative;
width: 1.5em;
height: 1.5em;
}
.AccordionParent .ToggleButton .Icon::before, .AccordionParent .ToggleButton .Icon::after {
background: #252525;
}
.AccordionParent .ToggleButton .Icon::before {
width: 90%;
height: 2px;
top: calc(50% - 1px);
left: 5%;
}
.AccordionParent .ToggleButton .Icon::after {
width: 2px;
height: 90%;
top: 5%;
left: calc(50% - 1px);
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s;
opacity: 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.AccordionParent .AccordionChild {
display: none;
}
.AccordionParent.Active .ToggleButton .Icon::after {
opacity: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
/* Scrollable ウィンドウ幅が狭いときに横スクロール
--------------------------------------------------- */
.Scrollable {
margin: 1em auto;
/* スクロールバー装飾（firefox） */
scrollbar-width: thin;
scrollbar-color: #009420 rgba(0, 0, 0, 0.25);
/* スクロールバー装飾（webkit系） */
/* アイコン */
}
.Scrollable::-webkit-scrollbar {
height: 4px;
margin-top: 5px;
}
.Scrollable::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.25);
}
.Scrollable::-webkit-scrollbar-thumb {
background: #009420;
}
.Scrollable .ScrollableIcon {
position: absolute;
top: 40%;
left: 175px;
z-index: 10;
padding: 28px 25px;
border-radius: 100%;
background: rgba(255, 255, 255, 0.95);
-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
display: inline-block;
}
.Scrollable .ScrollableIcon img {
width: 60px;
}
@media screen and (min-width: 768px), print {
.Scrollable .ScrollableIcon {
display: none !important;
}
}
@media screen and (max-width: 767px) {
.Scrollable {
position: relative;
margin-bottom: 1em;
/* 画像用の処理 */
/* Table用の処理 */
}
.Scrollable:not(.Vertical) {
overflow-x: auto;
}
.Scrollable:hover .ScrollableIcon {
display: none;
}
.Scrollable:not(.Vertical) > img {
width: 200vw;
max-width: initial;
}
.Scrollable:not(.Vertical) > table {
width: 660px; /* ここはスクロール対象の最大幅（デフォ値）を入れる */
margin-bottom: 0 !important;
}
.Scrollable:not(.Vertical) > table th {
white-space: nowrap;
}
}
.Scrollable.Vertical {
margin: 2.5rem auto;
max-height: 65rem;
overflow-y: auto;
border: 1px solid #009420;
padding: 0;
}
@media screen and (max-width: 767px) {
.Scrollable.Vertical {
max-height: 50vh;
}
}
.Scrollable.Vertical > table {
margin: 0;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* SearchBox */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 検索ボックス
--------------------------------------------------- */
.SearchBox {
margin: 0 1em;
position: relative;
font-size: 1.4rem;
}
.SearchBox .FormItem {
width: 20rem;
margin: 0;
}
.SearchBox .FormItem input[type=text] {
-webkit-transition: background 0.2s;
transition: background 0.2s;
background: none;
border: 1px solid;
color: #fff;
border-radius: 3em;
padding: 0.375em 1.5em 0.375em 0.5em;
-webkit-box-shadow: none;
box-shadow: none;
}
.SearchBox .FormItem input[type=text]:focus {
background: rgba(255, 255, 255, 0.2);
}
.SearchBox .ButtonItem .Button {
position: absolute;
right: 1em;
top: 50%;
margin: 0;
width: 1em;
margin-top: -0.5em;
line-height: 1em;
font-size: 1.4rem;
width: 1em;
height: 1em;
border: none !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* FontsizeChangeBox */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 文字サイズ可変ボックス
--------------------------------------------------- */
.FontsizeChangeBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 1.2rem;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 3rem;
}
.FontsizeChangeBox, .FontsizeChangeBox * {
line-height: 1;
}
.FontsizeChangeBox .FontSizeChanger {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
}
.FontsizeChangeBox .FontSizeChanger li {
margin-left: 0.5rem;
}
.FontsizeChangeBox .FontSizeChanger li a {
font-size: 1.2rem;
border: 1px solid #009420;
background: #fff;
padding: 0.4em 0.75em;
}
.FontsizeChangeBox .FontSizeChanger li a.Active {
color: #fff;
background: #009420;
border-color: #009420;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* MessageBox */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* MessageBox（汎用メッセージ：NotFound,システム警告・エラーなど）
--------------------------------------------------- */
.MessageBox {
padding: 25px 25px;
margin: 1em auto;
width: 75%;
text-align: center;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
position: relative;
/* options */
}
.MessageBox .Heading {
margin: 0 0 1em;
line-height: 1.75;
font-size: 100%;
}
.MessageBox .Heading .Icon {
display: block;
}
.MessageBox .Heading .Icon::before {
font-size: 175%;
}
.MessageBox .Heading .Label {
display: block;
}
.MessageBox .Heading .Icon + .Label {
margin-top: 20px;
}
.MessageBox .DefaultText {
text-align: center;
line-height: 2;
margin: 0;
}
@media screen and (max-width: 767px) {
.MessageBox {
width: 90%;
}
.MessageBox .Heading .Icon {
padding-top: 1.5em;
}
.MessageBox .Heading .Label:first-child {
margin-top: 20px;
}
}
.MessageBox.Caution {
color: #222;
color: inherit;
background: #f5f47a;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* LinkBox */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* LinkBox（未使用）
--------------------------------------------------- */
.LinkBox {
padding: 2.5rem;
margin: 5rem auto;
background-color: #f8f8f2;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* iframeBox */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* iframeBox （iframeをレスポンシブ対応で埋め込む）
--------------------------------------------------- */
.iframeBox:not(.Square) {
width: 100%;
position: relative;
padding-top: calc(100% * 0.5625);
}
.iframeBox:not(.Square) > * {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.iframeBox.Square {
width: 100%;
position: relative;
padding-top: calc(100% * 1);
}
.iframeBox.Square > * {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* もっと見るリンク */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* MoreLink
--------------------------------------------------- */
.MoreLink a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 767px) {
.MoreLink a {
font-size: 1.4rem;
}
}
.MoreLink a .Icon {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
margin-left: 1em;
}
.MoreLink a .Icon.icon-cursor-right {
color: #fff;
}
.MoreLink a .Icon.icon-cursor-right::after {
background-color: #009420;
background-image: url(../img/common/decoration/noize_strong.svg);
}
.MoreLink a .Label {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
color: #009420;
line-height: 1.5;
font-weight: 600;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 各種段落 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* PageParagraph 固定ページを複数呼び出すときのパラグラフ
--------------------------------------------------- */
.PageParagraph {
padding-bottom: 7rem;
}
.PageParagraph:not(:first-child) {
padding-top: 7rem;
}
.PageParagraph:not(:last-child) {
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; /* 横向きにのみ繰り返す */
}
.PageParagraph .ParagraphHeader {
margin-bottom: 5rem;
}
/* ContentsLinkParagraph
--------------------------------------------------- */
.ContentsLinkParagraph {
background-color: #fff;
-webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
border-radius: 1.5rem;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.ContentsLinkParagraph .ParagraphHeader {
color: #fff;
background-color: #009420;
overflow: initial;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (min-width: 768px), print {
.ContentsLinkParagraph .ParagraphHeader {
font-size: 2.5rem;
height: 4.25em;
}
}
@media screen and (max-width: 767px) {
.ContentsLinkParagraph .ParagraphHeader {
font-size: 2rem;
padding: 1em 0.5em;
}
}
.ContentsLinkParagraph .ParagraphHeader .Heading {
font-weight: 700;
line-height: 1.5;
text-align: center;
}
@media screen and (max-width: 767px) {
.ContentsLinkParagraph .ParagraphHeader .Heading br {
display: none;
}
}
.ContentsLinkParagraph .ParagraphContents {
padding: 3.5rem 5rem;
padding: 10% 15%;
}
.ContentsLinkParagraph .ParagraphContents .ImageItem .Image.Circle {
border-radius: 100%;
overflow: hidden;
}
.ContentsLinkParagraph .ParagraphContents .ImageItem .Image.Circle img {
width: 100%;
aspect-ratio: 1/1;
-o-object-fit: cover !important;
object-fit: cover !important;
}
.ContentsLinkParagraph .ParagraphFooter {
padding: 0 3.5rem 2.5rem;
padding: 0 15% 10%;
}
.ContentsLinkParagraph .ParagraphFooter .ButtonList {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.ContentsLinkParagraph .ParagraphFooter .ButtonList li {
width: 100%;
}
.ContentsLinkParagraph .ParagraphFooter .ButtonList li a {
min-width: initial;
}
.ContentsLinkParagraph a:hover .DefaultButton {
-webkit-transform: scale(1) !important;
transform: scale(1) !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 同階層のSCSSをimport */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● anim.css */
/* CSSアニメーションを定義 */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 基本形
--------------------------------------------------- */
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes img_slide {
0% {
object-position: 25% 50%;
}
100% {
object-position: 75% 50%;
}
}
@keyframes img_slide {
0% {
-o-object-position: 25% 50%;
object-position: 25% 50%;
}
100% {
-o-object-position: 75% 50%;
object-position: 75% 50%;
}
}
@-webkit-keyframes txt_underline {
0% {
background-position: 100% 100%;
background-size: 100% 1px;
}
50% {
background-position: 100% 100%;
background-size: 0 1px;
}
50.1% {
background-position: 0 100%;
background-size: 0 1px;
}
100% {
background-position: 0 100%;
background-size: 100% 1px;
}
}
@keyframes txt_underline {
0% {
background-position: 100% 100%;
background-size: 100% 1px;
}
50% {
background-position: 100% 100%;
background-size: 0 1px;
}
50.1% {
background-position: 0 100%;
background-size: 0 1px;
}
100% {
background-position: 0 100%;
background-size: 100% 1px;
}
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● hover.css */
/* */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
a {
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
a.NoLink {
cursor: default;
}
a.NoLink .Icon {
opacity: 0;
}
html.PcView a.NoLink:hover, html.PcView a.NoLink:focus {
background: inherit !important;
text-decoration: inherit !important;
}
/* 各種hover効果
--------------------------------------------------- */
/* default */
.hvr-default,
.SiteHeaderBlock .BlockContents .MenuList.MainMenuList li.li-level-1 > a {
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
html.PcView .hvr-default:hover, html.PcView .hvr-default:focus,
html.PcView .SiteHeaderBlock .BlockContents .MenuList.MainMenuList li.li-level-1 > a:hover,
.SiteHeaderBlock .BlockContents .MenuList.MainMenuList html.PcView li.li-level-1 > a:hover,
html.PcView .SiteHeaderBlock .BlockContents .MenuList.MainMenuList li.li-level-1 > a:focus,
.SiteHeaderBlock .BlockContents .MenuList.MainMenuList html.PcView li.li-level-1 > a:focus {
color: #009420;
text-decoration: none;
}
/* ホワイト */
.hvr-white {
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
html.PcView .hvr-white:hover, html.PcView .hvr-white:focus {
color: #009420;
background: #fff;
border-color: #009420;
text-decoration: none;
}
/* ダーク色 */
.hvr-dark {
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
html.PcView .hvr-dark:hover, html.PcView .hvr-dark:focus {
color: #fff;
background: #333;
border-color: #333;
text-decoration: none;
}
/* テキストにアンダーライン */
.hvr-txt-underline {
background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
background-image: linear-gradient(180deg, currentColor, currentColor);
background-repeat: no-repeat;
position: relative;
background-position: 0 100%;
background-size: 0 1px;
-webkit-transition: 0.2s background-size;
transition: 0.2s background-size;
}
html.PcView .hvr-txt-underline:hover {
background-size: 100% 1px;
}
/* テキストにアンダーライン（labelに適用） */
.hvr-label-underline .Label {
background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
background-image: linear-gradient(180deg, currentColor, currentColor);
background-repeat: no-repeat;
position: relative;
background-position: 0 100%;
background-size: 0 1px;
-webkit-transition: 0.2s background-size;
transition: 0.2s background-size;
}
html.PcView .hvr-label-underline:hover .Label {
background-size: 100% 1px;
}
/* push */
.hvr-push {
border: 1px solid #ccc;
-webkit-box-shadow: 0.25em 0.25em 0 rgba(0, 0, 0, 0.05);
box-shadow: 0.25em 0.25em 0 rgba(0, 0, 0, 0.05);
position: relative;
top: -0.25em;
left: -0.25em;
}
html.PcView .hvr-push:hover, html.PcView .hvr-push:focus {
-webkit-box-shadow: 0em 0em 0 rgba(0, 0, 0, 0.05);
box-shadow: 0em 0em 0 rgba(0, 0, 0, 0.05);
top: 0em;
left: 0em;
}
/* zoom */
html.PcView .hvr-zoom:hover, html.PcView .hvr-zoom:focus,
html.PcView .PerformerBlock .TagList > li a:hover,
.PerformerBlock .TagList > li html.PcView a:hover,
html.PcView .SknTplTextList ul.TextList > li > a:hover,
.SknTplTextList html.PcView ul.TextList > li > a:hover,
html.PcView .SknTplTextList ul.TextList > li > del > a:hover,
.SknTplTextList html.PcView ul.TextList > li > del > a:hover,
html.PcView .FormButton:hover,
html.PcView .DefaultButton:hover,
html.PcView .ContactButton:hover,
html.PcView .PerformerBlock .TagList > li a:focus,
.PerformerBlock .TagList > li html.PcView a:focus,
html.PcView .SknTplTextList ul.TextList > li > a:focus,
.SknTplTextList html.PcView ul.TextList > li > a:focus,
html.PcView .SknTplTextList ul.TextList > li > del > a:focus,
.SknTplTextList html.PcView ul.TextList > li > del > a:focus,
html.PcView .FormButton:focus,
html.PcView .DefaultButton:focus,
html.PcView .ContactButton:focus {
position: relative;
z-index: 15;
-webkit-transform: scale(1.0625);
transform: scale(1.0625);
}
/* zoom を 子要素.Image内のimgに適用する */
.hvr-childimg-zoom .Image,
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .ImageItem > a .Image,
.PerformerBlock .PerformerList > li a .Image,
.ImageLinkList li a .Image,
.ContentsLinkParagraph a .Image {
overflow: hidden;
display: inline-block;
}
.hvr-childimg-zoom .Image img,
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .ImageItem > a .Image img,
.PerformerBlock .PerformerList > li a .Image img,
.ImageLinkList li a .Image img,
.ContentsLinkParagraph a .Image img {
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
html.PcView .hvr-childimg-zoom:hover .Image img, html.PcView .hvr-childimg-zoom:focus .Image img,
html.PcView .BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .ImageItem > a:hover .Image img,
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner html.PcView .ImageItem > a:hover .Image img,
html.PcView .PerformerBlock .PerformerList > li a:hover .Image img,
.PerformerBlock .PerformerList > li html.PcView a:hover .Image img,
html.PcView .ImageLinkList li a:hover .Image img,
.ImageLinkList li html.PcView a:hover .Image img,
html.PcView .ContentsLinkParagraph a:hover .Image img,
.ContentsLinkParagraph html.PcView a:hover .Image img,
html.PcView .BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .ImageItem > a:focus .Image img,
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner html.PcView .ImageItem > a:focus .Image img,
html.PcView .PerformerBlock .PerformerList > li a:focus .Image img,
.PerformerBlock .PerformerList > li html.PcView a:focus .Image img,
html.PcView .ImageLinkList li a:focus .Image img,
.ImageLinkList li html.PcView a:focus .Image img,
html.PcView .ContentsLinkParagraph a:focus .Image img,
.ContentsLinkParagraph html.PcView a:focus .Image img {
-webkit-transform: scale(1.125);
transform: scale(1.125);
opacity: 1;
}
/* zoom を 子要素の.Iconに適用する */
.hvr-childicon-zoom .Icon::after,
.PerformerBlock .PerformerList > li a .Icon::after,
.BlogBlock.Detail .BlockFooter .ButtonList .prev-link .Icon::after,
.BlogBlock.Detail .BlockFooter .ButtonList .next-link .Icon::after,
.MenuList.multi-level li.li-level-1 > a .Icon::after,
.IllustIconList li a .Icon::after,
.SnsList li a .Icon::after,
.ImageLinkList li a .Icon::after,
.GoPageTop p a .Icon::after,
.MoreLink a .Icon::after,
.ContentsLinkParagraph a .Icon::after {
-webkit-transition: -webkit-transform 0.2s;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
-webkit-transform: scale(1);
transform: scale(1);
}
html.PcView .hvr-childicon-zoom:hover .Icon::after, html.PcView .hvr-childicon-zoom:focus .Icon::after,
html.PcView .PerformerBlock .PerformerList > li a:hover .Icon::after,
.PerformerBlock .PerformerList > li html.PcView a:hover .Icon::after,
html.PcView .BlogBlock.Detail .BlockFooter .ButtonList .prev-link:hover .Icon::after,
.BlogBlock.Detail .BlockFooter .ButtonList html.PcView .prev-link:hover .Icon::after,
html.PcView .BlogBlock.Detail .BlockFooter .ButtonList .next-link:hover .Icon::after,
.BlogBlock.Detail .BlockFooter .ButtonList html.PcView .next-link:hover .Icon::after,
html.PcView .MenuList.multi-level li.li-level-1 > a:hover .Icon::after,
.MenuList.multi-level html.PcView li.li-level-1 > a:hover .Icon::after,
html.PcView .IllustIconList li a:hover .Icon::after,
.IllustIconList li html.PcView a:hover .Icon::after,
html.PcView .SnsList li a:hover .Icon::after,
.SnsList li html.PcView a:hover .Icon::after,
html.PcView .ImageLinkList li a:hover .Icon::after,
.ImageLinkList li html.PcView a:hover .Icon::after,
html.PcView .GoPageTop p a:hover .Icon::after,
.GoPageTop p html.PcView a:hover .Icon::after,
html.PcView .MoreLink a:hover .Icon::after,
.MoreLink html.PcView a:hover .Icon::after,
html.PcView .ContentsLinkParagraph a:hover .Icon::after,
.ContentsLinkParagraph html.PcView a:hover .Icon::after,
html.PcView .PerformerBlock .PerformerList > li a:focus .Icon::after,
.PerformerBlock .PerformerList > li html.PcView a:focus .Icon::after,
html.PcView .BlogBlock.Detail .BlockFooter .ButtonList .prev-link:focus .Icon::after,
.BlogBlock.Detail .BlockFooter .ButtonList html.PcView .prev-link:focus .Icon::after,
html.PcView .BlogBlock.Detail .BlockFooter .ButtonList .next-link:focus .Icon::after,
.BlogBlock.Detail .BlockFooter .ButtonList html.PcView .next-link:focus .Icon::after,
html.PcView .MenuList.multi-level li.li-level-1 > a:focus .Icon::after,
.MenuList.multi-level html.PcView li.li-level-1 > a:focus .Icon::after,
html.PcView .IllustIconList li a:focus .Icon::after,
.IllustIconList li html.PcView a:focus .Icon::after,
html.PcView .SnsList li a:focus .Icon::after,
.SnsList li html.PcView a:focus .Icon::after,
html.PcView .ImageLinkList li a:focus .Icon::after,
.ImageLinkList li html.PcView a:focus .Icon::after,
html.PcView .GoPageTop p a:focus .Icon::after,
.GoPageTop p html.PcView a:focus .Icon::after,
html.PcView .MoreLink a:focus .Icon::after,
.MoreLink html.PcView a:focus .Icon::after,
html.PcView .ContentsLinkParagraph a:focus .Icon::after,
.ContentsLinkParagraph html.PcView a:focus .Icon::after {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
/* エフェクト付きでアンダーライン */
.hvr-underline-effect,
.SearchResultList li .result-head a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
}
.hvr-underline-effect::after,
.SearchResultList li .result-head a::after {
content: "";
display: block;
background: #009420;
height: 2px;
position: absolute;
bottom: calc(0% - 0.25em);
width: 0%;
left: 0%;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
html.PcView .hvr-underline-effect:hover, html.PcView .hvr-underline-effect:focus,
html.PcView .SearchResultList li .result-head a:hover,
.SearchResultList li .result-head html.PcView a:hover,
html.PcView .SearchResultList li .result-head a:focus,
.SearchResultList li .result-head html.PcView a:focus {
color: inherit;
text-decoration: none;
}
html.PcView .hvr-underline-effect:hover::after, html.PcView .hvr-underline-effect:focus::after,
html.PcView .SearchResultList li .result-head a:hover::after,
.SearchResultList li .result-head html.PcView a:hover::after,
html.PcView .SearchResultList li .result-head a:focus::after,
.SearchResultList li .result-head html.PcView a:focus::after {
width: 100%;
left: 0%;
}
/* 白色＋ぼかし */
.hvr-white-blur {
background: rgba(255, 255, 255, 0);
-webkit-backdrop-filter: blur(0px);
backdrop-filter: blur(0px);
-webkit-transition: 0.2s background, 0.2s -webkit-backdrop-filter;
transition: 0.2s background, 0.2s -webkit-backdrop-filter;
transition: 0.2s background, 0.2s backdrop-filter;
transition: 0.2s background, 0.2s backdrop-filter, 0.2s -webkit-backdrop-filter;
}
html.PcView .hvr-white-blur:hover {
background: rgba(255, 255, 255, 0.5);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● delighter.css */
/* 付加装飾 */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* delighter 用
--------------------------------------------------- */
@media screen {
/* 基本のスタイル */
.delighter {
opacity: 0;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
/* 初期値 */
/* スタート時のスタイル */
/* エンド時のスタイル */
}
.delighter .delighter {
opacity: 1;
}
.delighter.top {
-webkit-transform: translatey(-15%);
transform: translatey(-15%);
}
.delighter.right {
-webkit-transform: translate(-10%);
transform: translate(-10%);
}
.delighter.left {
-webkit-transform: translate(10%);
transform: translate(10%);
}
.delighter.bottom {
-webkit-transform: translatey(15%);
transform: translatey(15%);
}
.delighter.clip-path {
-webkit-clip-path: inset(0% 100% 0% 0%);
clip-path: inset(0% 100% 0% 0%);
}
.delighter.clip-path img {
-webkit-filter: brightness(10);
filter: brightness(10);
-webkit-transition: -webkit-filter 0.5s ease-out;
transition: -webkit-filter 0.5s ease-out;
transition: filter 0.5s ease-out;
transition: filter 0.5s ease-out, -webkit-filter 0.5s ease-out;
}
.delighter.started {
opacity: 1;
-webkit-transform: none;
transform: none;
}
.delighter.started.clip-path {
-webkit-clip-path: inset(0% 0% 0% 0%);
clip-path: inset(0% 0% 0% 0%);
}
.delighter.started.clip-path img {
-webkit-filter: brightness(1);
filter: brightness(1);
}
.delighter.ended.clip-path {
-webkit-clip-path: none;
clip-path: none;
}
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 同階層のSCSSをimport */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● template.css */
/* */
/* ・テンプレート */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* SknTpl common ：共通の定義
--------------------------------------------------- */
.SknTpl {
margin: 1em auto;
clear: both;
}
.SknTpl:first-child {
margin-top: 0;
}
.SknTpl:last-child {
margin-bottom: 0;
}
/* ImageParagraph Template ：画像（大）、画像（左右）とテキスト
--------------------------------------------------- */
.SknTplImageParagraph {
/* TextItem */
/* 画像おおきめ */
/* 画像小さめ */
/* 画像floatなし */
/* ImageItem */
/* 画像おおきめ */
/* 画像小さめ */
/* 画像floatなし */
/* - - FullImage - - */
/* - - LeftImage - - */
/* - - RightImage - - */
/* + + + + + レスポンシブ + + + + + */
/* + + + + + /レスポンシブ + + + + + */
}
.SknTplImageParagraph:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.SknTplImageParagraph > .TextItem {
width: 50%;
}
.SknTplImageParagraph.LargeImage > .TextItem {
width: 30%;
}
.SknTplImageParagraph.SmallImage > .TextItem {
width: 60%;
}
.SknTplImageParagraph.FloatNone > .TextItem {
float: none;
width: auto;
}
.SknTplImageParagraph > .ImageItem {
width: 40%;
position: relative;
}
.SknTplImageParagraph.LargeImage > .ImageItem {
width: 60%;
}
.SknTplImageParagraph.SmallImage > .ImageItem {
width: 30%;
}
@media screen and (max-width: 767px) {
.SknTplImageParagraph.SmallImage > .ImageItem {
max-width: 75vw;
}
}
.SknTplImageParagraph.FloatNone > .ImageItem {
margin: 1em 0;
}
.SknTplImageParagraph > .ImageItem .Image {
margin: 0;
margin-bottom: 0 !important;
display: block;
text-align: center;
}
.SknTplImageParagraph > .ImageItem .Image img {
height: auto !important;
}
@media screen and (min-width: 768px), print {
.SknTplImageParagraph > .ImageItem .Image img {
width: 100%;
border-radius: 3rem;
}
}
.SknTplImageParagraph > .ImageItem .Image a {
background: none !important;
}
.SknTplImageParagraph > .ImageItem .Image a .ExtIcon {
display: none;
}
.SknTplImageParagraph > .ImageItem .Image a img {
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
opacity: 1;
}
.SknTplImageParagraph > .ImageItem .Image a:hover img {
opacity: 0.8;
}
.SknTplImageParagraph > .ImageItem .Caption {
padding: 1em 0 0;
}
.SknTplImageParagraph > .ImageItem ul.Caption {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
.SknTplImageParagraph > .ImageItem ul.Caption {
font-size: 1.2rem;
}
}
.SknTplImageParagraph > .ImageItem ul.Caption li {
white-space: nowrap;
text-align: center;
margin: 0 1em;
}
.SknTplImageParagraph > .ImageItem ul.Caption li:first-child {
width: 100%;
}
.SknTplImageParagraph.FullImage > .ImageItem {
width: auto;
}
.SknTplImageParagraph.FullImage > .TextItem {
width: auto;
margin-top: 0.75em;
}
.SknTplImageParagraph.LeftImage > .ImageItem {
float: left;
margin-right: 10px;
}
.SknTplImageParagraph.LeftImage > .TextItem {
float: right;
}
.SknTplImageParagraph.RightImage > .ImageItem {
float: right;
margin-left: 10px;
}
.SknTplImageParagraph.RightImage > .TextItem {
float: left;
}
@media screen and (max-width: 767px) {
.SknTplImageParagraph.RightImage > .ImageItem, .SknTplImageParagraph.LeftImage > .ImageItem {
float: none;
width: auto;
margin: 0 auto 1em;
padding: 0;
text-align: center;
}
.SknTplImageParagraph.RightImage > .ImageItem .Image, .SknTplImageParagraph.LeftImage > .ImageItem .Image {
margin: 0 auto;
}
.SknTplImageParagraph.RightImage > .TextItem, .SknTplImageParagraph.LeftImage > .TextItem {
float: none;
width: auto;
}
}
/* DecoratedBox Template ：装飾付きボックス
--------------------------------------------------- */
.SknTplDecoratedBox.Type1 > .DecoratedBox {
margin: 0 auto;
position: relative;
}
.SknTplDecoratedBox.Type1 > .DecoratedBox > .inner {
padding: 5rem;
border-radius: 1.5rem;
background: #f8f8f2;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.SknTplDecoratedBox.Type1 > .DecoratedBox > .inner {
padding: 2.5rem;
}
}
.DefaultBlock.Type3 .SknTplDecoratedBox.Type1 > .DecoratedBox > .inner {
background: #eeeee2;
}
.SknTplDecoratedBox.Type1 > .DecoratedBox > .inner > *:first-child {
margin-top: 0;
}
.SknTplDecoratedBox.Type1 > .DecoratedBox > .inner > *:last-child {
margin-bottom: 0;
}
/* DecoratedBox Template ：装飾付きボックス
--------------------------------------------------- */
.SknTplDecoratedBox.Type2 > .DecoratedBox {
margin: 0 auto;
position: relative;
}
.DefaultBlock.Type3 .SknTplDecoratedBox.Type2 > .DecoratedBox {
background-color: #efefe1;
padding: 1rem;
border-radius: 2.5rem;
}
.SknTplDecoratedBox.Type2 > .DecoratedBox > .inner {
padding: 40px;
background: #fff;
border-radius: 1.5rem;
position: relative;
}
@media screen and (max-width: 767px) {
.SknTplDecoratedBox.Type2 > .DecoratedBox > .inner {
padding: 20px;
}
}
.SknTplDecoratedBox.Type2 > .DecoratedBox > .inner > *:first-child {
margin-top: 0;
}
.SknTplDecoratedBox.Type2 > .DecoratedBox > .inner > *:last-child {
margin-bottom: 0;
}
/* DecoratedBox Template ：装飾付きボックス
--------------------------------------------------- */
/* SknTplThumbnailList ：画像付きリスト
--------------------------------------------------- */
.SknTplThumbnailList ul {
list-style: none;
}
/* TextButton Template ：テキストボタン
--------------------------------------------------- */
.SknTplTextButton {
position: relative;
/* - - ul - - */
}
.SknTplTextButton ul {
list-style: none;
}
/* DecoratedTable Template ：表組み（テーブル）
--------------------------------------------------- */
.SknTplDecoratedTable {
/* - - テーブル内部のリスト - - */
}
.SknTplDecoratedTable table {
width: 100%;
border-collapse: collapse;
margin: 0 auto;
}
@media screen and (min-width: 768px), print {
.SknTplDecoratedTable table.AutoWidth {
width: auto;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
margin-left: 0;
}
}
.SknTplDecoratedTable ul,
.SknTplDecoratedTable ol {
margin: 0 0 0 2em;
}
.SknTplDecoratedTable li ul,
.SknTplDecoratedTable li ol {
margin: 0.25em 0 0.5em 1em;
}
/* TextList Template ：テキストリスト
--------------------------------------------------- */
.SknTplTextList {
/* - - ul - - */
}
.SknTplTextList ul.TextList {
list-style: none;
}
.SknTplTextList ul.TextList > li {
padding: 0;
margin: 1rem 0;
position: relative;
}
.SknTplTextList ul.TextList > li:hover, .SknTplTextList ul.TextList > li:focus {
z-index: 5;
}
.SknTplTextList ul.TextList > li .Label {
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
}
.SknTplTextList ul.TextList > li .Label .Sub {
font-size: smaller;
}
@media screen and (max-width: 767px) {
.SknTplTextList ul.TextList > li .Label .Sub {
display: block;
}
}
.SknTplTextList ul.TextList > li .Icon {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.SknTplTextList ul.TextList > li .Icon.ExtIcon {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.SknTplTextList ul.TextList > li .Icon.file-icons {
-webkit-transform: scale(2);
transform: scale(2);
}
.SknTplTextList ul.TextList > li .Icon.icon-download {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.SknTplTextList ul.TextList > li > a, .SknTplTextList ul.TextList > li > del > a {
margin: 0;
color: #252525;
background-color: #f8f8f2;
/* 特定の要素内の場合は白背景にする */
border-radius: 5em;
padding: 1.5rem;
padding-left: 4rem;
padding-right: 4rem;
gap: 1rem;
text-decoration: none;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
/* リンク無効の時 */
}
.DefaultBlock.Type3 .SknTplTextList ul.TextList > li > a, .DecoratedBg.Type2 .SknTplTextList ul.TextList > li > a, .SknTplTextList ul.TextList > li > a.White, .DefaultBlock.Type3 .SknTplTextList ul.TextList > li > del > a, .DecoratedBg.Type2 .SknTplTextList ul.TextList > li > del > a, .SknTplTextList ul.TextList > li > del > a.White {
background: white;
}
.SknTplTextList ul.TextList > li > a.file-link .Icon.ExtIcon, .SknTplTextList ul.TextList > li > del > a.file-link .Icon.ExtIcon {
display: none;
}
.SknTplTextList ul.TextList > li > a.file-link .Icon.file-icons::after, .SknTplTextList ul.TextList > li > del > a.file-link .Icon.file-icons::after {
background: none;
}
.SknTplTextList ul.TextList > li > a:not(.file-link) .Icon, .SknTplTextList ul.TextList > li > del > a:not(.file-link) .Icon {
display: none;
}
.SknTplTextList ul.TextList > li > a:not(.file-link) .Icon.ExtIcon, .SknTplTextList ul.TextList > li > del > a:not(.file-link) .Icon.ExtIcon {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.SknTplTextList ul.TextList > li > a.Invalid, .SknTplTextList ul.TextList > li > del > a.Invalid {
cursor: default;
color: inherit;
}
.SknTplTextList ul.TextList > li > a.Invalid .Icon, .SknTplTextList ul.TextList > li > del > a.Invalid .Icon {
display: none;
}
.DefaultBlock.Type3 .SknTplTextList ul.TextList > li > a, .DefaultBlock.Type3 .SknTplTextList ul.TextList > li > del > a {
background-color: #fff;
}
/* SknTplFaq ：Ｑ＆Ａ
--------------------------------------------------- */
/* GetAdobeReader
--------------------------------------------------- */
.SknTplGetAdobeReader {
background: #f8f8f2;
padding: 20px 30px;
max-width: 500px;
}
.SknTplGetAdobeReader > .inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 2rem;
/* + + + + + レスポンシブ + + + + + */
}
.SknTplGetAdobeReader > .inner .Banner {
margin: 0 !important;
width: 125px;
}
.SknTplGetAdobeReader > .inner .Banner a[target=_blank] {
padding: 0 !important;
}
.SknTplGetAdobeReader > .inner .Banner a[target=_blank] .Icon {
display: none;
}
.SknTplGetAdobeReader > .inner .Text {
width: 70%;
font-size: 1.2rem;
line-height: 1.5;
text-align: justify;
color: rgba(37, 37, 37, 0.75);
}
@media screen and (max-width: 767px) {
.SknTplGetAdobeReader > .inner .SknTplGetAdobeReader {
padding: 10px;
}
.SknTplGetAdobeReader > .inner .Banner {
width: 75px;
}
}
/* SknTplColumnGroup
--------------------------------------------------- */
.SknTplColumnGroup {
/* ベースはcommon_element.cssで定義 */
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* swiper.css の上書き用 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
.swiper-container {
opacity: 0;
padding-bottom: 10rem;
}
.swiper-controller {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.swiper-controller .swiper-pagination.swiper-pagination-fraction {
position: static;
width: auto;
font-size: 1.8rem;
color: #009420;
margin-left: 1rem;
}
.swiper-controller .swiper-pagination.swiper-pagination-bullets {
position: static;
}
.swiper-controller .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet {
margin-right: 2rem;
-webkit-transition: 0.2s background;
transition: 0.2s background;
}
.swiper-controller .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:last-child {
margin-right: 0;
}
.swiper-controller .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active {
background-color: #009420 !important;
}
.swiper-controller .PrevSlideButton,
.swiper-controller .NextSlideButton {
font-size: 3rem;
margin: 0 !important;
margin-right: 0.5em !important;
cursor: pointer;
}
@media screen and (max-width: 767px) {
.swiper-controller .PrevSlideButton,
.swiper-controller .NextSlideButton {
font-size: 2rem;
}
}
.swiper-controller .PrevSlideButton .Icon,
.swiper-controller .NextSlideButton .Icon {
color: #fff;
width: 2em;
height: 2em;
}
.swiper-controller .PrevSlideButton .Icon::after,
.swiper-controller .NextSlideButton .Icon::after {
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: 0.2s background-color, 0.2s -webkit-transform;
transition: 0.2s background-color, 0.2s -webkit-transform;
transition: 0.2s transform, 0.2s background-color;
transition: 0.2s transform, 0.2s background-color, 0.2s -webkit-transform;
background-color: #009420;
background-image: url(../img/common/decoration/noize_strong.svg);
}
.swiper-controller .PrevSlideButton.swiper-button-disabled .Icon,
.swiper-controller .NextSlideButton.swiper-button-disabled .Icon {
cursor: default;
pointer-events: none;
}
.swiper-controller .PrevSlideButton.swiper-button-disabled .Icon::after,
.swiper-controller .NextSlideButton.swiper-button-disabled .Icon::after {
background-color: #bfbfbf;
}
html.PcView .swiper-controller .PrevSlideButton:not(.swiper-button-disabled):hover .Icon::after, html.PcView .swiper-controller .PrevSlideButton:not(.swiper-button-disabled):focus .Icon::after,
html.PcView .swiper-controller .NextSlideButton:not(.swiper-button-disabled):hover .Icon::after,
html.PcView .swiper-controller .NextSlideButton:not(.swiper-button-disabled):focus .Icon::after {
-webkit-transform: scale(1);
transform: scale(1);
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* datepickerの上書き用 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* datepicker を上書き
--------------------------------------------------- */
#ui-datepicker-div {
z-index: 120 !important;
}
.ui-datepicker {
display: none;
border-radius: 0 !important;
}
.ui-datepicker .ui-datepicker-header {
position: relative;
padding: 0.2em 0;
border: 0;
background: 0 0;
}
.ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev {
position: absolute;
top: 2px;
width: 1.8em;
height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev {
left: 2px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
display: block;
cursor: pointer !important;
z-index: 99;
top: 15px !important;
right: auto !important;
left: 10px !important;
position: absolute;
border-radius: 5px;
background: #0c5a7e;
width: 50px;
height: 25px;
}
.ui-datepicker .ui-datepicker-prev:before {
content: "前月";
color: #fff;
position: absolute;
top: -1px;
left: 0px;
text-align: center;
font-size: 12px;
cursor: pointer;
z-index: 99;
vertical-align: middle;
width: 100%;
line-height: 25px;
}
.ui-datepicker .ui-datepicker-prev.ui-datepicker-next-hover, .ui-datepicker .ui-datepicker-prev.ui-datepicker-prev-hover {
border: none;
background: #333;
opacity: 0.7;
}
.ui-datepicker .ui-datepicker-prev.ui-datepicker-next-hover:before, .ui-datepicker .ui-datepicker-prev.ui-datepicker-prev-hover:before {
color: #fff;
font-weight: bold !important;
}
.ui-datepicker .ui-datepicker-prev .ui-icon {
width: 25px;
height: 25px;
opacity: 1 !important;
}
.ui-datepicker .ui-datepicker-prev span {
background: none !important;
}
.ui-datepicker .ui-datepicker-next {
right: 2px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
display: block;
cursor: pointer !important;
z-index: 99;
top: 15px !important;
left: auto !important;
right: 10px !important;
position: absolute;
border-radius: 5px;
background: #0c5a7e;
width: 50px;
height: 25px;
}
.ui-datepicker .ui-datepicker-next:before {
content: "次月";
color: #fff;
position: absolute;
top: -1px;
left: 0px;
text-align: center;
font-size: 12px;
cursor: pointer;
z-index: 99;
vertical-align: middle;
width: 100%;
line-height: 25px;
}
.ui-datepicker .ui-datepicker-next.ui-datepicker-next-hover, .ui-datepicker .ui-datepicker-next.ui-datepicker-prev-hover {
border: none;
background: #333;
}
.ui-datepicker .ui-datepicker-next.ui-datepicker-next-hover:before, .ui-datepicker .ui-datepicker-next.ui-datepicker-prev-hover:before {
color: #fff;
font-weight: bold !important;
}
.ui-datepicker .ui-datepicker-next .ui-icon {
width: 25px;
height: 25px;
opacity: 1 !important;
}
.ui-datepicker .ui-datepicker-next span {
background: none !important;
}
.ui-datepicker .ui-datepicker-prev span {
display: block;
position: absolute;
left: 50%;
margin-left: -8px;
top: 50%;
margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
margin: 0;
line-height: 30px;
font-size: 18px;
text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
font-size: 1em;
margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month-year {
width: 100%;
}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
width: 49%;
}
.ui-datepicker table {
width: 100%;
font-size: 0.9em;
border-collapse: collapse;
margin: 0 0 0.4em;
text-transform: uppercase;
}
.ui-datepicker table thead {
border-bottom: solid 1px #cccccc;
}
.ui-datepicker table tbody:before {
content: "";
display: block;
height: 10px;
}
.ui-datepicker th {
padding: 0.7em 0.3em 1.2em;
text-align: center;
font-weight: 300;
border: 0;
}
.ui-datepicker td {
border: 0;
padding: 2px;
}
.ui-datepicker td a, .ui-datepicker td span {
display: block;
padding: 5px 7px;
text-align: center;
text-decoration: none !important;
}
.ui-datepicker .ui-datepicker-buttonpane {
background-image: none;
margin: 0.7em 0 0;
padding: 0 0.2em;
border-left: 0;
border-right: 0;
border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
float: right;
margin: 0.5em 0.2em 0.4em;
cursor: pointer;
padding: 0.2em 0.6em 0.3em;
width: auto;
overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
float: left;
}
.ui-datepicker-multi .ui-datepicker-group, .ui-datepicker-rtl .ui-datepicker-buttonpane button {
float: left;
}
.ui-datepicker.ui-datepicker-multi {
width: auto;
}
.ui-datepicker-multi .ui-datepicker-group table {
width: 95%;
margin: 0 auto 0.4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
clear: left;
}
.ui-datepicker-row-break {
clear: both;
width: 100%;
font-size: 0;
}
.ui-datepicker-rtl {
direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
right: 2px;
left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
left: 2px;
right: auto;
}
.ui-datepicker-rtl .ui-datepicker-next span {
display: block;
position: absolute;
left: 50%;
margin-left: -8px;
top: 50%;
margin-top: -8px;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current {
float: right;
}
.ui-datepicker-rtl .ui-datepicker-group {
float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
border-right-width: 0;
border-left-width: 1px;
}
.ui-dialog {
position: absolute;
top: 0;
left: 0;
padding: 0.2em;
outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
padding: 0.4em 1em;
position: relative;
}
.ui-dialog .ui-dialog-title {
float: left;
margin: 0.1em 0;
white-space: nowrap;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: 0.3em;
top: 50%;
width: 21px;
margin: -10px 0 0;
padding: 1px;
height: 20px;
}
.ui-dialog .ui-dialog-content {
position: relative;
border: 0;
padding: 0.5em 1em;
background: 0 0;
overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
text-align: left;
border-width: 1px 0 0;
background-image: none;
margin-top: 0.5em;
padding: 0.3em 1em 0.5em 0.4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
margin: 0.5em 0.4em 0.5em 0;
cursor: pointer;
}
.ui-dialog .ui-resizable-se {
width: 12px;
height: 12px;
right: -5px;
bottom: -5px;
background-position: 16px 16px;
}
.ui-slider-vertical .ui-slider-range-min, .ui-spinner-down {
bottom: 0;
}
.ui-draggable .ui-dialog-titlebar {
cursor: move;
}
.ui-menu {
padding: 2px;
margin: 0;
display: block;
}
.ui-menu .ui-menu {
margin-top: -3px;
position: absolute;
}
.ui-menu .ui-menu-item {
margin: 0;
padding: 0;
width: 100%;
list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
.ui-menu .ui-menu-divider {
margin: 5px -2px;
height: 0;
font-size: 0;
line-height: 0;
border-width: 1px 0 0;
}
.ui-menu .ui-menu-item a {
text-decoration: none;
display: block;
padding: 2px 0.4em;
line-height: 1.5;
min-height: 0;
font-weight: 400;
}
.ui-menu .ui-state-disabled {
font-weight: 400;
margin: 0.4em 0 0.2em;
line-height: 1.5;
}
.ui-menu .ui-state-disabled a {
cursor: default;
}
.ui-menu-icons {
position: relative;
}
.ui-menu-icons .ui-menu-item a {
position: relative;
padding-left: 2em;
}
.ui-menu .ui-icon {
position: absolute;
top: 0.2em;
left: 0.2em;
}
.ui-menu .ui-menu-icon {
position: static;
float: right;
}
.ui-progressbar {
height: 2em;
text-align: left;
overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
margin: -1px;
height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
height: 100%;
filter: alpha(opacity=25);
opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
background-image: none;
}
.ui-slider {
position: relative;
text-align: left;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: 0.7em;
display: block;
border: 0;
background-position: 0 0;
}
.ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range {
-webkit-filter: inherit;
filter: inherit;
}
.ui-slider-horizontal {
height: 0.8em;
}
.ui-slider-horizontal .ui-slider-handle {
top: -0.3em;
margin-left: -0.6em;
}
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
right: 0;
}
.ui-slider-vertical {
width: 0.8em;
height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
left: -0.3em;
margin-left: 0;
margin-bottom: -0.6em;
}
.ui-slider-vertical .ui-slider-range {
left: 0;
width: 100%;
}
.ui-slider-vertical .ui-slider-range-max {
top: 0;
}
.ui-spinner {
position: relative;
display: inline-block;
overflow: hidden;
padding: 0;
}
.ui-spinner-input {
border: none;
background: 0 0;
color: inherit;
padding: 0;
margin: 0.2em 22px 0.2em 0.4em;
}
.ui-widget-content a {
color: #3e3e3e;
}
.ui-widget-header {
color: #3e3e3e;
}
.ui-widget-header a {
color: #3e3e3e;
}
.ui-spinner-button {
width: 16px;
height: 50%;
font-size: 0.5em;
padding: 0;
margin: 0;
text-align: center;
position: absolute;
cursor: default;
display: block;
overflow: hidden;
right: 0;
}
.ui-spinner a.ui-spinner-button {
border-top: none;
border-bottom: none;
border-right: none;
}
.ui-spinner .ui-icon {
position: absolute;
margin-top: -8px;
top: 50%;
left: 0;
}
.ui-spinner-up {
top: 0;
}
.ui-spinner .ui-icon-triangle-1-s {
background-position: -65px -16px;
}
.ui-tabs {
position: relative;
padding: 0.2em;
}
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: 0.2em 0.2em 0;
}
.ui-tabs .ui-tabs-nav li {
list-style: none;
float: left;
position: relative;
top: 0;
margin: 1px 0.2em 0 0;
border-bottom-width: 0;
padding: 0;
white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {
float: left;
padding: 0.5em 1em;
text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: -1px;
padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
cursor: text;
}
.ui-tabs .ui-tabs-nav li a {
cursor: pointer;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
background: 0 0;
}
.ui-tooltip {
padding: 8px;
position: absolute;
z-index: 9999;
max-width: 300px;
-webkit-box-shadow: 0 0 5px #dddddd;
box-shadow: 0 0 5px #dddddd;
}
body .ui-tooltip {
border-width: 2px;
}
.ui-widget .ui-widget {
font-size: 1em;
}
.ui-widget button, .ui-widget input, .ui-widget select, .ui-widget textarea {
font-family: Verdana, Arial, sans-serif;
font-size: 1em;
}
.ui-widget-content {
border: 1px solid #dddddd;
background: #fff;
color: #3e3e3e;
-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
}
.ui-widget-header {
border: 1px solid #dddddd;
background: #ccc;
font-weight: 700;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: #fff;
border: none;
border-radius: 0.25em;
font-weight: 400;
color: #3e3e3e;
}
.ui-state-default a {
color: #3e3e3e;
text-decoration: none;
}
.ui-state-default a:link, .ui-state-default a:visited {
color: #3e3e3e;
text-decoration: none;
}
.ui-state-focus, .ui-state-hover {
background: #f7c3d8;
font-weight: 400;
color: #fff;
}
.ui-widget-content .ui-state-focus, .ui-widget-content .ui-state-hover {
background: #333;
font-weight: 400;
color: #fff;
}
.ui-widget-header .ui-state-focus, .ui-widget-header .ui-state-hover {
background: #f7c3d8;
font-weight: 400;
color: #fff;
}
.ui-state-hover a {
color: #cccccc;
text-decoration: none;
}
.ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited {
color: #cccccc;
text-decoration: none;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
border: 0;
background: #e80;
font-weight: 400;
color: #fff;
}
.ui-state-active a {
color: #cccccc;
text-decoration: none;
}
.ui-state-active a:link, .ui-state-active a:visited {
color: #cccccc;
text-decoration: none;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
background: #0c5a7e;
color: #fff;
border: 0;
}
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a {
color: #363636;
}
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
border: 1px solid #cd0a0a;
background: #fef1ec;
color: #cd0a0a;
}
.ui-state-error a, .ui-state-error-text {
color: #cd0a0a;
}
.ui-widget-content .ui-state-error a, .ui-widget-content .ui-state-error-text {
color: #cd0a0a;
}
.ui-widget-header .ui-state-error a, .ui-widget-header .ui-state-error-text {
color: #cd0a0a;
}
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary {
font-weight: 700;
}
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
opacity: 0.6;
filter: Alpha(Opacity=70);
font-weight: 400;
}
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
opacity: 0.35;
filter: Alpha(Opacity=35);
background-image: none;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* bxslider の上書き用 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
.bx-wrapper {
margin: 0 auto;
border: none;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
/* Pagerのスタイル */
/* DIRECTION CONTROLS (NEXT / PREV)のスタイル */
}
.bx-wrapper .bx-viewport {
border: none;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
left: auto;
}
.bx-wrapper .bx-prev {
left: 1em;
background: none;
}
.bx-wrapper .bx-next {
right: 1em;
background: none;
}
.bx-wrapper .bx-next .Icon::before,
.bx-wrapper .bx-prev .Icon::before {
width: 2em;
height: 2em;
font-size: 2.5rem;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
@media screen and (max-width: 1199px), print {
.bx-wrapper .bx-next .Icon::before,
.bx-wrapper .bx-prev .Icon::before {
font-size: 2rem;
}
}
@media screen and (max-width: 767px) {
.bx-wrapper .bx-next .Icon::before,
.bx-wrapper .bx-prev .Icon::before {
font-size: 1.2rem;
}
}
.bx-wrapper .bx-next:hover .Icon::before, .bx-wrapper .bx-next:focus .Icon::before,
.bx-wrapper .bx-prev:hover .Icon::before,
.bx-wrapper .bx-prev:focus .Icon::before {
color: #009420;
border-color: #009420;
}
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -0.5em;
outline: 0;
width: auto;
height: auto;
line-height: 1;
text-indent: 0;
z-index: 100;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* colorbox の上書き用 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
.cboxIframe {
background: none;
}
#cboxOverlay {
background: #000;
opacity: 0.8;
}
#colorbox, #cboxOverlay, #cboxWrapper {
overflow: visible;
}
#cboxLoadedContent {
border: none;
-webkit-box-shadow: 0.5em 0.5em 1em rgba(0, 0, 0, 0.25);
box-shadow: 0.5em 0.5em 1em rgba(0, 0, 0, 0.25);
-webkit-box-shadow: none;
box-shadow: none;
background: none;
}
#cboxContent {
background: none;
}
#cboxTitle {
color: #000;
position: static;
padding: 0.5em 0;
}
#cboxPrevious {
left: -35px;
}
#cboxNext {
right: -35px;
}
#cboxClose {
top: -15px;
right: 5px;
width: 30px;
height: 30px;
}
#cboxCurrent {
display: none !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● area.css */
/* */
/* エリアの定義 */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* エリアの基本スタイル
--------------------------------------------------- */
.DefaultArea {
padding: 7.5rem 0;
position: relative;
}
@media screen and (max-width: 767px) {
.DefaultArea {
padding: 5rem 0;
}
}
.DefaultArea > [class*=Block] {
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 768px), print {
.DefaultArea > [class*=Block] {
width: 100%;
max-width: 1200px;
}
}
@media screen and (max-width: 1199px), print {
.DefaultArea > [class*=Block] {
width: calc(100% - 2rem);
}
}
@media screen and (max-width: 767px) {
.DefaultArea > [class*=Block] {
width: calc(100% - 4rem);
min-width: 320px;
}
}
.DefaultArea.DecoratedBg::before, .DefaultArea.DecoratedBg::after {
width: 100%;
height: 2.5rem;
-webkit-mask-image: url(../img/common/decoration/wave_top.svg);
mask-image: url(../img/common/decoration/wave_top.svg);
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: 50% 100%;
mask-position: 50% 100%;
}
.DefaultArea.DecoratedBg::before {
bottom: 100%;
bottom: calc(100% - 1px);
}
.DefaultArea.DecoratedBg::after {
top: 100%;
top: calc(100% - 1px);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
-webkit-mask-position: calc(50% + 20rem) 100%;
mask-position: calc(50% + 20rem) 100%;
}
.DefaultArea.DecoratedBg.Type1 {
color: white;
background: #009420;
}
.DefaultArea.DecoratedBg.Type1::before, .DefaultArea.DecoratedBg.Type1::after {
background: #009420;
}
.DefaultArea.DecoratedBg.Type2 {
color: #252525;
background: #f8f8f2;
}
.DefaultArea.DecoratedBg.Type2::before, .DefaultArea.DecoratedBg.Type2::after {
background: #f8f8f2;
}
.DefaultArea.DecoratedBg.Type2:last-of-type {
border-bottom: 2px solid #eeeee2;
}
.DefaultArea.DecoratedBg.Type2:last-of-type::after {
display: none;
}
.DefaultArea.DecoratedBg.Type3 {
color: #252525;
background: #fff;
}
.DefaultArea.DecoratedBg.Type3::before, .DefaultArea.DecoratedBg.Type3::after {
background: #fff;
}
.DefaultArea.DecoratedBg:first-of-type::before {
display: none;
}
.DefaultArea.DecoratedBg:last-of-type::after {
display: none;
}
.BreathOfArtDetailArea {
padding-top: 0;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● block.css */
/* */
/* ブロックの定義 */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* DefaultBlock (ページ・フォーム・ブログ全般の基本スタイル)
--------------------------------------------------- */
.DefaultBlock {
margin: 0 auto;
position: relative;
z-index: 1;
/* コンテンツ部分 */
/* フッタ部分 */
/* DefaultBlock (タイプ３以外)
--------------------------------------------------- */
/* DefaultBlock (タイプ３)
--------------------------------------------------- */
}
.DefaultBlock .BlockFooter {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 2.5rem;
}
.DefaultBlock .BlockFooter .ButtonGroup {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.DefaultBlock:not(.Type3) {
/* タイトル部分 */
}
@media screen and (min-width: 768px), print {
.DefaultBlock:not(.Type3) {
padding-left: 10rem;
padding-left: 15rem;
}
}
@media screen and (min-width: 768px), print {
.DefaultBlock:not(.Type3) .BlockHeader {
position: absolute;
top: 0;
left: 0;
}
}
.DefaultBlock:not(.Type3) .BlockHeader .Heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
font-weight: 600;
line-height: 1;
}
@media screen and (min-width: 768px), print {
.DefaultBlock:not(.Type3) .BlockHeader .Heading {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
-webkit-font-feature-settings: initial;
font-feature-settings: initial;
}
}
@media screen and (max-width: 767px) {
.DefaultBlock:not(.Type3) .BlockHeader .Heading {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
margin-bottom: 5rem;
}
}
.DefaultBlock:not(.Type3) .BlockHeader .Heading .Main {
font-size: 3rem;
}
@media screen and (min-width: 768px), print {
.DefaultBlock:not(.Type3) .BlockHeader .Heading .Main {
margin-right: 0.5em;
}
}
@media screen and (max-width: 767px) {
.DefaultBlock:not(.Type3) .BlockHeader .Heading .Main {
font-size: 2.5rem;
}
}
.DefaultBlock:not(.Type3) .BlockHeader .Heading .Sub {
font-size: 1.4rem;
color: #e6551e;
display: none !important;
}
@media screen and (max-width: 767px) {
.DefaultBlock:not(.Type3) .BlockHeader .Heading .Sub {
margin-bottom: 0.75em;
}
}
.DecoratedBg.Type1 .DefaultBlock:not(.Type3) .BlockHeader .Heading .Sub {
color: #fff;
}
.DefaultBlock.Type3 {
background: #f8f8f2;
padding: 9rem 17.5rem;
}
@media screen and (max-width: 767px) {
.DefaultBlock.Type3 {
padding: 5rem 3rem;
width: calc(100% - 2rem) !important;
margin-right: 0 !important;
}
}
@media screen and (max-width: 767px) {
.DefaultBlock.Type3 .BlockHeader .Heading {
margin-top: -2.5rem;
font-size: 1.8rem;
}
}
/* DefaultBlock (インデックス・アーカイブ用)
--------------------------------------------------- */
/* DefaultBlock (詳細表示画面用)
--------------------------------------------------- */
.DefaultBlock.Detail {
/* タイトル部分 */
/* コンテンツ部分 */
}
/* PageBlock (固定ページ表示用)
--------------------------------------------------- */
/* BannerBlock (バナー表示用)
--------------------------------------------------- */
/* SearchBlock (サイト内検索 結果表示用) 未使用
--------------------------------------------------- */
/* LocalMenuBlock (ローカルメニュー)
--------------------------------------------------- */
/* MainImageBlock (メインビジュアル ＋ スライダ)
--------------------------------------------------- */
.MainImageBlock .BlockContents.swiper-container {
padding-bottom: 5rem;
}
.MainImageBlock .SliderList {
list-style: none;
padding-right: 3.5rem;
}
@media screen and (max-width: 767px) {
.MainImageBlock .SliderList {
margin-top: 7rem;
}
}
.MainImageBlock .SliderList li .inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
@media screen and (min-width: 768px), print {
.MainImageBlock .SliderList li .inner {
width: calc(100% + 1.75rem - (100% - 1200px) / 2);
}
}
.MainImageBlock .SliderList li .inner a {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
display: block;
margin: 0;
margin-left: auto;
}
.MainImageBlock .SliderList li .inner a[href]:hover .Button {
-webkit-transform: scale(1.0625);
transform: scale(1.0625);
}
.MainImageBlock .SliderList li .inner a > .Icon.ExtIcon {
display: none;
}
.MainImageBlock .SliderList li .inner .TextItem {
position: relative;
}
.MainImageBlock .SliderList li .inner .TextItem .Button {
position: absolute;
right: 2.5rem;
bottom: 2.5rem;
z-index: 50;
}
@media screen and (max-width: 767px) {
.MainImageBlock .SliderList li .inner .TextItem .Button {
bottom: 1.5rem;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
.MainImageBlock .SliderList li .inner .ImageItem {
position: relative;
overflow: hidden;
}
@media screen and (min-width: 768px), print {
.MainImageBlock .SliderList li .inner .ImageItem .Image {
text-align: right;
}
}
.MainImageBlock .SliderList li .inner .ImageItem .Image img {
/* 画像の表示サイズ */
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (min-width: 768px), print {
.MainImageBlock .SliderList li .inner .ImageItem .Image img {
width: 1340px;
aspect-ratio: 16/9;
border-bottom-right-radius: 3.5rem;
border-bottom-left-radius: 3.5rem;
}
}
@media screen and (max-width: 767px) {
.MainImageBlock .SliderList li .inner .ImageItem .Image img {
aspect-ratio: 14/19;
width: calc(100% - 3.5rem);
border-bottom-right-radius: 3.5rem;
}
}
@media screen and (max-width: 767px) {
.MainImageBlock .SliderList li.swiper-slide-active .inner .ImageItem .Image:not(.Responsive) img {
-webkit-animation: img_slide 10s linear normal;
animation: img_slide 10s linear normal;
}
}
.MainImageBlock .SliderList li.swiper-slide-active .inner .ImageItem .Image.Responsive .hide-wide img {
-o-object-fit: contain;
object-fit: contain;
}
.MainImageBlock .swiper-controller {
position: absolute;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
max-width: 1600px;
}
@media screen and (min-width: 768px), print {
.MainImageBlock .swiper-controller {
width: calc(100% + 1.75rem - (100% - 1200px) / 2);
}
}
@media screen and (max-width: 767px) {
.MainImageBlock .swiper-controller {
width: 100%;
}
}
.MainImageBlock .swiper-controller .swiper-pagination {
position: absolute;
z-index: 80;
bottom: 0%;
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
margin-right: 1em;
}
@media screen and (max-width: 767px) {
.MainImageBlock .swiper-controller .swiper-pagination {
right: 3.5rem;
}
}
.MainImageBlock .swiper-controller .PrevSlideButton,
.MainImageBlock .swiper-controller .NextSlideButton {
position: absolute;
top: calc(50% - 1em);
margin: 0 !important;
}
.MainImageBlock .swiper-controller .PrevSlideButton {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
left: 0.5rem;
}
.MainImageBlock .swiper-controller .NextSlideButton {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
right: 0.5rem;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● blog.css */
/* */
/* ブログの定義 */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ブログプラグイン 汎用
--------------------------------------------------- */
/* - - 共通 - - */
@media screen and (min-width: 768px), print {
.BlogBlock .TabMenu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
@media screen and (max-width: 767px) {
.BlogBlock .TabMenu {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
padding-top: 2.5rem;
}
.BlogBlock .TabMenu .MoreLink {
-ms-flex-item-align: end;
align-self: flex-end;
position: absolute;
bottom: 100%;
}
}
.BlogBlock .BlockFooter {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.BlogBlock .BlockFooter .SknTplTextButton {
margin: initial;
}
/* - - 一覧表示用（トップ） - - */
/* - - 一覧表示用 - - */
/* - - 詳細表示用 - - */
.BlogBlock.Detail .BlockFooter {
margin-top: 7.5rem;
}
@media screen and (max-width: 767px) {
.BlogBlock.Detail .BlockFooter {
margin-top: 5rem;
}
}
.BlogBlock.Detail .BlockFooter .ButtonList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
color: #009420;
}
.BlogBlock.Detail .BlockFooter .ButtonList .prev-link,
.BlogBlock.Detail .BlockFooter .ButtonList .next-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 1rem;
}
.BlogBlock.Detail .BlockFooter .ButtonList .prev-link .Label,
.BlogBlock.Detail .BlockFooter .ButtonList .next-link .Label {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.BlogBlock.Detail .BlockFooter .ButtonList .prev-link .Icon,
.BlogBlock.Detail .BlockFooter .ButtonList .next-link .Icon {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
font-size: 1.3rem;
color: #fff !important;
}
.BlogBlock.Detail .BlockFooter .ButtonList .prev-link .Icon::after,
.BlogBlock.Detail .BlockFooter .ButtonList .next-link .Icon::after {
background: #009420 !important;
}
.BlogBlock.Detail .BlockFooter .ButtonList .next-link .Icon {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
/* Newsブログ
--------------------------------------------------- */
/* - - 詳細表示用 - - */
.NewsBlogBlock.Detail .BlockHeader {
margin-bottom: 4.5rem;
}
.NewsBlogBlock.Detail .BlockHeader .BlogName {
font-size: 2.4rem;
}
@media screen and (max-width: 767px) {
.NewsBlogBlock.Detail .BlockHeader .BlogName {
font-size: 2rem;
}
}
.NewsBlogBlock.Detail .BlockHeader .HeldDate {
line-height: 1;
border-bottom: 2px solid #009420;
}
@media screen and (min-width: 768px), print {
.NewsBlogBlock.Detail .BlockHeader .HeldDate {
font-size: 2rem;
}
}
.NewsBlogBlock.Detail .BlockHeader .HeldDate .Date {
color: #fff;
background-color: #009420;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 1rem;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
padding: 0.5em 1.5em;
border-radius: 0 1rem 0 0;
}
.NewsBlogBlock.Detail .BlockHeader .HeldDate .Date .Weekday {
font-size: 1.2rem;
}
.NewsBlogBlock.Detail .BlockHeader .Title {
padding-left: 0;
margin-bottom: 0.5em;
}
.NewsBlogBlock.Detail .BlockHeader .Title::after {
display: none;
}
.NewsBlogBlock.Detail .BlockHeader .Meta {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 1rem;
margin: 0 0 5rem;
}
.NewsBlogBlock.Detail .BlockHeader .Meta .Unit {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 1rem;
font-size: 1.4rem;
font-weight: 600;
}
@media screen and (max-width: 767px) {
.NewsBlogBlock.Detail .BlockHeader .Meta .Unit {
font-size: 1.2rem;
}
}
.NewsBlogBlock.Detail .BlockHeader .Meta .Unit.Category {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #e6551e;
background: #fff;
padding: 0.0625em 0.75em;
min-width: 7em;
border-radius: 1.5em;
}
.NewsBlogBlock.Detail .BlockHeader .Meta .Unit.Place {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #e6551e;
padding: 0.0625em 0.75em;
}
/* BlogList （ブログ向け汎用リスト）
--------------------------------------------------- */
.BlogList {
list-style: none;
}
.BlogList > li {
margin: 1rem 0;
background: #f8f8f2;
}
.DefaultArea.DecoratedBg.Type2 .BlogList > li {
background: #ebebd9;
}
.BlogList > li a {
-webkit-transition: 0.2s background;
transition: 0.2s background;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 1.5rem 2.5rem;
gap: 2rem;
}
@media screen and (max-width: 767px) {
.BlogList > li a {
padding: 1.75rem;
gap: 1.5rem;
}
}
html.PcView .BlogList > li a:not(.NoLink):hover, html.PcView .BlogList > li a:not(.NoLink):focus {
background: #ddddc0;
}
.BlogList > li a .Icon {
display: inline-block;
width: 3rem;
text-align: center;
display: none;
}
.BlogList > li a.NoLink .Icon {
display: none;
}
.BlogList > li a.ExternalLink::after {
display: none;
}
.BlogList > li > .inner {
/* [NEW]を表示 */
}
.BlogList > li > .inner .ImageItem {
line-height: 0;
}
.BlogList > li > .inner .ImageItem {
-ms-flex-preferred-size: 10rem;
flex-basis: 10rem;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.BlogList > li > .inner .ImageItem .Image img {
aspect-ratio: 1.2;
-o-object-fit: cover;
object-fit: cover;
border-radius: 1rem;
width: 100%;
}
.BlogList > li > .inner .TextItem {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
gap: 0.75em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
@media screen and (max-width: 767px) {
.BlogList > li > .inner .TextItem {
gap: 0em;
}
}
.BlogList > li > .inner .TextItem .Meta {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.4rem;
margin: 0rem;
}
@media screen and (min-width: 768px), print {
.BlogList > li > .inner .TextItem .Meta {
margin-right: 1.5rem;
}
}
@media screen and (max-width: 767px) {
.BlogList > li > .inner .TextItem .Meta {
margin-bottom: 1rem;
}
}
.BlogList > li > .inner .TextItem .Meta, .BlogList > li > .inner .TextItem .Meta * {
vertical-align: middle;
}
.BlogList > li > .inner .TextItem .Meta .Date {
width: 6.5em;
margin-right: 0.25em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
white-space: nowrap;
font-weight: 500;
color: #009420;
}
.BlogList > li > .inner .TextItem .Meta .Category {
color: #e6551e;
background: #fff;
width: 7em;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 1.5;
font-size: smaller;
font-weight: 600;
margin-right: 0.25em;
}
.BlogList > li > .inner .TextItem .Meta .Category:not(:empty) {
padding: 0.2rem 0.2rem;
border-radius: 3em;
}
.BlogList > li > .inner .TextItem .Title {
margin-bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #252525;
}
.BlogList > li > .inner .TextItem .Title .Icon {
font-size: 1.3rem;
margin-right: 0.25em;
}
.BlogList > li > .inner .TextItem .Title .Label {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
font-weight: 600;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.BlogList > li > .inner .TextItem .Title .Label {
-webkit-line-clamp: 2;
}
}
.BlogList > li > .inner.New .TextItem .Meta::after {
content: "NEW";
display: inline-block;
color: #fff;
background: #e6551e;
border-radius: 0.25em;
padding: 0em 0.5em;
line-height: 1.5;
vertical-align: middle;
font-weight: 500;
white-space: nowrap;
font-size: 1rem;
}
/* Eventブログ
--------------------------------------------------- */
/* EventList（イベントブログ用）
--------------------------------------------------- */
/* Performer[芸術文化人材データベース]ブログ
--------------------------------------------------- */
.PerformerBlock .SearchFormTable {
margin: 0 auto 5rem;
}
@media screen and (max-width: 767px) {
.PerformerBlock .SearchFormTable {
font-size: 1.4rem;
}
}
.PerformerBlock .SearchFormTable tbody tr th {
white-space: nowrap;
vertical-align: top;
}
.PerformerBlock .SearchFormTable tbody tr td .FormItem {
margin: 0;
padding: 0;
}
.PerformerBlock .SearchFormTable tbody tr td .FormItem .FormGroup {
margin: 0;
padding: 0;
}
.PerformerBlock .GenreList {
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.75rem;
list-style: none;
}
.PerformerBlock .GenreList > li {
color: #e6551e;
background: #fff;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 0.5em;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 1.5;
font-size: 1.4rem;
font-weight: 600;
white-space: nowrap;
}
.PerformerBlock .GenreList > li:not(:empty) {
padding: 0.2rem 1.5rem;
border-radius: 3em;
}
@media screen and (max-width: 767px) {
.PerformerBlock .GenreList > li {
font-size: 1.2rem;
}
}
.PerformerBlock .TagList {
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.75rem;
list-style: none;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.PerformerBlock .TagList > li a {
color: #252525;
font-size: 1.6rem;
background: #fff;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 0.5em;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 1.5;
font-size: 1.4rem;
font-weight: 600;
white-space: nowrap;
}
.PerformerBlock .TagList > li a:not(:empty) {
padding: 0.5rem 1.5rem;
border-radius: 3em;
}
@media screen and (max-width: 767px) {
.PerformerBlock .TagList > li a {
font-size: 1.2rem;
}
}
.PerformerBlock .TagList > li.Active a {
color: #fff;
background-color: #e6551e;
}
.PerformerBlock .PerformerList {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media screen and (min-width: 768px), print {
.PerformerBlock .PerformerList {
gap: 3rem;
}
.PerformerBlock .PerformerList > li {
width: calc((100% - 6rem) / 3);
}
}
@media screen and (max-width: 767px) {
.PerformerBlock .PerformerList {
gap: 1.5rem;
}
.PerformerBlock .PerformerList > li {
width: calc((100% - 1.5rem) / 2);
}
}
.PerformerBlock .PerformerList > li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.PerformerBlock .PerformerList > li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 2.5rem;
border-radius: 1rem;
overflow: hidden;
background-color: #f8f8f2;
}
@media screen and (max-width: 767px) {
.PerformerBlock .PerformerList > li a {
gap: 1rem;
}
}
.PerformerBlock .PerformerList > li a .PerformerHeader .Title {
margin: 0;
text-align: center;
color: #252525;
padding: 1.5rem 0.5rem 1rem;
font-size: 2.1rem;
}
@media screen and (max-width: 767px) {
.PerformerBlock .PerformerList > li a .PerformerHeader .Title {
font-size: 1.6rem;
}
}
.PerformerBlock .PerformerList > li a .PerformerContents .Image {
text-align: center;
border-radius: 100%;
width: 22rem;
max-width: 80%;
margin: 0 auto;
display: block;
}
@media screen and (max-width: 767px) {
.PerformerBlock .PerformerList > li a .PerformerContents .Image {
width: 75%;
}
}
.PerformerBlock .PerformerList > li a .PerformerContents .Image img {
aspect-ratio: 1;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.PerformerBlock .PerformerList > li a .PerformerFooter {
background-color: #fff;
}
.PerformerBlock .PerformerList > li a .PerformerFooter .LinkText {
color: #009420;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 6.5rem;
}
@media screen and (max-width: 767px) {
.PerformerBlock .PerformerList > li a .PerformerFooter .LinkText {
height: 4rem;
font-size: 1.4rem;
}
}
.PerformerBlock .PerformerList > li a .PerformerFooter .LinkText .Label {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
padding-right: 1.5em;
font-weight: 600;
}
.PerformerBlock .PerformerList > li a .PerformerFooter .LinkText .Icon {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.PerformerBlock .PerformerList > li a .PerformerFooter .LinkText .Icon.icon-cursor-right {
color: #fff !important;
}
.PerformerBlock .PerformerList > li a .PerformerFooter .LinkText .Icon.icon-cursor-right::after {
background-color: #009420 !important;
background-image: url(../img/common/decoration/noize_strong.svg);
}
.PerformerBlock.Detail {
padding: 0;
max-width: 960px;
}
@media screen and (max-width: 767px) {
.PerformerBlock.Detail {
width: 90% !important;
margin: 0 auto !important;
}
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .Heading {
font-size: 3.4rem;
text-align: center;
margin: 1em auto 0.25em;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
border-radius: 1rem;
gap: 2rem 5rem;
padding: 2.5rem 5rem;
margin: 5rem auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
@media screen and (min-width: 768px), print {
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo {
width: 80%;
}
}
@media screen and (max-width: 767px) {
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-size: 1.4rem;
padding: 2.5rem;
margin: 2.5rem auto;
}
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable {
margin-top: 0;
margin-bottom: 0;
}
@media screen and (min-width: 768px), print {
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable {
width: 60%;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable:first-child {
width: 35%;
}
}
@media screen and (max-width: 767px) {
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr {
background: none;
padding: 0;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr th, .PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr td {
line-height: 1.25;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr th {
white-space: nowrap;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr td {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr td .Unit {
display: inline;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr td .RelationshipList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0 1rem;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr td .RelationshipList .Unit {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr td .RelationshipList .Unit[data-value=在住] {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr td .RelationshipList .Unit[data-value=在勤] {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr td .RelationshipList .Unit[data-value=在学] {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr td .RelationshipList .Unit[data-value=出身] {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr td .RelationshipList .Unit[data-value=活動拠点] {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr td .RelationshipList .Unit[data-value=活動実績] {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr td .RelationshipList .Unit[data-value=過去に在住] {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr td .RelationshipList .Unit[data-value=過去に在勤] {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr td .RelationshipList .Unit[data-value=過去に在学] {
-webkit-box-ordinal-group: 10;
-ms-flex-order: 9;
order: 9;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr td .RelationshipList .Unit[data-value=その他] {
-webkit-box-ordinal-group: 11;
-ms-flex-order: 10;
order: 10;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .OtherInfo .BallonTable tr td .RelationshipList .Unit .Partition {
display: none;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .Slider {
padding: 0 2.5rem;
}
@media screen and (min-width: 768px), print {
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .Slider {
margin-left: -2.5rem;
margin-right: -2.5rem;
}
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .Slider .SliderList {
list-style: none;
margin: 0 auto 5rem;
width: 100%;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .Slider .SliderList li .inner {
position: relative;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .Slider .SliderList li .inner .ImageItem {
position: relative;
overflow: hidden;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .Slider .SliderList li .inner .ImageItem .Image img {
width: 100%;
aspect-ratio: 1;
border-radius: 2.5rem;
-o-object-fit: contain;
object-fit: contain;
background: #fff;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .Slider .SliderList li .inner .ImageItem .Caption {
text-align: right;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .Slider .swiper-controller .PrevSlideButton,
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .Slider .swiper-controller .NextSlideButton {
position: absolute;
top: calc(50% - 1em);
margin: 0 !important;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .Slider .swiper-controller .PrevSlideButton {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
left: 0.5rem;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphHeader .Slider .swiper-controller .NextSlideButton {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
right: 0.5rem;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphContents .Heading.Type1 {
margin: 1.5em 0 0.5em;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphContents .DefaultTable {
margin: 5rem auto 2.5rem;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphContents .DefaultTable a {
margin: 0 !important;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphContents .DefaultTable .SnsList {
-webkit-box-pack: start !important;
-ms-flex-pack: start !important;
justify-content: flex-start !important;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphContents .DefaultTable .SnsList a {
background: none !important;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphContents .TagList {
margin-bottom: 7.5rem;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphFooter .DecoratedBox {
margin-bottom: 5rem;
}
.PerformerBlock.Detail .PerformerParagraph .ParagraphFooter .DecoratedBox p {
font-weight: 600;
text-align: center;
}
/* 芸術文化アドバイザー ブログ専用リスト
--------------------------------------------------- */
.AdviserList {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
gap: 3rem;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.AdviserList > li {
background-color: #fff;
color: #252525;
border-radius: 1rem;
padding: 4rem;
width: calc((100% - 3rem) / 2);
}
@media screen and (max-width: 767px) {
.AdviserList > li {
width: 100%;
padding: 2rem;
}
}
.AdviserList > li .inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
gap: 2rem;
}
.AdviserList > li .inner .ImageItem .Image {
width: 15rem;
}
@media screen and (max-width: 767px) {
.AdviserList > li .inner .ImageItem .Image {
width: 10rem;
}
}
.AdviserList > li .inner .ImageItem .Image img {
width: 100%;
aspect-ratio: 1;
border-radius: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.AdviserList > li .inner .TextItem {
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.AdviserList > li .inner .TextItem > * {
width: 100%;
}
.AdviserList > li .inner .TextItem hgroup .Heading {
font-size: 2.4rem;
margin: 0;
}
.AdviserList > li .inner .TextItem hgroup .Meta {
color: #e6551e;
font-size: 1.3rem;
}
.AdviserList > li .inner .TextItem .ButtonList {
display: block;
}
.AdviserList > li .inner .TextItem .ButtonList li a {
background-color: #f8f8f2;
min-width: initial;
width: 100%;
}
/* 芸術文化アドバイザー ブログ 詳細（ポップアップ）
--------------------------------------------------- */
.AdviserDetail.PopUp {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 5rem;
padding: 6rem;
background-color: #fff;
border-radius: 1.5rem;
max-width: 1000px;
}
@media screen and (max-width: 767px) {
.AdviserDetail.PopUp {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 3rem;
}
}
.AdviserDetail.PopUp .ImageItem {
width: 32rem;
}
@media screen and (max-width: 767px) {
.AdviserDetail.PopUp .ImageItem {
width: 100%;
}
}
.AdviserDetail.PopUp .ImageItem .Image img {
width: 100%;
aspect-ratio: 1/1;
border-radius: 1.5rem;
-o-object-fit: cover;
object-fit: cover;
}
.AdviserDetail.PopUp .TextItem {
width: 50rem;
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
text-align: left;
}
@media screen and (max-width: 767px) {
.AdviserDetail.PopUp .TextItem {
width: 100%;
}
}
.AdviserDetail.PopUp .TextItem hgroup {
margin: 0 0 4.5rem;
}
.AdviserDetail.PopUp .TextItem hgroup .Heading {
font-size: 2.4rem;
margin: 0;
}
.AdviserDetail.PopUp .TextItem hgroup .Meta {
color: #e6551e;
font-size: 1.3rem;
}
.AdviserDetail.PopUp .TextItem .DefaultTable {
margin-top: 4.5rem;
}
/* 受賞者ブログ専用リスト
--------------------------------------------------- */
.PrizeWinnerList {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 3rem;
}
.PrizeWinnerList li {
background-color: #fff;
color: #252525;
border-radius: 1rem;
overflow: hidden;
}
.PrizeWinnerList li .PostHeader .Heading {
color: #009420;
font-size: 2rem;
padding: 1.5rem 4.5rem;
background-color: #f0f0f0;
margin: 0;
}
.PrizeWinnerList li .PostContents {
padding: 4.5rem;
}
.PrizeWinnerList li .PostContents #post-detail .Heading {
font-size: 2.3rem;
margin: 0 0 1rem;
}
.PrizeWinnerList li .PostContents #post-detail p {
margin: 0;
}
.PrizeWinnerList li .PostContents #post-detail hr {
margin: 1.5rem 0;
}
/* BreathOfArt[企業の文化活動]ブログ
--------------------------------------------------- */
.BreathOfArtBlock .IllustMapGroup {
position: relative;
}
.BreathOfArtBlock .IllustMapGroup .IllustMap img {
width: 100%;
}
.BreathOfArtBlock .IllustMapGroup .MapPinList {
list-style: none;
}
.BreathOfArtBlock .IllustMapGroup .MapPinList li {
position: absolute;
top: 0;
left: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.BreathOfArtBlock .IllustMapGroup .MapPinList li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 1rem;
height: 1rem;
border-radius: 100%;
background: #97d5b1;
position: relative;
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock .IllustMapGroup .MapPinList li a {
width: 0.5rem;
height: 0.5rem;
}
}
.BreathOfArtBlock .IllustMapGroup .MapPinList li a .Label {
position: absolute;
color: #fff;
z-index: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 4.25em;
height: 4.25em;
-webkit-transition: 0.2s width, 0.2s height;
transition: 0.2s width, 0.2s height;
line-height: 1;
font-size: 75%;
font-weight: bold;
}
.BreathOfArtBlock .IllustMapGroup .MapPinList li a .Label::after {
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background: url(../img/breath_of_art/balloon.svg) no-repeat 50% 50%;
background-size: contain;
border-radius: 100%;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: 0.2s -webkit-transform;
transition: 0.2s -webkit-transform;
transition: 0.2s transform;
transition: 0.2s transform, 0.2s -webkit-transform;
z-index: -1;
opacity: 0.8;
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock .IllustMapGroup .MapPinList li a .Label {
font-size: 50%;
}
}
.BreathOfArtBlock .IllustMapGroup .MapPinList li a:hover .Label {
z-index: 5;
opacity: 1;
}
@media screen and (min-width: 768px), print {
.BreathOfArtBlock .IllustMapGroup .MapPinList li a:hover .Label {
width: 6rem;
height: 6rem;
}
}
.BreathOfArtBlock .IllustMapGroup .MapPinList li a .Label, .BreathOfArtBlock .IllustMapGroup .MapPinList li[data-option=上] a .Label {
-webkit-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
bottom: 100%;
left: 50%;
}
.BreathOfArtBlock .IllustMapGroup .MapPinList li[data-option=下] a .Label {
bottom: initial;
-webkit-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
top: 100%;
left: 50%;
}
.BreathOfArtBlock .IllustMapGroup .MapPinList li[data-option=下] a .Label::after {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.BreathOfArtBlock .IllustMapGroup .MapPinList li[data-option=右] a .Label {
bottom: initial;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
left: 100%;
top: 50%;
}
.BreathOfArtBlock .IllustMapGroup .MapPinList li[data-option=右] a .Label::after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.BreathOfArtBlock .IllustMapGroup .MapPinList li[data-option=左] a .Label {
bottom: initial;
left: initial;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
right: 100%;
top: 50%;
}
.BreathOfArtBlock .IllustMapGroup .MapPinList li[data-option=左] a .Label::after {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.BreathOfArtBlock.List .BlockContents .CompanyList {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media screen and (min-width: 768px), print {
.BreathOfArtBlock.List .BlockContents .CompanyList {
gap: 5rem;
}
.BreathOfArtBlock.List .BlockContents .CompanyList > li {
width: calc((100% - 10rem) / 3);
}
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.List .BlockContents .CompanyList {
gap: 2.5rem;
}
.BreathOfArtBlock.List .BlockContents .CompanyList > li {
width: calc((100% - 2.5rem) / 2);
}
}
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
}
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner hgroup {
position: absolute;
z-index: 5;
}
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner hgroup .Heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 0.3rem;
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner hgroup .Heading {
font-size: 87.5%;
}
}
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner hgroup .Heading > span {
color: #fff;
background: #97d5b1;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
padding: 0.375rem 0.5em;
line-height: 1.25;
}
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner hgroup .Heading > span.Sub {
font-size: 87.5%;
}
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .ImageItem {
padding-top: 7.5rem;
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .ImageItem {
padding-top: 5rem;
}
}
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .ImageItem > a .Image {
overflow: hidden;
border-radius: 100%;
vertical-align: bottom;
}
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .ImageItem > a .Image img {
aspect-ratio: 1;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .TextItem {
margin-top: 1.5rem;
margin-bottom: 0.5rem;
font-size: 87.5%;
line-height: 1.5;
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
height: 7.5em;
margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .TextItem {
margin-top: 1rem;
}
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .TextItem {
font-size: 75%;
}
}
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .TextItem p {
padding-left: 1.5rem;
border-left: 1px solid;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .LinkText {
color: #fff;
min-width: initial;
padding: 0.5rem 1.25rem;
margin: 0 0 0 auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
font-size: 75%;
font-weight: 800;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.5rem;
position: relative;
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .LinkText {
font-size: 62.5%;
}
}
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .LinkText::after {
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background: #97d5b1;
border-radius: 2em;
-webkit-transition: 0.2s -webkit-transform;
transition: 0.2s -webkit-transform;
transition: 0.2s transform;
transition: 0.2s transform, 0.2s -webkit-transform;
z-index: -1;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .LinkText .Label {
padding-right: 0;
}
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .LinkText .Icon::after {
background: none;
}
.BreathOfArtBlock.List .BlockContents .CompanyList > li > .inner .LinkText:hover::after {
-webkit-transform: scale(1);
transform: scale(1);
}
.BreathOfArtBlock.List .BlockContents .SliderWrapper {
position: relative;
}
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-container {
padding-bottom: 0;
}
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-container .CompanyList {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
gap: 0 !important;
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller {
position: relative;
}
}
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .swiper-pagination {
margin: 2em auto;
padding: 0 2.5rem;
}
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .swiper-pagination .swiper-pagination-bullet {
background: #97d5b1 !important;
}
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .PrevNext .PrevSlideButton,
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .PrevNext .NextSlideButton {
margin: 0 !important;
position: absolute;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
z-index: 10;
}
@media screen and (min-width: 768px), print {
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .PrevNext .PrevSlideButton,
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .PrevNext .NextSlideButton {
top: calc(7.5rem + 175px);
width: 8rem;
height: 10rem;
padding: 1rem 3rem;
}
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .PrevNext .PrevSlideButton,
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .PrevNext .NextSlideButton {
width: 2rem;
height: 3rem;
top: 50%;
}
}
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .PrevNext .PrevSlideButton .Icon,
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .PrevNext .NextSlideButton .Icon {
display: block;
width: 100%;
height: 100%;
background: rgba(151, 213, 177, 0.375);
-webkit-transition: 0.2s background;
transition: 0.2s background;
-webkit-clip-path: polygon(100% 0%, 10% 50%, 100% 100%, 90% 100%, 0% 50%, 90% 0%);
clip-path: polygon(100% 0%, 10% 50%, 100% 100%, 90% 100%, 0% 50%, 90% 0%);
}
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .PrevNext .PrevSlideButton .Icon::after,
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .PrevNext .NextSlideButton .Icon::after {
display: none;
}
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .PrevNext .PrevSlideButton:hover .Icon,
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .PrevNext .NextSlideButton:hover .Icon {
background: #97d5b1;
}
@media screen and (min-width: 768px), print {
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .PrevNext .PrevSlideButton {
right: 100%;
}
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .PrevNext .PrevSlideButton {
left: 0%;
}
}
@media screen and (min-width: 768px), print {
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .PrevNext .NextSlideButton {
left: 100%;
}
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .PrevNext .NextSlideButton {
right: 0%;
}
}
.BreathOfArtBlock.List .BlockContents .SliderWrapper .swiper-controller .PrevNext .NextSlideButton .Icon {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.BreathOfArtBlock.List .BlockFooter {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
@media screen and (min-width: 768px), print {
.BreathOfArtBlock.Detail {
padding: 3rem 6rem;
}
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.Detail {
padding: 3rem 0rem;
width: calc(100% - 3rem) !important;
margin-right: auto !important;
}
}
.BreathOfArtBlock.Detail .BlockHeader .Heading {
position: absolute;
top: 0;
right: 0;
margin-top: 0;
}
.BreathOfArtBlock.Detail .BlockHeader .Heading img {
width: 10rem;
aspect-ratio: 0.2222222222;
}
@media screen and (min-width: 768px), print {
.BreathOfArtBlock.Detail .BlockHeader .Heading img {
width: 10rem;
}
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.Detail .BlockHeader .Heading img {
width: 4rem;
}
}
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphHeader .Heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
@media screen and (min-width: 768px), print {
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphHeader .Heading {
font-size: 200%;
margin-bottom: 3rem;
margin-right: 5rem;
}
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphHeader .Heading {
font-size: 125%;
margin-right: 5rem;
}
}
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphHeader .Heading .Sub {
font-size: 50%;
}
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphHeader .Image {
border-radius: 2.5rem 0 0 0;
overflow: hidden;
}
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphHeader .Image img {
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (min-width: 768px), print {
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphHeader .Image {
margin-right: -120px;
}
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphHeader .Image img {
width: 1200px;
height: 665px;
}
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphHeader .Image {
margin-right: -1.5rem;
}
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphHeader .Image img {
width: calc(100% + 1.5rem);
}
}
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphHeader .Caption {
color: #808080;
background: #f8f8f2;
position: relative;
z-index: 2;
border-radius: 0 2.5rem 0 0;
}
@media screen and (min-width: 768px), print {
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphHeader .Caption {
margin-top: -15rem;
margin-top: -8rem;
padding: 4rem 7rem 4rem 0;
}
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphHeader .Caption {
margin-top: -7.5rem;
margin-top: -4rem;
padding: 2rem 2rem 2rem 0rem;
font-size: 75%;
}
}
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .DecoratedBox {
background: #fff;
border-radius: 2.5rem;
-webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.05);
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.05);
}
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .DecoratedBox p {
list-style: 1.5;
}
@media screen and (min-width: 768px), print {
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .DecoratedBox {
margin: 7.5rem 0;
padding: 7.5rem;
}
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .DecoratedBox p {
font-size: 112.5%;
}
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .DecoratedBox {
margin: 3rem 0;
padding: 2.5rem;
}
}
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .CompanyInfoGroup hgroup {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
border-bottom: 1px solid;
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
gap: 1rem;
}
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .CompanyInfoGroup hgroup .Heading {
margin: 0;
}
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .CompanyInfoGroup hgroup .Logo {
-ms-flex-negative: 0;
flex-shrink: 0;
}
@media screen and (min-width: 768px), print {
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .CompanyInfoGroup hgroup .Logo {
width: 20rem;
}
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .CompanyInfoGroup hgroup .Heading {
font-size: 112.5%;
}
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .CompanyInfoGroup hgroup .Logo {
width: 25%;
}
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .CompanyInfoGroup > p {
font-size: 87.5%;
}
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .CompanyInfoGroup .DefaultTable {
font-size: 87.5%;
}
}
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .CompanyInfoGroup .DefaultTable tbody tr th {
width: 20%;
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .CompanyInfoGroup .DefaultTable tbody tr th, .BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .CompanyInfoGroup .DefaultTable tbody tr td {
padding: 1.25rem 0.5rem;
}
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .CompanyInfoGroup .DefaultTable tbody tr th {
padding-bottom: 0;
}
}
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .CompanyInfoGroup .DefaultTable tbody tr:last-child {
border-bottom: none;
}
.BreathOfArtBlock.Detail .BlockContents .CompanyParagraph .ParagraphContents .CompanyInfoGroup .Map iframe {
border: 2px solid #fff;
}
.BreathOfArtBlock.Detail .Preview {
margin-top: 5rem;
margin-left: auto;
margin-right: auto;
width: calc(0.8 * 100%);
position: relative;
}
.BreathOfArtBlock.Detail .Preview .Heading {
margin-bottom: 0rem;
}
.BreathOfArtBlock.Detail .Preview > p {
margin-bottom: 2.5rem;
}
.BreathOfArtBlock.Detail .Preview table {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
position: absolute;
bottom: 0%;
right: 0%;
color: #fff;
background: rgba(34, 34, 34, 0.9);
font-size: 75%;
margin: 0;
opacity: 1 !important;
pointer-events: none;
}
.BreathOfArtBlock.Detail .Preview table th input, .BreathOfArtBlock.Detail .Preview table td input {
width: 2em;
text-align: right;
color: inherit;
}
.BreathOfArtBlock.Detail .Preview .IllustMapGroup {
padding: 4px;
background: #222;
}
.BreathOfArtBlock.Detail .Preview .IllustMapGroup .IllustMap {
background: #fff url(../img/breath_of_art/map_fukui_guide.svg) no-repeat 50% 50%;
background-size: contain;
}
.BreathOfArtBlock.Detail .Preview .IllustMapGroup .IllustMap img {
opacity: 0;
}
.BreathOfArtBlock.Detail .Preview .IllustMapGroup .CompanyMapPinList {
pointer-events: none;
}
.BreathOfArtBlock.Detail .Preview .IllustMapGroup .CompanyMapPinList li a .Label {
font-size: calc(0.8 * 75%);
}
@media screen and (max-width: 767px) {
.BreathOfArtBlock.Detail .Preview .IllustMapGroup .CompanyMapPinList li a .Label {
font-size: calc(0.8 * 50%);
}
}
.BreathOfArtBlock.Detail .Preview .IllustMapGroup .CompanyMapPinList li:not(.Current) {
opacity: 0.3;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 同階層のSCSSをimport */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● body.css */
/* サイト共通部 */
/* ・ページの共通定義 */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body {
text-align: center;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
margin: 0 auto;
position: relative;
color: #252525;
}
@media screen and (min-width: 768px), print {
body.WebSite {
min-width: 1200px;
}
}
@media screen and (max-width: 767px) {
body.WebSite {
min-width: 320px;
}
}
body.MenuOpened {
height: 120vh;
overflow: hidden;
}
/* rem の基準フォントサイズ */
html {
font-size: 62.5%;
}
body {
font-size: 1.6em;
line-height: 1.75;
}
.World {
text-align: left;
margin: 0 auto;
font-size: 1.7rem;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 基本レイアウト */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* World とヘッダフッタ配置
--------------------------------------------------- */
.World {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 100vh;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
}
.World .ContentsDivision {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
/* GlobalMenuArea
開閉メニュー
--------------------------------------------------- */
.GlobalMenuArea {
position: fixed;
width: 100%;
height: 100%;
overflow: auto;
opacity: 0;
z-index: -1;
display: none;
}
.GlobalMenuArea.Active {
opacity: 1;
z-index: 120;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.GlobalMenuArea {
color: #252525;
background: #f8f8f2;
-webkit-transition: all 0.2s;
transition: all 0.2s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
padding: 10rem 0rem 5rem;
/* - - GlobalMenuBlock - - */
}
@media screen and (max-width: 767px) {
.GlobalMenuArea {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
padding: 6rem 0rem;
}
}
.GlobalMenuArea .GlobalMenuBlock {
margin-left: auto;
margin-right: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
position: relative;
}
@media screen and (min-width: 768px), print {
.GlobalMenuArea .GlobalMenuBlock {
width: 100%;
max-width: 1200px;
}
}
@media screen and (max-width: 1199px), print {
.GlobalMenuArea .GlobalMenuBlock {
width: calc(100% - 2rem);
}
}
@media screen and (max-width: 767px) {
.GlobalMenuArea .GlobalMenuBlock {
width: calc(100% - 4rem);
min-width: 320px;
}
}
@media screen and (min-width: 768px), print {
.GlobalMenuArea .GlobalMenuBlock {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
margin-top: 7.5vh;
padding: 5rem;
min-width: 1200px;
}
}
@media screen and (max-width: 767px) {
.GlobalMenuArea .GlobalMenuBlock {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 5rem 2.5rem;
}
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents {
/* メニュー部分のスタイル - - - - - - - - - */
}
@media screen and (min-width: 768px), print {
.GlobalMenuArea .GlobalMenuBlock .BlockContents:first-child {
width: 60%;
padding-right: 5rem;
}
}
@media screen and (max-width: 767px) {
.GlobalMenuArea .GlobalMenuBlock .BlockContents:first-child {
padding-bottom: 5rem;
}
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents:last-child {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 2.5rem;
}
@media screen and (min-width: 768px), print {
.GlobalMenuArea .GlobalMenuBlock .BlockContents:last-child {
width: 40%;
padding-left: 10rem;
border-left: 2px solid rgba(153, 153, 153, 0.25);
}
}
@media screen and (max-width: 767px) {
.GlobalMenuArea .GlobalMenuBlock .BlockContents:last-child {
padding-top: 5rem;
border-top: 2px solid rgba(153, 153, 153, 0.25);
}
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .MenuGroup .MenuList {
margin: 0;
gap: 2.5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
}
@media screen and (min-width: 768px), print {
.GlobalMenuArea .GlobalMenuBlock .BlockContents .MenuGroup .MenuList {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-line-pack: start;
align-content: flex-start;
}
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .MenuGroup .MenuList li a {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .MenuGroup .MenuList li.li-level-2 {
white-space: normal;
}
@media screen and (min-width: 768px), print {
.GlobalMenuArea .GlobalMenuBlock .BlockContents .MenuGroup .MenuList li.has-sub-nav .ToggleButton {
display: none !important;
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .MenuGroup .MenuList li.has-sub-nav .sub-nav {
display: block !important;
}
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .MenuGroup .MenuList li.has-sub-nav .sub-nav .MenuList {
font-size: smaller;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-line-pack: start;
align-content: flex-start;
gap: 1em 3em;
}
@media screen and (max-width: 767px) {
.GlobalMenuArea .GlobalMenuBlock .BlockContents .MenuGroup.Main .MenuList.ul-level-1 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
@media screen and (min-width: 768px), print {
.GlobalMenuArea .GlobalMenuBlock .BlockContents .MenuGroup.Main .MenuList.ul-level-1 {
display: block;
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .MenuGroup.Main .MenuList.ul-level-1.ul-level-1 > li {
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid;
margin-bottom: 2.5rem;
}
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .MenuGroup.Sub {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
gap: 2.5rem;
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .MenuGroup.Sub .MenuList {
margin: 0;
gap: 1.5rem;
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .MenuGroup.Sub .MenuList li {
margin-bottom: 0.75rem !important;
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .MenuGroup.Sub .MenuList:nth-child(1) {
font-weight: 600;
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .MenuGroup.Sub .MenuList:nth-child(2) {
font-size: smaller;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .MenuGroup.Sub .MenuList:nth-child(2) li {
width: calc((100% - 1.5rem) / 2);
}
@media screen and (max-width: 767px) {
.GlobalMenuArea .GlobalMenuBlock .BlockContents .MenuGroup.Sub .MenuList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .MenuGroup.Sub .MenuList li {
width: 50%;
}
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .ButtonList {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-line-pack: stretch;
align-content: stretch;
gap: 1.5rem;
}
@media screen and (max-width: 767px) {
.GlobalMenuArea .GlobalMenuBlock .BlockContents .Author {
text-align: center;
}
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .Author .Heading {
margin-bottom: 0.5rem;
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .Author address {
font-size: smaller;
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .SnsGroup {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .SnsGroup::before {
content: "";
-ms-flex-item-align: stretch;
align-self: stretch;
border: 1px solid currentColor;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .SnsGroup .SnsList {
margin: 0;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.GlobalMenuArea .GlobalMenuBlock .BlockContents .SnsGroup .LangMenuList {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● header.css */
/* サイト共通部 */
/* ・ヘッダ */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Header */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
header {
position: sticky;
z-index: 125;
top: 0;
background: white;
-webkit-box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1);
-webkit-transition: 0.2s all;
transition: 0.2s all;
/* ハンバーガーメニュー展開時 */
}
@media screen and (min-width: 1200px) {
header {
left: calc((100% - 1200px) / 2);
width: calc(100% - (100% - 1200px) / 2);
padding: 0 3rem;
}
}
@media screen and (max-width: 1199px), print {
header {
left: 0;
width: 100%;
padding: 0 1.5rem;
padding-left: 0.75rem;
}
}
@media screen and (min-width: 768px), print {
header {
min-width: 1200px;
border-bottom-left-radius: 3.5rem;
}
}
body.MenuOpened header {
background: none;
-webkit-box-shadow: none;
box-shadow: none;
background: #f8f8f2;
}
/* SiteHeaderArea
--------------------------------------------------- */
.SiteHeaderArea {
padding: 0;
}
/* - - SiteHeaderBlock - - */
.SiteHeaderBlock {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
position: relative;
/* ハンバーガーメニュー展開時 */
}
@media screen and (min-width: 768px), print {
.SiteHeaderBlock {
height: 10rem;
}
}
@media screen and (max-width: 767px) {
.SiteHeaderBlock {
height: 7.5rem;
}
}
.SiteHeaderBlock .BlockHeader {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: initial;
-ms-flex-pack: initial;
justify-content: initial;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
@media screen and (min-width: 768px), print {
.SiteHeaderBlock .BlockHeader {
width: 35rem;
}
}
@media screen and (max-width: 767px) {
.SiteHeaderBlock .BlockHeader {
width: 25rem;
}
}
.SiteHeaderBlock .BlockHeader .SiteLogo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-item-align: stretch;
align-self: stretch;
-webkit-transition: 0.2s width;
transition: 0.2s width;
width: 100%;
}
.SiteHeaderBlock .BlockHeader .SiteLogo, .SiteHeaderBlock .BlockHeader .SiteLogo * {
vertical-align: bottom;
}
.SiteHeaderBlock .BlockHeader .SiteLogo > a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.SiteHeaderBlock .BlockHeader .SiteLogo > a svg {
width: 100%;
aspect-ratio: 61/10;
}
.SiteHeaderBlock .BlockHeader .SiteLogo a {
margin: 0;
width: 100%;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.SiteHeaderBlock .BlockContents {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: calc(1200px - 30rem);
padding: 0 4rem;
gap: 6rem;
}
@media screen and (max-width: 1199px), print {
.SiteHeaderBlock .BlockContents {
width: calc(1200px - 35rem);
}
}
@media screen and (max-width: 767px) {
.SiteHeaderBlock .BlockContents {
display: none;
}
}
.SiteHeaderBlock .BlockContents .MenuList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.SiteHeaderBlock .BlockContents .MenuList.ul-level-1 {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
font-weight: 700;
line-height: 1.5;
}
.SiteHeaderBlock .BlockContents .MenuList > li {
margin: 0;
}
.SiteHeaderBlock .BlockContents .MenuList.MainMenuList {
gap: 2.5em;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
min-width: 45rem;
}
.SiteHeaderBlock .BlockContents .MenuList.MainMenuList li {
position: relative;
}
.SiteHeaderBlock .BlockContents .MenuList.MainMenuList li.li-level-1:first-child {
display: none;
}
.SiteHeaderBlock .BlockContents .MenuList.MainMenuList li.li-level-1 > a {
height: 10rem;
}
.SiteHeaderBlock .BlockContents .MenuList.MainMenuList li.li-level-1 > a .Icon {
display: none;
}
.SiteHeaderBlock .BlockContents .MenuList.MainMenuList li.li-level-1 > a .Label {
padding-left: 0em !important;
}
.SiteHeaderBlock .BlockContents .MenuList.MainMenuList li > .sub-nav {
position: absolute;
top: 100%;
left: 0%;
width: 100%;
z-index: 5000;
visibility: hidden;
opacity: 0;
top: 100%;
left: calc(50% - 30rem);
width: 60rem;
-webkit-transition: all 0.2s;
transition: all 0.2s;
color: #fff;
background: #009420;
-webkit-box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1) inset, 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1) inset, 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1);
padding: 2.5em;
margin: 0;
border-bottom-right-radius: 3.5rem;
border-bottom-left-radius: 3.5rem;
}
.SiteHeaderBlock .BlockContents .MenuList.MainMenuList li > .sub-nav .MenuList {
display: block;
gap: 0;
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
}
.SiteHeaderBlock .BlockContents .MenuList.MainMenuList li > .sub-nav .MenuList li {
margin: 0 0 1em;
}
.SiteHeaderBlock .BlockContents .MenuList.MainMenuList li > .sub-nav .MenuList li a .Icon::after {
background: #fff !important;
}
.SiteHeaderBlock .BlockContents .MenuList.MainMenuList li > .sub-nav .MenuList li a .Label {
font-weight: 600;
}
.SiteHeaderBlock .BlockContents .MenuList.MainMenuList li:hover > .sub-nav {
visibility: visible;
opacity: 1;
top: 100%;
}
.SiteHeaderBlock .BlockContents .MenuList.SubMenuList {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
color: #6c6c6c;
font-size: 87.5%;
font-weight: 600;
line-height: 1.25;
}
.SiteHeaderBlock .BlockContents .MenuList.SubMenuList > li {
margin: 0;
}
.SiteHeaderBlock .BlockContents .MenuList.SubMenuList > li:not(:last-child) {
border-right: 2px solid currentColor;
padding-right: 1.5em;
}
.SiteHeaderBlock .BlockContents .MenuList.SubMenuList > li:not(:first-child) {
padding-left: 1.5em;
}
.SiteHeaderBlock .BlockFooter {
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
body.MenuOpened .SiteHeaderBlock .BlockContents {
display: none;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● contents.css */
/* サイト共通部 */
/* ・コンテンツ */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ロードエフェクト
--------------------------------------------------- */
#World {
position: relative;
}
#World::before {
content: "";
width: 100vw;
height: 100vh;
bottom: -1px;
left: 0;
position: fixed;
z-index: 50;
background: #f8f8f2;
-webkit-transition: height 0.25s ease-in;
transition: height 0.25s ease-in;
border-bottom: 1px solid #009420;
}
body.loading #World::before {
height: 100vh;
}
body.loaded #World::before {
height: 0vh;
border-bottom: 0px solid rgba(0, 148, 32, 0);
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Contents */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
.ContentsDivision {
/* 固定ページ共通体裁
--------------------------------------------------- */
}
@media screen and (min-width: 768px), print {
.ContentsDivision {
min-height: 60rem;
}
}
.ContentsDivision .Page {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 0 0 5rem;
padding: 0;
}
@media screen and (min-width: 768px), print {
.ContentsDivision .Page {
padding: 0 0 2.5rem;
padding: 0;
}
}
.ContentsDivision .Page .PageContents {
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
width: 100%;
}
.ContentsDivision .Page .PageContents > [class*=Block] {
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 768px), print {
.ContentsDivision .Page .PageContents > [class*=Block] {
width: 100%;
max-width: 1200px;
}
}
@media screen and (max-width: 1199px), print {
.ContentsDivision .Page .PageContents > [class*=Block] {
width: calc(100% - 2rem);
}
}
@media screen and (max-width: 767px) {
.ContentsDivision .Page .PageContents > [class*=Block] {
width: calc(100% - 4rem);
min-width: 320px;
}
}
.ContentsDivision .Page .PageFooter {
width: 100%;
padding: 2.5rem;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* */
/* ● footer.css */
/* サイト共通部 */
/* ・フッタ */
/* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Footer */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
footer {
position: relative;
}
/* SiteFooterArea
--------------------------------------------------- */
.SiteFooterArea {
position: relative;
padding: 6rem 0 5rem;
background-color: #f8f8f2;
}
.SiteFooterArea > [class*=Block] {
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 768px), print {
.SiteFooterArea > [class*=Block] {
width: 100%;
max-width: 1200px;
}
}
@media screen and (max-width: 1199px), print {
.SiteFooterArea > [class*=Block] {
width: calc(100% - 2rem);
}
}
@media screen and (max-width: 767px) {
.SiteFooterArea > [class*=Block] {
width: calc(100% - 4rem);
min-width: 320px;
}
}
/* - - AuthorBlock - - */
.AuthorBlock {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (min-width: 768px), print {
.AuthorBlock {
margin-bottom: 5rem;
}
}
@media screen and (max-width: 767px) {
.AuthorBlock {
margin-bottom: 2.5rem;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.AuthorBlock .BlockHeader .SiteLogo, .AuthorBlock .BlockHeader .SiteLogo * {
vertical-align: bottom;
}
.AuthorBlock .BlockHeader .SiteLogo > a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.AuthorBlock .BlockHeader .SiteLogo > a svg {
width: 100%;
aspect-ratio: 61/10;
}
@media screen and (min-width: 768px), print {
.AuthorBlock .BlockHeader .SiteLogo {
width: 35rem;
}
}
@media screen and (max-width: 767px) {
.AuthorBlock .BlockHeader .SiteLogo {
width: 25rem;
}
}
@media screen and (min-width: 768px), print {
.AuthorBlock .BlockHeader {
margin-right: 6.5rem;
}
}
@media screen and (max-width: 767px) {
.AuthorBlock .BlockHeader {
margin-bottom: 2.5rem;
}
}
.AuthorBlock .BlockContents {
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
}
.AuthorBlock .BlockContents p {
font-weight: 500;
}
@media screen and (min-width: 768px), print {
.AuthorBlock .BlockContents {
font-size: 1.5rem;
}
}
@media screen and (max-width: 767px) {
.AuthorBlock .BlockContents {
font-size: 1.4rem;
}
}
.FooterMenuBlock .BlockContents {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
@media screen and (max-width: 767px) {
.FooterMenuBlock .BlockContents {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.FooterMenuBlock .BlockContents .MenuGroup .MenuList {
margin: 0;
gap: 2.5rem;
}
@media screen and (min-width: 768px), print {
.FooterMenuBlock .BlockContents .MenuGroup .MenuList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-line-pack: start;
align-content: flex-start;
}
}
@media screen and (max-width: 767px) {
.FooterMenuBlock .BlockContents .MenuGroup .MenuList {
font-size: 1.4rem;
}
}
@media screen and (min-width: 768px), print {
.FooterMenuBlock .BlockContents .MenuGroup.Main {
width: 75%;
padding-right: 5rem;
}
}
@media screen and (max-width: 767px) {
.FooterMenuBlock .BlockContents .MenuGroup.Main {
padding-bottom: 2.5rem;
}
}
.FooterMenuBlock .BlockContents .MenuGroup.Main .MenuList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
gap: 3rem;
}
.FooterMenuBlock .BlockContents .MenuGroup.Main .MenuList li .sub-nav .MenuList {
font-size: smaller;
display: block;
gap: 0;
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
}
.FooterMenuBlock .BlockContents .MenuGroup.Main .MenuList li .sub-nav .MenuList li {
white-space: normal;
margin-bottom: 1.5rem;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid;
}
@media screen and (min-width: 768px), print {
.FooterMenuBlock .BlockContents .MenuGroup.Main .MenuList {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.FooterMenuBlock .BlockContents .MenuGroup.Main .MenuList.ul-level-1 {
height: 22.5rem;
}
.FooterMenuBlock .BlockContents .MenuGroup.Main .MenuList.ul-level-1 > li {
width: 30%;
}
.FooterMenuBlock .BlockContents .MenuGroup.Main .MenuList.ul-level-1 > li.has-sub-nav {
width: 60%;
}
}
@media screen and (max-width: 767px) {
.FooterMenuBlock .BlockContents .MenuGroup.Main .MenuList.ul-level-1 > li {
width: calc(50% - 1.5rem);
}
.FooterMenuBlock .BlockContents .MenuGroup.Main .MenuList.ul-level-1 > li.has-sub-nav {
width: 100%;
}
}
.FooterMenuBlock .BlockContents .MenuGroup.Sub {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
gap: 1.5rem;
}
.FooterMenuBlock .BlockContents .MenuGroup.Sub .MenuList {
margin: 0;
gap: 1.5rem;
}
.FooterMenuBlock .BlockContents .MenuGroup.Sub .MenuList:nth-child(1) {
font-weight: 600;
}
.FooterMenuBlock .BlockContents .MenuGroup.Sub .MenuList:nth-child(2) {
font-size: smaller;
}
.FooterMenuBlock .BlockContents .MenuGroup.Sub .MenuList li {
margin-bottom: 0.75rem !important;
}
@media screen and (min-width: 768px), print {
.FooterMenuBlock .BlockContents .MenuGroup.Sub {
width: 25%;
padding-left: 10rem;
border-left: 2px solid rgba(153, 153, 153, 0.25);
}
}
@media screen and (max-width: 767px) {
.FooterMenuBlock .BlockContents .MenuGroup.Sub {
padding-top: 2.5rem;
border-top: 2px solid rgba(153, 153, 153, 0.25);
}
.FooterMenuBlock .BlockContents .MenuGroup.Sub ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.FooterMenuBlock .BlockContents .MenuGroup.Sub ul li {
width: 50%;
}
}
.FooterMenuBlock .BlockFooter {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
margin-top: 5rem;
}
@media screen and (max-width: 767px) {
.FooterMenuBlock .BlockFooter {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 2.5rem;
}
}
.FooterMenuBlock .BlockFooter .ContactGroup p {
font-size: 1.2rem;
margin-bottom: 1.5em;
font-weight: 500;
}
@media screen and (max-width: 767px) {
.FooterMenuBlock .BlockFooter .ContactGroup p {
font-size: 1.1rem;
margin-bottom: 2.5rem;
}
}
.FooterMenuBlock .BlockFooter .ContactGroup .ListGroup {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 5rem;
}
@media screen and (max-width: 767px) {
.FooterMenuBlock .BlockFooter .ContactGroup .ListGroup {
gap: 2.5rem;
}
}
.FooterMenuBlock .BlockFooter .ContactGroup .ListGroup .ButtonList {
gap: 2.5rem;
}
.FooterMenuBlock .BlockFooter .ContactGroup .ListGroup .ButtonList .Button {
font-size: 1.5rem;
}
@media screen and (max-width: 767px) {
.FooterMenuBlock .BlockFooter .ContactGroup .ListGroup .ButtonList {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.FooterMenuBlock .BlockFooter .ContactGroup .ListGroup .ButtonList .Button {
font-size: 1.2rem;
min-width: 40vw;
}
}
@media screen and (max-width: 767px) {
.FooterMenuBlock .BlockFooter .ContactGroup .ListGroup .SnsList {
margin: 0 auto;
}
}
@media screen and (max-width: 767px) {
.FooterMenuBlock .BlockFooter .BannerList {
margin: 2rem auto 0;
}
}
.FooterMenuBlock .BlockFooter .BannerList li {
width: 40rem;
height: 10rem;
}
@media screen and (max-width: 767px) {
.FooterMenuBlock .BlockFooter .BannerList li {
width: 55vw;
height: 5rem;
}
}
/* CopyrightArea
--------------------------------------------------- */
.CopyrightArea {
color: #fff;
background-color: #252525;
padding: 1rem 0;
}
.CopyrightArea .Copyright {
font-size: 1.2rem;
text-align: center;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 個別設定 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 印刷設定 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media print {
.GlobalMenuArea {
display: none !important;
}
main [class$=Area],
footer [class$=Area] {
padding-left: 0 !important;
}
.SiteHeaderBlock .BlockContents,
.SiteHeaderBlock .BlockFooter {
display: none !important;
}
.PageWidthSetter {
width: 100% !important;
max-width: initial !important;
}
.LocalNaviBlock .BlockContents .ContentsMenuList li {
width: auto !important;
}
}