@charset "UTF-8";

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

/* body {
  * {
    outline: 1px solid red;
  }
} */

body { -webkit-text-size-adjust: 100%; }


main {
  font-size: 1.6rem;
  font-family: hiragino-kaku-gothic-pron, sans-serif;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.08rem;
  line-height: 1.8;
}


ul {
  padding-left: 0;
}

li {
  list-style: none;
  padding-left: 0;
}

a {
  text-decoration: none;
  /* color: inherit; */
}

button {
  all: unset;
}

img {
  width: 100%;
}

.pc-none {
  display: none;
}

.sp-none {
  display: block;
}

.tb-sp-none {
  display: block;
}

.pc-tb-none {
  display: none;
}

.pc-tb-block {
  display: block;
}

.pc-tb-sp-none{
  display: none;
}

/* 820px以下の記述 */
@media screen and (max-width: 820px) {
  .tb-sp-none {
    display: none;
  }

  .pc-none {
    display: block;
  }
}

/* 480px以下の記述 */
@media screen and (max-width: 480px) {
  .pc-none {
    display: block;
  }

  .sp-none {
    display: none;
  }

  .pc-tb-none {
    display: block;
  }

  .pc-tb-block {
    display: none;
  }
}

/* 350px以下の記述（イレギュラー） */
@media screen and (max-width: 350px) {
  .pc-tb-sp-none{
    display: block;
  }
}

/* common.css打ち消し */
h2 {
  border-bottom: none;
}

/* beginner-top */
.beginner-top {
  margin-top: 140px;
}

.beginner-top__wrapper {
  position: relative;
}

.beginner-top__img-bg {
  width: 100%;
  height: clamp(400px, 55vw, 620px);
  object-fit: cover;
  overflow: hidden;
}

.beginner-top__img-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(0, 10%);
  width: 100%;
}

.beginner-top__img-flex {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  align-items: end;
  max-width: clamp(310px, 80vw, 800px);
  justify-items: center;
  margin: auto;
}

.beginner-top__character {
  margin-bottom: .5rem;
}

.beginner-top__navi-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

.beginner-top__fukidashi-text{
  font-size: clamp(1rem, 3vw, 1.4rem);
  white-space: nowrap;
}

.beginner-top__fukidashi {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid #333333;
  border-radius: 100px;
  background-color: #ffffff;
  color: #333333;
}

.beginner-top__fukidashi::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 81%;
  border-style: solid;
  border-width: 9px 9px 0 0;
  border-color: #333333 transparent transparent;
  translate: -50% 100%;
}

.beginner-top__fukidashi::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 81%;
  border-style: solid;
  border-width: 6.2px 6.2px 0 0;
  border-color: #ffffff transparent transparent;
  translate: calc(-50% - 0.4px) 100%;
}

.beginner-top__navigator{
  max-width: clamp(50px, 10vw, 100px);
}

.beginner-top__character img {
  max-width: clamp(50px, 9vw, 100px);
}

.beginner-top__navigator img {
  max-width: clamp(80px, 10vw, 100px);
}

.beginner-top__title-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, clamp(20%, 5vw, 70%));
  max-width: 100%;
  box-sizing: border-box;
}

.beginner-top__title-upper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
  letter-spacing: 0.2rem;
  margin: 1rem 0;
}

.beginner-top__hashtag {
  background-color: #00ada9;
  border-radius: 100px;
  padding: 0.2rem 2rem;
  color: #fff;
}

.beginner-top__title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap:clamp(1rem,3vw,3rem);
}

.beginner-top__title {
  font-family: ads-tomorrowskip, sans-serif;
  font-weight: 500;
  font-size: clamp(5rem, 5vw, 7rem);
  width: clamp(250px, 40vw, 450px);
}

.beginner-top__title-img {
  max-width: clamp(30px, 4vw, 40px);
  transform: rotate(20deg);
}

.beginner-top__message {
  text-align: center;
  white-space: nowrap;
  margin-top: 1rem;
  line-height: 2;
}

/* 1000px以下の記述 */
@media screen and (max-width: 1000px) {
  .beginner-top__img-bg {
    height: clamp(400px, 58vw, 600px);
  }
}

/* 820px以下の記述 */
@media screen and (max-width: 820px) {
  .beginner-top {
    margin-top: 94px;
  }

  .beginner-top__img-bg {
    height: clamp(420px, 70vw, 500px);
  }

  .beginner-top__character img {
    max-width: clamp(50px, 9vw, 80px);
  }

  .beginner-top__navigator img {
    max-width: clamp(70px, 10vw, 100px);
  }

  .beginner-top__title-wrapper {
    transform: translate(-50%, clamp(10%, 3vw, 30%));
  }

  .beginner-top__title {
    font-size: clamp(3.5rem, 6vw, 6rem);
    margin: 0;
  }

  .beginner-top__message {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
  }
}


/* 480px以下の記述 */
@media screen and (max-width: 480px) {
  .beginner-top__hashtag {
    padding: 0.8rem 1.5rem 0.6rem;
  }

  .beginner-top__img-bg {
    height: clamp(430px, 65vw, 500px);
  }

  .beginner-top__character img {
    max-width: clamp(50px, 12vw, 80px);
  }

  .beginner-top__message {
    white-space: nowrap;
  }
}
/* /beginner-top */


/* beginner-start */
.sec-beginner {
  margin-top: 5rem;
  margin: auto;
  width: 100%;
}

.beginner-start__wrapper {
  display: flex;
  justify-content: center;
}

.beginner-start__content{
  margin: 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  margin: clamp(2rem,10vw,10rem) 0 3rem;
}

.beginner-start__step a {
  display: flex  ;
  flex-direction: row;
  justify-content: flex-start; 
  align-items: center;
  gap: clamp(.5rem, 2vw, 2rem);
  width: 100%;
}

.beginner-start__step img {
  max-width: clamp(50px, 13vw, 100px);
}

.beginner-start__step-text {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 2;
  flex: 1; 
  width: clamp(200px,52vw,350px);
  text-align: center;
  margin-left: -2rem;
}

.beginner-start__step-subtext {
  font-size: clamp(1.3rem, 3vw, 1.5rem);
  font-weight: 500;
  display: block;
}

.arrow {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 40px;
  margin: 0 2rem;
  border-radius: 3px;
  background-color: #66cecb;
  margin-left: auto;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: calc(50% - 4px);
  width: 8px;
  height: 32px;
  border-radius: 3px;
  background-color: #66cecb;
  transform-origin: 50% calc(100% - 3px);
}

.arrow::before {
  transform: rotate(45deg);
}

.arrow::after {
  transform: rotate(-45deg);
}
/* /beginner-start */


/* beginner-start__button-wrapper */
.beginner-start__button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  margin: 4rem auto 8rem;
}

.beginner-start__button-container {
  background-color: #f3f2eb;
  padding: 1.5rem 0;
  width: clamp(250px, 45vw, 400px);
  border-radius: 7px;
  text-align: center;
  box-shadow: 3px 6px 6px 0px rgba(52, 52, 52, 0.2);
  font-size: clamp(1.6rem, 4vw, 2rem);
}

/* 820px以下の記述 */
@media screen and (max-width: 820px) {
.beginner-start__button-wrapper{
  flex-direction: column;
}

.beginner-start__button-container{
  width: clamp(300px, 80vw, 450px);
}
}
/* /beginner-start__button-wrapper */


/* point1～3の共通 */
/* step */
.beginner-step__layer-color {
  position: relative;
  background-color: #00ada9;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  padding: 4rem 2%;
}

.beginner-step__layer-white {
  position: relative;
  background-color: white;
  border-radius: 20px;
  margin: 4rem auto;
  max-width: clamp(900px, 80vw, 1100px);
  border: solid 5px #fff;
}

.beginner-step__inner{
  max-width: 900px;
  margin: auto;
  padding:5rem clamp(1.5rem, 4vw, 5rem) clamp(1rem, 3vw, 2rem)
}

.beginner-step__yuudou {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 8vw, 5rem);
}

.beginner-step__yuudou-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -10rem;
}

.beginner-step__yuudou-line::before {
  content: "";
  display: block;
  width: 2px;
  height: clamp(80px, 15vw, 130px);
  background-color: #333;
}

.beginner-step__yuudou-line::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #333;
}

.beginner-step__yuudou-text {
  width: clamp(150px, 28vw, 250px);
}

.beginner-step__title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: clamp(2rem, 3vw, 10rem) auto clamp(3rem, 7vw, 8rem);
  gap: clamp(3rem, 6vw, 5rem);
}

.beginner-step__number {
  width: clamp(60px, 10vw, 110px);
}

.beginner-step__title-text {
  font-size: clamp(1.9rem, 4vw, 4rem);
  margin-left: -2rem;
}

/* 480px以下の記述 */
@media screen and (max-width: 480px) {
  .beginner-start__wrapper {
    display: block;
    max-width: 270px;
    margin: 8rem auto;
  }

  .beginner-start__step a {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding-top: 0;
  }
}
/* /step */


/* navi-message */
.navi-message {
  justify-content: center;
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  gap: 1rem;
  align-items: flex-start;
}

.navi-message__warapper{
  position: relative;
}

.navi-message__fukidashi-wrapper{
  display: flex;
  align-items: flex-start;
  width: 90%;
  margin: auto;
  flex-direction: column;
}

.navi-message__fukidashi {
  position: relative;
  display: inline-block;
  padding: clamp(8px,4vw,12px) clamp(12px,5vw,30px);
  border: 2px solid #333333;
  border-radius: 50px;
  background-color: #ffffff;
  text-align: center;
  font-size: clamp(1.4rem,2vw,1.6rem);
  font-weight: 600;
  line-height: 1.5;
  color: #333333;
  max-width: 300px;
  z-index: 1;
}

.navi-message__fukidashi::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 13px 7.5px 0 7.5px;
  border-color: #333333 transparent transparent;
  translate: -50% 100%;
}

.navi-message__fukidashi::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 9px 5.2px 0 5.2px;
  border-color: #ffffff transparent transparent;
  translate: -50% 100%;
}

.navi-message__fukidashi-text{
  white-space: nowrap;
}

.navi-message__navigator {
  max-width: 100px;
  z-index: 1;
}

.navi-message__text-warapeer {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  transform: translate(0, 15%);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  justify-content: center;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  line-height: 1.8;
  background-color: #f4f3ec;
  border: solid 2px #4c4c4c;
  border-radius: 10px;
  padding: clamp(4rem, 2vw, 5rem) clamp(1rem, 2vw, 2rem) clamp(2rem, 3vw, 4rem);
  text-align: left;
}

.navi-message__flex-warapper{
  display: flex;
  gap: clamp(2rem, 3vw, 6rem);
}

.navi-message__flex-warapper.--step-01{
  margin: 25rem 3rem 0;
}

.navi-message__flex-warapper.--step-02{
  margin: 20rem 3rem 0;
}

.navi-message__flex-warapper.--step-03{
  margin: 20rem 3rem 0;
}

.navi-message__left{
  margin: auto;
}

.navi-message__left:last-child {
  margin-top: 3rem;
}

.navi-message__right{
  width: 45%;
}

.navi-index {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 2rem clamp(0.5rem,2vw,1rem);
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.navi-index::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background-color: #00adaa;
  border-radius: 50%;
}

/* 820px以下の記述 */
@media screen and (max-width: 820px) {
  .navi-message {
    flex-direction: column;
    align-items: center;
  }

  .navi-message__flex-warapper{
    flex-direction: column;
  }

  .navi-message__left{
    width: clamp(280px, 75vw, 360px);
  }

  .navi-message__left-warapper {
    grid-template-rows: auto auto;
    width: 70%;
  }

  .navi-message__left-navigator {
    margin: 0 auto;
  }

  .navi-message__left-fukidashi {
    display: none;
  }

  .navi-message__left-fukidashi-sp {
    display: block;
    grid-column: 1 / -1;
    margin: auto;
    max-width: 230px;
  }

  .navi-message__navigator {
    max-width: 70px;
    min-width: 70px;
  }
  
  .navi-message__columns {
    display: grid;
    grid-template-columns: 30% 60%;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }

  .navi-message__right {
    display: flex;
    flex-direction: column;
    width: clamp(280px, 75vw, 360px);
    margin: auto
  }

  .navi-message__right:last-child {
    margin-top: 3rem;
  }
}

/* 480px以下の記述 */
@media screen and (max-width: 480px) {
  .navi-message__flex-warapper.--step-01{
    margin: 20rem 0 3rem;
  }
  
  .navi-message__flex-warapper.--step-02{
    margin: 15rem 0 3rem;
  }

  .navi-message__flex-warapper.--step-03{
    margin: 15rem 0 3rem;
  }

  .navi-message__left-warapper {
    grid-template-rows: auto auto;
    width: 90%;
  }
}

  /* 360px以下の記述 */
  @media screen and (max-width: 360px) {
    .navi-sozailist__flex {
      padding: 0 1rem;
    }
  }
/* /navi-message */  


/* onayami */ 
  .beginner-onayami__title-wrapper{
    position: relative;
  }
  
  .beginner-onayami{
    position: relative;
    padding-top: clamp(100px,20vw,200px);
  }
  
  .beginner-onayami__title-position{
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(25%, -10%);
    z-index: 1;
  }
  
  .beginner-onayami__title-img{
    width: clamp(100px, 20vw, 170px);
  }
  
  .beginner-onayami__wrapper{
    margin: clamp(5rem, 8vw, 10rem) auto 0;
  }
  
  .beginner-onayami__lead-wrapper {
    position: relative;
    width: clamp(150px, 35vw, 260px);
    margin: auto;
  }
  
  .beginner-onayami__lead-kokomo{
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-20%, 0%);
  }
  
  .beginner-onayami__lead-komattasan{
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(15%, 50%);
  }
  
  .beginner-onayami__img{
    width: clamp(130px, 15vw, 150px);
    margin: 1rem auto;
  }
  
  .beginner-onayami__onayami{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    font-family: "Sichandich", sans-serif;
    font-weight: normal;
    white-space: nowrap;
  }
  
  .beginner-onayami__text-wrapper{
    position: relative;
    width: clamp(280px, 52vw, 490px);
    margin: auto;
  }
  
  .beginner-onayami__text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    text-align: center;
    white-space: nowrap;
  }
/* /onayami */  


/* beginner-accordion */
.beginner-accordion {
  width: 100%;
}

.beginner-accordion__title-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 900px;
  margin: auto;
  margin-bottom: -1rem;
  padding: 0 clamp(1rem,3vw,5rem);
  gap: 1rem;
}

.beginner-accordion__title-img{
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 3vw, 4rem);
}

.beginner-accordion__beginner-img{
  max-width: clamp(90px, 15vw, 130px);
}

.beginner-accordion__navi-img{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: -5.4rem;
  z-index: 2; 
}

.beginner-accordion__check{
  font-family: din-2014, sans-serif;
  font-weight: bolder;
  letter-spacing: -0.05rem;
  font-size: clamp(1.3rem,4vw,2rem);
}

.beginner-accordion__fukidashi {
  display: flex;
  justify-content: center;
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: #333;
  line-height: 1.6;
  white-space: nowrap;
  margin: 0 auto 2rem;
}

.beginner-accordion__yuudou{
  max-width: clamp(70px, 12vw, 110px);
  z-index: 1;
}

.beginner-gimon__toggle{
  width: 100%;
}

.beginner-gimon__title-text.--step-01{
  background-color: #00accd;
  padding: clamp(.5rem,4vw,3rem);
  border-radius: 0 0 15px 15px;
}

.beginner-gimon__title-text.--step-02{
  background-color: #d0a700;
  padding: clamp(.5rem,4vw,3rem);
  border-radius: 0 0 15px 15px;
}

.beginner-gimon__title-text.--step-03{
  background-color: #00accd;
  padding: clamp(.5rem,4vw,3rem);
  border-radius: 0 0 15px 15px;
}

.beginner-gimon__wrapper {
  position: relative;
  z-index: 1;
}

.beginner-gimon__wrapper {
  display: flex;
  align-items: center;
  max-width: 900px;
  justify-content: space-between;
  margin: auto;
}

.beginner-gimon{
  display: flex;
  align-items: center;
  margin: auto;
}

.beginner-gimon__text {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.8;
  color: #fff;
  width: 90%;
  font-family: Sichandich, sans-serif;
  font-weight: normal;
}

.beginner-gimon__arrow {
  position: relative;
  display: inline-block;
  width: clamp(30px, 12vw, 80px);
  height: clamp(2px, 2vw, 5px);
  margin: 25.5px 0;
  border-radius: 9999px;
  background-color: #fff;
}

.beginner-gimon__arrow::before,
.beginner-gimon__arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 0;
  width: clamp(15px,3vw,22px);
  height: clamp(2px, 2vw, 5px);
  border-radius: 9999px;
  background-color: #fff;
  transform-origin: calc(100% - 2px) 50%;
}

.beginner-gimon__arrow::before {
  transform: rotate(45deg);
}

.beginner-gimon__arrow::after {
  transform: rotate(-45deg);
}

.beginner-gimon__button {
  position: relative;
  display: block;
  width: clamp(60px, 8vw, 90px);
  height: clamp(60px, 8vw, 90px);
  background-color: #fff;
  border-radius: 50%;
  margin-right: 5.5rem;
}

.beginner-gimon__button::before,
.beginner-gimon__button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.beginner-gimon__button.--step-01::before,
.beginner-gimon__button.--step-01::after {
  background-color: #00accd;
}

.beginner-gimon__button.--step-02::before,
.beginner-gimon__button.--step-02::after {
  background-color: #d0a700;
}

.beginner-gimon__button.--step-03::before,
.beginner-gimon__button.--step-03::after {
  background-color: #00accd;
}

.beginner-accordion__panel.open {
  position: relative;
  padding-bottom: 5rem;
  margin-top: -1.2rem;
  border-radius: 0 0 15px 15px;
}

.beginner-accordion__panel.open::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  z-index: 2;
}

.beginner-accordion__panel.--step-01.open {
  background-color: #d6f0f5;
}

.beginner-accordion__panel.--step-01.open::before {
  background-color: #00accd;
}

.beginner-accordion__panel.--step-02.open {
  background-color: #fbf3d4;
}

.beginner-accordion__panel.--step-02.open::before {
  background-color: #d0a700;
}

.beginner-accordion__panel.--step-03.open {
  background-color: #d6f0f5;
}

.beginner-accordion__panel.--step-03.open::before {
  background-color: #00accd;
}

.beginner-gimon__button::before {
  width: clamp(2.5rem,3vw,4rem);
  height: clamp(3px,3vw,5px);
  border-radius: 2px;
}

.beginner-gimon__button::after {
  width: clamp(3px,3vw,5px);
  height: clamp(2.5rem,3vw,4rem);
  border-radius: 2px;
}

/* open で縦線を消して「−」に */
.beginner-gimon__button.open::after {
  display: none;
}

.beginner-accordion__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: all 0.5s ease;
}

.beginner-accordion__panel.open {
  max-height: 10000px; /* 十分大きな数値にしておく */
  opacity: 1;
  transform: scaleY(1);
}

.navi-teian__title-wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.5rem, 3vw, 2rem);
}

.beginner-accordion__goteiann{
  position: relative;
}

.beginner-accordion__goteiann-img{
  width: clamp(180px, 25vw, 210px);
  margin: 1rem auto;
}

.beginner-accordion__goteiann-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -67%);
  color: #fff;
  font-size: clamp(1.8rem, 2vw, 2rem);
}

.navi-teian__title{
  font-size:  clamp(1.7rem, 5.5vw, 3rem);
}

.navi-teian__navigator{
  width: 40%;
  margin: 2rem auto;
  max-width: 180px;
}

.navi-teian__message{
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.6;
  margin-top: 2rem;
  font-weight: 500;
}

.navi-teian__fukidashi-wrapper{
  margin: 3rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.navi-teian__fukidashi-lists{
  margin: 1rem 0;
}

.navi-teian__fukidashi-list{
  display: flex;
  align-items: center;
  margin: 1rem 0;
}

.navi-teian__fukidashi-list::before{
  display: block;
  content: "";
  background-image: url(https://www.akig-hyo.com/cdnassets/beginner/img/checkbox.webp);
  width: clamp(20px, 4vw, 35px);
  height: clamp(20px, 4vw, 35px);
  background-image: url(https://www.akig-hyo.com/cdnassets/beginner/img/checkbox.webp);
  background-size: contain;
  background-repeat: no-repeat;
}

.navi-teian__fukidashi-etc{
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  margin-left: 1rem;
}

.navi-teian__button {
  text-align: center;
  margin: 2rem auto;
}

.navi-teian__button a {
  display: inline-block;
  padding: clamp(.5rem, 2vw, 1rem) 3rem; 
  font-size: clamp(1.2rem, 3.5vw, 2rem);
  border-radius: 50px;
  text-decoration: none; 
}

.navi-teian__button.--step-01 a {
  background-color: #95d6e9;
}

.navi-teian__button.--step-02 a {
  background-color: #eedc94;
}

.navi-teian__button.--step-03 a {
  background-color: #95d6e9;
}

.beginner-kaiketsu{
  display: flex;
  align-items: center;
  gap: clamp(1rem,2vw,3rem);
  justify-content: center;
}

.beginner-kaiketsu__text{
  font-size: clamp(1.4rem, 3vw, 1.8rem);
}

.beginner-kaiketsu__text span {
  display: inline-block;
  border-bottom: 1px solid #333;
  padding-bottom: 1px;
}

.beginner-kaiketsu__mame{
  max-width: clamp(40px,5vw,60px);
  margin-right: 1rem;
}

.beginner-kaiketsu__img.--step-01{
  max-width: clamp(50px,6vw,70px);
}

.beginner-kaiketsu__img.--step-02{
  max-width: clamp(60px,7vw,80px);
}

.beginner-kaiketsu__img.--step-03{
  max-width: clamp(60px,7vw,80px);
}

.navi-shime {
  margin-top: 5rem;
}

.navi-shime__wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.navi-shime__navigator{
  max-width: clamp(70px,10vw,100px);
}

.navi-shime__fukidashi {
  position: relative;
  display: inline-block;
  margin-top: 20px;
  padding: 1.5rem clamp(1rem,4vw,20rem);
  border: 2px solid #333;
  border-radius: 8px;
  background-color: #fff;
  text-align: left;
  color: #333;
}

.navi-shime__fukidashi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent #333;
  translate: -50% -100%;
}

.navi-shime__fukidashi::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 7.9px 16.8px 7.9px;
  border-color: transparent transparent #fff;
  translate: -50% -100%;
}

.navi-shime__text{
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  text-align: center;
}

/* 1200px以下の記述 */
@media screen and (max-width: 1200px) {
  .beginner-gimon__button{
  margin-right: 3rem;
  }
}

/* 820px以下の記述 */
@media screen and (max-width: 820px) {
  .beginner-gimon__button{
    margin-right: 1rem;
    }

  .beginner-accordion__navi-img{
    margin-bottom: -3.5rem;
    margin-right: 1.5rem;
  }

  .beginner-accordion__yuudou{
    max-width: 70px;
  }

  .navi-teian__list {
    gap: 0.2rem;
    margin: 0.5rem 0;
  }

  .navi-teian__list-etc {
    transform: translate(clamp(5%, 4vw, 30%), 100%);
  }
}

/* 480px以下の記述 */
@media screen and (max-width: 480px) {

  .beginner-accordion__title-img{
    width: clamp(240px,90vw,400px);
    gap: 0;
    }
  
  .beginner-accordion__beginner-img{
    min-width: 50px;
  }

  .beginner-gimon__button{
    margin-right:0;
    width: clamp(50px, 6vw, 90px);
    height: clamp(50px, 6vw, 90px);
    }

  .beginner-accordion__panel.open {
    padding-bottom: 8rem;
  }

  .beginner-accordion__navi-img{
    margin-bottom: -2.9rem;
    margin-left: -6rem;
    margin-right: 0;
  }

  .beginner-accordion__yuudou{
    max-width: 60px;
  }

  .beginner-kaiketsu__mame{
    max-width: 40px;
  }

  .beginner-kaiketsu__img.--step-01{
    width: clamp(50px,25vw,80px)
  }

  .beginner-kaiketsu__img.--step-02{
    width: clamp(70px,35vw,100px)
  }

  .beginner-kaiketsu__img.--step-03{
    width: clamp(70px,35vw,100px)
  }
}

/* 400px以下の記述 */
@media screen and (max-width: 400px) {
  .beginner-accordion__fukidashi{
   margin-left: 0;
    }
  }

/* 360px以下の記述 */
@media screen and (max-width: 360px) {
  .navi-message__fukidashi{
    width: 250px;
}

  .beginner-accordion__navi-img{
    margin-bottom: -2.6rem;
  }
}
/* /beginner-accordion */
/* /point1～3の共通 */


/*/beginner-step01専用*/
.navi-teian__gallery-wrapper {
  overflow-x: auto;
  padding: 5rem 0 2rem;
  /* スクロールバー非表示 */
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none;    /* Firefox */
}

.navi-teian__gallery-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.navi-teian__gallerys {
  display: flex;
  gap: 1rem;
  padding: 0 1rem;
  margin: 0;
  list-style: none;
  width: max-content;
}

.navi-teian__gallery {
  flex-shrink: 0;
  width: calc((130vw - 2rem) / 8);
  max-width: 160px;
  scroll-snap-align: start;
}

.navi-teian__gallery img {
  width: 100%;
  height: auto;
  display: block;
}

/* 吹き出しhttps://webspe.net/tools/speech-bubble/ */
.navi-teian__fukidashi.--step-01 {
  position: relative;
  display: inline-block;
  margin-top: 20px;
  padding: clamp(2.4rem ,5vw, 5rem);
  border: 2px solid #333333;
  border-radius: 20px;
  background-color: #ffffff;
  font-size: clamp(1.4rem, 3vw, 1.6rem);
}

.navi-teian__fukidashi.--step-01::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent #333333;
  translate: -50% -100%;
}

.navi-teian__fukidashi.--step-01::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 7.8px 15.5px 7.8px;
  border-color: transparent transparent #ffffff;
  translate: -50% -100%;
}

.navi-sozailists {
  padding: 0;
  margin: 0;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
}

.navi-sozailist {
  border-bottom: 1px solid #333;
}

.navi-sozailist:first-child {
  border-top: 1px solid #333;
}

.navi-sozailist__flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}

.navi-sozailist__flex:hover {
  transform: translateY(-2px); 
}

.navi-sozailist__flex::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(-45deg);
}

.navi-sozailist__text--sozaiimg {
  height: 70px;
  object-fit: contain;
  margin-top: 5px;
  margin-bottom: -5px;
}

.navi-sozailist__text--sozaiimg.--stainless {
  max-width: clamp(60px, 10vw, 110px);
}

.navi-sozailist__text--sozaiimg.--tile {
  max-width: clamp(80px, 12vw, 110px);
  margin-left: clamp(2rem,6vw,4rem);
}

.navi-sozailist__text--sozaiimg.--glass {
  max-width: clamp(60px, 10vw, 100px);
  margin-left: 5rem;
}

.navi-sozailist__text--sozaiimg.--wood {
  max-width: clamp(50px, 10vw, 80px);
  margin-left: clamp(8rem,8vw,10rem);
}

.navi-search {
  padding: 0 2rem;
}

.navi-list__text--keyword {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  color: #888888;
  margin: 1rem auto 2rem;
  white-space: nowrap;
}

.navi-list__text--keyword:first-child {
  margin-top: 0;
}

.navi-list__text--keyword.--colored {
  color: #947438;
}

.navi-form__input {
  flex: 1;
  padding: 1rem;
  border: 1px solid #333333;
  border-radius: 20px;
  width: 250px;
}

.navi-form {
  position: relative;
  margin: 1rem auto 2rem;
}

.navi-form__input {
  padding-left: 3rem;
  font-family: hiragino-kaku-gothic-pron, sans-serif;
  font-size: 1.4rem;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  width: 100%;
}

.navi-form__button {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(-100%, 45%);
  background-image: url(https://www.akig-hyo.com/cdnassets/beginner/img/search.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 25px;
  height: 26px;
  object-fit: contain;
}

.navi-search__keyword {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding-left: 0;
  margin: 1rem auto 2rem;
}

.navi-list__popular-keyword{
  padding: 0 2rem;
}

.navi-search__keyword-item {
  display: flex;
  justify-content: center;
  background-color: #00ada9;
  border-radius: 100px;
  padding: 0.7rem 1.2rem;
  white-space: nowrap;
  color: #fff;
  font-size: clamp(1.2rem, 2vw, 1.4rem); 
  width: fit-content;
}

.navi-search__keyword-item:hover {
  transform: translateY(-2px); 
}

.navi-search__keyword-item::before {
  content: "#";
  display: block;
  width: clamp(1.3rem, 1vw, 1.8rem);
  height: clamp(1.3rem, 1vw, 1.8rem);
}

.navi-search__keyword-item a{
color: #fff;
}

/* 820px以下の記述 */
@media screen and (max-width: 820px) { 
  .navi-search__wrapper{
    display: flex;
    flex-direction: column;
  }

  .navi-search__keyword{
    grid-template-columns: 1fr 1fr;
   }
  }

/* 700px以下の記述 */
@media screen and (max-width: 700px) {
  .navi-search__wrapper{
    display: block;
  }

  .navi-search__keyword{
    grid-template-columns: 1fr 1fr 1fr;
  }
}

  /* 480px以下の記述 */
  @media screen and (max-width: 480px) {
    .navi-sozailist__text--sozaiimg {
      margin-top: -5px;
    }
  
    .navi-sozailist__text--sozaiimg {
      margin-bottom: -10px;
    }
  
    .navi-search__keyword-item {
      letter-spacing: 0;
    }

    .navi-teian__gallery {
      width: calc((130vw - 2rem) / 4);
    }
}

  /* 360px以下の記述 */
@media screen and (max-width: 360px) {
  .navi-sozailist__flex {
    padding: 0 1rem;
  }
}
/* /beginner-step01専用*/


/*/beginner-step02専用*/
.navi-shinpai__lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-right:2rem;
  padding-left: 0.5rem;
}

.navi-shinpai__list {
  display: flex;
  gap: clamp(0.5rem, 2vw, 1rem);
  font-size: clamp(1.4rem, 2vw, 2rem);
  align-items: center;
  white-space: nowrap;
  margin: 1rem 0;
  padding-right: 2rem;
}

.navi-shinpai__list::before {
  content: "";
  display: block;
  background-image: url(https://www.akig-hyo.com/cdnassets/beginner/img/checkbox.webp);
  width: clamp(20px, 3rem, 35px);
  height: clamp(20px, 3rem, 35px);
  background-image: url(https://www.akig-hyo.com/cdnassets/beginner/img/checkbox.webp);
  background-size: contain;
  background-repeat: no-repeat;
}

.navi-teian__sekoupattern{
  display: flex  ;
  gap: clamp(1rem,2rem,2rem);
  justify-content: center;
  margin: 6rem 0;
}

.navi-teian__sekoupattern-img{
  position: relative;
  max-width: 390px;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  background-color: #fff;
  width: clamp(150px, 40vw, 350px);
}

.navi-teian__sekoupattern-img.--haritsuke::before {
  content: "貼付け施工";
  position: absolute;
  top: -34px;
  left: 0;
  width: 100%;
  padding: 0.3em 0.5em;
  background: rgba(0, 0, 0, 0.7); /* 黒帯 */
  color: #fff; /* 白文字 */
  font-size: 1.4rem;
  text-align: center;
}

.navi-teian__sekoupattern-img.--anaake::before {
  content: "穴あけ施工";
  position: absolute;
  top: -34px;
  left: 0;
  width: 100%;
  padding: 0.3em 0.5em;
  background: rgba(0, 0, 0, 0.7); /* 黒帯 */
  color: #fff; /* 白文字 */
  font-size: 1.4rem;
  text-align: center;
}

.navi-teian__sekoupattern-text{
  max-width: clamp(150px, 40vw, 350px); /* 画像と同じ幅に */
  margin: 0 auto;
  padding: clamp(.8rem,3vw,1.5rem) clamp(1.5rem,3vw,2.2rem) clamp(1.5rem,3vw,2rem);
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  line-height: 1.6;
}

.navi-teian__toritsuke-image{
  width: clamp(150px, 40vw, 350px);
  height: clamp(100px, 25vw, 190px);
  object-fit: cover;
}

.navi-teian__haritsuke-item{
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(clamp(2px, 2vw, 20px), clamp(60px, 15vw, 120px));
  width: clamp(30px, 5vw, 60px);
}

.navi-teian__anaake-items{
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(20px, clamp(70px,18vw,135px));
  display: flex;
  justify-content: space-around;
  width: clamp(150px, 40vw, 350px);
}

.navi-teian__anaake-item--neji{
  width: clamp(20px,5vw,40px);
  margin-top: -70%;
  margin-left: -22%;
  object-fit: contain;
}

.navi-teian__anaake-item--drill{
  width: clamp(40px,8vw,80px);
}

.navi-teian__fukidashi.--step-02 {
  position: relative;
  display: inline-block;
  margin-bottom: 24px;
  padding: clamp(2.4rem ,5vw, 5rem);
  border: 2px solid #333333;
  border-radius: 20px;
  background-color: #ffffff;
  font-size: clamp(1.4rem, 3vw, 1.6rem);
}

.navi-teian__fukidashi.--step-02::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 24px 12px 0 12px;
  border-color: #333333 transparent transparent;
  translate: -50% 100%;
}

.navi-teian__fukidashi.--step-02::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 19.5px 9.8px 0 9.8px;
  border-color: #ffffff transparent transparent;
  translate: -50% 100%;
}

.navi-teian__hayamihyo-wrapper {
  margin-top: 30px;
}

.navi-teian__hayamihyo-title{
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 3rem);
  padding: 1rem;
}

.navi-teian__mark-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  gap: clamp(1rem, 3vw, 2rem);
}

.navi-teian__mark {
  display: flex;
  align-items: center;
  gap: clamp(.5rem,2vw,1rem);
  white-space: nowrap;
  font-size: clamp(1.2rem, 3vw, 2rem);
}

.navi-teian__mark img {
  max-width: clamp(30px,5vw,50px);
  max-height: clamp(30px,5vw,50px);
  object-fit: contain;
}

.navi-shime.--step-02{
  background-color: #f7e8b0;
  padding: 1rem 1.5rem 3rem;
}

.navi-shime02__message-wrapper {
  position: relative;
  max-width: 750px;
  margin: auto;
  margin-top: clamp(1rem,4vw,6rem);
}

.navi-shime02__message-text-start {
  position: absolute;
  top: 0;
  left: 10%;
  font-family: ads-tomorrowskip, sans-serif;
  font-size: clamp(2rem, 3vw, 3rem);
}

.navi-shime02__message-text {
  font-size: clamp(2rem, 3vw, 2.5rem);
  text-align: center;
  margin-top: clamp(2rem, 3vw, 3rem);
  padding-top: clamp(4rem, 5vw, 6rem);
}

.navi-shime02__message-text.--fontbig {
  font-size: clamp(2.5rem, 4vw, 4rem);
  margin-top: clamp(1rem, 2vw, 2rem);
  padding-top: 0;
}

.navi-shime02__fukidashi {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  padding: clamp(14px,4vw,24px) clamp(8px,3vw,16px);
  border: 2px solid #333333;
  border-radius: 20px;
  background-color: #ffffff;
  text-align: left;
  font-size: clamp(1.4rem, 3vw, 1.6rem);
  line-height: 1.5;
  color: #333333;
}

.navi-shime02__fukidashi::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 27%;
  border-style: solid;
  border-width: 20px 10px 0 10px;
  border-color: #333333 transparent transparent;
  translate: -50% 100%;
}

.navi-shime02__fukidashi::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 27%;
  border-style: solid;
  border-width: 15.5px 7.8px 0 7.8px;
  border-color: #ffffff transparent transparent;
  translate: -50% 100%;
}

.navi-shime02__wariai {
  font-family: century-gothic, sans-serif;
  font-size: clamp(4.5rem, 5vw, 6rem);
  text-align: center;
}

.navi-shime02__message-img {
  display: flex;
  flex-direction: column;
  min-width: 80px;
  width: 20%;
}

.navi-shime02__message-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 15vw, 8rem)
}

.navi-shime02__fukidashi {
  width: clamp(130%, 30vw, 150%);
}

.navi-shime02__navigator {
  max-width: 150px;
}

.navi-shime02__en-graph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  min-width: 150px;
  width: 50%;
}

.navi-shime02__q{
  font-size: clamp(1.2rem, 3vw, 2rem);
  white-space: nowrap;
}

.navi-shime02__bou-graph{
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: clamp(2rem, 7vw, 6rem);
}

.navi-shime02__data-info{
  text-align: right;
  margin-top: clamp(.5rem, 2vw, 1rem);
  font-size: clamp(1rem, 2vw, 1.4rem);
}

@media screen and (max-width: 820px) {
  .navi-shinpai__lists{
    grid-template-columns: 1fr;
    padding-right:0;
  }

  .navi-shinpai__list{
    padding-right:0;
  }

  .navi-teian__hayamihyo {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .navi-teian__hayamihyo img {
    min-width: clamp(400px, 120vw, 820px);
    display: block;
  }
}

/* 600px以下（イレギュラー）の記述 */
@media screen and (max-width: 600px) {
  .navi-shime02__message-text-start {
    left: 0%;
}
}

/* 480px以下の記述 */
@media screen and (max-width: 480px) {
.navi-teian__message.--step-02 {
  transform: translate(-75%, 70%);
}

.navi-shime02__message-text-start {
  position: absolute;
  top: 0;
  left: 10%;
  font-family: ads-tomorrowskip, sans-serif;
  font-size: clamp(2rem, 3vw, 3rem);
}

.navi-shime02__message-text {
  font-size: clamp(1.4rem, 4vw, 2rem);
  text-align: center;
  margin-top: clamp(2rem, 3vw, 3rem);
  padding-top: clamp(4rem, 5vw, 6rem);
}

.navi-shime02__message-text.--fontbig {
  font-size: clamp(2rem, 5vw, 2.5rem);
  margin-top: clamp(1rem, 2vw, 2rem);
  padding-top: 0;
}

.navi-teian__sekoupattern{
  gap: clamp(0.5rem,2rem,1rem);
}

.navi-shime02__wariai {
  font-family: century-gothic, sans-serif;
  font-size: clamp(3.5rem, 6vw, 4.5rem);
  text-align: center;
}
}
/* /beginner-step02専用*/


/*/beginner-step03専用*/
.navi-option__lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-right:2rem;
  padding-left: .5rem;
}

.navi-option__list {
  display: flex;
  gap: clamp(0.5rem, 2vw, 1rem);
  font-size: clamp(1.4rem, 2vw, 2rem);
  align-items: center;
  margin: 1rem 0;
  padding-right: 2rem;
  white-space: nowrap;
}

.navi-option__list::before {
  content: "";
  display: block;
  background-image: url(https://www.akig-hyo.com/cdnassets/beginner/img/checkbox.webp);
  width: clamp(20px, 3rem, 35px);
  height: clamp(20px, 3rem, 35px);
  background-image: url(https://www.akig-hyo.com/cdnassets/beginner/img/checkbox.webp);
  background-size: contain;
  background-repeat: no-repeat;
}

.navi-option__list-etc{
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  margin-left: 1rem;
}

.carousel-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 12rem auto;
  overflow: visible;
  padding: 0 clamp(20px,10vw,60px);
}

.carousel-track-wrapper {
  overflow: visible;
  position: relative;
  width: 100%;
}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 auto;
  margin-right: 100px;
  opacity: 0.5;
  transform: scale(1);
  transition: transform 0.3s, opacity 0.3s;
  display: flex;
  flex-direction: column;  
  align-items: center;  
}

.carousel-slide:last-child {
  margin-right: 0;
}

.carousel-slide.active {
  transform: scale(1.3);
  opacity: 1;
}

.carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
  max-width: clamp(190px, 60vw, 300px);
  max-height: clamp(190px, 60vw, 300px);
}

.caption {
  position: relative; 
  text-align: left;
  margin-top: 50px;
  font-size: 1.1rem;
  font-weight: 500;
  transform: none;
  width: clamp(200px, 38vw, 400px);
}

.caption.--caution {
  padding-left: 1em;   
  text-indent: -1em; 
}

.beginner-nav {
  position: absolute;
  top: 0;
  transform: translate(0, 200%);
  background: #00ada9;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  font-size: 18px;
  font-family: 'Oswald';
  font-weight: bolder;
  border-radius: 50%;
  color: #fff;
  width: clamp(15px, 5vw, 30px);
  height: clamp(15px, 5vw, 30px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.beginner-nav.beginner-prev {
  left: 0px;
}

.beginner-nav.beginner-next {
  right: 0px;
}

.indicators {
  text-align: center;
  margin-top: -190px;
  margin-bottom: 200px;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ccc;
  margin: 0 5px;
  transition: background 0.3s;
  border-radius: 50%;
}

.dot.active {
  background: #333;
}

.dot-border {
  width: 100%;
  height: 12px;
  background-image: repeating-radial-gradient(circle, #fff 0px,#fff 5px, transparent 6px, transparent 16px);
  background-size: 30px 12px;
  margin: 10rem auto;
}

.navi-shime03__message-flex{
  display: flex;
  gap: clamp(2rem, 3vw, 4rem);
  justify-content: center;
  align-items: flex-end;
  margin-top: 5rem;
}

.navi-shime03__message-innerflex{
  position: relative;
  max-width: 100px;
  min-width: 100px;
}

.navi-shime03__message-flex:nth-of-type(2){
  flex-direction: row-reverse;
}

.navi-shime03__C-img-bigq{
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-30%, -100%);
  width: clamp(10px, 4vw, 30px);
}

.navi-shime03__C-img-smallq{
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(150%, -140%);
  width: clamp(5px, 3vw, 20px);
}

.navi-shime03__C-img img:nth-of-type(2){
  position: absolute;
  top: 0;
  right: 0%;
  transform: translate(40%, -70%);
  width: clamp(20px,8vw,50px);
}

.navi-shime03__C-fukidashi {
  position: relative;
  display: inline-block;
  margin-bottom: 13px;
  padding: clamp(14px,4vw,24px) clamp(10px,3vw,30px);
  border: 2px solid #333333;
  border-radius: 20px;
  background-color: #ffffff;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
}

.navi-shime03__C-fukidashi::before {
  content: "";
  position: absolute;
  top: 68%;
  left: 0;
  border-style: solid;
  border-width: 7px 14px 7px 0;
  border-color: transparent #333333 transparent transparent;
  translate: -100% -50%;
}

.navi-shime03__C-fukidashi::after {
  content: "";
  position: absolute;
  top: 68%;
  left: 0;
  border-style: solid;
  border-width: 4.8px 9.5px 4.8px 0;
  border-color: transparent #ffffff transparent transparent;
  translate: -100% -50%;
}

.navi-shime03__navi-img{
  max-width: 100px;
  min-width: 100px;
}

.navi-shime03__navi-img-attention{
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(30%, -80%);
  width: clamp(20px, 5vw, 40px);
}

.navi-shime03__navi-fukidashi {
  position: relative;
  display: inline-block;
  margin-bottom: 13px;
  padding: clamp(14px,4vw,24px) clamp(10px,3vw,30px);
  border: 2px solid #333333;
  border-radius: 20px;
  background-color: #ffffff;
  color: #333333;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
}

.navi-shime03__navi-fukidashi::before {
  content: "";
  position: absolute;
  top: 68%;
  right: 0;
  border-style: solid;
  border-width: 7px 0 7px 14px;
  border-color: transparent transparent transparent #333333;
  translate: 100% -50%;
}

.navi-shime03__navi-fukidashi::after {
  content: "";
  position: absolute;
  top: 68%;
  right: 0;
  border-style: solid;
  border-width: 4.8px 0 4.8px 9.5px;
  border-color: transparent transparent transparent #ffffff;
  translate: 100% -50%;
}

.navi-shime03__navi-text-underline{
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  display: inline;
  background-image: url('https://cdn.shopserve.jp/akig-hyo.com/cdnassets/beginner/img/step03_navi-underline.webp');
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 100%;
  white-space: nowrap;
}

.navi-shime03__designsample{
  display: block;
  text-align: center;
  margin-top: 7rem;
  font-size: clamp(1.5rem,3vw,2rem);
}

/* 820px以下の記述 */
@media screen and (max-width: 820px) {
  .navi-option__lists {
    grid-template-columns: 1fr;
    padding-right: 0;
  }

  .navi-option__list {
    padding-right: 0;
  }

  .navi-option__list-etc{
    margin-top: 0;
  }

  .navi-shime03__navi-img{
    max-width: 60px;
    min-width: 60px;
  }

  .navi-shime03__message-innerflex{
    max-width: 60px;
    min-width: 60px;
  }

}

/* 780px以下の記述 */
@media screen and (max-width: 780px) {
  .indicators {
    margin-top: -210px;
  }
}

/* 600px以下の記述 */
@media screen and (max-width: 600px) {
  .indicators {
    margin-top: -240px;
  }
}

/* 480px以下の記述 */
@media screen and (max-width: 480px) {
  .beginner-nav.beginner-prev {
    left: -10px;
  }
  
  .beginner-nav.beginner-next {
    right: -10px;
  }
}
/* /beginner-step03専用 */


/* Q&A */
.beginner-qa{
  margin-top: 10rem;
  max-width: 900px;
  text-align: center;
  padding: clamp(8rem, 10vw, 12rem) clamp(1rem, 3vw, 2rem) clamp(3rem, 5vw, 6rem);
}

.beginner-qa__title-wrapper{
  margin-bottom: 3rem;
}

.beginner-qa__flex{
 display: flex;
 justify-content: center;
 align-items: flex-start;
 gap: clamp(1rem, 3vw, 5rem);
}

.beginner-qa__title{
 background-color: #f3f2eb;
 border-radius: 5px;
 padding: 1.5rem 3rem;
 font-size: clamp(1.6rem,4vw,2.5rem);
}

.beginner-qa__title.--qa{
  padding: 1.5rem 10rem;
}

.beginner-qa__lead{
  font-size: clamp(1.4rem, 3vw, 1.6rem);
  font-weight: 500;
  margin: 2rem auto clamp(4rem,7vw,7rem);
}

.beginner-qa__bloc{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.beginner-qa__wrapper{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.beginner-qa__q-bloc{
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.beginner-qa__q{
  font-size: clamp(2.5rem, 4vw, 3rem);
  color: #00ada9;
  font-weight: 900;
}

.beginner-qa__q-fukidashi{
  display: flex  ;
  align-items: center;
  justify-content: space-around;
  padding: 15px 20px;
  border: 3px solid #00ada9;
  border-radius: 100px;
  background-color: #ffffff;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  text-align: left;
  line-height: 1.6;
  width: clamp(280px, 94vw, 630px);
  margin-bottom: 2rem;
}

.beginner-qa__q-wrapper {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.beginner-qa__q-text-wrapper{
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  width: clamp(220px, 100vw, 420px);
}

.beginner-qa__q-button {
  position: relative;
  display: block;
  width: clamp(60px, 8vw, 90px);
  height: clamp(20px, 3vw, 30px);
  background-color: #fff;
  border-radius: 50%;
}

.beginner-qa__q-button::before,
.beginner-qa__q-button::after {
  content: "";
  position: absolute;
  background-color: #00ada9;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 横線（－） */
.beginner-qa__q-button::before {
  width: 3rem;  /* 丸の半分くらいの長さ */
  height: 4px; /* 線の太さ */
  border-radius: 2px;
}

/* 縦線（＋のときだけ見える） */
.beginner-qa__q-button::after {
  width: 4px;  /* 線の太さ */
  height: 3rem; /* 丸の半分くらいの長さ */
  border-radius: 2px;
}

.beginner-qa__q-fukidashi.open .beginner-qa__q-button::after {
  display: none; /* 縦線を消して - に */
}

.beginner-qa__a-fukidashi {
  border: 3px solid #ed6e1f;
  border-radius: 30px;
  background-color: #ffffff;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  text-align: left;
  line-height: 1.6;
  width: clamp(280px, 94vw, 630px);
  /* 初期状態は隠す */
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  overflow: hidden;
  /* 時間を長くしてゆっくり表示 */
  transition: max-height 0.7s ease, opacity 0.7s ease, transform 0.7s ease;
}

.beginner-qa__a-fukidashi.show {
  max-height: 500px; /* 回答の高さより少し大きめ */
  opacity: 1;
  transform: translateY(0);
}

.beginner-qa__a-fukidashi.--a-03.show {
  max-height: 830px; /* 回答の高さより少し大きめ */
}

.beginner-qa__a-wrapper{
  display: flex  ;
  align-items: center;
  justify-content: space-around;
  margin: 2rem;
}

.beginner-qa__a-text-lead-wrapper{
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  width: clamp(220px, 100vw, 420px);
}

.beginner-qa__a{
  color: #ed6e1f;
  font-size: clamp(2.5rem, 4vw, 3rem);
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 800;
}

.beginner-qa__a-text-lead{
  color: #ed6e1f;
  font-family: "Sichandich", sans-serif;
  font-size: clamp(2rem, 3vw, 2.5rem);
  font-weight: 500;
}

.beginner-qa__a-text-wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2rem auto;
  width: clamp(170px, 80vw, 420px);
}

.beginner-qa__text-color{
  color: #ed6e1f;
}

.beginner-qa__a-text{
  margin-bottom: 1rem;
  text-align: left;
}

.beginner-qa__navi{
  width: 100px;
}

.beginner-qa__img{
  margin-top: 1rem;
  max-width: 350px;
}

/* 初期状態（非表示） */
.beginner-qa__designsample-wrapper {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.7s ease, opacity 0.7s ease;
}

/* 表示状態 */
.beginner-qa__designsample-wrapper.show {
  max-height: 500px; /* 画像の高さより少し大きめに */
  opacity: 1;
  margin: auto;
}

.beginner-qa__designsample-img {
  display: flex;
  gap: 1rem;
  max-width: 450px;
  align-items: flex-end;
  margin-bottom: 5rem;
}

.beginner-qa__designsample{
  min-width: 120px;
  object-fit: contain;
}

.beginner-qa__button {
  text-align: center;
  border: 2px solid #333;
  background-color: #fff;
  max-width: 50%;
  margin: 4rem auto;
  padding: clamp(.5rem,2vw,1rem) 0;
  font-size: clamp(1.2rem, 3.5vw, 2rem);
}

@media screen and (max-width: 820px) {
  .beginner-qa__flex{
    flex-direction: column;
    align-items: center;
   }

  .beginner-qa__bloc{
    margin-top: 5rem;
   }

   .beginner-qa__button{
    max-width: 70%;
   }
  }

@media screen and (max-width: 480px) {
  .beginner-qa__a-fukidashi{
    margin-right: 0;
  }
}
/* /Q&A */


/* support */
.beginner-support{
  text-align: center;
  padding: clamp(8rem, 10vw, 12rem) clamp(1rem, 3vw, 2rem) clamp(3rem, 5vw, 6rem);
}

.beginner-support__title-wrapper{
  margin-bottom: 3rem;
}

.beginner-support__title{
 background-color: #f3f2eb;
 border-radius: 5px;
 padding: 1rem 5rem;
 font-size: clamp(1.8rem,4vw,2.5rem);
}

.beginner-support__title-small{
  font-size: 1.4rem;
}

.beginner-support__lead{
  font-size: clamp(1.4rem, 3vw, 1.6rem);
  font-weight: 500;
  margin: 2rem auto clamp(4rem,7vw,7rem);
}

.beginner-support__slider-wrapper {
  overflow: hidden;
  width: 100%;
  cursor: grab; /* ドラッグ可能であることを示す */
}

.beginner-support__contents{
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem; 
  transition: transform 2s ease-in-out; 
}

.beginner-support__content{
  flex: 0 0 clamp(167px, calc(100% / 6.7 - 0.22rem), 200px); /* 6.7枚分の幅 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: solid 2px #333;
  border-radius: 5px;
  padding: 1rem clamp(0.5rem,2vw,1rem);
  height: 150px;
}

.beginner-support__img{
  max-width: 50px;
  height: 60px;
  object-fit: contain;
}

.beginner-support__img.--designhenkou{
  max-width: 130px;
}

.beginner-support__img.--torisetu{
  max-width: 60px;
}

.beginner-support__content-title{
  font-size: clamp(1.2rem,2vw,1.5rem);
  margin-top: 1rem;
}

@media screen and (max-width: 480px) {
  .beginner-support__title-wrapper{
    display: flex;
    justify-content: center;
  }

.beginner-support__contents{
  grid-template-columns: 1fr 1fr;
  max-width: 400px;
  margin: auto;
}

.beginner-support__content-title{
  font-size: 1.5rem;
}
}

@media screen and (max-width: 400px) {
  .beginner-support__content-title{
    font-size: clamp(1.1rem,2vw,1.3rem);
  }
}
/* /support */


/* review */
.beginner-review{
  background-color: #f1f1ec;
  padding: 5rem 0 8rem;
  margin: clamp(10rem, 5vw, 15rem) auto 0;
  text-align: center;
  margin: clamp(10rem,5vw,15rem) auto 0;
}

.beginner-review__title-wrapper{
  text-align: center;
  font-size: clamp(1.8rem,5vw,2.2rem);
  margin: 3rem auto 5rem;
}

.beginner-review__contents-wrapper{
  background-color: #f1f1ec;
}

.beginner-review__contents{
  display: flex  ;
  overflow-x: hidden; /* デフォルト（PC向け）は隠す */
  gap: 2rem;
  /* スクロールバーを非表示 */
}

.beginner-review__content{
  margin: 0 0 2rem clamp(1.5rem,2vw,3rem);
  min-width: 200px;
}

.beginner-review__content:first-child{
  margin: 0 0 2rem 5rem;
}

.beginner-review__content:last-child{
  margin: 0 5rem 2rem clamp(1.5rem,2vw,3rem);
}

.beginner-review__customer{
  max-width: 100px;
}

.beginner-review__heading{
  font-size: clamp(1.6rem,2vw,1.8rem);
  text-align: left;
  margin: 1.5rem;
  line-height:1.5;
}

.beginner-review__comment{
  font-size: clamp(1.4rem, 2vw, 1.6rem);
  font-weight: 500;
  text-align: left;
}

.beginner-review__button {
  text-align: center;
  border: 2px solid #333;
  background-color: #fff;
  max-width: 50%;
  margin: 4rem auto;
  padding: clamp(.5rem,2vw,1rem) 0;
  font-size: clamp(1.2rem, 3.5vw, 2rem);
}

/* 1020px以下のときだけ横スクロール可能にする */
@media (max-width: 1020px) {
  .beginner-review__contents {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOSでスムーズに */
  }
  .beginner-review__contents::-webkit-scrollbar {
    display: none; /* スクロールバー非表示 */
  }
}
/* /review */


/* shime */
.beginner-shime{
  margin: clamp(10rem, 5vw, 15rem) auto 0;
}

.beginner-shime__title-wrapper{
  font-size: clamp(1.8rem,5vw,2.2rem);
  margin: 3rem auto 7rem;
}

.beginner-shime__title{
  display: block;
  text-align: center;
}

.beginner-shime__contents{
  display: flex  ;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem;
}

.beginner-shime__content{
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 2px #2a2a2a;
  width: 250px;
  padding: 1rem;
  text-align: center;
  border-radius: 10px;
  height: 70px;
}

.beginner-shime__navi-owari{
  max-width: clamp(100px,5vw,150px);
  margin: clamp(15rem,5vw,20rem) auto 10rem;
}
/* /shime */