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

/* ----- common ----- */
html, body { font-family: "Zen Maru Gothic", serif; font-optical-sizing: auto; font-style: normal; color: rgba(70,70,70,1)}
html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
#wrapper { width: 100%; margin: auto; overflow: hidden; position: relative }
p, h1, h2, h3, h4, h5, h6, table, ul, hr { font-size: inherit; font-weight: 500; 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 } hr { border: none; opacity: 1 }

.jp-light { font-weight: 300 } .jp-regular { font-weight: 400 } .jp-medium { font-weight: 500 }
.jp-semibold { font-weight: 600 } .jp-bold { font-weight: 700 } .jp-extrabold { font-weight: 800 }
.jp-black { font-weight: 900 }

.jp-tume { font-feature-settings: "palt" }
.jp-tate { writing-mode: vertical-rl; min-height: 300px; text-indent: -2.1rem }
.jp-yoko { writing-mode: horizontal-tb }
.bg-facebook { background-color: rgba(59,89,152,1) !important }
.bg-twitter { background-color: rgba(29,161,242,1) !important }
.bg-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-p10 { padding-bottom: 10px } .sec-p15 { padding-bottom: 15px }
.sec-p20 { padding-bottom: 20px } .sec-p25 { padding-bottom: 25px }
.sec-p30 { padding-bottom: 30px } .sec-p35 { padding-bottom: 35px }
.sec-p40 { padding-bottom: 40px } .sec-p45 { padding-bottom: 45px }
.sec-p50 { padding-bottom: 50px } .sec-p55 { padding-bottom: 55px }
.sec-p60 { padding-bottom: 60px } .sec-p65 { padding-bottom: 65px }
.sec-p70 { padding-bottom: 70px } .sec-p75 { padding-bottom: 75px }
.sec-p100 { padding-bottom: 100px } @media screen and ( min-width: 576px ) { .sec-p100 { padding-bottom: 100px }}
.sec-p120 { padding-bottom: 120px } @media screen and ( min-width: 576px ) { .sec-p120 { padding-bottom: 120px }}

.px-10 { padding: 0 10px 0 } .px-15 { padding: 0 15px 0 } .px-20 { padding: 0 20px 0 }
.px-25 { padding: 0 25px 0 } .px-30 { padding: 0 30px 0 } .px-35 { padding: 0 35px 0 }
.px-40 { padding: 0 40px 0 } .px-45 { padding: 0 45px 0 } .px-50 { padding: 0 50px 0 }
.mx-10 { margin: 0 10px 0 } .mx-15 { margin: 0 15px 0 } .mx-20 { margin: 0 20px 0 }
.px-note { padding: 0 17px 0 }

/* ----- text ----- */
.tt-11 { font-size: 11px } .tt-12 { font-size: 12px } .tt-13 { font-size: 13px }
.tt-14 { font-size: 14px } .tt-15 { font-size: 15px } .tt-18 { font-size: 18px }
.tt-21 { font-size: 21px } .tt-24 { font-size: 24px } .tt-28 { font-size: 28px }
.tt-32 { font-size: 32px } .tt-36 { font-size: 36px } .tt-42 { font-size: 42px }
.tt-48 { font-size: 48px } .tt-52 { font-size: 52px } .tt-56 { font-size: 56px }
.tt-60 { font-size: 60px } .tt-64 { font-size: 64px } .tt-72 { font-size: 72px }
.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.4rem !important }
.radius-5 { border-radius: 5px } .radius-10 { border-radius: 10px } .radius-15 { border-radius: 15px }

/* ----- 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: 280px; overflow: hidden; border-radius: 10px }
.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 }