/* ***************************************************************************************************
@KEYFRAMES
*************************************************************************************************** */
/* 光（ループ） */
a.shineLoopBtn {
position: relative;
overflow: hidden;
}
a.shineLoopBtn::before {
content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 0; 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 {
position: relative;
z-index: 1;
}
a.shineLoopBtn > span.icoArr {
z-index: 2;
}
@keyframes anime_shineLoopBtn {
0% { transform: translateX(-100%) skewX(-45deg);}
75%,100% { transform: translateX(100%) skewX(-45deg);}
}
/* ------------------------------------------------------------------------
color, formatBg setting
------------------------------------------------------------------------ */
body {
--site-themeColor : 150, 168, 164 ; /* #96a8a4 Blue-greenish gray */
--site-subColor : 109, 124, 121 ; /* #498784 emeraldGreen */
--site-accentColor : 24, 50, 48 ; /* #183230 darkGreen */
--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: "外観完成予想図";}
/* 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; }
.tk_hNav li.resNav a, .tk_hNav li.boxNav a { background: #c36639; }
.DEVICEPC .tk_hNav li.resNav a[href]:hover, .tk_hNav li.boxNav a[href]:hover { background: #a94311; }
.tk_hNav li.resNav.onlineResNav a { background: #69523f; }
.DEVICEPC .tk_hNav li.resNav.onlineResNav a[href]:hover { background: #462e19; }
/* 来場予約設置前用 */
.tk_hNav li.reqNav:nth-last-of-type(2) a { background: #c36639; }
.DEVICEPC .tk_hNav li.reqNav:nth-last-of-type(2) a[href]:hover { background: #a94311; }
}
@media screen and (max-width: 1049px) {
.tk_hNav li.resNav a { background: #c36639; }
.tk_hNav li.resNav.onlineResNav a { background: #69523f; }
/* 来場予約設置前用 */
.tk_hNav li.reqNav:nth-last-of-type(2) a { background: #c36639; }
.tk_hNav li.reqNav + .telNav a { background: rgba(var(--site-accentColor),1); }
}
/* info */
.noticeWrap .noticeBtn.res a { background: rgba(228, 125, 74, .7); }
.noticeWrap .noticeBtn.res a::after { background: linear-gradient(to right, #c24d1e 0%, transparent 50%, #c24d1e 100%); }
.noticeWrap .noticeBtn.res.onlineResNav a { background: rgba(105, 82, 63, .7); }
.noticeWrap .noticeBtn.res.onlineResNav a::after { background: linear-gradient(to right, #463324 0%, transparent 50%, #463324 100%); }
/* 来場予約設置前用 */
.noticeWrap .noticeBtn.req:not(.onlyReq):last-child a { background: rgba(228, 125, 74, .7); }
.noticeWrap .noticeBtn.req:not(.onlyReq):last-child a::after { background: linear-gradient(to right, #c24d1e 0%, transparent 50%, #c24d1e 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;
}
}
h3.ptHeading .heading {
font-size: 5.6vw;
}
h4.ptHeading .heading {
font-size: 4.6vw;
}
@media print, screen and (min-width: 600.02px) {
h3.ptHeading .heading {
font-size: min(3.4vw, 1.3em);
}
h4.ptHeading .heading {
font-size: min(3.4vw, 1.3em);
}
}
@media print, screen and (min-width: 1049.02px) {
}
/* 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;
}
}
/* 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;
}
/* ============================================================================
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] {
opacity: 1;
transition: opacity 0.3s ease-out;
}
[class*="generalItem_btn"][href]:hover {
opacity: 0.65;
}
@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%);}
}