/*****************************************************************
@メディアクエリ
lg:1120pxから
md:992pxから1119pxまで
sm:768pxから991pxまで
xs:767pxまで
@フォント
Googleフォント「https://googlefonts.github.io/japanese/」
@アイコン
Googleマテリアルアイコン「https://fonts.google.com/icons」
@文字サイズ
基本:16px
480px以下:4vw
*****************************************************************/
@keyframes show {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 4vw;
  }
}

/*************
Googleフォント
*************/
.mplus {
  font-family: "M PLUS 1p";
}

.roundedmplus {
  font-family: "M PLUS Rounded 1c";
}

.hannari {
  font-family: "Hannari";
}

.kokoro {
  font-family: "Kokoro";
}

.sawarabimincho {
  font-family: "Sawarabi Mincho";
}

.notosansjp {
  font-family: "Noto Sans JP";
}

/*************
Googleマテリアルアイコン
*************/
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: "liga";
}

/*************
色関係
*************/
.text-white {
  color: #ffffff !important;
}

.bg-white {
  background-color: #ffffff !important;
}

.text-black {
  color: #333333 !important;
}

.bg-black {
  background-color: #333333 !important;
}

.text-gray {
  color: #9e9e9e !important;
}

.bg-gray {
  background-color: #9e9e9e !important;
}

/**color1**/
.text-color1 {
  color: #2196f3 !important;
}

.text-color1-active.active {
  color: #2196f3 !important;
}

.bg-color1 {
  background-color: #2196f3 !important;
}

.bg-color1-active.active {
  background-color: #2196f3 !important;
}

.border-color1 {
  border-color: #2196f3 !important;
}

.border-color1-active.active {
  border-color: #2196f3 !important;
}

.btn-color1 {
  border-color: #2196f3 !important;
  background-color: #2196f3 !important;
  color: #ffffff !important;
}

.btn-color1-active.active {
  border-color: #2196f3 !important;
  background-color: #2196f3 !important;
  color: #ffffff !important;
}

.btn-color1.btn.hover:hover {
  background-color: #ffffff !important;
  color: #2196f3 !important;
}

/**color2**/
.text-color2 {
  color: #009688 !important;
}

.text-color2-active.active {
  color: #009688 !important;
}

.bg-color2 {
  background-color: #009688 !important;
}

.bg-color2-active.active {
  background-color: #009688 !important;
}

.border-color2 {
  border-color: #009688 !important;
}

.border-color2-active.active {
  border-color: #009688 !important;
}

.btn-color2 {
  border-color: #009688 !important;
  background-color: #009688 !important;
  color: #ffffff !important;
}

.btn-color2-active.active {
  border-color: #009688 !important;
  background-color: #009688 !important;
  color: #ffffff !important;
}

.btn-color2.btn.hover:hover {
  background-color: #ffffff !important;
  color: #009688 !important;
}

/**color3**/
.text-color3 {
  color: #ffc107 !important;
}

.text-color3-active.active {
  color: #ffc107 !important;
}

.bg-color3 {
  background-color: #ffc107 !important;
}

.bg-color3-active.active {
  background-color: #ffc107 !important;
}

.border-color3 {
  border-color: #ffc107 !important;
}

.border-color3-active.active {
  border-color: #ffc107 !important;
}

.btn-color3 {
  border-color: #ffc107 !important;
  background-color: #ffc107 !important;
  color: #ffffff !important;
}

.btn-color3-active.active {
  border-color: #ffc107 !important;
  background-color: #ffc107 !important;
  color: #ffffff !important;
}

.btn-color3.btn.hover:hover {
  background-color: #ffffff !important;
  color: #ffc107 !important;
}

/**color4**/
.text-color4 {
  color: #e91e63 !important;
}

.text-color4-active.active {
  color: #e91e63 !important;
}

.bg-color4 {
  background-color: #e91e63 !important;
}

.bg-color4-active.active {
  background-color: #e91e63 !important;
}

.border-color4 {
  border-color: #e91e63 !important;
}

.border-color4-active.active {
  border-color: #e91e63 !important;
}

.btn-color4 {
  border-color: #e91e63 !important;
  background-color: #e91e63 !important;
  color: #ffffff !important;
}

.btn-color4-active.active {
  border-color: #e91e63 !important;
  background-color: #e91e63 !important;
  color: #ffffff !important;
}

.btn-color4.btn.hover:hover {
  background-color: #ffffff !important;
  color: #e91e63 !important;
}

/*************************
ヘッダー
*************************/
header a {
  text-decoration: none;
  color: inherit;
}

/*************************
フッター
*************************/
footer a {
  text-decoration: none;
  color: inherit;
}

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,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

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

body {
  font-size: 16px;
  line-height: 1.25em;
  letter-spacing: 0.1em;
  font-family: "Avenir", "Helvetica Neue", "Helvetica", "Arial", "Hiragino Sans",
    "ヒラギノ角ゴシック", YuGothic, "Yu Gothic", "メイリオ", Meiryo,
    "ＭＳ Ｐゴシック", "MS PGothic";
  -webkit-text-size-adjust: 100%;
  height: 100%;
  background-color: #ffffff;
  color: #333333;
}

ol.none,
ul.none,
li.none {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

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

img {
  max-width: 100%;
  height: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

iframe {
  max-width: 100%;
}

/*-------------------------------
ページトップへスクロール
--------------------------------*/
#page-top {
  position: fixed;
  bottom: 2%;
  right: 2%;
}

/*************
display関連
*************/
.block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.inline-block.middle {
  vertical-align: middle;
}

.inline-block.top {
  vertical-align: top;
}

.inline-block.bottom {
  vertical-align: bottom;
}

.md-block {
  display: none;
}

.sm-block {
  display: none;
}

.xs-block {
  display: none;
}

@media screen and (max-width: 1119px) {

  /*　画面サイズが1119pxまではここを読み込む　*/
  .md-none {
    display: none;
  }

  .md-block {
    display: block;
  }
}

@media screen and (max-width: 991px) {

  /*　画面サイズが991pxまではここを読み込む　*/
  .sm-none {
    display: none;
  }

  .sm-block {
    display: block;
  }
}

@media screen and (max-width: 767px) {

  /*　画面サイズが767pxまではここを読み込む　*/
  .xs-none {
    display: none;
  }

  .xs-block {
    display: block;
  }
}

/*************
文字関連
*************/
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-just {
  text-align: justify;
}

strong {
  font-weight: bold;
}

p {
  font-size: 1rem;
  text-align: justify;
  margin-bottom: 0.5em;
  line-height: 1.5em;
}

h1,
.h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5em;
  line-height: 1.25em;
}

h2,
.h2 {
  font-size: 2rem;
  margin-bottom: 0.5em;
  line-height: 1.25em;
}

h3,
.h3 {
  font-size: 1.75rem;
  margin-bottom: 0.5em;
  line-height: 1.25em;
}

h4,
.h4 {
  font-size: 1.5rem;
  margin-bottom: 0.5em;
  line-height: 1.25em;
}

h5,
.h5 {
  font-size: 1.25rem;
  margin-bottom: 0.5em;
  line-height: 1.25em;
}

h6,
.h6 {
  font-size: 1rem;
  margin-bottom: 0.5em;
  line-height: 1.25em;
}

.font-90 {
  font-size: 90%;
}

.font-80 {
  font-size: 80%;
}

.font-70 {
  font-size: 70%;
}

.font-60 {
  font-size: 60%;
}

.font-50 {
  font-size: 50%;
}

/*************
見出し関連
*************/
.midashi {
  width: max-content;
}

/**type1**/
.midashi.type1 {
  border-bottom: 0.1em solid #333333;
  padding: 0.25em;
}

/**type2**/
.midashi.type2 {
  border-left: 0.25em solid #333333;
  padding: 0.25em;
}

/**type3**/
.midashi.type3 {
  position: relative;
}

.midashi.type3:before {
  content: "";
  position: absolute;
  display: block;
  width: 2em;
  height: 0.1em;
  background-color: #333333;
  left: -2.5em;
  top: 0.65em;
}

.midashi.type3:after {
  content: "";
  position: absolute;
  display: block;
  width: 2em;
  height: 0.1em;
  background-color: #333333;
  right: -2.5em;
  top: 0.65em;
}

/**type4**/
.midashi.type4 {
  position: relative;
  border: 0.1em solid #333333;
  box-sizing: border-box;
  padding: 0.25em;
}

.midashi.type4::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #9e9e9e;
  z-index: -1;
  top: 0.25em;
  right: -0.25em;
}

/**type5**/
.midashi.type5 {
  position: relative;
  border-bottom: 0.2em solid #333333;
  box-sizing: border-box;
  padding: 0.2em;
}

.midashi.type5::before {
  content: "";
  position: absolute;
  display: block;
  width: 30%;
  height: 0.2em;
  background-color: #9e9e9e;
  z-index: 1;
  bottom: -0.2em;
  left: 0;
  border: none;
}

/**type6**/
.midashi.type6 {
  position: relative;
  background-color: #9e9e9e;
  border-radius: 10em 0 0 10em;
  box-sizing: border-box;
  padding: 0.2em 0.5em 0.2em 1.5em;
}

.midashi.type6::before {
  content: "";
  position: absolute;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: #ffffff;
  display: block;
  z-index: 1;
  left: 0.5em;
  top: 0.6em;
}

/**type7**/
.midashi.type7 {
  position: relative;
  background-color: #9e9e9e;
  border-radius: 0.15em;
  box-sizing: border-box;
  padding: 0.25em 0.5em;
}

.midashi.type7::before {
  content: "";
  position: absolute;
  border-width: 0.4em 0.4em 0 0.4em;
  border-style: solid;
  border-color: #9e9e9e transparent transparent transparent;
  bottom: -0.35em;
}

/**type8**/
.midashi.type8 {
  position: relative;
  box-sizing: border-box;
  padding: 0.25em 0.5em;
}

.midashi.type8::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1em;
  height: 1em;
  border-right: 0.08em solid #333333;
  border-bottom: 0.08em solid #333333;
}

.midashi.type8::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  border-top: 0.08em solid #333333;
  border-left: 0.08em solid #333333;
}

/**type9**/
.midashi.type9 {
  position: relative;
  box-sizing: border-box;
  padding: 0.25em 1em;
  border: 0.1em solid #333333;
}

.midashi.type9::before {
  content: "POINT";
  position: absolute;
  font-size: 50%;
  height: 1em;
  top: -1.7em;
  left: -0.2em;
  padding: 0.25em 0.5em;
  color: #fff;
  background: #333333;
  line-height: 1em;
}

/*************
吹き出し関連
*************/
.fukidashi {
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1em;
  position: relative;
}

/**type1**/
.fukidashi.type1 {
  border: 0.2em solid #333333;
}

.fukidashi.type1.left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #fff;
  z-index: 2;
}

.fukidashi.type1.left:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #555;
  z-index: 1;
}

.fukidashi.type1.right:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #fff;
  z-index: 2;
}

.fukidashi.type1.right:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left: 14px solid #555;
  z-index: 1;
}

.fukidashi.type1.top:before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-bottom: 12px solid #fff;
  z-index: 2;
}

.fukidashi.type1.top:after {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-bottom: 14px solid #555;
  z-index: 1;
}

.fukidashi.type1.bottom:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #fff;
  z-index: 2;
}

.fukidashi.type1.bottom:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
  z-index: 1;
}

/**type2**/
.fukidashi.type2 {
  background-color: #eeeeee;
}

.fukidashi.type2.left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #eeeeee;
}

.fukidashi.type2.right:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #eeeeee;
}

.fukidashi.type2.top:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #eeeeee;
}

.fukidashi.type2.bottom:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #eeeeee;
}

/**type3**/
.fukidashi.type3 {
  background-color: #eeeeee;
  border-radius: 2em;
}

.fukidashi.type3.left::before {
  content: "";
  position: absolute;
  left: -38px;
  width: 13px;
  height: 12px;
  bottom: 0;
  background: #eeeeee;
  border-radius: 50%;
}

.fukidashi.type3.left::after {
  content: "";
  position: absolute;
  left: -24px;
  width: 20px;
  height: 18px;
  bottom: 3px;
  background: #eeeeee;
  border-radius: 50%;
}

/*************
シャドウ関連
*************/
.shadow {
  box-shadow: 5px 5px #333333;
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
}

/*************
border関連
*************/
.border-solid {
  border: 1px solid #333333;
  box-sizing: border-box;
}

.border-dashed {
  border: 1px dashed #333333;
  box-sizing: border-box;
}

.border-2 {
  border-width: 2px;
}

.border-3 {
  border-width: 3px;
}

.border-5 {
  border-width: 5px;
}

.border-10 {
  border-width: 10px;
}

/*************
高さ
*************/
.h100 {
  height: 100%;
}

/*************
コンテンツ幅
*************/
.max-w-auto {
  max-width: none !important;
}

.w1300 {
  width: 1300px;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.w1250 {
  width: 1250px;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.w1100 {
  width: 1100px;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.w1000 {
  width: 1000px;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.w960 {
  width: 960px;
  max-width: 95%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.w900 {
  width: 900px;
  max-width: 95%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.w5 {
  width: 5%;
}

.w10 {
  width: 10%;
}

.w15 {
  width: 15%;
}

.w20 {
  width: 20%;
}

.w25 {
  width: 25%;
}

.w30 {
  width: 30%;
}

.w33 {
  width: 33.3%;
}

.w40 {
  width: 40%;
}

.w45 {
  width: 45%;
}

.w48 {
  width: 48%;
}

.w50 {
  width: 50%;
}

.w55 {
  width: 55%;
  margin-left: auto;
  margin-right: auto;
}

.w60 {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

.w70 {
  width: 70%;
}

.w75 {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.w80 {
  width: 80%;
}

.w90 {
  width: 90%;
}

.w95 {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

.w100 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 1119px) {

  /*　画面サイズが1119pxまではここを読み込む　*/
  .md-w100 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .md-w95 {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }

  .md-w90 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .md-w85 {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }

  .md-w80 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .md-w75 {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }

  .md-w70 {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }

  .md-w60 {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  .md-w50 {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  .md-w25 {
    width: 25%;
    margin-left: auto;
    margin-right: auto;
  }

  .md-w33 {
    width: 33.3%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 991px) {

  /*　画面サイズが991pxまではここを読み込む　*/
  .sm-w100 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .sm-w95 {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }

  .sm-w90 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .sm-w80 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .sm-w75 {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }

  .sm-w60 {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  .sm-w50 {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  .sm-w33 {
    width: 33.3%;
    margin-left: auto;
    margin-right: auto;
  }

  .sm-w25 {
    width: 25%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 767px) {

  /*　画面サイズが767pxまではここを読み込む　*/
  .xs-w100 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .xs-w95 {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }

  .xs-w90 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .xs-w80 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .xs-w75 {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }

  .xs-w70 {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }

  .xs-w60 {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  .xs-w50 {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  .xs-w33 {
    width: 33.3%;
    margin-left: auto;
    margin-right: auto;
  }

  .xs-w30 {
    width: 30%;
    margin-left: auto;
    margin-right: auto;
  }

  .xs-w25 {
    width: 25%;
    margin-left: auto;
    margin-right: auto;
  }
}

.p-all-1 {
  padding: 1%;
  box-sizing: border-box;
}

.p-all-2 {
  padding: 2%;
  box-sizing: border-box;
}

.p-all-5 {
  padding: 5%;
  box-sizing: border-box;
}

.p-all-10 {
  padding: 10%;
  box-sizing: border-box;
}

.p-top-1 {
  padding-top: 1%;
  box-sizing: border-box;
}

.p-top-2 {
  padding-top: 2%;
  box-sizing: border-box;
}

.p-top-5 {
  padding-top: 5%;
  box-sizing: border-box;
}

.p-top-10 {
  padding-top: 10%;
  box-sizing: border-box;
}

.p-bottom-1 {
  padding-bottom: 1%;
  box-sizing: border-box;
}

.p-bottom-2 {
  padding-bottom: 2%;
  box-sizing: border-box;
}

.p-bottom-5 {
  padding-bottom: 5%;
  box-sizing: border-box;
}

.p-bottom-10 {
  padding-bottom: 10%;
  box-sizing: border-box;
}

.p-left-1 {
  padding-left: 1%;
  box-sizing: border-box;
}

.p-left-2 {
  padding-left: 2%;
  box-sizing: border-box;
}

.p-left-5 {
  padding-left: 5%;
  box-sizing: border-box;
}

.p-left-10 {
  padding-left: 10%;
  box-sizing: border-box;
}

.p-right-1 {
  padding-right: 1%;
  box-sizing: border-box;
}

.p-right-2 {
  padding-right: 2%;
  box-sizing: border-box;
}

.p-right-5 {
  padding-right: 5%;
  box-sizing: border-box;
}

.p-right-10 {
  padding-right: 10%;
  box-sizing: border-box;
}

.m-all-auto {
  margin: auto;
}

.m-all-1 {
  margin: 1%;
}

.m-all-2 {
  margin: 2%;
}

.m-all-5 {
  margin: 5%;
}

.m-all-10 {
  margin: 10%;
}

.m-top-auto {
  margin-top: auto;
}

.m-top-0 {
  margin-top: 0;
}

.m-top-1 {
  margin-top: 1%;
}

.m-top-2 {
  margin-top: 2%;
}

.m-top-5 {
  margin-top: 5%;
}

.m-top-10 {
  margin-top: 10%;
}

.m-bottom-auto {
  margin-bottom: auto;
}

.m-bottom-0 {
  margin-bottom: 0;
}

.m-bottom-1 {
  margin-bottom: 1%;
}

.m-bottom-2 {
  margin-bottom: 2%;
}

.m-bottom-5 {
  margin-bottom: 5%;
}

.m-bottom-10 {
  margin-bottom: 10%;
}

.m-left-auto {
  margin-left: auto;
}

.m-left-0 {
  margin-left: 0;
}

.m-left-1 {
  margin-left: 1%;
}

.m-left-2 {
  margin-left: 2%;
}

.m-left-5 {
  margin-left: 5%;
}

.m-left-10 {
  margin-left: 10%;
}

.m-right-auto {
  margin-right: auto;
}

.m-right-0 {
  margin-right: 0;
}

.m-right-1 {
  margin-right: 1%;
}

.m-right-2 {
  margin-right: 2%;
}

.m-right-5 {
  margin-right: 5%;
}

.m-right-10 {
  margin-right: 10%;
}

/*************
float関連
*************/
.float-wrap:after {
  content: "";
  display: block;
  clear: both;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

@media screen and (max-width: 1119px) {

  /*　画面サイズが1119pxまではここを読み込む　*/
  .md-float-none {
    float: none;
  }
}

@media screen and (max-width: 991px) {

  /*　画面サイズが991pxまではここを読み込む　*/
  .sm-float-none {
    float: none;
  }
}

@media screen and (max-width: 767px) {

  /*　画面サイズが767pxまではここを読み込む　*/
  .xs-float-none {
    float: none;
  }
}

/*************
flex関連
*************/
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: normal;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

/*************
ボタン関連
*************/
.btn {
  background-color: #333333;
  border: 1px solid #333333;
  border-radius: 0.25em;
  color: #ffffff;
  box-sizing: border-box;
  padding: 0.3em 1em;
  max-width: max-content;
  cursor: pointer;
  text-decoration: none;
}

.btn.hover {
  transition: 0.8s;
}

.btn.hover:hover {
  background-color: #ffffff;
  color: #333333;
}

.btn.hover:hover span {
  position: relative;
  z-index: 1;
}

.btn.type2 {
  position: relative;
  padding-right: 2em;
}

.btn.type2::after {
  content: "\e5e1";
  font-family: "Material Icons";
  position: absolute;
  right: 0.5em;
  top: 0.4em;
}

.btn.type3 {
  position: relative;
  padding-left: 2em;
}

.btn.type3::before {
  content: "▼";
  position: absolute;
  left: 0.5em;
  top: 0.55em;
  transform: rotate(-90deg);
  font-size: 80%;
}

.btn.type4 {
  position: relative;
  padding-right: 2.5em;
}

.btn.type4::after {
  content: "▼";
  position: absolute;
  right: 0.5em;
  top: 0.6em;
  transform: rotate(-90deg);
  font-size: 80%;
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-color: #ffffff;
  color: #333333;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 1% 3%;
}

.btn.type5 {
  border: 0.25em double #9e9e9e;
}

.btn.type6 {
  border: 0.15em dashed #9e9e9e;
}

.btn.type7 {
  position: relative;
  overflow: hidden;
  display: block;
  padding-left: 2em;
}

.btn.type7::before {
  content: "";
  position: absolute;
  top: 0;
  left: -90%;
  width: 100%;
  height: 100%;
  background: #9e9e9e;
}

.btn.type7.hover {
  transition: unset;
}

.btn.type7.hover::before {
  transition: all 0.5s ease-in-out;
}

.btn.type7.hover:hover:before {
  left: 0;
}

.btn.type8 {
  position: relative;
  overflow: hidden;
  display: block;
  padding-left: 2em;
}

.btn.type8::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 500%;
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
  background: #9e9e9e;
}

.btn.type8.hover {
  transition: unset;
}

.btn.type8.hover::before {
  transition: all 0.5s ease-in-out;
}

.btn.type8.hover:hover:before {
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

.btn.type9 {
  position: relative;
  overflow: hidden;
  display: block;
  padding-left: 2em;
  padding-right: 2em;
}

.btn.type9::before {
  content: "";
  position: absolute;
  top: 0;
  left: -90%;
  width: 100%;
  height: 100%;
  background: #9e9e9e;
}

.btn.type9::after {
  content: "";
  position: absolute;
  top: 0;
  right: -90%;
  width: 100%;
  height: 100%;
  background: #9e9e9e;
}

.btn.type9.hover {
  transition: unset;
}

.btn.type9.hover::before {
  transition: all 0.5s ease-in-out;
}

.btn.type9.hover::after {
  transition: all 0.5s ease-in-out;
}

.btn.type9.hover:hover:before {
  left: -50%;
}

.btn.type9.hover:hover::after {
  right: -50%;
}

.btn.type10 {
  position: relative;
  overflow: hidden;
  display: block;
  padding-left: 2em;
  padding-right: 2em;
}

.btn.type10::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 500%;
  transform: translateX(-92%) translateY(-25%) rotate(45deg);
  background: #9e9e9e;
}

.btn.type10::after {
  content: "";
  position: absolute;
  top: -325%;
  width: 150%;
  height: 500%;
  transform: rotate(45deg) translateX(0) translateY(0);
  background: #9e9e9e;
}

.btn.type10.hover {
  transition: unset;
}

.btn.type10.hover::before {
  transition: all 0.5s ease-in-out;
}

.btn.type10.hover::after {
  transition: all 0.5s ease-in-out;
}

.btn.type10.hover:hover:before {
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

.btn.type10.hover:hover:after {
  transform: rotate(45deg) translateX(0) translateY(50%);
}

.btn.type11 {
  position: relative;
  overflow: hidden;
  display: block;
  border: none;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.btn.type11::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.2em;
  background: #9e9e9e;
}

.btn.type11::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 0.2em;
  background: #9e9e9e;
}

.btn.type11.hover {
  transition: unset;
}

.btn.type11.hover::before {
  transition: all 0.5s ease-in-out;
}

.btn.type11.hover::after {
  transition: all 0.5s ease-in-out;
}

.btn.type11.hover:hover:before {
  left: -100%;
}

.btn.type11.hover:hover:after {
  right: -100%;
}

.btn.type12 {
  position: relative;
  display: block;
  border: none;
  background-color: #9e9e9e;
  padding-bottom: 0.5em;
  border-radius: unset;
}

.btn.type12::before {
  content: "";
  position: absolute;
  top: -0.3em;
  left: -0.5em;
  width: 100%;
  height: 100%;
  border: 0.15em solid #000;
  box-sizing: border-box;
}

.btn.type12.hover:hover {
  padding: 0.3em 1em;
}

.btn.type12.hover::before {
  transition: all 0.5s ease-in-out;
}

.btn.type12.hover:hover:before {
  top: 0;
  left: 0;
}

/**画像拡大ホバー**/
.hover-scale-img {
  overflow: hidden;
  position: relative;
  display: block;
}

.hover-scale-img img {
  display: block;
}

.hover-scale-img:hover img {
  transform: scale(1.5);
  transition: 0.5s;
}

.hover-scale-img.bg:hover::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgb(51 51 51 / 60%);
  z-index: 1;
}

/*************
アコーディオン関連
*************/
.accordion-wrap dt {
  position: relative;
  background-color: #333333;
  box-sizing: border-box;
  padding: 1em;
  color: #ffffff;
  cursor: pointer;
}

.accordion-wrap dd {
  display: none;
}

.accordion-wrap.type1 dt:before {
  content: "\e145";
  font-family: "Material Icons";
  display: block;
  width: 2em;
  height: 2em;
  background-color: #9e9e9e;
  color: #ffffff;
  box-sizing: border-box;
  padding: 0.5em;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  line-height: 1em;
  transition: all 0.5s ease-in-out;
}

.accordion-wrap.type1 dt.active:before {
  content: "\e15b";
}

.accordion-wrap.type2 dt:before {
  content: "\e145";
  font-family: "Material Icons";
  display: block;
  width: 2em;
  height: 2em;
  background-color: #9e9e9e;
  color: #ffffff;
  box-sizing: border-box;
  padding: 0.5em;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  line-height: 1em;
  border-radius: 50%;
  transition: all 0.5s ease-in-out;
}

.accordion-wrap.type2 dt.active:before {
  transform: rotate(45deg);
}

.accordion-wrap.type3 dt:before {
  content: "\e5e1";
  font-family: "Material Icons";
  display: block;
  width: 2em;
  height: 2em;
  color: #ffffff;
  box-sizing: border-box;
  padding: 0.5em;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  line-height: 1em;
  transition: all 0.5s ease-in-out;
}

.accordion-wrap.type3 dt.active:before {
  transform: rotate(90deg);
}

/*************
ポップ関連
*************/
.popup-wrap {
  display: none;
}

.popup-wrap.active {
  display: block;
  position: fixed;
  z-index: 9999999999;
  animation: show 0.8s linear 0s;
}

.popup-wrap.active .popup-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background-color: rgb(51 51 51 / 75%);
  z-index: 1;
}

.popup-wrap.active .popup {
  position: fixed;
  top: 25%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: 2;
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 2%;
  overflow-y: scroll;
  max-height: 50vh;
}

.popup-wrap.active .close {
  display: block;
  position: fixed;
  top: 20%;
  right: 2%;
  cursor: pointer;
  font-size: 2rem;
  color: #ffffff;
  font-weight: bold;
  z-index: 2;
}

/**************************
スクロールアニメーション
**************************/
.scroll-wrap {
  opacity: 0;
  transition: all 1s ease-in-out;
}

.scroll-wrap.slow {
  transition: all 1.5s ease-in-out;
}

.scroll-wrap.fast {
  transition: all 0.5s ease-in-out;
}

.scroll-wrap.is-active {
  opacity: 1;
}

/**left-right**/
.scroll-wrap.left-right {
  transform: translateX(-25%);
}

.scroll-wrap.left-right.is-active {
  transform: translateX(0%);
}

/**right-left**/
.scroll-wrap.right-left {
  transform: translateX(25%);
}

.scroll-wrap.right-left.is-active {
  transform: translateX(0%);
}

/**bottom-top**/
.scroll-wrap.bottom-top {
  transform: translateY(2%);
}

.scroll-wrap.bottom-top.is-active {
  transform: translateY(0%);
}

/**top-bottom**/
.scroll-wrap.top-bottom {
  transform: translateY(-25%);
}

.scroll-wrap.top-bottom.is-active {
  transform: translateY(0%);
}

/**************************
流体シェイプ
**************************/
@keyframes shape1 {

  0%,
  100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }

  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }

  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }

  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }

  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }

  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }

  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}

.shape.type1 {
  width: 350px;
  height: 350px;
  background-color: #2196f3;
  animation: shape1 30s ease 0s infinite;
}

/**************************
背景色変化
**************************/
@keyframes bgchange {
  0% {
    background: #ffe6e1;
  }

  25% {
    background: #fdcb9e;
  }

  50% {
    background: #fdcbc1;
  }

  75% {
    background: #ffff8c;
  }

  90% {
    background: #b2dffb;
  }

  100% {
    background: #ffe6e1;
  }
}

.bg-time-color {
  animation: bgchange 20s ease infinite;
}

/**************************
グラデーション背景色変化
**************************/
@keyframes bggradchange {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.bggrad-time-color {
  background: linear-gradient(45deg, #3bade3, #9844b7, #44ea76);
  background-size: 200% 200%;
  animation: bggradchange 20s ease infinite;
}

/*************
トピックス関連
*************/
.topics-list .topics {
  list-style: none;
}

.topics-list .topics li {
  display: flex;
  flex-wrap: wrap;
  justify-content: normal;
  align-items: baseline;
  margin-bottom: 0.5em;
}

.topics-list .topics li .date {
  width: 7em;
}

.topics-list .topics li .cat {
  width: 5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

.topics-list .topics li .title {
  margin-left: 0.5em;
  color: #333333;
  text-decoration: none;
  margin-top: auto;
  margin-bottom: auto;
  width: calc(100% - 22em);
}

@media screen and (max-width: 767px) {

  /*　画面サイズが767pxまではここを読み込む　*/
  .topics-list .topics li .title {
    width: 100%;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
}

/*************
タブ関連
*************/
.tab-wrap .tab-menu ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: normal;
  align-items: baseline;
}

.tab-wrap .tab-contnts>div {
  display: none;
}

.tab-wrap .tab-contnts>div.active {
  display: block;
  animation: show 0.8s linear 0s;
}

/**タイプ1**/
.tab-wrap.type1 .tab-menu ul li {
  cursor: pointer;
  box-sizing: border-box;
  padding: 10px;
  border-bottom: none;
  position: relative;
  text-align: center;
}

.tab-wrap.type1 .tab-menu ul li.active::after {
  content: "▼";
  color: #2196f3;
  position: absolute;
  bottom: -0.9em;
  left: 0;
  right: 0;
  text-align: center;
}

.tab-wrap.type1 .tab-contnts {
  box-sizing: border-box;
  padding: 15px;
}

/*************
table関連
*************/
table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

.table-scroll {
  overflow-x: auto;
  box-sizing: border-box;
  padding-bottom: 5px;
  padding-top: 5px;
}

.table-scroll table {
  min-width: 980px;
}

/**type1**/
table.type1 th {
  border: 1px solid #333333;
  padding: 0.5em;
  box-sizing: border-box;
}

table.type1 td {
  border: 1px solid #333333;
  padding: 0.5em;
  box-sizing: border-box;
}

/**type2**/
table.type2 th {
  border: 1px solid #333333;
  padding: 0.5em;
  box-sizing: border-box;
}

table.type2 td {
  border: 1px solid #333333;
  padding: 0.5em;
  box-sizing: border-box;
}

table.type2 tbody tr:nth-of-type(2n) {
  background-color: #eeeeee;
}

/**type3**/
table.type3 th {
  border: 1px solid #333333;
  padding: 0.5em;
  box-sizing: border-box;
  background-color: #333333;
  color: #ffffff;
  position: relative;
}

table.type3 th::before {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  position: absolute;
  bottom: -1em;
  left: 50%;
  transform: rotate(90deg);
  border-left: 0.75em solid #333333;
  border-top: 0.75em solid transparent;
  border-bottom: 0.75em solid transparent;
  z-index: 1;
}

table.type3 td {
  border: 1px solid #333333;
  padding: 0.5em;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {

  /*　画面サイズが767pxまではここを読み込む　*/
  .table-block table {
    display: block;
    width: 100%;
  }

  .table-block table thead {
    display: block;
    width: 100%;
  }

  .table-block table tbody {
    display: block;
    width: 100%;
  }

  .table-block table tr {
    display: block;
    width: 100%;
  }

  .table-block table tr th {
    display: block;
    width: 100%;
  }

  .table-block table tr td {
    display: block;
    width: 100%;
  }
}

/*************
カードタイプ
*************/
.card {
  display: flex;
  flex-wrap: wrap;
}

.card .card-top {
  width: 100%;
}

.card .card-bottom {
  width: 100%;
  box-sizing: border-box;
  padding: 5%;
}

/*************
Form関連
*************/
form dl {
  display: table;
  width: 100%;
  margin-bottom: 25px;
}

form dl dt {
  display: table-cell;
  vertical-align: top;
}

form dl dd {
  display: table-cell;
}

form input {
  font-size: 1rem;
}

form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  font-size: 1rem;
}

form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
}

form input[type="radio"] {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

form input[type="checkbox"] {
  width: 1em;
  height: 1em;
  vertical-align: text-bottom;
}

/*************************
グルーバルナビゲーション
*************************/
/**ハンバーガーアイコン**/
#nav_icon {
  position: absolute;
  top: 5px;
  right: 5px;
  box-sizing: border-box;
  padding: 0.5em;
  width: 4em;
  height: 3.5em;
  background-color: #333333;
  display: none;
  z-index: 9999999999;
}

#nav_icon .menu-ic {
  display: block;
  width: 3em;
  height: 0.25em;
  background-color: #ffffff;
  position: absolute;
  top: 1.65em;
  transition: 0.5s;
}

#nav_icon .menu-ic:before {
  content: "";
  display: block;
  width: 3em;
  height: 0.25em;
  background-color: inherit;
  position: absolute;
  top: -0.75em;
  transition: 0.5s;
}

#nav_icon .menu-ic:after {
  content: "";
  display: block;
  width: 3em;
  height: 0.25em;
  background-color: inherit;
  position: absolute;
  bottom: -0.75em;
  transition: 0.5s;
}

.nav-contents .ic-toggle {
  display: none;
  position: absolute;
  top: 0.5em;
  right: 5px;
  width: 2em;
  height: 2em;
  background-color: #ffffff;
  color: #333333;
}

.nav-contents .ic-toggle::before {
  content: "";
  display: block;
  width: 1.5em;
  height: 0.25em;
  background-color: #333333;
  position: absolute;
  top: 50%;
  left: 0.25em;
  transition: 0.5s;
}

.nav-contents .ic-toggle::after {
  content: "";
  display: block;
  width: 1.5em;
  height: 0.25em;
  background-color: #333333;
  position: absolute;
  top: 50%;
  left: 0.25em;
  transform: rotate(90deg);
  transition: 0.5s;
}

.nav-contents .ic-toggle.active::before {
  transform: rotate(45deg);
}

.nav-contents .ic-toggle.active::after {
  transform: rotate(135deg);
}

/**オープン時**/
body.drawer-opened #nav_icon .menu-ic {
  width: 0;
  transition: 0s;
}

body.drawer-opened #nav_icon .menu-ic::before {
  transform: rotate(45deg);
  top: 0em;
}

body.drawer-opened #nav_icon .menu-ic::after {
  transform: rotate(-45deg);
  bottom: 0em;
}

body.drawer-opened .nav-contents>ul>li {
  position: relative;
}

body.drawer-opened .nav-contents .ic-toggle {
  display: block;
}

/**ハンバーガーメニュー表示**/
@media screen and (max-width: 1119px) {

  /*　画面サイズが992pxから1119pxまではここを読み込む　*/
  .md-spmenu #nav_icon {
    display: block;
  }

  .md-spmenu .nav-contents {
    display: none;
    position: fixed;
    top: 10vh;
    width: 100%;
    left: 0;
    right: 0;
    height: 90vh;
    background-color: #333333;
    z-index: 999999999;
  }

  /**オープン時**/
  body.drawer-opened {
    overflow-y: hidden;
  }

  body.drawer-opened header {
    height: 10vh;
  }
}

@media screen and (max-width: 991px) {

  /*　画面サイズが768pxから991pxまではここを読み込む　*/
  .sm-spmenu #nav_icon {
    display: block;
  }

  .sm-spmenu .nav-contents,
  .xs-spmenu .nav-contents {
    display: none;
    position: fixed;
    top: 10vh;
    width: 100%;
    left: 0;
    right: 0;
    height: 90vh;
    background-color: #333333;
    z-index: 999999999;
  }
}

@media screen and (max-width: 767px) {

  /*　画面サイズが767pxまではここを読み込む　*/
  .xs-spmenu #nav_icon {
    display: block;
  }

  .md-spmenu .nav-contents,
  .sm-spmenu .nav-contents,
  .xs-spmenu .nav-contents {
    display: none;
    position: fixed;
    top: 13vh !important;
    width: 100%;
    left: 0;
    right: 0;
    height: 87vh;
    background-color: #333333;
    z-index: 999999999;
  }

  /**オープン時**/
  body.drawer-opened header {
    height: 13vh;
  }
}

nav ul {
  display: flex;
  justify-content: space-between;
}

nav ul li {
  width: 100%;
  list-style: none;
}

nav a {
  text-decoration: none;
  color: inherit;
}

/**タイプ1**/
nav.type1 ul li>a {
  display: block;
  box-sizing: border-box;
  padding: 15px;
}

nav.type1 ul li ul {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #333333;
  color: #ffffff;
  text-align: center;
  animation: show 0.8s linear 0s;
}

nav.type1 ul li ul li {
  display: inline-block;
  width: max-content;
  box-sizing: border-box;
  padding: 15px;
}

nav.type1 ul li ul li a {
  box-sizing: border-box;
  display: block;
}

/**オープン時**/
body.drawer-opened nav.type1 .nav-contents {
  display: block;
  animation: show 0.8s linear 0s;
  z-index: 999999999;
  overflow-y: auto;
}

body.drawer-opened nav.type1 .nav-contents>ul {
  display: flex;
  flex-wrap: wrap;
  color: #ffffff;
  padding: 5% 0%;
  box-sizing: border-box;
}

body.drawer-opened nav.type1 ul li ul {
  position: static;
}

body.drawer-opened nav.type1 ul li ul li {
  width: 100%;
  display: block;
  text-align: left;
  padding: 1em;
}

body.drawer-opened nav.type1 ul li ul li a {
  padding: 5px;
}

body.drawer-opened nav.type1 .nav-2 {
  display: flex;
  flex-wrap: wrap;
}

body.drawer-opened nav.type1 .nav-2 a {
  display: block;
  width: 48%;
  max-width: initial;
  border: 1px solid #ffffff;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 10px 5px;
  margin: 1%;
}

body.drawer-opened nav.type1 .nav-2 p {
  text-align: center;
}

/**ハンバーガーメニュー表示**/
@media screen and (max-width: 1119px) {

  /*　画面サイズが992pxから1119pxまではここを読み込む　*/
  body.drawer-opened nav.type1 .nav-2 a {
    width: 48%;
  }
}

@media screen and (max-width: 991px) {
  /*　画面サイズが768pxから991pxまではここを読み込む　*/
}

@media screen and (max-width: 767px) {
  /*　画面サイズが767pxまではここを読み込む　*/
}

/**タイプ2**/
nav.type2 ul li>a {
  display: block;
  box-sizing: border-box;
  padding: 15px;
}

nav.type2 ul li ul {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #333333;
  color: #ffffff;
  text-align: center;
  animation: show 0.8s linear 0s;
}

nav.type2 ul li ul li {
  display: inline-block;
  width: max-content;
  box-sizing: border-box;
  padding: 15px;
}

nav.type2 ul li ul li a {
  box-sizing: border-box;
  display: block;
}

/**オープン時**/
body.drawer-opened nav.type2 .nav-contents {
  display: block;
  right: 0 !important;
  z-index: 999999999;
  overflow-y: auto;
}

body.drawer-opened nav.type2 .nav-contents>ul {
  display: flex;
  flex-wrap: wrap;
  color: #ffffff;
  padding: 5% 0%;
  box-sizing: border-box;
}

body.drawer-opened nav.type2 ul li ul {
  position: static;
}

body.drawer-opened nav.type2 ul li ul li {
  width: 100%;
  display: block;
  text-align: left;
  padding: 1em;
}

body.drawer-opened nav.type2 ul li ul li a {
  padding: 5px;
}

body.drawer-opened nav.type2 .nav-2 {
  display: flex;
  flex-wrap: wrap;
}

body.drawer-opened nav.type2 .nav-2 a {
  display: block;
  width: 48%;
  max-width: initial;
  border: 1px solid #ffffff;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 10px 5px;
  margin: 1%;
}

body.drawer-opened nav.type2 .nav-2 p {
  text-align: center;
}

/**ハンバーガーメニュー表示**/
@media screen and (max-width: 1119px) {

  /*　画面サイズが992pxから1119pxまではここを読み込む　*/
  body.md-spmenu nav.type2 .nav-contents {
    position: fixed;
    left: auto;
    right: -100vw;
    display: block;
    transition: 0.5s;
  }
}

@media screen and (max-width: 991px) {

  /*　画面サイズが768pxから991pxまではここを読み込む　*/
  body.sm-spmenu nav.type2 .nav-contents {
    position: fixed;
    left: auto;
    right: -100vw;
    display: block;
  }
}

@media screen and (max-width: 767px) {

  /*　画面サイズが767pxまではここを読み込む　*/
  body.xs-spmenu nav.type2 .nav-contents {
    position: fixed;
    left: auto;
    right: -100vw;
    display: block;
  }
}

/******************************
サイドメニュー
******************************/
body.sidemenu header {
  position: fixed;
  height: 100%;
  width: 260px;
  background-color: #ffffff;
}

body.sidemenu main {
  padding-left: 260px;
}

body.sidemenu footer {
  padding-left: 260px;
}

body.sidemenu header nav ul {
  display: block;
}

body.sidemenu header nav ul li ul {
  display: none;
}

body.sidemenu header nav .nav-contents {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
}

/**type1**/
body.sidemenu header nav.type1 ul.nav-1>li {
  position: relative;
}

body.sidemenu header nav.type1 ul.nav-1 li ul {
  display: none;
  top: 0;
  left: 260px;
}

body.sidemenu header nav.type1 ul.nav-1 li ul li {
  width: 100%;
  display: block;
  padding: 5px;
}

body.sidemenu header nav.type1 ul.nav-1 li ul li a {
  padding: 10px;
}

/**type2**/
body.sidemenu header nav.type2 ul.nav-1>li {
  position: relative;
}

body.sidemenu header nav.type2 ul.nav-1 li ul {
  display: none;
  top: 0;
  left: 260px;
}

body.sidemenu header nav.type2 ul.nav-1 li ul li {
  width: 100%;
  display: block;
  padding: 5px;
}

body.sidemenu header nav.type2 ul.nav-1 li ul li a {
  padding: 10px;
}

/**ハンバーガーメニュー表示**/
@media screen and (max-width: 1119px) {

  /*　画面サイズが992pxから1119pxまではここを読み込む　*/
  body.sidemenu.md-spmenu header {
    position: relative;
    height: 100%;
    width: 100%;
  }

  body.sidemenu.md-spmenu main {
    padding-left: 0;
  }

  body.sidemenu.md-spmenu footer {
    padding-left: 0;
  }
}

@media screen and (max-width: 991px) {

  /*　画面サイズが768pxから991pxまではここを読み込む　*/
  body.sidemenu.sm-spmenu header {
    position: relative;
    height: 100%;
    width: 100%;
  }

  body.sidemenu.sm-spmenu main {
    padding-left: 0;
  }

  body.sidemenu.sm-spmenu footer {
    padding-left: 0;
  }
}

@media screen and (max-width: 767px) {

  /*　画面サイズが767pxまではここを読み込む　*/
  body.sidemenu.xs-spmenu header {
    position: relative;
    height: 100%;
    width: 100%;
  }

  body.sidemenu.xs-spmenu main {
    padding-left: 0;
  }

  body.sidemenu.xs-spmenu footer {
    padding-left: 0;
  }
}