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

/* ----- common ----- */
html, body { font-family: 'Noto Serif JP'; text-align: justify; word-break: break-all }
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, th, td { font-size: inherit; font-weight: 400; line-height: 1; 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 }

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

/* ----- 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-p20 { padding-bottom: 20px } .sec-p40 { padding-bottom: 40px }
.sec-p60 { padding-bottom: 40px } @media screen and ( min-width: 1200px ) { .sec-p60 { padding-bottom: 60px }}
.sec-p80 { padding-bottom: 40px } @media screen and ( min-width: 768px ) { .sec-p80 { padding-bottom: 60px }} @media screen and ( min-width: 1200px ) { .sec-p80 { padding-bottom: 80px }}
.sec-p100 { padding-bottom: 40px } @media screen and ( min-width: 768px ) { .sec-p100 { padding-bottom: 60px }} @media screen and ( min-width: 1200px ) { .sec-p100 { padding-bottom: 100px }}
.sec-p120 { padding-bottom: 50px } @media screen and ( min-width: 768px ) { .sec-p120 { padding-bottom: 70px }} @media screen and ( min-width: 1200px ) { .sec-p120 { padding-bottom: 120px }}
.sec-p140 { padding-bottom: 60px } @media screen and ( min-width: 768px ) { .sec-p140 { padding-bottom: 80px }} @media screen and ( min-width: 1200px ) { .sec-p140 { padding-bottom: 140px }}
.sec-p160 { padding-bottom: 60px } @media screen and ( min-width: 768px ) { .sec-p160 { padding-bottom: 100px }} @media screen and ( min-width: 1200px ) { .sec-p160 { padding-bottom: 160px }}
.sec-p180 { padding-bottom: 60px } @media screen and ( min-width: 768px ) { .sec-p180 { padding-bottom: 120px }} @media screen and ( min-width: 1200px ) { .sec-p180 { padding-bottom: 180px }}
.sec-p200 { padding-bottom: 60px } @media screen and ( min-width: 768px ) { .sec-p200 { padding-bottom: 160px }} @media screen and ( min-width: 1200px ) { .sec-p200 { padding-bottom: 200px }}

.sec-p60-fix { padding-bottom: 60px }

/* ----- text ----- */
.tt-8 { font-size: 8px } .tt-9 { font-size: 9px } .tt-10 { font-size: 10px } .tt-11 { font-size: 11px } .tt-12 { font-size: 12px }
.tt-13 { font-size: calc(12px + 1 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-13 { font-size: 13px }}
.tt-14 { font-size: calc(13px + 1 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-14 { font-size: 14px }}
.tt-15 { font-size: calc(13px + 2 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-15 { font-size: 15px }}
.tt-16 { font-size: calc(14px + 2 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-16 { font-size: 16px }}
.tt-18 { font-size: calc(14px + 4 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-18 { font-size: 18px }}
.tt-21 { font-size: calc(16px + 5 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-21 { font-size: 21px }}
.tt-24 { font-size: calc(16px + 8 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-24 { font-size: 24px }}
.tt-28 { font-size: calc(18px + 10 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-28 { font-size: 28px }}
.tt-32 { font-size: calc(18px + 14 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-32 { font-size: 32px }}
.tt-36 { font-size: calc(21px + 15 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-36 { font-size: 36px }}
.tt-42 { font-size: calc(21px + 21 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-42 { font-size: 42px }}
.tt-48 { font-size: calc(21px + 27 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-48 { font-size: 48px }}
.tt-54 { font-size: calc(24px + 30 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-54 { font-size: 54px }}
.tt-60 { font-size: calc(24px + 36 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-60 { font-size: 60px }}
.tt-72 { font-size: calc(24px + 48 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-72 { font-size: 72px }}

.lh-0 { line-height: 0 !important } .lh-1 { line-height: 1 !important } .lh-3 { line-height: 1.3 !important } .lh-5 { line-height: 1.5 !important } .lh-7 { line-height: 1.7 !important } .lh-9 { line-height: 1.9 !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.45rem } @media ( max-width: 768px ){ .kng-4 { letter-spacing: 0.3rem }} @media ( max-width: 576px ){ .kng-4 { letter-spacing: 0.15rem }}
.kng-5 { letter-spacing : 0.6rem } @media ( max-width: 768px ){ .kng-5 { letter-spacing: 0.3rem }} @media ( max-width: 576px ){ .kng-5 { letter-spacing: 0.15rem }}

/* ----- 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 }