@charset "UTF-8";
/* definition */
:root {
  --headHeight:80px;
  --footHeight:auto;
  --hamburgerSize:80px;
  --fontSize:calc((100vw - var(--cont_margin) * 2) / 26);
  --subContentsWidth:100%;
  --fontSize_n: var(--fontSize);
  --fontSize_s: calc(var(--fontSize) * 0.9);
  --fontSize_ss: calc(var(--fontSize) * 0.6);
  --fontSize_l: calc(var(--fontSize) * 1.125);
  --fontSize_ll: calc(var(--fontSize) * 1.44);
  --headPositionTop:0px;
  --headPositionLeft:0px;
  --primaryColor:#24A85C;
  --secondaryColor:#48C788;
  --colorBlack: #333;
  --colorGray: #EAF0F2;
  --colorDarkGray:#999999;
  --colorLightGray:#DDDDDD;
  --colorUltraLightGray:#F5F5F5;
  --colorYellow:#FFF500;
  --colorPink:#D82D81;
  --colorBlue:#007FFF;
  --textColor: var(--colorBlack);
  --linkColor: var(--primaryColor);
  --bodyColor: #FFF;
  --baseBorderColor: var(--secondaryColor);
  --listBorderColor: var(--secondaryColor);
  --gradientStartColor:#fdc700;
  --gradientEndColor:#ff6900;
  --gradientAngle:90deg;
  --gradient:linear-gradient(var(--gradientAngle), var(--gradientStartColor), var(--gradientEndColor));
  --breakPoint1:520px;
  --breakPoint2:768px;
  --breakPoint3:1280px;
  --breakPoint4:640px;
  --breakPoint5:1440px;
  --breakPoint6:1280px;
  --buttonHeight:48px;
  --buttonBorder: 1px;
  --buttonColor: #FFF;
  --buttonBgColor:var(--primaryColor);
  --buttonBorderColor:var(--primaryColor);
  --formPartHeight:48px;
  --formPartPaddingRow:10px;
  --formPartPaddingColumn:18px;
  --formLabelColor:var(--textColor);
  --formConfirmLabelColor:var(--colorGray);
  --formBorder:1px;
  --formBorderColor:var(--baseBorderColor);
  --formBgColor:#FFF;
  --formRadius:6px;
  --formTextColor: var(--textColor);
  --space1:calc((10px * 1) - 2px);
  --space2:calc(10px * 2);
  --space3:calc(10px * 3);
  --space4:calc(10px * 4);
  --space5:calc(10px * 8);
  --facebookColor: #3B5998;
  --lineColor: #06C755;
  --twitterColor: #00acee;
  --animationDuration:0.33s;
  --easingOutBack:cubic-bezier(0.34, 1.56, 0.64, 1);
  --boxShadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
  --radius:6px;
  --line_vertical_color: var(--baseBorderColor);
  --line_horizontal_color: var(--baseBorderColor);
  --rowGap: var(--space2);
  --columnGap: var(--space2);
  --rowGap_slim: calc(var(--rowGap) / 2);
  --columnGap_slim: calc(var(--columnGap) / 2);
  --rowGap_wide: calc(var(--rowGap) * 2);
  --columnGap_wide: calc(var(--columnGap) * 2);
  --cont_margin: var(--space2);
  --maxWidth1:1280px;
  --maxWidth2:1010px;
  --maxWidth3:700px;
  /*--maxWidth4:calc( 100vw - var(--cont_margin) * 2 );*/
  --maxWidth4: 1600px;
  --contWidth4:1600px;
  --fixedMenuHeight:0px;
}

@media (min-width: 521px) {
  :root {
    --fontSize:calc((100vw - var(--cont_margin) * 2) / 42);
  }
}
@media (min-width: 640px) {
  :root {
    --buttonHeight:48px;
    --fontSize:calc((100vw - var(--cont_margin) * 2) / 56);
  }
}
@media (min-width: 768px) {
  :root {
    --headHeight:80px;
    --footHeight:auto;
    --subContentsWidth:240px;
    --fontSize:calc((100vw - var(--cont_margin) * 2) / 68);
    --cont_margin: var(--space4);
    --fontSize_s: calc(var(--fontSize) * 0.8);
    --fontSize_ss: calc(var(--fontSize) * 0.66);
  }
}
@media (min-width: 1280px) {
  :root {
    --headHeight:90px;
    --footHeight:auto;
    --subContentsWidth:380px;
    --fontSize:15px;
  }
}
@media (min-width: 1280px) {
  :root {
    --fontSize:16px;
  }
}
/* Element */
body,
html {
  min-height: 100svh;
  box-sizing: border-box;
  transition: none !important;
  scroll-behavior: smooth;
  font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: var(--fontSize);
}
@media (max-width: 767px) {
  body,
  html {
    overflow-y: auto;
    overflow-x: hidden;
  }
}

html {
  height: -webkit-fill-available;
  scroll-padding-top: calc(var(--headHeight) + var(--headPositionTop) + var(--space2));
}

body {
  background: var(--bodyColor);
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  letter-spacing: normal;
  text-rendering: auto;
  color: var(--textColor);
  word-wrap: break-word;
  font-feature-settings: "palt";
  min-height: -webkit-fill-available;
  position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.h0 {
  padding: 0;
  margin: 0;
  line-height: 1.5;
  font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-weight: 400;
}

.h0 {
  font-size: 2.8rem;
}
@media (min-width: 768px) {
  .h0 {
    font-size: 4rem;
  }
}

h1,
.h1 {
  font-size: 2.5rem;
}
@media (min-width: 768px) {
  h1,
  .h1 {
    font-size: 2.5rem;
  }
}

h2,
.h2 {
  font-size: 2.2rem;
}
@media (min-width: 768px) {
  h2,
  .h2 {
    font-size: 2rem;
  }
}

h3,
.h3 {
  font-size: 2rem;
}
@media (min-width: 768px) {
  h3,
  .h3 {
    font-size: 1.5rem;
  }
}

h4,
.h4 {
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  h4,
  .h4 {
    font-size: 1.2rem;
  }
}

h5,
.h5 {
  font-size: 1.1rem;
}

h6,
.h6 {
  font-size: 1rem;
}

a {
  text-decoration: underline;
  color: var(--linkColor);
}
@media (hover: hover) {
  a:hover {
    text-decoration: none;
  }
}
a:focus {
  text-decoration: none;
}

a.disabled,
.a.disabled {
  pointer-events: none;
  opacity: 0.5;
  filter: Alpha(opacity=50);
}

.with_commma:not(:last-child)::after {
  content: "、";
}

img {
  line-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  max-width: 100%;
}

figure {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}
figure img {
  max-width: 100%;
  height: auto !important;
}
figure figcaption {
  font-size: 0.86rem;
}
figure.bridge {
  width: 100vw;
  height: 50vh;
  max-height: 320px;
  background: var(--colorGray);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
figure.bridge img {
  width: 100%;
  height: auto;
  max-width: none;
}
@media (min-height: 641px) and (max-aspect-ratio: 3/2) {
  figure.bridge img {
    height: 100% !important;
    width: auto;
  }
}
@media (orientation: portrait) {
  figure.bridge {
    height: 30vh;
  }
}

picture {
  width: 100%;
  max-width: 100%;
  line-height: 0;
  display: block;
}
picture source,
picture img {
  width: 100%;
  line-height: 0;
}

span {
  display: inline-block;
}

sub {
  vertical-align: baseline;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

table {
  width: 100%;
  border-spacing: 0 var(--space1);
  border-collapse: separate;
}
table td,
table th {
  padding: var(--space1) var(--space2);
}
table td .inner,
table th .inner {
  display: flex;
  align-items: center;
}
table th {
  text-align: left;
  font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-weight: 400;
}
table thead {
  font-size: 0.8rem;
  background: none;
}
table thead tr th.orderKey {
  position: relative;
  cursor: pointer;
}
table thead tr th.orderKey::before {
  content: "";
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  width: 8px;
  height: 6px;
  background: #FFF;
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--space1);
  margin: auto;
  opacity: 0.1;
  filter: Alpha(opacity=10);
}
table thead tr th.orderKey.asc::before {
  transform: rotate(180deg);
}
table thead tr th.orderKey.active::before {
  opacity: 1;
  filter: Alpha(opacity=100);
}
table tbody th,
table tbody td {
  height: 60px;
}
table tbody th {
  font-size: 0.86rem;
  min-width: 80px;
}
table tbody tr {
  --trBaseColor:var(--tertiaryColor);
}
table tbody tr.clickable {
  cursor: pointer;
}
table tbody tr.clickable:hover {
  --trBaseColor:var(--secondaryColor);
}
table tbody tr td {
  background: var(--trBaseColor);
  transition: var(--animationDuration) background;
}
table tbody tr td:first-child {
  border-radius: 999px 0px 0px 999px;
}
table tbody tr td:last-child {
  border-radius: 0px 999px 999px 0px;
}
table tbody tr td.controlDetail {
  padding: 0;
  min-width: 30px;
  position: relative;
}
table tbody tr td.controlDetail button {
  cursor: pointer;
  position: relative;
  z-index: 2;
}
table tbody tr td.controlDetail::before {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--secondaryColor);
  content: "";
  width: 8px;
  height: 6px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
table tbody tr td.controlDetail.show::before {
  transform: rotate(180deg);
}
table tbody tr.rowDetail {
  transition: var(--animationDuration) border;
}
table tbody tr.rowDetail td {
  transition: var(--animationDuration) padding, var(--animationDuration) height;
}
table tbody tr.rowDetail td > * {
  transition: var(--animationDuration) min-height, var(--animationDuration) height;
  height: -moz-fit-content;
  height: fit-content;
  overflow: hidden;
  min-height: -moz-fit-content;
  min-height: fit-content;
}
table tbody tr.rowDetail:not(.active) {
  border-bottom: 0px;
}
table tbody tr.rowDetail:not(.active) td {
  padding-top: 0;
  padding-bottom: 0;
  height: 0;
}
table tbody tr.rowDetail:not(.active) td > * {
  min-height: 0px;
  height: 0;
}
table.not_foot_border tfoot tr {
  border-bottom: 0px;
}
table.feature_compare {
  border-spacing: var(--space1);
}
table.feature_compare thead th.radius_wrapper {
  text-align: center;
  background: var(--colorGray);
}
table.feature_compare tbody tr td {
  border-radius: var(--radius) !important;
}
table.feature_compare tbody tr td:first-child, table.feature_compare tbody tr td:last-child {
  border-radius: var(--radius) !important;
}
table.feature_compare tbody tr td.category_name {
  background: var(--colorGray);
}
@media (max-width: 520px) {
  table.feature_compare {
    display: flex;
    flex-direction: column;
    grid-gap: var(--space1);
  }
  table.feature_compare thead tr, table.feature_compare tbody tr {
    display: flex;
    flex-direction: row;
    grid-gap: var(--space1);
    flex-wrap: wrap;
    align-items: stretch;
  }
  table.feature_compare thead tr td, table.feature_compare thead tr th, table.feature_compare tbody tr td, table.feature_compare tbody tr th {
    height: auto;
    width: calc((100% - var(--space1)) / 2);
    display: flex;
    align-items: center;
    padding-left: var(--space2);
    padding-right: var(--space2);
  }
  table.feature_compare thead tr td.category_name, table.feature_compare thead tr th.category_name, table.feature_compare tbody tr td.category_name, table.feature_compare tbody tr th.category_name {
    width: 100%;
    font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
    font-weight: 800;
  }
  table.feature_compare thead tr td.function_name, table.feature_compare thead tr th.function_name, table.feature_compare tbody tr td.function_name, table.feature_compare tbody tr th.function_name {
    width: 100%;
    padding-top: var(--space1);
    padding-bottom: var(--space1);
    font-size: var(--fontSize_s);
    background: var(--colorGray);
  }
  table.feature_compare thead tr th {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--fontSize_l);
    font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
    font-weight: 800;
  }
  table.feature_compare thead tr th .flex {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  table.feature_compare tbody {
    display: flex;
    flex-direction: column;
    grid-gap: var(--space1);
  }
}
table.table_player_list tbody tr th:first-child, table.table_player_list tbody tr td:first-child {
  border-radius: var(--radius) 0px 0px var(--radius);
}
table.table_player_list tbody tr th:last-child, table.table_player_list tbody tr td:last-child {
  border-radius: 0px var(--radius) var(--radius) 0px;
}
@media (max-width: 520px) {
  table.table_player_list {
    width: -moz-fit-content !important;
    width: fit-content !important;
  }
  table.table_player_list thead tr th,
  table.table_player_list thead tr td,
  table.table_player_list tbody tr th,
  table.table_player_list tbody tr td {
    padding-left: var(--space1);
    padding-right: var(--space1);
  }
  table.table_player_list thead tr th .inner,
  table.table_player_list thead tr td .inner,
  table.table_player_list tbody tr th .inner,
  table.table_player_list tbody tr td .inner {
    min-width: 40px;
  }
}

hr {
  height: 1px;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-top: 1px solid var(--baseBorderColor);
  opacity: 0.25;
  filter: Alpha(opacity=25);
  margin: 0;
}

details {
  padding: var(--space2);
  border-radius: var(--radius);
  background: var(--colorGray);
  transition: var(--animationDuration) height;
}
details:not(:last-child) {
  margin-bottom: var(--space2);
}
details .head {
  list-style: none;
  padding-right: var(--space4);
  position: relative;
}
details .head::-webkit-details-marker, details .head::marker {
  display: none;
}
details .head::after {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  content: "+";
  background: #FFF;
  color: var(--primaryColor);
  transition: var(--animationDuration) transform;
  position: absolute;
  right: 0px;
  top: 0;
  bottom: 0px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
details .body {
  transition: var(--animationDuration) max-height, var(--animationDuration) padding;
  padding-top: 0px;
  max-height: 0px;
}
details[open] .head::before {
  transform: rotate(45deg);
}
details[open] .body {
  padding-top: var(--space2);
  max-height: 1000px;
}

/*Class*/
.a {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.a > * {
  pointer-events: none;
}
.a:not(.disabled) {
  cursor: pointer;
}
.a:not(.disabled) > * {
  cursor: pointer;
}

.nw {
  font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-weight: 400;
}

.b {
  font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-weight: 800;
}

.w20 {
  width: 20px !important;
}

.w30 {
  width: 30px !important;
}

.w40 {
  width: 40px !important;
}

.w50 {
  width: 50px !important;
}

.w60 {
  width: 60px !important;
}

.w70 {
  width: 70px !important;
}

.w80 {
  width: 80px !important;
}

.w90 {
  width: 90px !important;
}

.w100 {
  width: 100px !important;
}

.w110 {
  width: 110px !important;
}

.w120 {
  width: 120px !important;
}

.w130 {
  width: 130px !important;
}

.w140 {
  width: 140px !important;
}

.w150 {
  width: 150px !important;
}

.w160 {
  width: 160px !important;
}

.w170 {
  width: 170px !important;
}

.w180 {
  width: 180px !important;
}

.w190 {
  width: 190px !important;
}

.w200 {
  width: 200px !important;
}

.max40w {
  max-width: 40px !important;
}

.max60w {
  max-width: 60px !important;
}

.max80w {
  max-width: 80px !important;
}

.max100w {
  max-width: 100px !important;
}

.max120w {
  max-width: 120px !important;
}

.max140w {
  max-width: 140px !important;
}

.max160w {
  max-width: 160px !important;
}

.max180w {
  max-width: 180px !important;
}

.max200w {
  max-width: 200px !important;
}

.max220w {
  max-width: 220px !important;
}

.max240w {
  max-width: 240px !important;
}

.max260w {
  max-width: 260px !important;
}

.max280w {
  max-width: 280px !important;
}

.max300w {
  max-width: 300px !important;
}

.max320w {
  max-width: 320px !important;
}

.max340w {
  max-width: 340px !important;
}

.max360w {
  max-width: 360px !important;
}

.max380w {
  max-width: 380px !important;
}

.max400w {
  max-width: 400px !important;
}

.max420w {
  max-width: 420px !important;
}

.max440w {
  max-width: 440px !important;
}

.max460w {
  max-width: 460px !important;
}

.max480w {
  max-width: 480px !important;
}

.max500w {
  max-width: 500px !important;
}

.max520w {
  max-width: 520px !important;
}

.max540w {
  max-width: 540px !important;
}

.max560w {
  max-width: 560px !important;
}

.max580w {
  max-width: 580px !important;
}

.max600w {
  max-width: 600px !important;
}

.max620w {
  max-width: 620px !important;
}

.max640w {
  max-width: 640px !important;
}

.max660w {
  max-width: 660px !important;
}

.max680w {
  max-width: 680px !important;
}

.max700w {
  max-width: 700px !important;
}

.max720w {
  max-width: 720px !important;
}

.max740w {
  max-width: 740px !important;
}

.max760w {
  max-width: 760px !important;
}

.max780w {
  max-width: 780px !important;
}

.max800w {
  max-width: 800px !important;
}

.min10w {
  min-width: 10px !important;
}

.min20w {
  min-width: 20px !important;
}

.min30w {
  min-width: 30px !important;
}

.min40w {
  min-width: 40px !important;
}

.min50w {
  min-width: 50px !important;
}

.min60w {
  min-width: 60px !important;
}

.min70w {
  min-width: 70px !important;
}

.min80w {
  min-width: 80px !important;
}

.min90w {
  min-width: 90px !important;
}

.min100w {
  min-width: 100px !important;
}

.min110w {
  min-width: 110px !important;
}

.min120w {
  min-width: 120px !important;
}

.min130w {
  min-width: 130px !important;
}

.min140w {
  min-width: 140px !important;
}

.min150w {
  min-width: 150px !important;
}

.min160w {
  min-width: 160px !important;
}

.min170w {
  min-width: 170px !important;
}

.min180w {
  min-width: 180px !important;
}

.min190w {
  min-width: 190px !important;
}

.min200w {
  min-width: 200px !important;
}

.min210w {
  min-width: 210px !important;
}

.min220w {
  min-width: 220px !important;
}

.min230w {
  min-width: 230px !important;
}

.min240w {
  min-width: 240px !important;
}

.min250w {
  min-width: 250px !important;
}

.min260w {
  min-width: 260px !important;
}

.min270w {
  min-width: 270px !important;
}

.min280w {
  min-width: 280px !important;
}

.min290w {
  min-width: 290px !important;
}

.min300w {
  min-width: 300px !important;
}

.min310w {
  min-width: 310px !important;
}

.min320w {
  min-width: 320px !important;
}

.over100 {
  width: 100vw !important;
  transform: translateX(calc(-1 * var(--space2)));
}
@media (min-width: 768px) {
  .over100 {
    transform: translateX(calc(-1 * var(--space3)));
  }
}
@media (min-width: 1280px) {
  .over100 {
    transform: translateX(calc(-1 * var(--space4)));
  }
}

.mt0 {
  margin-top: calc(var(--space1) * 0) !important;
}

.mt10 {
  margin-top: calc(var(--space1) * 1) !important;
}

.mt20 {
  margin-top: calc(var(--space1) * 2) !important;
}

.mt30 {
  margin-top: calc(var(--space1) * 3) !important;
}

.mt40 {
  margin-top: calc(var(--space1) * 4) !important;
}

.mt50 {
  margin-top: calc(var(--space1) * 5) !important;
}

.mt60 {
  margin-top: calc(var(--space1) * 6) !important;
}

.mt70 {
  margin-top: calc(var(--space1) * 7) !important;
}

.mt80 {
  margin-top: calc(var(--space1) * 8) !important;
}

.mt90 {
  margin-top: calc(var(--space1) * 9) !important;
}

.mt100 {
  margin-top: calc(var(--space1) * 10) !important;
}

.mt110 {
  margin-top: calc(var(--space1) * 11) !important;
}

.mt120 {
  margin-top: calc(var(--space1) * 12) !important;
}

.mb0 {
  margin-bottom: calc(var(--space1) * 0) !important;
}

.mb10 {
  margin-bottom: calc(var(--space1) * 1) !important;
}

.mb20 {
  margin-bottom: calc(var(--space1) * 2) !important;
}

.mb30 {
  margin-bottom: calc(var(--space1) * 3) !important;
}

.mb40 {
  margin-bottom: calc(var(--space1) * 4) !important;
}

.mb50 {
  margin-bottom: calc(var(--space1) * 5) !important;
}

.mb60 {
  margin-bottom: calc(var(--space1) * 6) !important;
}

.mb70 {
  margin-bottom: calc(var(--space1) * 7) !important;
}

.mb80 {
  margin-bottom: calc(var(--space1) * 8) !important;
}

.mb90 {
  margin-bottom: calc(var(--space1) * 9) !important;
}

.mb100 {
  margin-bottom: calc(var(--space1) * 10) !important;
}

.mb110 {
  margin-bottom: calc(var(--space1) * 11) !important;
}

.mb120 {
  margin-bottom: calc(var(--space1) * 12) !important;
}

.ml0 {
  margin-left: calc(var(--space1) * 0) !important;
}

.ml10 {
  margin-left: calc(var(--space1) * 1) !important;
}

.ml20 {
  margin-left: calc(var(--space1) * 2) !important;
}

.ml30 {
  margin-left: calc(var(--space1) * 3) !important;
}

.ml40 {
  margin-left: calc(var(--space1) * 4) !important;
}

.ml50 {
  margin-left: calc(var(--space1) * 5) !important;
}

.ml60 {
  margin-left: calc(var(--space1) * 6) !important;
}

.ml70 {
  margin-left: calc(var(--space1) * 7) !important;
}

.ml80 {
  margin-left: calc(var(--space1) * 8) !important;
}

.mr0 {
  margin-right: calc(var(--space1) * 0) !important;
}

.mr10 {
  margin-right: calc(var(--space1) * 1) !important;
}

.mr20 {
  margin-right: calc(var(--space1) * 2) !important;
}

.mr30 {
  margin-right: calc(var(--space1) * 3) !important;
}

.mr40 {
  margin-right: calc(var(--space1) * 4) !important;
}

.mr50 {
  margin-right: calc(var(--space1) * 5) !important;
}

.mr60 {
  margin-right: calc(var(--space1) * 6) !important;
}

.mr70 {
  margin-right: calc(var(--space1) * 7) !important;
}

.mr80 {
  margin-right: calc(var(--space1) * 8) !important;
}

.mtm0 {
  margin-top: calc(-1 * var(--space1) * 0) !important;
}

.mtm10 {
  margin-top: calc(-1 * var(--space1) * 1) !important;
}

.mtm20 {
  margin-top: calc(-1 * var(--space1) * 2) !important;
}

.mtm30 {
  margin-top: calc(-1 * var(--space1) * 3) !important;
}

.mtm40 {
  margin-top: calc(-1 * var(--space1) * 4) !important;
}

.mtm50 {
  margin-top: calc(-1 * var(--space1) * 5) !important;
}

.mtm60 {
  margin-top: calc(-1 * var(--space1) * 6) !important;
}

.mtm70 {
  margin-top: calc(-1 * var(--space1) * 7) !important;
}

.mtm80 {
  margin-top: calc(-1 * var(--space1) * 8) !important;
}

.mtm90 {
  margin-top: calc(-1 * var(--space1) * 9) !important;
}

.mtm100 {
  margin-top: calc(-1 * var(--space1) * 10) !important;
}

.mtm110 {
  margin-top: calc(-1 * var(--space1) * 11) !important;
}

.mtm120 {
  margin-top: calc(-1 * var(--space1) * 12) !important;
}

.mbm0 {
  margin-bottom: calc(-1 * var(--space1) * 0) !important;
}

.mbm10 {
  margin-bottom: calc(-1 * var(--space1) * 1) !important;
}

.mbm20 {
  margin-bottom: calc(-1 * var(--space1) * 2) !important;
}

.mbm30 {
  margin-bottom: calc(-1 * var(--space1) * 3) !important;
}

.mbm40 {
  margin-bottom: calc(-1 * var(--space1) * 4) !important;
}

.mbm50 {
  margin-bottom: calc(-1 * var(--space1) * 5) !important;
}

.mbm60 {
  margin-bottom: calc(-1 * var(--space1) * 6) !important;
}

.mbm70 {
  margin-bottom: calc(-1 * var(--space1) * 7) !important;
}

.mbm80 {
  margin-bottom: calc(-1 * var(--space1) * 8) !important;
}

.mbm90 {
  margin-bottom: calc(-1 * var(--space1) * 9) !important;
}

.mbm100 {
  margin-bottom: calc(-1 * var(--space1) * 10) !important;
}

.mbm110 {
  margin-bottom: calc(-1 * var(--space1) * 11) !important;
}

.mbm120 {
  margin-bottom: calc(-1 * var(--space1) * 12) !important;
}

.mlm0 {
  margin-left: calc(-1 * var(--space1) * 0) !important;
}

.mlm10 {
  margin-left: calc(-1 * var(--space1) * 1) !important;
}

.mlm20 {
  margin-left: calc(-1 * var(--space1) * 2) !important;
}

.mlm30 {
  margin-left: calc(-1 * var(--space1) * 3) !important;
}

.mlm40 {
  margin-left: calc(-1 * var(--space1) * 4) !important;
}

.mlm50 {
  margin-left: calc(-1 * var(--space1) * 5) !important;
}

.mlm60 {
  margin-left: calc(-1 * var(--space1) * 6) !important;
}

.mlm70 {
  margin-left: calc(-1 * var(--space1) * 7) !important;
}

.mlm80 {
  margin-left: calc(-1 * var(--space1) * 8) !important;
}

.mrm0 {
  margin-right: calc(-1 * var(--space1) * 0) !important;
}

.mrm10 {
  margin-right: calc(-1 * var(--space1) * 1) !important;
}

.mrm20 {
  margin-right: calc(-1 * var(--space1) * 2) !important;
}

.mrm30 {
  margin-right: calc(-1 * var(--space1) * 3) !important;
}

.mrm40 {
  margin-right: calc(-1 * var(--space1) * 4) !important;
}

.mrm50 {
  margin-right: calc(-1 * var(--space1) * 5) !important;
}

.mrm60 {
  margin-right: calc(-1 * var(--space1) * 6) !important;
}

.mrm70 {
  margin-right: calc(-1 * var(--space1) * 7) !important;
}

.mrm80 {
  margin-right: calc(-1 * var(--space1) * 8) !important;
}

.top-0 {
  top: calc(var(--space1) * 0);
}

.top-10 {
  top: calc(var(--space1) * 1);
}

.top-20 {
  top: calc(var(--space1) * 2);
}

.top-30 {
  top: calc(var(--space1) * 3);
}

.top-40 {
  top: calc(var(--space1) * 4);
}

.top-50 {
  top: calc(var(--space1) * 5);
}

.top-60 {
  top: calc(var(--space1) * 6);
}

.top-70 {
  top: calc(var(--space1) * 7);
}

.top-80 {
  top: calc(var(--space1) * 8);
}

.top-90 {
  top: calc(var(--space1) * 9);
}

.top-100 {
  top: calc(var(--space1) * 10);
}

.top-110 {
  top: calc(var(--space1) * 11);
}

.top-120 {
  top: calc(var(--space1) * 12);
}

.right-0 {
  right: calc(var(--space1) * 0);
}

.right-10 {
  right: calc(var(--space1) * 1);
}

.right-20 {
  right: calc(var(--space1) * 2);
}

.right-30 {
  right: calc(var(--space1) * 3);
}

.right-40 {
  right: calc(var(--space1) * 4);
}

.right-50 {
  right: calc(var(--space1) * 5);
}

.right-60 {
  right: calc(var(--space1) * 6);
}

.right-70 {
  right: calc(var(--space1) * 7);
}

.right-80 {
  right: calc(var(--space1) * 8);
}

.bottom-0 {
  bottom: calc(var(--space1) * 0);
}

.bottom-10 {
  bottom: calc(var(--space1) * 1);
}

.bottom-20 {
  bottom: calc(var(--space1) * 2);
}

.bottom-30 {
  bottom: calc(var(--space1) * 3);
}

.bottom-40 {
  bottom: calc(var(--space1) * 4);
}

.bottom-50 {
  bottom: calc(var(--space1) * 5);
}

.bottom-60 {
  bottom: calc(var(--space1) * 6);
}

.bottom-70 {
  bottom: calc(var(--space1) * 7);
}

.bottom-80 {
  bottom: calc(var(--space1) * 8);
}

.left-0 {
  left: calc(var(--space1) * 0);
}

.left-10 {
  left: calc(var(--space1) * 1);
}

.left-20 {
  left: calc(var(--space1) * 2);
}

.left-30 {
  left: calc(var(--space1) * 3);
}

.left-40 {
  left: calc(var(--space1) * 4);
}

.left-50 {
  left: calc(var(--space1) * 5);
}

.left-60 {
  left: calc(var(--space1) * 6);
}

.left-70 {
  left: calc(var(--space1) * 7);
}

.left-80 {
  left: calc(var(--space1) * 8);
}

.left-90 {
  left: calc(var(--space1) * 9);
}

.left-100 {
  left: calc(var(--space1) * 10);
}

.left-110 {
  left: calc(var(--space1) * 11);
}

.left-120 {
  left: calc(var(--space1) * 12);
}

.top-m0 {
  top: calc(-1 * var(--space1) * 0);
}

.top-m10 {
  top: calc(-1 * var(--space1) * 1);
}

.top-m20 {
  top: calc(-1 * var(--space1) * 2);
}

.top-m30 {
  top: calc(-1 * var(--space1) * 3);
}

.top-m40 {
  top: calc(-1 * var(--space1) * 4);
}

.top-m50 {
  top: calc(-1 * var(--space1) * 5);
}

.top-m60 {
  top: calc(-1 * var(--space1) * 6);
}

.top-m70 {
  top: calc(-1 * var(--space1) * 7);
}

.top-m80 {
  top: calc(-1 * var(--space1) * 8);
}

.top-m90 {
  top: calc(-1 * var(--space1) * 9);
}

.top-m100 {
  top: calc(-1 * var(--space1) * 10);
}

.top-m110 {
  top: calc(-1 * var(--space1) * 11);
}

.top-m120 {
  top: calc(-1 * var(--space1) * 12);
}

.right-m0 {
  right: calc(-1 * var(--space1) * 0);
}

.right-m10 {
  right: calc(-1 * var(--space1) * 1);
}

.right-m20 {
  right: calc(-1 * var(--space1) * 2);
}

.right-m30 {
  right: calc(-1 * var(--space1) * 3);
}

.right-m40 {
  right: calc(-1 * var(--space1) * 4);
}

.right-m50 {
  right: calc(-1 * var(--space1) * 5);
}

.right-m60 {
  right: calc(-1 * var(--space1) * 6);
}

.right-m70 {
  right: calc(-1 * var(--space1) * 7);
}

.right-m80 {
  right: calc(-1 * var(--space1) * 8);
}

.bottom-m0 {
  bottom: calc(-1 * var(--space1) * 0);
}

.bottom-m10 {
  bottom: calc(-1 * var(--space1) * 1);
}

.bottom-m20 {
  bottom: calc(-1 * var(--space1) * 2);
}

.bottom-m30 {
  bottom: calc(-1 * var(--space1) * 3);
}

.bottom-m40 {
  bottom: calc(-1 * var(--space1) * 4);
}

.bottom-m50 {
  bottom: calc(-1 * var(--space1) * 5);
}

.bottom-m60 {
  bottom: calc(-1 * var(--space1) * 6);
}

.bottom-m70 {
  bottom: calc(-1 * var(--space1) * 7);
}

.bottom-m80 {
  bottom: calc(-1 * var(--space1) * 8);
}

.left-m0 {
  left: calc(-1 * var(--space1) * 0);
}

.left-m10 {
  left: calc(-1 * var(--space1) * 1);
}

.left-m20 {
  left: calc(-1 * var(--space1) * 2);
}

.left-m30 {
  left: calc(-1 * var(--space1) * 3);
}

.left-m40 {
  left: calc(-1 * var(--space1) * 4);
}

.left-m50 {
  left: calc(-1 * var(--space1) * 5);
}

.left-m60 {
  left: calc(-1 * var(--space1) * 6);
}

.left-m70 {
  left: calc(-1 * var(--space1) * 7);
}

.left-m80 {
  left: calc(-1 * var(--space1) * 8);
}

.left-m90 {
  left: calc(-1 * var(--space1) * 9);
}

.left-m100 {
  left: calc(-1 * var(--space1) * 10);
}

.left-m110 {
  left: calc(-1 * var(--space1) * 11);
}

.left-m120 {
  left: calc(-1 * var(--space1) * 12);
}

.mt5 {
  margin-top: 5px !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.ml5 {
  margin-left: 5px !important;
}

.mr5 {
  margin-right: 5px !important;
}

.pt0 {
  padding-top: calc(var(--space1) * 0) !important;
}

.pt10 {
  padding-top: calc(var(--space1) * 1) !important;
}

.pt20 {
  padding-top: calc(var(--space1) * 2) !important;
}

.pt30 {
  padding-top: calc(var(--space1) * 3) !important;
}

.pt40 {
  padding-top: calc(var(--space1) * 4) !important;
}

.pt50 {
  padding-top: calc(var(--space1) * 5) !important;
}

.pt60 {
  padding-top: calc(var(--space1) * 6) !important;
}

.pt70 {
  padding-top: calc(var(--space1) * 7) !important;
}

.pt80 {
  padding-top: calc(var(--space1) * 8) !important;
}

.pt90 {
  padding-top: calc(var(--space1) * 9) !important;
}

.pt100 {
  padding-top: calc(var(--space1) * 10) !important;
}

.pt110 {
  padding-top: calc(var(--space1) * 11) !important;
}

.pt120 {
  padding-top: calc(var(--space1) * 12) !important;
}

.pt130 {
  padding-top: calc(var(--space1) * 13) !important;
}

.pt140 {
  padding-top: calc(var(--space1) * 14) !important;
}

.pt150 {
  padding-top: calc(var(--space1) * 15) !important;
}

.pt160 {
  padding-top: calc(var(--space1) * 16) !important;
}

.pt170 {
  padding-top: calc(var(--space1) * 17) !important;
}

.pt180 {
  padding-top: calc(var(--space1) * 18) !important;
}

.pt190 {
  padding-top: calc(var(--space1) * 19) !important;
}

.pt200 {
  padding-top: calc(var(--space1) * 20) !important;
}

.pb0 {
  padding-bottom: calc(var(--space1) * 0) !important;
}

.pb10 {
  padding-bottom: calc(var(--space1) * 1) !important;
}

.pb20 {
  padding-bottom: calc(var(--space1) * 2) !important;
}

.pb30 {
  padding-bottom: calc(var(--space1) * 3) !important;
}

.pb40 {
  padding-bottom: calc(var(--space1) * 4) !important;
}

.pb50 {
  padding-bottom: calc(var(--space1) * 5) !important;
}

.pb60 {
  padding-bottom: calc(var(--space1) * 6) !important;
}

.pb70 {
  padding-bottom: calc(var(--space1) * 7) !important;
}

.pb80 {
  padding-bottom: calc(var(--space1) * 8) !important;
}

.pb90 {
  padding-bottom: calc(var(--space1) * 9) !important;
}

.pb100 {
  padding-bottom: calc(var(--space1) * 10) !important;
}

.pb110 {
  padding-bottom: calc(var(--space1) * 11) !important;
}

.pb120 {
  padding-bottom: calc(var(--space1) * 12) !important;
}

.pb130 {
  padding-bottom: calc(var(--space1) * 13) !important;
}

.pb140 {
  padding-bottom: calc(var(--space1) * 14) !important;
}

.pb150 {
  padding-bottom: calc(var(--space1) * 15) !important;
}

.pb160 {
  padding-bottom: calc(var(--space1) * 16) !important;
}

.pb170 {
  padding-bottom: calc(var(--space1) * 17) !important;
}

.pb180 {
  padding-bottom: calc(var(--space1) * 18) !important;
}

.pb190 {
  padding-bottom: calc(var(--space1) * 19) !important;
}

.pb200 {
  padding-bottom: calc(var(--space1) * 20) !important;
}

.pl0 {
  padding-left: calc(var(--space1) * 0) !important;
}

.pl10 {
  padding-left: calc(var(--space1) * 1) !important;
}

.pl20 {
  padding-left: calc(var(--space1) * 2) !important;
}

.pl30 {
  padding-left: calc(var(--space1) * 3) !important;
}

.pl40 {
  padding-left: calc(var(--space1) * 4) !important;
}

.pl50 {
  padding-left: calc(var(--space1) * 5) !important;
}

.pl60 {
  padding-left: calc(var(--space1) * 6) !important;
}

.pl70 {
  padding-left: calc(var(--space1) * 7) !important;
}

.pl80 {
  padding-left: calc(var(--space1) * 8) !important;
}

.pr0 {
  padding-right: calc(var(--space1) * 0) !important;
}

.pr10 {
  padding-right: calc(var(--space1) * 1) !important;
}

.pr20 {
  padding-right: calc(var(--space1) * 2) !important;
}

.pr30 {
  padding-right: calc(var(--space1) * 3) !important;
}

.pr40 {
  padding-right: calc(var(--space1) * 4) !important;
}

.pr50 {
  padding-right: calc(var(--space1) * 5) !important;
}

.pr60 {
  padding-right: calc(var(--space1) * 6) !important;
}

.pr70 {
  padding-right: calc(var(--space1) * 7) !important;
}

.pr80 {
  padding-right: calc(var(--space1) * 8) !important;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.no-min-height {
  min-height: 0;
}

.no-min-width {
  min-width: 0;
}

.no-max-height {
  max-height: none;
}

.no-max-width {
  max-width: none;
}

.with_comma:not(:last-child)::after {
  content: "、";
}

.border-box {
  box-sizing: border-box;
}

.content-box {
  box-sizing: content-box;
}

.overflow_auto {
  overflow: auto;
}

.overflow_visible {
  overflow: visible;
}

.overflow_hidden {
  overflow: hidden;
}

.overflow_scroll {
  overflow: scroll;
}

.overflow_y_auto {
  overflow-y: auto;
}

.overflow_y_visible {
  overflow-y: visible;
}

.overflow_y_hidden {
  overflow-y: hidden;
}

.overflow_y_scroll {
  overflow-y: scroll;
}

.overflow_x_auto {
  overflow-x: auto;
}

.overflow_x_visible {
  overflow-x: visible;
}

.overflow_x_hidden {
  overflow-x: hidden;
}

.overflow_x_scroll {
  overflow-x: scroll;
}

.no_border {
  border: 0;
}

.border_left {
  border-left: 1px solid var(--line_vertical_color);
}

.border_right {
  border-right: 1px solid var(--line_vertical_color);
}

.border_top {
  border-top: 1px solid var(--line_horizontal_color);
}

.border_bottom {
  border-bottom: 1px solid var(--line_horizontal_color);
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.whiteSpace {
  white-space: pre-wrap;
}

.underline {
  text-decoration: underline;
}

.text {
  font-size: var(--fontSize_n);
  line-height: 2;
}
.text.lh_wide {
  line-height: 3;
}

.eng {
  font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
}

.mincho {
  font-family: "Times", "Noto Serif JP", serif;
}

.dela {
  font-family: "Dela Gothic One", sans-serif;
}

.tc {
  text-align: center !important;
}

.tr {
  text-align: right !important;
}

.tl {
  text-align: left !important;
}

@media (max-width: 520px) {
  .tl_for_sp {
    text-align: left !important;
  }
}
.fs_n {
  font-size: var(--fontSize_n);
}

.fs_s {
  font-size: var(--fontSize_s);
}

.fs_ss {
  font-size: var(--fontSize_ss);
}

.fs_l {
  font-size: var(--fontSize_l);
}

.fs_ll {
  font-size: var(--fontSize_ll);
}

.gradient_text {
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg_gray {
  background-color: var(--colorGray);
}

.fit_image {
  position: relative;
}
.fit_image img {
  width: 100%;
  height: auto;
}

.icon {
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.photo .bg {
  height: 0;
  padding-top: 66%;
  background-color: var(--colorGray);
  background-image: url(../images/common/thumb.jpg);
}
.photo .isSecret {
  width: 24px;
  height: 24px;
  position: absolute;
  top: var(--space1);
  right: var(--space1);
  border-radius: 50%;
  background: var(--secondaryColor);
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

.photo.circle,
.img.circle {
  --size: 120px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  overflow: hidden;
}
.photo.circle img,
.img.circle img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
.photo.contain img,
.img.contain img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center center;
     object-position: center center;
}
.photo.cover,
.img.cover {
  overflow: hidden;
}
.photo.cover img,
.img.cover img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}

.video video {
  width: 100%;
  height: auto;
}

.movie {
  position: relative;
  height: auto;
  aspect-ratio: 16/9;
  width: 100%;
}
.movie > .inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.movie > .inner video {
  width: 100%;
  height: auto;
}

.movie > iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.boxShadow {
  box-shadow: var(--boxShadow);
}

.vertical_scrollable {
  overflow-y: auto;
  max-height: calc(100svh - var(--space2) * 2);
}
@media (min-width: 768px) {
  .vertical_scrollable {
    max-height: calc(100svh - 120px);
  }
  .vertical_scrollable.modal_max_height {
    max-height: calc(100svh - var(--space2) * 2);
  }
}

.radius {
  border-radius: var(--radius);
}

.to_link {
  --toLinkHeight: var(--buttonHeight);
  --toLinkBackground: var(--buttonBgColor);
  --toLinkBorder: 1px;
  --toLinkBorderColor: var(--buttonBorderColor);
  --toLinkColor: var(--buttonColor);
  --toLinkHoverBackground: #FFF;
  --toLinkHoverColor: var(--buttonBgColor);
  --toLinkButtonGap: var(--space2);
  grid-gap: var(--toLinkButtonGap);
  gap: var(--toLinkButtonGap);
  display: flex;
  align-items: center;
  justify-content: center;
}
.to_link.tc {
  justify-content: center;
}
.to_link.sb {
  justify-content: space-between;
}
.to_link.tl {
  justify-content: flex-start;
}
.to_link.tr {
  justify-content: flex-end;
}
.to_link.vertical.tc {
  align-items: center;
}
.to_link.vertical.tl {
  align-items: flex-start;
}
.to_link.vertical.tr {
  align-items: flex-end;
}
.to_link.to_link_large {
  --toLinkHeight: calc(var(--buttonHeight) * 3 / 2);
}
.to_link.to_link_slim {
  --toLinkHeight: calc(var(--buttonHeight) * 3 / 4);
}
.to_link.to_link_slim .a {
  font-size: var(--fontSize_n);
}
.to_link.to_link_mini {
  --toLinkHeight: calc(var(--buttonHeight) * 3 / 5);
}
.to_link.to_link_mini .a {
  min-width: 100px;
  font-size: var(--fontSize_s);
  padding-left: var(--space1);
  padding-right: var(--space1);
}
.to_link.to_link_list .a .txt::before {
  content: "すべて見る";
}
.to_link.to_link_viewmore .a {
  width: 280px;
}
.to_link.to_link_viewmore .a .txt::before {
  content: "VIEW MORE";
}
.to_link.to_link_readmore {
  width: 280px;
}
.to_link.to_link_readmore .a .txt::before {
  content: "READ MORE";
}
.to_link.vertical {
  flex-direction: column;
}
.to_link .a {
  height: var(--toLinkHeight);
  border-radius: var(--radius);
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: auto;
  grid-gap: 5px;
  background: var(--toLinkBackground);
  border: var(--toLinkBorder) solid var(--toLinkBorderColor);
  color: var(--toLinkColor);
  font-size: var(--fontSize_ll);
  font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  padding: calc(var(--space1) / 2) var(--space2);
  position: relative;
  overflow: hidden;
  letter-spacing: normal;
  box-sizing: border-box;
  transition: var(--animationDuration) background, var(--animationDuration) color;
}
@media (max-width: 520px) {
  .to_link .a {
    width: 100%;
  }
}
@media (hover: hover) {
  .to_link .a:hover {
    background: var(--toLinkHoverBackground);
    color: var(--toLinkHoverColor);
  }
}
.to_link .a.curve {
  border-radius: var(--radius);
}
.to_link .a.round {
  border-radius: calc(var(--toLinkHeight) / 2);
}
.to_link .a.circle {
  border-radius: 50%;
  padding: 0;
  min-width: 0px;
  width: var(--toLinkHeight);
}
.to_link .a.square {
  min-width: 0px;
  width: var(--toLinkHeight);
  padding: 0;
}
.to_link .a.outlined {
  --toLinkBorderColor: var(--secondaryColor);
  --toLinkBackground: #FFF;
  --toLinkColor: var(--secondaryColor);
  --toLinkHoverBackground: var(--secondaryColor);
  --toLinkHoverColor: #FFF;
}
.to_link .a.white {
  --toLinkBorderColor: #FFF;
  --toLinkBackground: #FFF;
  --toLinkColor: var(--primaryColor);
  --toLinkHoverBackground: var(--primaryColor);
  --toLinkHoverColor: #FFF;
}
.to_link .a.secondary {
  --toLinkBackground: var(--secondaryColor);
  --toLinkBorderColor: var(--secondaryColor);
  --toLinkHoverColor: var(--secondaryColor);
}
.to_link .a.premium {
  --toLinkBorderColor: none;
  --toLinkBackground: var(--gradient);
  --toLinkColor: #FFF;
  --toLinkHoverBackground:linear-gradient(var(--gradientAngle), var(--gradientEndColor), var(--gradientEndColor));
  --toLinkHoverColor:#FFF;
}
.to_link .a.gradient {
  background: var(--gradient);
  border: 0;
}
.to_link .a.text_link {
  background: none;
  border: 0;
  --toLinkColor: var(--linkColor);
  --toLinkHoverColor: var(--linkColor);
  --toLinkHeight: auto;
  min-width: 0;
  border-radius: 0;
}
.to_link .a.text_link:not(:hover) {
  text-decoration: underline;
}
.to_link .a.solid {
  border-radius: 0;
}
.to_link .a.disabled {
  pointer-events: none;
  opacity: 0.5;
  filter: Alpha(opacity=50);
}
.to_link .a > * {
  z-index: 1;
}
.to_link .a > *:not(.fixed_center) {
  position: relative;
}
.to_link .a .txt {
  line-height: normal;
}
.to_link.social_login .a {
  min-width: 200px;
}
.to_link.social_login .icon {
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  display: inline-block;
}
.to_link.social_login .icon.icon_facebook {
  background-image: url(../images/icon_facebook.png);
}
.to_link.social_login .icon.icon_google {
  background-image: url(../images/icon_google.png);
}

.btns {
  display: flex;
  flex-wrap: wrap;
  grid-gap: var(--space1);
}
.btns.vertical {
  flex-direction: column;
}
.btns.horizontal {
  flex-direction: row;
}
.btns .btn .a {
  text-decoration: none;
  transition: var(--animationDuration) opacity;
}
.btns .btn .a.with_arrow {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  grid-gap: var(--space2);
  justify-content: space-between;
  box-sizing: border-box;
  padding-right: var(--space2);
  height: calc(var(--buttonHeight) / 2);
}
.btns .btn .a.with_arrow::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  border-style: solid;
  border-width: 1px;
  border-color: var(--baseBorderColor) var(--baseBorderColor) transparent transparent;
}
.btns .btn .a.with_arrow::after {
  width: 8px;
  height: 8px;
}
@media (hover: hover) {
  .btns .btn .a:hover {
    opacity: 0.5;
    filter: Alpha(opacity=50);
  }
}
.btns.pagination .btn {
  padding: 0;
}
.btns.pagination .btn:not(.btn_control) .a {
  background: #efefef;
}
.btns.pagination .btn:not(.btn_control).here .a {
  background: var(--colorBlack);
  color: #FFF;
}
.btns.pagination .btn .a {
  width: calc(var(--buttonHeight) * 2 / 3);
  height: calc(var(--buttonHeight) * 2 / 3);
  display: flex;
  justify-content: center;
  align-items: center;
}
.btns.pagination .btn .a.disabled {
  pointer-events: none;
  opacity: 0.5;
  filter: Alpha(opacity=50);
}
.btns.filtering .btn .a {
  height: calc(var(--buttonHeight) * 2 / 3);
  padding: 0 var(--space2);
  background: var(--colorGray);
  border-radius: 999px;
}
.btns.filtering .btn .a .txt {
  font-size: var(--fontSize_s);
}
.btns.filtering .btn.active .a {
  background: var(--secondaryColor);
  color: #FFF;
}

.categories,
.tags {
  --borderColor: transparent;
  --bgColor: var(--primaryColor);
  --textColor: #FFF;
  --buttonFontSize: var(--fontSize);
  --h: 32px;
}
.categories.gap_wide,
.tags.gap_wide {
  grid-gap: var(--space2);
}
.categories .category .a,
.categories .tag .a,
.tags .category .a,
.tags .tag .a {
  font-size: var(--buttonFontSize);
  border: 1px solid var(--borderColor);
  background: var(--bgColor);
  color: var(--textColor);
  height: var(--h);
  display: flex;
  align-items: center;
  grid-gap: var(--space1);
  font-weight: bold;
  box-sizing: border-box;
}
.categories .category .a .num,
.categories .tag .a .num,
.tags .category .a .num,
.tags .tag .a .num {
  background: #FFF;
  color: var(--primaryColor);
  font-size: var(--fontSize_ss);
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  letter-spacing: normal;
}
.categories .category .a,
.tags .category .a {
  border-radius: 0px;
  padding: 0 var(--space1);
  min-width: 180px;
}
.categories .category.here .a,
.tags .category.here .a {
  --bgColor: var(--secondaryColor);
  --textColor:var(--textColor);
}
.categories.with_num .category .a,
.tags.with_num .category .a {
  justify-content: space-between;
  padding-left: calc(var(--space1) * 1.5);
}

.tabs {
  width: 100%;
  --h: var(--buttonHeight);
  --buttonBackground: var(--primaryColor);
  --buttonBorderColor:var(--primaryColor)
  --columnGap: var(--space1);
  --rowGap: var(--space1);
  gap: var(--rowGap) var(--columnGap);
}
.tabs.zero {
  --columnGap: 0px;
  --rowGap: 0px;
}
.tabs.zero .tab:not(:last-child) .a {
  border-right: 0;
}
.tabs .tab {
  flex: 1;
}
.tabs .tab .a {
  height: var(--h);
  background: var(--buttonBackground);
  box-sizing: border-box;
  border: 1px solid var(--buttonBorderColor);
}
.tabs .tab.here {
  --buttonBackground: #FFF;
}

.navi,
.sub_navi {
  --navi_btn_height: calc(var(--buttonHeight) * 3 / 4);
  grid-gap: 0px;
}
.navi .navi_btn .a,
.navi .sub_navi_btn .a,
.sub_navi .navi_btn .a,
.sub_navi .sub_navi_btn .a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--textColor);
  font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-weight: 800;
}
.navi .navi_btn > .a,
.sub_navi .navi_btn > .a {
  height: var(--navi_btn_height);
  font-size: var(--fontSize_l);
}
.navi .sub_navi_btn,
.sub_navi .sub_navi_btn {
  border-top: 1px solid var(--baseBorderColor);
}
.navi .sub_navi_btn > .a,
.sub_navi .sub_navi_btn > .a {
  height: var(--navi_btn_height);
  font-size: var(--fontSize_n);
}
.navi .navi_btn,
.sub_navi .navi_btn {
  position: relative;
}
.navi .navi_btn input[type=checkbox],
.sub_navi .navi_btn input[type=checkbox] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.navi .navi_btn input[type=checkbox] + label::after,
.sub_navi .navi_btn input[type=checkbox] + label::after {
  content: "";
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  width: 7px;
  height: 4px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  background: var(--colorBlack);
  right: var(--space1);
  transition: var(--animationDuration) transform;
}
.navi .navi_btn input[type=checkbox] + label + .sub_navi,
.sub_navi .navi_btn input[type=checkbox] + label + .sub_navi {
  overflow: hidden;
  flex-wrap: nowrap;
  max-height: 0;
  transition: calc(var(--animationDuration) * 2) max-height;
}
.navi .navi_btn input[type=checkbox]:checked + label::after,
.sub_navi .navi_btn input[type=checkbox]:checked + label::after {
  transform: rotate(180deg);
}
.navi .navi_btn input[type=checkbox]:checked + label + .sub_navi,
.sub_navi .navi_btn input[type=checkbox]:checked + label + .sub_navi {
  max-height: 400px;
}

.scroll {
  mix-blend-mode: exclusion;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  --h: 240px;
  --w: 180px;
  --barHeight: 160px;
  height: var(--h);
}
.scroll .a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #FFF;
  text-decoration: none;
  width: var(--w);
}
.scroll > *:not(:last-child) {
  margin-bottom: var(--space1);
}
.scroll .txt {
  font-size: 0.66rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
}
.scroll .txt.rotate {
  transform: rotate(90deg);
  width: 100px;
  height: 100px;
}
.scroll .bar {
  width: 1px;
  height: var(--barHeight);
  background: rgba(255, 255, 255, 0.33);
  position: relative;
  overflow: hidden;
}
.scroll .bar::after {
  left: 0;
  bottom: 0;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #FFF;
  animation-name: expansion;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
}
.scroll.scroll_down .txt::before {
  content: "Scroll Down";
}
.scroll.scroll_down .bar {
  transform: rotate(180deg);
}
.scroll.scroll_up .txt::before {
  content: "Scroll Up";
}

@keyframes expansion {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes expansion2 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.to_pagetop {
  bottom: auto !important;
  top: calc(-1 * var(--barHeight) / 2) !important;
  --h: calc(var(--barHeight) + 24px);
  --w: 40px;
  --barHeight: 80px;
}
@media (min-width: 768px) {
  .to_pagetop {
    --w: 80px;
  }
}
.to_pagetop .a .txt::before {
  content: "SCROLL";
}

.to_scroll {
  top: auto !important;
  bottom: calc(-1 * var(--barHeight) / 2) !important;
  --h: calc(var(--barHeight) + 24px);
  --w: 40px;
  --barHeight: 80px;
}
@media (min-width: 768px) {
  .to_scroll {
    --w: 80px;
  }
}
.to_scroll .a .txt::before {
  content: "SCROLL";
}

/* Layout Class */
.box_wrap,
.box_wrap_slender,
.box_wrap_minimum,
.box_wrap_maximum,
.container {
  position: relative;
  margin: 0 auto;
  width: calc(100% - var(--cont_margin) * 2);
  box-sizing: border-box;
  --wrapMaxWidth: var(--maxWidth1);
  max-width: var(--wrapMaxWidth);
}

.box_wrap_slender {
  --wrapMaxWidth: var(--maxWidth2);
}

.box_wrap_minimum {
  --wrapMaxWidth: var(--maxWidth3);
}

.container {
  --wrapMaxWidth: var(--maxWidth4);
}

.box_wrap_maximum {
  --wrapMaxWidth: var(--maxWidth4);
}

@media (min-width: 521px) {
  .for_sp {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .not_for_sp {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .for_device {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .not_for_device {
    display: none !important;
  }
}

@media (max-width: 1279px) {
  .for_pc {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .not_for_pc {
    display: none !important;
  }
}

.fixed_center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.radius_wrapper {
  border-radius: var(--radius);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
  box-size: border-box;
  padding: var(--space3);
}

.section {
  position: relative;
  width: 100%;
}
.section.section_fit_height {
  height: 100svh;
  box-sizing: border-box;
}
.section.section_min_vh {
  min-height: calc(100svh - (var(--headHeight) + var(--space4)));
  height: auto;
  box-sizing: border-box;
}
.section.section_cont {
  padding-top: var(--space4);
  padding-bottom: var(--space4);
}
.section.cut_overflow_x {
  overflow: hidden;
  overflow-y: visible;
  width: 100vw;
}
@media (min-width: 768px) {
  .section.with_bg_grey .section_title_wrap {
    margin-bottom: var(--space4);
  }
}
.section.section_archives {
  padding-bottom: 120px;
}
.section.section_with_head_sticky .section_title_wrap {
  margin-bottom: 0 !important;
  background: #FFF;
  padding: var(--space2) 0 var(--space1) 0;
  position: sticky;
  top: var(--headHeight);
  z-index: 3;
}
.section .section_title_wrap {
  margin-bottom: var(--space2);
}

.content_title {
  display: flex;
  flex-direction: column;
  line-height: normal;
}
.content_title .sub {
  font-size: var(--fontSize_s);
}
@media (min-width: 768px) {
  .content_title {
    flex-direction: row;
    align-items: center;
    grid-gap: var(--space2);
  }
}

.inline {
  display: inline;
}

.primaryColor {
  color: var(--primaryColor);
}

.secondaryColor {
  color: var(--secondaryColor);
}

.ai_c {
  align-items: center;
}

.ai_fs {
  align-items: flex-start;
}

.ai_fe {
  align-items: flex-end;
}

.jc_c {
  justify-content: center;
}

.jc_sb {
  justify-content: space-between;
}

.jc_fs {
  justify-content: flex-start;
}

.jc_fe {
  justify-content: flex-end;
}

.fd_column {
  flex-direction: column;
}

.fd_row {
  flex-direction: row;
}

.f_nowrap {
  flex-wrap: nowrap;
}

.f_wrap {
  flex-wrap: wrap;
}

.flex {
  display: flex;
  --flexColumnGap: var(--columnGap);
  --flexRowGap: var(--rowGap);
  grid-column-gap: var(--flexColumnGap);
  grid-row-gap: var(--flexRowGap);
}
.flex.gap_zero {
  --flexColumnGap: 0px;
  --flexRowGap: 0px;
}
.flex.column_gap_zero {
  --flexColumnGap: 0px;
}
.flex.row_gap_zero {
  --flexRowGap: 0px;
}
.flex.gap_slim {
  --flexColumnGap: var(--columnGap_slim);
  --flexRowGap: var(--rowGap_slim);
}
.flex.column_gap_slim {
  --flexColumnGap: var(--columnGap_slim);
}
.flex.row_gap_slim {
  --flexRowGap: var(--rowGap_slim);
}
.flex.gap_wide {
  --flexColumnGap: var(--columnGap_wide);
  --flexRowGap: var(--rowGap_wide);
}
.flex.column_gap_wide {
  --flexColumnGap: var(--columnGap_wide);
}
.flex.row_gap_wide {
  --flexRowGap: var(--rowGap_wide);
}

.columns {
  display: flex;
  --columnColumnGap: var(--columnGap);
  --columnRowGap: var(--rowGap);
  grid-column-gap: var(--columnColumnGap);
  grid-row-gap: var(--columnRowGap);
  --columnWidth: 100%;
  flex-wrap: wrap;
}
.columns.gap_zero {
  --columnColumnGap: 0px;
  --columnRowGap: 0px;
}
.columns.column_gap_zero {
  --columnColumnGap: 0px;
}
.columns.row_gap_zero {
  --columnRowGap: 0px;
}
.columns.gap_slim {
  --columnColumnGap: var(--columnGap_slim);
  --columnRowGap: var(--rowGap_slim);
}
.columns.column_gap_slim {
  --columnColumnGap: var(--columnGap_slim);
}
.columns.row_gap_slim {
  --columnRowGap: var(--rowGap_slim);
}
.columns.gap_wide {
  --columnColumnGap: var(--columnGap_wide);
  --columnRowGap: var(--rowGap_wide);
}
.columns.column_gap_wide {
  --columnColumnGap: var(--columnGap_wide);
}
.columns.row_gap_wide {
  --columnRowGap: var(--rowGap_wide);
}
.columns .column {
  width: var(--columnWidth);
  max-width: 100%;
}
.columns .column.w2 {
  width: calc(var(--columnWidth) * 2 + var(--columnColumnGap));
}
.columns .column.w3 {
  width: calc(var(--columnWidth) * 3 + var(--columnColumnGap) * 2);
}
.columns .column.w4 {
  width: calc(var(--columnWidth) * 4 + var(--columnColumnGap) * 3);
}
.columns .column.w5 {
  width: calc(var(--columnWidth) * 5 + var(--columnColumnGap) * 4);
}
.columns .column.w6 {
  width: calc(var(--columnWidth) * 6 + var(--columnColumnGap) * 5);
}
.columns .column.w7 {
  width: calc(var(--columnWidth) * 7 + var(--columnColumnGap) * 6);
}
.columns .column.w8 {
  width: calc(var(--columnWidth) * 8 + var(--columnColumnGap) * 7);
}
.columns .column.w9 {
  width: calc(var(--columnWidth) * 9 + var(--columnColumnGap) * 8);
}
@media (min-width: 768px) {
  .columns.column2 {
    --columnWidth: calc((100% - var(--columnColumnGap)) / 2);
  }
}
.columns.column2.column2_for_sp {
  --columnWidth: calc((100% - var(--columnColumnGap)) / 2);
}
@media (min-width: 768px) {
  .columns.column3 {
    --columnWidth: calc((100% - var(--columnColumnGap) * 2) / 3);
  }
}
.columns.column3.column3_for_sp {
  --columnWidth: calc((100% - var(--columnColumnGap) * 2) / 3);
}
.columns.column4 {
  --columnWidth: calc((100% - var(--columnColumnGap)) / 2);
}
@media (min-width: 768px) {
  .columns.column4 {
    --columnWidth: calc((100% - var(--columnColumnGap) * 3) / 4);
  }
}
.columns.column5 {
  --columnWidth: calc((100% - var(--columnColumnGap)) / 2);
}
@media (min-width: 768px) {
  .columns.column5 {
    --columnWidth: calc((100% - var(--columnColumnGap) * 4) / 5);
  }
}
.columns.column6 {
  --columnWidth: calc((100% - var(--columnColumnGap) * 2) / 3);
}
@media (min-width: 768px) {
  .columns.column6 {
    --columnWidth: calc((100% - var(--columnColumnGap) * 3) / 4);
  }
}
@media (min-width: 1280px) {
  .columns.column6 {
    --columnWidth: calc((100% - var(--columnColumnGap) * 5) / 6);
  }
}
.columns.column7 {
  --columnWidth: calc((100% - var(--columnColumnGap) * 2) / 3);
}
@media (min-width: 768px) {
  .columns.column7 {
    --columnWidth: calc((100% - var(--columnColumnGap) * 3) / 4);
  }
}
@media (min-width: 1280px) {
  .columns.column7 {
    --columnWidth: calc((100% - var(--columnColumnGap) * 6) / 7);
  }
}
.columns.column8 {
  --columnWidth: calc((100% - var(--columnColumnGap) * 2) / 3);
}
@media (min-width: 768px) {
  .columns.column8 {
    --columnWidth: calc((100% - var(--columnColumnGap) * 3) / 4);
  }
}
@media (min-width: 1280px) {
  .columns.column8 {
    --columnWidth: calc((100% - var(--columnColumnGap) * 7) / 8);
  }
}
.columns.column9 {
  --columnWidth: calc((100% - var(--columnColumnGap) * 2) / 3);
}
@media (min-width: 768px) {
  .columns.column9 {
    --columnWidth: calc((100% - var(--columnColumnGap) * 5) / 6);
  }
}
@media (min-width: 1280px) {
  .columns.column9 {
    --columnWidth: calc((100% - var(--columnColumnGap) * 8) / 9);
  }
}
.columns.archives {
  align-items: stretch;
}
.columns.archives .archive > .inner {
  display: flex;
  flex-direction: column;
  color: var(--textColor);
  --shadowSpace: var(--space1);
  flex-direction: column;
  grid-gap: var(--space1);
  text-decoration: none;
  position: relative;
  overflow: visible;
  justify-content: flex-start;
}
.columns.archives .archive > .inner .photo {
  border-radius: var(--radius);
  overflow: hidden;
}
.columns.archives .archive > .inner::before {
  width: calc(100% + var(--shadowSpace) * 2);
  height: calc(100% + var(--shadowSpace) * 2);
  content: "";
  position: absolute;
  top: calc(-1 * var(--shadowSpace));
  left: calc(-1 * var(--shadowSpace));
  border-radius: 10px;
  pointer-events: none;
  transition: var(--animationDuration) box-shadow;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
.columns.archives .archive > .inner:hover::before {
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
}
.columns.archives .archive > .inner .info {
  display: flex;
  flex-direction: column;
  grid-gap: var(--space1);
  width: 100%;
}
.columns.archives .archive > .inner .info > * {
  width: 100%;
}
.columns.archives .archive > .inner .info .ex {
  font-size: var(--fontSize_s);
  line-height: 1.33;
}
@media (min-width: 768px) {
  .columns.archives {
    --columnColumnGap: var(--columnGap_wide);
    --columnRowGap: var(--rowGap_wide);
  }
  .columns.archives .archive .inner {
    --shadowSpace: var(--space2);
  }
}
.columns.archives.archives_travel .archive > .inner {
  --shadowSpace:0px;
  border-radius: var(--radius);
  background: #FFF;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.16);
  grid-gap: var(--space2);
}
.columns.archives.archives_travel .archive > .inner .photo {
  border-radius: var(--radius) var(--radius) 0px 0px;
}
.columns.archives.archives_travel .archive > .inner .info {
  padding: 0px var(--space2) var(--space2) var(--space2);
}
.columns.archives.archives_universities, .columns.archives.archives_video {
  position: relative;
  padding-top: calc(var(--columnRowGap) * 2);
  padding-bottom: calc(var(--columnRowGap) * 2);
}
.columns.archives.archives_universities::before, .columns.archives.archives_video::before {
  --diffWidth:var(--cont_margin);
  width: calc(100% + var(--diffWidth) * 2);
  background: var(--colorGray);
  height: 100%;
  position: absolute;
  top: 0;
  left: calc(-1 * var(--diffWidth));
  content: "";
}
.columns.archives.archives_universities > .column, .columns.archives.archives_video > .column {
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .columns.archives.archives_universities, .columns.archives.archives_video {
    padding-top: var(--columnRowGap);
    padding-bottom: var(--columnRowGap);
  }
}
@media (min-width: 1361px) {
  .columns.archives.archives_universities::before, .columns.archives.archives_video::before {
    --diffWidth:calc( ( 100svw - var(--wrapMaxWidth) ) / 2 );
  }
}
.columns.archives.archives_universities > .column {
  padding: 0;
}
.columns.archives.archives_universities > .column > .inner {
  padding: var(--space2);
  --shadowSpace:0px;
  height: 100%;
}
.columns.archives.archives_universities > .column .info {
  grid-gap: var(--space2);
}
.columns.archives.archives_universities > .column .info .name_wrap {
  display: flex;
  align-items: center;
  grid-gap: var(--space2);
}
.columns.archives.archives_universities > .column .selected_tags {
  font-size: var(--fontSize_n);
}
.columns.archives.archives_universities > .column .control_wrap {
  display: flex;
  grid-gap: var(--space2);
  justify-content: flex-end;
  width: 100%;
  position: relative;
}
.columns.archives.archives_universities > .column .control_wrap .rank_wrap .rank {
  width: var(--buttonHeight);
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: var(--primaryColor);
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.columns.archives.archives_universities > .column.portfolio .control_wrap {
  justify-content: space-between;
}
.columns.archives.archives_video > .archive > .inner {
  --shadowSpace:0px;
  padding: var(--space2);
  height: 100%;
  background: #FFF;
  grid-gap: var(--space2);
}
.columns.archives.archives_video > .archive > .inner .photo {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  borde-radius: var(--radius);
  overflow: hidden;
}
.columns.archives.archives_video > .archive > .inner > .to_link {
  margin-top: auto;
}
.columns.archives.archives_video > .archive > .inner > .to_link .a {
  width: 100%;
  max-width: none;
}

.alert {
  --alertBackground:var(--secondaryColor);
  --alertColor:var(--primaryColor);
  box-sizing: border-box;
  padding: var(--space2);
  border-radius: var(--radius);
  position: relative;
}
.alert::before, .alert::after {
  height: 100%;
  background: var(--alertBackground);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.alert::before {
  width: 100%;
  opacity: 0.1;
  filter: Alpha(opacity=10);
  border-radius: var(--radius);
}
.alert::after {
  width: 4px;
  border-radius: var(--radius) 0px 0px var(--radius);
}
.alert .inner {
  width: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  grid-gap: var(--space1);
}
.alert .inner .label {
  color: var(--alertColor);
  font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-weight: 800;
}
.alert.alert_yellow {
  --alertBackground:var(--colorYellow);
  --alertColor:#D9D100;
}

.premium_need {
  border-radius: var(--secondaryColor);
  background: #FFF;
  display: flex;
  grid-gap: var(--space1);
  align-items: center;
  padding: 0px var(--space1);
  font-size: var(--fontSize_s);
  height: calc(var(--buttonHeight) / 2);
  color: var(--secondaryColor);
}

.block {
  margin-bottom: var(--space5);
}
.block .head {
  margin-bottom: var(--space2);
}
.block .head.radius_wrapper {
  padding: var(--space2);
  box-shadow: none;
}
.block .foot {
  margin-top: var(--space4);
}
.block.university_detail .head .name_wrap {
  display: flex;
  grid-gap: var(--space3);
  align-items: center;
}

.sub_block {
  margin-bottom: var(--space4);
}
.sub_block .head {
  margin-bottom: var(--space1);
}
.sub_block .foot {
  margin-top: var(--space1);
}

.block,
.sub_block {
  width: 100%;
}

.block_title {
  position: relative;
}
.block_title::before, .block_title::after {
  height: 1px;
  background: var(--colorBlack);
  position: absolute;
  bottom: calc(-1 * var(--space2) + var(--space1));
  left: 0;
  content: "";
}
.block_title::before {
  width: 100%;
  opacity: 0.2;
  filter: Alpha(opacity=20);
}
.block_title::after {
  width: 80px;
}

.price_set {
  display: flex;
  flex-direction: row;
  grid-gap: var(--space1) var(--space2);
  justify-content: center;
  align-items: flex-end;
  vertical-align: baseline;
}
.price_set .price {
  font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-weight: 600;
  vertical-align: baseline;
  display: flex;
  grid-gap: 0px calc(var(--space1) / 2);
  align-items: flex-end;
  font-size: 1.75rem;
  line-height: normal;
}
.price_set .price .unit,
.price_set .price .per {
  font-size: 50%;
}
.price_set .price.emphasis {
  font-size: 2.75rem;
}

.boxes {
  display: flex;
  flex-direction: column;
  grid-gap: var(--space4);
}
.boxes > * {
  width: 100%;
}

.box {
  display: flex;
  flex-direction: column;
  grid-gap: var(--space2);
}
.box > .label,
.box > .cont {
  width: 100%;
}

.list_wrap {
  --labelWidth: 100%;
  --contWidth: 100%;
  --listGap: calc(var(--space1) / 2);
  display: flex;
  flex-direction: column;
  grid-gap: var(--space2);
}
.list_wrap .list {
  width: 100%;
  display: flex;
  flex-direction: column;
  grid-gap: var(--listGap);
  position: relative;
}
.list_wrap .list > .inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  grid-gap: var(--listGap);
  position: relative;
}
.list_wrap .list a {
  text-decoration: none;
  transition: var(--animationDuration) opacity;
}
@media (hover: hover) {
  .list_wrap .list a:hover {
    opacity: 0.5;
    filter: Alpha(opacity=50);
  }
}
.list_wrap .list .label,
.list_wrap .list .cont {
  position: relative;
}
.list_wrap .list .label {
  width: var(--labelWidth);
  display: flex;
  align-items: center;
  grid-gap: var(--space1);
  flex-direction: row;
}
.list_wrap .list .label .btns {
  position: relative;
  z-index: 1;
}
.list_wrap .list .cont {
  width: var(--contWidth);
}
@media (min-width: 768px) {
  .list_wrap {
    --listGap: var(--space2);
  }
  .list_wrap .list {
    flex-direction: row;
    align-items: center;
  }
  .list_wrap .list > .inner {
    flex-direction: row;
    align-items: center;
  }
}
.list_wrap.list_news_wrap {
  grid-gap: 0px;
  --labelWidth: 7rem;
  --contWidth: calc( 100% - ( var(--labelWidth) + var(--listGap) ) );
}
.list_wrap.list_news_wrap .list:not(:last-child) {
  border-bottom: 1px solid var(--colorGray);
}
.list_wrap.list_news_wrap .list > .inner {
  font-size: var(--fontSize_l);
  padding-top: var(--space2);
  padding-bottom: var(--space2);
  flex-direction: row;
  color: var(--textColor);
}
.list_wrap.list_news_wrap .list > .inner .cont {
  color: var(--secondaryColor);
}
.list_wrap.list_member_wrap {
  --listGap:var(--space2);
  --labelWidth:48px;
  --contWidth:calc( 100% - ( var(--labelWidth) + var(--listGap) ) );
}
.list_wrap.list_member_wrap .list .inner {
  flex-direction: row;
}
@media (min-width: 521px) {
  .list_wrap.list_member_wrap {
    flex-direction: row;
    align-items: center;
    grid-gap: var(--space2);
  }
  .list_wrap.list_member_wrap .list {
    width: calc((100% - var(--space2)) / 2);
  }
}

.line_qr_wrap {
  max-width: 400px;
}
.line_qr_wrap > .a {
  background: #FFF;
  border-radius: var(--radius);
  box-sizing: border-box;
  padding: var(--space1);
  display: flex;
  align-items: center;
  color: var(--colorBlack);
  grid-gap: var(--space2);
  text-decoration: none;
}
.line_qr_wrap .qr {
  min-width: 98px;
  max-width: 98px;
}
.line_qr_wrap .info > * {
  font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-weight: 800;
  letter-spacing: normal;
}
.line_qr_wrap .info .official {
  color: var(--secondaryColor);
}

.accordion > .accordion_head .to_link,
.accordion > .accordion_foot .to_link {
  position: relative;
  transition: var(--animationDuration) top;
}
.accordion > .accordion_head .to_link .accordion_toggle,
.accordion > .accordion_foot .to_link .accordion_toggle {
  transition: var(--animationDuration) transform;
  padding: 0;
  min-width: 0;
  height: auto;
  width: auto;
  --buttonBorderColor: none;
  overflow: visible;
  box-sizing: border-box;
}
.accordion > .accordion_head .to_link .accordion_toggle .arrow,
.accordion > .accordion_foot .to_link .accordion_toggle .arrow {
  width: 6px;
  height: 4px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  display: block;
}
.accordion > .accordion_head {
  margin-bottom: 0;
}
.accordion > .accordion_head .to_link .accordion_toggle {
  transform: rotate(180deg);
}
.accordion > .accordion_head .to_link .accordion_toggle .arrow {
  background: var(--toLinkColor);
}
.accordion > .accordion_head .to_link .a:hover .accordion_toggle .arrow {
  background: var(--toLinkHoverColor);
}
.accordion > .accordion_body {
  padding-top: var(--space2);
  height: -moz-fit-content;
  height: fit-content;
  transition: var(--animationDuration) padding, var(--animationDuration) height;
  overflow: visible;
}
.accordion > .accordion_foot {
  margin-top: 0;
}
.accordion > .accordion_foot .to_link .accordion_toggle {
  transform: rotate(180deg);
}
.accordion:not(.active) > .accordion_head .to_link {
  --toLinkBackground:#FFF;
  --toLinkColor:var(--secondaryColor);
}
.accordion:not(.active) > .accordion_head .to_link .accordion_toggle {
  transform: rotate(0deg);
}
.accordion:not(.active) > .accordion_head .to_link .accordion_toggle .arrow {
  background: var(--toLinkColor);
}
.accordion:not(.active) > .accordion_body {
  height: 0;
  padding-top: 0;
  overflow: hidden;
}
.accordion:not(.active) > .accordion_foot .to_link .accordion_toggle {
  transform: rotate(0deg);
}
.accordion.active > .accordion_head .to_link {
  --toLinkHoverBackground:var(--secondaryColor);
  --toLinkHoverColor:#FFF;
}

.selected_tags {
  display: flex;
  grid-gap: var(--space1) var(--space1);
  flex-wrap: wrap;
}
.selected_tags .tag {
  display: flex;
  min-height: calc(var(--buttonHeight) / 2);
  border-radius: 999px;
  grid-gap: var(--space1);
  padding: calc(var(--space1) / 2) var(--space1);
  align-items: center;
  font-size: var(--fontSize_s);
}

.scroller_wrap {
  --paddingLeft: max(var(--cont_margin), calc((100vw - var(--maxWidth)) / 2));
  --paddingRight: var(--cont_margin);
  --maxWidth: var(--wrapMaxWidth);
  --left: calc(-1 * var(--paddingLeft));
  --w: 100vw;
  --mmWidth:280px;
  width: var(--w);
  overflow: hidden;
  position: relative;
  top: 0;
  left: var(--left);
}
.scroller_wrap .scroller {
  width: 100%;
  overflow: hidden;
  overflow-x: auto;
  padding-bottom: 17px;
}
.scroller_wrap .scroller .archives {
  padding-left: var(--paddingLeft);
  padding-right: var(--paddingRight);
  padding-top: var(--space1);
  padding-bottom: var(--space2);
  flex-wrap: nowrap;
  width: -moz-fit-content;
  width: fit-content;
}
.scroller_wrap .scroller .archives .archive {
  min-width: var(--mmWidth);
  max-width: var(--mmWidth);
}
@media (min-width: 521px) {
  .scroller_wrap .scroller .archives {
    grid-gap: 50px;
  }
}
@media (min-width: 521px) {
  .scroller_wrap {
    --mmWidth:320px;
  }
}

.slick .slick-track {
  display: flex;
}
.slick .slick-slide {
  height: auto !important;
}
.slick .slick-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--buttonHeight);
  height: var(--buttonHeight);
  cursor: pointer;
  background: var(--colorBlack);
  transition: var(--animationDuration) background;
  z-index: 1;
}
.slick .slick-arrow::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-width: 2px;
}
.slick .slick-arrow.slick-disabled {
  background: var(--colorGray);
  pointer-events: none;
  display: none !important;
}
.slick .slick-arrow.slick-next {
  right: 0;
}
.slick .slick-arrow.slick-next::before {
  border-right-color: #FFF;
  border-top-color: #FFF;
  right: calc(var(--space1) * 1 / 3);
}
.slick .slick-arrow.slick-prev {
  left: 0;
}
.slick .slick-arrow.slick-prev::before {
  border-left-color: #FFF;
  border-bottom-color: #FFF;
  position: relative;
  left: calc(var(--space1) * 1 / 3);
}

.to_modal {
  cursor: pointer;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: var(--animationDuration) opacity;
}
.modal[data-style=youtube] .modal_inner_wrap, .modal.youtube .modal_inner_wrap {
  width: calc(100% - var(--space2) * 2);
  max-width: 1280px;
}
.modal[data-style=youtube] .modal_inner_wrap .modal_inner .movie, .modal.youtube .modal_inner_wrap .modal_inner .movie {
  padding-top: 56.25%;
}
.modal[data-style=fullscreen] .modal_inner_wrap, .modal.fullscreen .modal_inner_wrap {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  overflow: hidden;
}
.modal[data-style=fullscreen] .modal_inner_wrap .modal_inner, .modal.fullscreen .modal_inner_wrap .modal_inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  padding: 0;
}
.modal[data-style=fullscreen] .modal_inner_wrap .modal_inner *, .modal.fullscreen .modal_inner_wrap .modal_inner * {
  pointer-events: none;
}
.modal[data-style=fit-max] .modal_inner_wrap .modal_inner, .modal.fit-max .modal_inner_wrap .modal_inner {
  height: 100%;
  max-height: calc(100dvh - var(--space2) * 2);
}
.modal[data-style=fit-max] .modal_inner_wrap .modal_inner > .flex, .modal.fit-max .modal_inner_wrap .modal_inner > .flex {
  max-height: calc(100dvh - var(--space2) * 2);
}
@media (min-width: 1280px) {
  .modal[data-style=fit-max] .modal_inner_wrap, .modal.fit-max .modal_inner_wrap {
    max-width: none;
  }
}
.modal[data-style=unlimited] .modal_inner_wrap, .modal.unlimited .modal_inner_wrap {
  width: 100%;
  max-width: calc(100vw - var(--space2) * 2);
}
@media (min-width: 768px) {
  .modal[data-style=unlimited] .modal_inner_wrap, .modal.unlimited .modal_inner_wrap {
    max-width: calc(100vw - var(--space4) * 2);
  }
}
.modal .modal_black {
  position: fixed;
  background: rgba(0, 0, 0, 0.8);
  transition: var(--animationDuration) opacity;
  width: 100vw;
  height: 100dvh;
}
.modal .modal_inner_wrap {
  position: relative;
  z-index: 1;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  max-width: calc(100vw - var(--space2) * 2);
  max-height: calc(100dvh - var(--space2) * 2);
  min-height: 240px;
  min-width: 320px;
  background: #FFF;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  transition: var(--animationDuration) opacity, var(--animationDuration) transform;
}
.modal .modal_inner_wrap.no_flow {
  overflow-y: hidden;
}
.modal .modal_inner_wrap .modal_inner {
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space3);
}
.modal .modal_inner_wrap .modal_inner.no_padding {
  padding: 0;
}
.modal .modal_inner_wrap .modal_inner .block_form {
  max-width: 480px;
}
.modal .modal_inner_wrap .modal_head {
  position: sticky;
  top: 0;
  height: var(--space5);
  min-height: var(--space5);
  background: #FFF;
  box-sizing: border-box;
  padding: var(--space1) var(--space3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}
.modal .modal_inner_wrap .modal_head .to_link {
  margin: 0;
}
.modal .modal_inner_wrap .modal_head .to_link .a {
  min-width: 80px;
}
.modal .modal_inner_wrap .modal_foot {
  height: var(--space5);
  min-height: var(--space5);
  box-sizing: border-box;
  padding: var(--space1) var(--space3);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal .modal_inner_wrap .modal_foot .to_link:not(.no_margin) {
  margin: auto;
}
.modal .modal_inner_wrap .modal_foot .to_link .a {
  min-width: 80px;
}
.modal .modal_inner_wrap .modal_foot.sticky {
  position: sticky;
  bottom: 0;
  z-index: 2;
}
.modal .modal_inner_wrap .columns.zero {
  grid-gap: 0 !important;
}
.modal .modal_inner_wrap .columns.margin_slim {
  --gap: var(--space1);
}
.modal .modal_inner_wrap .columns.margin_slim_row {
  grid-row-gap: var(--space1);
}
@media (max-width: 520px) {
  .modal .modal_inner_wrap {
    max-height: calc(100dvh - var(--space2) * 2 - 96px);
  }
}
.modal:not(.active) {
  opacity: 0;
  filter: Alpha(opacity=0);
  pointer-events: none !important;
}
.modal:not(.active) .black {
  opacity: 0;
  filter: Alpha(opacity=0);
  pointer-events: none !important;
}
.modal:not(.active) .modal_inner_wrap {
  opacity: 0;
  filter: Alpha(opacity=0);
  pointer-events: none !important;
  transform: scale(0.9);
}
.modal .btn_close.btn {
  cursor: pointer;
  width: var(--buttonHeight);
  height: var(--buttonHeight);
  background: var(--primaryColor);
  bottom: auto;
  left: auto;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal .btn_close.btn::after {
  content: "×";
}
@media (min-width: 1280px) {
  .modal .modal_inner_wrap {
    max-width: var(--maxWidth1);
  }
}

/* ID */
#loading {
  position: fixed;
  width: 100vw;
  height: 100dvh;
  z-index: 999;
  transition: var(--animationDuration) opacity;
  background: #FFF;
}
#loading::before {
  content: "";
  background: url("../images/common/concept.png") no-repeat center center;
  background-size: contain;
  width: min(90vw, 800px);
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#hamburger,
[data-layout=hamburger] {
  --hamburgerColor: #FFF;
  width: var(--hamburgerSize);
  height: var(--hamburgerSize);
  position: fixed;
  top: 0px;
  left: 0;
  right: auto;
  bottom: auto;
  z-index: 200;
}
#hamburger .a,
[data-layout=hamburger] .a {
  flex-direction: column;
  color: var(--hamburgerColor);
  grid-gap: 5px;
}
#hamburger .a::after,
[data-layout=hamburger] .a::after {
  content: "menu";
  font-size: var(--fontSize_ss);
  color: #FFF;
  position: absolute;
  top: calc(50% + 12px);
  width: 100%;
  left: 0;
  text-align: center;
  transition: var(--animationDuration) transform, var(--animationDuration) opacity;
}
#hamburger .lines,
[data-layout=hamburger] .lines {
  width: 34px;
  height: 9px;
  position: relative;
}
#hamburger .lines > .line,
[data-layout=hamburger] .lines > .line {
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--hamburgerColor);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transition: var(--animationDuration) transform;
}
#hamburger .lines > .line:first-child,
[data-layout=hamburger] .lines > .line:first-child {
  top: 100%;
}
#hamburger .lines > .line:last-child,
[data-layout=hamburger] .lines > .line:last-child {
  bottom: 100%;
}
#hamburger .txt,
[data-layout=hamburger] .txt {
  font-size: var(--fontSize_ss);
}
#hamburger .txt::before,
[data-layout=hamburger] .txt::before {
  content: "MENU";
}

header[data-layout=head],
#head {
  height: var(--headHeight);
  width: calc(100dvw - var(--headPositionLeft) * 2);
  position: fixed;
  background: var(--primaryColor);
  color: #FFF;
  top: var(--headPositionTop);
  left: var(--headPositionLeft);
  z-index: 100;
}
header[data-layout=head] > .container,
#head > .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
header[data-layout=head] .to_link .a,
#head .to_link .a {
  text-decoration: none;
}
header[data-layout=head] .logo_wrap,
#head .logo_wrap {
  width: 40px;
  height: 40px;
}
header[data-layout=head] .logo_wrap .logo,
#head .logo_wrap .logo {
  width: 100%;
  height: 100%;
}
header[data-layout=head] .logo_wrap .logo .icon,
#head .logo_wrap .logo .icon {
  background-image: url("../images/logo_b.png");
  background-position: left center;
  width: 100%;
  height: 100%;
}
header[data-layout=head] .logo_wrap.logo_full,
#head .logo_wrap.logo_full {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 30px;
}
header[data-layout=head] .logo_wrap.logo_full .logo .icon,
#head .logo_wrap.logo_full .logo .icon {
  background-position: center center;
  background-image: url(../images/logo_bizcre_cloud.png);
}
header[data-layout=head] div[role=menu],
#head div[role=menu] {
  overflow: hidden;
  border-radius: var(--radius);
}
header[data-layout=head] div[role=menu] a.a,
#head div[role=menu] a.a {
  height: calc(var(--buttonHeight) * 2 / 3);
  display: flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  justify-content: flex-start;
  padding: 0 var(--space2);
  grid-gap: calc(var(--space1) / 2);
  position: relative;
}
header[data-layout=head] div[role=menu] a.a:not(.disabled):hover,
#head div[role=menu] a.a:not(.disabled):hover {
  background: var(--colorGray);
}
header[data-layout=head] div[role=menu] a.a:not(.active),
#head div[role=menu] a.a:not(.active) {
  color: var(--colorDarkGray);
}
header[data-layout=head] div[role=menu] a.a .badge,
#head div[role=menu] a.a .badge {
  width: 20px !important;
  height: 20px !important;
  position: absolute !important;
  top: 0px !important;
  bottom: 0px !important;
  margin: auto !important;
  right: var(--space2) !important;
  background: var(--primaryColor) !important;
  color: #FFF !important;
  font-size: var(--fontSize_ss) !important;
  border-radius: 50% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

#navi_wrap,
[data-layout=navi_wrap] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100svw;
  max-width: 480px;
  height: 100svh;
  background: var(--primaryColor);
  color: #FFF;
  z-index: 199;
  box-sizing: border-box;
  padding: calc(var(--headHeight) + var(--headPositionTop)) 0px var(--space4) 0px;
  transition: var(--animationDuration) transform, var(--animationDuration) opacity;
}
#navi_wrap .logo_wrap,
[data-layout=navi_wrap] .logo_wrap {
  width: 190px;
}
#navi_wrap .container,
[data-layout=navi_wrap] .container {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  grid-gap: var(--space3);
}

#login_info_wrap {
  width: auto;
  left: auto;
  --h: var(--headHeight);
  height: var(--h);
  bottom: auto;
  right: calc(var(--hamburgerSize) + var(--space2));
  position: fixed;
}
@media (min-width: 768px) {
  #login_info_wrap {
    right: var(--cont_margin);
    --h: var(--buttonHeight);
  }
}
#login_info_wrap .name_wrap {
  cursor: pointer;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  grid-gap: var(--space2);
  position: relative;
}
#login_info_wrap .name_wrap .thumb {
  width: calc(var(--h) - var(--space1));
}
#login_info_wrap .name_wrap .name {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  grid-gap: var(--space2);
}
#login_info_wrap .name_wrap .name::after {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  width: 7px;
  height: 5px;
  background: var(--colorBlack);
  content: "";
}
#login_info_wrap .name_wrap .btns {
  max-height: 0;
  overflow: hidden;
  width: 180px;
  transition: var(--animationDuration) max-height, var(--animationDuration) max-height;
  position: absolute;
  top: 100%;
  right: 0;
  background: #FFF;
}
#login_info_wrap .name_wrap .btns .btn {
  position: relative;
}
#login_info_wrap .name_wrap .btns .btn .a {
  height: calc(var(--buttonHeight) * 2 / 3);
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: 0px var(--space2);
}
#login_info_wrap .name_wrap .btns .btn:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--colorGray);
  opacity: 0.2;
  filter: Alpha(opacity=20);
}
#login_info_wrap .name_wrap:hover .btns {
  max-height: 400px;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.05);
}

.btns[data-layout=pan],
#pan {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--fontSize_n);
  grid-gap: 2px var(--space4);
}
.btns[data-layout=pan] .btn,
#pan .btn {
  cursor: pointer;
}
.btns[data-layout=pan] .btn .a,
#pan .btn .a {
  grid-gap: var(--space1);
  cursor: pointer;
}
.btns[data-layout=pan] .btn .a .icon,
#pan .btn .a .icon {
  width: 16px;
  height: 16px;
}
.btns[data-layout=pan] .btn .a .icon.icon_company,
#pan .btn .a .icon.icon_company {
  background-image: url(../images/icon_company.png);
}
.btns[data-layout=pan] .btn .a .icon.icon_dashboard,
#pan .btn .a .icon.icon_dashboard {
  background-image: url(../images/icon_dashboard.png);
}
.btns[data-layout=pan] > *,
#pan > * {
  position: relative;
}

main[data-layout=contents],
#contents {
  position: relative;
  width: 100%;
  min-height: 100svh;
  padding-top: var(--headHeight);
  padding-bottom: var(--footHeight);
  box-sizing: border-box;
}
@media (min-width: 768px) {
  main[data-layout=contents],
  #contents {
    box-sizing: border-box;
  }
}

.navigations {
  display: flex;
  flex-direction: column;
  grid-gap: var(--space3);
}
.navigations .btns {
  flex-direction: column;
}
.navigations .btns .btn .a {
  flex-direction: row;
  justify-content: flex-start;
  color: #FFF;
  font-size: var(--fontSize_l);
}
.navigations .btns.navi .btn .a {
  font-size: 1.8rem;
  font-weight: normal !important;
  font-family: "Dela Gothic One", sans-serif;
}

.sns_wrap {
  display: flex;
  flex-direction: column;
  grid-gap: var(--space2);
  text-align: center;
}
.sns_wrap .sns {
  justify-content: center;
  flex-direction: row;
  grid-gap: var(--space2);
}
.sns_wrap .sns .btn .a {
  color: #FFF;
}
.sns_wrap .sns .btn .a svg {
  width: 40px;
  height: 40px;
}

#foot,
footer[data-layout=foot] {
  height: var(--footHeight);
  background: var(--primaryColor);
  color: #FFF;
  position: relative;
  padding: var(--space4) 0 calc(var(--fixedMenuHeight) + var(--space2));
  box-sizing: border-box;
}
#foot > .container,
footer[data-layout=foot] > .container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  grid-gap: var(--space3);
}
#foot .foot_inner,
footer[data-layout=foot] .foot_inner {
  display: flex;
  flex-direction: column;
  grid-gap: var(--space3);
}
#foot .foot_inner.foot_inner_bottom,
footer[data-layout=foot] .foot_inner.foot_inner_bottom {
  align-items: center;
  width: 100%;
}
#foot .logo_wrap,
footer[data-layout=foot] .logo_wrap {
  max-width: 360px;
  width: 100%;
}
#foot .copyright,
footer[data-layout=foot] .copyright {
  color: #FFF;
}

/* optional */
.section_title_wrap.border_bottom {
  padding-bottom: var(--space3);
  border-bottom: 1px solid var(--colorGray);
}

.article > .head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  grid-gap: var(--space1);
}
.article > .body {
  box-sizing: border-box;
}
.article > .body > .text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  grid-gap: var(--space4);
}
.article .foot {
  display: flex;
  flex-direction: column;
  grid-gap: var(--space3);
}
.article .author_wrap {
  background: var(--colorGray);
  box-sizing: border-box;
  padding: var(--space2);
  --gap:var(--space2);
  --thumbSize:48px;
}
.article .author_wrap .inner {
  display: flex;
  grid-gap: var(--gap);
  align-items: center;
}
.article .author_wrap .inner .thumb {
  width: var(--thumbSize);
}
.article .author_wrap .inner .info {
  width: calc(100% - (var(--thumbSize) + var(--gap)));
  display: flex;
  flex-direction: column;
  grid-gap: calc(var(--space1) / 2);
}
@media (min-width: 768px) {
  .article .author_wrap {
    --thumbSize:64px;
  }
}

/* status */
body.loaded #loading {
  opacity: 0;
  filter: Alpha(opacity=0);
  pointer-events: none !important;
}
body.navi_on #hamburger .a::after,
body.navi_on [data-layout=hamburger] .a::after {
  transform: translateY(-5px);
  opacity: 0;
  filter: Alpha(opacity=0);
}
body.navi_on #hamburger .lines .line:first-child,
body.navi_on [data-layout=hamburger] .lines .line:first-child {
  transform: rotate(12deg);
  top: 0;
}
body.navi_on #hamburger .lines .line:last-child,
body.navi_on [data-layout=hamburger] .lines .line:last-child {
  transform: rotate(-12deg);
  bottom: 0;
}
body:not(.navi_on) #navi_wrap,
body:not(.navi_on) [data-layout=navi_wrap] {
  transform: translateX(-100%);
  opacity: 0;
  filter: Alpha(opacity=0);
  pointer-events: none;
}
body.body_logined main[data-layout=contents] {
  padding-top: calc(var(--headHeight) + var(--space4));
}
@media (min-width: 768px) {
  body.body_logined main[data-layout=contents] {
    padding-top: var(--space4);
  }
}

.thumb {
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
}
.thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.thumb .bg,
.thumb .icon {
  width: 100%;
  height: 100%;
}
.thumb.thumb_youtube {
  aspect-ratio: 16/9;
  border-radius: var(--radius);
}
.thumb .empty {
  width: 100%;
  height: 100%;
  background: var(--secondaryColor);
}

/* LINE ログイン用 */
.line_login {
  --h: 44px;
  --iconSize: 32px;
  --paddingX: 8px;
  box-sizing: border-box;
  height: var(--h);
  border-radius: 8.07px;
  overflow: hidden;
  background: var(--lineColor);
  padding-left: var(--paddingX);
  padding-right: var(--iconSize);
  border: 0;
  width: auto;
  grid-gap: 0px calc(var(--iconSize) + var(--paddingX) + 1px);
}
.line_login::after {
  content: "";
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  filter: Alpha(opacity=0);
  transition: var(--animationDuration) opacity;
}
.line_login::before {
  content: "";
  width: 1px;
  height: 100%;
  background: #000;
  position: absolute;
  top: 0;
  left: calc(var(--iconSize) + var(--paddingX) * 2);
  pointer-events: none;
  opacity: 0.08;
  filter: Alpha(opacity=8);
}
.line_login:hover::after {
  opacity: 0.1;
  filter: Alpha(opacity=10);
}
.line_login:active::after {
  opacity: 0.1;
  filter: Alpha(opacity=10);
}
.line_login .icon,
.line_login .txt {
  position: relative;
  z-index: 1;
}
.line_login .icon {
  width: var(--iconSize);
  aspect-ratio: 1/1;
  background-image: url(../images/line/icon.png);
}
.line_login .txt {
  line-height: 1;
  color: #FFF;
  font-size: var(--fontSize_n);
  font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-weight: 800;
}

.percentDoughnut {
  position: relative;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.percentDoughnut .num {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fontSize_s);
}
.percentDoughnut .num .unit {
  font-size: var(--fontSize_ss);
}
.percentDoughnut canvas {
  position: relative;
  top: -4px;
}

.preview_wrap {
  display: flex;
  flex-direction: column;
  grid-gap: var(--space1) var(--space2);
}
.preview_wrap:not(:last-child) {
  margin-bottom: var(--space4);
}
.preview_wrap > .label {
  font-size: var(--fontSize_n);
  font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-weight: 400;
}
.preview_wrap.form_preview {
  grid-gap: var(--space1);
  border-bottom: 1px solid var(--baseBorderColor);
  padding-bottom: var(--space1);
  box-sizing: border-box;
  min-height: 100%;
  justify-content: space-between;
}
.preview_wrap.border_bottom {
  border-bottom: 1px solid var(--baseBorderColor);
  padding-bottom: var(--space1);
}

.fixedController {
  position: fixed;
  bottom: 0;
  height: var(--footHeight);
  background: none;
  width: 100%;
  z-index: 5;
}
.fixedController .container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.textEditor_wrap {
  border: 1px solid var(--formBorderColor);
  box-sizing: border-box;
}
.textEditor_wrap .editorController {
  box-sizing: border-box;
  padding: 0 var(--space1);
  background: var(--colorBlue);
  border-bottom: 1px solid var(--formBorderColor);
}
.textEditor_wrap .editorController .to_link {
  --toLinkButtonGap: 0px;
  --buttonSize: calc(var(--buttonHeight) * 2 / 3);
}
.textEditor_wrap .editorController .to_link .a {
  width: var(--buttonSize);
  height: var(--buttonSize);
  text-decoration: none;
  padding: 0;
}
.textEditor_wrap .editorController .to_link .a.text_link {
  --toLinkColor:#FFF;
}
.textEditor_wrap .editorController .to_link .a .txt {
  font-size: var(--fontSize_s);
}
.textEditor_wrap .editorController .to_link .a.active {
  background: #FFF;
  --toLinkColor:var(--textColor);
}
.textEditor_wrap .editorBody {
  padding: var(--space2);
  box-sizing: border-box;
  background: var(--formBgColor);
}
.textEditor_wrap .editorBody a {
  text-decoration: underline;
}
.textEditor_wrap .editorBody a span {
  display: inline;
}

.textLabel {
  height: 24px;
  padding: 0 var(--space1);
  border-radius: 999px;
  background: var(--colorBlue);
  font-size: var(--fontSize_s);
  width: auto;
  display: flex;
  justify-ceontent: center;
  align-items: center;
}

.img_players {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.img_players .icon {
  width: 100%;
  height: 100%;
  background-size: contain;
}
.img_players.img_players_1 {
  max-width: 226px;
  aspect-ratio: 226/120;
}
.img_players.img_players_1 .icon {
  background-image: url(../images/img_players_1.png);
}
.img_players.img_players_2 {
  max-width: 188px;
  aspect-ratio: 188/118;
}
.img_players.img_players_2 .icon {
  background-image: url(../images/img_players_2.png);
}
.img_players.img_players_3 {
  max-width: 129px;
  aspect-ratio: 129/96;
}
.img_players.img_players_3 .icon {
  background-image: url(../images/img_players_3.png);
}
.img_players.img_players_4 {
  max-width: 112px;
  aspect-ratio: 112/152;
}
.img_players.img_players_4 .icon {
  background-image: url(../images/img_players_4.png);
}

.logo_wrap {
  aspect-ratio: 83/55;
}
.logo_wrap .logo {
  width: 100%;
  height: 100%;
}
.logo_wrap .icon {
  width: 100%;
  height: 100%;
  background-image: url(../images/logo.png);
  background-size: contain;
}

.voice {
  --voiceTextColor:#FFF;
  padding-left: var(--space2);
  padding-right: var(--space2);
  position: relative;
}
.voice::before, .voice::after {
  width: 1px;
  height: 100%;
  background: var(--voiceTextColor);
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.voice::before {
  right: calc(100% + var(--space1));
  transform: skewX(20deg);
}
.voice::after {
  left: calc(100% + var(--space1));
  transform: skewX(-20deg);
}

.section[data-layer=contents_footer_line] .block {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.section[data-layer=contents_footer_line] .block .body {
  position: relative;
  padding-bottom: var(--space2);
}
.section[data-layer=contents_footer_line] .block .body > .photo {
  left: auto;
  top: auto;
  max-width: 161px;
}
.section[data-layer=contents_footer_line] .block .body .to_link {
  max-width: calc(100% - 190px);
}
.section[data-layer=contents_footer_line] .block .foot {
  margin-top: var(--space1);
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-gap: var(--space2);
}
.section[data-layer=contents_footer_line] .block .foot .img_players {
  min-width: 190px;
}
.section[data-layer=contents_footer_line] .block .foot .voice {
  --voiceTextColor:var(--colorBlack);
}
.section[data-layer=contents_footer_line] .block .foot .to_link {
  width: 100%;
}

.section[data-layout=contents_footer_search] .boxes .box > .label {
  font-size: var(--fontSize_ll);
  font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-weight: 800;
}
.section[data-layout=contents_footer_search] .boxes .box > .cont .btns {
  grid-gap: var(--space2) var(--space4);
}
.section[data-layout=contents_footer_search] .boxes .box > .cont .btns .btn .a {
  color: var(--textColor);
  font-size: var(--fontSize_l);
}

/*各ページ*/
#home_mv,
.home_mv,
[data-layout=home] {
  --headDifferentHeight:calc( var(--headHeight) + var(--headPositionTop) );
  background: var(--primaryColor);
  margin-top: calc(-1 * var(--headDifferentHeight));
  padding: var(--headDifferentHeight) 0px calc(var(--space5) + var(--space3)) 0px !important;
  color: #FFF;
}
#home_mv .copy,
.home_mv .copy,
[data-layout=home] .copy {
  color: var(--textColor);
}
#home_mv .mv_inner,
.home_mv .mv_inner,
[data-layout=home] .mv_inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  grid-gap: var(--space2);
  align-items: center;
}
#home_mv .logo_wrap,
.home_mv .logo_wrap,
[data-layout=home] .logo_wrap {
  max-width: 480px;
  width: 100%;
  margin-top: calc(-1 * var(--space4));
}
#home_mv .searchWrap,
.home_mv .searchWrap,
[data-layout=home] .searchWrap {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  grid-gap: var(--space1) var(--space4);
}
#home_mv .searchWrap .form_part .flex,
.home_mv .searchWrap .form_part .flex,
[data-layout=home] .searchWrap .form_part .flex {
  grid-gap: 0px;
  width: 100%;
}
#home_mv .searchWrap .form_part .flex .to_link,
.home_mv .searchWrap .form_part .flex .to_link,
[data-layout=home] .searchWrap .form_part .flex .to_link {
  --toLinkHeight:var(--h);
  --toLinkBackground:var(--colorBlue);
  --toLinkBorderColor:var(--colorBlue);
  --toLinkHoverBackground:#FFF;
  --toLinkHoverColor:var(--colorBlue);
}
#home_mv .searchWrap .form_part .flex .to_link .a,
.home_mv .searchWrap .form_part .flex .to_link .a,
[data-layout=home] .searchWrap .form_part .flex .to_link .a {
  border-radius: 0px var(--partsRadius) var(--partsRadius) 0px;
}
#home_mv .searchWrap .form_part .flex .input_wrap,
.home_mv .searchWrap .form_part .flex .input_wrap,
[data-layout=home] .searchWrap .form_part .flex .input_wrap {
  width: 100%;
}
#home_mv .searchWrap .form_part .flex .input_wrap input,
.home_mv .searchWrap .form_part .flex .input_wrap input,
[data-layout=home] .searchWrap .form_part .flex .input_wrap input {
  border: 0 !important;
  border-radius: var(--partsRadius) 0px 0px var(--partsRadius) !important;
}
#home_mv .tabs,
.home_mv .tabs,
[data-layout=home] .tabs {
  --buttonBackground: var(--primaryColor);
  --buttonBorderColor:#FFF;
}
#home_mv .tabs .tab,
.home_mv .tabs .tab,
[data-layout=home] .tabs .tab {
  position: relative;
}
#home_mv .tabs .tab .a,
.home_mv .tabs .tab .a,
[data-layout=home] .tabs .tab .a {
  cursor: pointer;
  font-size: var(--fontSize_n);
}
#home_mv .tabs .tab:first-child .a,
.home_mv .tabs .tab:first-child .a,
[data-layout=home] .tabs .tab:first-child .a {
  border-radius: var(--radius) 0px 0px var(--radius);
}
#home_mv .tabs .tab:last-child .a,
.home_mv .tabs .tab:last-child .a,
[data-layout=home] .tabs .tab:last-child .a {
  border-radius: 0px var(--radius) var(--radius) 0px;
}
#home_mv .tabs .tab.here .a,
.home_mv .tabs .tab.here .a,
[data-layout=home] .tabs .tab.here .a {
  color: var(--primaryColor);
}
#home_mv .tabs .tab.here::before,
.home_mv .tabs .tab.here::before,
[data-layout=home] .tabs .tab.here::before {
  content: "";
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: #FFF;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: auto;
}
#home_mv .loginWrap,
.home_mv .loginWrap,
[data-layout=home] .loginWrap {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  flex-direction: column;
  grid-gap: var(--space2);
}
#home_mv .loginWrap .to_link,
.home_mv .loginWrap .to_link,
[data-layout=home] .loginWrap .to_link {
  width: 100%;
}
#home_mv .loginWrap .to_link .a,
.home_mv .loginWrap .to_link .a,
[data-layout=home] .loginWrap .to_link .a {
  width: 100%;
  max-width: none;
}
#home_mv .img_players,
.home_mv .img_players,
[data-layout=home] .img_players {
  bottom: auto;
  top: calc(100% - 70px);
}

.home_about {
  background: var(--primaryColor);
  color: #FFF;
  position: relative;
  --wrapMaxWidth:480px;
}
.home_about .img_smartphone {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 160px;
  max-height: 202px;
  width: 40%;
  aspect-ratio: 160/202;
  overflow: hidden;
}
.home_about .img_smartphone .icon {
  width: 100%;
  height: 100%;
  background-image: url(../images/smartphone_sample.png);
}

/* Safari */
_::-webkit-full-page-media, _:future, :root .home_about .img_smartphone {
  aspect-ratio: auto;
}

.columns.plans {
  align-items: stretch;
  --appealColor:var(--primaryColor);
  --borderColor:var(--colorGray);
}
.columns.plans .column {
  box-sizing: border-box;
  border: 2px solid var(--borderColor);
  position: relative;
}
.columns.plans .column.recommend {
  --borderColor:var(--appealColor);
}
.columns.plans .column.recommend::after {
  width: 120px;
  height: 24px;
  background: var(--appealColor);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  margin: auto;
  content: "おすすめ";
  border-radius: 999px;
}
.columns.plans .column .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  grid-gap: var(--space1);
}
.columns.plans .column .inner .plan_wrap {
  text-align: center;
}
.columns.plans .column .inner .plan_wrap .price_set {
  position: relative;
  opacity: 0.33;
  filter: Alpha(opacity=33);
}
.columns.plans .column .inner .plan_wrap .price_set::after {
  width: 100%;
  height: 2px;
  background: var(--colorBlack);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
}