@charset "UTF-8";
/* CSS Document */

/**********************************************************
* CSS表記
**********************************************************/
:root {
  --black: #444444;
  --blue: #023894;
  --green: #00beaa;
  --pink: #e65a78;
  --font-ja: "Noto Sans JP", sans-serif;
  --font-en: "Raleway", sans-serif;
  
  --resp-20px-30px: clamp(20px, 3.906vw, 30px);
  --resp-20px-50px: clamp(20px, 5.556vw, 50px);
  --resp-30px-50px: clamp(30px, 8.333vw, 50px);
  --resp-50px-60px: clamp(50px, 7.8125vw, 60px);
  --resp-50px-80px: clamp(50px, 13.88vw, 80px);
  --resp-50px-100px: clamp(50px, 13.889vw, 100px);
  --resp-70px-100px: clamp(70px, 13vw, 100px);
}

body {
  min-width: 1010px;
  color: var(--black); font-family: var(--font-ja);
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
  font-feature-settings: "palt";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main{overflow: clip; font-size: 1rem; line-height: 2;}
img {pointer-events: none;}
@media (width <= 768px) {
  body{min-width: auto;}
  main{font-size: 0.9375rem;}
  .pc_only {display: none;}
}
@media not all and (width <= 768px) {
  .sp_only {display: none;}
}

/**********************************************************
* メイン
**********************************************************/

#header {
  background-color: #fff;
  /* ヘッダーの背景透過を防ぐ処理 */
}
#header img {
  display: inline-block;
  /* 読売CSSのロゴを中央に寄せるfloat対策 */
}

.yab_header__inner {
  font-weight: 600;
  line-height: 1;
  padding: 0;
  margin-top: 0;
  margin-bottom: 25px;
}
.yab_header__inner .yab_credit,
.yab_header__inner .yomidr_sponsored {
  letter-spacing: 0.04em;
}

.fixed-back {
  position: fixed;
  inset: 0;
  z-index: -100;
  width: 100%;
  height: 100%;
  background: no-repeat url(/adv/concoolf_B/img/fixed_back.png) top / cover;
}

.firstView {
  width: 100%;
  padding-top: 20px;
}

.fv_items {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(100%, 960px);
  height: 100%;
  margin: 0 auto;
}
.fv_items img {
  display: block;
  width: 710px;
  filter: drop-shadow(10px 10px 10px rgb(0 0 0/20%));
}

@media (width <=768px) {
  .yab_header__inner {
    padding: 0 10px;
    margin-bottom: 25px;
  }

  .yab_credit {
    margin-bottom: 0.5rem;
  }

  .firstView {
    aspect-ratio: auto;
    padding-top: 20px;
  }

  .fv_items {
    margin: 0 auto;
  }
  .fv_items img {
    width: 300px;
  }
}
.intro_contents {
  width: min(100% - 40px, 800px);
  background-color: #fff;
  border-radius: var(--resp-20px-50px);
  box-shadow: 10px 10px 10px rgb(0 0 0/20%);
  padding: var(--resp-30px-50px) var(--resp-20px-50px) var(--resp-50px-100px);
  margin: var(--resp-50px-80px) auto 0;
}

.intro_text {
  display: flex;
  flex-direction: row;
  gap: 60px;
  width: 100%;
  border-bottom: dotted 3px var(--green);
  padding-bottom: var(--resp-50px-60px);
}
.intro_text .illust_concool {
  flex-shrink: 0;
  flex-basis: 140px;
  margin-top: -80px;
}
.intro_text .illust_concool img {
  width: 100%;
}
.intro_text .leadSentence {
  text-align: justify;
}
.intro_text .concool_price {
  font-size: 0.875rem;
  font-weight: 900;
  line-height: 1.43;
  color: var(--blue);
  margin-top: 50px;
}
@media (width <=768px) {
  .intro_text {
    flex-direction: column;
    gap: 20px;
    padding-bottom: 50px;
  }
  .intro_text .pc_only_wrapper {
    display: contents;
  }
  .intro_text .illust_concool {
    display: flex;
    justify-content: center;
    order: 2;
    flex-basis: auto;
    margin-top: 0;
  }
  .intro_text .illust_concool img {
    width: clamp(253px,52.1vw,400px);
    transform: rotate(-8deg);
  }
  .intro_text .leadSentence {
    order: 1;
  }
  .intro_text .concool_price {
    order: 3;
    text-align: center;
    margin-top: 0;
  }
}

.Qlist {
  position: relative;
}
.Qlist h2 {
  width: 100%;
  text-align: center;
  line-height: 1.3;
  margin: var(--resp-50px-80px) 0 30px;
}
.Qlist h2 span {
  font-size: 1.75rem;
  font-weight: 700;
  font-family: var(--font-en);
  color: var(--green);
}
.Qlist figure {
  position: absolute;
}
.Qlist figure img {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
}
.Qlist figure.left_illust {
  width: 100px;
  top: 290px;
  left: -70px;
  transform: rotate(15deg);
}
.Qlist figure.right_illust {
  width: 120px;
  top: 590px;
  right: -82px;
  transform: rotate(-15deg);
}

@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, -10px);
  }

  100% {
    transform: translate(0, 0);
  }
}
.Qlist_contents{
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(100%,600px);
  margin: 0 auto;
}
.Qlist_items {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}
.Qlist_items:nth-child(2n) {
  justify-content: flex-end;
}
.Qlist_items .link_action_wrapper {
  display: grid;
  width: min(100%, 430px);
  transition: none; /*読売CSS打消 */
}
.Qlist_items .link_action_wrapper picture {
  grid-area: 1/1;
  transition: all 0.2s;
}
.Qlist_items .link_action_wrapper:hover picture:nth-child(2) {
  opacity: 0;
}

.Alist{
  width: 100%;
  padding: var(--resp-70px-100px) 0;
}
.Alist_contents{
  display: flex;
  flex-direction: column;
  gap: var(--resp-30px-50px);
  width: min(100% - 40px,800px);
  margin: 0 auto;
}
.flex_alt_container {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.flex_alt_container:nth-child(2n) {
  justify-content: flex-start;
}
.flex_alt_container .Alist_items::after {
  position: absolute;
  bottom: 60px;
  content: "";
  width: 6.875%;
  aspect-ratio: 1.515;
}
.flex_alt_container:nth-child(2n+1) .Alist_items::after {
  left: calc(var(--resp-20px-50px) * -1);
  background-image: url(/adv/concoolf_B/img/fukidashi_l.svg);
  background-repeat: no-repeat;
}
.flex_alt_container:nth-child(2n) .Alist_items::after {
  right: calc(var(--resp-20px-50px) * -1);
  background-image: url(/adv/concoolf_B/img/fukidashi_r.svg);
  background-repeat: no-repeat;
}
.Alist_items {
  position: relative;
  width: 93.75%;
  background-color: #fff;
  border-radius: var(--resp-20px-50px);
  box-shadow: 10px 10px 10px rgb(0 0 0/20%);
  padding: var(--resp-20px-50px);
}
.Alist_items h3 {
  display: flex;
  flex-direction: row;
  font-weight: 400;
  align-items: center;
  margin: 0 0 var(--resp-20px-30px);
}
.Alist_items h3 .Anumber {
  display: inline-block;
  width: 100px;
  font-size: clamp(3.125rem, 7.81vw, 3.75rem);
  font-family: var(--font-en);
  font-weight: 300;
  color: var(--green);
  line-height: 1;
  border-right: solid 1px var(--black);
  margin-right: 30px;
}
.Alist_items h3 .Atxt {
  font-size: clamp(1.25rem, 3.125vw, 1.5rem);
  line-height: 1.5;
  text-align: justify;
}
.Alist_items p {
  position: relative;
  text-align: justify;
  padding: 0 0 0 60px;
}
.Alist_items p::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "A";
  font-size: 2.5rem;
  font-family: var(--font-en);
  line-height: 1;
  text-align: left;
  color: var(--pink);
}
.Alist_items figure {
  margin-top: var(--resp-20px-30px);
}
.Alist_items figure img {
  width: 100%;
  aspect-ratio: 1.778;
  object-fit: cover;
}
.Alist_items iframe {
  width: 100%;
  aspect-ratio: 1.778;
  margin-top: var(--resp-20px-30px);
  border: 0;
}
@media (width <=768px) {
  .Alist_items h3 {
    flex-direction: column;
    align-items: start;
  }
  .Alist_items h3 .Anumber {
    display: inline-block;
    width: 100%;
    text-align: center;
    border-right: none;
    border-bottom: solid 1px var(--black);
    padding-bottom: 20px;
    margin-right: 0;
    margin-bottom: 30px;
  }
  .Alist_items p {
    padding: 50px 0 0 0;
  }
  .Alist_items p::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
  }
}
@media (width <=500px) {
  .Alist_items figure img {
    aspect-ratio: 1.25;
  }
}
.officialLink {
  position: relative;
  width: 100%;
  padding: clamp(70px, 13vw, 100px) 20px;
  clip-path: inset(0 0 0 0);
}
.ol_txt {
  width: var(--width-01);
  margin: 0 auto;
}
.ol_txt p {
  text-align: center;
}
.ol_txt a {
  display: block;
  width: min(100%, 450px);
  font-size: clamp(1rem, 2.604vw, 1.25rem);
  line-height: 1;
  font-weight: 600;
  text-align: center;
  color: #fff;
  border-radius: 9999px;
  background-color: var(--blue);
  padding: 20px 0;
  margin: clamp(30px, 9.115vw, 70px) auto 0;
  transition: opacity 0.3s;
}
.ol_txt a:hover {
  opacity: 0.6;
}
.ol_back{
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: no-repeat center/cover url(/adv/concoolf_B/img/officialSite_back.png);
}
@media (width <=768px) {
  .ol_txt p {
    text-align: justify;
  }
}
.weltec_logo{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: clamp(50px,10.417vw,80px) 0;
}
.weltec_logo img{
  width: 240px;
}
.okuchilab_link {
  width: 100%;
  text-align: center;
  line-height: 1.75;
  padding: calc(0.667em + 2px) 0 calc(1.333em + 2px);
}
.okuchilab_link a {
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  background-color: #036250;
  border: 1px solid transparent;
  border-radius: 9999px;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  transition: 0.3s all;
}
.okuchilab_link a:hover {
  background-color: #fff;
  border: 1px solid #000;
  color: #000;
}
/* オプトアウトテキスト */
.ad_optout{
  width: 100%;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.75;
  padding: 20px;
  margin-top: 10px;
}
.ad_optout a{
  color: #00f;
  text-decoration: underline;
}
#footer,
.bg-fff{
  background-color: #fff;
}
@media (width <=768px) {
  #pagetop{
    margin-top: 0;
  }
}