/* section-teianセクション */

.section-teian {
  position: relative;
  overflow: hidden;
  background-image: url(/wp-content/themes/swell_child/image/LINE_LP/background001.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100%;
  width: 100%;
  padding-bottom: 111px;
  margin-top: 145px;
}

/* タイトル */
.section-teian__ttl {
  display: flex;
  justify-content: center;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.section-teian_box {
 position: relative;
}

.section-teian_box > img {
  max-width: 400px;
  width: 100%;
}

.section-teian_box > p {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 39px;
  font-weight: 600;
  line-height: 1.3;
  color: #053656;
  width: 100%;
  padding-left: 24%;
  text-align: left;
  transform: translate(-50%, -50%);
}

.section-teian__h2 {
  color: #053656;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.8;
  position: relative;
  top: 228px;
  left: 25px;
}

.section-teian__h2 > span {
  font-size: 35px;
  font-weight: 500;
}

.makerline {
  background: linear-gradient( transparent 60%, #FCDC49 60%);
}

/* PCボックス */
.section-teian__flex {
  border: 2px solid #053656;
  display: flex;
  width: 85%;
  margin: 0 auto;
  margin-top: 200px;
  text-align: center;
  background: #fff;
  height: 300px;
}

.section-teian__element {
  width: 25%;
}

.section-teian_img-box {
  background: #053656;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 100px;
  position: relative;
  top: -61px;
}

.section-teian_img-box > img {
  width: 53%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.section-teian__element:nth-of-type(2) > .section-teian_img-box > img {
  width: 68%;
}

.section-teian__element:nth-of-type(3) > .section-teian_img-box > img {
  width: 73%;
}

/* テキスト */
p.section-teian__text {
  margin-top: 30px;
  border-left: 1px solid #053656;
  color: #053656;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  position: relative;
  top: -69px;
}

.section-teian__element:nth-of-type(1) > p.section-teian__text {
  border: none;
}

/* スマホボックス */

.section-teian__flex-sp {
  border: 2px solid #053656;
  width: 69%;
  margin: 0 auto 0 24%;
  margin-top: 150px;
  text-align: center;
  background: #fff;
  height: 100%;
  padding: 30px 0;
}

.section-teian__element-sp {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 240px;
  position: relative;
}

.section-teian_img-box.section-teian_img-box-sp {
  width: 150px;
  position: absolute;
  top: 50%;
  left: -16%;
  transform: translateY(-50%);
}

.section-teian__element:nth-of-type(1) > p.section-teian__text-sp {
  border-bottom: 1px solid #053656;
}

p.section-teian__text.section-teian__text-sp {
  position: static;
  border-left: none;
  border-bottom: 1px solid #053656;
  padding: 59px 0 74px 30px;
  width: 80%;
  font-size: 25px;
}

.section-teian__element:nth-of-type(4) > p.section-teian__text-sp {
  border-bottom: none;
}

@media (max-width: 1050px) {
  .section-teian__flex {
    border: 2px solid #053656;
    display: flex;
    width: 85%;
    margin: 0 auto;
    margin-top: 200px;
    text-align: center;
    background: #fff;
    height: 244px;
}

  .section-teian_img-box {
    background: #053656;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 100px;
    position: relative;
    top: -61px;
}

.section-teian_img-box > img {
  width: 44%;
}

.section-teian__element:nth-of-type(2) > .section-teian_img-box > img {
  width: 68%;
}

.section-teian__element:nth-of-type(3) > .section-teian_img-box > img {
  width: 67%;
}

p.section-teian__text {
  margin-top: 30px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  position: relative;
  top: -69px;
}
}

@media (max-width: 850px) {
  body .section-teian {
    position: relative;
    overflow: hidden;
    background-image: url(/wp-content/themes/swell_child/image/LINE_LP/background001-tate.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    width: 100%;
    padding-top: 0px;
    padding-bottom: 111px;
    margin-top: 63px;
    z-index: -2;
  }

  .section-teian .section-teian__flex-sp {
    border: 2px solid #053656;
    width: 76%;
    margin: 0 auto 0 18%;
    margin-top: 61px;
    text-align: center;
    background: #fff;
    height: 100%;
    padding: 0;
}
}

@media (max-width: 700px) {
.section-teian__element-sp .section-teian_img-box-sp {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50%;
  left: -16%;
  transform: translateY(-50%);
}
}

@media (max-width: 599px) {
  .section-teian__element-sp {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 205px;
    position: relative;
}
}

@media (max-width: 530px) {
  .section-teian__element-sp p.section-teian__text-sp {
    position: static;
    border-left: none;
    border-bottom: 1px solid #053656;
    padding: 59px 0 74px 81px;
    width: 80%;
    font-size: 20px;
    white-space: nowrap;
}
}

@media (max-width: 480px) {
  .section-teian__flex-sp .section-teian__element-sp .section-teian_img-box-sp {
    width: 130px;
    height: 130px;
    position: absolute;
    top: 50%;
    left: -20%;
    transform: translateY(-50%);
}

.section-teian__flex-sp .section-teian__element-sp p.section-teian__text-sp {
  position: static;
  border-left: none;
  padding: 59px 0 74px 0px;
  width: 80%;
  font-size: 18px;
  white-space: nowrap;
}
}

@media (max-width: 450px) {
  .section-teian .section-teian__flex-sp .section-teian__element-sp p.section-teian__text-sp {
    position: static;
    border-left: none;
    padding: 59px 0 74px 59px;
    width: 80%;
    font-size: 18px;
    white-space: nowrap;
}
}



/* 黄色の三角 */
.section-teian__triangle {
  text-align: center;
  margin-top: 100px;
  position: relative;
  top: 21px;
}

.section-teian__triangle > div {
  display: inline-block;
  border-top: 30px solid #F9E71E;
  border-left: 36px solid transparent;
  border-right: 36px solid transparent;
  position: relative;
}

.section-teian__triangle > div::before {
  content: "";
  display: block;
  border-top: 30px solid #F9E71E;
  border-left: 36px solid transparent;
  border-right: 36px solid transparent;
  position: absolute;
  top: -85px;
  left: -36px;
}

.section-teian__triangle > div::after {
  content: "";
  display: block;
  border-top: 30px solid #F9E71E;
  border-left: 36px solid transparent;
  border-right: 36px solid transparent;
  position: absolute;
  top: 26px;
  left: -36px;
}






 
/* スライダー */
.swiper-container {
  margin-top: 66px;
  position: relative;
  z-index: -1;
}

@media screen and (max-width: 850px) {
  .swiper-container {
    margin-top: 0px;
  }
}

img.slider-img {
  width: 100%;
}

 .swiper-wrapper {
  -webkit-transition-timing-function:linear!important; -o-transition-timing-function:linear!important; transition-timing-function:linear!important; 
}

@media (max-width: 1250px) {
  .section-teian_box > img {
    max-width: 300px;
    width: 100%;
}

.section-teian_box > p {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
  color: #053656;
  width: 100%;
  padding-left: 23%;
  text-align: left;
  transform: translate(-50%, -50%);
}


.section-teian .section-teian__h2 {
  font-size: 25px;
  line-height: 1.8;
  top: 154px;
  left: 25px;
}
}

@media (max-width: 1080px) {
  .section-teian__ttl {
    display: flex;
    flex-direction: column;
    max-width: 734px;
    width: 100%;
    margin: 0 auto;
}

body .section-teian .section-teian__h2 {
  font-size: 25px;
  line-height: 1.8;
  top: 0px;
  left: 44px;
  margin-top: 30px;
}

.section-teian__ttl .section-teian_box > p {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
  color: #053656;
  width: 100%;
  padding-left: 9%;
  text-align: left;
}
}

@media (max-width: 780px) {
  .section-teian_box {
    position: relative;
    max-width: 300px;
}

   .section-teian .section-teian_box > img {
    max-width: 300px;
    width: 100%;
    position: relative;
    left: 20px;
}

.section-teian__ttl .section-teian_box > p {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
  color: #053656;
  max-width: 300px;
  padding-left: 29%;
  text-align: left;
  transform: translate(-50%, -50%);
}


}

@media (max-width: 599px) {
  html body .section-teian .section-teian__h2 {
    font-size: 14px;
    line-height: 1.8;
    top: 0px;
    left: 44px;
    margin-top: 30px;
  }

  .section-teian .section-teian__h2 > span {
    font-size: 17px;
  }

  .section-teian__ttl .section-teian_box {
    position: relative;
    max-width: 167px;
}

  html body .section-teian .section-teian_box > img {
    max-width: 167px;
    position: relative;
    left: 20px;
}

.section-teian .section-teian__ttl .section-teian_box > p {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #053656;
  max-width: 167px;
  padding-left: 32%;
  text-align: left;
  transform: translate(-50%, -50%);
}

/* スライダーのmargin */
.swiper-container.swiper-initialized.swiper-horizontal.swiper-pointer-events.swiper-free-mode {
  margin-top: 54px;
  position: relative;
  z-index: -1;
}
}

@media (max-width: 480px) {
  .body-inner .swiper-container.swiper-initialized.swiper-horizontal.swiper-free-mode.swiper-ios {
    margin-top: 50px;
}

}


/* スマホとPC切り替え */
.section-teian__flex-sp {
  display: none;
}

@media (max-width: 850px) {
  .section-teian .section-teian__flex {
    display: none;
  }

  .section-teian .section-teian__flex-sp {
    display: block;
    margin-bottom: 50px;
  }
}