/* ------------------------------------------------------------
   - 2019-04-15 update - Breakpoint - SP max w375
     >576-sm | >768-md | >992-lg | >1200-xl | >1632-xxl
   ------------------------------------------------------------ */

/* ----- common ----- */
html, body { font-size: 16px; font-weight: 500; line-height: 1; text-align: justify; color: rgba(20,20,20,1); word-break: break-all }
html, body { font-family: "Noto Sans JP","Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif }
@media all and (-ms-high-contrast:none){ body { font-family: メイリオ, Meiryo, YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif }}
html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility } body { background-color: rgba(255,255,255,1.00)}
#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; line-height: 1; margin: 0; padding: 0 } .position-left { left: 0 } .position-right { right: 0 }
a, a div {display: block; width: 100%; height: 100%; color: inherit; font-size: inherit; text-decoration: none; line-height: inherit } a:hover { text-decoration: under-line; color: inherit }
hr { border-top: solid 1px rgba(0,0,0,0.15)} .bdr-top { border-top: solid 1px } .bdr-bottom { border-bottom: solid 1px } .bdr-left { border-left: solid 1px } .bdr-right { border-right: solid 1px }

/* ----- 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 }
.bg-color-b { background-color: rgba(0,0,0,1) !important } .bg-color-w { background-color: rgba(255,255,255,1) !important } .bg-color-g { background-color: rgba(240,240,240,1) !important }
.bg-color-facebook { background-color: rgba(59,89,152,1) !important } .bg-color-twitter { background-color: rgba(29,161,242,1) !important } .bg-color-line { background-color: rgba(55,192,49,1) !important }
.bdr-color-w { border-color: rgba(255,255,255,1) !important } .bdr-color-b { border-color: rgba(0,0,0,1) !important }

/* ----- container / gutters ----- */
.container { max-width: 1632px; width: 100%; padding: 25px 0; margin-right: auto; margin-left: auto }  @media ( max-width: 1632px ){ .container { padding: 25px 15px }}
.container-fluid { width: 100%; padding-right: 0 !important; padding-left: 0 !important; margin-right: auto; margin-left: auto }
.gutters-c1{ margin: auto -10px } .gutters-c1>.col,.gutters-c1>[class*=col-]{ padding: 15px 10px }
@media ( min-width: 1632px ){ .gutters-c1{ margin: auto -30px } .gutters-c1>.col,.gutters-c1>[class*=col-]{ padding: 25px 30px }}
.gutters-c2{ margin: auto -10px } .gutters-c2>.col,.gutters-c2>[class*=col-]{ padding: 15px 10px }
@media ( min-width: 1632px ){ .gutters-c2{ margin: auto -15px } .gutters-c2>.col,.gutters-c2>[class*=col-]{ padding: 25px 15px }}
.gutters-c3{ margin: auto -10px } .gutters-c3>.col,.gutters-c3>[class*=col-]{ padding: 0px 7px }
@media ( min-width: 1632px ){ .gutters-c3{ margin: auto -15px } .gutters-c3>.col,.gutters-c3>[class*=col-]{ padding: 10px 15px }}
.flex-center { display: flex; justify-content: center; align-items: center;}
/* ----- section ----- */
.sec-md { margin: auto; width: 100%; max-width: 375px; position: relative } @media screen and ( min-width: 768px ) {.sec-md { max-width: 768px; }}
.sec-lg { margin: auto; width: 100%; max-width: 375px; position: relative } @media screen and ( min-width: 768px ) {.sec-lg { max-width: 992px; }}
.sec-xl { margin: auto; width: 100%; max-width: 1200px; position: relative } .sec-xxl { margin: auto; width: 100%; max-width: 1632px; position: relative } .mt50 { margin-top: 50px }
.sec-p25 { padding-bottom: 15px } @media screen and ( min-width: 375px ) { .sec-p25 { padding-bottom: 20px }} @media screen and ( min-width: 1200px ) { .sec-p25 { padding-bottom: 25px }}
.sec-p50 { padding-bottom: 15px } @media screen and ( min-width: 375px ) { .sec-p50 { padding-bottom: 20px }} @media screen and ( min-width: 1200px ) { .sec-p50 { padding-bottom: 50px }}
.sec-p75 { padding-bottom: 20px } @media screen and ( min-width: 375px ) { .sec-p75 { padding-bottom: 35px }} @media screen and ( min-width: 1200px ) { .sec-p75 { padding-bottom: 75px }}
.sec-p100 { padding-bottom: 25px } @media screen and ( min-width: 375px ) { .sec-p100 { padding-bottom: 50px }} @media screen and ( min-width: 1200px ) { .sec-p100 { padding-bottom: 100px }}
.sec-p125 { padding-bottom: 25px } @media screen and ( min-width: 375px ) { .sec-p125 { padding-bottom: 50px }} @media screen and ( min-width: 1200px ) { .sec-p125 { padding-bottom: 125px }}
.sec-p150 { padding-bottom: 25px } @media screen and ( min-width: 375px ) { .sec-p150 { padding-bottom: 50px }} @media screen and ( min-width: 1200px ) { .sec-p150 { padding-bottom: 150px }}

/* ----- 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: 10px } @media screen and ( min-width: 375px ) { .tt-12 { font-size: calc(10px + 2 * ((100vw - 375px) / 825))}} @media screen and ( min-width: 1200px ) { .tt-12 { font-size: 12px }}
.tt-13 { font-size: 10px } @media screen and ( min-width: 375px ) { .tt-13 { font-size: calc(11px + 2 * ((100vw - 375px) / 825))}} @media screen and ( min-width: 1200px ) { .tt-13 { font-size: 13px }}
.tt-14 { font-size: 14px !important }
/* .tt-14 { font-size: 12px } @media screen and ( min-width: 375px ) { .tt-14 { font-size: calc(12px + 2 * ((100vw - 375px) / 825))}} @media screen and ( min-width: 1200px ) { .tt-14 { font-size: 14px }} */
.tt-15 { font-size: 12px } @media screen and ( min-width: 375px ) { .tt-15 { font-size: calc(12px + 3 * ((100vw - 375px) / 825))}} @media screen and ( min-width: 1200px ) { .tt-15 { font-size: 15px }}
.tt-16 { font-size: 14px } @media screen and ( min-width: 375px ) { .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: 14px } @media screen and ( min-width: 375px ) { .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: 16px } @media screen and ( min-width: 375px ) { .tt-21 { font-size: calc(16px + 5 * ((100vw - 375px) / 825))}} @media screen and ( min-width: 1200px ) { .tt-21 { font-size: 21px }}
.tt-21-2 { font-size: 14px } @media screen and ( min-width: 375px ) { .tt-21-2 { font-size: calc(14px + 5 * ((100vw - 375px) / 825))}} @media screen and ( min-width: 1200px ) { .tt-21-2 { font-size: 21px }}
.tt-24 { font-size: 16px } @media screen and ( min-width: 375px ) { .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: 18px } @media screen and ( min-width: 375px ) { .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: 18px } @media screen and ( min-width: 375px ) { .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: 21px } @media screen and ( min-width: 375px ) { .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: 21px } @media screen and ( min-width: 375px ) { .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: 21px } @media screen and ( min-width: 375px ) { .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: 24px } @media screen and ( min-width: 375px ) { .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: 24px } @media screen and ( min-width: 375px ) { .tt-60 { font-size: calc(24px + 36 * ((100vw - 375px) / 825))}} @media screen and ( min-width: 1200px ) { .tt-60 { font-size: 60px }}
.tt-60-2 { font-size: 27px } @media screen and ( min-width: 375px ) { .tt-60-2 { font-size: calc(27px + 36 * ((100vw - 375px) / 825))}} @media screen and ( min-width: 1200px ) { .tt-60-2 { font-size: 60px }}
.tt-72 { font-size: 24px } @media screen and ( min-width: 375px ) { .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-2 { line-height: 1.2 !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 ----- */
.radius-2 { border-radius: 2px } .radius-3 { border-radius: 3px } .radius-5 { border-radius: 5px } .radius-7 { border-radius: 7px } .radius-10 { border-radius: 10px } .form-control { border-radius: 0 }
.radius-circle { border-radius: 35px; width: 70px; height: 70px } .radius-football { border-radius: 25% 75% } .box-shadow { box-shadow: 5px 5px 5px rgba(0,0,0,0.15)}
.radius-diamond { -webkit-transform: skewX(-25deg); transform: skewX(-25deg)} .radius-diamond p { -webkit-transform: skewX(25deg); transform: skewX(25deg)}
.underline { text-decoration: underline } .uchikeshi { text-decoration: line-through !important }


.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: 100%; overflow: hidden } @media ( max-width: 992px ){ .gmap { position: relative; height: 360px; overflow: hidden }}
@media ( max-width: 576px ){ .gmap { position: relative; height: 240px; 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 }

.breadcrumbs a {
  display: inline;
}

.pc {
  display: none;
}
@media screen and (min-width:768px) {
  .pc {
    display:initial;
  }
}
.sp {
  display: initial;
}
@media screen and (min-width:768px) {
  .sp {
    display: none;
  }
}

.fadeUpTrigger {
  opacity: 0;
  -ms-transform: translateY(30px);
  transform: translateY(30px);
  transition: all 1s;
}
.fadeUp {
  opacity: 1;
  transform: translateY(0);
}

.article {
  padding: 0 16px;
}
.nav-links{
	display: flex;;
}
.nav-links a{
	display: block;
	padding: 0 .5em;
}
.read-more-btn, .read-less-btn { 
  display: block;
  margin: 10px 0;
  text-align: center;
  color: blue;
  text-decoration: none;
  cursor: pointer;
}