@charset "utf-8";

:root {
  --swiper-theme-color: #fff;
}

body {
  color: #333;
  font-size: 13px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Sans-Serif;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  width: auto;
}

#container {
  margin: 0 auto;
  height: 100%;
  line-height: 1.5;
  color: #333;
  overflow: hidden;
  position: relative;
}

p#bread {
  font-size: 11px;
  margin-top: 70px;
}

@media all and (min-width: 751px) {
  body {
    font-size: 13px;
    text-align: center;
    margin: 0 auto;
  }

  #container {
    width: 100%;
    min-width: 1024px;
    position: relative;
  }

  p#bread {
    font-size: 13px;
    margin-top: 10px;
  }
}



/*************************************************************** 共通 ***************************************************************/
h2.ttlMain01 {
  position: relative;
  margin: 20px 0 15px -18px;
  padding: 7px 26px 7px 55px;
  background: #4f4d9e;
  font-size: 15px;
  font-weight: bold;
  color: #FFF;
  text-align: left;
  line-height: 1.3;
  border-bottom: solid 3px #7f7ce2;
  z-index: -2;
}

h2.ttlMain01:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index: -1;
}

h2.ttlMain01:after {
  position: absolute;
  content: '';
  right: -3px;
  top: -7px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px transparent;
  border-bottom: solid 79px white;
  z-index: -1;
}

h3.ttlMain01 {
  color: #4f4d9e;
  font-size: 13px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 15px;
  padding: 7px 0 7px 15px;
  border-top: solid 3px #4f4d9e;
  border-bottom: solid 3px #4f4d9e;
}

h3.ttlMain02 {
  color: #039;
  font-size: 16px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 15px;
  line-height: 1.7;
}

h3.ttlMain03 {
  color: #4f4d9e;
  font-size: 13px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 15px;
  padding: 5px 0 5px 15px;
  border-left: solid 5px #4f4d9e;
  border-bottom: solid 1px #4f4d9e;
}

.border {
  margin: 30px auto;
  padding: 20px;
}

@media screen and (min-width: 500px) {
  .border {
    margin: 30px auto;
    padding: 20px;
  }

  .pc {
    display: block !important;
    margin: 0 auto;
    width: 500px;
    height: 600px;
  }

  .sp {
    display: none !important;
  }
}

@media screen and (max-width: 575px) {
  .border {
    margin: 30px auto;
    padding: 20px;
  }

  .pc {
    display: block !important;
    margin: 0 auto;
    width: 320px;
    height: 300px;
  }

  .sp {
    display: block !important;
    margin: 0 auto;
    width: 320px;
    height: 300px;
  }
}

@media all and (min-width: 751px) {
  h2.ttlMain01 {
    margin: 40px 0 20px -33px;
    padding: 10px 26px 10px 55px;
    font-size: 20px;
  }

  h3.ttlMain01 {
    font-size: 14px;
    margin-bottom: 20px;
    padding: 10px 0 10px 15px;
  }

  br.br {
    display: none;
  }
}

/*************************************************************** Header ***************************************************************/
header {

  --logo-height: 50px;
  --logo-width: 35%;
  --logo-gap: 2em;
  --logo-padding: 1em;
}

header .inner {
  width: 1024px;
  margin: 0 auto;
}

header .bg {}

header .headerTxt {
  color: #1432aa;
  font-size: 11px;
  margin: 2px auto 1px;
  text-align: left;
}

header .header_flex,
header .text_box {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
}

header .header_flex h1 {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  width: calc(var(--logo-height) * 8);
  padding: var(--logo-padding) 1em;
  background: #fff;
  gap: var(--logo-gap);
}

header .header_flex h1 a {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  display: block;
  /* height: var(--logo-height); */
}

header .header_flex h1 a:nth-child(1) {
  width: var(--logo-width);
  /* max-height: 42px; */
}

header .header_flex h1 a:nth-child(2) {
  width: calc(100% - var(--logo-width) - var(--logo-gap));
  max-height: 24px;
  object-fit: contain;
  object-position: left;
}

header .header_flex h1 img {
  /* max-height: 42px; */
}

header .flex .text_box,
header .flex .text_box a {
  color: #000;
  font-size: 12px;
}

header .flex .text_box a {}

header .flex .text_box a:hover {
  opacity: 0.7;
  text-decoration: none;
}

header .flex .text_box .lang_box {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  height: calc(var(--logo-height) + var(--logo-padding) * 2.2);
  padding: 0 1em;
  color: #fff;
  background: #000;
}

header .flex .text_box .lang a {
  color: #fff;
}

header .flex .text_box .lang p {
  margin: 0 auto 0.5em;
}

header .flex .text_box .lang .flex {
  gap: 1em;
}

header .flex .text_box .navi {
  height: calc(var(--logo-height) + var(--logo-padding) * 2.2);
}

header .flex .text_box .navi ul {
  display: -webkit-box;
  display: flex;
  height: 100%
}

header .flex .text_box .navi ul li {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  height: 100%;
  padding: 0 1em;
  border-left: 1px solid #1432aa;
}

header .flex .text_box .navi ul li:last-child {
  border-right: 1px solid #1432aa;
}

@media all and (max-width: 751px) {
  header {
    --logo-height: 34px;
    --logo-width: 35%;
    --logo-gap: 1em;
    --logo-padding: 1em;
    width: 100%;
    position: fixed;
    z-index: 10;
  }

  header .inner {
    width: 80%;
    margin: 0 auto 0 0;
  }

  header .headerTxt {
    display: none;
  }

  header .bg {
    position: relative;
    background: rgba(22, 19, 125, 0.9);
    z-index: 0;
  }

  header .flex h1 {
    width: 100%;
    background: #ffffffcc;
  }

  header .flex .text_box {
    display: none;
  }
}

/*************************************************************** Navi ***************************************************************/
div#navi {
  display: none;
}

@media all and (min-width: 751px) {
  div#navi {
    display: block;
    position: absolute;
    width: 1024px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 100;
  }

  div#navi ul {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
  }

  div#navi ul li {
    width: 25%;
  }

  div#navi ul li a {
    display: block;
    color: #fff;
    font-weight: bold;
    padding: 10px 0;
  }

  div#navi ul li a:hover {
    background: rgba(255, 255, 255, 0.3);
    text-decoration: none;
  }

  div#navi ul li a span {
    font-size: 10px;
    font-weight: normal;
  }
}

/*************************************************************** main ***************************************************************/
div#main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 60px auto 0;
}


div.slide_all {
  margin: 0 auto;
  height: auto;
  position: relative;
}

@media all and (min-width: 751px) {
  div#main {
    width: 1024px;
    margin: 0 auto;
  }
}



/*************************************************************** topBtn ***************************************************************/
#topBtn {
  width: 100%;
  margin: 20px auto 0;
}

#topBtn>div {
  float: left;
  margin-bottom: 10px;
  padding-left: 5px;
  padding-right: 5px;
}

#topBtn .topBtnInner {
  width: 50%;
}

#topBtn div.topBtn:after {
  content: "";
  clear: both;
  height: 0;
  display: block;
  visibility: hidden;
}

@media screen and (min-width: 751px) {
  #topBtn {
    padding-left: 15px;
    width: 100%;
    max-width: 1024px;
    margin: 20px auto 0;
  }

  #topBtn>div {
    float: left;
    margin-bottom: 20px;
    padding-left: 0;
    padding-right: 15px;
  }

  #topBtn .topBtnInner {
    width: 33.33333%;
  }
}


/*************************************************************** pageTop ***************************************************************/
p#pageTop {
  width: 100%;
  margin: 20px auto 0;
  text-align: right;
}

p#pageTop a {
  position: relative;
  display: block;
  width: 52px;
  height: 52px;
  background: #1432aa;
  margin: 0 0 0 auto;
}

p#pageTop a:before,
p#pageTop a:after {
  --border-rotate: 40deg;
  --border-slide: 10px;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: calc(50% + var(--slide));
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 50%;
  height: 1px;
  background: #fff;
}

p#pageTop a:after {
  --slide: var(--border-slide);
  transform: translate(-50%, -50%) rotate(var(--border-rotate));
}

p#pageTop a:before {
  --slide: calc(var(--border-slide) * -1);
  transform: translate(-50%, -50%) rotate(calc(var(--border-rotate) * -1));
}

p#pageTop img {
  width: 10%;
}

@media all and (min-width: 751px) {
  p#pageTop img {
    width: 5%;
  }
}

/*************************************************************** footer ***************************************************************/
div#footer {
  width: 100%;
}

div#footerBg {
  width: 100%;
  background: #4f4d9e;
  box-sizing: border-box;
}

div.footerNavi {
  display: table;
  color: #fff;
  padding: 20px 10px;
}

div.footerNavi a {
  color: #fff;
}

div.footerNaviInner {
  display: table-cell;
  width: 25%;
}

div.footerNaviInner ul {
  font-size: 12px;
  margin-left: 11px;
}

div.footerNaviInner ul li {
  margin-top: 3px;
}

div#footerLogo {
  width: 100%;
  color: #fff;
  margin: 0 auto;
  padding-top: 15px;
  background: #1432aa;
}

div#footerLogo p.logo {
  width: 40%;
  margin: 0 auto;
}

div#footerLogo div.txt {
  font-size: 12px;
  text-align: center;
  margin: 10px 0;
}

@media all and (min-width: 751px) {
  div.footerNavi {
    width: 1024px;
    display: table;
    color: #fff;
    padding: 20px 10px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  div.footerNaviInner {
    display: table-cell;
    width: 25%;
    text-align: left;
    padding-left: 50px;
  }

  div#footerLogo p.logo {
    width: 20%;
    margin: 0 auto;
  }
}

/*************************************************************** copy ***************************************************************/
div#copy {
  width: 100%;
  color: #1432aa;
  padding: 5px;
  background: #fff;
}

div.copyNavi a {
  font-size: 11px;
  color: #1432aa;
}

div.copyNavi ul li {
  display: inline-block;
  margin-right: 10px;
}

div#copy p {
  font-size: 10px;
  padding: 5px 0;
}

@media all and (min-width: 751px) {
  div#copy {
    width: 100%;
    color: #16137d;
    padding: 5px;
    background: #fff;
  }

  div#copyInner {
    width: 1024px;
    margin: 0 auto;
  }

  div.copyNavi {
    float: right;
  }

  div.copyNavi ul li {
    display: inline-block;
    margin-right: 10px;
  }

  div#copy p {
    float: left;
    font-size: 10px;
    padding: 5px 0;
    text-align: left;
  }
}