<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*!************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/index.scss ***!
  \************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&amp;display=swap);
/*!****************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/index.scss (1) ***!
  \****************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&amp;display=swap);
/*!****************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/index.scss (2) ***!
  \****************************************************************************************************************************************************************************************/
@charset "UTF-8";
:root {
  --ff-serif: "Noto Serif JP", "Helvetica", "Meiryo", serif;
  --ff-gothic: "Noto Sans JP", "貂ｸ繧ｴ繧ｷ繝�け菴�", "Yu Gothic", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "繝｡繧､繝ｪ繧ｪ", sans-serif;
  --ff-noto: "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro","Noto Sans JP", "貂ｸ繧ｴ繧ｷ繝�け菴�", "Yu Gothic", YuGothic, "Meiryo", "繝｡繧､繝ｪ繧ｪ", sans-serif;
  --ff-base: var(--ff-gothic);
  --ff-common: var(--ff-noto);
}

/*
-----------------------------------------------------------

Reset default browser

-----------------------------------------------------------
*/
/* =HTML5 Reset default browser CSS.
    Based on work by Eric Meyer
    http://meyerweb.com/eric/tools/css/reset/index.html
-----------------------------------------------------------*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  border-collapse: collapse !important;
}

:focus {
  /* remember to define focus styles! */
  outline: 0;
}

body {
  background: #fff;
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

table {
  /* tables still need 'cellspacing="0"' in the markup */
  width: 100%;
  border-collapse: collapse !important;
  border-spacing: 0;
  line-height: 1.75;
  text-align: left;
}

caption,
th,
td {
  font-weight: normal;
  text-align: left;
}

tr {
  border-bottom: solid 1px #ddd;
}

tr:last-child {
  border-bottom: none !important;
}

th,
td {
  padding: 1.4em;
  vertical-align: top;
  border: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}

blockquote,
q {
  quotes: "" "";
}

a img {
  border: 0 !important;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
  max-width: 100%;
  *display: inline;
  zoom: 1;
}

html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/*
-----------------------------------------------------------

Basic Setup

-----------------------------------------------------------
*/
.clearfix {
  zoom: 1; /* IE 5.5-7*/
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0px;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

* html .clearfix {
  display: inline-table;
  /**/
  display: block; /**/
}

.clear {
  margin: 0 !important;
  clear: both;
  visibility: hidden;
  height: 0;
}

.hidden {
  display: none !important;
  visibility: hidden;
  height: 0;
}

.window-scale {
  height: 100vh !important;
}

.over,
.scaleup,
.rotate,
.scaleup-rotate {
  -webkit-transition: all ease-out 0.1s;
  -moz-transition: all ease-out 0.1s;
  -ms-transition: all ease-out 0.1s;
  transition: all ease-out 0.1s;
}

.over:hover {
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  /* IE 8 */
}

.scaleup:hover {
  -webkit-transform: scale(2);
}

.rotate:hover {
  -webkit-transform: rotate(360deg);
}

.scaleup-rotate:hover {
  -webkit-transform: scale(2) rotate(360deg);
  box-shadow: 1px 1px 8px #999;
}

.pointer {
  cursor: pointer;
}

/* Transform */
.alpha {
  opacity: 0.6;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
  /* IE 5-7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  /* IE 8 */
}

.shadow {
  box-shadow: 1px 1px 8px #ccc;
}

.radius {
  border-radius: 5px;
}

/* Font Size */
.fs-9 {
  font-size: 9px !important;
}

.fs-10 {
  font-size: 10px !important;
}

.fs-11 {
  font-size: 11px !important;
}

.fs-12 {
  font-size: 12px !important;
}

.fs-13 {
  font-size: 13px !important;
}

.fs-14 {
  font-size: 14px !important;
}

.fs-15 {
  font-size: 15px !important;
}

.fs-18 {
  font-size: 18px !important;
}

.fs-21 {
  font-size: 21px !important;
}

.fs-24 {
  font-size: 24px !important;
}

.fs-28 {
  font-size: 28px !important;
}

.fs-30 {
  font-size: 30px !important;
}

.fs-36 {
  font-size: 36px !important;
}

.fs-48 {
  font-size: 48px !important;
}

.fs-60 {
  font-size: 60px !important;
}

.fs-72 {
  font-size: 72px !important;
}

/* Font Style */
.italic {
  font-style: italic;
}

strong {
  font-weight: bold !important;
}

:root {
  --z-loader: -1;
  --z-footer-nav-drawer: 50;
  --z-footer-nav: 100;
  --z-go-top: 100;
  --z-header: 300;
  --z-drawer: 250;
  --z-hamburger: 275;
  --sp-bottom-nav-height: 60px;
  --inner-width: 1120px;
  --inner-width-lg: 1280px;
  --inner-gutter: 15px;
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 20px;
  --s-lg: 32px;
  --s-xl: 52px;
  --s-xxl: 84px;
  --s-0: 0px;
  --c-base: #333;
  --c-main: #0da3f9;
  --c-main-alpha: rgba(13, 163, 249, 0.8);
  --c-main-light: #e8f6ff;
  --c-accent: #f59a2d;
  --c-gray: #707070;
  --c-gray-light: #ededed;
  --c-gray-dark: #595757;
  --c-gray-normaldark: #777777;
  --c-link: #0da3f9;
  --c-note: #f00;
  --c-placeholder: #8d8d8d;
  --c-file-pdf: #dd2c2c;
  --c-file-word: #1e57ad;
  --c-file-excel: #2d9654;
  --fz-base: 16px;
  --letter-spacing: 0.05em;
  --line-height: 2;
  --fz-md: clamp(0.93rem, 0.759rem + 0.76vw, 1.125rem);
  --fz-lg: clamp(1.125rem, 1.05rem + 0.32vw, 1.25rem);
  --heading-gutter-top: 3.125rem;
  --heading-gutter: 1.875rem;
  --box-shadow-primary: 5px 5px 10px rgba(0, 0, 0, 0.16);
  --svg-arrow: url('data:image/svg+xml;charset=UTF-8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 13"&gt;&lt;path d="M1,7.48c-.26,0-.52-.1-.7-.29C.11,7.01,0,6.76,0,6.5c0-.26,.11-.51,.3-.69,.18-.19,.44-.3,.7-.29h15.58s.07-.02,.09-.06c.02-.03,.02-.08,0-.11L12.24,1.57c-.18-.15-.3-.38-.31-.62-.02-.24,.06-.47,.23-.64,.15-.18,.37-.3,.6-.31,.24-.02,.48,.06,.66,.22l6.11,5.24c.31,.25,.49,.63,.48,1.04,0,.4-.17,.78-.49,1.04l-6.11,5.24c-.18,.16-.42,.24-.66,.22-.23-.01-.45-.12-.6-.31-.17-.17-.25-.41-.23-.64,.02-.24,.13-.46,.31-.62l4.42-3.78c.04-.07,0-.13-.09-.17H1Z" fill="%23535d60"/&gt;&lt;/svg&gt;');
  --svg-triangle: url('data:image/svg+xml;charset=UTF-8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 11"&gt;&lt;path id="b" d="M9.48,4.61c.48,.27,.66,.89,.39,1.38-.09,.17-.23,.31-.39,.4L1.48,10.87c-.48,.27-1.09,.09-1.36-.4C.04,10.33,0,10.16,0,9.99V1.01C0,.45,.45,0,1,0c.17,0,.33,.04,.48,.13L9.48,4.61Z" fill="%23747474"/&gt;&lt;/svg&gt;');
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased !important;
  -webkit-text-stroke: 1px transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  font-size: 10px;
}

body {
  overflow-x: hidden;
  background-color: #fff;
  color: var(--c-base);
  font-family: var(--ff-base);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: var(--line-height);
  word-break: break-word;
}
@media screen and (max-width: 600px) {
  body {
    font-size: 1.4rem;
  }
}

a,
a img {
  cursor: pointer;
  transition: all ease-out 0.1s;
}

/* img */
img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  vertical-align: bottom;
}

/* lazesize蟇ｾ蠢� */
@keyframes fadeShow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
img.lazyload {
  opacity: 0;
}

img.lazyloaded {
  animation-name: fadeShow;
  animation-duration: 2s;
}

img.fancybox-image {
  opacity: 1;
}

/* 繝ｪ繧ｹ繝郁ｦ∫ｴ� */
ol li {
  display: list-item;
  list-style: decimal inside;
  line-height: 2;
  margin: 0;
  font-size: 100%;
}

/* iframe */
iframe.instagram-media {
  max-height: 100%;
}
@media screen and (max-width: 600px) {
  iframe {
    max-height: 240px;
    width: 100%;
  }
}

/* form隕∫ｴ� */
input,
button,
select,
textarea {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type=checkbox],
input[type=radio],
select {
  appearance: auto;
}

button {
  cursor: pointer;
}

select::-ms-expand {
  display: none; /* 繝�ヵ繧ｩ繝ｫ繝医�繧ｹ繧ｿ繧､繝ｫ繧堤┌蜉ｹ(IE逕ｨ) */
}

input::placeholder {
  color: var(--c-placeholder);
}

/* Edge */
input::-ms-input-placeholder {
  color: var(--c-placeholder);
}

@media screen and (max-width: 600px) {
  input[type=button],
  input[type=text],
  input[type=submit] {
    border-radius: 0;
  }
}
/* Post
---------------------------------------------- */
.c-post {
  display: grid;
  grid-template-columns: var(--thumb-size, 280px) 1fr;
  align-items: start;
  gap: var(--grid-gap, 26px);
  padding-bottom: var(--posts-gutter, 30px);
  border-bottom: solid 1px #dcdcdc;
}
.c-post + .c-post {
  margin-top: var(--posts-gutter, 30px);
}
@media screen and (max-width: 600px) {
  .c-post {
    --grid-gap: 10px;
    --posts-gutter: 16px;
    --thumb-size: 119px;
    --title-fz: 15px;
  }
}
.c-post a {
  color: inherit;
  text-decoration: none;
}
.c-post a:hover, .c-post a:focus {
  text-decoration: underline;
}
.c-post a:hover img, .c-post a:focus img {
  opacity: 0.8;
}
.c-post.c-post--small {
  --posts-gutter: 15px;
  --thumb-size: 100px;
  --grid-gap: 15px;
  --title-fz: 14px;
  --post-header-gap: 0.5em;
}

.c-post__thumb {
  margin: 0;
}
.c-post__thumb img {
  object-fit: cover;
}
.c-post__thumb.c-post__thumb--square {
  position: relative;
}
.c-post__thumb.c-post__thumb--square::after {
  content: "";
  display: block;
  padding-top: 100%;
}
.c-post__thumb.c-post__thumb--square &gt; * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.c-post__thumb.c-post__thumb--square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-post__header &gt; * + * {
  margin-top: var(--post-header-gap, clamp(15px, 2.5vw, 20px));
}

.c-post__meta {
  line-height: 1;
}

.c-post--small .c-post__date {
  color: var(--c-base);
  font-size: 12px;
}
@media screen and (max-width: 600px) {
  .c-post__date {
    color: #aaa;
    font-size: 12px;
  }
}

.c-post__title {
  font-size: var(--title-fz, 20px);
  font-weight: bold;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
@media screen and (max-width: 600px) {
  .c-post__title {
    line-height: 1.3;
  }
}
@media screen and (max-width: 600px) {
  .c-post--small .c-post__title {
    line-height: 1.5;
  }
}
.c-post--small .c-post__title br {
  display: none;
}

.c-post__title-subtxt {
  display: block;
  color: var(--c-main);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.125;
}
.c-post__title-subtxt:not(:empty) {
  margin-top: 0.5em;
}
@media screen and (max-width: 600px) {
  .c-post__title-subtxt {
    display: none;
  }
}

/*
-----------------------------------------------------

  =Common Part

-----------------------------------------------------
*/
/* =Section
----------------------------------------------------- */
.section {
  padding: 80px 0;
}

/* =Heading
----------------------------------------------------- */
.h-main {
  --border-width: 10px;
  margin-top: 3em;
  margin-bottom: clamp(20px, 5vw, 30px);
  border-image: url(../images/tit-pattern-bg.png) 10;
  border-bottom-width: var(--border-width);
  border-bottom-style: solid;
  font-size: clamp(20px, 5vw, 36px);
  font-weight: bold;
  letter-spacing: 0.1em;
}

.h-main:first-child {
  margin-top: 0;
}

.h-main span {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: solid var(--border-width) var(--c-main);
  margin-bottom: calc(var(--border-width) * -1);
}

@media screen and (max-width: 600px) {
  .h-main {
    --border-width: 4px;
  }
}
/* =Buttons
-----------------------------------------------------*/
.btn-link {
  display: block;
  margin: auto;
  max-width: 220px;
  width: 100%;
  height: 40px;
  padding: 10px 0px;
  line-height: 20px;
  font-size: 1em;
  color: var(--c-base);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  background: url(../images/bg-pattern02.png);
  background-size: 780px auto;
}

.btn-link span {
  display: block;
  background: url(../images/i-arrow-btn.png) no-repeat 92% center;
  background-size: auto 8px;
}

.btn-link:hover {
  background-color: var(--c-main);
  color: #fff;
}

.btn-link:hover span {
  background-image: url(../images/i-arrow-btn-w.png);
  background-position: 92% center;
}

/* =Horizontal Rule
-----------------------------------------------------*/
hr {
  clear: both !important;
  border: 0;
  height: 1px;
  margin: clamp(20px, 3.3vw, 60px) 0;
  background-color: transparent;
}

/* =Decoration
-----------------------------------------------------*/
.fc-focus {
  color: #900;
}

.fc-theme {
  color: var(--c-main);
}

.span-theme {
  display: inline-block;
  background: var(--c-main);
  padding: 2px 12px;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
}

/* =List
----------------------------------------------------- */
/* Inline */
.list-inline li {
  display: inline-block;
  margin: 0 15px 0 0;
}

.taR .list-inline li {
  margin: 0 0 0 15px;
}

.list li {
  margin-bottom: 15px;
  font-weight: bold;
}

.list li span {
  display: block;
  font-weight: normal;
  font-size: 0.9em;
  margin-top: 0.5em;
}

/* =Frame
----------------------------------------------------- */
.frame {
  padding: 2.5em;
  margin-bottom: 1.5em;
}

.frame-border {
  border: solid 2px var(--c-main);
}

/* 繝ｭ繝ｼ繝�ぅ繝ｳ繧ｰ隕∫ｴ�
---------------------------------------------- */
/* loading animation setting
--------------------------------------------------*/
@-webkit-keyframes loadingAnim {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
    -webkit-transform: translate(100%);
    transform: translate(100%);
  }
}
@keyframes loadingAnim {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
    -webkit-transform: translate(100%);
    transform: translate(100%);
  }
}
@-webkit-keyframes loadingAnim_text {
  0% {
    opacity: 1;
    color: var(--c-main);
  }
  50% {
    color: #999;
  }
  100% {
    opacity: 0.5;
    color: #fff;
  }
}
@keyframes loadingAnim_text {
  0% {
    opacity: 1;
    color: var(--c-main);
  }
  50% {
    color: #999;
  }
  100% {
    opacity: 0.5;
    color: #fff;
  }
}
/* ------------------------------------------ */
.loaded .wave-wrap {
  display: none;
}

.wave-wrap {
  /* border-radius: 5px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
  background: #fbfcee;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); */
  position: relative;
  width: 100%;
  height: 100%;
}

.wave-wrap:after {
  content: "";
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #0af, rgba(221, 238, 255, 0) 80%, rgba(255, 255, 255, 0.5));
  z-index: 11;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.wave {
  opacity: 0.4;
  position: absolute;
  bottom: 30%;
  left: 50%;
  background: #0af;
  width: 140%;
  height: 140vw;
  margin-left: -70%;
  -webkit-transform-origin: 50% 48%;
  transform-origin: 50% 48%;
  border-radius: 43%;
  -webkit-animation: drift 5000ms infinite linear;
  animation: drift 5000ms infinite linear;
}

.wave-three {
  -webkit-animation: drift 7000ms infinite linear;
  animation: drift 7000ms infinite linear;
}

.wave-two {
  -webkit-animation: drift 9000ms infinite linear;
  animation: drift 9000ms infinite linear;
  opacity: 0.1;
  background: yellow;
}

@-webkit-keyframes drift {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes drift {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.wave-title {
  line-height: 1;
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: inline-block;
  overflow: hidden;
  width: 180px;
  height: 135px;
  margin: auto;
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  transition-delay: 0.6s;
  text-align: center;
}

.wave-title:before {
  display: block;
  content: url(../images/logo_w.svg);
  width: 100%;
  -webkit-animation: loadingAnim_text 1s ease 0.1s infinite alternate both;
  animation: loadingAnim_text 1s ease 0.1s infinite alternate both;
  color: #fff;
  will-change: opacity;
}

.loaded .wave-title {
  overflow: hidden;
  height: 0;
}

.loaded .wave-title:after,
.loaded .wave-title:before {
  -webkit-animation: none;
  animation: none;
}

.loaded .wave-title:before {
  content: url(../images/loaded.svg);
}

/* 2蝗樒岼莉･髯阪�繧｢繧ｯ繧ｻ繧ｹ譎�
---------------------------------------------- */
.loadingAnim {
  text-align: center;
}

.loadingAnim_line {
  line-height: 1;
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: inline-block;
  overflow: hidden;
  width: 120px;
  height: 90px;
  margin: auto;
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  transition-delay: 0.6s;
  text-align: center;
}

.loadingAnim_line:after {
  position: absolute;
  z-index: 100;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 0;
  height: 100%;
  margin: auto auto auto 0;
  content: " ";
  -webkit-animation: loadingAnim 2s ease-in-out 0.1s infinite normal backwards;
  animation: loadingAnim 2s ease-in-out 0.1s infinite normal backwards;
  background-color: #fff;
  will-change: transform, width;
}

.loadingAnim_line:before {
  display: block;
  content: url(../images/loading.svg);
  width: 100%;
  -webkit-animation: loadingAnim_text 1s ease 0.1s infinite alternate both;
  animation: loadingAnim_text 1s ease 0.1s infinite alternate both;
  color: #fff;
  will-change: opacity;
}

.loaded .loadingAnim_line {
  overflow: hidden;
  height: 0;
}

.loaded .loadingAnim_line:after,
.loaded .loadingAnim_line:before {
  -webkit-animation: none;
  animation: none;
}

.loaded .loadingAnim_line:before {
  content: url(../images/loaded.svg);
}

.loadingAnim:before,
.loadingAnim:after {
  line-height: 1;
  position: fixed;
  z-index: 99;
  right: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 50%;
  margin-right: auto;
  margin-left: auto;
  content: " ";
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  transition-delay: 0.3s;
  background-color: #fff;
}

.loadingAnim:before {
  top: 0;
}

.loadingAnim:after {
  bottom: 0;
}

.loaded .loadingAnim:before {
  height: 0;
  -webkit-transform: translateY(-1%);
  -ms-transform: translateY(-1%);
  transform: translateY(-1%);
}

.loaded .loadingAnim:after {
  height: 0;
  -webkit-transform: translateY(1%);
  -ms-transform: translateY(1%);
  transform: translateY(1%);
}

/* 險倅ｺ句叙蠕怜ｭ励�繝ｭ繝ｼ繝�ぅ繝ｳ繧ｰ
---------------------------------------------- */
.posts-loader {
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: var(--c-main);
  background: linear-gradient(to right, var(--c-main) 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.posts-loader:before {
  width: 50%;
  height: 50%;
  background: var(--c-main);
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}

.posts-loader:after {
  background: #fff;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* Header
---------------------------------------------- */
#container {
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 600px) {
  #container {
    padding-top: 60px;
  }
}

.wrapper {
  max-width: calc(var(--inner-width) + var(--inner-gutter) * 2);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--inner-gutter);
  padding-left: var(--inner-gutter);
}

.l-has-sidebar {
  --column-gutter: 60px 30px;
  --sidebar-width: 310px;
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--column-gutter);
  padding-top: 36px;
  padding-bottom: 90px;
}
.l-has-sidebar &gt; * {
  min-width: 0;
}
@media screen and (max-width: 1024px) {
  .l-has-sidebar {
    grid-template-columns: 1fr;
    margin-right: auto;
    margin-left: auto;
    max-width: calc(684px + var(--inner-gutter) * 2);
  }
}

.l-has-sidebar__sidebar {
  position: relative;
}
@media not all and (max-width: 1024px) {
  .l-has-sidebar__sidebar {
    padding-left: 30px;
  }
  .l-has-sidebar__sidebar::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background-color: #dcdcdc;
  }
}

/* Header
---------------------------------------------- */
.l-header {
  width: 100vw;
  height: auto;
  background-color: #fff;
  transition: all ease-out 0.1s;
}
@media screen and (max-width: 600px) {
  .l-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-header);
  }
}

.l-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "empty logo aside";
  gap: 10px;
  position: relative;
  z-index: calc(var(--z-header) - 1);
  padding-top: 25px;
  background-color: inherit;
}
@media screen and (max-width: 1024px) {
  .l-header__inner {
    grid-template-columns: auto 1fr;
    grid-template-areas: "logo aside";
    padding-top: 10px;
  }
}
@media screen and (max-width: 600px) {
  .l-header__inner {
    padding-top: 0;
    padding-right: 0;
    border-bottom: 1px solid #dbdcde;
  }
}

.l-header-logo {
  grid-area: logo;
  transition: all ease-out 0.2s;
  max-width: 120px;
}
.home .l-header-logo {
  max-width: 160px;
}
@media screen and (max-width: 600px) {
  .l-header-logo {
    align-self: center;
    width: 60px;
  }
}
.l-header-logo .sub {
  margin-bottom: 10px;
}
@media screen and (max-width: 1024px) {
  .l-header-logo .sub {
    display: none;
  }
}
.l-header-logo img {
  display: block;
  margin: auto;
}

.l-header-aside {
  grid-area: aside;
  place-self: end;
}
@media screen and (max-width: 600px) {
  .l-header-aside {
    display: flex;
    align-items: center;
  }
}

/* SNS HEAT */
.l-header-sns {
  display: grid;
  justify-items: end;
  margin-bottom: 1em;
}
@media screen and (max-width: 600px) {
  .l-header-sns {
    display: none;
  }
}

.l-header-sns__list {
  display: flex;
  gap: 20px;
}

.l-header-sns__item &gt; a {
  display: block;
  transition: all ease-out 0.1s;
  color: #000;
}
.l-header-sns__item &gt; a:hover, .l-header-sns__item &gt; a:focus {
  transform: translate3d(0, -3px, 0);
  color: var(--hover-color, #000);
}
.l-header-sns__item.l-header-sns__item--instagram {
  --hover-color: #d93177;
}
.l-header-sns__item.l-header-sns__item--facebook {
  --hover-color: #3b5998;
}
.l-header-sns__item.l-header-sns__item--twitter {
  --hover-color: #55acee;
}

/* Search Form */
.l-header-search {
  width: 340px;
}
@media screen and (max-width: 600px) {
  .l-header-search {
    width: auto;
  }
}

/* Footer
---------------------------------------------- */
.l-footer-nav {
  display: flex;
  position: fixed;
  z-index: var(--z-footer-nav);
  bottom: 0;
  left: 0;
  width: calc(100% - 60px);
  height: var(--sp-bottom-nav-height);
  background-color: rgba(255, 154, 45, 0.9);
  font-weight: bold;
}
@media not all and (max-width: 600px) {
  .l-footer-nav {
    display: none;
  }
}

.l-footer-nav__menu {
  position: relative;
  display: grid;
  place-items: center;
  flex-grow: 1;
  min-width: 0;
}
.l-footer-nav__menu::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 27px;
  background-color: #fff;
}

.l-footer-nav__menu-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-right: 1.4em;
  color: #fff;
  letter-spacing: 0;
  line-height: 1;
}
.l-footer-nav__menu-toggle::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 8px;
  height: 6px;
  background-color: #fff;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.l-footer-nav__menu-toggle.is-open::after {
  transform: translateY(-50%) scaleY(-1);
}
.l-footer-nav__menu-toggle .txt-recommend {
  margin-bottom: 0.5em;
  font-size: 10px;
}
.l-footer-nav__menu-toggle .txt-recommend::before, .l-footer-nav__menu-toggle .txt-recommend::after {
  content: "";
  display: inline-block;
  margin: 0 3px;
  width: 1px;
  height: 9px;
  border-radius: 2px;
  background-color: #fff;
  vertical-align: bottom;
}
.l-footer-nav__menu-toggle .txt-recommend::before {
  transform: rotate(-30deg);
}
.l-footer-nav__menu-toggle .txt-recommend::after {
  transform: rotate(30deg);
}
.l-footer-nav__menu-toggle .txt-menu {
  font-size: clamp(14px, 3.5vw, 16px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.l-footer-nav__activityspot {
  flex-grow: 1;
  min-width: 0;
}

.l-footer-nav__activityspot-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #fff;
  font-size: clamp(12px, 3vw, 14px);
  text-decoration: none;
}
.l-footer-nav__activityspot-link::after {
  content: "";
  margin-left: 1.5em;
  width: 6px;
  height: 9px;
  background-image: url('data:image/svg+xml;charset=UTF-8,&lt;svg xmlns="http://www.w3.org/2000/svg" width="6" height="9" viewBox="0 0 6 9"&gt;&lt;path d="M6,4.5L1.38,9l-1.38-1.34,3.25-3.16L0,1.34,1.38,0,6,4.5Z" fill="%23fff"/&gt;&lt;/svg&gt;');
  background-repeat: no-repeat;
  background-size: contain;
}
.l-footer-nav__activityspot-link img {
  margin-right: 11px;
}

.l-footer {
  background: url(../images/footer_bg.jpg) no-repeat center;
  background-size: cover;
  position: relative;
}
@media screen and (max-width: 600px) {
  .l-footer {
    padding-bottom: var(--sp-bottom-nav-height);
  }
}

.l-footer__inner {
  padding: 100px 0 30px;
}
@media screen and (max-width: 600px) {
  .l-footer__inner {
    padding: 15px 0;
  }
}

#btn-pagetop {
  position: fixed;
  z-index: var(--z-go-top);
  bottom: 0;
  right: 0;
  width: var(--sp-bottom-nav-height);
  height: var(--sp-bottom-nav-height);
}

.l-footer-sub-nav {
  font-size: 11px;
  font-weight: bold;
  text-align: center;
}
.l-footer-sub-nav li {
  display: inline-block;
}
.l-footer-sub-nav li:not(:last-child)::after {
  content: "��";
  margin-right: 1em;
  margin-left: 1em;
}
.l-footer-sub-nav a {
  color: inherit;
  text-decoration: underline;
}
.l-footer-sub-nav a:hover, .l-footer-sub-nav a:focus {
  text-decoration: none;
}

.l-footer-copyright {
  padding-top: 1em;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 600px) {
  .l-footer-copyright {
    font-size: 10px;
  }
}

/* Sidebar
---------------------------------------------- */
.l-sidebar-widget + .l-sidebar-widget {
  margin-top: clamp(20px, 5vw, 40px);
}
@media screen and (max-width: 600px) {
  .l-sidebar-widget:not(.l-sidebar-widget--sm-no-bgc) {
    padding: 15px;
    background-color: #f1f1f1;
  }
}

.l-sidebar-widget__title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25em 1.3125em;
  margin-bottom: 1.125em;
  padding-bottom: 0.75em;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
}
.l-sidebar-widget__title::before, .l-sidebar-widget__title::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--c-main-light);
}
.l-sidebar-widget__title::after {
  max-width: 100px;
  background-color: var(--c-main);
}
@media screen and (max-width: 600px) {
  .l-sidebar-widget__title::after {
    max-width: none;
  }
}
.l-sidebar-widget__title .slug {
  flex-shrink: 0;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.l-sidebar-widget__title .txt {
  font-size: 12px;
}
@media screen and (max-width: 600px) {
  .l-sidebar-widget__title {
    flex-direction: column;
  }
}

/* 繝舌リ繝ｼ繝ｪ繧ｹ繝�
---------------------------------------------- */
.l-sidebar-bnrs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(auto, 280px));
  justify-content: center;
  gap: 10px;
}
@media screen and (max-width: 600px) {
  .l-sidebar-bnrs {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
}

.l-sidebar-bnr {
  display: block;
}
.l-sidebar-bnr a:hover img, .l-sidebar-bnr a:focus img {
  filter: grayscale(0%);
}
.l-sidebar-bnr img {
  transition: filter ease-out 0.1s;
  filter: grayscale(100%);
  width: 100%;
}

/* 縺翫☆縺吶ａ繝｡繝九Η繝ｼ
---------------------------------------------- */
@media screen and (max-width: 600px) {
  .l-sidebar-widget.l-sidebar-widget--menu-nav {
    margin: 0;
    padding: 0;
  }
  .l-sidebar-widget.l-sidebar-widget--menu-nav .l-sidebar-widget__title {
    display: none;
  }
}

/* SNS
---------------------------------------------- */
.l-sidebar-sns__list {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.l-sidebar-sns__item a {
  filter: grayscale(1);
}
.l-sidebar-sns__item a:hover, .l-sidebar-sns__item a:focus {
  filter: none;
}

/* Tag Cloud
---------------------------------------------- */
.l-sidebar-tag-cloud {
  line-height: 1.2;
}
.l-sidebar-tag-cloud + .l-sidebar-tag-cloud {
  margin-top: 30px;
}
.l-sidebar-tag-cloud a {
  display: inline-block;
  margin-right: 1em;
  color: #666;
  font-weight: bold;
  text-decoration: underline;
}
.l-sidebar-tag-cloud a:hover, .l-sidebar-tag-cloud a:focus {
  text-decoration: none;
  color: #f19d43;
}

/* Post Ranking
---------------------------------------------- */
.tab_area {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.tab_area &gt; * {
  width: 32%;
  text-align: center;
  display: inline-block;
  background-color: #ccc;
  padding: 10px 0;
  transition: 0.2s;
}

.tab_area &gt; *:hover {
  cursor: pointer;
}

.tab_area &gt; *.active {
  background-color: #fff;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.tab_panel {
  display: none;
}

.tab_panel.active {
  display: flex;
  transition: 0.2s;
}

@media screen and (min-width: 0px) and (max-width: 599px) {
  .tab_area &gt; *.active {
    background-color: #f1f1f1;
  }
}
/* =============================== */
/* 2022.07 繧ｵ繧､繝峨ヰ繝ｼ繝ｩ繝ｳ繧ｭ繝ｳ繧ｰ謾ｹ菫ｮ */
/* =============================== */
.wpp-list {
  counter-reset: number 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 10px;
}

.wpp-box {
  counter-increment: number 1;
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-areas: "img badge" "img title" "img date";
  align-items: flex-start;
  column-gap: 10px;
  padding-bottom: 15px;
  border-bottom: 1px solid #dcdcdc;
}

.wpp-box:nth-child(-n+3) {
  grid-row: span 2;
  grid-column: span 2;
}

.wpp-box:nth-child(n+4) {
  grid-template-columns: auto minmax(50%, 1fr);
  grid-template-rows: 16px auto 1fr;
  grid-template-areas: "img badge" "img date" "title title";
}

.wpp-box-img {
  grid-area: img;
}

.wpp-box-img a:hover img {
  opacity: 0.8;
}

.wpp-box-badge {
  grid-area: badge;
  width: 1.6em;
  height: 1.6em;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0;
}

.wpp-box-badge::after {
  content: counter(number);
  display: inline-block;
}

.wpp-box:nth-child(-n+3) .wpp-box-badge {
  width: 2em;
  height: 2em;
}

.wpp-box:nth-child(-n+3) .wpp-box-badge::after {
  color: transparent;
  width: 100%;
  height: 100%;
  background-image: url(../images/post-ranking/icon_ranking01.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.wpp-box:nth-child(1) .wpp-box-badge::after {
  background-image: url(../images/post-ranking/icon_ranking01.png);
}

.wpp-box:nth-child(2) .wpp-box-badge::after {
  background-image: url(../images/post-ranking/icon_ranking02.png);
}

.wpp-box:nth-child(3) .wpp-box-badge::after {
  background-image: url(../images/post-ranking/icon_ranking03.png);
}

.wpp-box:nth-child(n+4) .wpp-box-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid currentColor;
  color: #a0a0a0;
}

.wpp-box-date {
  grid-area: date;
  font-size: 12px;
  letter-spacing: 0;
}

.wpp-box-title {
  grid-area: title;
  font-size: clamp(12px, 3.2vw, 13px);
  font-weight: bold;
}

.wpp-box:nth-child(n+4) .wpp-box-title {
  padding-top: 0.5em;
}

.wpp-box-title a {
  color: inherit;
  text-decoration: none;
}

.wpp-box-title a:hover {
  text-decoration: underline;
}

/* 繝上Φ繝舌�繧ｬ繝ｼ繝｡繝九Η繝ｼ
---------------------------------------------- */
@media not all and (max-width: 600px) {
  .l-hamburger {
    display: none !important;
  }
}
@media screen and (max-width: 600px) {
  .l-hamburger {
    --hamburger-size: 60px;
    margin-left: 10px;
  }
  .l-hamburger__open,
  .l-hamburger__close {
    display: block;
    width: var(--hamburger-size);
    height: var(--hamburger-size);
    background-color: var(--c-main);
    color: #fff;
    font-size: 26px;
    line-height: var(--hamburger-size);
    text-align: center;
  }
  .l-hamburger__close {
    display: none;
  }
}
/* Gnav
---------------------------------------------- */
.l-gnav {
  --nav-bg-color: var(--c-main);
  --maintxt-color: var(--c-main);
  --subtxt-color: #89d0fc;
  padding-top: 20px;
  border-bottom: 1px solid #c1c2c3;
  white-space: nowrap;
}
@media screen and (max-width: 600px) {
  .l-gnav {
    position: absolute;
    position: fixed;
    z-index: var(--z-drawer);
    top: 0;
    left: 0;
    width: 100vw;
    height: auto;
    max-height: 100vh;
    padding: 0;
    border-bottom: none;
    overflow-y: scroll;
    text-align: center;
    transform: translate3d(0, -100%, 0);
    transition: all ease-out 0.2s;
    visibility: hidden;
  }
  .l-gnav.on {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

@media screen and (max-width: 600px) {
  .l-gnav__inner {
    padding-top: 70px;
    background-color: #fff;
  }
}

.l-gnav__list {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 1200px) {
  .l-gnav__list {
    overflow-x: scroll;
    justify-content: flex-start;
  }
}
@media screen and (max-width: 600px) {
  .l-gnav__list {
    overflow: hidden;
    flex-direction: column;
    align-items: center;
  }
}

.l-gnav__item {
  position: relative;
}
@media screen and (max-width: 600px) {
  .l-gnav__item {
    width: 100%;
  }
}
.l-gnav__item &gt; a {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0.525em 20px;
  color: var(--maintxt-color);
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
}
.l-gnav__item &gt; a em {
  display: block;
  font-size: 12px;
  color: var(--subtxt-color);
}
.l-gnav__item &gt; a:hover, .l-gnav__item &gt; a:focus, .active &gt; .l-gnav__item &gt; a {
  --maintxt-color: #fff;
  --subtxt-color: #fff;
  background-color: var(--nav-bg-color);
}
.l-gnav__item.l-gnav__item--archive {
  --nav-bg-color: #f19d43;
  --maintxt-color: #999;
  --subtxt-color: #999;
  margin-left: -1px;
}
.l-gnav__item.l-gnav__item--archive::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1px;
  height: calc(100% - 1em);
  background-color: #999;
}
@media screen and (max-width: 600px) {
  .l-gnav__item.l-gnav__item--archive::before {
    content: none;
  }
}

.l-gnav-sub-nav {
  font-size: 16px;
  font-weight: bold;
}

.l-gnav-sub-nav__item + .l-gnav-sub-nav__item {
  margin-top: 0.5em;
}
.l-gnav-sub-nav__item a {
  color: var(--c-base);
  text-decoration: none;
}

.l-gnav-sns {
  width: 100%;
  background-color: #f1f1f1;
}
@media not all and (max-width: 600px) {
  .l-gnav-sns {
    display: none;
  }
}

.l-gnav-sns__list {
  display: flex;
}

.l-gnav-sns__item {
  width: 100%;
}
.l-gnav-sns__item &gt; a {
  display: block;
  padding: 0.5em;
  color: var(--c-base);
  font-size: 14px;
}

.l-gnav__overlay {
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 200vh;
  display: none;
}
@media not all and (max-width: 600px) {
  .l-gnav__overlay {
    display: none !important;
  }
}

/* Breadcrumbs
---------------------------------------------- */
.l-breadcrumbs {
  background-color: var(--c-main);
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
}
.l-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}
.l-breadcrumbs a:hover, .l-breadcrumbs a:focus {
  text-decoration: underline;
}
.home .l-breadcrumbs {
  display: none;
}

.l-breadcrumbs__inner {
  display: flex;
  position: relative;
  padding-left: 45px;
}
.l-breadcrumbs__inner::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background-image: url('data:image/svg+xml;charset=UTF-8,&lt;svg xmlns="http://www.w3.org/2000/svg" width="23" height="25" viewBox="0 0 23 25"&gt;&lt;path d="M22.8,11.13L11.91,.17s-.04-.03-.06-.04c-.02-.02-.04-.03-.07-.05-.04-.03-.09-.04-.14-.06-.02,0-.04,0-.06-.01-.05,0-.11,0-.16,0-.02,0-.04,0-.06,.01-.05,.01-.1,.03-.14,.06-.02,.01-.05,.03-.07,.04-.02,.01-.04,.03-.06,.04L.18,11.04C.06,11.15,0,11.3,0,11.46v12.94C0,24.73,.27,25,.6,25H10.08c.33,0,.6-.27,.6-.6v-5.52c0-.33,.27-.6,.6-.6h.44c.33,0,.6,.27,.6,.6v5.52c0,.33,.27,.6,.6,.6h9.48c.33,0,.6-.27,.6-.6V11.56c0-.16-.08-.32-.2-.43Zm-14.55,5.31v5.52c0,.33-.27,.6-.6,.6H3.01c-.33,0-.6-.27-.6-.6V12.48c0-.16,.06-.31,.18-.43L11.05,3.6c.23-.23,.61-.23,.84,0,0,0,0,0,0,0l8.48,8.54c.11,.11,.18,.27,.17,.43v9.39c0,.33-.27,.6-.6,.6h-4.65c-.33,0-.6-.27-.6-.6v-5.52c0-.33-.27-.6-.6-.6h-5.28c-.32,.01-.58,.28-.58,.6Z" fill="%23fff"/&gt;&lt;/svg&gt;');
  background-repeat: no-repeat;
  background-size: contain;
  width: 23px;
  height: 25px;
}

/* 縺翫☆縺吶ａ繝｡繝九Η繝ｼ
---------------------------------------------- */
.l-recommend-menu {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.5;
}
@media screen and (max-width: 600px) {
  .l-recommend-menu {
    position: fixed;
    z-index: var(--z-footer-nav-drawer);
    bottom: var(--sp-bottom-nav-height);
    left: 0;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    padding: 15px;
    width: 100vw;
    background-color: rgba(241, 241, 241, 0.9);
    box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.16);
    font-size: 12px;
  }
  .l-recommend-menu.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
}

@media screen and (max-width: 600px) {
  .l-recommend-menu__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #c1c2c3;
    border-left: 1px solid #c1c2c3;
    background-color: rgba(255, 255, 255, 0.5);
  }
}

.l-recommend-menu__item {
  border-bottom: 1px solid #c1c2c3;
}
@media screen and (max-width: 600px) {
  .l-recommend-menu__item {
    border-right: 1px solid #c1c2c3;
  }
}

.l-recommend-menu__link {
  display: flex;
  align-items: center;
  padding: 14px;
  color: var(--c-base);
  text-decoration: none;
}
.l-recommend-menu__link &gt; img {
  flex-shrink: 0;
}
@media not all and (max-width: 600px) {
  .l-recommend-menu__link &gt; img {
    margin-right: 16px;
  }
}
@media screen and (max-width: 600px) {
  .l-recommend-menu__link {
    flex-direction: column;
    padding: 10px 5px;
  }
}

/*
-----------------------------------------------------

  =Toppage

-----------------------------------------------------
*/
/* common
---------------------------------------------- */
#wrapper.wrapper-font {
  font-family: var(--ff-noto);
}

.hm-section + .hm-section {
  padding-top: 80px;
}

.hm-list-flex {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 1024px) {
  .hm-list-flex {
    display: block;
  }
}

@media screen and (max-width: 1024px) {
  .hm-sp-img-mainvisual {
    min-height: 200px;
    height: 48vw;
  }
}
@media screen and (max-width: 1024px) {
  .hm-sp-img-mainvisual img {
    height: 100%;
    object-fit: cover;
  }
}

.hm-sp-img-bg {
  background-position: right;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .hm-sp-img-bg {
    min-height: 200px;
  }
}
@media screen and (max-width: 1024px) {
  .hm-sp-img-bg .hm-sp-img-bg-title {
    position: absolute;
    top: 50%;
  }
}

.hm-about-lead-container {
  padding-top: 50px;
  padding-bottom: 85px;
}
@media screen and (max-width: 1024px) {
  .hm-about-lead-container {
    padding-top: 25px;
    padding-bottom: 45px;
  }
}

.hm-about-commonTtl01 {
  margin-top: 0;
}
.hm-about-commonTtl01--mt {
  margin-top: 65px;
}

.hm-about-commonTtl01 .en {
  letter-spacing: 0.04em;
}

.hm-about-heading {
  font-size: 34px;
  letter-spacing: 0.04em;
  --ff-base: var(--ff-serif);
  font-family: var(--ff-base);
}
.hm-about-heading--ls {
  letter-spacing: 0.02em;
}
@media screen and (max-width: 1024px) {
  .hm-about-heading {
    font-size: 18px;
  }
}

.hm-about-text {
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.9444;
  margin-top: 27px;
}
@media screen and (max-width: 1024px) {
  .hm-about-text {
    font-size: 14px;
    margin-top: 8px;
  }
}

.hm-about-main-text {
  text-align: center;
}

.hm-about-history {
  padding-top: 1px;
  padding-bottom: 50px;
  background-color: #f8f8f8;
}

.hm-about__inner {
  max-width: 1110px !important;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}

.hm-about-main-box {
  margin-top: 50px;
}

/* 迺ｰ蠅��迺ｰ蠅�ｿ晏�縺ｮ蜿悶ｊ邨�∩
---------------------------------------------- */
.hm-about-bg-box {
  height: 0;
  padding-top: 11.4vw;
  padding-bottom: 11.4vw;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background-image: url(../img/home/pic_bcimg01.jpg);
  background-image: url(../img/home/webp/pic_bcimg01.webp);
  background-size: cover;
}
.hm-about-bg-box--mt {
  margin-top: 90px;
}
@media screen and (max-width: 1024px) {
  .hm-about-bg-box--mt {
    margin-top: 30px;
  }
}

.hm-about-bg-box-second {
  background-image: url(../img/home/pic_bcimg02.jpg);
  background-image: url(../img/home/webp/pic_bcimg02.webp);
  background-size: cover;
}

.hm-about-bg-box-tertiary {
  background-image: url(../img/home/pic_bcimg03.jpg);
  background-image: url(../img/home/webp/pic_bcimg03.webp);
  background-size: cover;
}

.hm-about-bg-title {
  max-width: 1080px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  transform: translateY(-50%);
}

.hm-about-bg-heading {
  font-size: 36px;
  letter-spacing: 0.05em;
  font-weight: bold;
  color: #fff;
  line-height: 1;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
@media screen and (max-width: 1024px) {
  .hm-about-bg-heading {
    font-size: 30px;
    line-height: 1.4;
  }
}
.hm-about-bg-heading--shadow {
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.8);
}

.hm-about-bg-text {
  font-size: 24px;
  letter-spacing: 0.05em;
  font-weight: bold;
  color: #fff;
  margin-top: 25px;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
@media screen and (max-width: 1024px) {
  .hm-about-bg-text {
    font-size: 18px;
    margin-top: 15px;
  }
}
.hm-about-bg-text--shadow {
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.8);
}

/* 2繧ｫ繝ｩ繝�繧ｳ繝ｳ繝�Φ繝��繝�ム繝ｼ
---------------------------------------------- */
.hm-about-column-title {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.04em;
  margin-top: 65px;
}
@media screen and (max-width: 1024px) {
  .hm-about-column-title {
    font-size: 18px;
    margin-top: 25px;
  }
}

.hm-about-column-text {
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.04em;
  margin-top: 5px;
  line-height: 2.125;
}
@media screen and (max-width: 1024px) {
  .hm-about-column-text {
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.9444;
  }
}

.hm-about-column-main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
  row-gap: 50px;
  margin-top: 24px;
}
@media screen and (max-width: 1024px) {
  .hm-about-column-main {
    grid-template-columns: repeat(1, 1fr);
    margin-top: 25px;
    row-gap: 45px;
  }
}
.hm-about-column-main--alcenter {
  align-items: center;
}
.hm-about-column-main--big {
  margin-top: 41px;
}
@media screen and (max-width: 1024px) {
  .hm-about-column-main--big {
    margin-top: 45px;
  }
}
.hm-about-column-main--huge {
  margin-top: 50px;
}
@media screen and (max-width: 1024px) {
  .hm-about-column-main--huge {
    margin-top: 40px;
  }
}
.hm-about-column-main--three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 1024px) {
  .hm-about-column-main--three {
    grid-template-columns: repeat(1, 1fr);
  }
}

.hm-about-column-item {
  width: 100%;
}

.hm-about-column-item {
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.04em;
}

.hm-about-column-item a {
  transition: all 0.2s;
}

.hm-about-column-item a:hover,
.hm-about-column-item a:focus {
  opacity: 0.6;
}

.hm-about-column-item__title {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.02em;
  margin-top: 14px;
  font-family: var(--ff-base);
}
.hm-about-column-item__title--big {
  font-size: 24px;
  line-height: 1.41666;
}
@media screen and (max-width: 1024px) {
  .hm-about-column-item__title--big {
    font-size: 18px;
    line-height: 1.75;
  }
}

.hm-about-column-item__text {
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.04em;
  margin-top: 4px;
  line-height: 2.14;
}
.hm-about-column-item__text--big {
  font-size: 16px;
  line-height: 2.125;
  margin-top: 12px;
}

.hm-about-column-item {
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.04em;
}

/* OTHERS繝ｻ縺昴�莉悶�蜿悶ｊ邨�∩
---------------------------------------------- */
.hm-about-others__text {
  min-height: 60px;
}

/* 驥｣蜈ｷ莠区･ｭ縺ｮ蜿悶ｊ邨�∩
---------------------------------------------- */
.hm-about-fishing-bg-box {
  height: 0;
  padding-top: 11.4vw;
  padding-bottom: 11.4vw;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background-image: url(../img/fishing/pic_bcimg01.jpg);
  background-image: url(../img/fishing/webp/pic_bcimg01.webp);
  background-size: cover;
}
.hm-about-fishing-bg-box--mt {
  margin-top: 92px;
}
@media screen and (max-width: 1024px) {
  .hm-about-fishing-bg-box--mt {
    margin-top: 50px;
  }
}

.hm-about-fishing-bg-box-second {
  background-image: url(../img/fishing/pic_bcimg02.jpg);
  background-image: url(../img/fishing/webp/pic_bcimg02.webp);
  background-size: cover;
}

@media screen and (max-width: 1024px) {
  .hm-about-column-main--row {
    row-gap: 0 !important;
  }
}

.hm-about-fishing-bg-title {
  max-width: 1110px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  transform: translateY(-50%);
}

.hm-about-fishing-bg-heading {
  font-size: 36px;
  letter-spacing: 0.05em;
  font-weight: bold;
  color: #fff;
  line-height: 1;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
@media screen and (max-width: 1024px) {
  .hm-about-fishing-bg-heading {
    font-size: 30px;
    line-height: 1.4;
  }
}

.hm-about-fishing-bg-text {
  font-size: 24px;
  letter-spacing: 0.05em;
  font-weight: bold;
  color: #fff;
  margin-top: 25px;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
@media screen and (max-width: 1024px) {
  .hm-about-fishing-bg-text {
    font-size: 18px;
    margin-top: 15px;
  }
}

/* SERIES
---------------------------------------------- */
.hm-series-archive {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
@media screen and (max-width: 600px) {
  .hm-series-archive {
    gap: 18px;
  }
}

/* SP繝ｪ繝ｼ繝ｫ繝翫ン */
.hm-reel-nav {
  --nav-bg-color: var(--c-main);
  --maintxt-color: var(--c-main);
  --subtxt-color: #89d0fc;
  white-space: nowrap;
  margin: 0 calc(var(--inner-gutter) * -1) 16px;
}
@media not all and (max-width: 600px) {
  .hm-reel-nav {
    display: none;
  }
}

.hm-reel-nav__list {
  display: flex;
  overflow-x: scroll;
  align-items: flex-end;
  justify-content: flex-start;
}

.hm-reel-nav__link {
  --border-color: #c1c2c3;
  position: relative;
  z-index: 1;
  display: block;
  padding: 0.7em;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  color: var(--maintxt-color);
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.65;
}
.hm-reel-nav__item:not(:last-child) .hm-reel-nav__link {
  border-right: 1px solid var(--border-color);
}
.hm-reel-nav__link em {
  display: block;
  font-size: 10px;
  color: var(--subtxt-color);
}
.hm-reel-nav__link.current {
  --maintxt-color: #fff;
  --subtxt-color: #fff;
  --border-color: transparent;
  padding: 1em;
  background-color: var(--nav-bg-color);
}

/* =PICK UP
----------------------------------------------------- */
.hm-pickup-container {
  position: relative;
  padding: 50px 50px 20px;
  border-radius: 10px;
  background-color: var(--c-main-light);
}
@media screen and (max-width: 600px) {
  .hm-pickup-container {
    padding: 56px 42px 20px;
  }
}

.hm-pickup__title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hm-pickup__title::first-letter {
  color: var(--c-main);
}

.hm-pickup-archive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  justify-items: center;
  gap: 24px 32px;
}

.hm-pickup-post {
  color: var(--c-base);
  text-decoration: none;
  transition: 0.3s ease-in-out;
}
.hm-pickup-post:hover, .hm-pickup-post:focus {
  opacity: 0.8;
  text-decoration: underline;
}

.hm-pickup-post__thumb {
  text-align: center;
}

.hm-pickup-post__header {
  margin-top: var(--s-xs);
}

.hm-pickup-post__title {
  font-size: clamp(16px, 4vw, 18px);
  font-weight: bold;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.hm-pickup-post__date {
  font-size: clamp(14px, 3.5vw, 16px);
  letter-spacing: 0;
}

/* 20230926縲css霑ｽ蜉� */
.hm-about-apparel-bg-box {
  height: 0;
  padding-top: 11.4vw;
  padding-bottom: 11.4vw;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background-image: url(../img/apparel/pic_attempt01.jpg);
  background-size: cover;
  background-position: center;
}
.hm-about-apparel-bg-heading{
  line-height: 1.4;
}

/* =SNAP SHOY
----------------------------------------------------- */
ul#instafeed li {
  float: left;
  display: block;
  width: 20%;
}

ul#instafeed li:first-child {
  width: 50%;
}

ul#instafeed li:nth-child(2),
ul#instafeed li:nth-child(3),
ul#instafeed li:nth-child(4),
ul#instafeed li:nth-child(5) {
  width: 25%;
}

ul#instafeed li a img:hover {
  opacity: 0.8;
}

ul#instafeed li {
  background-position: center center;
  -webkit-background-size: cover;
  background-size: cover;
}

ul#instafeed li a {
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

/* margin
---------------------------------------------- */
.u-mt-xxs {
  margin-top: 4px !important;
}

.u-mr-xxs {
  margin-right: 4px !important;
}

.u-mb-xxs {
  margin-bottom: 4px !important;
}

.u-ml-xxs {
  margin-left: 4px !important;
}

.u-pt-xxs {
  padding-top: 4px !important;
}

.u-pr-xxs {
  padding-right: 4px !important;
}

.u-pb-xxs {
  padding-bottom: 4px !important;
}

.u-pl-xxs {
  padding-left: 4px !important;
}

.u-px-xxs {
  padding-right: 4px !important;
  padding-left: 4px !important;
}

.u-py-xxs {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.u-mt-xs {
  margin-top: 8px !important;
}

.u-mr-xs {
  margin-right: 8px !important;
}

.u-mb-xs {
  margin-bottom: 8px !important;
}

.u-ml-xs {
  margin-left: 8px !important;
}

.u-pt-xs {
  padding-top: 8px !important;
}

.u-pr-xs {
  padding-right: 8px !important;
}

.u-pb-xs {
  padding-bottom: 8px !important;
}

.u-pl-xs {
  padding-left: 8px !important;
}

.u-px-xs {
  padding-right: 8px !important;
  padding-left: 8px !important;
}

.u-py-xs {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.u-mt-sm {
  margin-top: 12px !important;
}

.u-mr-sm {
  margin-right: 12px !important;
}

.u-mb-sm {
  margin-bottom: 12px !important;
}

.u-ml-sm {
  margin-left: 12px !important;
}

.u-pt-sm {
  padding-top: 12px !important;
}

.u-pr-sm {
  padding-right: 12px !important;
}

.u-pb-sm {
  padding-bottom: 12px !important;
}

.u-pl-sm {
  padding-left: 12px !important;
}

.u-px-sm {
  padding-right: 12px !important;
  padding-left: 12px !important;
}

.u-py-sm {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.u-mt-md {
  margin-top: 20px !important;
}

.u-mr-md {
  margin-right: 20px !important;
}

.u-mb-md {
  margin-bottom: 20px !important;
}

.u-ml-md {
  margin-left: 20px !important;
}

.u-pt-md {
  padding-top: 20px !important;
}

.u-pr-md {
  padding-right: 20px !important;
}

.u-pb-md {
  padding-bottom: 20px !important;
}

.u-pl-md {
  padding-left: 20px !important;
}

.u-px-md {
  padding-right: 20px !important;
  padding-left: 20px !important;
}

.u-py-md {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.u-mt-lg {
  margin-top: 32px !important;
}

.u-mr-lg {
  margin-right: 32px !important;
}

.u-mb-lg {
  margin-bottom: 32px !important;
}

.u-ml-lg {
  margin-left: 32px !important;
}

.u-pt-lg {
  padding-top: 32px !important;
}

.u-pr-lg {
  padding-right: 32px !important;
}

.u-pb-lg {
  padding-bottom: 32px !important;
}

.u-pl-lg {
  padding-left: 32px !important;
}

.u-px-lg {
  padding-right: 32px !important;
  padding-left: 32px !important;
}

.u-py-lg {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.u-mt-xl {
  margin-top: 52px !important;
}

.u-mr-xl {
  margin-right: 52px !important;
}

.u-mb-xl {
  margin-bottom: 52px !important;
}

.u-ml-xl {
  margin-left: 52px !important;
}

.u-pt-xl {
  padding-top: 52px !important;
}

.u-pr-xl {
  padding-right: 52px !important;
}

.u-pb-xl {
  padding-bottom: 52px !important;
}

.u-pl-xl {
  padding-left: 52px !important;
}

.u-px-xl {
  padding-right: 52px !important;
  padding-left: 52px !important;
}

.u-py-xl {
  padding-top: 52px !important;
  padding-bottom: 52px !important;
}

.u-mt-xxl {
  margin-top: 84px !important;
}

.u-mr-xxl {
  margin-right: 84px !important;
}

.u-mb-xxl {
  margin-bottom: 84px !important;
}

.u-ml-xxl {
  margin-left: 84px !important;
}

.u-pt-xxl {
  padding-top: 84px !important;
}

.u-pr-xxl {
  padding-right: 84px !important;
}

.u-pb-xxl {
  padding-bottom: 84px !important;
}

.u-pl-xxl {
  padding-left: 84px !important;
}

.u-px-xxl {
  padding-right: 84px !important;
  padding-left: 84px !important;
}

.u-py-xxl {
  padding-top: 84px !important;
  padding-bottom: 84px !important;
}

.u-mt-0 {
  margin-top: 0px !important;
}

.u-mr-0 {
  margin-right: 0px !important;
}

.u-mb-0 {
  margin-bottom: 0px !important;
}

.u-ml-0 {
  margin-left: 0px !important;
}

.u-pt-0 {
  padding-top: 0px !important;
}

.u-pr-0 {
  padding-right: 0px !important;
}

.u-pb-0 {
  padding-bottom: 0px !important;
}

.u-pl-0 {
  padding-left: 0px !important;
}

.u-px-0 {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.u-py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

@media (max-width: 1200px) {
  .u-lg-mt-xxs {
    margin-top: 4px !important;
  }
  .u-lg-mr-xxs {
    margin-right: 4px !important;
  }
  .u-lg-mb-xxs {
    margin-bottom: 4px !important;
  }
  .u-lg-ml-xxs {
    margin-left: 4px !important;
  }
  .u-lg-pt-xxs {
    padding-top: 4px !important;
  }
  .u-lg-pr-xxs {
    padding-right: 4px !important;
  }
  .u-lg-pb-xxs {
    padding-bottom: 4px !important;
  }
  .u-lg-pl-xxs {
    padding-left: 4px !important;
  }
  .u-lg-px-xxs {
    padding-right: 4px !important;
    padding-left: 4px !important;
  }
  .u-lg-py-xxs {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}
@media (max-width: 1024px) {
  .u-md-mt-xxs {
    margin-top: 4px !important;
  }
  .u-md-mr-xxs {
    margin-right: 4px !important;
  }
  .u-md-mb-xxs {
    margin-bottom: 4px !important;
  }
  .u-md-ml-xxs {
    margin-left: 4px !important;
  }
  .u-md-pt-xxs {
    padding-top: 4px !important;
  }
  .u-md-pr-xxs {
    padding-right: 4px !important;
  }
  .u-md-pb-xxs {
    padding-bottom: 4px !important;
  }
  .u-md-pl-xxs {
    padding-left: 4px !important;
  }
  .u-md-px-xxs {
    padding-right: 4px !important;
    padding-left: 4px !important;
  }
  .u-md-py-xxs {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}
@media (max-width: 600px) {
  .u-sm-mt-xxs {
    margin-top: 4px !important;
  }
  .u-sm-mr-xxs {
    margin-right: 4px !important;
  }
  .u-sm-mb-xxs {
    margin-bottom: 4px !important;
  }
  .u-sm-ml-xxs {
    margin-left: 4px !important;
  }
  .u-sm-pt-xxs {
    padding-top: 4px !important;
  }
  .u-sm-pr-xxs {
    padding-right: 4px !important;
  }
  .u-sm-pb-xxs {
    padding-bottom: 4px !important;
  }
  .u-sm-pl-xxs {
    padding-left: 4px !important;
  }
  .u-sm-px-xxs {
    padding-right: 4px !important;
    padding-left: 4px !important;
  }
  .u-sm-py-xxs {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}
@media (max-width: 480px) {
  .u-xs-mt-xxs {
    margin-top: 4px !important;
  }
  .u-xs-mr-xxs {
    margin-right: 4px !important;
  }
  .u-xs-mb-xxs {
    margin-bottom: 4px !important;
  }
  .u-xs-ml-xxs {
    margin-left: 4px !important;
  }
  .u-xs-pt-xxs {
    padding-top: 4px !important;
  }
  .u-xs-pr-xxs {
    padding-right: 4px !important;
  }
  .u-xs-pb-xxs {
    padding-bottom: 4px !important;
  }
  .u-xs-pl-xxs {
    padding-left: 4px !important;
  }
  .u-xs-px-xxs {
    padding-right: 4px !important;
    padding-left: 4px !important;
  }
  .u-xs-py-xxs {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}
@media (max-width: 1200px) {
  .u-lg-mt-xs {
    margin-top: 8px !important;
  }
  .u-lg-mr-xs {
    margin-right: 8px !important;
  }
  .u-lg-mb-xs {
    margin-bottom: 8px !important;
  }
  .u-lg-ml-xs {
    margin-left: 8px !important;
  }
  .u-lg-pt-xs {
    padding-top: 8px !important;
  }
  .u-lg-pr-xs {
    padding-right: 8px !important;
  }
  .u-lg-pb-xs {
    padding-bottom: 8px !important;
  }
  .u-lg-pl-xs {
    padding-left: 8px !important;
  }
  .u-lg-px-xs {
    padding-right: 8px !important;
    padding-left: 8px !important;
  }
  .u-lg-py-xs {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}
@media (max-width: 1024px) {
  .u-md-mt-xs {
    margin-top: 8px !important;
  }
  .u-md-mr-xs {
    margin-right: 8px !important;
  }
  .u-md-mb-xs {
    margin-bottom: 8px !important;
  }
  .u-md-ml-xs {
    margin-left: 8px !important;
  }
  .u-md-pt-xs {
    padding-top: 8px !important;
  }
  .u-md-pr-xs {
    padding-right: 8px !important;
  }
  .u-md-pb-xs {
    padding-bottom: 8px !important;
  }
  .u-md-pl-xs {
    padding-left: 8px !important;
  }
  .u-md-px-xs {
    padding-right: 8px !important;
    padding-left: 8px !important;
  }
  .u-md-py-xs {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}
@media (max-width: 600px) {
  .u-sm-mt-xs {
    margin-top: 8px !important;
  }
  .u-sm-mr-xs {
    margin-right: 8px !important;
  }
  .u-sm-mb-xs {
    margin-bottom: 8px !important;
  }
  .u-sm-ml-xs {
    margin-left: 8px !important;
  }
  .u-sm-pt-xs {
    padding-top: 8px !important;
  }
  .u-sm-pr-xs {
    padding-right: 8px !important;
  }
  .u-sm-pb-xs {
    padding-bottom: 8px !important;
  }
  .u-sm-pl-xs {
    padding-left: 8px !important;
  }
  .u-sm-px-xs {
    padding-right: 8px !important;
    padding-left: 8px !important;
  }
  .u-sm-py-xs {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}
@media (max-width: 480px) {
  .u-xs-mt-xs {
    margin-top: 8px !important;
  }
  .u-xs-mr-xs {
    margin-right: 8px !important;
  }
  .u-xs-mb-xs {
    margin-bottom: 8px !important;
  }
  .u-xs-ml-xs {
    margin-left: 8px !important;
  }
  .u-xs-pt-xs {
    padding-top: 8px !important;
  }
  .u-xs-pr-xs {
    padding-right: 8px !important;
  }
  .u-xs-pb-xs {
    padding-bottom: 8px !important;
  }
  .u-xs-pl-xs {
    padding-left: 8px !important;
  }
  .u-xs-px-xs {
    padding-right: 8px !important;
    padding-left: 8px !important;
  }
  .u-xs-py-xs {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}
@media (max-width: 1200px) {
  .u-lg-mt-sm {
    margin-top: 12px !important;
  }
  .u-lg-mr-sm {
    margin-right: 12px !important;
  }
  .u-lg-mb-sm {
    margin-bottom: 12px !important;
  }
  .u-lg-ml-sm {
    margin-left: 12px !important;
  }
  .u-lg-pt-sm {
    padding-top: 12px !important;
  }
  .u-lg-pr-sm {
    padding-right: 12px !important;
  }
  .u-lg-pb-sm {
    padding-bottom: 12px !important;
  }
  .u-lg-pl-sm {
    padding-left: 12px !important;
  }
  .u-lg-px-sm {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
  .u-lg-py-sm {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}
@media (max-width: 1024px) {
  .u-md-mt-sm {
    margin-top: 12px !important;
  }
  .u-md-mr-sm {
    margin-right: 12px !important;
  }
  .u-md-mb-sm {
    margin-bottom: 12px !important;
  }
  .u-md-ml-sm {
    margin-left: 12px !important;
  }
  .u-md-pt-sm {
    padding-top: 12px !important;
  }
  .u-md-pr-sm {
    padding-right: 12px !important;
  }
  .u-md-pb-sm {
    padding-bottom: 12px !important;
  }
  .u-md-pl-sm {
    padding-left: 12px !important;
  }
  .u-md-px-sm {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
  .u-md-py-sm {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}
@media (max-width: 600px) {
  .u-sm-mt-sm {
    margin-top: 12px !important;
  }
  .u-sm-mr-sm {
    margin-right: 12px !important;
  }
  .u-sm-mb-sm {
    margin-bottom: 12px !important;
  }
  .u-sm-ml-sm {
    margin-left: 12px !important;
  }
  .u-sm-pt-sm {
    padding-top: 12px !important;
  }
  .u-sm-pr-sm {
    padding-right: 12px !important;
  }
  .u-sm-pb-sm {
    padding-bottom: 12px !important;
  }
  .u-sm-pl-sm {
    padding-left: 12px !important;
  }
  .u-sm-px-sm {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
  .u-sm-py-sm {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}
@media (max-width: 480px) {
  .u-xs-mt-sm {
    margin-top: 12px !important;
  }
  .u-xs-mr-sm {
    margin-right: 12px !important;
  }
  .u-xs-mb-sm {
    margin-bottom: 12px !important;
  }
  .u-xs-ml-sm {
    margin-left: 12px !important;
  }
  .u-xs-pt-sm {
    padding-top: 12px !important;
  }
  .u-xs-pr-sm {
    padding-right: 12px !important;
  }
  .u-xs-pb-sm {
    padding-bottom: 12px !important;
  }
  .u-xs-pl-sm {
    padding-left: 12px !important;
  }
  .u-xs-px-sm {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
  .u-xs-py-sm {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}
@media (max-width: 1200px) {
  .u-lg-mt-md {
    margin-top: 20px !important;
  }
  .u-lg-mr-md {
    margin-right: 20px !important;
  }
  .u-lg-mb-md {
    margin-bottom: 20px !important;
  }
  .u-lg-ml-md {
    margin-left: 20px !important;
  }
  .u-lg-pt-md {
    padding-top: 20px !important;
  }
  .u-lg-pr-md {
    padding-right: 20px !important;
  }
  .u-lg-pb-md {
    padding-bottom: 20px !important;
  }
  .u-lg-pl-md {
    padding-left: 20px !important;
  }
  .u-lg-px-md {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
  .u-lg-py-md {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}
@media (max-width: 1024px) {
  .u-md-mt-md {
    margin-top: 20px !important;
  }
  .u-md-mr-md {
    margin-right: 20px !important;
  }
  .u-md-mb-md {
    margin-bottom: 20px !important;
  }
  .u-md-ml-md {
    margin-left: 20px !important;
  }
  .u-md-pt-md {
    padding-top: 20px !important;
  }
  .u-md-pr-md {
    padding-right: 20px !important;
  }
  .u-md-pb-md {
    padding-bottom: 20px !important;
  }
  .u-md-pl-md {
    padding-left: 20px !important;
  }
  .u-md-px-md {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
  .u-md-py-md {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}
@media (max-width: 600px) {
  .u-sm-mt-md {
    margin-top: 20px !important;
  }
  .u-sm-mr-md {
    margin-right: 20px !important;
  }
  .u-sm-mb-md {
    margin-bottom: 20px !important;
  }
  .u-sm-ml-md {
    margin-left: 20px !important;
  }
  .u-sm-pt-md {
    padding-top: 20px !important;
  }
  .u-sm-pr-md {
    padding-right: 20px !important;
  }
  .u-sm-pb-md {
    padding-bottom: 20px !important;
  }
  .u-sm-pl-md {
    padding-left: 20px !important;
  }
  .u-sm-px-md {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
  .u-sm-py-md {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}
@media (max-width: 480px) {
  .u-xs-mt-md {
    margin-top: 20px !important;
  }
  .u-xs-mr-md {
    margin-right: 20px !important;
  }
  .u-xs-mb-md {
    margin-bottom: 20px !important;
  }
  .u-xs-ml-md {
    margin-left: 20px !important;
  }
  .u-xs-pt-md {
    padding-top: 20px !important;
  }
  .u-xs-pr-md {
    padding-right: 20px !important;
  }
  .u-xs-pb-md {
    padding-bottom: 20px !important;
  }
  .u-xs-pl-md {
    padding-left: 20px !important;
  }
  .u-xs-px-md {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
  .u-xs-py-md {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}
@media (max-width: 1200px) {
  .u-lg-mt-lg {
    margin-top: 32px !important;
  }
  .u-lg-mr-lg {
    margin-right: 32px !important;
  }
  .u-lg-mb-lg {
    margin-bottom: 32px !important;
  }
  .u-lg-ml-lg {
    margin-left: 32px !important;
  }
  .u-lg-pt-lg {
    padding-top: 32px !important;
  }
  .u-lg-pr-lg {
    padding-right: 32px !important;
  }
  .u-lg-pb-lg {
    padding-bottom: 32px !important;
  }
  .u-lg-pl-lg {
    padding-left: 32px !important;
  }
  .u-lg-px-lg {
    padding-right: 32px !important;
    padding-left: 32px !important;
  }
  .u-lg-py-lg {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}
@media (max-width: 1024px) {
  .u-md-mt-lg {
    margin-top: 32px !important;
  }
  .u-md-mr-lg {
    margin-right: 32px !important;
  }
  .u-md-mb-lg {
    margin-bottom: 32px !important;
  }
  .u-md-ml-lg {
    margin-left: 32px !important;
  }
  .u-md-pt-lg {
    padding-top: 32px !important;
  }
  .u-md-pr-lg {
    padding-right: 32px !important;
  }
  .u-md-pb-lg {
    padding-bottom: 32px !important;
  }
  .u-md-pl-lg {
    padding-left: 32px !important;
  }
  .u-md-px-lg {
    padding-right: 32px !important;
    padding-left: 32px !important;
  }
  .u-md-py-lg {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}
@media (max-width: 600px) {
  .u-sm-mt-lg {
    margin-top: 32px !important;
  }
  .u-sm-mr-lg {
    margin-right: 32px !important;
  }
  .u-sm-mb-lg {
    margin-bottom: 32px !important;
  }
  .u-sm-ml-lg {
    margin-left: 32px !important;
  }
  .u-sm-pt-lg {
    padding-top: 32px !important;
  }
  .u-sm-pr-lg {
    padding-right: 32px !important;
  }
  .u-sm-pb-lg {
    padding-bottom: 32px !important;
  }
  .u-sm-pl-lg {
    padding-left: 32px !important;
  }
  .u-sm-px-lg {
    padding-right: 32px !important;
    padding-left: 32px !important;
  }
  .u-sm-py-lg {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}
@media (max-width: 480px) {
  .u-xs-mt-lg {
    margin-top: 32px !important;
  }
  .u-xs-mr-lg {
    margin-right: 32px !important;
  }
  .u-xs-mb-lg {
    margin-bottom: 32px !important;
  }
  .u-xs-ml-lg {
    margin-left: 32px !important;
  }
  .u-xs-pt-lg {
    padding-top: 32px !important;
  }
  .u-xs-pr-lg {
    padding-right: 32px !important;
  }
  .u-xs-pb-lg {
    padding-bottom: 32px !important;
  }
  .u-xs-pl-lg {
    padding-left: 32px !important;
  }
  .u-xs-px-lg {
    padding-right: 32px !important;
    padding-left: 32px !important;
  }
  .u-xs-py-lg {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}
@media (max-width: 1200px) {
  .u-lg-mt-xl {
    margin-top: 52px !important;
  }
  .u-lg-mr-xl {
    margin-right: 52px !important;
  }
  .u-lg-mb-xl {
    margin-bottom: 52px !important;
  }
  .u-lg-ml-xl {
    margin-left: 52px !important;
  }
  .u-lg-pt-xl {
    padding-top: 52px !important;
  }
  .u-lg-pr-xl {
    padding-right: 52px !important;
  }
  .u-lg-pb-xl {
    padding-bottom: 52px !important;
  }
  .u-lg-pl-xl {
    padding-left: 52px !important;
  }
  .u-lg-px-xl {
    padding-right: 52px !important;
    padding-left: 52px !important;
  }
  .u-lg-py-xl {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
}
@media (max-width: 1024px) {
  .u-md-mt-xl {
    margin-top: 52px !important;
  }
  .u-md-mr-xl {
    margin-right: 52px !important;
  }
  .u-md-mb-xl {
    margin-bottom: 52px !important;
  }
  .u-md-ml-xl {
    margin-left: 52px !important;
  }
  .u-md-pt-xl {
    padding-top: 52px !important;
  }
  .u-md-pr-xl {
    padding-right: 52px !important;
  }
  .u-md-pb-xl {
    padding-bottom: 52px !important;
  }
  .u-md-pl-xl {
    padding-left: 52px !important;
  }
  .u-md-px-xl {
    padding-right: 52px !important;
    padding-left: 52px !important;
  }
  .u-md-py-xl {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
}
@media (max-width: 600px) {
  .u-sm-mt-xl {
    margin-top: 52px !important;
  }
  .u-sm-mr-xl {
    margin-right: 52px !important;
  }
  .u-sm-mb-xl {
    margin-bottom: 52px !important;
  }
  .u-sm-ml-xl {
    margin-left: 52px !important;
  }
  .u-sm-pt-xl {
    padding-top: 52px !important;
  }
  .u-sm-pr-xl {
    padding-right: 52px !important;
  }
  .u-sm-pb-xl {
    padding-bottom: 52px !important;
  }
  .u-sm-pl-xl {
    padding-left: 52px !important;
  }
  .u-sm-px-xl {
    padding-right: 52px !important;
    padding-left: 52px !important;
  }
  .u-sm-py-xl {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
}
@media (max-width: 480px) {
  .u-xs-mt-xl {
    margin-top: 52px !important;
  }
  .u-xs-mr-xl {
    margin-right: 52px !important;
  }
  .u-xs-mb-xl {
    margin-bottom: 52px !important;
  }
  .u-xs-ml-xl {
    margin-left: 52px !important;
  }
  .u-xs-pt-xl {
    padding-top: 52px !important;
  }
  .u-xs-pr-xl {
    padding-right: 52px !important;
  }
  .u-xs-pb-xl {
    padding-bottom: 52px !important;
  }
  .u-xs-pl-xl {
    padding-left: 52px !important;
  }
  .u-xs-px-xl {
    padding-right: 52px !important;
    padding-left: 52px !important;
  }
  .u-xs-py-xl {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
}
@media (max-width: 1200px) {
  .u-lg-mt-xxl {
    margin-top: 84px !important;
  }
  .u-lg-mr-xxl {
    margin-right: 84px !important;
  }
  .u-lg-mb-xxl {
    margin-bottom: 84px !important;
  }
  .u-lg-ml-xxl {
    margin-left: 84px !important;
  }
  .u-lg-pt-xxl {
    padding-top: 84px !important;
  }
  .u-lg-pr-xxl {
    padding-right: 84px !important;
  }
  .u-lg-pb-xxl {
    padding-bottom: 84px !important;
  }
  .u-lg-pl-xxl {
    padding-left: 84px !important;
  }
  .u-lg-px-xxl {
    padding-right: 84px !important;
    padding-left: 84px !important;
  }
  .u-lg-py-xxl {
    padding-top: 84px !important;
    padding-bottom: 84px !important;
  }
}
@media (max-width: 1024px) {
  .u-md-mt-xxl {
    margin-top: 84px !important;
  }
  .u-md-mr-xxl {
    margin-right: 84px !important;
  }
  .u-md-mb-xxl {
    margin-bottom: 84px !important;
  }
  .u-md-ml-xxl {
    margin-left: 84px !important;
  }
  .u-md-pt-xxl {
    padding-top: 84px !important;
  }
  .u-md-pr-xxl {
    padding-right: 84px !important;
  }
  .u-md-pb-xxl {
    padding-bottom: 84px !important;
  }
  .u-md-pl-xxl {
    padding-left: 84px !important;
  }
  .u-md-px-xxl {
    padding-right: 84px !important;
    padding-left: 84px !important;
  }
  .u-md-py-xxl {
    padding-top: 84px !important;
    padding-bottom: 84px !important;
  }
}
@media (max-width: 600px) {
  .u-sm-mt-xxl {
    margin-top: 84px !important;
  }
  .u-sm-mr-xxl {
    margin-right: 84px !important;
  }
  .u-sm-mb-xxl {
    margin-bottom: 84px !important;
  }
  .u-sm-ml-xxl {
    margin-left: 84px !important;
  }
  .u-sm-pt-xxl {
    padding-top: 84px !important;
  }
  .u-sm-pr-xxl {
    padding-right: 84px !important;
  }
  .u-sm-pb-xxl {
    padding-bottom: 84px !important;
  }
  .u-sm-pl-xxl {
    padding-left: 84px !important;
  }
  .u-sm-px-xxl {
    padding-right: 84px !important;
    padding-left: 84px !important;
  }
  .u-sm-py-xxl {
    padding-top: 84px !important;
    padding-bottom: 84px !important;
  }
}
@media (max-width: 480px) {
  .u-xs-mt-xxl {
    margin-top: 84px !important;
  }
  .u-xs-mr-xxl {
    margin-right: 84px !important;
  }
  .u-xs-mb-xxl {
    margin-bottom: 84px !important;
  }
  .u-xs-ml-xxl {
    margin-left: 84px !important;
  }
  .u-xs-pt-xxl {
    padding-top: 84px !important;
  }
  .u-xs-pr-xxl {
    padding-right: 84px !important;
  }
  .u-xs-pb-xxl {
    padding-bottom: 84px !important;
  }
  .u-xs-pl-xxl {
    padding-left: 84px !important;
  }
  .u-xs-px-xxl {
    padding-right: 84px !important;
    padding-left: 84px !important;
  }
  .u-xs-py-xxl {
    padding-top: 84px !important;
    padding-bottom: 84px !important;
  }
}
@media (max-width: 1200px) {
  .u-lg-mt-0 {
    margin-top: 0px !important;
  }
  .u-lg-mr-0 {
    margin-right: 0px !important;
  }
  .u-lg-mb-0 {
    margin-bottom: 0px !important;
  }
  .u-lg-ml-0 {
    margin-left: 0px !important;
  }
  .u-lg-pt-0 {
    padding-top: 0px !important;
  }
  .u-lg-pr-0 {
    padding-right: 0px !important;
  }
  .u-lg-pb-0 {
    padding-bottom: 0px !important;
  }
  .u-lg-pl-0 {
    padding-left: 0px !important;
  }
  .u-lg-px-0 {
    padding-right: 0px !important;
    padding-left: 0px !important;
  }
  .u-lg-py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
}
@media (max-width: 1024px) {
  .u-md-mt-0 {
    margin-top: 0px !important;
  }
  .u-md-mr-0 {
    margin-right: 0px !important;
  }
  .u-md-mb-0 {
    margin-bottom: 0px !important;
  }
  .u-md-ml-0 {
    margin-left: 0px !important;
  }
  .u-md-pt-0 {
    padding-top: 0px !important;
  }
  .u-md-pr-0 {
    padding-right: 0px !important;
  }
  .u-md-pb-0 {
    padding-bottom: 0px !important;
  }
  .u-md-pl-0 {
    padding-left: 0px !important;
  }
  .u-md-px-0 {
    padding-right: 0px !important;
    padding-left: 0px !important;
  }
  .u-md-py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
}
@media (max-width: 600px) {
  .u-sm-mt-0 {
    margin-top: 0px !important;
  }
  .u-sm-mr-0 {
    margin-right: 0px !important;
  }
  .u-sm-mb-0 {
    margin-bottom: 0px !important;
  }
  .u-sm-ml-0 {
    margin-left: 0px !important;
  }
  .u-sm-pt-0 {
    padding-top: 0px !important;
  }
  .u-sm-pr-0 {
    padding-right: 0px !important;
  }
  .u-sm-pb-0 {
    padding-bottom: 0px !important;
  }
  .u-sm-pl-0 {
    padding-left: 0px !important;
  }
  .u-sm-px-0 {
    padding-right: 0px !important;
    padding-left: 0px !important;
  }
  .u-sm-py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
}
@media (max-width: 480px) {
  .u-xs-mt-0 {
    margin-top: 0px !important;
  }
  .u-xs-mr-0 {
    margin-right: 0px !important;
  }
  .u-xs-mb-0 {
    margin-bottom: 0px !important;
  }
  .u-xs-ml-0 {
    margin-left: 0px !important;
  }
  .u-xs-pt-0 {
    padding-top: 0px !important;
  }
  .u-xs-pr-0 {
    padding-right: 0px !important;
  }
  .u-xs-pb-0 {
    padding-bottom: 0px !important;
  }
  .u-xs-pl-0 {
    padding-left: 0px !important;
  }
  .u-xs-px-0 {
    padding-right: 0px !important;
    padding-left: 0px !important;
  }
  .u-xs-py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
}
/* Utility
---------------------------------------------- */
/* 繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ縺ｧ陦ｨ遉ｺ蛻�ｊ譖ｿ縺茨ｼ�display��
---------------------------------------------- */
@media screen and (max-width: 600px) {
  .u-pc-only,
  .pc {
    display: none !important;
  }
}
@media not all and (max-width: 600px) {
  .u-sp-only,
  .sp {
    display: none !important;
  }
}
@media not all and (max-width: 1200px) {
  .u-lg-only {
    display: none !important;
  }
}
@media (max-width: 1200px) {
  .u-lg-over-only {
    display: none !important;
  }
}
@media not all and (max-width: 1024px) {
  .u-md-only {
    display: none !important;
  }
}
@media (max-width: 1024px) {
  .u-md-over-only {
    display: none !important;
  }
}
@media not all and (max-width: 600px) {
  .u-sm-only {
    display: none !important;
  }
}
@media (max-width: 600px) {
  .u-sm-over-only {
    display: none !important;
  }
}
@media not all and (max-width: 480px) {
  .u-xs-only {
    display: none !important;
  }
}
@media (max-width: 480px) {
  .u-xs-over-only {
    display: none !important;
  }
}
/* text align
---------------------------------------------- */
.u-tal {
  text-align: left !important;
}

.u-tac {
  text-align: center !important;
}

.u-tar {
  text-align: right !important;
}

@media (max-width: 1200px) {
  .u-lg-tal {
    text-align: left !important;
  }
  .u-lg-tac {
    text-align: center !important;
  }
  .u-lg-tar {
    text-align: right !important;
  }
}
@media not all and (max-width: 1200px) {
  .u-lg-over-tal {
    text-align: left !important;
  }
  .u-lg-over-tac {
    text-align: center !important;
  }
  .u-lg-over-tar {
    text-align: right !important;
  }
}
@media (max-width: 1024px) {
  .u-md-tal {
    text-align: left !important;
  }
  .u-md-tac {
    text-align: center !important;
  }
  .u-md-tar {
    text-align: right !important;
  }
}
@media not all and (max-width: 1024px) {
  .u-md-over-tal {
    text-align: left !important;
  }
  .u-md-over-tac {
    text-align: center !important;
  }
  .u-md-over-tar {
    text-align: right !important;
  }
}
@media (max-width: 600px) {
  .u-sm-tal {
    text-align: left !important;
  }
  .u-sm-tac {
    text-align: center !important;
  }
  .u-sm-tar {
    text-align: right !important;
  }
}
@media not all and (max-width: 600px) {
  .u-sm-over-tal {
    text-align: left !important;
  }
  .u-sm-over-tac {
    text-align: center !important;
  }
  .u-sm-over-tar {
    text-align: right !important;
  }
}
@media (max-width: 480px) {
  .u-xs-tal {
    text-align: left !important;
  }
  .u-xs-tac {
    text-align: center !important;
  }
  .u-xs-tar {
    text-align: right !important;
  }
}
@media not all and (max-width: 480px) {
  .u-xs-over-tal {
    text-align: left !important;
  }
  .u-xs-over-tac {
    text-align: center !important;
  }
  .u-xs-over-tar {
    text-align: right !important;
  }
}
</pre></body></html>