@charset "utf-8";

/*----------base----------*/
#wrap.cmnBody {
  min-width: initial;
  max-width: initial;
}

#wrap.cmnBody .contentArea {
  max-width: initial;
  width: auto;
}

#wrap.cmnBody .topicPathWrap {
  display: block;
}

.contentWrap {
  padding: 0 15px;
}

.contentWrap>* {
  margin: 1rem 0;
}

.bnrBox {
  text-align: center;
}

#wrap.cmnBody img {
  max-width: 100%;
}

.bnrBox a {
  display: block;
}

ul {
  list-style-type: none;
  padding-left: 0;
}

.toSp {
  display: block;
  margin: 2rem 0 !important;
}

/*----------main----------*/

.advisebg {
  padding-bottom: 3em;
}

.consultationbg {
  position: relative;
  padding: 3em 0 8em;
}

.consultationbg::before {
  content: '';
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110%;
  background-color: #c9edff;
  background-size: 20px 20px;
  background-image: repeating-linear-gradient(45deg, #aed3f3 0, #aed3f3 5px, #c8ecff 0, #c8ecff 50%);
}

.consultationbg>* {
  position: relative;
  z-index: 1;
}

.advisebg,
.consultationbg,
.bgNormalmain {
  z-index: 0;
  margin: 0 auto;
}

.main {
  position: relative;
  z-index: 0;
  background-size: 20px 20px;
  background-image: repeating-linear-gradient(45deg, #fddb87 0, #fddb87 5px, #ffe8a3 0, #ffe8a3 50%);
  overflow: hidden;
}

.advisebg,
.bgNormalmain {
  background-size: 20px 20px;
}

/*.advisebg .advise,*/
.ttlArea {
  margin: 3em auto 0;
  z-index: 99;
  position: relative;
  text-align: center;
}

.ttlArea h2,
.ttlArea p {
  text-align: left;
}

.bgNormal {
  z-index: unset;
}

/*----------header----------*/

.headerWrap {
  padding: 0 0 3rem;
  text-align: center;
  overflow: hidden;
}


.headerWrap h2 {
  position: relative;
  margin: 0;
  background: #fff;
  text-align: center;
}

.headerWrap h2::before {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: 5rem;
  border-radius: 0 0 50% 50%;
  background: #fff;
  transform: translate(-50%, 2.5rem);
}

.headerWrap h2 a {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto;
  padding: 15px 0 0;
  font-weight: bold;
  font-size: 2.2rem;
  line-height: 1.4;
  text-align: center;
  color: #ff6470;
}

.ttlArea {
  text-align: left;
}

/*
----btn----
*/
.btnflex.btnUsa {
  margin: 0 auto;
}

.btnflex {
  position: relative;
  z-index: 1;
  text-align: center;
}

.btnflex a {
  position: relative;
  border: 3px solid #fff;
  color: #fff;
  border-radius: 5px;
  font-size: 1em;
  font-weight: 800;
  line-height: 1.5;
  width: 90%;
  margin: 1em auto;
  padding: 1em 0;
  display: inline-block;
  transition: 0.3s;

}

.btnflex a span {
  font-size: 1.7rem;
  display: inline-block;
}

.btnflex a::before {
  position: absolute;
  content: "";
  height: 60px;
  z-index: -1;
}

.btnflex a:hover {
  opacity: unset;
}

.usatbtn {
  background-color: #ff6470;
}

.usatbtn:hover {
  background-color: #FFA2A9;
}

.piyoqbtn {
  background-color: #59B4E9;
}

.piyoqbtn:hover {
  background-color: #96CFF1;
}

.viewOnly {
  text-align: center;
  margin: 2em auto 0;
}

.viewOnly .btnUsa {
  margin: unset;
}




/*----------見るArea----------*/
.viewSearch h3 {
  margin: 1em 0 3em;
}

.viewSearch .textleft {
  text-align: left;
  margin-bottom: 3em;
}

.sodanArea h2,
.categoryArea h2 {
  text-align: center;
}

/*search*/
.keyword h4 {
  margin: 0 auto;
}

.keyword h4 img {
  width: 50%;
}

.keywordSearchBox form {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin: 0 auto 1.5em;
  padding: 15px 10px 0;
  max-width: 710px;
  min-height: 50px;
}

.keywordSearchBox input[type="text"] {
  padding: 5px 0 5px 20px;
  width: 100%;
  background: #fff;
  border: none;
  border-right: 0;
  border-radius: 50px 0 0 50px;
  font-size: 14px;
}

.keywordSearchBox input[type="submit"] {
  display: none;
}

.keywordSearchBox .searchSubmit {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 15px;
  background: #ff6470;
  border-radius: 0 50px 50px 0;
  color: #fff;
  font-weight: bold;
  margin: unset;
  cursor: pointer;
}

.keywordSearchBox .searchSubmit span {
  position: relative;
  display: inline-block;
  padding: 0 0 0 1.4em;
  color: #fff;
  font-size: 16px;
  letter-spacing: 3px;
  font-weight: bold;
}

.keywordSearchBox .searchSubmit span::before {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 50%;
  left: -5%;
  width: 1.5em;
  height: 2em;
  background: url('../../../img/page/newadvise/icn_glass.svg') left center no-repeat;
  background-size: 100% auto;
  transform: translate(0, -50%);
}


/*sodanArea*/
.viewSearch {
  display: block;
  padding-top: 70px;
  margin-top: -70px;
}

.sodanArea {
  margin: 0 auto 3em;
  cursor: pointer;
}

.sodan_all {
  margin: 0 auto;
  width: 100%;
}

.sodan_all li,
.more {
  background: #fff;
  border: 1px #fbedbe solid;
  padding: .8em;
  position: relative;
  text-align: left;
}

.more {
  text-align: center;
  background: rgba(255, 255, 255, .7);
  color: #FF6470;
  font-weight: 800;
}

.more.on-click {
  display: none;
}

.sodan_all li.hide {
  display: none;
}

.sodan_all li a::after {
  content: "";
  border-width: 2px 2px 0 0;
  border-style: solid;
  border-color: #FF6470;
  position: absolute;
  right: 5%;
  top: calc(50% - .25rem);
  width: .8rem;
  height: .8rem;
  transform: rotate(45deg);
}

.sodan_all li a::before {
  content: "";
  position: absolute;
  background: url("../../../img/page/newadvise/icn_q.svg") left top / contain no-repeat;
  padding: 0 10em;
  height: 20px;
  top: 1em;
}

.sodan_all li a span {
  margin: 0 2em;
  display: inline-block;
}





/*categoryArea*/
.categoryArea {
  margin: 5em auto 6em;
}

.categoryArea h2 {
  margin-bottom: 1.5em;
}

ul.category {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

ul.category li {
  background: #fff;
  box-shadow: 5px 5px 0 0 rgba(255, 100, 112, 0.8);
  border-radius: 3px;
  line-height: 1.1;
  width: 28%;
  height: 95px;
  margin: .5em;

}

ul.category li a {
  display: flex;
  flex-direction: column;
  font-size: .8rem;
  align-items: center;
  padding-top: 1.5em;
  line-height: 2;
}

ul.category li div {
  display: flex;
}

ul.category li img {
  width: 45px;
  height: 40px;
}


/*----------相談するArea----------*/
.animation {
  text-align: center;
  padding: 5em 0 2em;
}

.animation img {
  width: 15%;
  margin: 0 1em;
}

.animation .picnigiri {
  animation: nigiri_anime 2s linear infinite;
}

@keyframes nigiri_anime {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.animation .picpiyo {
  animation: piyo_anime 2s linear infinite;
}

@keyframes piyo_anime {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.adviserArea h3 img {
  width: 100% !important;
}

.adviserMember li {
  background: rgba(255, 255, 255, .8);
  padding: .5em;
  margin: 1em;
}

.adviserMember p {
  font-size: .9rem;
}

.adviserMember p.name span {
  font-size: 1rem;
  font-weight: 800;
  position: relative;
  padding-left: 3em;
}

.adviserMember p.name span::before {
  content: "";
  position: absolute;
  background: url("../../../img/page/newadvise/icn_adviser.svg") left top / contain no-repeat;
  top: calc(50% - 17px);
  width: 35px;
  height: 40px;
  left: 0;
}

.sodanForm {
  background: #ffd7db;
  padding: 1.5em .5em .5em;
  margin: 5em 0 1em;
}

.sodanForm h3 {
  position: relative;
}

.sodanForm h3::before {
  content: "";
  position: absolute;
  background: url("../../../img/page/newadvise/ttl_navi.svg") left top / contain no-repeat;
  top: calc(50% - 50px);
  width: 100px;
  height: 50px;
  left: 15%;
}

.naviMember {
  text-align: center;
  margin: 2em auto;
}

.naviMember a {
  background: #fff;
  box-shadow: 5px 5px 0 0 rgba(71, 113, 197, 0.8);
  color: #4771c5;
  padding: .5em 1em;
}

.sliderStepWrap {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  max-width: 650px;
  container: sliderStepWrap / inline-size;
}

.sliderStep {
  display: flex;
  overflow-y: hidden;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  width: 100%;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  text-align: center;
}

.sliderStep li {
  flex-shrink: 0;
  background: #fff;
  position: relative;
  padding: 1em 0 2em;
  width: 100cqw;
}

.sliderStep li p {
  margin: 1em 3em;
}

.sliderStep .step {
  background: #4771c5;
  color: #fff;
  width: 30%;
  text-align: center;
  border-radius: 6px;
  padding: .2em 0;
  margin: 0em auto;
}

.sliderStep li a {
  display: block;
  margin: 0 auto;
  max-width: 70%;
  text-align: center;
}

@media screen and (min-width: 650px) {
  .sliderStep {
    padding: 1.5em;
  }

  .sliderStep .liArea {
    display: flex;
    gap: 15px;
    margin: 0 auto;
    padding: 0.5em 1.5em;
    width: 85%;
  }

  .sliderStep .step {
    margin: 0 0 30px;
  }

  .sliderStep li p {
    margin: 0;
  }
}

form {
  vertical-align: middle;
}

.cmnReset:not(.cmnMenus) .adLinks {
  margin: 32px auto;
  padding: 16px 0;
  max-width: 700px;
  background: rgba(255, 255, 255, 0.5);
}

/*
----旧ページ----
*/
/*----header----*/
.headerWrap.old {
  text-align: center;
  background: #ffd833;
  overflow: hidden;
}

.headerWrap.old h1 {
  margin: 1.5rem 1rem 1rem;
  text-align: center;
}

.headerWrap.old h1 img {
  width: 307.5px;
  max-width: 100%;
  height: auto;
}

.advise .search {
  background: #ffcc00;
  position: relative;
  padding: 1.5rem 0;
  text-align: center;
  z-index: 1;
}

.advise .search::before {
  border: 50vw solid transparent;
  border-top: 4rem solid #ffd833;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.advise .search .comment.keyword {
  background: #fff;
  border-radius: 1rem;
  line-height: 1;
  padding: .25rem 1rem;
  position: absolute;
  font-size: .8em;
  top: -1.3rem;
  left: calc(50% - 10em);
}

.advise .search .comment.keyword::after {
  content: "";
  border: 5px solid transparent;
  border-top: 8px solid #fff;
  position: absolute;
  bottom: -10px;
  left: calc(50% - 5px);
}

input.boxSearch {
  border: 1px solid #f7931e;
  font-size: .9em;
  width: 60%;
  vertical-align: middle;
}

input.boxSearchBtn {
  background: #f7931e;
  border: 1px solid #f7931e;
  border-radius: 3px;
  color: #fff;
  font-size: .9em;
  padding: .1rem .25rem;
  vertical-align: middle;
}

/*----footer----*/
.contentWrap>*,
.sideWrap>* {
  margin: 1rem 0;
}

.consult a {
  background: #f7931e;
  border-radius: 3px;
  box-sizing: border-box;
  color: #fff;
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: 2px;
  padding: .75rem;
  position: relative;
  text-align: center;
  width: 96vw;
}

.consult a:before {
  content: "";
  border-width: 48vw 48vw 0 48vw;
  border-style: solid;
  border-color: transparent;
  border-top: 3rem solid rgba(255, 255, 255, .2);
  position: absolute;
  top: 0;
  left: 0;
}

ul.keywordList {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

ul.keywordList li {
  margin: .25rem;
}

ul.keywordList a {
  margin-bottom: 5px;
  display: inline-block;
  padding: 0 5px;
  background: rgb(var(--naviGray));
  border-radius: 1rem;
  font-size: 1rem;
  line-height: 2;
}

.getPamphlet h2 {
  color: #f7931e;
  text-align: center;
}

.sideWrap {
  padding: 1px .5rem .5rem;
  margin: 1rem 0 0;
  background: #fff;
}

.sideWrap h2 {
  color: #f7931e;
  text-align: center;
}

.sideWrap h2 span {
  position: relative;
  padding-left: 35px;
}

.sideWrap h2 span::before {
  content: "";
  width: 30px;
  height: 35px;
  position: absolute;
  left: 0;
}

.recommend h2 span::before {
  background: url("../../../img/page/newadvise/icn_h2_recommend.png") left top / contain no-repeat;
  top: calc(50% - 13px);
}

.ranking h2 span::before {
  background: url("../../../img/page/newadvise/icn_h2_ranking.png") left top / contain no-repeat;
  top: calc(50% - 23px);
}

.workCathegory h2 span::before {
  background: url("../../../img/page/newadvise/icn_h2_cathegory.png") left top / contain no-repeat;
  top: calc(50% - 17px);
}

.recommend ul li {
  line-height: 1.3;
}

.recommend a {
  display: block;
  border-left: 5px solid rgba(255, 216, 51, .8);
  padding-left: 5px;
}

.recommend li+li,
.ranking li+li {
  margin-top: .75rem;
}

.ranking ol {
  list-style-type: none;
  padding-left: 0;
}

.ranking ol li {
  counter-increment: number;
  line-height: 1.3;
  padding-left: 2.75rem;
  position: relative;
  z-index: 1;
}

.ranking ol li::before {
  background: rgba(255, 216, 51, .8);
  box-sizing: border-box;
  content: counter(number)"";
  color: #f7931e;
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 1.2em;
  height: 100%;
  padding: .25rem .75rem;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.ranking a {
  display: block;
  padding: .25rem 0;
}

.workCathegory>ul>li,
aside .workCathegory>div {
  background: #fff;
  border: 2px solid rgba(255, 216, 51, .8);
  border-radius: 3px;
  text-align: left;
  font-size: 1rem;
}

.workCathegory>ul>li+li,
aside .workCathegory>div {
  margin-top: .25rem;
}

aside .workCathegory h3 {
  font-size: 1em;
  font-weight: normal;
  margin: 0;
  text-align: left;
}

.workCathegory>ul>li>div,
aside .workCathegory h3 {
  background: #ffefad;
  color: #f7931e;
  padding: .5rem .5rem .5rem .75rem;
  position: relative;
}

.workCathegory>ul>li>div::after,
aside .workCathegory h3::after {
  border: 7px solid transparent;
  border-top: 7px solid #f7931e;
  content: "";
  position: absolute;
  right: .5rem;
  top: calc(50% - 3px);
}

.workCathegory ul ul,
aside .workCathegory ul {
  margin: 0 .5rem .5rem;
}

ul.keywordList,
.workCathegory ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.workCathegory a {
  box-sizing: border-box;
  display: block;
  font-size: .9em;
  line-height: 1.2;
  overflow: hidden;
  padding: .5rem .5rem .5rem .75rem;
  position: relative;
}

.workCathegory a::before,
.workCathegory a::after {
  content: "";
  border: 5px solid transparent;
  top: calc(50% - 5px);
  position: absolute;
}

.workCathegory a::before {
  border-left: 5px solid #f7931e;
  left: .25rem;
  z-index: 1;
}

.workCathegory a::after {
  border-left: 5px solid #fff;
  left: calc(.25rem - 2px);
  z-index: 2;
}



/* ------ PC.css ----- */
@media screen and (min-width: 768px) {

  /*main*/
  .consultationbg {
    position: relative;
    background: none;
  }

  .consultationbg::before {
    -webkit-transform: skew(0deg, 10deg);
  }

  .advisebg,
  .consultationbg {
    z-index: 0;
    margin: 0 auto;
  }

  .ttlArea {
    margin: 3em auto;
    z-index: 99;
    position: relative;
    max-width: 640px;
    text-align: center;
  }

  .ttlArea h2,
  .ttlArea p {
    text-align: left;
  }

  /*----------見るArea----------*/

  /*search*/
  .viewSearch .textleft {
    margin: 2em auto;
  }

  .keywordSearchBox {
    min-height: 48px;
    width: 95%;
    margin: 0 auto;
  }

  .keyword h4 img {
    width: 25%;
  }

  /*sodanArea*/
  .sodan_all .firstq {
    margin: 0 auto;
  }

  .sodan_all .firstq::after {
    width: 100%;
  }

  .sodan_all>.firstq+div {
    margin: 0 auto;
  }

  /*categoryArea*/
  ul.category {
    margin: 0 auto;
  }

  ul.category li {
    width: 17%;
    height: 125px;
  }

  ul.category li a {
    font-size: 1rem;
  }

  ul.category li img {
    width: 65px;
    height: 60px;
  }


  /*----------相談するArea----------*/
  .animation img {
    width: 10%;
    margin: 0 3em;
  }

  .adviserArea h3 img {
    width: 55% !important;
  }

  .adviserArea .textleft {
    width: 750px;
    margin: 2em auto;
  }

  .adviserMember {
    margin: 0 auto;
  }

  .adviserMember li {
    padding: 1.5em 2em;
  }

  .sodanForm {
    margin: 4em auto;
  }

  .sodanForm h3 {
    font-size: 20px;
    margin-top: 3em;
  }

  .sodanForm h3::before {
    left: 26%;
    width: 130px;
    height: 100px;
    top: calc(50% - 70px);
  }

  .sodanForm p {
    text-align: left;
    margin: 0 auto;
  }

  .naviMember a {
    padding: 0.5em 3em;
    font-weight: 800;
    font-size: 1.2rem;
  }

  /*
  ----旧ページ----
  */
  /*----base----*/
  .innerWrap {
    display: grid;
    grid-template-columns: auto clamp(250px, 20vw, 340px);
    gap: 3rem;
    padding: 3rem;
  }

  .sideWrap {
    padding: 0 1em;
  }

  .contentWrap {
    padding: 0;
  }

  .contentWrap,
  .sideWrap {
    margin: 0;
    box-sizing: border-box;
  }

  /*----header----*/
  input.boxSearch {
    width: 300px;
  }

  .advise .search::before {
    border: 600px solid transparent;
    border-top: 4rem solid #ffd833;
    border-bottom-width: 0;
    left: calc(50% - 600px);
  }

  /*----answer----*/
  .sideWrap .consult a {
    width: 100%;
  }

  .consult a::before {
    border-width: 170px 170px 0 170px;
    border-style: solid;
    border-color: transparent;
    border-top: 3rem solid rgba(255, 255, 255, .2);
  }
}