@charset "utf-8";
/*ver 1.0*/
/******************************/
/* RESET */
/******************************/
* {
  -webkit-text-size-adjust: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%; /* 1.6rem = 16px、1.8 = 18px、2.0rem = 20px のような設定になってます*/
}
body {
  -moz-osx-font-smoothing: grayscale;
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased; /* For Safari */
  -moz-osx-font-smoothing: grayscale; /* For Firefox on macOS */
  line-height: 1.5;
  font-size: 1.4rem;
  font-weight: 400;
}

/* html5要素 */
article,
aside,
dialog,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset,
img {
  border: 0;
  vertical-align: bottom;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}
ol,
ul {
  list-style: none;
}
caption,
th {
  text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  font-size: 100%;
}
q:before,
q:after {
  content: "";
}
abbr,
acronym {
  border: 0;
}

a {
  outline: none;
}

.sd-content ul li {
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/*=======================
    Toyo fonts
=======================*/
/* @font-face {
  font-family: "Noto Sans JP", sans-serif;
  src: url("../fonts/NotoSans.ttf") format("truetype");
  font-style: normal;
} */
/* @font-face {
  font-family: "Roboto", sans-serif;
  src: url("../fonts/Roboto-Bold.ttf") format("truetype");
  font-style: normal;
} */
@font-face {
  font-family: "Din";
  src: url("../fonts/din.otf") format("opentype");
  font-style: normal;
  font-display: swap;
}
/*=======================
    Toyo colors
=======================*/
:root {
  --black: #000000;
  --white: #ffffff;
  --blue: #3e6cc3;
  --blue2: #313648;
  --blue3: #edeff5;
  --blue4: #e5f2f4;
  --blue5: #B1D6F0;
  --blue-light: #f2f8fe;
  --grey: #707070;
  --grey2: #cccccc;
  --grey3: #edeff4;
  --grey4: #666666;
  --red: #ca3143;
  --orange: #f07c3b;
  --green: #1c7d64;
  --green2: #00b7a9;
  --green3: #16af7a;
  --green4: #57bec4;
}
/*=======================
    Toyo base style
=======================*/
.main-wrap {
  padding-top: 80px;
}
.img-fluid {
  width: 100%;
  height: auto;
}
.font-din {
  font-family: "Din", sans-serif;
}
.font-noto {
  font-family: "Noto Sans JP", sans-serif;
}
.font-roboto {
  font-family: "Roboto", sans-serif;
}
.text-center {
  text-align: center;
}
.c-main__header {
  background-color: var(--blue-light);
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  position: relative;
}
.c-main__header .header-side__mv {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 50vw;
  max-width: 930px;
  background-color: #e4e8eb;
  border-bottom-left-radius: 150px;
  overflow: hidden;
}
.l-container {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0px 20px;
  position: relative;
}
.l-container__1200 {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0px 20px;
  position: relative;
}
.l-container__1920{
  width: 100%;
  margin: 0 auto;
  max-width: 1920px;
}
@media screen and (max-width: 768px) {
  .l-container__1200 .l-container {
    padding: 0;
  }
}
.page-heading1 {
  margin-bottom: 12px;
  font-size: 3.5rem;
  font-weight: 700;
}
.category {
  display: inline-block;
  font-size: 1.6rem;
  margin-bottom: 5px;
  font-weight: 700;
}
.english-title1 {
  font-size: 14px;
  font-weight: bold;
  font-family: "Roboto", sans-serif;
  color: var(--grey);
}

.page-heading2 {
  font-size: 3.5rem;
  border-bottom: 1px solid var(--grey2);
  font-weight: 700;
  line-height: 4.7rem;
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 15px;
}
.page-heading2::after {
  content: "";
  border-bottom: 1px solid var(--grey);
  width: 150px;
  height: 0px;
  position: absolute;
  bottom: -1px;
  left: 0px;
}

.page-heading3 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 3rem;
  border-bottom: 1px solid var(--grey2);
  position: relative;
  padding-left: 30px;
  padding-bottom: 10px;
  margin-bottom: 30px;
}
.page-heading3:before {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url("../img/common/h3before.svg");
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  left: 0px;
  top: 5px;
}

.page-heading4 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.6rem;
  background-color: var(--grey3);
  position: relative;
  padding: 7px 10px 10px 30px;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.page-heading4:before {
  content: "";
  width: 8px;
  height: 60%;
  background-color: #313648;
  position: absolute;
  left: 0px;
}

.page-heading5 {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 3rem;
  border-top: 1px solid var(--grey2);
  border-bottom: 1px solid var(--grey2);
  margin-bottom: 30px;
  padding: 7px 0px;
}

.gakka-heading {
  color: var(--white);
  font-size: 2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 0px 12px;
  margin-bottom: 30px;
  letter-spacing: 1px;
  position: relative;
}
.gakka-heading::after {
  content: "";
  position: absolute;
  right: 0px;
  top: 0px;
  width: calc(100% - 250px);
  height: 50px;
  background-color: #ffffff20;
  clip-path: polygon(40px 0, 100% 0%, 100% 100%, 0% 100%);
}
.gakka-heading .g-icon {
  width: 25px;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.percent {
  color: #ffd700;
  font-family: "Roboto", sans-serif;
  font-size: 15rem;
  text-shadow: 3px 3px 0 #3f6cc3;
  line-height: 1;
  font-weight: 700;
  -webkit-text-stroke: 1px #000;
}

.heading-dt {
  background-color: var(--blue);
}
.heading-elt {
  background-color: var(--red);
}
.heading-jt {
  background-color: var(--green);
}
.heading-amt {
  background-color: var(--orange);
}

.para-bold {
  font-weight: 700;
}

.para {
  font-size: 1.4rem;
  line-height: 2.6rem;
  letter-spacing: 1.2px;
}

.para-grey {
  color: var(--grey);
}
.text-green {
  color: var(--green2);
}
.font-35 {
  font-size: 3.5rem;
}

.font-30 {
  font-size: 3rem;
}

.font-26 {
  font-size: 2.6rem;
}

.font-20 {
  font-size: 2rem;
}

.font-18 {
  font-size: 1.8rem;
}

.font-16 {
  font-size: 1.6rem;
}

.font-14 {
  font-size: 1.4rem;
}

.font-12 {
  font-size: 1.2rem;
  line-height: 1.8rem;
}
@media screen and (max-width: 768px) {
  .font-35 {
    font-size: 3rem;
  }
  .font-30 {
    font-size: 2.5rem;
  }
  .font-26 {
    font-size: 2.4rem;
  }
  .font-20 {
    font-size: 1.8rem;
  }
  /*下記はスマホのみ特別に変えたい時だけに使うサイズ*/
  .font-sp__25{
    font-size: 2.5rem;
  }
  .font-sp__22{
    font-size: 2.2rem;
  }
  .font-sp__20{
    font-size: 2rem;
  }
  .font-sp__18{
    font-size: 1.8rem;
  }
  .font-sp__16{
    font-size: 1.6rem;
  }
  .font-sp__14{
    font-size: 1.4rem;
  }
  /*上記はスマホのみ特別に変えたい時だけに使うサイズ*/
  
  .page-heading2 {
    font-size: 3rem;
    line-height: 1.5;
  }
  .page-heading2__sp {
    font-size: 2.5rem;
    line-height: 1.5;
  }
  .page-heading3 {
    font-size: 2rem;
  }
  .page-heading4 {
    font-size: 1.6rem;
  }
  .page-heading5 {
    font-size: 1.6rem;
  }
  .category {
    margin-bottom: 0px;
  }
  .page-heading1 {
    margin-bottom: 0px;
    font-size: 2.8rem;
  }
  .c-main__header {
    height: 180px;
  }
  .percent {
    font-size: 10rem;
  }
}
.btn-cta__wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 2rem;
  width: 100%;
  height: 70px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 1px;

  transition: 0.2s ease;
}
.btn-cta .btn-arrow {
  position: absolute;
  right: 20px;
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-cta:hover,
.btn-cta:focus {
  text-decoration: none;
  transform: translateY(-3px);
}
.btn-blue {
  background-color: var(--blue2);
  border: 1px solid var(--blue2);
  color: var(--white);
}
.btn-blue:hover,
.btn-blue:focus {
  box-shadow: 0px 2px 6px var(--blue2);
}

.btn-white {
  background-color: var(--white);
  border: 1px solid var(--blue2);
  color: var(--blue2);
}
.btn-white:hover,
.btn-white:focus {
  box-shadow: 0px 2px 6px var(--blue2);
}

.btn-grey {
  background-color: var(--grey3);
  border: 1px solid var(--blue2);
  color: var(--blue2);
  width: 100%;
  max-width: 600px;
  height: 56px;
  font-size: 1.8rem;
}
.btn-grey:hover,
.btn-grey:focus {
  box-shadow: 0px 2px 6px var(--grey3);
}
.btn-green {
  background-color: var(--green3);
  border: none;
  color: var(--white);
  width: 100%;
  max-width: 600px;
  height: 50px;
  font-size: 1.8rem;
}
.btn-green:hover,
.btn-green:focus {
  box-shadow: 0px 2px 6px var(--green3);
}
.btn-elt {
  background: rgb(182, 38, 45);
  background: -moz-linear-gradient(
    209deg,
    rgba(182, 38, 45, 1) 0%,
    rgba(255, 101, 108, 1) 100%
  );
  background: -webkit-linear-gradient(
    209deg,
    rgba(182, 38, 45, 1) 0%,
    rgba(255, 101, 108, 1) 100%
  );
  background: linear-gradient(
    209deg,
    rgba(182, 38, 45, 1) 0%,
    rgba(255, 101, 108, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b6262d",endColorstr="#ff656c",GradientType=1);
  border: 1px solid rgb(182, 38, 45);
  color: var(--white);
}
.btn-elt:hover,
.btn-elt:focus {
  box-shadow: 0px 2px 6px rgb(182, 38, 45);
}

.btn-dt {
  background: rgb(63, 108, 195);
  background: -moz-linear-gradient(
    209deg,
    rgba(63, 108, 195, 1) 0%,
    rgba(71, 151, 245, 1) 100%
  );
  background: -webkit-linear-gradient(
    209deg,
    rgba(63, 108, 195, 1) 0%,
    rgba(71, 151, 245, 1) 100%
  );
  background: linear-gradient(
    209deg,
    rgba(63, 108, 195, 1) 0%,
    rgba(71, 151, 245, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3f6cc3",endColorstr="#4797f5",GradientType=1);
  border: 1px solid rgb(63, 108, 195);
  color: var(--white);
}
.btn-dt:hover,
.btn-dt:focus {
  box-shadow: 0px 2px 6px rgb(63, 108, 195);
}

.btn-jt {
  background: rgb(28, 125, 100);
  background: -moz-linear-gradient(
    209deg,
    rgba(28, 125, 100, 1) 0%,
    rgba(0, 172, 119, 1) 100%
  );
  background: -webkit-linear-gradient(
    209deg,
    rgba(28, 125, 100, 1) 0%,
    rgba(0, 172, 119, 1) 100%
  );
  background: linear-gradient(
    209deg,
    rgba(28, 125, 100, 1) 0%,
    rgba(0, 172, 119, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1c7d64",endColorstr="#00ac77",GradientType=1);
  border: 1px solid rgb(28, 125, 100);
  color: var(--white);
}
.btn-jt:hover,
.btn-jt:focus {
  box-shadow: 0px 2px 6px rgb(28, 125, 100);
}

.btn-amt {
  background: rgb(240, 123, 58);
  background: -moz-linear-gradient(
    209deg,
    rgba(240, 123, 58, 1) 0%,
    rgba(255, 156, 21, 1) 100%
  );
  background: -webkit-linear-gradient(
    209deg,
    rgba(240, 123, 58, 1) 0%,
    rgba(255, 156, 21, 1) 100%
  );
  background: linear-gradient(
    209deg,
    rgba(240, 123, 58, 1) 0%,
    rgba(255, 156, 21, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f07b3a",endColorstr="#ff9c15",GradientType=1);
  border: 1px solid rgb(240, 123, 58);
  color: var(--white);
}
.btn-amt:hover,
.btn-amt:focus {
  box-shadow: 0px 2px 6px rgb(240, 123, 58);
}

.link-cta {
  color: var(--black);
  text-decoration: none;
  font-size: 1.4rem;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s ease;
  margin-bottom: 30px;
  margin-right: auto;
  margin-left: auto;
}
.link-cta:focus,
.link-cta:hover {
  opacity: 70%;
}
.link-s {
  width: 100%;
  max-width: 140px;
}
.link-s .link-arrow {
  width: 20px;
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.link-m {
  position: relative;
  width: fit-content;
}
.link-m .link-arrow {
  width: 50px;
  margin-left: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.link-m .link-arrow {
  position: relative;
  z-index: 2;
}
.link-m .link-circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  display: block;
  left: unset;
  width: 50px;
  height: 50px;
  z-index: 0;
  background: #313648;
  border-radius: 3.625rem;
  right: 0;
}
.link-m:hover {
  opacity: 1;
  color: #fff;
}
.link-m .link-text {
  position: relative;
  z-index: 1;
}
.link-m:hover .link-circle {
  width: 113%;
}
.gakka-dt-sec-head-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gakka-dt-sec-engtitle {
  font-size: 2rem;
  font-weight: 700;
}
.gakka-dt-sec-title {
  font-size: 3.5rem;
  font-weight: 700;
}
.gakka-dt-sec-line {
  width: 58px;
  height: 3px;
  margin-top: 15px;
  display: block;
  background: #3f6cc3;
}
.swiper-pagination-bullet-active {
  background-color: var(--blue2);
}
.swiper-free-mode > .swiper-wrapper {
  padding: 0px 20px;
}

.cta-text__link {
  color: #41579a;
  text-decoration: underline;
}
.list-style-dot {
  list-style: none;
  padding-left: 0;
}
.list-style-dot li {
  line-height: 2;
}
.list-style-dot li::before {
  content: "・";
  padding-right: 5px;
}
@media screen and (max-width: 768px) {
  .btn-grey,
  .btn-cta {
    font-size: 1.6rem;
    height: auto;
    text-align: center;
    min-height: 60px;
  }
  .gakka-dt-sec-head-button{
    flex-direction: column;
    align-items: start;
  }
  .gakka-dt-sec-head-button .gakka-dt-sec-head-right{
    margin-left: auto;
  }
}
/***** Font for #ac-post *****/
#ac-post .ac-post__title {
  font-size: 30px;
  font-weight: 900;
}
#ac-post h1 {
  font-size: 28px;
  font-weight: 900;
}
#ac-post h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#ac-post h2::before {
  content: "";
  display: block;
  flex: 0 0 28px;
  height: 1px;
  background: #333;
  margin-right: 15px;
  transform: translateY(0.8em);
}
#ac-post h3 {
  font-size: 20px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  #ac-post .ac-post__title {
    font-size: 24px;
    line-height: 1.5;
  }
  #ac-post h1 {
    font-size: 23px;
    line-height: 1.5;
  }
  #ac-post h2 {
    font-size: 19px;
    line-height: 1.5;
  }
  #ac-post h2::before {
    flex: 0 0 20px;
    margin-right: 10px;
  }
  #ac-post h3 {
    font-size: 17px;
    line-height: 1.5;
  }
}
#ac-post p {
  font-size: 14px;
  margin-bottom: 20px;
}
#ac-post strong {
  font-weight: 900;
}
#ac-post em {
  font-style: italic;
}

#ac-post blockquote {
  background-color: #ededed;
  border: 1px solid #c8c8c8;
  padding: 20px 25px;
  position: relative;
  margin: 14px auto;
}
#ac-post blockquote::before,
#ac-post blockquote::after {
  color: #c8c8c8;
  font-family: serif;
  position: absolute;
  font-size: 300%;
}
#ac-post blockquote::before {
  content: "“";
  line-height: 1.1;
  left: 10px;
  top: 0;
}
#ac-post blockquote::after {
  content: "”";
  line-height: 0;
  right: 10px;
  bottom: 0px;
}
#ac-post blockquote p {
  margin-bottom: 0;
}

/***** List *****/
#ac-post ul,
#ac-post ol {
  font-size: 14px;
  margin-bottom: 25px;
}
#ac-post ul li {
  list-style-type: disc;
  list-style-position: outside;
  margin: 3px 0 3px 16px;
}
#ac-post ol li {
  list-style-type: decimal;
  list-style-position: outside;
  margin: 3px 0 3px 16px;
}

/***** Link *****/
#ac-post a:link,
#ac-post a:visited {
  text-decoration: none;
  font-weight: 700;
}
#ac-post a:hover {
  text-decoration: underline;
}

/***** Image *****/
#ac-post img {
  height: auto;
  max-width: 100%;
}

/***** キャプション *****/
.wp-caption {
  margin-bottom: 25px;
  max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
  display: block;
  margin: 0;
}
.wp-caption-text {
  color: #707070;
  font-family: "Noto Sans", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  padding: 5px 0;
}

/***** ギャラリー *****/
.gallery {
  margin-bottom: 25px;
}
.gallery-item {
  display: inline-block;
  padding: 1.5%;
  text-align: center;
  vertical-align: top;
  width: 100%;
}
figure.gallery-item img {
  -ms-interpolation-mode: bicubic;
  border: 0;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}
.gallery-columns-2 .gallery-item {
  max-width: 47%;
}
.gallery-columns-3 .gallery-item {
  max-width: 30.33%;
}
.gallery-columns-4 .gallery-item {
  max-width: 22%;
}
.gallery-columns-5 .gallery-item {
  max-width: 17%;
}
.gallery-columns-6 .gallery-item {
  max-width: 13.66%;
}
.gallery-columns-7 .gallery-item {
  max-width: 11.28%;
}
.gallery-columns-8 .gallery-item {
  max-width: 9.5%;
}
.gallery-columns-9 .gallery-item {
  max-width: 8.11%;
}
.gallery-icon img {
  margin: 0 auto;
}
.gallery-caption {
  color: #707070;
  color: rgba(51, 51, 51, 0.7);
  display: block;
  font-family: "Noto Sans", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  padding: 0.5em 0;
}
.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
  display: none;
}

/***** 配置 *****/
.aligncenter {
  clear: both;
  display: block;
  margin: 0 auto;
}
.alignleft {
  float: left;
  margin-right: 25px;
}
.alignright {
  float: right;
  margin-left: 25px;
}
img.alignright {
  display: inline-block;
  margin: 0 0 10px 15px;
}
img.alignleft {
  display: inline-block;
  margin: 0 15px 10px 0;
}

/***** 目次 *****/
#ac-post #toc_container {
  padding: 10px 20px !important;
  margin-bottom: 80px !important;
  margin-top: 30px !important;
  width: 100% !important;
}
#ac-post #toc_container a {
  font-weight: 400;
  font-size: 13px;
  display: flex;
  align-items: center;
}
#ac-post #toc_container .toc_list > li {
  margin: 0;
}
#ac-post #toc_container .toc_list > li > a {
  position: relative;
  padding-left: 20px;
  vertical-align: middle;
}
#ac-post #toc_container .toc_list > li > a::before,
#ac-post #toc_container .toc_list > li > a::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
#ac-post #toc_container .toc_list > li > a::before {
  width: 15px;
  height: 15px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #000;
}
#ac-post #toc_container .toc_list > li > a::after {
  left: 4px;
  width: 4px;
  height: 4px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#ac-post #toc_container li ul li a::before {
  content: "\25B6";
  margin-right: 5px;
  font-size: 8px;
}
#ac-post #toc_container p.toc_title {
  border-bottom: 1px solid #aaa;
  padding-bottom: 10px !important;
  padding-top: 5px !important;
}
#ac-post #toc_container {
  width: 90%;
}

/* bottom-margin */
.mb0 {
  margin-bottom: 0;
}
.mb5 {
  margin-bottom: 5px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb25 {
  margin-bottom: 25px;
}
.mb30 {
  margin-bottom: 30px;
}
.mb35 {
  margin-bottom: 35px;
}
.mb40 {
  margin-bottom: 40px;
}
.mb45 {
  margin-bottom: 45px;
}
.mb50 {
  margin-bottom: 50px;
}
.mb60 {
  margin-bottom: 60px;
}
.mb80 {
  margin-bottom: 80px;
}
.mb100 {
  margin-bottom: 100px;
}
@media screen and (max-width: 767px) {
  .mb100 {
    margin-bottom: 60px;
  }
}
/* 目次プラグインスタイル */

.point_box {
  margin-top: 10px;
  margin-bottom: 30px;
  background-color: #fafaf5;
  border-radius: 10px;
  /* CSS3草案 */
  -webkit-border-radius: 10px;
  /* Safari,Google Chrome用 */
  -moz-border-radius: 10px;
  padding: 15px;
  color: #000;
}

#toc_container {
  padding: 10px 20px !important;
  margin-bottom: 80px !important;
  margin-top: 30px !important;
}
#toc_container a {
  font-weight: 400;
  font-size: 13px;
  color: #000;
}
#toc_container a::before {
  margin-right: 6px;
  background-image: url("../img/common/circle-nav.png");
  background-size: 15px 15px;
  display: inline-block;
  width: 15px;
  height: 15px;
  content: "";
  margin-bottom: -3px;
}
#toc_container li ul li a::before {
  content: "\25B6";
  margin-right: 0px;
  font-size: 8px;
  background-image: none;
}
#toc_container p.toc_title {
  border-bottom: 1px solid #aaa;
  padding-bottom: 10px !important;
  padding-top: 5px !important;
}
#toc_container {
  width: 90%;
}

/* sp only, pc only */
.pc-only {
  display: block;
}
.sp-only {
  display: none;
}

@media screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
}
/* Tab styles */
.tab-content-wrap {
  margin-top: 50px;
}
.tab-nav-wrap {
  border-bottom: 1px solid #000;
}
.tabs {
  display: flex;
  justify-content: space-between;
  max-width: 1040px;
  padding: 0 20px;
  text-align: center;
  margin: 45px auto 0;
  position: relative;
  z-index: 1;
  transform: translateY(1px);
}

.tabs .tab-nav {
  cursor: pointer;
  background-color: #cccccc;
  color: #838383;
  width: 49%;
  border: 1px solid #000;
  font-weight: 700;
  font-size: 2rem;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 24px 0;
}
.tabs .tab-nav.active {
  background-color: #fff;
  color: #000;
  border-bottom: none;
}
/* Accordion styles */

.accordionItem {
  border: 1px solid #e2e2e2;
  margin-bottom: 30px;
}
.accordionTitle {
  width: 100%;
  overflow: hidden;
  padding: 1em;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.accordionTitle::after {
  content: "";
  background-image: url(../img/common/cross.svg);
  background-size: 1em 1em;
  width: 1em;
  height: 1em;
  min-width: 1em;
  min-height: 1em;
  text-align: center;
  transition: all 0.35s;
  margin-top: 10px;
}

.accordionTitle {
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: 700;
  font-size: 16px;
}
.accordionContent {
  padding: 1em;
  padding-top: 0px;
}
.accordionTitle + .accordionContent {
  display: none;
  transition: 0.3s ease;
}

.accordionTitle.is-open + .accordionContent {
  display: block;
  transition: 0.3s ease;
}
.accordionTitle .is-open + .accordionTitle::after {
  transform: rotate(45deg);
}

.is-open::after {
  transform: rotate(45deg);
}
.q-box {
  display: flex;
  align-items: center;
}
.a-box {
  display: flex;
  align-items: flex-start;
}

.q-box .a-area,
.q-box .q-area {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 30px;
  min-width: 30px;
}
.q-box .q-area img {
  width: 15px;
}
.q-box .question-q,
.q-box .answer-a {
  font-size: 3rem;
  color: var(--grey2);
  font-weight: 700;
  margin-right: 10px;
  margin-top: -8px;
}
.q-box .a-area {
  margin-left: 30px;
  height: 100%;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .accordionTitle {
    padding: 5px 10px 5px 10px;
    font-size: 14px;
    min-height: 50px;
    align-items: center;
  }
  .accordionContent {
    padding-top: 10px;
  }
  .q-box .question-q,
  .q-box .answer-a {
    font-size: 2rem;
    margin-top: -5px;
  }
  .q-box .a-area,
  .q-box .q-area {
    width: 20px;
    min-width: 20px;
    margin-left: 0px;
  }
  .tabs .tab-nav {
    padding: 14px 0;
    font-size: 1.3rem;
  }
  .q-box {
    align-items: flex-start;
  }
  .accordionTitle::after {
    margin-top: 0;
  }
}

/* ------ TOYO 2 Column Flex layout------------- */

.flex-container {
  /* ------ Flex Container for 1000px width */
  margin: auto;
  max-width: 1040px;
}
.flex-items {
  display: flex;
  flex-wrap: wrap;
}
.flex-items > li {
  padding: 0 20px;
  width: 50%;
  margin-bottom: 50px;
}
.flex-item li {
  margin-bottom: 31px;
}
.flex-item li:last-child {
  margin-bottom: 0;
}

.flex-item .link-to-file {
  font-size: 1.4rem;
  color: #000;
  text-decoration: none;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #cccccc;
  justify-content: space-between;
  padding-bottom: 5px;
}

.flex-item .link-to-file::after {
  content: "";
  display: block;
  width: 18px;
  flex-shrink: 0;
  height: 18px;
  background: url("../../assets/img/common/arrow-square.svg") center/contain
    no-repeat;
}

.flex-item .link-to-file span:not(.note) {
  display: flex;
  align-items: baseline;
}
/* Default is pdf file */
.flex-item .link-to-file span:not(.note)::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 16px;
  transform: translateY(2px);
  margin-right: 7px;
  height: 19px;
  background: url("../../assets/img/common/pdf.svg") center/contain no-repeat;
}
.flex-item .link-to-file.links span:not(.note)::before {
  transform: translateY(1px);
}
/* Excel icon file */
.flex-item .link-to-file.excel span:not(.note)::before {
  background: url("../../assets/img/common/xlsx.svg") center/contain no-repeat;
}
/* Links icon */
.flex-item .link-to-file.links span:not(.note)::before {
  width: 15px;
  height: 15px;
  background: url("../../assets/img/common/link.svg") center/contain no-repeat;
}
.flex-items .text {
  line-height: 26px;
}
.flex-items .sub-title {
  margin-bottom: 20px;
}
/* Expand cell for full width */
.w-100 {
  width: 100% !important;
}
@media screen and (max-width: 768px) {
  .flex-items > li {
    width: 100%;
    /* margin-bottom: 25px;*/
  }
  .flex-item {
    max-width: none;
  }
}
/* ------ TOYO 2 Column Flex layout End------------- */

/* ------ blog template ------ */
.blog-wrap{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  column-gap: 30px;
  row-gap: 30px;
}
.blog-wrap .blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s ease;
  background-color: var(--white);
  width: 100%; 
  max-width: 320px;
  position: relative;
}
.blog-card .post-title__link{
  text-decoration: none;
  color: var(--black);
}
.blog-wrap .blog-card .blog-btn{
  width: 24px;
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.blog-wrap .thumbnail img {
  width: 100%; 
  height: auto;
  display: block;
  border-bottom: 1px solid #ddd;
}

.blog-wrap .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  padding: 20px;
}

.blog-wrap .blog-title {
  margin-bottom: 10px;
  font-weight: 600;
}

.blog-wrap .info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
}

.blog-wrap .category {
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  background-color: var(--blue3);
  font-weight: normal;
  margin-right: 5px;
}

.blog-wrap .date {
  margin-top: 5px; 
}
@media screen and (max-width: 990px) {
 
  .blog-wrap .campus-post__left{
  margin-bottom:40px ;
}
 .blog-wrap .blog-nagivation4,
 .blog-wrap .blog-nagivation3{
  width: 100%;
  max-width: unset;
}
}
@media screen and (max-width: 768px) {
    .blog-wrap{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    column-gap: 30px;
    row-gap: 30px;
  }
   .blog-wrap .campus-post__wrap {
    display: flex;
    flex-direction: column;
}
}
@media screen and (max-width: 568px) {
   .blog-wrap{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 1fr;
    column-gap: 0px;
    row-gap: 30px;
    justify-items: center;
  }
}