@charset "utf-8";
/*========================================
理由ページ
========================================*/


/*========================================
独自CSS
========================================*/
body {
	font-family: 'Zen Kaku Gothic New', sans-serif;
}

a{
	text-decoration: none;
	letter-spacing: 0.1rem;
}

h1,h2,h3,h4,h5,h6{
	letter-spacing: 0.1rem;
  margin: 0;
}

p{
	color: #000000;
	letter-spacing: 0.1rem;
  margin: 0;
}

ul{
	list-style: none;
	-webkit-padding-start: 0;
	        padding-inline-start: 0;
  margin: 0;
}

/*========================================
ページ全体適用
========================================*/
.site-reasons{
  position: relative;
  z-index: 1;
}

.site-container{
  max-width: calc(100% - 25rem);
  padding-left: 25rem;
  margin: 0 auto;
}
@media (max-width: 1536px) {
  .site-container{
    max-width: calc(100% - 24rem);
    padding-left: 24rem;
  }
}
@media (max-width: 1279px) {
  .site-container{
    max-width: 100%;
    padding-left: 0;
    padding: 0 2vw;
  }
}

/*========================================
ファーストビュー
========================================*/
.reasons-fv{
  max-width: 112rem;
  width: 100%;
  margin: 8.4rem auto 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 1279px) {
  .reasons-fv{
    max-width: 96rem;
  }
}

@media screen and (max-width: 900px) {
  .reasons-fv{
    max-width: 72rem;
    margin: 8.4rem auto 3.2rem;
  }
}

@media screen and (max-width: 600px) {
  .reasons-fv{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 60rem;
    margin: 0rem auto 6.4rem;
  }
}



.reasons-fv__box{
  max-width: 42%;
  width: 100%;
}

@media (max-width: 1279px) {
  .reasons-fv__box{
    padding: 0 1.5vw 0;
  }
}
@media (max-width: 900px) {
  .reasons-fv__box{
    max-width: 60%;
  }
}
@media (max-width: 600px) {
  .reasons-fv__box{
    max-width: 50%;
    min-width: 36rem;
    padding: calc(6rem + 4.8rem) 2vw 0;
  }
}


.reasons-fv__title{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  position: relative;
  background: linear-gradient(
    45deg,
    #FF8947 0%,
    #FF9B42 40%,
    #FFAD3D 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-bottom: 7.2rem;
  font-size: 4rem;
}
@media (max-width: 1279px) {
  .reasons-fv__title{
    font-size: 3.2rem;
  }
}
@media (max-width: 900px) {
  .reasons-fv__title{
    font-size: 2.8rem;
    margin-bottom: 4rem;
  }
}
@media (max-width: 600px) {
  .reasons-fv__title{
    font-size: 2.4rem;
    text-align: center;
  }
}

.reasons-fv__title::before {
  content: 'Reasons';
  position: absolute;
  top: 4.4rem;
  left: 0;
  font-family: 'Splash', cursive;
  font-size: 4.4rem;
  color: #8DB5BD;
  -webkit-text-fill-color: #8DB5BD;
  background: none;
  opacity: 0.22;
  transform: rotate(-6.9deg);
  z-index: -1;
  font-weight: 400;
}
@media (max-width: 1279px) {
  .reasons-fv__title::before{
    font-size: 3.2rem;
  }
}
@media (max-width: 900px) {
  .reasons-fv__title::before{
    font-size: 3.2rem;
  }
}
@media (max-width: 600px) {
  .reasons-fv__title::before{
    font-size: 3.2rem;
    top: 3.2rem;
    left: 50%;
    transform: translateX(-50%) rotate(-6.9deg);
    width: 100%;
    text-align: center;
  }
}

.reasons-fv__text{
  font-size: 2rem;
  margin-bottom: 5.6rem;
  line-height: 2;
}
@media (max-width: 1279px) {
  .reasons-fv__text{
    font-size: 2rem;
    margin-bottom: 0;
  }
}
@media (max-width: 900px) {
  .reasons-fv__text{
    font-size: 1.6rem;
    margin-bottom: 0;
  }
}
@media (max-width: 600px) {
  .reasons-fv__text{
    font-size: 1.6rem;
    max-width: 27.6rem;
    margin: 0 auto 4.8rem auto;
    text-align: center;
  }
}


.reasons-fv__pic{
  max-width: 60%;
  width: 100%;
}
@media (max-width: 1279px) {
  .reasons-fv__pic{
    max-width: 50%;
  }
}
@media (max-width: 900px) {
  .reasons-fv__pic{
    max-width: 60%;
    min-width: 28rem;
  }
}
@media (max-width: 600px) {
  .reasons-fv__pic{
    max-width: 100%;
  }
}


/*========================================
選ばれる理由（内容）
========================================*/

.reason-container{
  margin: 0 auto 6.4rem auto;
}

.reason-wrapper{
  max-width: 112rem;
  width: 100%;
  background-color: #fff;
  border-radius: 1.6rem;
  margin: 0 auto;
  padding: 6.4rem 4vw;
}
@media (max-width: 1536px) {
  .reason-wrapper{
    padding: 6.4rem 2vw;
  }
}
@media (max-width: 1024px) {
  .reason-wrapper{
    padding: 6.4rem 4vw;
  }
}
@media (max-width: 600px) {
  .reason-wrapper{
    padding: 3.2rem 4vw;
  }
}




/*========================================
知識豊富なスタッフによる提案力
========================================*/
.reason-proposal{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  margin-bottom: 7.2rem;
}
@media (max-width: 900px) {
  .reason-proposal{
    flex-direction: column;
    max-width: 80%;
    margin: 0 auto 7.2rem auto;
  }
}
@media (max-width: 600px) {
  .reason-proposal{
    max-width: 100%;
    margin: 0 auto 6.4rem auto;
  }
}

.reason-proposal__textarea{
  max-width: 60%;
  width: 100%;
  min-width: 49.8rem;
}
@media (max-width: 1536px) {
  .reason-proposal__textarea{
    min-width: 40rem;
  }
}
@media (max-width: 900px) {
  .reason-proposal__textarea{
    max-width: 100%;
  }
}
@media (max-width: 600px) {
  .reason-proposal__textarea{
    max-width: 100%;
    min-width: auto;
  }
}


.reason-proposal__textarea__title{
  font-size: 2.4rem;
  line-height: 1.8;
  letter-spacing: 0.1rem;
  background: linear-gradient(90deg, rgba(255, 137, 71, 0.7) 0%, rgba(255, 173, 61, 0.7) 100%);
  color: #fff;
  padding: 2.4rem 3.2rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top-right-radius: 3rem;
  border-bottom-left-radius: 3rem;
  text-align: center;
  letter-spacing: 0.3rem;
  margin-bottom: 1.6rem;
}
@media (max-width: 600px) {
  .reason-proposal__textarea__title{
    font-size: 2rem;
    padding: .8rem 2vw;
    margin-bottom: 2.4rem;
  }
}

.reason-proposal__textarea__title__br{
  display: none;
}
@media (max-width: 600px) {
  .reason-proposal__textarea__title__br{
    display: block;
  }
}

.reason-proposal__textarea__text{
  font-size: 1.6rem;
  line-height: 2.4;
  letter-spacing: 0.3rem;
  padding: 0 1em;
}
@media (max-width: 600px) {
  .reason-proposal__textarea__text{
    font-size: 1.4rem;
    line-height: 2;
    margin-bottom: 2.4rem;
  }
}

.reason-proposal__textarea__text__marker{
  background-color: #FFF7BA;
}

.reason-proposal__textarea__pic{
  max-width: 40%;
  width: 100%;
  min-width: 30rem;
}
@media (max-width: 900px) {
  .reason-proposal__textarea__pic{
    max-width: 66%;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
}
@media (max-width: 600px) {
  .reason-proposal__textarea__pic{
    max-width: 70%;
  }
}

/*========================================
あなたの街のSTC♪
========================================*/
.reason-city{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  margin-bottom: 7.2rem;
}
@media (max-width: 900px) {
  .reason-city{
    flex-direction: column-reverse;
    max-width: 80%;
    margin: 0 auto 7.2rem auto;
  }
}
@media (max-width: 600px) {
  .reason-city{
    max-width: 100%;
    margin: 0 auto 6.4rem auto;
  }
}

.reason-city__textarea{
  max-width: 60%;
  width: 100%;
  min-width: 49.8rem;
}
@media (max-width: 1536px) {
  .reason-city__textarea{
    min-width: 40rem;
  }

}
@media (max-width: 900px) {
  .reason-city__textarea{
    max-width: 100%;
  }
}
@media (max-width: 600px) {
  .reason-city__textarea{
    max-width: 100%;
    min-width: auto;
  }
}


.reason-city__textarea__title{
  font-size: 2.4rem;
  line-height: 1.8;
  letter-spacing: 0.1rem;
  background: #FFF5E7;
  padding: 2.4rem 3.2rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top-right-radius: 3rem;
  border-bottom-left-radius: 3rem;
  text-align: center;
  letter-spacing: 0.3rem;
  margin-bottom: 1.6rem;
}
@media (max-width: 600px) {
  .reason-city__textarea__title{
    font-size: 2rem;
    padding: .8rem 2vw;
    margin-bottom: 2.4rem;
    height: 4.4em;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.reason-city__textarea__title__br{
  display: none;
}
@media (max-width: 1536px) {
  .reason-city__textarea__title__br{
    display: block;
  }
}

.reason-city__textarea__text{
  font-size: 1.6rem;
  line-height: 2.4;
  letter-spacing: 0.3rem;
  padding: 0 1em;
}
@media (max-width: 600px) {
  .reason-city__textarea__text{
    font-size: 1.4rem;
    line-height: 2;
    margin-bottom: 2.4rem;
  }
}

.reason-city__textarea__text__marker{
  background-color: #FFF7BA;
}

.reason-city__textarea__pic{
  max-width: 40%;
  width: 100%;
  min-width: 30rem;
}
@media (max-width: 900px) {
  .reason-city__textarea__pic{
    max-width: 66%;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
}
@media (max-width: 600px) {
  .reason-city__textarea__pic{
    max-width: 70%;
  }
}


/*========================================
静かな環境でゆっくり機種やサービスを選べる
========================================*/

.reason-environment{
  
}

@media (max-width: 900px) {
  .reason-environment{
    max-width: 80%;
    margin: 0 auto;
  }
}
@media (max-width: 600px) {
  .reason-environment{
    max-width: 100%;
  }
}

.reason-environment__title{
  font-size: 2.4rem;
  line-height: 1.8;
  letter-spacing: 0.1rem;
  background: linear-gradient(90deg, rgba(255, 137, 71, 0.7) 0%, rgba(255, 173, 61, 0.7) 100%);
  color: #fff;
  padding: 2.4rem 3.2rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top-right-radius: 3rem;
  border-bottom-left-radius: 3rem;
  text-align: center;
  letter-spacing: 0.3rem;
  margin-bottom: 1.6rem;
  max-width: 70%;
  min-width: 64rem;
}
@media (max-width: 900px) {
  .reason-environment__title{
    font-size: 2rem;
    min-width: auto;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
  }
}
@media (max-width: 600px) {
  .reason-environment__title{
    font-size: 2rem;
    padding: .8rem 2vw;
    min-width: auto;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
  }
}

.reason-environment__title__br{
  display: none;
}
@media (max-width: 600px) {
  .reason-environment__title__br{
    display: block;
  }
}

.reason-environment__textarea{
  max-width: 100%;
  width: 100%;
  padding-right: 52%;
  padding-bottom: 26%;
  position: relative;
  margin-bottom: 8.8rem;
}
@media (max-width: 900px) {
  .reason-environment__textarea{
    padding-right: 0;
    padding-bottom: 0;
    margin-bottom: 7.2rem;
  }
}


.reason-environment__textarea__pic{
  position: absolute;
  top: 0;
  right: 0;
  width: 75%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 900px) {
  .reason-environment__textarea__pic{
    display: block;
    position: static;
    height: auto;
    max-width: 66%;
    margin: 0 auto;
  }
}
@media (max-width: 600px) {
  .reason-environment__textarea__pic{
    max-width: 100%;
    width: 80%;
  }
}


.reason-environment__textarea__text{
  font-size: 1.6rem;
  line-height: 2.4;
  letter-spacing: 0.3rem;
  padding: 0 1em;
}
@media (max-width: 900px) {
  .reason-environment__textarea__text{
    margin-bottom: 2.4rem;
  }
}
@media (max-width: 600px) {
  .reason-environment__textarea__text{
    font-size: 1.4rem;
    line-height: 2;
    margin-bottom: 2.4rem;
  }
}

.reason-environment__textarea__text__marker{
  background-color: #FFF7BA;
}














/*========================================
無料スマホ教室の定期開催
========================================*/
.reason-study{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  margin-bottom: 3.2rem;
}
@media (max-width: 900px) {
  .reason-study{
    flex-direction: column-reverse;
    margin-bottom: 3.2rem;
    gap: 1.2rem;
  }
}

.reason-study__textarea{
  max-width: 60%;
  width: 100%;
  min-width: 49.8rem;
}
@media (max-width: 900px) {
  .reason-study__textarea{
    max-width: 81%;
  }
}
@media (max-width: 600px) {
  .reason-study__textarea{
    max-width: 100%;
    min-width: auto;
  }
}


.reason-study__textarea__title{
  font-size: 2.4rem;
  line-height: 1.8;
  letter-spacing: 0.1rem;
  background: #FFF5E7;
  padding: 2.4rem 3.2rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top-right-radius: 3rem;
  border-bottom-left-radius: 3rem;
  text-align: center;
  letter-spacing: 0.3rem;
  margin-bottom: 1.6rem;
}
@media (max-width: 600px) {
  .reason-study__textarea__title{
    font-size: 2rem;
    padding: .8rem 2vw;
    margin-bottom: 2.4rem;
    height: 4.4em;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.reason-study__textarea__title__br{
  display: none;
}
@media (max-width: 600px) {
  .reason-study__textarea__title__br{
    display: block;
  }
}

.reason-study__textarea__text{
  font-size: 1.6rem;
  line-height: 2.4;
  letter-spacing: 0.3rem;
  padding: 0 1em;
}
@media (max-width: 600px) {
  .reason-study__textarea__text{
    font-size: 1.4rem;
    line-height: 2;
    margin-bottom: 2.4rem;
  }
}

.reason-study__textarea__text__marker{
  background-color: #FFF7BA;
}

.reason-study__textarea__pic{
  max-width: 40%;
  width: 100%;
  min-width: 30rem;
}
@media (max-width: 900px) {
  .reason-study__textarea__pic{
    max-width: 56%;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
}
@media (max-width: 600px) {
  .reason-study__textarea__pic{
    max-width: 74%;
  }
}

/*ボタン*/
.reason-study__button{
  text-align: center;
  margin-bottom: 7.2rem;
}

.reason-study__button__link{
  display: inline-block;
  background-color: #FFF5E7;
  padding: .8rem 3.2rem;
  color: #000000;
  font-size: 1.8rem;
  letter-spacing: 0.3rem;
  border-radius: .8rem;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.reason-study__button__link:hover {
  transform: scale(0.97);
}
@media (max-width: 600px) {
  .reason-study__button__link{
    font-size: 1.6rem;
  }
}

/*========================================
店舗外での出張活動
========================================*/
.reason-trip{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  margin-bottom: 7.2rem;
}
@media (max-width: 900px) {
  .reason-trip{
    flex-direction: column;
    margin-bottom: 3.2rem;
  }
}

.reason-trip__textarea{
  max-width: 60%;
  width: 100%;
  min-width: 49.8rem;
}
@media (max-width: 900px) {
  .reason-trip__textarea{
    max-width: 80%;
  }
}
@media (max-width: 600px) {
  .reason-trip__textarea{
    max-width: 100%;
    min-width: auto;
  }
}


.reason-trip__textarea__title{
  font-size: 2.4rem;
  line-height: 1.8;
  letter-spacing: 0.1rem;
  background: linear-gradient(90deg, rgba(255, 137, 71, 0.7) 0%, rgba(255, 173, 61, 0.7) 100%);
  color: #fff;
  padding: 2.4rem 3.2rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top-right-radius: 3rem;
  border-bottom-left-radius: 3rem;
  text-align: center;
  letter-spacing: 0.3rem;
  margin-bottom: 1.6rem;
}
@media (max-width: 600px) {
  .reason-trip__textarea__title{
    font-size: 2rem;
    padding: .8rem 2vw;
    margin-bottom: 2.4rem;
  }
}

.reason-trip__textarea__title__br{
  display: none;
}
@media (max-width: 600px) {
  .reason-trip__textarea__title__br{
    display: block;
  }
}

.reason-trip__textarea__text{
  font-size: 1.6rem;
  line-height: 2.4;
  letter-spacing: 0.3rem;
  padding: 0 1em;
}
@media (max-width: 600px) {
  .reason-trip__textarea__text{
    font-size: 1.4rem;
    line-height: 2;
    margin-bottom: 2.4rem;
  }
}

.reason-trip__textarea__text__marker{
  background-color: #FFF7BA;
}

.reason-trip__textarea__pic{
  max-width: 40%;
  width: 100%;
  min-width: 30rem;
}
@media (max-width: 900px) {
  .reason-trip__textarea__pic{
    max-width: 60%;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
}
@media (max-width: 600px) {
  .reason-trip__textarea__pic{
    max-width: 80%;
  }
}