@charset "utf-8";
/* *************************************************************************************************************
* file name: default.css
* Alteration: 2019.11
* style info: 全ページ共通のリセット、ベースCSS
----------------------------------------------------------------------------------------------------------------
* < load >
* < COMMON >
- WidthCheckerForJs
- Normalize
- Reset
- Setting
- AddParts
- AddStyle
* < BASE >
- outerWide.
- wrapper_Box_Parts.
- FRAMEWORK | HEADER
- FRAMEWORK | PAGE_THEME
- FRAMEWORK | FOOTER
* < printOnly >
----------------------------------------------------------------------------------------------------------------
* 01 メディアクエリの 1251px 以上を含む設定 には print をつける。
* 02 @keyframes を @media の中に入れないように。
* 03 (orientation: landscape)は、デバイスが横長の時の設定。
* 03 SVGはファイル内にwidth,height設定を追加する（for IE）（例：）
----------------------------------------------------------------------------------------------------------------
* {A} これらの transition は消しても問題ありません。
************************************************************************************************************* */
/* ***************************************************************************************************
load ｜ @importより上にコード記述不可。
*************************************************************************************************** */
/* ----------------------------------------------------------------------------
* [ Noto Sans JP ] [ Noto Serif JP ] [ Crimson Text ]
* URL : https://fonts.google.com/?selection.family=Noto+Sans+JP:400,700|Noto+Serif+JP&selection.subset=japanese
* URL : https://fonts.google.com/?selection.family=Crimson+Text
* CODE :
* font-family: 'Noto Sans JP', sans-serif;
* font-family: 'Noto Serif JP', serif;
* font-family: 'Crimson Text', serif;
*
* font-weight: 400;
* font-weight: 700;
*
* MEMO : @importの記述を和文フォント/英文フォントで分けないとIEで表示されないバグあり(2019.10)。
*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|Noto+Serif+JP&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Crimson+Text&display=swap');
/* ----------------------------------------------------------------------------
* PC : 1251px(over)
* TB : 737px ~ 1250px
* SP : 736px(below)
*/
@media print, screen and (min-width: 737px) { /*{overTB}*/}
@media print, screen and (min-width: 1051px) { /*{overTBl}*/}
@media print, screen and (min-width: 1251px) { /*{overPC}*/}
@media screen and (max-width: 1250px) { /*{belowTB}*/}
@media screen and (max-width: 1050px) { /*{belowTBs}*/}
@media screen and (min-width: 737px) and (max-width: 1250px) {/*{TB}*/}
@media screen and (min-width: 1051px) and (max-width: 1250px) {/*{TBl}*/}
@media screen and (min-width: 737px) and (max-width: 1050px) {/*{TBs}*/}
@media screen and (max-width: 736px) { /*{SP}*/}
@media screen and (max-width: 480px) { /*{SPs}*/}
@media screen and (max-width: 320px) { /*{SPss}*/}
/* ***************************************************************************************************
COMMON
*************************************************************************************************** */
/* ============================================================================
[ WidthCheckerForJs ] setting.jsと連携 | ※CSS依存型ウィンドウ幅判別法 [2015.11 Adding]
-------------------------------------------------------------------------------
if ($('.WidthCheckerForJs').css('zIndex') == '-150') { {overPCll} }
else if ($('.WidthCheckerForJs').css('zIndex') == '-140') { {PCl} }
============================================================================ */
.WidthCheckerForJs {position:absolute;top:0;left:0;z-index:-100;width:0;height:0;} /* blank span */
@media print, screen and (min-width: 1251px) { .WidthCheckerForJs {z-index:-140;}} /*{PC}*/
@media screen and (min-width: 1051px) and (max-width: 1250px) { .WidthCheckerForJs {z-index:-130;}} /*{TBl}*/
@media screen and (min-width: 737px) and (max-width: 1050px) { .WidthCheckerForJs {z-index:-120;}} /*{TBs}*/
@media screen and (max-width: 736px) { .WidthCheckerForJs {z-index:-110;}} /*{SP}*/
@media screen and (max-width: 480px) { .WidthCheckerForJs {z-index:-105;}} /*{SPs}*/
/* ============================================================================
Normalize (ress v1.1.2 - v1.2.2)
-------------------------------------------------------------------------------
[ress.css • v1.1.2]
Author : Filipe Linhares
License : MIT License(https://opensource.org/licenses/mit-license.php)
URL : github.com/filipelinhares/ress
-------------------------------------------------------------------------------
[2019.11] Adding | deleted the part of the style.
============================================================================ */
html {box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%;}
*, ::before, ::after {background-repeat:no-repeat;box-sizing:inherit;}
::before, ::after {text-decoration:inherit;vertical-align:inherit;}
* {padding:0;margin:0;}
a {background-color:transparent;-webkit-text-decoration-skip:objects;}
a:active, a:hover {outline-width:0;}
/* # ==================== */
button,[type="button"],[type="reset"],[type="submit"],[role="button"] {cursor:pointer;}
[disabled] {cursor:default;}
textarea {overflow:auto;resize:vertical;}
button,input,optgroup,select,textarea {font:inherit;}
/* # ==================== */
img {border-style:none;}
/* # ==================== */
::-moz-selection {background-color:#b3d4fc;color:#000;text-shadow:none;}
::selection {background-color:#b3d4fc;color:#000;text-shadow:none;}
/* ============================================================================
Reset
============================================================================ */
html {box-sizing:border-box;-webkit-text-size-adjust:100%;}
*, ::before, ::after {box-sizing:inherit;}
::before, ::after {text-decoration:inherit;vertical-align:inherit;}
ul, ol {list-style:none;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
i, em, address {font-style:inherit;}
b, strong {font-weight:inherit;}
br, img {letter-spacing:0;}
img {vertical-align:bottom;}/* 余白対策 */
small, figcaption {font:inherit;}
sub, sup {font-size:63%;line-height:0;position:relative;vertical-align:baseline;}
sub {bottom:-0.25em;}
sup {top:-0.5em;}
/* ============================================================================
Setting
============================================================================ */
/* ----------------------------------------------------------------------------
basic Setting
---------------------------------------------------------------------------- */
/* html */
html {font-size:0.625em;} /* ~= 10px | for 'rem' Criteria. */
/* Img */
img {width:auto;max-width:100%;height:auto;}
/* svg */
svg:not(:root) {overflow:hidden;}
img[src$=".svg"],
img[src$=".svgz"] {width:100%;} /* for IE11 | ※親要素に幅指定必須 (Width specification is mandatory for parent element.) */
/* ---------------------------------
Text Base
--------------------------------- */
#unique--contents {
line-height:1.7;
color:#000;
font-family: 'Noto Serif JP', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', sans-serif;
font-size:1.6rem;
letter-spacing:0.05em;
}
.siteLeadTxt, .siteHeaderWrap, .pageThemeWrap, .siteFooterWrap,
.siteLeadTxt *, .siteHeaderWrap *, .pageThemeWrap *, .siteFooterWrap * { /* ※テンプレ sp.css 対策 | #unique--contents の「子要素」と「子要素内のすべての要素」を「font-family: inherit」にする。 */
font-family:inherit;
}
small, figcaption {
font-size:1.2rem;
letter-spacing:0.02em;
}
@media screen and (max-width: 1250px) { /*{belowTB}*/
/*#unique--contents {
font-size:1.5rem;
}*/
}
@media screen and (max-width: 736px) { /*{SP}*/
#unique--contents {
font-size:1.4rem;
}
small, figcaption {
font-size:1.12rem;
}
}
/* Font Family ////////// [ 游 family ] is for IE. */
.ptHeading,
.pageTheme [class*="hTxtStyh"],
.fontSerif,
.fontSerifBox * {
font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', serif;
}
.breadcrumbBox,
.fontSansSerif,
.fontSansSerifBox * {
font-family: 'Noto Sans JP', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', sans-serif;
}
/* Text */
.txtReset,
.txtResetBox * { /* = #unique--contents [font-family] */
color:inherit;
font-family: 'Noto Sans JP', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', sans-serif;
}
.txtSizeLLL {font-size:1.5em;}
.txtSizeLL {font-size:1.35em;}
.txtSizeL { font-size:1.15em;}
.txtSizeS { font-size:0.85em;}
.txtSizeSS {font-size:0.65em;}
.txtSizeSSS {font-size:0.475em;}
.txtColorReset {color:inherit;}
.txtColor01 {color:#000 !important;} /*黒系*/
.txtColor02 {color:#fff !important;} /*白系*/
.txtColor03 {color:#be3a36 !important;} /*赤系*/
.txtColor04 {color:#b17a00 !important;} /*黄系*/
.txtColor05 {color:#00479d !important;} /*青系*/
.emphasis {font-weight:bold;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.EmParentheses {margin-left:-0.5em;margin-right:-0.5em;}
.EmParenthesesL {margin-left:-0.5em;}
.EmParenthesesR {margin-right:-0.5em;}
.EmParenthesesH {margin-left:-0.25em;margin-right:-0.25em;}/* Half */
.EmParenthesesHL {margin-left:-0.25em;}
.EmParenthesesHR {margin-right:-0.25em;}
.ptHeading sub {font-size:0.55em;bottom:-0.1em;margin-right:0.1em;}
.ptHeading sup {font-size:0.55em;top:-0.6em;margin-right:0.1em;}
/* Small Text */
small.bl {display:block;line-height:1.4;margin-top:0.35em;}
small.bltr {display:block;line-height:1.4;margin-top:0.35em;text-align:right;}
small.bltr.gr {color:#767676;}
small .punc {margin-right:-0.5em;}/* punctuation mark（約物）｜※inline-block内の文末使用は不可。inline-block自身への使用は可。 */
.pageThemeWrapCaption,
.contCaption {display:block;clear:both;line-height:1.7;color:#202020;}
.contCaption {margin-top:0.5em;}
.pageThemeWrapCaption small,
.contCaption small {display:inline-block;}
@media screen and (max-width: 736px) { /*{SP}*/
small.bl {text-align:left;}
}
/* Imgcap | 例: ![]()
caption
![]()
caption
*/
.imgcapParent {position:relative;}
.imgcap, .imgcapkeep {
position: absolute;
right: 10px;
bottom: 5px;
line-height:1.4;
}
.imgcap > span, .imgcapkeep > span {display:inline-block;}
.imgcap.wh, .imgcapkeep.wh {color:#ffffff;text-shadow:0 0 3px rgba(0,0,0,0.3);}
.imgcap.bk, .imgcapkeep.bk {color:#202020;text-shadow:0 0 3px rgba(255,255,255,0.3);}
.imgcap.gr, .imgcapkeep.gr {color:#767676;text-shadow:0 0 3px rgba(255,255,255,0.3);}
.imgcap .wh, .imgcapkeep .wh {color:#ffffff;text-shadow:0 0 5px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,1), 0 0 2px rgba(0,0,0,1);}
.imgcap .bk, .imgcapkeep .bk {color:#202020;text-shadow:0 0 5px rgba(255,255,255,0.6), 0 0 4px rgba(255,255,255,0.7), 0 0 3px rgba(255,255,255,0.8), 0 0 2px rgba(255,255,255,0.9), 0 0 1px rgba(255,255,255,0.5), 1px 1px 0 rgba(255,255,255,0.5), -1px 1px 0 rgba(255,255,255,0.5), 1px -1px 0 rgba(255,255,255,0.5), -1px -1px 0 rgba(255,255,255,0.5);}
.imgcap .gr, .imgcapkeep .gr {color:#767676;text-shadow:0 0 5px rgba(255,255,255,0.6), 0 0 4px rgba(255,255,255,0.7), 0 0 3px rgba(255,255,255,0.8), 0 0 2px rgba(255,255,255,0.9), 0 0 1px rgba(255,255,255,0.5), 1px 1px 0 rgba(255,255,255,0.5), -1px 1px 0 rgba(255,255,255,0.5), 1px -1px 0 rgba(255,255,255,0.5), -1px -1px 0 rgba(255,255,255,0.5);}
@media screen and (max-width: 736px) { /*{SP}*/
.imgcap {display:block;clear:both;padding:0.3em 0.5em 0;position:static;right:auto;bottom:0;text-align:left;}
.imgcap.wh,
.imgcap.bk,
.imgcap.gr,
.imgcap > span {display:block;margin:0.3em 0 0;color:#555 !important;text-shadow:none !important;}
}
/* Symbol List */
.symList-kome {display:block !important;}
.symList-kome .symItem {display:table;width:100%;clear:both;}
.symList-kome .sym {display:table-cell;white-space:nowrap;padding-right:0.25em;}
.symList-kome .sym + span {display:table-cell;width:100%;}
.symList-kome .legendBox {margin-top:0.2em;margin-bottom:0.2em;}
.symList-kome .legendBox i {display:inline-block;margin-right:0.5em;}
.symList-kome .legendBox img {vertical-align:middle;line-height:1;margin-right:4px; margin-top:-3px; height: 1em;}
/* ---------------------------------
Link
--------------------------------- */
a,
a .inbl {color:inherit;text-decoration:none;}
/* ----- 汎用：文字色青・下線付き ----- */
a.generalLinkText, .generalLinkText a {color:#00479d !important;text-decoration:underline;}
a.generalLinkUnderline, .generalLinkUnderline a,
a.generalLinkUnderline .inbl, .generalLinkUnderline a .inbl {text-decoration:underline;}
/* ----- 汎用：hover時_下線付き ----- */
a.generalLinkHoverUnderline:hover, .generalLinkHoverUnderline a:hover,
a.generalLinkHoverUnderline:hover .inbl, .generalLinkHoverUnderline a:hover .inbl {text-decoration:underline !important;}
/* ----- 汎用：hover時_透過フェード ----- */
.hover, .hoverBox a, a .hoverItem {transition:opacity 0.3s;}
.hover:hover,
.hoverBox a:hover,
a:hover .hoverItem {opacity:0.65;}
/* ----------------------------------------------------------------------------
Display
---------------------------------------------------------------------------- */
@media print, screen and (min-width: 1251px) { /*{overPC}*/
.TBSP, .TB, .SP { display:none;}
.PCTB, .PC { display:inherit;}
.PC_inbl { display:inline-block !important;}
.PC_bl { display:block !important;}
.PC_none { display:none !important;}
}
@media screen and (min-width: 737px) and (max-width: 1250px) {/*{TB}*/
.PC, .SP { display:none;}
.PCTB, .TBSP, .TB { display:inherit;}
.TB_inbl { display:inline-block !important;}
.TB_bl { display:block !important;}
.TB_none { display:none !important;}
}
@media screen and (max-width: 736px) { /*{SP}*/
.PCTB, .PC, .TB { display:none;}
.TBSP, .SP { display:inherit;}
.SP_inbl { display:inline-block !important;}
.SP_bl { display:block !important;}
.SP_none { display:none !important;}
}
/* ----------------------------------------------------------------------------
etc
---------------------------------------------------------------------------- */
.clearfix::after {content:"";display:block;clear:both;}
.clear{clear:both !important}
.dispNone{display:none;}
.dispInline{display:inline;}
.inbl{display:inline-block;}
.bl{display:block;}
.noWrap{white-space:nowrap;}
.tj{text-align:justify !important;text-justify:inter-ideograph !important;/* for IE */}.tj *{display:inline !important;}
.tc{text-align:center !important}.tl{text-align:left !important}.tr{text-align:right !important}
.fl{float:left !important}.fr{float:right !important}.fn{float:none !important}
/* print */
.pageBreakBefore {page-break-before:always;}
.pageBreakAfter {page-break-after:always;}
.pageBreakInsideAvoid {page-break-inside:avoid !important;}
/* letterSpacing */
.lettsp0 {letter-spacing: 0 !important;}
.lettsp005 {letter-spacing: 0.05em !important;}
.lettsp01 {letter-spacing: 0.1em !important;}
.lettsp015 {letter-spacing: 0.15em !important;}
.lettsp02 {letter-spacing: 0.2em !important;}
/* margin */
.mtAuto {margin-top: auto !important} .mrAuto {margin-right: auto !important} .mbAuto {margin-bottom: auto !important} .mlAuto {margin-left: auto !important}
.mt01em {margin-top: 0.1em !important} .mr01em {margin-right: 0.1em !important} .mb01em {margin-bottom: 0.1em !important} .ml01em {margin-left: 0.1em !important}
.mt02em {margin-top: 0.2em !important} .mr02em {margin-right: 0.2em !important} .mb02em {margin-bottom: 0.2em !important} .ml02em {margin-left: 0.2em !important}
.mt03em {margin-top: 0.3em !important} .mr03em {margin-right: 0.3em !important} .mb03em {margin-bottom: 0.3em !important} .ml03em {margin-left: 0.3em !important}
.mt04em {margin-top: 0.4em !important} .mr04em {margin-right: 0.4em !important} .mb04em {margin-bottom: 0.4em !important} .ml04em {margin-left: 0.4em !important}
.mt05em {margin-top: 0.5em !important} .mr05em {margin-right: 0.5em !important} .mb05em {margin-bottom: 0.5em !important} .ml05em {margin-left: 0.5em !important}
.mt06em {margin-top: 0.6em !important} .mr06em {margin-right: 0.6em !important} .mb06em {margin-bottom: 0.6em !important} .ml06em {margin-left: 0.6em !important}
.mt07em {margin-top: 0.7em !important} .mr07em {margin-right: 0.7em !important} .mb07em {margin-bottom: 0.7em !important} .ml07em {margin-left: 0.7em !important}
.mt1em {margin-top: 1em !important} .mr1em {margin-right: 1em !important} .mb1em {margin-bottom: 1em !important} .ml1em {margin-left: 1em !important}
.mt2em {margin-top: 2em !important} .mr2em {margin-right: 2em !important} .mb2em {margin-bottom: 2em !important} .ml2em {margin-left: 2em !important}
.mt3em {margin-top: 3em !important} .mr3em {margin-right: 3em !important} .mb3em {margin-bottom: 3em !important} .ml3em {margin-left: 3em !important}
.mt4em {margin-top: 4em !important} .mr4em {margin-right: 4em !important} .mb4em {margin-bottom: 4em !important} .ml4em {margin-left: 4em !important}
.mt5em {margin-top: 5em !important} .mr5em {margin-right: 5em !important} .mb5em {margin-bottom: 5em !important} .ml5em {margin-left: 5em !important}
.mt0 {margin-top: 0 !important} .mr0 {margin-right: 0 !important} .mb0 {margin-bottom: 0 !important} .ml0 {margin-left: 0 !important}
.mt5 {margin-top: 5px} .mr5 {margin-right: 5px} .mb5 {margin-bottom: 5px} .ml5 {margin-left: 5px}
.mt10 {margin-top: 10px} .mr10 {margin-right: 10px} .mb10 {margin-bottom: 10px} .ml10 {margin-left: 10px}
.mt15 {margin-top: 15px} .mr15 {margin-right: 15px} .mb15 {margin-bottom: 15px} .ml15 {margin-left: 15px}
.mt20 {margin-top: 20px} .mr20 {margin-right: 20px} .mb20 {margin-bottom: 20px} .ml20 {margin-left: 20px}
/* padding */
.ptAuto {padding-top: auto !important} .prAuto {padding-right: auto !important} .pbAuto {padding-bottom: auto !important} .plAuto {padding-left: auto !important}
.pt01em {padding-top: 0.1em !important} .pr01em {padding-right: 0.1em !important} .pb01em {padding-bottom: 0.1em !important} .pl01em {padding-left: 0.1em !important}
.pt02em {padding-top: 0.2em !important} .pr02em {padding-right: 0.2em !important} .pb02em {padding-bottom: 0.2em !important} .pl02em {padding-left: 0.2em !important}
.pt03em {padding-top: 0.3em !important} .pr03em {padding-right: 0.3em !important} .pb03em {padding-bottom: 0.3em !important} .pl03em {padding-left: 0.3em !important}
.pt04em {padding-top: 0.4em !important} .pr04em {padding-right: 0.4em !important} .pb04em {padding-bottom: 0.4em !important} .pl04em {padding-left: 0.4em !important}
.pt05em {padding-top: 0.5em !important} .pr05em {padding-right: 0.5em !important} .pb05em {padding-bottom: 0.5em !important} .pl05em {padding-left: 0.5em !important}
.pt06em {padding-top: 0.6em !important} .pr06em {padding-right: 0.6em !important} .pb06em {padding-bottom: 0.6em !important} .pl06em {padding-left: 0.6em !important}
.pt07em {padding-top: 0.7em !important} .pr07em {padding-right: 0.7em !important} .pb07em {padding-bottom: 0.7em !important} .pl07em {padding-left: 0.7em !important}
.pt1em {padding-top: 1em !important} .pr1em {padding-right: 1em !important} .pb1em {padding-bottom: 1em !important} .pl1em {padding-left: 1em !important}
.pt2em {padding-top: 2em !important} .pr2em {padding-right: 2em !important} .pb2em {padding-bottom: 2em !important} .pl2em {padding-left: 2em !important}
.pt3em {padding-top: 3em !important} .pr3em {padding-right: 3em !important} .pb3em {padding-bottom: 3em !important} .pl3em {padding-left: 3em !important}
.pt4em {padding-top: 4em !important} .pr4em {padding-right: 4em !important} .pb4em {padding-bottom: 4em !important} .pl4em {padding-left: 4em !important}
.pt5em {padding-top: 5em !important} .pr5em {padding-right: 5em !important} .pb5em {padding-bottom: 5em !important} .pl5em {padding-left: 5em !important}
.pt0 {padding-top: 0 !important} .pr0 {padding-right: 0 !important} .pb0 {padding-bottom: 0 !important} .pl0 {padding-left: 0 !important}
.pt5 {padding-top: 5px} .pr5 {padding-right: 5px} .pb5 {padding-bottom: 5px} .pl5 {padding-left: 5px}
.pt10 {padding-top: 10px} .pr10 {padding-right: 10px} .pb10 {padding-bottom: 10px} .pl10 {padding-left: 10px}
.pt15 {padding-top: 15px} .pr15 {padding-right: 15px} .pb15 {padding-bottom: 15px} .pl15 {padding-left: 15px}
.pt20 {padding-top: 20px} .pr20 {padding-right: 20px} .pb20 {padding-bottom: 20px} .pl20 {padding-left: 20px}
/* ============================================================================
AddParts
============================================================================ */
/* generalItem_btn | 汎用ボタン
-------------------------------------------------------
- クラス名に generalItem_btn を含む場合（a要素にクラスを付ける前提。）
- 例： デフォルト
- 例： テキストの末尾にarrow
- 例： ボタン右端に固定したarrow
- 例： デフォルト(div+500px)
---------------------------------------------------- */
[class*="generalItem_btn"],
[class*="generalItem_btn"] .inbl {
text-decoration:none !important;
}
[class*="generalItem_btn"] {
display:block;
position:relative;
width:95%;
max-width:300px;
line-height:1.1;
color:#fff;
font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', serif;
font-size:1.6rem;
text-align:center;
letter-spacing:0;
background:linear-gradient(to bottom, #555 0%, #222 100%);
margin:0 auto;
padding:19px 15px;
border-radius: 3px;
}
[class*="generalItem_btn"] .kana {
letter-spacing: -0.08em;
}
/* hover */
[class*="generalItem_btn"][href] {
opacity: 1;
transition: opacity 0.3s;
}
[class*="generalItem_btn"][href]:hover {
opacity: 0.65;
}
@media print, screen and (min-width: 737px) { /*{overTB}*/
/* btn000 */
[class*="generalItem_btn"].btn500 {
max-width:500px;
font-size:1.65rem;
padding-top:24px;
padding-bottom:24px;
}
}
@media screen and (max-width: 736px) { /*{SP}*/
[class*="generalItem_btn"] {
max-width:430px;
font-size:1.5rem;
letter-spacing:0.02em;
padding:22px 3%;
}
}
@media screen and (max-width: 480px) { /*{SPs}*/
[class*="generalItem_btn"] {
max-width:270px;
font-size:1.2rem;
letter-spacing:0;
padding:20px 3%;
}
}
/* 「generalItem_btnArrInline」の場合（テキストの末尾にarrow）
--------------------------------- */
.generalItem_btnArrInline {
display: block;
padding: 19px 25px 19px 15px;
}
.generalItem_btnArrInline > * {
display: inline;
vertical-align: middle;
}
.generalItem_btnArrInline .icoArr {
display: inline-block;
width: 6px;
height: 6px;
overflow: hidden;
line-height: 0;
margin: auto -10px auto 10px;
}
.generalItem_btnArrInline .icoArr::after {
content: "";
display: inline-block;
line-height: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 0 3px 5px;
border-color: transparent transparent transparent #fff;
}
/* 「generalItem_btnArrFlex」の場合（ボタン右端に固定したarrow）
--------------------------------- */
.generalItem_btnArrFlex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 19px 15px 19px 30px;
}
.generalItem_btnArrFlex > * {
width: calc(100% - 15px);
}
.generalItem_btnArrFlex .icoArr {
width: 6px;
height: 6px;
overflow: hidden;
line-height: 0;
}
.generalItem_btnArrFlex .icoArr::after {
content: "";
display: block;
line-height: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 0 3px 5px;
border-color: transparent transparent transparent #fff;
}
@media screen and (max-width: 736px) { /*{SP}*/
.generalItem_btnArrFlex {
padding: 19px 15px;
}
}
/* ============================================================================
AddStyle
============================================================================ */
/* SiteUniqueZone.
---------------------------------------------------- */
#unique--contents {
animation: fadeIn 1.5s ease 0s 1 normal;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
/* ***************************************************************************************************
BASE
*************************************************************************************************** */
/* ============================================================================
outerWide.
-------------------------------------------------------------------------------
ヘッダー、ページテーマ、フッター、コンテナ、コンテンツ類の初期値設定。
============================================================================ */
/* ---------------- margin setting */
/* SITE */
.siteHeader,
/* PAGE_THEME_WRAP */
.pageThemeWrapFooter,
.pageThemeWrapCaption,
/* HEADER_FOOTER */
.siteFooterUnit,
/* PAGE_CONTENTS */
.breadcrumbBox,
.pageThemeHeader,
/* CONTAINER */
.container,
.contbox,
[class*="sizeContentWide"] {
margin: 0 auto;
}
/* ---------------- width setting */
.pageTheme {
width: 100%;
}
.pageThemeWrapFooter,
.siteFooterUnit {
width: 100%;
max-width: 1200px;
}
.siteHeader,
.breadcrumbBox {
width: 97%;
max-width: 1200px;
}
.container {
width: 94%;
max-width: 1200px;
}
.pageThemeHeader,
.pageThemeWrapCaption,
.contbox {
width: 94%;
max-width: 1000px;
}
/* OVERWRITE */ /* 上書き指定の為必ず最後に記述する。 */
.sizeContentWideL {
width: 100%;
max-width: 1600px;
/*background: magenta;*/
}
.sizeContentWideM {
width: 97%;
max-width: 1200px;
/*background: cyan;*/
}
.sizeContentWideS {
width: 94%;
max-width: 1000px;
/*background: lime;*/
}
/* ---------------- other setting */
/*.sizeDecoWideMax {
display:block;
clear:both;
margin:0 auto;
padding-top:1.25em;
padding-bottom:1.25em;
}*/
@media screen and (max-width: 736px) { /*{SP}*/
.breadcrumbBox {
width: 96%;
}
.siteHeader,
.pageThemeHeader,
.pageThemeWrapCaption,
.contbox {
width: 94%;
}
/* OVERWRITE */ /* 上書き指定の為必ず最後に記述する。 */
.sizeContentWideL {
width: 100%;
}
.sizeContentWideM,
.sizeContentWideS {
width: 94%;
}
}
/* ---------------------------- reset */ /* contbox類の入れ子は100%にリセットする。 */
.contbox .contbox,
.contbox [class*="sizeContentWide"],
[class*="sizeContentWide"] .contbox {
width: 100%;
max-width: none;
}
/* ============================================================================
wrapper_Box_Parts.
-------------------------------------------------------------------------------
ラッパー類やモジュールパーツの設定。
============================================================================ */
/* Wrapper and Box Element.
------------------------------------------------------------------------ */
/* pageThemeWrap
----------------------- */
.pageThemeWrap {
}
/* pageTheme
----------------------- */
/*.pageTheme ~ .pageTheme {
margin-top: 20px;
}*/
.pageThemeHeader {
}
/* container
----------------------- */
.container { /* 初期値：padding: 40px 0; */
/*margin: 50px auto;*/
padding: 50px 0;
}
.containerPaddingNarrow { /* 初期値：padding: 12px 0 !important; ｜ HTMLでの指定は .container と共に指定する。単独指定はしない。 */
padding: 25px 0;
}
.container + .container {
margin-top: 50px;
}
/* contbox
----------------------- */
.contbox {
}
.contbox ~ .contbox {
}
/* sentens
----------------------- */
.sentensBox + .sentensBox {
margin-top: 40px;
}
.sizeSentensMaxWidth {
width: 100%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 736px) { /*{SP}*/
/* container
----------------------- */
.container {
padding: 30px 0;
}
.containerPaddingNarrow {
padding: 15px 0;
}
.container + .container {
margin-top: 30px;
}
/* contbox
----------------------- */
.contbox {
}
.contbox ~ .contbox {
}
/* sentens style.
----------------------- */
.sentensBox + .sentensBox {
margin-top: 30px;
}
}
/* Heading Elements.
------------------------------------------------------------------------ */
/* htxt
---------------------------------------------------- */
.ptHeading .hTxt,
[class*="hTxtStyh"] {
display: block;
line-height: 1.35;
font-feature-settings: "palt";
letter-spacing: 0.05em;
padding: 0;
}
.ptHeading .hTxt .kana,
[class*="hTxtStyh"] .kana {
letter-spacing: -0.05em;
margin-right: 0.05em;
}
/* -- */
h2.ptHeading .hTxt,
.hTxtStyh2 {
font-size: 3.6rem;
text-align: center;
margin-bottom: 0;
}
h3.ptHeading .hTxt,
.hTxtStyh3 {
color: #b17a00;
font-size: 3.0rem;
letter-spacing: 0.12em;
margin-bottom: 0.8em;
display: flex;
align-items: center;
text-align: center;
}
h3.ptHeading .hTxt::after,
h3.ptHeading .hTxt::before{
content: "";
height: 1px;
flex-grow: 1;
background-color: #b17a00;
}
h3.ptHeading .hTxt::before{
margin-right: 1rem;
}
h3.ptHeading .hTxt::after{
margin-left: 1rem;
}
h4.ptHeading .hTxt,
.hTxtStyh4 {
font-size: 2.6rem;
margin-bottom: 1em;
}
h5.ptHeading .hTxt,
h6.ptHeading .hTxt,
.hTxtStyh5,
.hTxtStyh6 {
font-size: 2.0rem;
margin-bottom: 0.75em;
}
@media screen and (max-width: 1250px) { /*{belowTB}*/
h2.ptHeading .hTxt,
.hTxtStyh2 {
font-size: 3rem;
}
h3.ptHeading .hTxt,
.hTxtStyh3 {
font-size: 2.5rem;
}
h4.ptHeading .hTxt,
.hTxtStyh4 {
font-size: 2.2rem;
}
h5.ptHeading .hTxt,
h6.ptHeading .hTxt,
.hTxtStyh5 {
font-size: 1.7rem;
}
}
@media screen and (max-width: 736px) { /*{SP}*/
h2.ptHeading .hTxt,
.hTxtStyh2 {
font-size: 2.65rem;
}
h3.ptHeading .hTxt,
.hTxtStyh3 {
font-size: 2.1rem;
letter-spacing: 0.1em;
}
h4.ptHeading .hTxt,
.hTxtStyh4 {
font-size: 1.8rem;
}
h5.ptHeading .hTxt,
h6.ptHeading .hTxt,
.hTxtStyh5 {
font-size: 1.5rem;
}
}
@media screen and (max-width: 480px) { /*{SPs}*/
h2.ptHeading .hTxt,
.hTxtStyh2 {
font-size: 2.1rem;
}
h3.ptHeading .hTxt,
.hTxtStyh3 {
font-size: 1.8rem;
}
h4.ptHeading .hTxt,
.hTxtStyh4 {
font-size: 1.65rem;
}
h5.ptHeading .hTxt,
h6.ptHeading .hTxt,
.hTxtStyh5 {
font-size: 1.45rem;
margin-bottom: 0.6em;
}
h3.ptHeading .hTxt,
.hTxtStyh3 {
margin-bottom: 0.6em;
}
h3.ptHeading .hTxt::after,
.hTxtStyh3::after {
margin-top: 0.7em;
}
}
@media screen and (max-width: 320px) { /*{SPss}*/
h2.ptHeading .hTxt,
.hTxtStyh2 {
font-size: 2rem;
}
}
/* ============================================================================
FRAMEWORK | HEADER
============================================================================ */
/* ----------------------------------------------------------------------------
siteHeaderWrap
---------------------------------------------------------------------------- */
/* siteHeaderLogoWrap ｜ ※物件名の長さによって幅を適宜調節すること。
---------------------------------------------------- */
.siteHeader .siteHeaderLogoWrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
height: 46px;
}
.siteHeader .siteHeaderLogoWrap .brandLogo {
width: 185px;
line-height: 1;
}
@media screen and (max-width: 736px) { /*{SP}*/
.siteHeader .siteHeaderLogoWrap {
height: 30px;
}
.siteHeader .siteHeaderLogoWrap {
width: 160px;
}
}
/* ============================================================================
FRAMEWORK | PAGE_THEME
============================================================================ */
/* breadcrumbWrap
------------------------------------------------------------------------ */
.breadcrumbWrap {
width: 100%;
border: 0 solid #eee;
}
.breadcrumbBox {
display: flex;
flex-wrap: wrap;
line-height: 1.25;
font-size: 1.2rem;
letter-spacing: 0.02em;
margin: 0 auto;
padding: 0.4em 0;
}
.breadcrumbBox li {
margin: 1px 0;
}
.breadcrumbBox li:not(:last-child)::after {
content: "＞";
display: inline-block;
line-height: 1;
margin: 0 5px;
transform: scaleX(0.7);
}
.DEVICEPC .breadcrumbBox li a[href]:hover {
text-decoration: underline;
}
@media print, screen and (min-width: 737px) { /*{overTB}*/
/*.breadcrumbWrap {
position: absolute; // 後続の要素と重ねる場合「.breadcrumbWrap」に[position: absolute;]をかける。
z-index: 1;
background: rgba(0,0,0,0.25);
}*/
/* 特定のページだけ後続の要素と重ねない時用 */
.breadcrumbWrap.posStatic {
position: static;
}
/* 色設定 */
.breadcrumbWrap.wh,
.breadcrumbWrap.wh li:not(:last-child)::after {
color: #ffffff; text-shadow:0 0 5px rgba(0,0,0,0.55), 0 0 4px rgba(0,0,0,0.55), 0 0 3px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.9);
}
.breadcrumbWrap.bk,
.breadcrumbWrap.bk li:not(:last-child)::after {
color: #202020; text-shadow:0 0 5px rgba(255,255,255,0.5), 0 0 4px rgba(255,255,255,0.6), 0 0 3px rgba(255,255,255,0.7), 0 0 2px rgba(255,255,255,0.8), 0 0 1px rgba(255,255,255,0.4), 1px 1px 0 rgba(255,255,255,0.4), -1px 1px 0 rgba(255,255,255,0.4), 1px -1px 0 rgba(255,255,255,0.4), -1px -1px 0 rgba(255,255,255,0.4);
}
.breadcrumbWrap.wh li:not(:last-child)::after,
.breadcrumbWrap.bk li:not(:last-child)::after {
opacity: 0.8;
}
}
@media screen and (max-width: 736px) { /*{SP}*/
.breadcrumbWrap {
background: #fff;
/*border-width: 0 0 1px;*/
}
.noGnavP .breadcrumbWrap {
border-width: 0 0 1px;
}
.breadcrumbBox {
font-size: 1rem;
}
.breadcrumbBox li {
margin: 3px 0;
}
.breadcrumbBox li:not(:last-child)::after {
width: 6px;
height: 6px;
}
}
/* pageThemeWrapFooter
------------------------------------------------------------------------ */
/*.pageThemeWrapFooter {
background: #fff;
padding: 1.5em 0;
}*/
/* pageThemeWrapCaption
---------------------------------------------------- */
.pageThemeWrapCaption {
padding-top: 2em;
padding-bottom: 2em;
}
/* ============================================================================
FRAMEWORK | FOOTER
============================================================================ */
/* ----------------------------------------------------------------------------
siteFooterWrap
---------------------------------------------------------------------------- */
.siteFooterWrap {
}
/* siteFooter
------------------------------------------------------------------------ */
.siteFooter {
padding: 50px 0;
}
.siteFooterUnitTtl {
line-height: 1.35;
color: #b17a00;
font-size: 1em;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 3px solid #ca9728;
}
.siteFooterUnit {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
@media screen and (max-width: 1050px) { /*{belowTBs}*/
.siteFooterUnitTtl {
font-size: 1.05em;
}
}
@media screen and (max-width: 736px) { /*{SP}*/
.siteFooter {
padding: 30px 0;
}
.siteFooterUnitTtl {
margin-bottom: 0;
}
}
/* siteContact
---------------------------------------------------- */
.siteContact {
width: 48%;
line-height: 1.5;
letter-spacing: 0.02em;
font-size: 0.875em;
}
.siteContact > * {
padding: 1px 0;
}
.siteContact a:hover .value,
.siteContact .value a:hover {
color:#00479d;
text-decoration: underline;
}
/* nameBox
----------------------- */
.siteContact .nameBox {
width: 100%;
line-height: 1.2;
font-family: 'Noto Sans JP', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', sans-serif;
font-size: 1.25em;
font-weight: 700;
margin-bottom: 10px;
}
.siteContact:nth-of-type(2) .nameBox {
font-size: 1.1em;
}
.siteContact:nth-of-type(2) .nameBox .label {
display: block;
color: #b17a00;
font-size: 0.9091em;
font-weight: normal;
margin: 0 -0.5em 0.2em;
}
.siteContact .nameBox .name,
.siteContact .nameBox .post {
display: inline-block;
}
/* addBox
----------------------- */
.siteContact .addBox .zip,
.siteContact .addBox .add {
display: inline-block;
}
/* timeBox
----------------------- */
.siteContact .timeBox {
display: flex;
flex-wrap: nowrap;
width: 100%;
}
.siteContact .timeBox .closed {
display: inline-block;
margin: 0 -0.5em;
}
/* telBox
----------------------- */
.siteContact .telBox {
display: flex;
flex-wrap: nowrap;
width: 100%;
letter-spacing: 0.04em;
}
.siteContact:nth-of-type(1) .telBox {
font-size: 1.15em;
font-weight: 700;
margin-top: 10px;
margin-bottom: 10px;
}
.siteContact:nth-of-type(2) .telBox {
font-size: 1em;
font-weight: normal;
}
/* mailBox , hpBox
----------------------- */
.siteContact .mailBox,
.siteContact .hpBox {
display: flex;
flex-wrap: nowrap;
align-items: center;
width: 100%;
font-size: 0.85em;
}
.siteContact .mailBox .value img {
width: 120%;
max-width: none;
height: 120%;
vertical-align: middle;
line-height: 1;
}
.IE11BROWSER .siteContact .mailBox .value img { /* for IE | JS内でIE用の画像に差し替え有 */
height: 12px;
}
@media screen and (max-width: 1050px) { /*{belowTBs}*/
.siteContact {
line-height: 1.35;
}
.siteContact > * {
padding: 3px 0;
}
/* addBox
----------------------- */
.siteContact .addBox .zip,
.siteContact .addBox .add {
display: block;
}
}
@media screen and (max-width: 736px) { /*{SP}*/
.siteContact {
width: 100%;
font-size: 1em;
padding: 17px 0;
}
.siteContact + .siteContact {
border-top: 1px solid #eee;
}
.siteContact:nth-of-type(1) .telBox {
font-size: 1.3em;
margin-top: 5px;
margin-bottom: 5px;
}
}
@media screen and (max-width: 480px) { /*{SPs}*/
.siteContact {
font-size: 0.9em;
}
.siteContact:nth-of-type(2) .nameBox .label {
font-size: 1em;
}
}
@media screen and (max-width: 340px) { /*{MinorBreakpoint}*/
.siteContact {
font-size: 3.71vw;
}
.IE11BROWSER .siteContact .mailBox .value img { /* for IE | JS内でIE用の画像に差し替え有 */
height: 0.99em;
}
}
/* copyrightWrap
------------------------------------------------------------------------ */
.copyrightWrap {
width: 100%;
padding: 30px 0 50px;
border-top: 1px solid #eee;
}
.siteFooterLogo {
display: block;
width: 70%;
max-width: 233px;
margin: 0 auto 20px;
}
.copyright {
display: block;
width: 94%;
line-height: 1.2;
color: #333;
font-size: 1rem;
text-align: center;
letter-spacing: 0.07em;
margin: 0 auto;
}
/* lastPagetop
------------------------------------------------------------------------ */
.lastPagetop {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
width: 100%;
max-width: calc(1200px + (40px * 2) + 60px); /* = [コンテンツの一番広い幅 + (ボタン幅*2) + α] */
overflow: hidden;
margin: auto;
padding: 5px;
pointer-events: none; /* ポインタイベントの設定：none */
}
.lastPagetop a {
display: block;
position: relative;
width: 40px;
height: 40px;
line-height: 1;
color: #fff;
text-decoration: none;
background: #e2e2e2 url("../img/share/ico_pagetop.svg") center center / contain no-repeat;
margin: 0 0 0 auto;
border-radius: 100px;
border: 1px solid transparent;
opacity: 1;
pointer-events: auto; /* ポインタイベントの設定：auto */
}
.lastPagetop a > span {
display: block;
overflow: hidden;
font-size: 0.5rem;
text-align: left;
text-indent: 100%;
letter-spacing: 0;
white-space: nowrap;
}
/* hover */
.lastPagetop a {
transition: opacity 0.3s, border 0.3s;
}
.lastPagetop:hover a {
opacity: 0.8;
border-color: #d6d6d6;
}
/* ***************************************************************************************************
printOnly
*************************************************************************************************** */
.printonly {
display:none;
}
@media print { /*{printOnly}*/
.screenonly {
display:none;
}
}