#storyIndex,
#storyIndex *,
#storyIndex *::before,
#storyIndex *::after {
  box-sizing: border-box;
}

#storyIndex,
#storyIndex a,
#storyIndex a::before,
#storyIndex a::after {
  text-decoration: none;
}

picture img {
  width: 100%;
}

.spOnly {
  display: none;
}

.pcOnly {
  display: block;
}

.topMagin60 {
  margin-top: 60px;
}

.topMagin40 {
  margin-top: 40px;
}

.topMagin20 {
  margin-top: 20px;
}

@media screen and (max-width: 960px) {
  .spOnly {
    display: block;
  }

  .pcOnly {
    display: none;
  }

  .topMagin60 {
    margin-top: 40px;
  }

  .topMagin40 {
    margin-top: 20px;
  }

  .topMagin20 {
    margin-top: 10px;
  }
}

#footerFixed {
  position: fixed;
  width: 100%;
  background: var(--color-white);
  bottom: 0;
  left: 0;
  z-index: 10;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}

#footerFixed.is-show {
  opacity: 1;
  visibility: visible;
}

.footerFixedFlex {
  width: 100%;
  display: flex;
  margin: 0 auto;
  justify-content: center;
  gap: 20px;
}

#storyContainer {
  padding: 0 20px;
}

.storyContentTitle {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.storyContentTitle h2 {
  color: var(--color-blue);
}

.storyContentTitle h2::before {
  content: '●';
  color: var(--color-green);
  margin-right: 10px;
  font-size: var(--font-size-20);
  vertical-align: middle;
}

.storyContentTitle p {
  color: var(--color-gray);
  margin-left: 20px;
}

.storySectionFlex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.storySectionFlex::after {
  content: '';
  width: calc(50% - 10px);
}

.storySectionFlex>li {
  width: calc(50% - 10px);
}

.storySectionFlexLink {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px;
  border-radius: 10px;
  background: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-gray);
}

.storySectionFlexLink:hover h4,
.storySectionFlexLink:hover p {
  color: var(--color-blue);
}

.storySectionFlexLink>h4 {
  margin-bottom: 20px;
}

.storySectionFlexLink ul {
  width: 100%;
}

.storySectionFlexLink ul li {
  width: 100%;
}

.storyPosition,
.storyName {
  margin-bottom: 10px;
  width: 100%;
}

.storyAddress {
  margin-bottom: 30px;
}

.storyName::before {
  position: relative;
  content: '';
  width: 20px;
  height: 20px;
  background: var(--color-orange);
  display: inline-block;
  border-radius: 50%;
  top: 2px;
  transition: all .5s;
}

.storySectionFlexLink:hover .storyName::before {
  background: var(--color-blue);
  transition: all .5s;
}

.storySectionFlexLink>ul {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.storySectionFlexImg {
  position: relative;
  margin-top: auto;
}

.storySectionFlexImgWrap {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 100;
  border-radius: 10px;
  overflow: hidden;
}

.storySectionFlexImgWrap img {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all .5s ease;
}

#container img {
  max-width: none;
}

.storySectionFlexLink:hover .storySectionFlexImgWrap img {
  width: calc(100% + 15%);
  transition: all .5s ease;
}


.storyTagWrap {
  width: 100%;
  display: flex;
  justify-content: end;
  font-size: var(--font-size-12);
  color: var(--color-white);
  margin-bottom: 20px;
}

.storyTag {
  padding: 4px 8px;
  background: var(--color-gray);
  border-radius: 500px;
}

.storySectionFlexLink:hover .storyTag {
  color: var(--color-white);
}

.viewMoreBtn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 40px;
  height: 40px;
  background: var(--color-white);
  border-radius: 999px;
  overflow: hidden;
  text-decoration: none;
  transition: width .4s ease;
  border: 1px solid var(--color-blue);
  bottom: 10px;
  right: 10px;
}

.storySectionFlexLink:hover .viewMoreBtn {
  width: 180px;
  background: var(--color-blue);
}

.otherArticlesFlex .viewMoreBtn {
  width: 40px;
  height: 40px;
}

/* VIEW MORE */
.viewMoreBtn__text {
  color: var(--color-blue);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(20px);
  margin-right: 14px;
  transition:
    opacity .3s ease,
    transform .4s ease;
}

.storySectionFlexLink:hover .viewMoreBtn__text {
  opacity: 1;
  transform: translateX(0);
  color: var(--color-white);
}

/* 丸アイコン */
.viewMoreBtn__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  position: relative;
}

/* ＞ を疑似要素2本で作成 */
.viewMoreBtn__icon::before,
.viewMoreBtn__icon::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  background: var(--color-blue);
  border-radius: 999px;
  left: 50%;
  top: 50%;
  transform-origin: right center;
  transition: .3s;
}

.viewMoreBtn__icon::before {
  transform:
    translate(-50%, -50%) rotate(45deg);
}

.viewMoreBtn__icon::after {
  transform:
    translate(-50%, -50%) rotate(-45deg);
}

/* ホバー時 */
.storySectionFlexLink:hover .viewMoreBtn__icon {
  transform: translateX(2px);
}

.storySectionFlexLink:hover .viewMoreBtn__icon::before,
.storySectionFlexLink:hover .viewMoreBtn__icon::after {
  background: var(--color-white);
}

@media screen and (max-width:960px) {
  .storyContentTitle {
    align-items: start;
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 40px;
  }

  .storyContentTitle h2 {
    color: var(--color-blue);
  }

  .storyContentTitle h2::before {
    content: '●';
    color: var(--color-green);
    margin-right: 10px;
    font-size: var(--font-size-20);
    vertical-align: middle;
  }

  .storyContentTitle p {
    color: var(--color-gray);
    margin-left: 20px;
  }

  .storySectionFlex>li {
    width: 100%;
  }

  .viewMoreBtn {
    width: 180px;
  }

  /* VIEW MORE */
  .viewMoreBtn__text {
    opacity: 1;
    transform: translateX(0);
  }

  .storyTagWrap {
    font-size: var(--font-size-10);
  }
}

/* Story インタビューCSS */
#storyIndex {
  padding-bottom: 140px;
}

.storyHeader {
  position: relative;
  margin-bottom: 120px;
}

.storyHeader h1 {
  margin-bottom: 40px;
}

@media screen and (max-width: 960px) {
  .storyHeader h1 {
    margin-bottom: 20px;
  }
}

.storyHeaderMv {
  position: relative;
  width: 100%;
  aspect-ratio: 1332 / 780;
  overflow: hidden;
  border-radius: 20px;
}

.storyHeaderMv img {
  width: 100%;
}

.storyHeaderMvText {
  position: absolute;
  right: 20px;
  bottom: -50px;
  display: inline-block;
  padding: 30px;
  background: var(--color-bg_blue);
  border-radius: 10px;
  width: 460px;
}

.storyHeaderMvText h4 {
  margin-bottom: 20px;
}

.storyHeaderMvText h3 {
  margin-top: 10px;
}

.storyHeaderMvText h4::before {
  content: '●';
  font-size: var(--font-size-10);
  color: var(--color-green);
  margin-right: 10px;
  position: relative;
  top: -2px;
}

.storyHeaderMvTextFlex {
  display: flex;
  gap: 10px;
}

.storyHeaderMvTextAddress {
  margin-top: 10px;
}

.storyMainText {
  width: 100%;
  padding: 0 124px;
}

.MainTextWrap img {
  width: 100%;
}

.MainTextWrap+.MainTextWrap {
  margin-top: 60px;
}

.MainTextWrap h2 {
  position: relative;
  margin-bottom: 20px;
  padding-left: 1.5em;
}

.MainTextWrap h2::before {
  content: '─';
  position: absolute;
  top: 0;
  left: 0;
  margin-right: 10px;
}

.MainTextWrap>p::before {
  content: '';
  position: relative;
  display: inline-block;
  margin-right: 1em;
}

.MainTextWrap>p+p {
  margin-top: 10px;
}

.MainTextProfile {
  padding: 20px;
  border: 1px solid var(--color-gray);
  border-radius: 10px;
}

.MainTextProfile+.MainTextProfile {
  margin-top: 20px;
}

.MainTextProfile p+p {
  margin-top: 10px;
}

.MainTextImg {
  margin-top: 20px;
  border-radius: 20px;
}

.linkSection {
  width: 100%;
  padding: 0 124px;
  margin-top: 60px;
}

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

.linkSectionFlex li {
  width: 100%;
}

.interviewButton {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  padding: 20px 70px 20px 40px;
  border-radius: 10px;
  background: var(--color-blue);
  color: var(--color-white);
  transition: all .4s;
  border: 1px solid transparent;
  letter-spacing: .005em;
}

.interviewButton:visited {
  color: var(--color-white);
}

.interviewButton:link {
  color: var(--color-white);
}

.interviewButton:hover {
  background: var(--color-white);
  color: var(--color-blue);
  transition: all .4s;
  border: 1px solid var(--color-blue);
}

.considerButton {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  padding: 50px 110px 50px 40px;
  border-radius: 10px;
  background: var(--color-green);
  color: var(--color-white);
  transition: all .4s;
  border: 1px solid transparent;
  letter-spacing: .005em;
  margin-top: 40px;
}

.considerButton:link {
  color: var(--color-white);
}

.considerButton:visited {
  color: var(--color-white);
}

.considerButton:hover {
  background: var(--color-white);
  color: var(--color-green);
  transition: all .4s;
  border: 1px solid var(--color-green);
}

@media screen and (max-width: 960px) {
  .considerButton {
    padding: 20px 20px 20px 30px;
  }
}

.kochiButton {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  padding: 60px 110px 60px 40px;
  border-radius: 10px;
  background: var(--color-orange);
  color: var(--color-white);
  transition: all .4s;
  border: 1px solid transparent;
  letter-spacing: .005em;
  margin-top: 20px;
}

.kochiButton:link {
  color: var(--color-white);
}

.kochiButton>span {
  color: var(--color-white);
  transition: all .4s;
  margin-right: 10px;
}

.kochiButton:hover>span {
  color: var(--color-orange);
  transition: all .4s;
}

.kochiButton:visited {
  color: var(--color-white);
}

.kochiButton:hover {
  background: var(--color-white);
  color: var(--color-orange);
  transition: all .4s;
  border: 1px solid var(--color-orange);
}

/* やじるしボタン */
.storyArrowBtn {
  display: inline-flex;
  text-decoration: none;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.storyarrowCircle {
  position: relative;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-white);
  transition:
    background .4s ease,
    border-color .4s ease;
}

.considerButton .storyarrowCircle,
.kochiButton .storyarrowCircle {
  width: 50px;
  height: 50px;
}

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

  .considerButton .storyarrowCircle,
  .kochiButton .storyarrowCircle {
    width: 35px;
    height: 35px;
  }
}

.storyArrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  transition:
    transform .4s cubic-bezier(.22, 1, .36, 1),
    color .4s ease;
}

.considerButton .storyArrow,
.kochiButton .storyArrow {
  width: 25px;
  height: 25px;
}

.interviewButton .storyArrow {
  color: var(--color-blue);
}

.considerButton .storyArrow {
  color: var(--color-green);
}

.kochiButton .storyArrow {
  color: var(--color-orange);
}

.interviewButton:hover .storyarrowCircle {
  background: var(--color-blue);
}

.considerButton:hover .storyarrowCircle {
  background: var(--color-green);
}

.kochiButton:hover .storyarrowCircle {
  background: var(--color-orange);
}

.interviewButton:hover .storyArrow,
.considerButton:hover .storyArrow,
.kochiButton:hover .storyArrow {
  color: var(--color-white);
}


.storyArrowCurrent {
  transform: translate(-50%, -50%);
  transition: .55s cubic-bezier(.76, 0, .24, 1);
}

.storyArrowCurrentNext {
  transform: translate(-250%, -50%);
  transition: .55s cubic-bezier(.76, 0, .24, 1);
}

/* 右へ抜ける */
.interviewButton:hover .storyArrowCurrent,
.considerButton:hover .storyArrowCurrent,
.kochiButton:hover .storyArrowCurrent {
  transform: translate(250%, -50%);
  transition: .55s cubic-bezier(.76, 0, .24, 1);
}

/* 左から入る */
.interviewButton:hover .storyArrowCurrentNext,
.considerButton:hover .storyArrowCurrentNext,
.kochiButton:hover .storyArrowCurrentNext {
  transform: translate(-50%, -50%);
  transition: .55s cubic-bezier(.76, 0, .24, 1);
}

@media screen and (max-width: 960px) {
  #storyIndex {
    padding-bottom: 70px;
  }

  .storyHeaderMv {
    width: calc(100% + 40px);
    left: -20px;
    border-radius: 20px 20px 0 0;
  }

  .storyHeaderMvText {
    position: absolute;
    right: 0;
    bottom: -120px;
    border-radius: 10px;
    width: 100%;
  }

  .storyHeader {
    margin-bottom: 160px;
  }

  .storyMainText {
    padding: 0;
  }

  .MainTextWrap+.MainTextWrap {
    margin-top: 40px;
  }

  .MainTextWrap h2::before {
    content: '━';
    position: absolute;
    top: 2px;
    left: 0;
    margin-right: 1em;
  }

  .linkSection {
    padding: 0 20px;
  }

  .interviewButton {
    font-size: var(--font-size-18);
    padding: 20px 30px;
  }

  .kochiButton {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 30px;
  }

  .kochiButton>span {
    font-size: var(--font-size-32);
    width: 100%;
  }
}

/* guidance */
#guidanceContainer *,
#guidanceContainer *::before,
#guidanceContainer *::after {
  box-sizing: border-box;
  text-decoration: none;
}

.guidanceMv {
  position: relative;
}

.guidanceMv img {
  width: 100%;
}

.guidanceMvText {
  position: absolute;
  align-items: center;
  left: 0;
  bottom: 0;
  background: var(--color-white);
  border-radius: 0 20px 0 0;
  padding: 20px 60px 0 0;
}

.guidanceMvFlex {
  display: flex;
}

.guidanceMvText h1 {
  width: 100%;
}

.guidanceMvText h2 {
  color: var(--color-blue);
}

.guidanceMvText h2::before {
  content: '●';
  color: var(--color-green);
  margin-right: 10px;
  font-size: var(--font-size-20);
  vertical-align: middle;
}

.guidanceMvText p {
  color: var(--color-gray);
  margin-left: 20px;
}

#guidanceContent>section+section {
  margin-top: 60px;
}

.guidanceFaq+.guidanceFaq {
  margin-top: 10px;
}

.guidanceFaqSection {
  width: 100%;
  padding-right: 75px;
}

.guidanceFaqSection>h2 {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
  padding-left: 20px;
}

.guidanceFaqSection>h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 20px;
  width: 10px;
  background: var(--color-blue);
}

@media screen and (max-width: 960px) {
  .guidanceFaqSection>h2 {
    margin-bottom: 20px;
  }
}

.guidanceAnchorSection {
  width: 100%;
  padding-right: 75px;
}

.guidanceAnchorLinkFlex {
  display: flex;
  width: 100%;
  gap: 10px;
}

.guidanceAnchorLinkFlex li {
  display: flex;
  align-items: center;
  height: auto;
}

.guidanceAnchorLinkFlex a {
  position: relative;
  display: flex;
  width: 195px;
  height: 100%;
  padding: 25px 20px;
  background: var(--color-bg_blue);
  color: var(--color-blue);
  align-items: center;
  border-radius: 10px;
}

.guidanceAnchorLinkFlex a:hover {
  text-decoration: none;
  cursor: pointer;
}


.guidanceAnchorLinkFlex a::after {
  content: '↓';
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
}

.guidanceFaq {
  width: 100%;
}

.guidanceFaqButton {
  width: 100%;
  padding: 24px;
  background-color: var(--color-blue);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  border-radius: 20px;
  transition: all 1.2s;
}

.guidanceFaq.active .guidanceFaqButton {
  border-radius: 20px 20px 0 0;
  transition: transform .1s;
  position: relative;
}

.guidanceFaqTitle {
  display: block;
  text-align: left;
  padding-left: 40px;
  position: relative;
}

.guidanceFaqTitle::before {
  content: 'Q';
  font-size: 24px;
  position: absolute;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: var(--color-white);
  margin-right: 20px;
  top: -5px;
  left: 0;
}

.guidanceFaqIcon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  background: var(--color-white);
  transition: transform .55s cubic-bezier(.76, 0, .24, 1);
}

.guidanceFaqButton:hover .guidanceFaqIcon {
  transform: rotate(180deg);
  transition: all .5s;
  transition: transform .55s cubic-bezier(.76, 0, .24, 1);
}

.guidanceFaqAnswer {
  height: 0;
  overflow: hidden;
  transition: height .4s ease;
  border-radius: 0 0 20px 20px;
}

.guidanceFaq.active .guidanceFaqAnswer {
  border: 1px solid var(--color-blue);
}

.guidanceFaqAnswerInner {
  padding: 24px;
}

.guidanceFaqAnswerInnerText {
  padding-left: 40px;
  position: relative;
}

.guidanceFaqAnswerInnerText::before {
  content: 'A';
  position: absolute;
  font-size: 24px;
  top: -5px;
  left: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: var(--color-orange);
}

.guidanceFaqAnswerInnerText h4::before {
  content: '・';
}

.guidanceFaqAnswerInnerText h4::before {
  content: '・';
}

.guidanceFaqAnswerList,
.guidanceFaqAnswerList li+li {
  margin-top: 10px;
}

.guidanceFaqIcon::before {
  content: "";
  width: 14px;
  height: 2px;
  background: #007FC3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform .55s cubic-bezier(.76, 0, .24, 1);
}

.guidanceFaqIcon::after {
  content: "";
  width: 2px;
  height: 14px;
  background: #007FC3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform .55s cubic-bezier(.76, 0, .24, 1);
}

.guidanceFaq.active .guidanceFaqIcon::before {
  background: #007FC3;
}


/* 開いた時 */
.guidanceFaq.active .guidanceFaqIcon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(180deg);
}

/* 開いた時 */
.guidanceFaq.active .guidanceFaqIcon::before {
  transform: translate(-50%, -50%) rotate(180deg);
}


.qaAnswerInnerLink:link {
  color: var(--color-blue);
}

.qaAnswerInnerLink:visited {
  color: var(--color-blue);
}

.guidanceFaqList {
  margin-top: 10px;
}

.guidanceFaqList li+li {
  margin-top: 15px;
}

.textIcon {
  color: var(--color-black);
  background: var(--color-bg_blue);
  border-radius: 40px;
  padding: 6px 12px;
  margin-right: 5px;
}

.guidanceFaqLink {
  display: inline-flex;
  position: relative;
  color: var(--color-blue);
  margin-top: 10px;
  align-items: center;
}

.fapTel {
  margin-top: 10px;
}

.guidanceFaqLink>span {
  border-bottom: 1px solid var(--color-blue);
  margin-right: 5px;
}

.guidanceFaqLink:hover {
  color: var(--color-black);
  text-decoration: none;
}

.guidanceFaqLink:hover span {
  border-bottom: 1px solid var(--color-black);
  color: var(--color-black);
  text-decoration: none;
}

.guidanceFaqLink:hover:after {
  background: var(--color-black);
}

.guidanceFaqLink:hover::before {
  border-top: 2px solid var(--color-black);
  border-right: 2px solid var(--color-black);
}

.guidanceFaqInterview:link {
  color: var(--color-blue);
}

.guidanceFaqInterview {
  display: inline-block;
  position: relative;
  color: var(--color-blue);
  border-bottom: 1px solid var(--color-blue);
  margin-top: 5px;
}

.guidanceFaqInterview:hover {
  border-bottom: 1px solid var(--color-black);
  color: var(--color-black);
}

.guidanceFaqInterview::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 50%;
  width: 10px;
  height: 2px;
  background: var(--color-blue);
  transform: translateY(-50%);
}

.guidanceFaqInterview::before {
  content: "";
  position: absolute;
  right: -15px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-blue);
  border-right: 2px solid var(--color-blue);
  transform: translateY(-50%) rotate(45deg);
}

.guidanceFaqInterview:hover:after {
  background: var(--color-black);
}

.guidanceFaqInterview:hover::before {
  border-top: 2px solid var(--color-black);
  border-right: 2px solid var(--color-black);
}

.entrykochiButton {
  position: relative;
  display: flex;
  width: 100%;
  padding: 40px 40px 40px 40px;
  height: 100%;
  align-items: center;
  gap: 40px;
  border-radius: 10px;
  background: var(--color-yellow);
  color: var(--color-black);
  border: 1px solid transparent;
}

.entrykochiButton:link {
  color: var(--color-black);
}

.entrykochiButton:visited {
  color: var(--color-black);
}

.entrykochiButtonText span {
  line-height: 0.5px;
}

.entrykochiButton:hover {
  background: var(--color-white);
  border: 1px solid var(--color-yellow);
}

.gaibuIconCircle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-black);
}

.gaibuIconCircle {
  display: inline-flex;
  text-decoration: none;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.entrykochiButton:hover .gaibuIconCircle {
  background: var(--color-yellow);
  color: var(--color-black);
}

.modalMenuFlexLink li a {
  text-decoration: none;
}

.modalMenuFlexLink li a:link {
  text-decoration: none;
}

/* Relatedボタン */
.otherArticlesSection {
  width: 100%;
  padding-right: 75px;
}

.otherArticles {
  padding: 60px;
  background-color: var(--color-bg_green);
  border-radius: 20px;
}

.otherArticlesText {
  display: flex;
  align-items: center;
  color: var(--color-green);
}

.otherArticlesText::before {
  content: '●';
  color: var(--color-orange);
  font-size: var(--font-size-10);
}

.otherArticlesTitle {
  line-height: var(--font-line-160);
}

.otherArticlesFlex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.otherArticlesFlex li {
  width: calc(50% - 10px);
}

.otherArticlesFlex li a {
  position: relative;
  display: flex;
  line-height: var(--font-line-160);
  padding: 20px;
  background-color: var(--color-white);
  color: var(--color-black);
  border-radius: 10px;
  height: 100%;
}

.otherArticlesImgWrap {
  width: 120px;
  height: auto;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin-right: 20px;
}

.otherArticlesImgWrap img {
  position: absolute;
  width: calc(100% + 60px);
  height: auto;
  aspect-ratio: 1125 / 750;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.otherArticlesBtn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 35px;
  height: 35px;
  background: var(--color-white);
  border-radius: 999px;
  overflow: hidden;
  text-decoration: none;
  transition: width .4s ease;
  border: 1px solid var(--color-blue);
  bottom: 10px;
  right: 10px;
}

.otherArticlesFlexContents:hover .otherArticlesBtn {
  width: 160px;
  background: var(--color-blue);
}

/* VIEW MORE */
.otherArticlesBtn__text {
  color: var(--color-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(20px);
  margin-right: 14px;
  transition:
    opacity .3s ease,
    transform .4s ease;
}

.otherArticlesFlexContents:hover .otherArticlesBtn__text {
  opacity: 1;
  transform: translateX(0);
  color: var(--color-white);
}

/* 丸アイコン */
.otherArticlesBtn__icon {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  position: relative;
}

/* ＞ を疑似要素2本で作成 */
.otherArticlesBtn__icon::before,
.otherArticlesBtn__icon::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 2px;
  background: var(--color-blue);
  border-radius: 999px;
  left: 50%;
  top: 50%;
  transform-origin: right center;
  transition: .3s;
}

.otherArticlesBtn__icon::before {
  transform:
    translate(-50%, -50%) rotate(45deg);
}

.otherArticlesBtn__icon::after {
  transform:
    translate(-50%, -50%) rotate(-45deg);
}

/* ホバー時 */
.otherArticlesFlexContents:hover .otherArticlesBtn__icon {
  transform: translateX(2px);
}

.otherArticlesFlexContents:hover .otherArticlesBtn__icon::before,
.otherArticlesFlexContents:hover .otherArticlesBtn__icon::after {
  background: var(--color-white);
}

.entryButtonSection {
  width: 100%;
  padding-right: 75px;
}

.entryButtonSection a {
  text-decoration: none;
}

.entryButtonContents {
  width: 100%;
  padding: 100px 40px;
  background: var(--color-bg_blue) url(https://doda.jp/area/gov/kochi/entrybackground.svg) no-repeat;
  background-position: center;
  background-size: 100%;
  border-radius: 20px;
}

.entryButtonText {
  text-align: center;
}

.entryButtonText h2 {
  color: var(--color-blue);
  font-size: var(--font-size-48);
}

.entryButtonText p {
  margin-top: 10px;
}

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

.entryButtonSectionFlex li {
  width: 100%;
}

.entryButtonSectionFlex li+li {
  margin-top: 20px;
}

@media screen and (max-width: 960px) {
  html {
    scroll-padding-top: 50px;
  }

  .toTop.visible {
    bottom: 100px;
  }

  #guidanceContent {
    padding: 20px;
  }

  #guidanceContent>section+section {
    margin-top: 40px;
  }

  .guidanceMv {
    margin-bottom: 100px;
  }

  .guidanceMv img {
    overflow: hidden;
    border-radius: 20px;
  }

  .guidanceMvText {
    padding: 10px 40px 0 0;
    left: -1px;
    bottom: -70px;
  }

  .guidanceMvFlex {
    flex-direction: column;
  }

  .guidanceAnchorSection,
  .guidanceFaqSection,
  .otherArticlesSection,
  .entryButtonSection {
    padding-right: 0;
  }

  .guidanceAnchorLinkFlex {
    width: 100%;
    flex-wrap: wrap;
  }

  .guidanceAnchorLinkFlex li {
    width: calc(50% - 5px);
  }

  .guidanceAnchorLinkFlex a {
    width: 100%;
    padding: 20px 15px;
    border-radius: 10px;
  }


  .guidanceAnchorLinkFlex a::after {
    color: var(--color-blue);
    font-size: var(--font-size-18);
  }

  .guidanceFaqAnswerInner {
    padding: 52px 20px 20px 20px;
  }

  .guidanceFaqAnswerInnerText {
    padding-left: 0;
  }

  .guidanceFaqAnswerInnerText::before {
    top: -1.5em;
  }

  .otherArticles {
    padding: 45px 20px;
  }

  .otherArticlesText::before {
    margin-right: 5px;
  }

  .otherArticlesFlex {
    flex-direction: column;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 10px;
  }

  .otherArticlesFlex li {
    width: 100%;
  }

  .otherArticlesFlex li a {
    padding: 10px;
  }

  .otherArticlesImgWrap {
    width: 80px;
  }

  .otherArticlesFlexContents p {
    padding-top: 20px;
  }

  .entryButtonContents {
    padding: 50px 20px;
    background-position: center 100px;
    background-size: 100%;
  }
}

/* Discovery */
#discoveryContainer *,
#discoveryContainer *::before,
#discoveryContainer *::after {
  box-sizing: border-box;
  text-decoration: none;
}

.discoveryContents>section+section {
  margin-top: 100px;
}

.AccessByAirSection,
.AccessByTrainSection,
.AccessByCarSection,
.otherArticlesSection,
.entryButtonSection,
.AccessOther {
  width: 100%;
  padding-right: 75px;
}

.airTitle,
.trainTitle,
.carTitle {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.airTitle::before,
.trainTitle::before,
.carTitle::before {
  content: '';
  height: 50px;
  width: 50px;
  background-size: cover;
  margin-right: 20px;
}

.airTitle::before {
  background-image: url(/area/gov/kochi/discovery/icon_h2_01.png);
}

.trainTitle::before {
  background-image: url(/area/gov/kochi/discovery/icon_h2_02.png);
}

.carTitle::before {
  background-image: url(/area/gov/kochi/discovery/icon_h2_03.png);
}

.airH3Title {
  display: flex;
  align-items: center;
}

.airH3Title::before {
  content: '●';
  color: var(--color-orange);
  background-size: cover;
  margin-right: 20px;
}

.AccessOtherAnnotation {
  position: relative;
  padding-left: 20px;
}

.AccessOtherAnnotation::before {
  content: '※';
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 960px) {
  .topMagin40 {
    margin-top: 20px;
  }

  .discoveryContents {
    padding: 20px;
  }

  .AccessByAirSection,
  .AccessByTrainSection,
  .AccessByCarSection,
  .otherArticlesSection,
  .entryButtonSection,
  .AccessOther {
    width: 100%;
    padding: 0;
  }

  .airH3Title {
    display: flex;
    align-items: flex-start;
  }

  .airTitle::before,
  .trainTitle::before,
  .carTitle::before {
    margin-right: 10px;
  }

  .airH3Title::before {
    position: relative;
    top: 4px;
    margin-right: 8px;
  }

  .airTitle,
  .trainTitle,
  .carTitle {
    margin-bottom: 20px;
  }

  .airH3Title.topMagin60 {
    margin-top: 20px;
  }
}

/* life */
.lifeSection {
  padding-right: 75px;
}

.lifeSection img {
  width: 100%;
}

.lifeSectionTitle {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
  padding-left: 20px;
}

.lifeSectionTitle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 20px;
  width: 10px;
  background: var(--color-blue);
}

.lifeAreaFlex {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  gap: 20px;
}

@media screen and (max-width: 960px) {
  .lifeAreaFlex {
    margin-top: 20px;
  }
}

.lifeAreaFlex>li {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 30px;
  border-radius: 20px;
}

.bgPurple {
  background-color: #F0EDF5;
}

.bgPink {
  background: #FFEFF4;
}

.bgLgreen {
  background: #E5F7F5;
}

.bgYellow {
  background: var(--color-bg-yellow);
}

.bgGreen {
  background: #ECF6E7;
}

.bgBlue {
  background: var(--color-bg_blue);
}

.lifeAreaFlexImg {
  width: 154px;
  height: auto;
  aspect-ratio: 1 / 1;
}

.lifeAreaFlexText {
  width: calc(100% - 154px);
  padding-left: 20px;
}

.lifeAreaFlexText p {
  margin-top: 10px;
}

.lifeAreaFlexExample {
  position: relative;
  padding-left: 45px;
}

.lifeAreaFlexExample::before {
  position: absolute;
  display: inline-block;
  top: 2px;
  left: 0;
  content: '例';
  font-size: var(--font-size-14);
  font-weight: bold;
  padding: 0 10px;
  border-radius: 35px;
}

.bgPurple .lifeAreaFlexExample::before {
  background: #C7BBDD;
}

.bgPink .lifeAreaFlexExample::before {
  background: #EDBFCC;
}

.bgLgreen .lifeAreaFlexExample::before {
  background: #ACD7E2;
}

.bgYellow .lifeAreaFlexExample::before {
  background: #F4D5A1;
}

.bgGreen .lifeAreaFlexExample::before {
  background: #BED5B2;
}

.bgBlue .lifeAreaFlexExample::before {
  background: #ABC7E8;
}

.lifeFlexText {
  display: flex;
  margin-top: 40px;
}

.lifeFlexTextLeft {
  width: calc(100% - 270px);
  padding-right: 30px;
}

.lifeFlexTextLeft h3+p {
  margin-top: 20px;
}

@media screen and (max-width: 960px) {
  .lifeFlexTextLeft h3+p {
    margin-top: 10px;
  }
}

.lifeFlexTextRight {
  width: 270px;
}

.lifeFlexTextRight img {
  border-radius: 20px;
}

.lifeList {
  margin-top: 40px;
}

.lifeList h3+p {
  margin-top: 20px;
}

@media screen and (max-width: 960px) {
  .lifeList h3+p {
    margin-top: 10px;
  }
}

.bubbleArea {
  background: var(--color-bg_blue);
  border-radius: 20px;
  padding: 40px;
  margin-top: 20px;
}

.bubbleAreaLink {
  display: inline-block;
  margin-top: 20px;
}

.bubbleAreaLink>span {
  border-bottom: 1px solid var(--color-blue);
  margin-right: 5px;
}

.bubbleAreaLink:hover {
  color: var(--color-black);
  text-decoration: none;
}

.bubbleAreaLink:hover span {
  border-bottom: 1px solid var(--color-black);
  color: var(--color-black);
  text-decoration: none;
}

.bubbleAreaLink:hover:after {
  background: var(--color-black);
}

.bubbleAreaLink:hover::before {
  border-top: 2px solid var(--color-black);
  border-right: 2px solid var(--color-black);
}

.lifeData {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.lifeData span {
  display: inline-block;
  width: 308px;
  padding: 5px;
  text-align: center;
  color: var(--color-white);
  border-radius: 20px;
  margin-right: 20px;
}


.lifeData p {
  display: inline-block;
}

.lifeData+p {
  margin-top: 20px;
}

.dataBgBlue {
  background: var(--color-blue);
}

.dataBgGreen {
  background: var(--color-green);
}

.lifeDataList {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-wrap: wrap;
  gap: 10px;
  padding-left: 50px;
  margin-top: 20px;
}

@media screen and (max-width: 960px) {
  .lifeData {
    margin-top: 10px;
  }

  .lifeDataList {
    margin-top: 10px;
  }
}

.lifeDataList li {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 36px;
}

.lifeDataList li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 26px;
  height: 26px;
  background-image: url(https://cms.doda.jp/area/gov/kochi/discovery/icon_list.png);
  background-size: cover;
  margin-right: 10px;
}

.lifeDataList+p {
  margin-top: 20px;
}

@media screen and (max-width: 960px) {
  .lifeDataList+p {
    margin-top: 10px;
  }
}

.lifeSummary {
  background: var(--color-bg-yellow);
  padding: 40px;
  border-radius: 20px;
}

.summaryTitle {
  display: flex;
  align-items: center;
  gap: 20px;
}

.summaryTitle h2 {
  color: var(--color-blue);
}

.summaryTitle h2::before {
  content: '●';
  color: var(--color-green);
  margin-right: 10px;
  font-size: var(--font-size-20);
  vertical-align: middle;
}

.summaryTitle p {
  color: var(--color-gray);
}

.summaryTitle+p {
  margin-top: 20px;
}

.lifeSummaryList {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-left: 20px;
}

.lifeSummaryList li {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 20px;
  gap: 10px;
}

.lifeSummaryList li::before {
  position: absolute;
  content: '●';
  color: var(--color-blue);
  font-size: var(--font-size-10);
  top: 1em;
  left: 0;
  transform: translateY(-0.4em);
}

.lifeSummaryList,
.lifeSummaryList+p {
  margin-top: 20px;
}

@media screen and (max-width: 960px) {
  .lifeSection {
    padding-right: 0;
  }

  .lifeSectionImg.topMagin40 {
    margin-top: 10px;
  }

  .discoveryContents>section+section {
    margin-top: 40px;
  }

  .lifeAreaFlex>li {
    display: flex;
    flex-direction: column;
    padding: 30px;
    border-radius: 20px;
    gap: 10px;
  }

  .lifeAreaFlexImg {
    width: 112px;
  }

  .lifeAreaFlexText {
    width: 100%;
    padding-left: 0;
  }

  .lifeAreaFlexText h3 {
    text-align: center;
  }

  .lifeFlexText {
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }

  .lifeFlexTextLeft,
  .lifeFlexTextRight {
    width: 100%;
    padding-right: 0;
  }

  .lifeList {
    margin-top: 20px;
  }

  .bubbleArea {
    padding: 30px 20px;
  }

  .lifeDataList {
    padding-left: 0;
    align-items: start;
  }


  .lifeDataList li::before {
    width: 20px;
    height: 20px;
  }

  .lifeData p {
    width: 100%;
    text-align: center;
  }

  .summaryTitle {
    gap: 10px;
  }

  .lifeData span {
    display: block;
    width: 100%;
    padding: 5px;
    text-align: center;
    border-radius: 20px;
    margin-right: 0;
  }

  .lifeSummaryList,
  .lifeSummaryList+p {
    margin-top: 10px;
  }

  .lifeData+p {
    margin-top: 10px;
  }

  .dataBgBlue {
    background: var(--color-blue);
  }

  .dataBgGreen {
    background: var(--color-green);
  }
}

/* child */
.childSection {
  padding-right: 75px;
}

.childSection img {
  width: 100%;
}

.childSectionImg {
  max-width: 640px;
  margin: 40px auto 0 auto;
}

.childSectionImg img {
  width: 100%;
  border-radius: 20px;
}

@media screen and (max-width: 960px) {
  .childSectionImg.topMagin40 {
    margin-top: 20px;
  }

  .childSectionImg {
    margin: 20px auto 0 auto;
  }
}

.childSectionFlex {
  width: 100%;
  margin-top: 20px;
}

.childFlexList {
  display: flex;
  height: auto;
}

.childFlexListTitle {
  width: 210px;
  display: flex;
  align-items: center;
  color: var(--color-blue);
  position: relative;
  padding: 10px 20px;
  height: auto;
}

.childFlexListTitle::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background: var(--color-blue);
}

.childFlexListText {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(100% - 210px);
  padding: 10px 20px;
  height: auto;
}

.childFlexListText::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background: var(--color-gray);
}

.childSectionList {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.childSectionList li {
  width: 100%;
  display: flex;
  align-items: center;
}

.childSectionList span {
  padding: 10px;
  width: 210px;
  text-align: center;
  background: var(--color-green);
  color: var(--color-white);
  border-radius: 100px;
}

.childSectionList p {
  width: calc(100% - 210px);
  padding-left: 20px;
}

.childSection .lifeSummaryList {
  gap: 10px;
}

.childSection .lifeDataList {
  padding-left: 10px;
}

.childSection .lifeSummaryList {
  padding-left: 0;
}

@media screen and (max-width: 960px) {
  .childSection {
    padding-right: 0;
  }

  .childSectionFlex {
    margin-top: 10px;
  }

  .childFlexList {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  .childFlexListTitle {
    width: 100%;
    display: flex;
    align-items: center;
    color: var(--color-blue);
    background: var(--color-bg_blue);
    position: relative;
    padding: 8px 10px;
  }

  .childFlexListText {
    width: 100%;
    padding: 8px 10px;
  }

  .childFlexListText::before {
    display: none;
  }

  .childSectionList li {
    flex-direction: column;
  }

  .childSectionList span {
    width: 100%;
  }

  .childSectionList p {
    width: 100%;
    padding-left: 0;
    margin-top: 5px;
  }

  .lifeDataList li {
    padding-left: 25px;
  }

  .lifeDataList li::before {
    width: 20px;
    height: 20px;
    margin-right: 0;
  }

  .childSection .lifeDataList {
    padding-left: 0;
  }

  .childSection .lifeSummary {
    padding: 20px;
  }
}

.workSection {
  padding-right: 75px;
}

.workSection .childSectionImg {
  text-align: center;
}

.workSection .workSectionImgTitle {
  display: inline-block;
  background: var(--color-blue);
  border-radius: 10px;
  padding: 10px 30px;
}

.workSection .workSectionImgTitle p {
  color: var(--color-white);
}

@media screen and (max-width: 960px) {
  .workSection {
    padding-right: 0;
  }

  .lifeSectionTitle {
    margin-bottom: 20px;
  }
}


/* StepSection */
.stepSection {
  width: 100%;
  padding-right: 75px;
}

.stepSection img {
  width: 100%;
}

.stepCharacter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px
}

.stepCharacter li {
  width: 188px;
}

.stepCharacter li p {
  margin-top: 10px;
  text-align: center;
}

.stepButton {
  position: relative;
  width: 100%;
  display: inline-block;
  padding: 20px 70px 20px 40px;
  border-radius: 10px;
  background: var(--color-blue);
  color: var(--color-white);
  transition: all .4s;
  border: 1px solid transparent;
  letter-spacing: .005em;
  margin-top: 100px;
}

.stepButton:link {
  color: var(--color-white);
}

.stepButton:visited {
  color: var(--color-white);
}

.stepButton:hover {
  background: var(--color-white);
  color: var(--color-blue);
  transition: all .4s;
  border: 1px solid var(--color-blue);
}

@media screen and (max-width: 960px) {
  .stepSection {
    padding-right: 0;
    gap: 20px;
  }

  .stepCharacter li {
    width: 180px;
    padding: 0 20px;
  }

  .stepButton {
    margin-top: 50px;
  }
}

/* introductionSection*/

.introductionSection .childSectionList span {
  width: 307px;
}

.introductionSection .childSectionList p {
  width: calc(100% - 307px);
}

.introductionSection .bubbleAreaLink {
  display: block;
}

.mailText {
  color: var(--color-blue);
  text-decoration: underline !important;
}

.introductionList {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
}

.introductionList h5 {
  width: 100%;
  display: flex;
}

.introductionList h5::before {
  content: '●';
  color: var(--color-blue);
  font-size: var(--font-size-10);
  margin-right: 10px;
  position: relative;
  top: 4px;
}

.childSectionList.introductionWidhtList span {
  width: 132px;
}

@media screen and (max-width: 960px) {
  .introductionSection .childSectionList span {
    width: 100%;
  }

  .introductionSection .childSectionList p {
    width: 100%;
    text-align: center;
  }

  .childSectionList.introductionWidhtList span {
    width: 100%;
  }
}