@charset "utf-8";
/* =======================================================================================
@import | これは先頭に記述する（これより上にスタイル記述不可）
======================================================================================= */
/* ----------------------------------------------------------------------------
* 追加フォント
-------------------------------------------------------------------------------
* [ EB Garamond (400 to 800) ]
* font-family: "EB Garamond", serif;
*/
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
body {
--site-en : 'EB Garamond', serif;
}
/* font-family: var(--index-en); */
.tk_gNav li a {
position: relative;
}
.tk_gNav li.current a::after {
display: block;
content: '';
width: 100%;
height: 4px;
background: #08a5e3;
position: absolute;
bottom: 0;
left: 0;
opacity: 0;
transition: .3s ease;
}
/* ------------------------------------------------------------------------
color, formatBg setting
------------------------------------------------------------------------ */
body {
--site-themeColor : 178, 186, 210 ; /* #b2bad2 Blue-gray */
--site-subColor : 109, 124, 121 ; /* #498784 emeraldGreen */
--site-accentColor : 24, 31, 50 ; /* 181f32 darkblue */
--site-accentColorText : 255, 255, 255 ; /* #FFF wh */
/*
--site-fontFamily : "Zen Old Mincho", 'Noto Serif JP', '游明朝', 'Yu Mincho', serif;
--site-fontFamily-en01 : 'Crimson Text', serif;
--site-fontFamily-en02 : "Oswald", sans-serif;
*/
}
main {
background: url("../img/share/bg.jpg") top center / 100% auto repeat-y;
}
.pt-contentsLink li.navLoc a::after { background-image: url("../img/index/nav_p_01.jpg");}
.pt-contentsLink li.navRoo a::after { background-image: url("../img/index/nav_p_03.jpg");}
.pt-contentsLink li.navRoo a::before { content: "外観完成予想図";}
/* ------------------------------------------------------------------------
header スマホ時 コンバージョンボタンにプチインフォ挿入
------------------------------------------------------------------------ */
.tk_hNavWrap .tk_hNav .reqNav a {
position: relative;
}
/* .tk_hNavWrap .tk_hNav .reqNav a::after {
content: "全住戸プラン送付";
position: absolute;
bottom: 0%;
display: block;
width: 100%;
color: #FFF;
font-size: 0.86em;
background: rgba(var(--site-accentColor),1);
background: #522716;
padding: 1px;
}*/
@media print, screen and (min-width: 600.02px) {
/*.tk_hNavWrap .tk_hNav .reqNav a::after {
display: none;
}*/
}
/*@media print, screen and (min-width: 600.02px) and (max-width: 1050px) {
.tk_hNavWrap .tk_hNav .reqNav a::after {
bottom: 100%;
}
}
@media print, screen and (min-width: 1050.02px) {
.tk_header {
padding-right: 0px;
}
.tk_hNavWrap,
.tk_hNavWrap nav {
display: flex;
align-items: center;
height: 100%;
}
.tk_hNavWrap .tk_hNav,
.tk_hNavWrap .tk_hNav .reqNav {
height: 100%;
}
.tk_hNavWrap .tk_hNav .reqNav a {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
padding: 0px;
}
.tk_hNavWrap .tk_hNav .reqNav a::after {
position: relative;
font-size: 0.6em;
}
}*/
/* ***************************************************************************************************
@KEYFRAMES
*************************************************************************************************** */
/* 光（ループ） */
a.shineLoopBtn {
position: relative;
overflow: hidden;
}
a.shineLoopBtn::after {
content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 3; width: 200%; height: 110%;
background: linear-gradient(-75deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 90%);
transform: translateX(-100%) skewX(-45deg);
animation: 4.5s ease 0s infinite both anime_shineLoopBtn;
}
a.shineLoopBtn > span.txt,
a.shineLoopBtn > .label {
position: relative;
z-index: 5;
}
a.shineLoopBtn > span.icoArr {
z-index: 2;
}
@keyframes anime_shineLoopBtn {
0% { transform: translateX(-100%) skewX(-45deg);}
75%,100% { transform: translateX(100%) skewX(-45deg);}
}
/* btn
-------------------------------------------------------------- */
/* header */
@media print, screen and (min-width: 1050px) {
/* オンライン付くのでサイズ調整 */
.tk_hNav li.reqNav:not(:nth-last-of-type(2)) a { width: 135px; }
.tk_hNav li.resNav a,
.tk_hNav li.resNav.onlineResNav a,
.tk_hNav li.boxNav a { width: 115px; }
.DEVICEPC .tk_hNav li[class*="Nav"] a[href]::before{
content: "";
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
opacity: 1;
transition: opacity 0.3s ease;
}
.DEVICEPC .tk_hNav li[class*="Nav"] a .label {
position: relative;
z-index: 10;
}
.tk_hNav li.reqNav a, .tk_hNav li.boxNav a { background:#5e6f9a; }
.tk_hNav li.reqNav a::before, .tk_hNav li.boxNav a::before{
background: linear-gradient(to right, #1c2a4e 0%, transparent 50%, #1c2a4e 100%);
}
.tk_hNav li.resNav a, .tk_hNav li.boxNav a { background: #c25f77;; }
.tk_hNav li.resNav a::before, .tk_hNav li.boxNav a::before {
background: linear-gradient(to right, #6b0f25 0%, transparent 50%, #6b0f25 100%);
}
.tk_hNav li.resNav.onlineResNav a { background:#b99981; }
.tk_hNav li.resNav.onlineResNav a::before, .tk_hNav li.boxNav a::before {
background: linear-gradient(to right, #583d29 0%, transparent 50%, #583d29 100%);
}
/* hover */
.DEVICEPC .tk_hNav li.reqNav a[href]:hover, .tk_hNav li.boxNav a[href]:hover{background:#5e6f9a;}
.DEVICEPC .tk_hNav li.resNav a[href]:hover,.tk_hNav li.boxNav a[href]:hover { background: #c25f77;;}
.DEVICEPC .tk_hNav li.resNav.onlineResNav a[href]:hover { background:#b99981; }
.DEVICEPC .tk_hNav li.reqNav a[href]:hover::before,
.DEVICEPC .tk_hNav li.resNav a[href]:hover::before,
.DEVICEPC .tk_hNav li.resNav.onlineResNa a[href]:hover::before,
.tk_hNav li.boxNav a[href]:hover::before{ opacity: 0; }
}
@media screen and (max-width: 1049px) {
.tk_hNav li.reqNav a { background: #213975; }
.tk_hNav li.resNav a { background: #903349; }
.tk_hNav li.resNav.onlineResNav a { background: #8e5931; }
}
/* info */
.noticeWrap .noticeBtn.req a { background:#5e6f9a; }
.noticeWrap .noticeBtn.req a::after { background: linear-gradient(to right, #1c2a4e 0%, transparent 50%, #1c2a4e 100%); }
.noticeWrap .noticeBtn.res a { background:#bb7485; }
.noticeWrap .noticeBtn.res a::after { background: linear-gradient(to right, #6b1d30 0%, transparent 50%, #6b1d30 100%); }
.noticeWrap .noticeBtn.res.onlineResNav a { background: #bea490; }
.noticeWrap .noticeBtn.res.onlineResNav a::after { background: linear-gradient(to right, #473425 0%, transparent 50%, #473425 100%); }
/* pageTheme
--------------------------------- */
.pageTheme {
margin-top: 5em;
}
.pageTheme + .pageTheme {
margin-top: 8em;
}
section.pageTheme section {
margin-top: 5em;
}
/* pageThemeHeader
--------------------------------- */
.pageThemeHeader {
/*margin-bottom: 1.5em;*/
}
/* contbox
--------------------------------- */
.contbox {
max-width: 1260px;
width: 90%;
margin: 0 auto;
}
/* ptHeading
--------------------------------- */
.ptHeading {
width: 96%;
margin-right: auto;
margin-left: auto;
margin-bottom: 1.5em;
}
@media print, screen and (min-width: 1049.02px) {
[class*="Col"] .ptHeading {
text-align: left;
}
.ptHeading {
width: auto;
text-align: center;
margin-right: 0;
margin-left: 0;
}
}
/* heading
---------------------------------------------------- */
.ptHeading .heading,
[class*="headingSty"] {
--M-fluidFontSize-max-fontsize: 23;
--M-fluidFontSize-min-fontsize: 19;
--M-fluidFontSize-max-viewport: 1400;
--M-fluidFontSize-min-viewport: 430;
--M-fluidFontSize-fontSize: clamp( var(--M-fluidFontSize-min-fontsize) * .1rem, (var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - (var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport))), var(--M-fluidFontSize-max-fontsize) * .1rem );
display: block;
min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
line-height: 1.8;
color: inherit;
font-size: var(--M-fluidFontSize-fontSize);
text-align: center;
letter-spacing: 0.1em;
padding: 0;
}
h3.ptHeading .heading,
.headingSty3 {
--M-fluidFontSize-max-fontsize: 26;
--M-fluidFontSize-min-fontsize: 19;
margin-bottom: 1.2em;
}
h4.ptHeading .heading,
.headingSty4 {
--M-fluidFontSize-max-fontsize: 24;
--M-fluidFontSize-min-fontsize: 18;
margin-bottom: 1em;
}
h5.ptHeading .heading,
.headingSty5 {
--M-fluidFontSize-max-fontsize: 22;
--M-fluidFontSize-min-fontsize: 17;
margin-bottom: 1em;
}
h6.ptHeading .heading,
.headingSty6 {
--M-fluidFontSize-max-fontsize: 20;
--M-fluidFontSize-min-fontsize: 16;
margin-bottom: 1em;
}
@media screen and (max-width: 599px) { /*{belowSP}*/
.ptHeading .heading,
[class*="headingSty"] {
line-height: 1.8;
letter-spacing: .08em;
margin-bottom: 0.9em;
}
}
/* txtBox
--------------------------------- */
.txtBox {
width: 96%;
line-height: 1.8;
letter-spacing: 0.0em;
margin-right: auto;
margin-left: auto;
margin-bottom: 2em;
}
@media print, screen and (min-width: 1049.02px) {
.txtBox {
width: auto;
margin-right: 0;
margin-left: 0;
}
.ptHeading + .txtBox {
text-align: center;
}
[class*="Col"] .ptHeading + .txtBox {
text-align: left;
}
.txtBox:last-child {
margin-bottom: 0em;
}
}
/* Small Text */
small.bl,
small.bltr,
small.blPCtrSPtl {display:block;line-height:1.4;margin-top:.35em;}
small.bltr,
small.blPCtrSPtl {text-align:right;}
small .punc {margin-right:-.5em;}/* punctuation mark（約物）｜※inline-block内の文末使用は不可。inline-block自身への使用は可。 */
/* Imgcap | 例: ![]()
xxxxx
/ ![]()
xxxxx
*/
.imgcapParent {
position:relative;
}
.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: 599px) { /*{belowSP}*/
.imgcap {
position:static;
padding:0.3em 0.5em 0;
}
.imgcap.wh,
.imgcap.bk,
.imgcap.gr,
.imgcap > span {
display:block;
color:#555 !important;
text-shadow:none !important;
margin:0.3em 0 0;
}
}
/* 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;}
/* Caption Legend Wrap | 例: */
.capLegendWrap {
display:flex;
flex-wrap: wrap;
align-items:center;
line-height:1.4;
font-size:1rem;
margin-top:0.75em;
margin-bottom:0.75em;
}
.capLegendWrap .legUnit {
display:flex;
align-items:center;
margin: 0.175em 1.25em 0.175em 0;
}
.capLegendWrap .legItem,
.capLegendWrap .legCap {
display: inline-block;
line-height:inherit;
font-size:inherit;
}
.capLegendWrap [class*="iro"] {
width:2.25em;
height:0.95em;
margin-right: 0.2em;
border:1px solid rgba(0,0,0,0.2);
}
.capLegendWrap .iro1 {background:#c9c2b6;}
.capLegendWrap .iro2 {background:#dfd1cb;}
.capLegendWrap .iro3 {background:#cbd5e8;}
.capLegendWrap .iro4 {background:#d6ddce;}
@media print, screen and (min-width: 600px) { /*{overTB}*/
.capLegendWrap {
font-size: 1.1rem;
}
}
/* ---------------------------------
Link
--------------------------------- */
a,
a .inbl { /* ヘッダー、フッターに影響がでないように注意 */
color:inherit;
text-decoration:none;
}
/* ----- 汎用：文字色・下線 ----- */
a.txtLink,
.txtLink a {
color:#00479d !important;
text-decoration:underline !important;
}
a.txtLink:hover,
.txtLink a:hover {
text-decoration:none !important;
}
/* ----- 汎用：hover時_透過フェード ----- */
.hoverItem,
.hover a,
a.hover {
transition:opacity 0.15s ease-out;
}
.hoverItem:hover,
.hover a:hover,
a.hover:hover {
opacity:0.63;
}
/* Text */
.txtSizeInherit { font-size: inherit;}
.txtSizeLLLL { font-size: 1.8em;}
.txtSizeLLL { font-size: 1.5em;}
.txtSizeLL { font-size: 1.35em;}
.txtSizeL { font-size: 1.15em;}
.txtSizeMS { font-size: 0.95em;}
.txtSizeS { font-size: 0.85em;}
.txtSizeSS { font-size: 0.65em;}
.txtSizeSSS { font-size: 0.475em;}
.txtSize1rem { font-size: 1rem;}
.txtColorInherit { color: inherit;}
.txtColorBk { color: #000 !important;} /*黒系*/
.txtColorWh { color: #fff !important;} /*白系*/
.txtColorWh02 { color: #ddd !important;} /*白系*/
.txtColorGr {color: #767676 !important;} /*灰系*/
.txtColor01 { color: #8e0c0c !important;} /*暗赤系*/
.txtColor02 { color: #c7000a !important;} /*明赤系*/
.txtColor03 { color: #8a8c2b !important;} /*明黄系*/
.txtColor04 { color: #aa9477 !important;} /*鈍い黄系*/
/* ============================================================================
AddParts
============================================================================ */
/* generalItem_btn | 汎用ボタン
-------------------------------------------------------
- クラス名に generalItem_btn を含む場合（a要素にクラスを付ける前提。）
- 例： デフォルト
- 例： テキストの末尾にarrow
- 例： ボタン右端に固定したarrow
- 例： デフォルト(div+500px)
- icoArr の種類 「.tri=三角形」「.ku=くの字」
---------------------------------------------------- */
[class*="generalItem_btn"],
[class*="generalItem_btn"] .inbl {
text-decoration: none !important;
}
[class*="generalItem_btn"] {
display: block;
position: relative;
width: 95%;
max-width: none;
line-height: 1.15;
color: #fff;
font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', serif;
font-size: 1em;
text-align: center;
/*letter-spacing: 0;*/
background: linear-gradient(to bottom, #333 0%, #222 100%);
margin: 0 auto;
padding: 19px 5vw;
/*border-radius: 3px;*/
}
[class*="generalItem_btn"] .kana {
letter-spacing: -0.08em;
}
/* hover */
[class*="generalItem_btn"][href] {
border-radius: 5px;
opacity: 1;
box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
transition:box-shadow .18s ease-out, opacity 0.3s ease-out;
}
[class*="generalItem_btn"][href]:hover {
opacity: 0.85;
box-shadow: none;
}
@media print, screen and (min-width: 340px) { /*{overSPl}*/
[class*="generalItem_btn"] {
max-width: 360px;
font-size: 1.15em;
padding: 19px 15px;
}
}
@media print, screen and (min-width: 600px) { /*{overTB}*/
[class*="generalItem_btn"] {
font-size: 1em;
}
/* btn000 */
[class*="generalItem_btn"].btn500 {
max-width: 500px;
font-size: 1.1em;
padding-top: 24px;
padding-bottom: 24px;
}
}
/* 「generalItem_btnArrInline」の場合（テキストの末尾にarrow）（.tri=三角形/.ku=くの字）
--------------------------------- */
.generalItem_btnArrInline {
display: block;
padding: 19px 6vw 19px 5vw;
}
.generalItem_btnArrInline > * {
display: inline;
vertical-align: middle;
}
.generalItem_btnArrInline .icoArr {
display: inline-block;
position: relative;
width: 0.5em;
height: 0.5em;
line-height: 0;
}
.generalItem_btnArrInline .icoArr.tri {
transform: translateX(1.25vw);
}
.generalItem_btnArrInline .icoArr.tri::after {
content: "";
display: block;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0; width: 0; height: 0;
margin: 50% auto auto;
border-style: solid;
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent #fff;
transform: translateY(-50%);
}
.generalItem_btnArrInline .icoArr.tri.tri_t::after {
border-width: 0 5px 5px 5px;
border-color: transparent transparent #fff transparent;
}
.generalItem_btnArrInline .icoArr.tri.tri_b::after {
border-width: 5px 5px 0 5px;
border-color: #fff transparent transparent transparent;
}
.generalItem_btnArrInline .icoArr.ku {
transform: translateX(1.25vw) rotate(135deg);
}
.generalItem_btnArrInline .icoArr.ku.ku_t {
transform: translateX(1.25vw) rotate(45deg);
}
.generalItem_btnArrInline .icoArr.ku.ku_b {
transform: translateX(1.25vw) rotate(225deg);
}
.generalItem_btnArrInline .icoArr.ku::before,
.generalItem_btnArrInline .icoArr.ku::after {
content: "";
background: #fff;
position: absolute;
top: 0;
left: 0;
box-shadow: 0 0 0.5px 0 #fff;
}
.generalItem_btnArrInline .icoArr.ku::before {
width: 100%;
height: 1px;
}
.generalItem_btnArrInline .icoArr.ku::after {
width: 1px;
height: 100%
}
@media print, screen and (min-width: 340px) { /*{overSPl}*/
.generalItem_btnArrInline {
padding-left: 15px;
padding-right: 15px;
}
.generalItem_btnArrInline .icoArr.tri {
transform: translateX(6px);
}
.generalItem_btnArrInline .icoArr.ku {
transform: translateX(6px) rotate(135deg);
}
.generalItem_btnArrInline .icoArr.ku.ku_t {
transform: translateX(6px) rotate(45deg);
}
.generalItem_btnArrInline .icoArr.ku.ku_b {
transform: translateX(6px) rotate(225deg);
}
}
/* 「generalItem_btnArrFlex」の場合（ボタン右端に固定したarrow）（.tri:三角形/.ku:くの字）
--------------------------------- */
.generalItem_btnArrFlex {
display: flex;
justify-content: space-between;
align-items: center;
padding: 19px 5vw;
}
.generalItem_btnArrFlex > * {
flex: 1;
}
.generalItem_btnArrFlex .icoArr {
flex: 0 0.5em;
display: block;
position: relative;
width: 0.5em;
height: 0.5em;
line-height: 0;
}
.generalItem_btnArrFlex .icoArr.tri {
transform: translateX(1.25vw);
}
.generalItem_btnArrFlex .icoArr.tri::after {
content: "";
display: block;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0; width: 0; height: 0;
margin: 50% auto auto;
border-style: solid;
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent #fff;
transform: translateY(-50%);
}
.generalItem_btnArrFlex .icoArr.tri.tri_t::after {
border-width: 0 5px 5px 5px;
border-color: transparent transparent #fff transparent;
}
.generalItem_btnArrFlex .icoArr.tri.tri_b::after {
border-width: 5px 5px 0 5px;
border-color: #fff transparent transparent transparent;
}
.generalItem_btnArrFlex .icoArr.ku {
transform: translateX(1.25vw) rotate(135deg);
}
.generalItem_btnArrFlex .icoArr.ku.ku_t {
transform: translateX(1.25vw) rotate(45deg);
}
.generalItem_btnArrFlex .icoArr.ku.ku_b {
transform: translateX(1.25vw) rotate(225deg);
}
.generalItem_btnArrFlex .icoArr.ku::before,
.generalItem_btnArrFlex .icoArr.ku::after {
content: "";
background: #fff;
position: absolute;
top: 0;
left: 0;
box-shadow: 0 0 0.5px 0 #fff;
}
.generalItem_btnArrFlex .icoArr.ku::before {
width: 100%;
height: 1px;
}
.generalItem_btnArrFlex .icoArr.ku::after {
width: 1px;
height: 100%
}
@media print, screen and (min-width: 340px) { /*{overSPl}*/
.generalItem_btnArrFlex {
padding-left: calc(19px + 0.5em);
padding-right: 19px;
}
.generalItem_btnArrFlex .icoArr.tri {
transform: translateX(6px);
}
.generalItem_btnArrFlex .icoArr.ku {
transform: translateX(6px) rotate(135deg);
}
.generalItem_btnArrFlex .icoArr.ku.ku_t {
transform: translateX(6px) rotate(45deg);
}
.generalItem_btnArrFlex .icoArr.ku.ku_b {
transform: translateX(6px) rotate(225deg);
}
}
/* touchMove_Assist | スワイプを促すアニメーション
-------------------------------------------------------
- setting.js の「touchMove_Assist」のスタイルです。
- 必ず「.js_touchMoveAssist」に「overflow-x: scroll;」を設定すること。※各ページCSSで設定。
-------------------------------------------------------
- $(this).addClass('js_tMA_target').append('');
-------------------------------------------------------
- 例：
- 例：.wrap{width:100%;overflow-x:scroll;-webkit-overflow-scrolling:touch;} .box{width:200%;}
---------------------------------------------------- */
.js_tMA_target {
position: relative;
z-index: 0;
}
.js_tMA_target [class*="js_tMA_item_"] {
display: none; /* 初期値 none */
position: absolute;
z-index: -1;
}
@media screen and (max-width: 599px) { /*{belowSP}*/
.js_tMA_target [class*="js_tMA_item_"] {
display: block;
z-index: 10;
}
.js_tMA_target .js_tMA_item_icon {
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100px;
height: 100px;
margin: auto;
}
.js_tMA_target .js_tMA_item_icon::before {
content: "";
display: block;
width: 100px;
height: 100px;
background: url("../img/ico_touch_move_assist.svg") center center / contain no-repeat;
}
.js_tMA_target .js_tMA_item_icon.isAnimeON::before {
animation: 3s ease 0s infinite both tMA_icon_anime;
}
.js_tMA_target .js_tMA_item_bg {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
}
@keyframes tMA_icon_anime {
0% { opacity: 0; transform: translateX(50%); }
50% { opacity: 1; }
100% { opacity: 0; transform: translateX(-50%);}
}
/* /////////////////////////////////////////////////////////////////////
*
* _nre-tk_general / tk_base_high.css
*
///////////////////////////////////////////////////////////////////// */
.bukkenCaptionWrap .container {
margin: 2em auto!important
}
/* current */
#gNavToggle .tk_gNav li a.current span.label {
font-weight: bold;
}
@media screen and (max-width: 1049px) {
#gNavToggle .tk_gNav li a.current span.label {
color: #fff !important;
}
}
@media print, screen and (min-width: 1050px) {
body.mapP .tk_hNav li.mapPopNav a, body.outlineP .tk_hNav li.outNav a {
opacity: 1;
font-weight: bold;
}
}