/* ------------------------------------------------------------
   - 2022-04-12 update - Breakpoint - SP max w375
     >576-sm | >768-md | >992-lg | >1200-xl | >1400-xxl
   ------------------------------------------------------------ */

/* ----- common ----- */
html, body { font-family: 'Noto Serif JP'; color: rgba(34,34,34,1)} /* Noto Sans JP */
html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
#wrapper { overflow: hidden; position: relative } @media ( min-width: 1921px ){ #wrapper { width: 1920px; margin: auto }}
p, h1, h2, h3, h4, h5, h6, table, ul, hr { font-size: inherit; font-weight: 400; line-height: 1em; margin: 0; padding: 0 }
a { color: inherit; font-size: inherit; text-decoration: none } a:hover { color: inherit; opacity: 0.65; text-decoration: none }
*{ transition: .2s linear }

.jp-tate { writing-mode: vertical-rl; min-height: 300px }
@media ( min-width: 768px ){ .jp-tate-c1 { writing-mode: vertical-rl }}
.jp-yoko { writing-mode: horizontal-tb }
.jp-r { font-family: 'Noto Serif JP'; font-weight: 400 !important }
.jp-m { font-family: 'Noto Serif JP'; font-weight: 500 !important }
.jp-b { font-family: 'Noto Serif JP'; font-weight: 700 !important }
.en-m { font-family: 'EB Garamond'; font-weight: 500 !important }

/* ----- color ----- */
.color-b { color: rgba(0,0,0,1) !important } .color-w { color: rgba(255,255,255,1) !important } .color-g { color: rgba(120,120,120,1) !important }
.bgc-b { background-color: rgba(0,0,0,1) !important } .bgc-w { background-color: rgba(255,255,255,1) !important } .bgc-g { background-color: rgba(245,245,245,1) !important } .bgc-facebook { background-color: rgba(59,89,152,1) !important } .bgc-twitter { background-color: rgba(29,161,242,1) !important } .bgc-line { background-color: rgba(55,192,49,1) !important }

/* ----- section ----- */
.sec-sm { margin: auto; width: 100%; max-width: 576px; position: relative }
.sec-md { margin: auto; width: 100%; max-width: 768px; position: relative }
.sec-lg { margin: auto; width: 100%; max-width: 992px; position: relative }
.sec-xl { margin: auto; width: 100%; max-width: 1200px; position: relative }
.sec-xxl { margin: auto; width: 100%; max-width: 1400px; position: relative }
.sec-3xl { margin: auto; width: 100%; max-width: 1600px; position: relative }

.sec-p25 { padding-bottom: 25px }
.sec-p50 { padding-bottom: 40px } @media screen and ( min-width: 576px ) { .sec-p50 { padding-bottom: 50px }}
.sec-p75 { padding-bottom: 40px } @media screen and ( min-width: 576px ) { .sec-p75 { padding-bottom: 75px }}
.sec-p100 { padding-bottom: 50px } @media screen and ( min-width: 576px ) { .sec-p100 { padding-bottom: 100px }}
.sec-p125 { padding-bottom: 50px } @media screen and ( min-width: 576px ) { .sec-p125 { padding-bottom: 125px }}
.sec-p150 { padding-bottom: 50px } @media screen and ( min-width: 576px ) { .sec-p150 { padding-bottom: 150px }}
.sec-p175 { padding-bottom: 50px } @media screen and ( min-width: 576px ) { .sec-p175 { padding-bottom: 175px }}

.px-p10 { padding: 0 10px 0 } @media screen and ( min-width: 1400px ) { .px-p10 { padding: 0 }}
.px-p15 { padding: 0 15px 0 } @media screen and ( min-width: 1400px ) { .px-p15 { padding: 0 }}
.px-p20 { padding: 0 20px 0 } @media screen and ( min-width: 1400px ) { .px-p20 { padding: 0 }}
.px-p25 { padding: 0 25px 0 } @media screen and ( min-width: 1400px ) { .px-p25 { padding: 0 }}
.px-p30 { padding: 0 30px 0 } @media screen and ( min-width: 1400px ) { .px-p30 { padding: 0 }}
.px-p60 { padding: 0 60px 0 } @media screen and ( min-width: 1400px ) { .px-p60 { padding: 0 }}

/* ----- text ----- */
.tt-11 { font-size: 11px } .tt-12 { font-size: 12px } .tt-13 { font-size: 13px } .tt-14 { font-size: 14px }
.tt-18 { font-size: 16px } @media screen and ( min-width: 576px ) { .tt-18 { font-size: 18px }}
.tt-21 { font-size: 18px } @media screen and ( min-width: 576px ) { .tt-21 { font-size: 21px }}
.tt-24 { font-size: 21px } @media screen and ( min-width: 576px ) { .tt-24 { font-size: 24px }}
.tt-28 { font-size: 24px } @media screen and ( min-width: 576px ) { .tt-28 { font-size: 28px }}
.tt-32 { font-size: 24px } @media screen and ( min-width: 576px ) { .tt-32 { font-size: 32px }}
.tt-36 { font-size: 28px } @media screen and ( min-width: 576px ) { .tt-36 { font-size: 36px }}
.tt-42 { font-size: 28px } @media screen and ( min-width: 576px ) { .tt-42 { font-size: 42px }}
.tt-48 { font-size: 36px } @media screen and ( min-width: 576px ) { .tt-48 { font-size: 48px }}
.tt-52 { font-size: 42px } @media screen and ( min-width: 576px ) { .tt-52 { font-size: 52px }}
.tt-56 { font-size: 42px } @media screen and ( min-width: 576px ) { .tt-56 { font-size: 56px }}
.tt-60 { font-size: 48px } @media screen and ( min-width: 576px ) { .tt-60 { font-size: 60px }}
.tt-64 { font-size: 48px } @media screen and ( min-width: 576px ) { .tt-64 { font-size: 64px }}
.tt-72 { font-size: 42px } @media screen and ( min-width: 576px ) { .tt-72 { font-size: 72px }}
.tt-72b { font-size: 32px } @media screen and ( min-width: 576px ) { .tt-72b { font-size: 72px }}
.tt-80 { font-size: 56px } @media screen and ( min-width: 576px ) { .tt-80 { font-size: 80px }}

.lh-3 { line-height: 1.3 !important } .lh-5 { line-height: 1.5 !important } .lh-8 { line-height: 1.8 !important }
.kng-1 { letter-spacing : 0.075rem !important } .kng-2 { letter-spacing : 0.15rem !important } .kng-3 { letter-spacing : 0.3rem !important }
.kng-4 { letter-spacing : 0.3rem !important }
@media screen and ( min-width: 576px ) { .kng-4 { letter-spacing : 0.3rem !important }}
.kng-5 { letter-spacing : 0.4rem !important }
@media screen and ( min-width: 576px ) { .kng-5 { letter-spacing : 0.6rem !important }}

/* ----- effect / etc ----- */
.youtube { position: relative; width: 100%; padding-top: 56.25% } .youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important}

.gmap { position: relative; height: 360px; overflow: hidden }
@media ( min-width: 768px ){ .gmap { position: relative; height: 560px; overflow: hidden }}
.gmap iframe, .gmap object, .gmap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100% }
* { outline: 0 !important; list-style-type: none !important} .clearfix:after { content:" "; display:table; clear:both }