@charset "utf-8";
/* CSS Document */

/* -------------------------
/* Created date: --
/* Created user: --
/* Last up date: 2022.09.13
/* Last up date user: yamaguchi
/* for sp and pc
--------------------------*/
/* ======== newschool Crs start ================*/
/* Bottom Block --------------------------- */
.scCrsIntro {
  position: relative;
  margin: 0 auto;
  padding: var(--paddingMin) 0;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0 2px, rgba(255, 255, 255, 0) 3px 6px), var(--usuGreen);
}

.scCrsIntro::before {
  content: '';
  top: 100%;
  left: 50%;
  width: 60px;
  height: 30px;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0 2px, rgba(255, 255, 255, 0) 3px 6px), var(--usuGreen);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  transform: translate(-50%, 0);
}

.scCrs .inPageLinks {
  margin: 0 auto 30px;
}

.scCrs .inPageLinks p {
  margin: 0 auto 30px;
  max-width: var(--contentsWidth);
  text-align: center;
  font-weight: bold;
  color: rgb(var(--naviKoiBlue));
}

.scCrs .inPageLinks p span {
  position: relative;
  margin: 0 auto;
  padding-right: 15px;
  display: inline-block;
  font-size: 2rem;
}

.scCrs .inPageLinks p span::before {
  content: '';
  top: 50%;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 0 7px;
  border-color: rgb(var(--naviKoiBlue)) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
  transform: translate(0, -50%);
}

.scCrs .inPageLinks ul {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0 auto;
  width: calc(100% - 30px);
  max-width: var(--contentsWidth);
  border-radius: 0.5rem;
}

.scCrs .inPageLinks li[data-code="course_all"] {
  width: 100%;
}

.scCrs .inPageLinks li h4 {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  min-height: 100%;
}

.scCrs .inPageLinks li a,
.scCrs .inPageLinks li span {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  justify-content: center;
  align-items: center;
  padding: 10px;
  height: 100%;
  background: #ccc;
  border-radius: 0.5rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}

.scCrs .inPageLinks li span {
  color: #fff;
}

.scCrs .inPageLinks li a {
  padding: 5px 1.75em 5px 10px;
  box-shadow: 0 0 0 1px rgb(var(--gsGreen)) inset;
  transition: all 0.15s 0s ease;
}

.scCrs .inPageLinks li.on a {
  background: #fff;
}

.scCrs .inPageLinks li a::before {
  content: '';
  top: 50%;
  right: 0.5em;
  width: 0.55em;
  height: 0.55em;
  border-right: solid 2px rgb(var(--gsGreen));
  border-bottom: solid 2px rgb(var(--gsGreen));
  font-weight: bold;
  transform: translate(0, -50%) rotate(45deg);
  transition: all 0.25s 0s ease;
}

.scCrs .yobikake {
  margin: 0 auto;
  padding: var(--paddingMid) var(--paddingMinMin) 0;
  text-align: center;
}

.scCrs .yobikake span {
  line-height: 1.8;
}

.scCrs .scCrsTitle a {
  position: relative;
  padding: 0 1.25em 0 0;
}

.scCrs .scCrsTitle a::before {
  content: '';
  top: 50%;
  right: 0.75em;
  width: 0.6em;
  height: 0.6em;
  border-right: solid 2px #fff;
  border-bottom: solid 2px #fff;
  font-weight: bold;
  transform: translate(0, -50%) rotate(-45deg);
  transition: all 0.25s 0s ease;
}

.scCrs .scCrsLists {
  margin: 0 auto var(--paddingMax);
}

.scCrs .scCrsList {
  margin: var(--paddingMid) auto 0;
  max-width: var(--contentsWidth);
}

.scCrsList>li {
  padding-bottom: 10px;
  background: var(--honnoriGreen);
  box-shadow:var(--dropShadowBokashi);
}

.scCrsList .scCrsTitle {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 auto var(--paddingMinMin);
  padding: 0 var(--paddingMinMin);
  width: 100%;
  font-size: 1.8rem;
}

.scCrsList .scCrsTitle h4 {
  position: relative;
  margin: 0 auto;
  padding: 0.5em 20px;
  width: 100%;
  background: rgb(var(--gsGreen));
  border-radius: 0 0 1rem 1rem;
  font-size: 2rem;
  line-height: 1.4;
  font-weight: bold;
  color: #fff;
  word-break: break-all;
  transform: translate(0, -6px);
}

.scCrsList .scCrsTitle h4::before {
  content: '';
  bottom: 100%;
  left: 10px;
  width: 1.5em;
  height: 1.5em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58.91 42.51"><path fill="rgba(255,255,255,1)" fill-rule="evenodd" d="M58.2,14.79,55.77,15.9V26.83A1.63,1.63,0,0,1,56.05,30l1.39,9.17H51L52.43,30a1.63,1.63,0,0,1,.28-3.19V17.31L32.13,26.77a6.46,6.46,0,0,1-5.35,0L.71,14.79A1.25,1.25,0,0,1,0,13.68a1.22,1.22,0,0,1,.71-1.11L26.78.59a6.36,6.36,0,0,1,5.35,0l26.07,12a1.22,1.22,0,0,1,.71,1.11A1.25,1.25,0,0,1,58.2,14.79ZM29.46,31.7a8.88,8.88,0,0,0,3.72-.82L45.93,25V36.7c0,2.56-7.75,5.81-16.47,5.81S13,39.26,13,36.7V25l12.75,5.86A8.89,8.89,0,0,0,29.46,31.7Z" /></svg>') center / contain no-repeat;
  filter: drop-shadow(0 2px 0 rgb(var(--gsGreen))) drop-shadow(0 -1px 0 rgb(var(--gsGreen))) drop-shadow(2px 0 0 rgb(var(--gsGreen))) drop-shadow(-2px 0 0 rgb(var(--gsGreen)));
  transform: translate(0, 0.6em);
}

.scCrsList .scCrsTitle h4::after {
  content: '';
  top: 0;
  left: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 0 5px;
  border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) #999;
}


.scCrsList .scCrsTitle .faculty_memo {
  display: inline-block;
  margin: 5px;
  color: rgb(var(--gsGreen));
  font-weight: bold;
  font-size: 1.2rem;
}

.scCrsList .scCrsTitle .scContract {
  width: 100%;
  text-align: right;
}

.scCrsList .scCrsTitle .scContract .icon {
  position: relative;
  padding: 3px 1.5em 3px 5px;
}

.scCrsList .scCrsTitleThmbWrap {
  margin: 0 auto 25px;
  padding: var(--paddingMinMin);
  background: #fff;
}

.scCrsList .scCrsTitleThmb {
  display: table;
  margin: 0;
  width: 100%;
  --thmbWidth: 120px;
  text-align: left;
}

.scCrsList .scCrsTitleThmb .itemThmb,
.scCrsList>li ul>li .itemContent .itemThmb {
  width: var(--thmbWidth);
  overflow: hidden;
  float: left;
  padding: 0 15px 15px 0;
}

.scCrsList .scCrsTitleThmb .itemThmb img,
.scCrsList>li ul>li .itemContent .itemThmb img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  object-fit: cover;
}

.scCrsList .scCrsTitleThmb .scReadTitle {
  padding: 0 0 5px;
  color: rgb(var(--gsGreen));
  font-weight: bold;
  line-height: 1.6;
  font-size: 1.6rem;
}

.scCrsList .scCrsTitleThmb .scReadText {
  line-height: 1.8;
}

.scCrsList .scReadText span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 3.6em;
  line-height: 1.8;
  font-size: 1.3rem;
  overflow: hidden;
}

.scCrsList .itemMore {
  position: relative;
  padding: 15px 15px 0;
  width: 100%;
  text-align: right;
}

.scCrsList .itemMore::before {
  content: '';
  top: 20px;
  right: 3px;
  width: 0.5em;
  height: 0.5em;
  border-bottom: solid 1px #333;
  border-right: solid 1px #333;
  transform: rotate(-45deg);
}

.scCrsList .itemMore span {
  display: inline-block;
  padding: 2px 3px;
  background: linear-gradient(to top, rgb(var(--naviCream)) 0px, rgb(var(--naviCream)) 7px, rgba(255, 255, 255, 0) 7px);
  font-weight: bold;
}

/* 第2階層 */
.scCrsList>li ul {
  position: relative;
  margin: 30px auto 0;
  padding: 0 var(--paddingMinMin) var(--paddingMinMin);
  background: var(--honnoriGreen);
}

.scCrsList>li ul::before {
  content: '';
  bottom: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 12px 0 12px;
  border-color: rgb(var(--gsGreen)) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
  transform: translate(-50%, -10px);
}

.scCrsList>li ul>li .itemContent {
  position: relative;
  z-index: 2;
  margin: 0 auto var(--paddingMinMin);
  width: calc(100% - 20px);
  background: #fff;
  border: solid 2px rgb(var(--gsGreen));
  box-shadow: 0 0 0 5px var(--usuGreen);
  border-radius: 1rem;
}

.scCrsList>li ul>li .itemContent .inner,
.scCrsList>li ul>li>ul>li .itemContent .inner {
  padding: var(--paddingMinMin);
  width: 100%;
  --thmbWidth: 90px;
}

.scCrsList>li ul>li .itemContent .itemThmb {
  position: relative;
  z-index: 2;
}

.scCrsList>li ul>li .itemContent .itemName {
  position: relative;
  z-index: 1;
  margin: 0 0 15px;
  padding: 0 1.5em 0 0;
  font-weight: bold;
  word-break: break-all;
  font-size: 1.8rem;
  line-height: 1.4;
  border-bottom: 3px solid var(--usuGreen);
}

.scCrsList>li ul>li .itemContent .itemName::before {
  content: '';
  bottom: 0;
  right: 0;
  width: 1.25em;
  height: 1.25em;
  background: var(--svgGakubouGreen);
  transform: translate(0, 2px);
}

.scCrsList>li ul>li .itemContent .scReadTitle {
  clear: both;
  padding: 5px 0;
  color: rgb(var(--gsGreen));
  font-weight: bold;
  line-height: 1.6;
}

.scCrsList>li ul>li .itemContent .scReadText {
  clear: both;
  line-height: 1.8;
}

.scCrsList>li ul>li .itemContent .scContract {
  clear: both;
  padding: 5px 0 15px;
}

.scCrsList .scContract span,
.scCrsListText .scContract span {
  display: inline-block;
  padding: 3px 10px;
  background: #fff;
  border: solid 1px #ccc;
  font-size: 1.2rem;
  font-weight: bold;
  word-break: break-all;
}

.scCrsList .scContract span,
.scCrsListText .scContract span {
  margin: 0 5px 5px 0;
}


/* 第3階層 */
.scCrsList>li>ul>li>ul {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 100%;
  margin: -20px 0 30px;
  padding: 15px 15px 0;
  background: #fff;
  border: none;
}

.scCrsList>li>ul>li>ul>li {
  position: relative;
  border-bottom: 3px solid var(--usuGreen);
}

.scCrsList>li>ul>li>ul>li:last-child {
  border-bottom: none;
}

.scCrsList>li>ul>li>ul>li .itemContent .itemName::before {
  content: none;
}

.scCrsList>li>ul>li>ul>li .itemContent {
  width: 100%;
  border: none;
  box-shadow: 0 0 0 0;
}

.scCrsList>li>ul>li>ul>li .itemContent .itemName {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  font-weight: bold;
  word-break: break-all;
  font-size: 1.6rem;
  line-height: 1.4;
  border-bottom: none;
}

.scCrsList>li>ul>li>ul>li .itemContent .inner {
  padding: 15px 7px;
}

/* 第4階層 */
.scCrsList>li>ul>li>ul>li ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 auto 30px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--usuGreen);
}

.scCrsList>li>ul>li>ul>li ul li {
  display: inline-block;
  padding: 5px;
  line-height: 1.4;
  font-size: 1.2rem;
  font-weight: normal;
  font-weight: 400;
}

.scCrsList>li>ul>li>ul>li ul li a {
  position: relative;
  display: block;
  padding: 0 25px 0 0;
}

.scCrsList>li>ul>li>ul>li ul li a::after {
  content: '';
  top: 50%;
  right: 5px;
  width: 0.6em;
  height: 0.6em;
  border-bottom: solid 1px rgb(var(--gsGreen));
  border-right: solid 1px rgb(var(--gsGreen));
  transform: translate(0, -50%) rotate(-45deg);
}

/* テキストのみのリスト */
.scCrsListTextWrap {
  margin: 0 auto;
}

.scCrsListText {
  margin: 0 auto;
  padding: 0 10px;
  max-width: var(--contentsWidth);
  background: #efefef;
}

.scCrsListText>ul {
  margin: 0 auto;
  background: #fff;
}

.scCrsListText>ul>li {
  padding: 0 15px;
  border-bottom: 10px solid #efefef;
  line-height: 1.8;
}

.scCrsListText li * {
  font-size: 1.3rem;
  line-height: 1.6;
  word-break: break-all;
}

.scCrsListText a {
  display: block;
}

.scCrsListText li .scCrsListTitle {
  padding: 15px 5px;
  border-bottom: 2px solid #efefef;
}

.scCrsListText li .scCrsListTitle p {
  position: relative;
  padding: 0 0 0 1.25em;
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: bold;
}

.scCrsListText li .scCrsListTitle p::after {
  content: '';
  top: 10px;
  left: 0;
  width: 1em;
  height: 1em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58.91 42.51"><path fill="rgba(102,102,102,1)" fill-rule="evenodd" d="M58.2,14.79,55.77,15.9V26.83A1.63,1.63,0,0,1,56.05,30l1.39,9.17H51L52.43,30a1.63,1.63,0,0,1,.28-3.19V17.31L32.13,26.77a6.46,6.46,0,0,1-5.35,0L.71,14.79A1.25,1.25,0,0,1,0,13.68a1.22,1.22,0,0,1,.71-1.11L26.78.59a6.36,6.36,0,0,1,5.35,0l26.07,12a1.22,1.22,0,0,1,.71,1.11A1.25,1.25,0,0,1,58.2,14.79ZM29.46,31.7a8.88,8.88,0,0,0,3.72-.82L45.93,25V36.7c0,2.56-7.75,5.81-16.47,5.81S13,39.26,13,36.7V25l12.75,5.86A8.89,8.89,0,0,0,29.46,31.7Z" /></svg>') center / contain no-repeat;
  transform: translate(0, -50%);
}

.scCrsListText li a {
  position: relative;
  display: block;
  padding-right: 15px;
}

.scCrsListText li a p {
  color: rgb(var(--naviKoiBlue));
}

.scCrsListText li a::before {
  content: '';
  top: 50%;
  right: 5px;
  width: 0.65em;
  height: 0.65em;
  border-bottom: solid 1px rgb(var(--naviKoiBlue));
  border-right: solid 1px rgb(var(--naviKoiBlue));
  transform: translate(0, -50%) rotate(-45deg);
}

.scCrsListText ul li .scContract span {
  padding: 3px 5px;
  background: #efefef;
  border-color: #ccc;
  line-height: 1.2;
  font-size: 1.1rem;
}

/* 第2階層*/
.scCrsListText>ul>li>ul {
  margin: 0 0 10px 0;
}

/* 第3、4階層*/
.scCrsListText>ul>li>ul>li>ul,
.scCrsListText>ul>li>ul>li>ul>li>ul {
  margin: 5px 0 5px 0;
}

.scCrsListText>ul>li>ul>li,
.scCrsListText>ul>li>ul>li>ul>li,
.scCrsListText>ul>li>ul>li>ul>li>ul>li {
  position: relative;
  padding: 5px 0 5px 22px;
}

.scCrsListText>ul>li>ul>li::before,
.scCrsListText>ul>li>ul>li>ul>li::before,
.scCrsListText>ul>li>ul>li>ul>li>ul>li::before {
  content: '';
  top: 6px;
  left: 12px;
  width: 8px;
  height: 10px;
  border-left: 1px solid #888;
  border-bottom: 1px solid #888;
}

/* 間仕切り */
.scCrsListText>ul>li>ul>li+li,
.scCrsListText>ul>li>ul>li>ul>li {
  border-top: 2px solid #efefef;
}

.scCrsListText>ul>li>ul>li>ul>li {
  border-top: 1px dashed #efefef;
}

.scCrs .scCrsListMore {
  cursor: pointer;
  margin: 0 auto;
  padding: 10px 15px 12px;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0 6px, rgba(255, 255, 255, 0) 6px 12px), rgb(var(--gsGreen));
  width: 100%;
  max-width: var(--contentsWidth);
  border-top: 0;
  text-align: center;
  transition: all 0.25s 0s ease;
}

.scCrs .scCrsListMore .moreDown {
  position: relative;
  display: inline-block;
  padding: 0 30px 0 0;
  text-align: center;
  font-weight: normal;
  font-weight: 400;
  font-size: 1.3rem;
  color: #fff;
  transition: all 0.25s 0s ease-in-out;
  font-weight: bold;
}

.scCrs .scCrsListMore .moreDown::before {
  content: '';
  top: 50%;
  right: 0.75em;
  width: 0.65em;
  height: 0.65em;
  border-bottom: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: translate(0, -50%) rotate(45deg);
  transition: all 0.25s 0s ease-out;
}

.scCrs .scCrsListMore+.scCrsListText {
  display: none;
}

.scCrs .scCrsListMore.on {
  background: var(--honnoriGreen);
  border-bottom: 1px solid var(--usuGreen);
  box-shadow: none;
  border-top: solid 1px #fff;
}


/* scRelation */
.scRelation {
  position: relative;
  margin: 0 auto;
  padding: var(--paddingMax) 0 0;
}

 .scRelation .relatedTitle{
  margin: 0 auto;
  text-align: center;
}

.scRelation .relatedTitle span {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 0 5px 5px;
  min-width: 60%;
  border-bottom: 3px solid rgb(var(--gsGreen));
  font-size: 1.6rem;
  color: rgb(var(--gsGreen));
  transform: translate(0,3px);
}

.scRelation .inner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: var(--paddingMinMin) 0 var(--paddingMax);
  background: url(../../../img/page/newschool/bg_machinami.svg) center bottom / 500px auto repeat-x, var(--usuGreen);
  text-align: center;
}

.scRelation .scRelationText {
  display: inline-block;
  margin: 0 auto;
  padding-bottom: 15px;
  width: 100%;
  max-width: 600px;
  min-height: 120px;
  background: url('../../../img/page/newschool/img_jk.png') right bottom / 155px auto no-repeat;
}

.scRelation .scRelationText p {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  justify-content: center;
  align-items: center;
  margin: 15px 100px 0 5px;
  padding: 10px;
  min-height: 4em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 509.54 112.69"><path fill="rgba(255,255,255,1)" fill-rule="evenodd" d="M485.1,28.46A28,28,0,0,0,437,8.78a28,28,0,0,0-40.6-.12,28,28,0,0,0-40.49,0,28,28,0,0,0-40.48,0,28,28,0,0,0-40.49,0,28,28,0,0,0-40.48,0,28,28,0,0,0-40.49,0,28,28,0,0,0-40.49,0,28,28,0,0,0-40.48,0,28,28,0,0,0-40.62.13A27.92,27.92,0,0,0,48.25.59h0a28,28,0,0,0-24,28.07,28,28,0,0,0,.12,55.52,28,28,0,0,0,48.1,19.74,28,28,0,0,0,40.61.13,28,28,0,0,0,40.49,0,28,28,0,0,0,40.48,0,28,28,0,0,0,40.49,0A28,28,0,0,0,275,104a28,28,0,0,0,40.49,0A28,28,0,0,0,356,104a28,28,0,0,0,40.49,0,28,28,0,0,0,40.61-.14,28,28,0,0,0,48.1-19.79,28,28,0,0,0,24.33-27.76v-.23A28,28,0,0,0,485.1,28.46Z"/></svg>') center / contain no-repeat;
  filter: drop-shadow(0 2px 0 #999);
  font-weight: bold;
  text-align: center;
  font-size: 2rem;
}

.scRelation .scRelationText p::before {
  content: '';
  top: 80%;
  right: 3%;
  width: 0.8em;
  height: 0.6em;
  background: #fff;
  border-radius: 50%;
}

.scRelation .scRelationText p::after {
  content: '';
  top: 90%;
  right: 0;
  width: 0.5em;
  height: 0.4em;
  background: #fff;
  border-radius: 50%;
}

.scRelation .scRelationText span {
  line-height: 1.2;
  font-size: 1.8rem;
}

.scRelation .scRelationText span span {
  font-size: 2.4rem;
  color: rgb(var(--ocYellow));
}


.scRelation .scRelationList {
  display: grid;
  grid-template-columns: 100%;
  gap: 15px;
  margin: 0 auto;
  padding: 0 var(--paddingMinMin);
  max-width: 500px;
}

.scRelation .scRelationList li,
.scRelation .scOtherList li {
  position: relative;
  background: #fff;
  box-shadow: var(--btnSahdow);
  border-radius: 1rem;
}

.scRelation .scRelationList li::before,
.scRelation .scOtherList li::before {
  content: '';
  top: 50%;
  right: 10px;
  width: 0.65em;
  height: 0.65em;
  border-bottom: solid 2px #333;
  border-right: solid 2px #333;
  transform: translate(0, -50%) rotate(-45deg);
}

.scRelation .scOtherList li::before {
  border-color: #fff;
}

.scRelation .scRelationList li a {
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  justify-content: center;
  align-items: center;
  padding: 0 20px 0 50px;
  width: 100%;
  min-height: 50px;
  border-radius: 1rem;
  line-height: 1.4;
  font-weight: bold;
  text-align: left;
}

.scRelation .scOtherList li a {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  min-height: 50px;
  border-radius: 1rem;
  line-height: 1.4;
  font-weight: bold;
  text-align: left;
  background: #fff;
  font-size: 1.6rem;
  color: rgb(var(--gsGreen));
}

.scRelation .scOtherList li a::before {
  content: '';
  top: 50%;
  right: 10px;
  width: 0.65em;
  height: 0.65em;
  border-bottom: solid 2px rgb(var(--gsGreen));
  border-right: solid 2px rgb(var(--gsGreen));
  transform: translate(0, -50%) rotate(-45deg);
}


.scRelation .scRelationList li a::before {
  content: '';
  top: 50%;
  left: 0;
  width: 90px;
  height: 90px;
  background: rgb(var(--ocYellow));
  border-radius: 50%;
  transform: translate(-45px, -50%);
}

.scRelation .scRelationList li a::after {
  content: '';
  top: 50%;
  left: 8px;
  width: 26px;
  height: 26px;
  transform: translate(0, -50%);
}

.scRelation .scRelationList li a[href*="/event_top/"]::after {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66.22 52.01"><path fill="rgba(255,255,255,1)" fill-rule="evenodd" d="M66.13,22.67a.63.63,0,0,0-.2-.46.68.68,0,0,0-.47-.19l-14.22.07,0-10.13a.67.67,0,0,0-.67-.65l-9.14,0V1.2c0-.32-.87-.58-1.2-.58S39,.88,39,1.2V11.36l-7.72.05a.71.71,0,0,0-.48.19.64.64,0,0,0-.19.46l0,10.13-14.21.07a.67.67,0,0,0-.47.19.63.63,0,0,0-.2.46l.1,28.46a.63.63,0,0,0,.2.46.7.7,0,0,0,.47.18l18-.08,0-9.78a.64.64,0,0,1,.19-.46.74.74,0,0,1,.47-.2l11.74-.05a.7.7,0,0,1,.48.18.68.68,0,0,1,.19.46l0,9.78,18-.08a.65.65,0,0,0,.47-.2.64.64,0,0,0,.19-.45Zm-39.41,11a.65.65,0,0,1-.47.2l-4.62,0a.67.67,0,0,1-.47-.19.61.61,0,0,1-.2-.46V29.7a.66.66,0,0,1,.19-.46.7.7,0,0,1,.47-.19l4.62,0a.67.67,0,0,1,.47.19.62.62,0,0,1,.2.45v3.5A.64.64,0,0,1,26.72,33.63Zm11.36-.05a.7.7,0,0,1-.47.19l-4.62,0a.66.66,0,0,1-.47-.18.63.63,0,0,1-.2-.46v-3.5a.66.66,0,0,1,.19-.46A.7.7,0,0,1,33,29l4.62,0a.71.71,0,0,1,.47.19.63.63,0,0,1,.2.46v3.5A.66.66,0,0,1,38.08,33.58Zm2.86-11.47a3.49,3.49,0,1,1,3.59-3.51A3.54,3.54,0,0,1,40.94,22.11Zm8.5,11.41a.67.67,0,0,1-.47.2l-4.62,0a.71.71,0,0,1-.48-.19.64.64,0,0,1-.19-.45V29.59a.6.6,0,0,1,.19-.45.67.67,0,0,1,.47-.2l4.62,0a.67.67,0,0,1,.47.19.63.63,0,0,1,.2.46v3.5A.64.64,0,0,1,49.44,33.52Zm11.36-.05a.71.71,0,0,1-.48.19l-4.61,0a.7.7,0,0,1-.48-.18A.66.66,0,0,1,55,33l0-3.5a.63.63,0,0,1,.2-.46.67.67,0,0,1,.47-.19l4.62,0a.67.67,0,0,1,.47.18.69.69,0,0,1,.2.46V33A.66.66,0,0,1,60.8,33.47Z"/><polygon fill="rgba(255,255,255,1)" fill-rule="evenodd" points="42.61 0.61 42.61 7.66 49.85 4.01 42.61 0.61"/><polygon fill="rgba(255,255,255,1)" fill-rule="evenodd" points="25.59 11.79 22.25 0 18.54 1.53 23.11 12.81 25.59 11.79"/><polygon fill="rgba(255,255,255,1)" fill-rule="evenodd" points="8.22 6.49 16.37 17.25 18.56 15.72 11.51 4.18 8.22 6.49"/><polygon fill="rgba(255,255,255,1)" fill-rule="evenodd" points="0 15.56 10.86 22.44 12.63 20.49 2.65 12.64 0 15.56"/></svg>') center / contain no-repeat;
}

.scRelation .scRelationList li a[href*="/community/"]::after {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.04 52.77"><path fill="rgba(255,255,255,1)" fill-rule="evenodd" d="M54,13.72a21.27,21.27,0,0,0-5.8-7.35C43.2,2.29,36.25,0,28.11,0,19.53,0,12.51,2.41,7.6,6.55A21.05,21.05,0,0,0,0,22.92,20.73,20.73,0,0,0,2.61,33.4a19.71,19.71,0,0,0,6.77,6.87c5.46,3.4,12.3,4.64,18.73,4.65A11.42,11.42,0,0,1,34,46.52h0c.19.09.69.38,1.34.76l2.33,1.36,5,2.92,1.4.82,0,0,0,0a2.72,2.72,0,0,0,2.92-.23h0a2.71,2.71,0,0,0,1.06-2.14,3.18,3.18,0,0,0-.07-.62L46.28,42a21.42,21.42,0,0,0,7.19-7.86A23.55,23.55,0,0,0,56,23.05,21.5,21.5,0,0,0,54,13.72ZM49.73,32.18a17.37,17.37,0,0,1-6.15,6.55h0l-.13.06a3.77,3.77,0,0,0-.65.43,2.78,2.78,0,0,0-.59.72,2.67,2.67,0,0,0-.34,1.31A3,3,0,0,0,42,42h0l1.17,5-4.94-2.91c-1-.58-1.77-1-2.12-1.22a15.73,15.73,0,0,0-8-2.14,38.43,38.43,0,0,1-9.83-1.21A22.76,22.76,0,0,1,10,35.59a14.88,14.88,0,0,1-3.75-4.27,16.53,16.53,0,0,1-2-8.4A16.79,16.79,0,0,1,10.33,9.75c4-3.37,10-5.55,17.78-5.55a29.79,29.79,0,0,1,14,3.15,18.17,18.17,0,0,1,8.07,8.16,17.3,17.3,0,0,1,1.66,7.54A19.37,19.37,0,0,1,49.73,32.18ZM41.26,20a3.22,3.22,0,1,0,3.22,3.21A3.22,3.22,0,0,0,41.26,20ZM28.68,20a3.22,3.22,0,1,0,3.22,3.21A3.22,3.22,0,0,0,28.68,20ZM16.09,20a3.22,3.22,0,1,0,3.23,3.21A3.22,3.22,0,0,0,16.09,20Z"></path></svg>') center / contain no-repeat;
}

.scRelation .scOtherList {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin: 0 auto;
  padding: var(--paddingMinMin) var(--paddingMinMin) 0;
}

.scRelation .scOtherList li {
  position: relative;
  width: calc(50% - 15px / 2);
  max-width: 300px;
  background: #fff;
  box-shadow: var(--btnSahdow);
  border-radius: 1rem;
}

.scCrs .bigBtn .addBoxBtn{
  margin: var(--paddingMinMin) auto 0;
}

.scCrs .bigBtn .addBoxBtn a{
  font-size: 1.5rem;
}

@media screen and (min-width: 768px) {

  /* -------------------------
  /* for pc
  --------------------------*/
  .scCrs .inPageLinks ul {
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .scCrs .inPageLinks ul li {
    width: calc(100% / 3 - 3px);
  }

  .scCrsList .scCrsTitleThmb {
    --thmbWidth: 215px;
  }

  .scCrsList .scCrsTitleThmbWrap {
    border-right: solid 15px var(--honnoriGreen);
    border-left: solid 15px var(--honnoriGreen);
  }

  .scCrsList .scReadText {
    padding: 15px 0;
  }

  .scCrs .inPageLinks a:hover {
    transform: translate(0, 5px);
    opacity: 1;
  }

  .scCrsList .scCrsTitleThmb {
    display: table;
    margin: 0;
    width: 100%;
    --thmbWidth: 200px;
    text-align: left;
  }

  .scCrsList>li>ul>li>ul>li{
    padding: 15px;
  }

  .scCrsList>li ul>li .itemContent .inner,
  .scCrsList>li ul>li>ul>li .itemContent .inner {
    --thmbWidth: 200px;
  }

  .scCrsList>li>ul>li>ul>li ul li a {
    padding: 3px 30px 3px 10px;
    border-radius: 0.5rem;
  }

  .scCrsList>li>ul>li>ul>li>ul a:hover {
    opacity: 1;
    background: var(--usuGreen);
    transform: translate(5px, 0);
    transition: all 0.15s 0s ease;
  }

  .scCrsListText>ul>li {
    border-bottom: 15px solid #efefef;
  }

  .scCrsListText li .scCrsListTitle {
    padding: 15px 0 15px 5px;
  }

  .scCrsListText li .scCrsListTitle p {
    padding: 0 10px 0 1.25em;
  }

  .scCrsListText li p {
    display: inline-block;
    padding: 0 10px 0 0;
  }

  .scCrsListText li .scContract {
    display: inline-block;
  }

  /* 第3、4階層*/
  .scCrsListText>ul>li>ul>li>ul,
  .scCrsListText>ul>li>ul>li>ul>li>ul {
    margin: 15px 0 0 0;
  }

  .scCrsListText>ul>li>ul>li,
  .scCrsListText>ul>li>ul>li>ul>li,
  .scCrsListText>ul>li>ul>li>ul>li>ul>li {
    padding: 15px 0 15px 30px;
  }

  .scCrsListText>ul>li>ul>li::before,
  .scCrsListText>ul>li>ul>li>ul>li::before,
  .scCrsListText>ul>li>ul>li>ul>li>ul>li::before {
    top: 15px;
    left: 15px;
    width: 12px;
    height: 12px;
  }

  .scCrsListText ul li .scContract span {
    font-size: 1rem;
  }

  .scRelation .scRelationList {
    margin: 0 auto;
  }
}