@charset "utf-8";
/* *************************************************************************************************************
* file name: default.css
* style info: 個別物件ページ用の初期設定CSS
* tk_common.css, tk_base.css 関連の書き換えはレイアウトに影響がない範囲で可。< TEMPLATE >へ。
----------------------------------------------------------------------------------------------------------------
* < load >
* < COMMON >
* < BASE >
* < TEMPLATE >
----------------------------------------------------------------------------------------------------------------
* 各物件で規定値を変えたい場合「.unique-main」(又はその内部)に対して再設定すること。
- [×] body{font-size:10px;} -> [○] .unique-main{font-size:10px;}
************************************************************************************************************* */
/* ***************************************************************************************************
load | @importより上にコード記述不可。
*************************************************************************************************** */
/* ----------------------------------------------------------------------------
* [ Italianno ]
* URL : https://fonts.google.com/specimen/Italianno?selection.family=Italianno
* CODE : font-family: 'Italianno', cursive, serif;
*/
@import url('https://fonts.googleapis.com/css?family=Italianno&display=swap');
/* ----------------------------------------------------------------------------
* [ Great Vibes (Subset) ]
* URL : https://fonts.google.com/specimen/Great+Vibes?selection.family=Great+Vibes
* CODE : font-family: 'Great Vibes', cursive, serif;
*
* MEMO : ページタイトル用フォント。サブセット化しています。
*/
@import url('https://fonts.googleapis.com/css?family=Great+Vibes&display=swap&text=PlanPhotoEquipmentMapAccessLife This plan\'s point');
/* ***************************************************************************************************
COMMON
*************************************************************************************************** */
/* ============================================================================
Setting
============================================================================ */
/* ----------------------------------------------------------------------------
basic Setting
---------------------------------------------------------------------------- */
/* ---------------------------------
Text Base
--------------------------------- */
/* Font Family ////////// [ 游 family ] is for IE. */
.ptHeading .hTxt,
[class*="hTxtStyh"] {
font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', serif;
}
/* Text */
.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:#aa141d !important;} /*赤系*/
.txtColor04 {color:#9a7d44 !important;} /*黄系*/
.txtColor05 {color:#003070 !important;} /*青系*/
.txtColor06 {color:#aa141d !important;} /*橙系*/
.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自身への使用は可。 */
@media print, screen and (min-width: 600px) { /*{overTB}*/
small.bl {text-align:left;}
}
/* Contcap | 例: xxxxx
/ ※xxxxx
*/
.contcap {
display:block;
line-height:1.5;
color:#202020;
margin-top:0.5em;
}
.contcap small {
display:inline-block;
}
/* Imgcap | 例: ![]()
xxxxx
/ ![]()
xxxxx
*/
.imgcapParent {
position:relative;
}
.imgcap, .imgcapkeep {
display:block;
position:absolute;
right:10px;
bottom:5px;
line-height:1.5;
}
.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:#e1dcd0;}
.capLegendWrap .iro2 {background:#f9ebe5;}
.capLegendWrap .iro3 {background:#cbd5e7;}
.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%);}
}
/* ***************************************************************************************************
BASE
*************************************************************************************************** */
/* ============================================================================
unique
============================================================================ */
.unique-main {
line-height: 1.7;
color: #000;
font-size: 4.2vw;
letter-spacing: 0.05em;
}
@media screen and (min-width: 340px) and (max-width: 599px) { /*{SPl}*/
.unique-main {
font-size: 1.4rem;
}
}
@media print, screen and (min-width: 600px) { /*{overTB}*/
.unique-main {
font-size: 1.6rem;
}
}
/* ============================================================================
wrapper_Box_Parts.
-------------------------------------------------------------------------------
ラッパー類の設定。
============================================================================ */
/*
.pageThemeHeader {background: rgba(0,255,0,0.2);}
.containerWrap {background: rgba(0,0,255,0.2);}
.container {background: skyblue;}
.contbox {background: rgba(200,200,200,0.4);}
.blockWideL {background: cyan;}
.blockWideM {background: magenta;}
.blockWideS {background: yellow;}
*/
.containerWrap {
width: 100%;
padding: 3.125vw 0;
}
.container {
width: 94%;
background: #fff;
margin: 0 auto;
}
.contbox {
padding: 6.25vw 5vw;
}
/* OVERWRITE */ /* 上書き指定の為必ず最後に記述する。 */
[class*="blockWide"] {
margin: 0 auto;
}
.blockWideL {
width: 100%;
}
.blockWideM,
.blockWideS {
width: 94%;
}
@media print, screen and (min-width: 340px) { /*{overSPl}*/
.containerWrap {
/*padding: 20px 0;*/
padding: 130px 0;
}
.contbox {
padding: 30px 2.5vw;
}
}
@media print, screen and (min-width: 600px) { /*{overTB}*/
.containerWrap {
width: 100%;
}
.container {
width: 97%;
max-width: 1280px;
}
.contbox {
padding: 40px;
}
/* OVERWRITE */ /* 上書き指定の為必ず最後に記述する。 */
.blockWideL {
width: 100%;
}
.blockWideM {
width: 97%;
max-width: 1280px;
}
.blockWideS {
width: 94%;
max-width: 1000px;
}
}
/* ---------------------------- reset */ /* container類の入れ子は100%にリセットする。 */
.container .container,
.container [class*="blockWide"],
[class*="blockWide"] .container {
width: 100%;
max-width: none;
}
/* ============================================================================
Heading Elements.
-------------------------------------------------------------------------------
見出しの基本設定。
============================================================================ */
/* htxt
---------------------------------------------------- */
.ptHeading .hTxt,
[class*="hTxtStyh"] {
display: block;
line-height: 1.4;
letter-spacing: 0.1em;
}
.ptHeading .hTxt .kana,
[class*="hTxtStyh"] .kana {
letter-spacing: -0.05em;
margin-right: 0.05em;
}
/* -- */
h2.ptHeading .hTxt,
.hTxtStyh2 {
font-size: 5.6vw;
margin-bottom: 1.2em;
}
h3.ptHeading .hTxt,
.hTxtStyh3 {
font-size: 5.1vw;
text-align: center;
letter-spacing: 0.1em;
/*margin-bottom: 1.2em;*/
}
section.containerWrap h3.ptHeading .hTxt,
section.containerWrap .hTxtStyh3 {
padding-top: 6.25vw;
}
section.containerWrap h3.ptHeading .hTxt::before,
section.containerWrap .hTxtStyh3::before { content: "/"; margin-right: 0.5em;}
section.containerWrap h3.ptHeading .hTxt::after,
section.containerWrap .hTxtStyh3::after { content: "/"; margin-left: 0.5em;}
h4.ptHeading .hTxt,
.hTxtStyh4 {
font-size: 4.8vw;
margin-bottom: 1em;
}
h5.ptHeading .hTxt,
h6.ptHeading .hTxt,
.hTxtStyh5,
.hTxtStyh6 {
font-size: 4.4vw;
margin-bottom: 0.75em;
}
/* hWord
--------------------------------- */
/*.ptHeading .hWord {
display: block;
line-height: 1.1;
font-weight: bold;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
letter-spacing: 0;
margin-bottom: 0.75em;
}
.ptHeading .hWord.en {
font-family: 'Crimson Text', serif;
font-size: 3.15rem;
}
.ptHeading .hWord.ja {
font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', serif;
font-size: 2.9rem;
letter-spacing: 0.02em;
}*/
@media print, screen and (min-width: 340px) { /*{overSPl}*/
section.containerWrap h3.ptHeading .hTxt,
section.containerWrap .hTxtStyh3 {
padding-top: 30px;
}
}
@media screen and (min-width: 340px) and (max-width: 599px) { /*{SPl}*/
.ptHeading .hTxt,
[class*="hTxtStyh"] {
letter-spacing: 0.125em;
}
/* -- */
h2.ptHeading .hTxt,
.hTxtStyh2 {
font-size: 2.25rem;
}
h3.ptHeading .hTxt,
.hTxtStyh3 {
font-size: 1.95rem;
}
h4.ptHeading .hTxt,
.hTxtStyh4 {
font-size: 1.75rem;
}
h5.ptHeading .hTxt,
h6.ptHeading .hTxt,
.hTxtStyh5,
.hTxtStyh6 {
font-size: 1.55rem;
}
}
@media print, screen and (min-width: 600px) { /*{overTB}*/
.ptHeading .hTxt,
[class*="hTxtStyh"] {
letter-spacing: 0.125em;
}
/* -- */
h2.ptHeading .hTxt,
.hTxtStyh2 {
font-size: 2.7rem;
}
h3.ptHeading .hTxt,
.hTxtStyh3 {
font-size: 2.35rem;
letter-spacing: 0.12em;
}
section.containerWrap h3.ptHeading .hTxt,
section.containerWrap .hTxtStyh3 {
padding-top: 40px;
}
h4.ptHeading .hTxt,
.hTxtStyh4 {
font-size: 2.1rem;
}
h5.ptHeading .hTxt,
h6.ptHeading .hTxt,
.hTxtStyh5,
.hTxtStyh6 {
font-size: 1.7rem;
}
/* hWord
--------------------------------- */
/*.ptHeading .hWord.en {
font-size: 4rem;
}
.ptHeading .hWord.ja {
font-size: 3.8rem;
letter-spacing: 0.03em;
}*/
}
@media print, screen and (min-width: 1050px) { /*{overPC}*/
/* -- */
h2.ptHeading .hTxt,
.hTxtStyh2 {
font-size: 3.0rem;
}
h3.ptHeading .hTxt,
.hTxtStyh3 {
font-size: 2.6rem;
}
h4.ptHeading .hTxt,
.hTxtStyh4 {
font-size: 2.3rem;
}
h5.ptHeading .hTxt,
h6.ptHeading .hTxt,
.hTxtStyh5,
.hTxtStyh6 {
font-size: 2.0rem;
}
/* hWord
--------------------------------- */
/*.ptHeading .hWord.en {
font-size: 4.5rem;
}
.ptHeading .hWord.ja {
font-size: 4.3rem;
}*/
}
/* ============================================================================
noticeWrap
-------------------------------------------------------------------------------
行動提起セクションの基本設定。
============================================================================ */
.noticeWrap a,
.noticeWrap a .inbl {
text-decoration: none;
}
.noticeWrap .noticetxt {
width: 100%;
font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', serif;
text-align: center;
letter-spacing: 0.1em;
margin: 0 auto;
/* --------------------------
/index.cssで設定する
max-width: 1280px;
padding: 30px 2%;
-------------------------- */
}
.noticeWrap .noticetxt .kana {
letter-spacing: -0.02em;
padding-right: 0.04em;
}
.noticeWrap .noticetxt [class*="generalItem_btn"] .kana {
letter-spacing: -0.01em;
padding-right: 0.04em;
}
/* 文字サイズ調整
----------------------- */
.noticeWrap .noticetxt {
line-height: 1.4;
/*font-size: 1.6rem;*/
font-size: 4.95vw;
}
.noticeWrap .noticetxt small {
display: inline-block;
line-height: 1.3;
color: inherit;
font-size: 0.75em;
margin-top: 0.5em;
}
.noticeWrap .noticetxt .txtLLL {font-size: 1.4em; letter-spacing: 0.125em; }
.noticeWrap .noticetxt .txtLL { font-size: 1.215em; letter-spacing: 0.125em; }
.noticeWrap .noticetxt .txtL { font-size: 1.125em; }
.noticeWrap .noticetxt .txtS { font-size: 0.875em; }
.noticeWrap .noticetxt .txtSS { font-size: 0.8em; }
.noticeWrap .noticetxt .txtSSS {font-size: 0.6em; }
@media print, screen and (min-width: 340px) { /*{overSPl}*/
.noticeWrap .noticetxt {
line-height: 1.5;
font-size: 5.2vw;
}
.noticeWrap .noticetxt .txtLLL,
.noticeWrap .noticetxt .txtLL { line-height:1.4;}
}
@media print, screen and (min-width: 370px) { /*{MinorBreakpoint}*/
.noticeWrap .noticetxt {
font-size: 2rem;
}
}
@media print, screen and (min-width: 480px) { /*{MinorBreakpoint}*/
.noticeWrap .noticetxt {
font-size: 2.35rem;
}
}
@media print, screen and (min-width: 600px) { /*{overTB}*/
.noticeWrap .noticetxt .txtLLL {font-size: 1.65em;}
.noticeWrap .noticetxt .txtLL { font-size: 1.52em;}
.noticeWrap .noticetxt .txtL { font-size: 1.2142em; }
}
@media print, screen and (min-width: 1050px) { /*{overPC}*/
.noticeWrap .noticetxt {
font-size: 2.5rem;
/* --------------------------
/index.cssで設定する
padding: 40px 20px;
-------------------------- */
}
}
/* noticeWrap - noticeBtn
* ----------------------------------------------------
* 例（単品） ：
* 例（2つ以上）：
---------------------------------------------------- */
/* btnBox | ボタンを1つ以上で扱いたい場合「.btnBox」で囲う */
.noticeWrap .btnBox {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
max-width: 800px; /* feeling. | 横並びの個数を変えたい場合はここも修正すると良い */
margin: 0 auto;
}
.noticeWrap .btnBox .noticeBtn {
width: 100%;
margin: 6px 0;
}
/* -- Individual -- */
.noticeWrap .noticeBtn.req a,
.noticeWrap .noticeBtn.res a {
color: #fff;
}
.noticeWrap .noticeBtn.req a { background: #9a7d44;}
.noticeWrap .noticeBtn.res a { background: #9a7d44;}
@media print, screen and (min-width: 880px) { /*{MinorBreakpoint} feeling. | 必要に応じて変更すると良い */
.noticeWrap .btnBox .noticeBtn {
width: 47%; /* feeling. */
margin: 10px;
}
}
/* ***************************************************************************************************
TEMPLATE | tk_common.css, tk_base.css の書き換えがある場合。不要なものは消すように。
*************************************************************************************************** */
/* /////////////////////////////////////////////////////////////////////
* MEMO. for SPTB | tk_headerWrap
///////////////////////////////////////////////////////////////////// */
/*
@media screen and (max-width: 1049px) {
.tk_bukkenNameWrap .tk_bukkenName {
font-size: 7vw;
}
.tk_hNav li.mapNav a { background: #000000;}
.tk_hNav li.outNav a { background: #000000;}
.tk_hNav li.reqNav a { background: #000000;}
.tk_hNav li.telNav a { background: #000000;}
.tk_hNav li.resNav a { background: #000000;}
.tk_hNav li.mapNav a::before { background-image: url("xxxxx.svg");}
.tk_hNav li.outNav a::before { background-image: url("xxxxx.svg");}
.tk_hNav li.reqNav a::before { background-image: url("xxxxx.svg");}
.tk_hNav li.telNav a::before { background-image: url("xxxxx.svg");}
.tk_hNav li.resNav a::before { background-image: url("xxxxx.svg");}
}
@media screen and (min-width: 340px) and (max-width: 399px) {
.tk_bukkenNameWrap .tk_bukkenName {
font-size: 6.125vw;
}
}
@media screen and (min-width: 400px) and (max-width: 1049px) {
.tk_bukkenNameWrap .tk_bukkenName {
font-size: 2.68rem;
}
}
*/
/* /////////////////////////////////////////////////////////////////////
* MEMO. for PC | tk_headerWrap
///////////////////////////////////////////////////////////////////// */
/*
@media print, screen and (min-width: 1050px) {
.tk_bukkenNameWrap {
flex-basis: calc(100% - 620px);
}
.tk_bukkenNameWrap .tk_bukkenName {
font-size: 2.1rem;
}
.tk_hNavWrap {
flex-basis: 620px;
}
.tk_hNav li[class*="Nav"] {
font-size: 1.45rem;
}
.tk_hNav li.mapNav,
.tk_hNav li.txtNav {
color: #000000;
}
.tk_hNav li.outNav a,
.tk_hNav li.reqNav a,
.tk_hNav li.resNav a,
.tk_hNav li.boxNav a {
width: 145px;
color: #fff;
background: #9a7d44;
}
.tk_hNav li.mapNav a::after,
.tk_hNav li.txtNav a::after { background-image: url("xxxxx.svg");}
.tk_hNav li.outNav a::before { background-image: url("xxxxx.svg");}
.tk_hNav li.reqNav a::before { background-image: url("xxxxx.svg");}
.tk_hNav li.resNav a::before { background-image: url("xxxxx.svg");}
}
@media screen and (min-width: 1320px) {
html:not(.stickyON) .tk_bukkenNameWrap .tk_bukkenName {
font-size: 2.6rem;
}
}
*/
/* /////////////////////////////////////////////////////////////////////
* MEMO. | tk_footer
///////////////////////////////////////////////////////////////////// */
/* holidayBox | 休業告知のお知らせ
---------------------------------------------------- */
.tk_contact .holidayBox {
width: 100%;
}
.tk_contact .holidayBox .holiday {
display: block;
width: 100%;
line-height: 1.4;
color: #900;
font-size: 1.15rem;
font-size: 0.8em;
padding: 0.4em 0;
}