/* 共通 開始 */
body {
  margin: 0;
}

main {
  width: clamp(320px, 100%, 1000px);
  margin: 0 auto clamp(3.125rem, 1.654rem + 7.35vw, 6.25rem) auto;/*50-100*/
}

* {
  box-sizing: border-box;
}

:root {
  --main-color: #2ac6d6;
  --accent-color: #ff3654;
  --font-color: #333;
}

.accent-color {
  color: var(--accent-color);
}

main img {
  display: block;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0;
}


.b {
  font-weight: bold;
}

.pc{
  display: none !important;
}
.pc--tr{
  display: none  !important;
}

.red{
  color: red;
}

.yellow-line{
  background:linear-gradient(transparent 20%, yellow 20%);
}
/* 共通 終了 */

/* トップ　開始 */
.top__img--sp {
  width: 100%;
}

/* トップ　終了 */

/* pickup 開始 */
.pickup {
  padding: clamp(0.625rem, 0.037rem + 2.94vw, 1.875rem);/*10-30*/
  background-color: #cdf1f5;
  margin-top: clamp(1.25rem, 0.768rem + 2.41vw, 2.5rem);
  /*20-40*/
}

.pickup__inner {
  padding: clamp(0.625rem, 0.037rem + 2.94vw, 1.875rem);/*10-30*/
  background-color: #ffffff;
}

.pickup__title {
  width: min(100%,800px);
  display: block;
  margin: 0 auto;
}

.pickup__ul {
  margin-top: 20px;
}

.pickup__li {
  padding: clamp(0.625rem, 0.331rem + 1.47vw, 1.25rem);/*10-20*/
  border-radius: 5px;
  margin-top: 20px;
  position: relative;
  overflow: visible;
}

.pickup__badge {
  position: absolute;
  top: 0;
  left: 0;
  width: min(15%,60px);
  transform: translate(clamp(0.625rem, 0.331rem + 1.47vw, 1.25rem), -15%);/*10-20*/
}

.pickup__li--1 {
  border: solid 2px var(--accent-color);
  background-color: #fdf3f2;
}

.pickup__li--2,
.pickup__li--3 {
  border: solid 2px #308fd6;
  background-color: #f1f7fd;
}

.pickup__product-title {
  line-height: 1;
  padding-left: clamp(3.125rem, 2.537rem + 2.94vw, 4.375rem);/*50-70*/
}

.pickup__product-link {
  color: #1c66bc;
  font-size: clamp(1rem, 0.882rem + 0.59vw, 1.25rem);/*16-20*/
}

.pickup__product-link--carrerpark{
  font-size: clamp(0.813rem, 0.607rem + 1.03vw, 1.25rem);/*13-20*/
}

.pickup__product-info {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
}

.pickup__product-info1 {
  width: 40%;
}

.pickup__product-info1 a img {
  width: 100%;
}

.pickup__product-info2,
.pickup__product-info3 {
  width: 30%;
  padding: 10px clamp(0.625rem, 0.331rem + 1.47vw, 1.25rem);/*10-20*/
  text-align: center;
  display: flex;
  flex-direction: column;
}

.pickup__product-info2 {
  border-right: solid 1px #c1c0b6;
}

.pickup__product-info2-title,
.pickup__product-info3-title {
  font-size: clamp(0.938rem, 0.849rem + 0.44vw, 1.125rem);/*15-18*/
  font-weight: bold;
  color: var(--accent-color);
}

.pickup__li--2 .pickup__product-info2-title,
.pickup__li--2 .pickup__product-info3-title,
.pickup__li--2 .pickup__product-info4-title,
.pickup__li--3 .pickup__product-info2-title,
.pickup__li--3 .pickup__product-info3-title,
.pickup__li--3 .pickup__product-info4-title {
  color: #1c66bc;
}

.pickup__product-info2-text {
  margin: auto 0;
  font-weight: bold;
  color: var(--font-color);
  font-size: clamp(0.938rem, 0.849rem + 0.44vw, 1.125rem);/*15-18*/
}

.pickup__product-info3-text {
  margin: auto 0;
  font-weight: bold;
  color: var(--accent-color);
  font-size: clamp(0.938rem, 0.849rem + 0.44vw, 1.125rem);/*15-18*/
}

.pickup__product-info4 {
  background-color: #ffffff;
  padding: 10px clamp(0.625rem, 0.331rem + 1.47vw, 1.25rem);/*10-20*/
  margin-top: 10px;
  width: 100%;
}

.pickup__product-info4-title {
  text-align: center;
  font-size: 18px;
  padding: 5px 0;
  color: var(--accent-color);
  font-weight: bold;
  line-height: 1;
}

.pickup__product-info4-li {
  margin-top: clamp(0.625rem, 0.478rem + 0.74vw, 0.938rem);/*10-15*/
  display: flex;
  align-items: flex-start;
}

.pickup__product-info4-li img {
  width: clamp(0.875rem, 0.787rem + 0.44vw, 1.063rem);/*14-17*/
  margin-right: 5px;
}

.pickup__product-info4-li span {
  line-height: 1.2;
  font-size: clamp(0.875rem, 0.787rem + 0.44vw, 1.063rem);/*14-17*/
  font-weight: bold;
  color: var(--font-color);
}

/* pickup 終了 */

/* 会話コンテンツ　開始 */
.conversation {
  padding: 20px;
  margin: clamp(0rem, -1.471rem + 7.35vw, 3.125rem) auto 0 auto;/*10-50*/
  width: min(100%,800px);
}

.conversation__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 20px;
}

.conversation__icon {
  display: block;
  width: 20%;
}

.conversation__frame {
  width: 75%;
  padding: clamp(0.625rem, 0.331rem + 1.47vw, 1.25rem);/*10-20*/
  border: solid 2px #a2a2a2;
  position: relative;
  margin-top: clamp(0.938rem, 0.202rem + 3.68vw, 2.5rem);/*15-40*/
}

.conversation__frame--1 {
  border-radius: 0 10px 10px 10px;
}

.conversation__frame--1:before {
  content: "";
  width: 0;
  height: 0;
  display: block;
  border-style: solid;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  border-bottom: 12px solid #a2a2a2;
  border-top: 0;
  transform: translate(-17px, -4px) rotate(45deg);
  position: absolute;
  top: 0;
  left: 0;
}

.conversation__frame--1:after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  border-style: solid;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  border-bottom: 12px solid #ffffff;
  border-top: 0;
  transform: translate(-12px, -2px) rotate(45deg);
  position: absolute;
  top: 0;
  left: 0;
}

.conversation__frame--2 {
  border-radius: 10px 0 10px 10px;
  border: solid 2px #ece9e9;
  background-color: #ece9e9;
}

.conversation__frame--2:before {
  content: "";
  width: 0;
  height: 0;
  display: block;
  border-style: solid;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  border-top: 12px solid #ece9e9;
  border-bottom: 0;
  transform: translate(17px, -4px) rotate(135deg);
  position: absolute;
  top: 0;
  right: 0;
}

.conversation__text1 {
  font-weight: bold;
  color: #393939;
  font-size: clamp(1rem, 0.882rem + 0.59vw, 1.25rem);/*16-20*/
}
.conversation__text2{
  display: block;
  color: #393939;
  font-size: clamp(0.875rem, 0.757rem + 0.59vw, 1.125rem);/*14-18*/
  margin-top: 10px;
}

/* 会話コンテンツ　終了 */

/* ランキング　開始 */
.rank{
  margin-top: clamp(1.875rem, 0.404rem + 7.35vw, 5rem);/*30-80*/
}
.rank___title img{
  width: min(80%,400px);
  margin: 0 auto;
}
.rank___items{
  margin-top: 20px;
  padding: 0 20px;
}
.rank___item{
  border: solid 2px #dac34d;
  border-radius: 5px;
  padding: clamp(1.25rem, 0.662rem + 2.94vw, 2.5rem) clamp(0.625rem, -0.257rem + 4.41vw, 2.5rem);/*20-40 10-40*/
  margin-top: 20px;
}
.rank___item:nth-child(2){
  border: solid 2px #cccccc;
}
.rank___item:nth-child(3){
  border: solid 2px #c77a5b;
}
.rank___item:nth-child(4){
  border: solid 2px #c7eaee;
}
.rank___name{
  display: flex;
  align-items: end;
}

.rank___name span{
  margin-left: 10px;
  font-weight: bold;
  font-size: clamp(1.25rem, 1.103rem + 0.74vw, 1.563rem);/*20-25*/
  line-height: 1;
  color: var(--font-color);
}
.rank___name span.rank__name-text--careerpark{
  font-size: clamp(0.813rem, 0.165rem + 3.24vw, 2.188rem);/*13-25*/
}
.rank___name span:hover{
  color: #1c66bc;
}
.rank__name-link{
  text-decoration: none;
}
.rank___name img{
  width: min(15%,75px);
}
.rank__img-link{
  display: block;
  margin: clamp(1.25rem, 0.662rem + 2.94vw, 2.5rem) auto 0 auto;/*20-40*/
  width: 70%;
}
.rank__img-link:hover{
  opacity: 0.5;
}
.rank__kuchi{
  justify-content: right;
  align-items: center;
  display: flex;
  margin-top: 10px;
}
.rank__kuchi-title{
  line-height: 1;
  padding: clamp(0.188rem, 0.098rem + 0.45vw, 0.313rem) clamp(0.438rem, 0.304rem + 0.67vw, 0.625rem);/*3-5 7-10*/
  border-radius: 5px;
  background-color: var(--main-color);
  color: #ffffff;
  font-weight: bold;
  font-size: clamp(0.875rem, 0.696rem + 0.89vw, 1.125rem);/*14-18*/
}
.rank__kuchi-star{
  display: flex;
  margin-left: 10px;
}
.rank__kuchi-star img{
  width: 20px;
}
.rank__product-img{
  width: 100%;
}
.rank__table{
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
}
.rank__table th,.rank__table td{
  border: solid 1px #d9d9d9;
  padding: clamp(0.625rem, 0.331rem + 1.47vw, 1.25rem) 0;/*10-20*/
  text-align: center;
}
.rank__table th{
  background-color: var(--main-color);
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  font-size: clamp(0.875rem, 0.757rem + 0.59vw, 1.125rem);/*14-18*/
  width: 40%;
}
.rank__table td{
  font-weight: bold;
  color: var(--font-color);
  text-align: center;
  font-size: clamp(0.875rem, 0.757rem + 0.59vw, 1.125rem);/*14-18*/
  width: 60%;
}
.rank__point{
  margin-top: 20px;
}
.rank__point-title{
  background-color: var(--accent-color);
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  font-size: clamp(0.875rem, 0.699rem + 0.88vw, 1.25rem);/*14-20*/
  padding: clamp(0.625rem, 0.478rem + 0.74vw, 0.938rem) 0;/*10-15*/
}
.rank__point-ul{
  background-color: #ffe9ec;
  padding: clamp(1.25rem, 0.956rem + 1.47vw, 1.875rem);/*20-30*/
}
.rank__point-li{
  display: flex;
  align-items: center;
  align-items: flex-start;
  margin-top: clamp(0.625rem, 0.478rem + 0.74vw, 0.938rem);/*10-15*/
}
.rank__point-li:nth-child(1){
  margin-top: 0;
}
.rank__point-li img{
  width: clamp(0.938rem, 0.79rem + 0.74vw, 1.25rem);/*15-20*/
  margin-right: 5px;
}
.rank__point-li span{
  color: var(--font-color);
  font-size: clamp(0.75rem, 0.632rem + 0.59vw, 1rem);/*12-16*/
  font-weight: bold;
  line-height: 1.4;
}
.rank__juml-link{
  margin: clamp(1.25rem, 0.515rem + 3.68vw, 2.813rem) auto 0 auto;/*20-45*/
  display: block;
  width: min(70%,500px);
}
.rank__juml-link:hover{
  opacity: 0.5;
}
.rank__juml-link img{
  width: 100%;
  display: block;
}
/* ランキング　終了 */

/* バナー　開始 */
.banner{
  margin-top: 50px;
  text-align: center;
}
.banner__text{
  text-align: center;
  font-size: clamp(0.938rem, 0.496rem + 2.21vw, 1.875rem);/*15-30*/
}
.banner__link{
  margin-top: 20px;
}
.banner__link img{
  margin: 0 auto;
  max-width: 90%;
  height: auto;
}
.banner__link:hover{
  opacity: 0.5;
}
/* バナー　終了 */

/* タブレット以上　開始 */
@media screen and (min-width:768px) {
  /* 共通　開始 */
  .sp{
    display: none  !important;
  }
  .pc{
    display: block  !important;
  }
  /* 共通　終了 */
  /* トップ　開始 */
  .top__img--pc {
    width: 100%;
  }
  /* トップ　終了*/
  /* ピックアップ　開始 */
  .pickup__product-info1{
    width: 30%;
  }
  .pickup__product-info2,
  .pickup__product-info3{
    width: 15%;
  }
  .pickup__product-info3{
    border-right: solid 1px #c1c0b6
  }
  .pickup__product-info4{
    width: 40%;
  }
  /* ピックアップ　終了 */
  /* ランキング　開始 */
  .pc--tr{
    display: table-row !important;
  }
  .rank__product-img{
    width: 100%;
  }
  .pickup__product-info4{
    background-color: unset;
    margin-top: 0;
  }
  .rank___title img{
    width: 70%;
  }
  .rank___name{
    text-align: center;
    justify-content: center;
  }
  .pc--tr td img{
    display: inline;
  }
  .rank__img-link{
    width: 100%;
  }
  /* ランキング　終了 */
}
/* タブレット以上　終了 */