@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* Google font Icon */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* 画像の可変設定 */
@property --vw {
    syntax: "<length>";
    initial-value: 0px;
    inherits: true;
}

:root {
    --vw: 100vw;
    /* 画面幅の数値だけを抽出（例: 768px → 768） */
    --w-num: tan(atan2(var(--vw), 1px));
}

/* key visual */

.kv {
    background-color: #FAFAFA;
    margin-top: 10px;
}

.kv img {
    margin: 0 auto;
    max-width: 1200px;
}

/* introduction */

.introduction {
    background-color: #fff;
    padding: 80px 25px;
}

.introduction img {
    max-width: 350px;
}

.introduction .uc-caption {
    color: #6B6B6B;
    font-size: clamp(12px, 3.42vw, 24px);
    margin-top: 22px;
}

/* heading */

.title-seiritask100 {
    background: linear-gradient(to right, #6A9DE8, #AE98D1 46%, #DF95C1 82%, #F294BB);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 105px;
    padding: 20px 0;
}

/* text */

.lead-text {
    font-size: clamp(12px, 3.42vw, 24px);
}

.note-text {
    font-size: clamp(11px, 2.933vw, 18px);
}

/* ============================= floating banner =================================== */

.floating-banner {
    position: fixed;
    top: 550px;
    right: 0;
}

.floating-banner.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ============================= top10 =================================== */

.top10-section {
    background-color: #FAFAFA;
    padding: 80px 25px 60px;
}

.top10 {
    max-width: 1100px;
    margin: 0 auto;
}

.top10 .title-seiritask100 {
    margin-bottom: 40px;
}

.top10-wrapper {
    margin-top: 50px;
}

.top10-wrapper .box-seiritask100 {
    border-radius: 6px;
    padding: 7% 0;
    margin-bottom: 20px;
}

.top10-wrapper .box-seiritask100.-no1,
.top10-wrapper .box-seiritask100.-no2,
.top10-wrapper .box-seiritask100.-no4,
.top10-wrapper .box-seiritask100.-no5,
.top10-wrapper .box-seiritask100.-no7,
.top10-wrapper .box-seiritask100.-no8,
.top10-wrapper .box-seiritask100.-no10 {
    margin-right: 20px;
}

.top10-wrapper .box-seiritask100.-red {background-color: #FCDFEF;}
.top10-wrapper .box-seiritask100.-blue {background-color: #D8ECFE;}
.top10-wrapper .box-seiritask100.-yellow {background-color: #FDF1DF;}
.top10-wrapper .box-seiritask100.-lightblue {background-color: #DBF6FC;}

.top10-wrapper .titile-seiritask100-top10 h3 {
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: clamp(16px, 2vw, 22px);
    font-weight: bold;
    letter-spacing: 0;
    margin-bottom: 0.5em;
    min-height: 70px;
    padding-left: 75px;
    position: relative;
    text-align: left;
}

.top10-wrapper .titile-seiritask100-top10.ls-tight h3 {
    letter-spacing: -0.07em;
}

.top10-wrapper .-no1 .titile-seiritask100-top10 h3,
.top10-wrapper .-no2 .titile-seiritask100-top10 h3,
.top10-wrapper .-no3 .titile-seiritask100-top10 h3 {
    padding-left: 100px;
}

.top10-wrapper .titile-seiritask100-top10 h3::before {
    border-radius: 100%;
    content: "";
    display: inline-block;
    height: 46px;
    width: 46px;
    position: absolute;
    left: 15px;
}

.top10-wrapper .-red .titile-seiritask100-top10 h3::before {background-color: #FB597D;}
.top10-wrapper .-blue .titile-seiritask100-top10 h3::before {background-color: #3EA4F8;}
.top10-wrapper .-yellow .titile-seiritask100-top10 h3::before {background-color: #F7AF41;}
.top10-wrapper .-lightblue .titile-seiritask100-top10 h3::before {background-color: #00C8F0;}

.top10-wrapper .-no1 .titile-seiritask100-top10 h3::before,
.top10-wrapper .-no2 .titile-seiritask100-top10 h3::before,
.top10-wrapper .-no3 .titile-seiritask100-top10 h3::before {
    background: none;
    border-radius: initial;
    content: "";
    display: inline-block;
    height: 61.55px;
    width: 75.66px;
    position: absolute;
    left: 15px;
    bottom: 15px;
}

.top10-wrapper .-no1 .titile-seiritask100-top10 h3::before {background: url(/content/dam/sites/www_sofy_jp/seiritask100/image/icon-seiritask100-no1.png) no-repeat 0 0 / cover;}
.top10-wrapper .-no2 .titile-seiritask100-top10 h3::before {background: url(/content/dam/sites/www_sofy_jp/seiritask100/image/icon-seiritask100-no2.png) no-repeat 0 0 / cover;}
.top10-wrapper .-no3 .titile-seiritask100-top10 h3::before {background: url(/content/dam/sites/www_sofy_jp/seiritask100/image/icon-seiritask100-no3.png) no-repeat 0 0 / cover;}

.top10-wrapper .titile-seiritask100-top10 h3 span:nth-of-type(1) {
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-weight: 500;
    position: absolute;
    left: 0.85em;
}

.top10-wrapper .-no1 .titile-seiritask100-top10 h3 span:nth-of-type(1),
.top10-wrapper .-no2 .titile-seiritask100-top10 h3 span:nth-of-type(1),
.top10-wrapper .-no3 .titile-seiritask100-top10 h3 span:nth-of-type(1) {
    font-size: 31.2px;
    left: 1.1em;
    bottom: 0.2em;
}

.top10-wrapper .titile-seiritask100-top10 h3 span:nth-of-type(2) {
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15.6px;
    font-weight: bold;
    position: absolute;
    left: 2.4em;
}

.top10-wrapper .-no1 .titile-seiritask100-top10 h3 span:nth-of-type(2),
.top10-wrapper .-no2 .titile-seiritask100-top10 h3 span:nth-of-type(2),
.top10-wrapper .-no3 .titile-seiritask100-top10 h3 span:nth-of-type(2) {
    font-size: 18.72px;
    left: 2.75em;
    bottom: 0.8em;
}

.top10-wrapper .-no10 .titile-seiritask100-top10 h3 span:nth-of-type(1) {left: 0.6em;}
.top10-wrapper .-no10 .titile-seiritask100-top10 h3 span:nth-of-type(2) {left: 2.8em;}

.top10-wrapper .-red .titile-seiritask100-top10 h3 {color: #FB7492; border-bottom-color: #FB6586;}
.top10-wrapper .-blue .titile-seiritask100-top10 h3 {color: #3EA4F8; border-bottom-color: #3EA4F8;}
.top10-wrapper .-yellow .titile-seiritask100-top10 h3 {color: #EDB357; border-bottom-color: #F7AF41;}
.top10-wrapper .-lightblue .titile-seiritask100-top10 h3 {color: #00C8F0; border-bottom-color: #00C8F0;}

.top10-wrapper .parcent-and-illust {
    display: flex;
    justify-content: space-between;
    margin-left: 6%;
    margin-right: 6%;
    padding-top: 15px;
    position: relative;
}

.top10-wrapper .-red .parcent-and-illust {
background-image: repeating-linear-gradient(90deg, #FB6586, #FB6586 4px, transparent 4px, transparent 6px);
background-position: left top;
background-repeat: repeat-x;
background-size: 100% 1px;
}
.top10-wrapper .-blue .parcent-and-illust {
background-image: repeating-linear-gradient(90deg, #3EA4F8, #3EA4F8 4px, transparent 4px, transparent 6px);
background-position: left top;
background-repeat: repeat-x;
background-size: 100% 1px;
}
.top10-wrapper .-yellow .parcent-and-illust {
background-image: repeating-linear-gradient(90deg, #F7AF41, #F7AF41 4px, transparent 4px, transparent 6px);
background-position: left top;
background-repeat: repeat-x;
background-size: 100% 1px;
}
.top10-wrapper .-lightblue .parcent-and-illust {
background-image: repeating-linear-gradient(90deg, #00C8F0, #00C8F0 4px, transparent 4px, transparent 6px);
background-position: left top;
background-repeat: repeat-x;
background-size: 100% 1px;
}

.top10-wrapper .top10-aruaru-percent-wrapper {
    background-color: #fff;
    border-radius: 50%;
    height: clamp(67px, 8.723vw, 97px);
    width: clamp(67px, 8.723vw, 97px);
}

.top10-wrapper .-red .top10-aruaru-percent-wrapper {color: #FB7492;}
.top10-wrapper .-blue .top10-aruaru-percent-wrapper {color: #00A6FF;}
.top10-wrapper .-yellow .top10-aruaru-percent-wrapper {color: #F7AF41;}
.top10-wrapper .-lightblue .top10-aruaru-percent-wrapper {color: #00C8F0;}

.top10-wrapper .top10-aruaru-percent-wrapper .top10-aruaru {
    color: #6B6B6B;
    font-family: "Inter", sans-serif;
    font-size: clamp(9px, 1.171875vw, 12px);
    letter-spacing: 0;
    line-height: 1;
    padding: 2em 0 0 0.7em;
}

.top10-wrapper .top10-aruaru-percent-wrapper .top10-percent-wrapper {
    display: flex;
    justify-content: start;
    align-items: baseline;
}

.top10-wrapper .top10-aruaru-percent-wrapper .top10-percent-wrapper .top10-number {
    display: inline-block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(25px, 3.255vw, 36px);
    font-weight: bold;
    letter-spacing: -1px;
    line-height: 1;
    padding: 0 0 0 0.1em;
}

.top10-wrapper .top10-aruaru-percent-wrapper .top10-percent-wrapper .top10-percent {
    display: inline-block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(12px, 1.5625vw, 17.34px);
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1;
}

.top10-wrapper .top10-illust {
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(154px, 20.05vw, 220px);
    width: clamp(130px, 16.92vw, 200px);
}

.top10-wrapper .top10-illust.-no1 img {width: clamp(110px, 14.32vw, 169px);}
.top10-wrapper .top10-illust.-no2 img {width: clamp(104px, 13.54vw, 152px);}
.top10-wrapper .top10-illust.-no3 img {width: clamp(130px, 16.92vw, 222px);}
.top10-wrapper .top10-illust.-no4 img {width: clamp(44px, 5.729vw, 60px);}
.top10-wrapper .top10-illust.-no5 img {width: clamp(116px, 15.10vw, 159px);}
.top10-wrapper .top10-illust.-no6 img {width: clamp(116px, 15.10vw, 166px);}
.top10-wrapper .top10-illust.-no7 img {width: clamp(118px, 15.36vw, 165px);}
.top10-wrapper .top10-illust.-no8 img {width: clamp(120px, 15.625vw, 182px);}
.top10-wrapper .top10-illust.-no9 img {width: clamp(130px, 16.92vw, 200px);}
.top10-wrapper .top10-illust.-no10 img {width: clamp(48px, 6.25vw, 67px);}

.top10-wrapper .btn-top10 {
    margin-top: 10px;
    padding-left: 6%;
    padding-right: 6%;
}

.top10-wrapper .btn-top10 button {
    /* reset --- */
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    /* --- reset */
    background-color: #3C459A;
    border-radius: 100vmax;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(11px, 1.40vw, 18px);
    min-height: 47.25px;
    position: relative;
    width: 100%;
}

.top10-wrapper .btn-top10 button::after {
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    content: '';
    transform: rotate(45deg);
    margin: auto;
    height: 8px;
    position: absolute;
    top: calc(50% - 4px);
    right: 12px;
    width: 8px;
}

/* ============================= scene 11 - 100 =================================== */

.scene-section {
    background-color: #fff;
    padding: 80px 25px 60px;
}

.scene-11-100 {
    max-width: 1100px;
    margin: 0 auto;
}

.scene-11-100 .title-seiritask100 {
    margin-bottom: 40px;
}

.scene-11-100-wrapper {
    margin-top: 50px;
}

.container-scene-11-100 {
    margin-bottom: 20px;
}

.container-scene-11-100.-red,
.container-scene-11-100.-purple,
.container-scene-11-100.-pink {
    margin-right: 10px;
}

.container-scene-11-100.-yellow,
.container-scene-11-100.-blue,
.container-scene-11-100.-lightblue {
    margin-left: 10px;
}

.container-scene-11-100 .title {
    border-radius: 10px 10px 0 0;
}

.container-scene-11-100.-red .title {background-color: #FB7492;}
.container-scene-11-100.-yellow .title {background-color: #EDB357;}
.container-scene-11-100.-purple .title {background-color: #C68AEF;}
.container-scene-11-100.-blue .title {background-color: #3EA4F8;}
.container-scene-11-100.-pink .title {background-color: #E990CA;}
.container-scene-11-100.-lightblue .title {background-color: #00C8F0;}

.container-scene-11-100 .title h3 {
    color: #fff;
    display: flex;
    font-size: clamp(20px, 2.55vw, 30px);
    font-weight: bold;
    justify-content: center;
    align-items: center;
    height: 70px;
    margin: 0;
}

.container-scene-11-100 .inner-scene-11-100 {
    border-style: solid;
    border-width: 1px;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 20px 20px 10px 20px;
}

.container-scene-11-100.-red .inner-scene-11-100 {border-color: #FB7492;}
.container-scene-11-100.-yellow .inner-scene-11-100 {border-color: #EDB357;}
.container-scene-11-100.-purple .inner-scene-11-100 {border-color: #C68AEF;}
.container-scene-11-100.-blue .inner-scene-11-100 {border-color: #3EA4F8;}
.container-scene-11-100.-pink .inner-scene-11-100 {border-color: #E990CA;}
.container-scene-11-100.-lightblue .inner-scene-11-100 {border-color: #00C8F0;}

.container-scene-11-100 .inner-scene-11-100 .box-scene-11-100 {
    border-radius: 6px;
    margin-bottom: 20px;
    padding: 25px 20px 15px 20px;
}

.container-scene-11-100.-red .inner-scene-11-100 .box-scene-11-100  {background-color: #FDE8F3;}
.container-scene-11-100.-yellow .inner-scene-11-100 .box-scene-11-100  {background-color: #FCF2E2;}
.container-scene-11-100.-purple .inner-scene-11-100 .box-scene-11-100  {background-color: #F5EBFC;}
.container-scene-11-100.-blue .inner-scene-11-100 .box-scene-11-100  {background-color: #D8ECFE;}
.container-scene-11-100.-pink .inner-scene-11-100 .box-scene-11-100  {background-color: #FCF0F8;}
.container-scene-11-100.-lightblue .inner-scene-11-100 .box-scene-11-100  {background-color: #E1F6FC;}

.inner-scene-11-100 .rank-text-wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 10px;
}

.inner-scene-11-100 .rank-text-wrapper .rank-wrapper {
    border-radius: 100vmax;
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(70px, 9.11vw, 86px);
    margin-right: 20px;
    width: clamp(70px, 9.11vw, 86px);
}

.container-scene-11-100.-red .inner-scene-11-100 .rank-wrapper {background-color: #FB7492;}
.container-scene-11-100.-yellow .inner-scene-11-100 .rank-wrapper {background-color: #EDB357;}
.container-scene-11-100.-purple .inner-scene-11-100 .rank-wrapper {background-color: #C68AEF;}
.container-scene-11-100.-blue .inner-scene-11-100 .rank-wrapper {background-color: #5CB3FC;}
.container-scene-11-100.-pink .inner-scene-11-100 .rank-wrapper {background-color: #E990CA;}
.container-scene-11-100.-lightblue .inner-scene-11-100 .rank-wrapper {background-color: #3CC6EC;}

.inner-scene-11-100 .rank-text-wrapper .rank-wrapper .number {
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(36px, 4.6875vw, 50px);
    font-weight: bold;
    letter-spacing: -1px;
}

.inner-scene-11-100 .rank-text-wrapper .rank-wrapper .rank {
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(18px, 2.34375vw, 23px);
    font-weight: bold;
    padding-top: 0.5em;
}

.inner-scene-11-100 .rank-text-wrapper .text {
    color: #6B6B6B;
    font-size: clamp(18px, 2.34375vw, 26px);
    font-weight: bold;
    letter-spacing: 0;
}

.inner-scene-11-100 .rank-text-wrapper .text.space-tight {
    letter-spacing: -0.06em;
}

.inner-scene-11-100 .percent-and-illust {
    display: flex;
    justify-content: space-between;
    min-height: clamp(140px, 18.2vw, 200px);
}

.inner-scene-11-100 .aruaru-and-percent {
    margin-top: 20px;
    width: clamp(100px, 13vw, 180px);
}

.inner-scene-11-100 .aruaru-and-percent .scene-aruaru {
    color: #6B6B6B;
    font-size: clamp(14px, 1.78vw, 20px);
}

.inner-scene-11-100 .percent-wrapper {
    display: flex;
    justify-content: start;
    align-items: baseline;
}

.container-scene-11-100.-red .inner-scene-11-100 .percent-wrapper {color: #FB7492;}
.container-scene-11-100.-yellow .inner-scene-11-100 .percent-wrapper {color: #EDB357;}
.container-scene-11-100.-purple .inner-scene-11-100 .percent-wrapper {color: #C68AEF;}
.container-scene-11-100.-blue .inner-scene-11-100 .percent-wrapper {color: #5CB3FC;}
.container-scene-11-100.-pink .inner-scene-11-100 .percent-wrapper {color: #E990CA;}
.container-scene-11-100.-lightblue .inner-scene-11-100 .percent-wrapper {color: #3CC6EC;}

.inner-scene-11-100 .aruaru-and-percent .percent-wrapper .number {
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(34px, 4.33vw, 65px);
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1;
}

.inner-scene-11-100 .aruaru-and-percent .percent-wrapper .percent {
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(20px, 2.55vw, 33px);
    font-weight: bold;
    line-height: 1;
}

.container-scene-11-100 .inner-scene-11-100 .percent-and-illust .pick-up-illust {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: clamp(180px, 23.4vw, 260px);
}

.container-scene-11-100 .inner-scene-11-100 .percent-and-illust .pick-up-illust img {
  zoom: clamp(0.65, calc((var(--w-num) - 768) * 0.21 / 372 + 0.65), 0.86);
}

/* accordion */

.accordion-wrapper {}

.accordion-wrapper .accordion-contents {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-heght 0.3s ease-out, opacity 0.3s ease-out;
}

.accordion-wrapper .accordion-contents.is-active {
    max-height: 10000px;
    opacity: 1;
}

.accordion-wrapper .accordion-contents .box-scene-11-100 {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    min-height: clamp(100px, 13.02vw, 140px);
    padding: 10px 20px;
}

.accordion-wrapper .accordion-contents .box-scene-11-100 .rank-wrapper {
    border-radius: 100vmax;
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(60px, 7.8125vw, 86px);
    margin-right: 15px;
    width: clamp(60px, 7.8125vw, 86px);
}

.accordion-wrapper .accordion-contents .box-scene-11-100 .rank-wrapper .number {
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(36px, 4.6875vw, 50px);
    font-weight: bold;
    letter-spacing: -1px;
}

.accordion-wrapper .accordion-contents .box-scene-11-100 .rank-wrapper .rank {
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(18px, 2.34375vw, 23px);
    font-weight: bold;
    padding-top: 0.75em;
}

.accordion-wrapper .accordion-contents .box-scene-11-100.rank100 .rank-wrapper .number {
    font-size: clamp(26px, 3.385vw, 40px);
}

.accordion-wrapper .accordion-contents .box-scene-11-100.rank100 .rank-wrapper .rank {
    font-size:  18px;
    padding-top: 0.75em;
}

.accordion-wrapper .accordion-contents .box-scene-11-100 .text-and-percent {
    max-width: 333px;
    min-width: clamp(140px, 18.22vw, 230px);
}

.accordion-wrapper .accordion-contents .box-scene-11-100 .text-and-percent .text {
    color: #6B6B6B;
    font-size: clamp(11px, 1.432vw, 18px);
    font-weight: bold;
    letter-spacing: 0;
}

.accordion-wrapper .accordion-contents .box-scene-11-100 .text-and-percent .text ul {
    margin-bottom: 0;
}

.accordion-wrapper .accordion-contents .box-scene-11-100 .text-and-percent .percent-wrapper .number {
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1;
}

.accordion-wrapper .accordion-contents .box-scene-11-100 .text-and-percent .percent-wrapper .percent {
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(18px, 2.29vw, 24px);
    font-weight: bold;
    line-height: 1;
}

.accordion-wrapper .accordion-contents .box-scene-11-100 .CMP-CM05-block.section:nth-of-type(3) {
    margin-left: auto;
    margin-right: auto;
}

.accordion-wrapper .accordion-contents .box-scene-11-100 .illust-area .uc-mod-media-01 {
    margin-bottom: 0 !important;
}

.accordion-wrapper .accordion-contents .box-scene-11-100 .illust-area img {
    zoom: clamp(0.6, calc((var(--w-num) - 768) * 0.2 / 372 + 0.6), 0.8);
}

.accordion-wrapper .accordion-btn {
    margin-top: 20px;
}

.accordion-wrapper .accordion-btn button {
    /* reset --- */
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    /* --- reset */
    background-color: #3A459F;
    border-radius: 100vmax;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(16px, 2.08vw, 18px);
    margin-bottom: 40px;
    min-height: 80px;
    position: relative;
    width: 100%;
}

.accordion-wrapper .accordion-btn button::after {
    background-color: #fff;
    border-radius: 100vmax;
    color: #3A459F;
    content: "\e145";
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Material Icons";
    font-size: 42px;
    height: 47px;
    position: absolute;
    top: calc(50% - 23.5px);
    right: 30px;
    width: 47px;
}

.accordion-wrapper .accordion-btn.is-active button::after {
    content: "\e15b";
}

.inner-scene-11-100 .guide-text {
    color: #000;
    font-size: clamp(13px, 1.692vw, 20px);
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

.inner-scene-11-100 .btn-modal button {
    /* reset --- */
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    /* --- reset */
    border: solid 1px #3C459A;
    border-radius: 100vmax;
    color: #3D4EA6;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(16px, 2.08vw, 18px);
    font-weight: bold;
    margin-bottom: 20px;
    min-height: 84px;
    position: relative;
    width: 100%;
}

.inner-scene-11-100 .btn-modal button::after {
    border: 0;
    border-top: solid 3px #3D4EA6;
    border-right: solid 3px #3D4EA6;
    content: '';
    transform: rotate(45deg);
    margin: auto;
    height: 12px;
    position: absolute;
    top: calc(50% - 4px);
    right: 20px;
    width: 12px;
}

/* ============================= voice =================================== */

.voice-section {
    background-color: #FAFAFA;
    padding: 80px 25px 65px;
}

.voice-section .voice-wrapper {
    margin: 0 auto;
    max-width: 1100px;
}

.voice-section .title-seiritask100 {
    margin-bottom: 50px;
}

.voice-section .voice-container {
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr 1fr;
}

.voice-section .voice-container .box-voice {
    background-color: #fff;
    border-style: solid;
    border-width: 1px;
    border-radius: 20px;
    display: flex;
    justify-content: start;
    align-items: center;
    min-height: clamp(140px, 18.22vw, 190px);
    padding: 30px;
}

.voice-section .box-voice.-red {border-color: #D06CA6; color: #DE65A8;}
.voice-section .box-voice.-yellow {border-color: #DE9A14; color: #DE9A14;}
.voice-section .box-voice.-blue {border-color: #4EBEE7; color: #00C0EB;}

.voice-section .box-voice .uc-object {
    width: 25.37%;
}

.voice-section .box-voice .uc-caption {
    font-size: clamp(12px, 1.53vw, 24px);
    font-weight: bold;
    margin-left: 15px;
}

/* ============================= yurutto =================================== */

.yurutto-section {
    background: url('/content/dam/sites/www_sofy_jp/seiritask100/image/bg-seiritask100-yurutto_pc.png') no-repeat 0 0 / cover;
    padding: 80px 25px;
}

.yurutto-section .yurutto-wrapper {
    margin: 0 auto;
    max-width: 1100px;
}

.yurutto-section .yurutto-wrapper .title-yurutto {
    margin: 0 auto 80px;
    max-width: 365px;
}

.yurutto-section .yurutto-wrapper .lead-text {
    margin-bottom: 80px;
}

.yurutto-section .yurutto-wrapper .photo-talent {
    margin-bottom: 100px;
}

.yurutto-section .yurutto-wrapper .youtube-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.yurutto-section .yurutto-wrapper .youtube-wrapper .box-youtube-yurutto {
    max-width: 530px;
}

.yurutto-section .yurutto-wrapper .youtube-wrapper .title-yurutto-vol h3 {
    color: #2E3893;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(14px, 1.78vw, 30px);
    font-weight: bold;
    position: relative
}

.yurutto-section .yurutto-wrapper .youtube-wrapper .title-yurutto-vol h3::before {
    background: linear-gradient(to right, #6A9DE8, #AE98D1 46%, #DF95C1 82%, #F294BB);
    content: "";
    height: 6.45px;
    position: absolute;
    left: 0;
    width: 34%;
}

.yurutto-section .yurutto-wrapper .youtube-wrapper .title-yurutto-vol h3::after {
    background: linear-gradient(to right, #6A9DE8, #AE98D1 46%, #DF95C1 82%, #F294BB);
    content: "";
    height: 6.45px;
    margin-left: 10%;
    position: absolute;
    right: 0;
    width: 34%;
}

.yurutto-section .yurutto-wrapper .youtube-wrapper .yurutto-video {
    border: 10px solid #E95A9F;
    line-height: 0;
}

.yurutto-section .yurutto-wrapper .youtube-wrapper .yurutto-video iframe {
    min-height: 250px;
    width: 100%;
}

.yurutto-section .yurutto-wrapper .youtube-wrapper .yurutto-video.-coming-soon {
    background-color: #C0C0C0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 270px;
    width: 100%;
}

.yurutto-section .yurutto-wrapper .youtube-wrapper .yurutto-video.-coming-soon p {
    color: #000;
    font-size: clamp( 16px, 2vw, 28px);
}

/* ============================= lineup =================================== */

.lineup-section {
    background-color: #fff;
    padding: 80px 25px 60px;
}

.lineup-section .lineup-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.lineup-wrapper .text-luneup-gradation {
    display: flex;
    justify-content: center;
    align-items: center;
}

.lineup-wrapper .text-luneup-gradation p {
    background: linear-gradient(to right, #709CE6, #F094BC);
    background-clip: text;
    color: transparent;
    font-size: clamp(20px, 5.71vw, 32px);
    font-weight: bold;
    margin-bottom: 80px;
    text-align: center;
}

.lineup-wrapper .title-seiritask100 {
    margin-bottom: 40px;
}

/* lineup */

.lineup-wrapper .container-lineup {
    background-color: #D2ECFF;
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr 1fr;
    padding: 30px;
}

.container-lineup .box-lineup {
    background-color: #fff;
    border-radius: 10px;
}

.container-lineup .box-lineup .innner-lineup a {
    display: block;
    padding-bottom: 30px;
    position: relative;
}

.container-lineup .box-lineup .innner-lineup a::after {
    background: url('/content/dam/sites/www_sofy_jp/seiritask100/image/icon-seiritask100-arrow-01.png') no-repeat 0 0 / contain;
    content: "";
    display: block;
    height: clamp(25px, 3.25vw, 50px);
    position: absolute;
    top: 50%;
    right: 20px;
    width: clamp(25px, 3.25vw, 50px);
}

.container-lineup .box-lineup .innner-lineup h3 {
    background: linear-gradient(to left, #6E9CE6, #F094BC);
    border-radius: 10px 10px 0 0;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(16px, 2vw, 24px);
    height: 96px;
}

.container-lineup .box-lineup .innner-lineup .uc-put-lead.uc-js-put-lead p:nth-of-type(1) {
    color: #3A459F;
    font-size: clamp(12px, 1.53vw, 20px);
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.container-lineup .box-lineup .innner-lineup .uc-put-lead.uc-js-put-lead p:nth-of-type(2) {
    color: #3A459F;
    font-size: clamp(14px, 1.78vw, 26px);
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}
.container-lineup .box-lineup .innner-lineup .uc-put-lead.uc-js-put-lead p:nth-of-type(2) b {
    display: block;
}

.container-lineup .box-lineup .innner-lineup .uc-put-object {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
}

.container-lineup .box-lineup .innner-lineup .uc-put-object img {
    max-height: 288px;
}

.container-lineup .box-lineup .innner-lineup .uc-caption {
    background-color: #3A459F;
    border-radius: 10px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    height: 35px;
    margin: 0 auto;
    width: 100px;
}

/* faq */

.lineup-wrapper .faq {
    background-color: #D2ECFF;
    padding: 30px 30px 60px;
}

.lineup-wrapper .faq .faq-btn button {
    /* reset --- */
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    /* --- reset */
    background-color: #3A459F;
    border-radius: 100vmax;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(16px, 2.08vw, 18px);
    font-weight: bold;
    margin: 0 auto;
    min-height: 60px;
    position: relative;
    width: 44%;
}

.lineup-wrapper .faq .faq-btn button::after {
    background-color: #fff;
    border-radius: 100vmax;
    color: #3A459F;
    content: "\e145";
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Material Icons";
    font-size: 42px;
    font-weight: normal;
    height: 47px;
    position: absolute;
    top: calc(50% - 23.5px);
    right: 2.66vw;
    width: 47px;
}

.lineup-wrapper .faq .faq-btn button.is-active button::after {
    content: "\e15b";
}

/* ============================= banner (osusume-link) =================================== */

.banner-section {
    background-color: #CFE0FF;
    padding: 80px 40px;
}

.banner-section .title-seiritask100-text-blue h2 {
    color: #2E3893;
    font-size: clamp(18px, 3.125vw, 32px);
    font-weight: bold;
}

.banner-section .banner-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ============================= modal =================================== */

.modal-overlay.js-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(111, 157, 231, 0.6), rgba(240, 148, 188, 0.6));
    z-index: 9999;

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.js-modal.-is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* modal - close button */

.js-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
}

.js-close-btn button {
    background: none;
    border: none;
    font-size: 46px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.js-close-btn button:hover {
    opacity: 0.7;
}

.modal-content {
    background-color: #fff;
    border-radius: 20px;
    display: grid;
    grid-template-rows: 1fr 1fr;
    max-width: 580px;
    height: 720px;
    overflow-y: auto;
    padding: 20px 50px 30px 50px;
    position: relative;
    width: 100%;
}

.modal-content .CMP-CM10-text.section:nth-of-type(2) {
    display: flex;
    justify-content: center;
    align-items: end;
}

.modal-content .box-modal {}

.box-modal .title h2 {
    color: #3C459A;
    font-size: clamp(16px, 2.08vw, 32px);
    font-weight: bold;
    margin-bottom: 20px;
    text-align: left;
}

.box-modal .CMP-CM11-image-and-text img {
    max-width: 200px;
}

.box-modal .text p {
    color: #3C459A;
    font-size: clamp(12px, 1.5625vw, 16px);
    font-weight: 400;
}

.box-modal .list {
    color: #3C459A;
    font-size: clamp(12px, 1.5625vw, 16px);
    font-weight: 400;
}

.box-modal .list ul {}

.box-modal .list ul li {
    list-style-type: none;
    margin-bottom: 20px;
    position: relative;
}

.box-modal .list ul li::before {
    background-color: #3C459A;
    border-radius: 100vmax;
    content: "";
    display: inline-block;
    height: 12px;
    margin: 0 0.25em 0 -1em;
    width: 12px;
}

/* modal - btn */

.modal-content .btn-item-detail a {
    background-color: #3C459A;
    border-radius: 100vmax;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(14px, 1.82vw, 18px);
    height: 75px;
    position: relative;
    width: 360px;
}

.modal-content .btn-item-detail a::after {
    border: 0;
    border-top: solid 3px #fff;
    border-right: solid 3px #fff;
    content: '';
    transform: rotate(45deg);
    margin: auto;
    height: 12px;
    position: absolute;
    top: calc(50% - 6px);
    right: 30px;
    width: 12px;
}

/* modal - FAQ */

#FAQ.modal-content {
    height: 80vh;
    padding: 40px 25px 20px 35px;
}

#FAQ.modal-content .title h2 {
    text-align: center;
}

#FAQ.modal-content .FAQ-wrapper {
    border-bottom: 1px dashed #3C459A;
    padding: 40px 0 20px 0;
}

#FAQ.modal-content .FAQ-wrapper.-first {
    padding-top: 20px;
}

#FAQ.modal-content .FAQ-wrapper .question,
#FAQ.modal-content .FAQ-wrapper .answer {
    display: flex;
    margin-bottom: 20px;
}

#FAQ.modal-content .FAQ-wrapper .question .icon,
#FAQ.modal-content .FAQ-wrapper .answer .icon {
    color: #3C459A;
    font-size: clamp(16px, 2.08vw, 22px);
    font-weight: 400;
    width: 2.5em;
}

#FAQ.modal-content .FAQ-wrapper .question .text,
#FAQ.modal-content .FAQ-wrapper .answer .text {
    color: #3C459A;
    font-size: clamp(12px, 1.5625vw, 16px);
    font-weight: 400;
    margin-top: 0.25em;
    padding-right: 25px;
}

/* =========================================================================
    responsive
========================================================================= */

@media screen and (max-width: 768px) {

/* floating banner */

    .floating-banner {
        top: clamp(540px, 149.33vw, 874px);
    }

    .floating-banner img {
        width: clamp(200px, 57.14vw, 300px) !important;
        max-width: none;
    }

/* layout */

    .introduction {
        padding: 13vw 6vw;
    }

    .top10-section {
        padding: 10vw 6vw 9vw;
    }

    .scene-section {
        padding: 10vw 6vw 9vw;
    }

    .voice-section {
        padding: 10vw 6vw 9vw;
    }

    .yurutto-section {
        background: none;
        background: linear-gradient(135deg, #FFDEE6 0%, #D6F5FF 100%);
        padding: 10vw 6vw 6vw;
    }

    .lineup-section {
        padding: 10vw 6vw 6vw;
    }

    .banner-section {
        background-color: rgba(207, 224, 255, 0.2);
        padding: 10vw 5vw;
    }


/* introduction */

    .introduction img {
        max-width: clamp(200px, 53.33vw, 400px);
    }

    .introduction .uc-caption {
        line-height: 200%;
    }

/* text */

    .lead-text {
        font-size: clamp(16px, 4.266vw, 32px);
        text-align: left !important;
    }

    .note-text {
        font-size: clamp(11px, 2.933vw, 18px);
        text-align: left !important;
    }

/* title */

    .title-seiritask100 {
        min-height: auto;
        padding: 2vw;
    }

/* top10 */

    .top10 .title-seiritask100 {
        margin-bottom: 6vw;
        padding: 2vw 10vw;
    }

    .top10-wrapper {
        margin-top: 6vw;
    }

    .top10-wrapper .box-seiritask100 {
        padding: 4vw;
        margin-bottom: 4vw;
    }

    .top10-wrapper .box-seiritask100.-no1,
    .top10-wrapper .box-seiritask100.-no2,
    .top10-wrapper .box-seiritask100.-no4,
    .top10-wrapper .box-seiritask100.-no5,
    .top10-wrapper .box-seiritask100.-no7,
    .top10-wrapper .box-seiritask100.-no8,
    .top10-wrapper .box-seiritask100.-no10 {
        margin-right: 0;
    }

    .top10-wrapper .titile-seiritask100-top10 h3 {
        font-size: clamp(18px, 4.8vw, 40px);
        height: clamp(60px, 16vw, 120px);
        margin-bottom: 2vw;
        min-height: auto;
        padding-left: clamp(60px, 16vw, 140px);
    }

    .top10-wrapper .-no1 .titile-seiritask100-top10 h3,
    .top10-wrapper .-no2 .titile-seiritask100-top10 h3,
    .top10-wrapper .-no3 .titile-seiritask100-top10 h3 {
        padding-left: clamp(90px, 24vw, 170px);
    }

    .top10-wrapper .titile-seiritask100-top10 h3::before {
        height: clamp(44px, 11.73vw, 88px);
        width: clamp(44px, 11.73vw, 88px);
        left: 0;
    }

    .top10-wrapper .-no1 .titile-seiritask100-top10 h3::before,
    .top10-wrapper .-no2 .titile-seiritask100-top10 h3::before,
    .top10-wrapper .-no3 .titile-seiritask100-top10 h3::before {
        height: clamp(60px, 16vw, 119px);
        width: clamp(73px, 19.46vw, 146px);
        left: 0;
        bottom: 0;
    }

    .top10-wrapper .titile-seiritask100-top10 h3 span:nth-of-type(1) {
        font-size: clamp(25px, 6.66vw, 50px);
        left: 0.25em;
    }

    .top10-wrapper .-no1 .titile-seiritask100-top10 h3 span:nth-of-type(1),
    .top10-wrapper .-no2 .titile-seiritask100-top10 h3 span:nth-of-type(1),
    .top10-wrapper .-no3 .titile-seiritask100-top10 h3 span:nth-of-type(1) {
        font-size: clamp(30px, 8vw, 60.5px);
        left: 0.6em;
        bottom: -0.25em;
    }

    .top10-wrapper .titile-seiritask100-top10 h3 span:nth-of-type(2) {
        font-size: clamp(15px, 4vw, 30px);
        left: 1.4em;
    }

    .top10-wrapper .-no1 .titile-seiritask100-top10 h3 span:nth-of-type(2),
    .top10-wrapper .-no2 .titile-seiritask100-top10 h3 span:nth-of-type(2),
    .top10-wrapper .-no3 .titile-seiritask100-top10 h3 span:nth-of-type(2) {
        font-size: clamp(16px, 4.266vw, 32px);
        left: 2.25em;
        bottom: 0.15em;
    }

    .top10-wrapper .-no10 .titile-seiritask100-top10 h3 span:nth-of-type(1) {left: 0.05em;}
    .top10-wrapper .-no10 .titile-seiritask100-top10 h3 span:nth-of-type(2) {left: 1.8em;}

    .top10-wrapper .parcent-and-illust {
        margin-left: 0;
        margin-right: 0;
        padding-top: 3vw;
    }

    .top10-wrapper .top10-aruaru-percent-wrapper {
        height: clamp(90px, 24vw, 181px);
        width: clamp(90px, 24vw, 181px);
    }

    .top10-wrapper .top10-aruaru-percent-wrapper .top10-aruaru {
        font-size: clamp(11.34px, 3.024vw, 22.68px);
        padding: 2em 0 0 0.7em;
    }

    .top10-wrapper .top10-aruaru-percent-wrapper .top10-percent-wrapper .top10-number {
        font-size: clamp(32px, 8.533vw, 64px);
        padding: 0 0 0 0.25em;
    }

    .top10-wrapper .top10-aruaru-percent-wrapper .top10-percent-wrapper .top10-percent {
        font-size: clamp(16px, 4.266vw, 32px);
    }

    .top10-wrapper .top10-illust {
        height: auto;
        min-height: clamp(180px, 48vw, 380px);
        width: clamp(205px, 54.66vw, 470px);
    }

    .top10-wrapper .top10-illust.-no1 img {
        height: clamp(175px, 46.66vw, 350px);
        width: clamp(138px, 36.8vw, 276px);
    }
    .top10-wrapper .top10-illust.-no2 img {
        height: clamp(162px, 43.2vw, 324px);
        width: clamp(114.5px, 30.53vw, 229px);
    }
    .top10-wrapper .top10-illust.-no3 img {
        height: clamp(158.5px, 42.26vw, 317px);
        width: clamp(171.5px, 45.73vw, 343px);
    }
    .top10-wrapper .top10-illust.-no4 img {
        height: clamp(172.5px, 46vw, 345px);
        width: clamp(47.5px, 12.66vw, 95px);
    }
    .top10-wrapper .top10-illust.-no5 img {
        height: clamp(122.5px, 32.66vw, 245px);
        width: clamp(148px, 39.46vw, 296px);
    }
    .top10-wrapper .top10-illust.-no6 img {
        height: clamp(119.5px, 31.86vw, 239px);
        width: clamp(156px, 41.6vw, 312px);
    }
    .top10-wrapper .top10-illust.-no7 img {
        height: clamp(156.5px, 41.73vw, 313px);
        width: clamp(131px, 34.93vw, 262px);
    }
    .top10-wrapper .top10-illust.-no8 img {
        height: clamp(137.5px, 36.66vw, 275px);
        width: clamp(145.5px, 38.8vw, 291px);
    }
    .top10-wrapper .top10-illust.-no9 img {
        height: clamp(109.5px, 29.2vw, 219px);
        width: clamp(171px, 45.6vw, 342px);
    }
    .top10-wrapper .top10-illust.-no10 img {
        height: clamp(181px, 48.26vw, 362px);
        width: clamp(55px, 14.66vw, 110px);
    }

    .top10-wrapper .btn-top10 {
        margin-top: 2vw;
        padding-left: 0;
        padding-right: 0;
    }

    .top10-wrapper .btn-top10 button {
        font-size: clamp(16px, 4.266vw, 32px);
        min-height: clamp(45px, 12vw, 90px);
    }

    .top10-wrapper .btn-top10 button::after {
        border-top: solid 0.6vw #fff;
        border-right: solid 0.6vw #fff;
        height: 2.4vw;
        top: calc(50% - 1.2vw);
        right: 4vw;
        width: 2.4vw;
    }

/* scene */

    .scene-11-100 .title-seiritask100 {
        margin-bottom: 5vw;
        padding: 2vw 7vw;
    }

    .scene-11-100-wrapper {
        margin-top: 6vw;
    }

    .container-scene-11-100 {
        margin-bottom: 5vw;
    }

    .container-scene-11-100.-red,
    .container-scene-11-100.-purple,
    .container-scene-11-100.-pink {
        margin-right: 0;
    }

    .container-scene-11-100.-yellow,
    .container-scene-11-100.-blue,
    .container-scene-11-100.-lightblue {
        margin-left: 0;
    }

    .container-scene-11-100 .inner-scene-11-100 {
        padding: 2.66vw 2.66vw 1.33vw 2.66vw;
    }

    .container-scene-11-100 .inner-scene-11-100 .box-scene-11-100 {
        margin-bottom: 2.66vw;
        padding: 2.66vw 2.66vw 1.33vw 2.66vw;
    }

    .container-scene-11-100 .title h3 {
        font-size: clamp(20px, 5.333vw, 40px);
        height: clamp(60px, 16vw, 80px);
    }

    .inner-scene-11-100 .rank-text-wrapper .text {
        font-size: clamp(16px, 4.266vw, 32px);
    }

    .inner-scene-11-100 .rank-text-wrapper .rank-wrapper {
        height: clamp(53px, 14.13vw, 105px);
        margin-right: 3vw;
        width: clamp(53px, 14.13vw, 105px);
    }

    .inner-scene-11-100 .rank-text-wrapper .rank-wrapper .number {
        font-size: clamp(32px, 8.533vw, 65px);
    }

    .inner-scene-11-100 .rank-text-wrapper .rank-wrapper .rank {
        font-size: clamp(14px, 3.733vw, 28px);
        padding-top: 0.75em;
    }

    .inner-scene-11-100 .percent-and-illust {
        margin: 3vw 2vw 3vw 0;
        min-height: clamp(110px, 29.33vw, 200px);
    }

    .inner-scene-11-100 .aruaru-and-percent {
        margin-top: 2.66vw;
        width: clamp(100px, 26.66vw, 200px);
    }

    .inner-scene-11-100 .aruaru-and-percent .scene-aruaru {
        font-size: clamp(12px, 3.2vw, 22.68px);
    }

    .inner-scene-11-100 .aruaru-and-percent .percent-wrapper .number {
        font-size: clamp(40px, 10.66vw, 80px);
    }

    .inner-scene-11-100 .aruaru-and-percent .percent-wrapper .percent {
        font-size: clamp(20px, 5.333vw, 40px);
    }

    .container-scene-11-100 .inner-scene-11-100 .percent-and-illust .pick-up-illust {
        width: clamp(180px, 48vw, 350px);
    }

    .container-scene-11-100 .inner-scene-11-100 .percent-and-illust .pick-up-illust img {
    /* 768のとき1(100%)、375のとき0.5(50%)になる計算式 */
        zoom: clamp(0.5, calc((var(--w-num) - 375) / 786 + 0.5), 1);
    }

/* accordion */

    .accordion-wrapper .accordion-btn {
        margin-top: 6vw;
    }

    .accordion-wrapper .accordion-btn button {
        font-size: clamp(18px, 4.8vw, 36px);
        margin-bottom: 8vw;
        min-height: clamp(50px, 13.33vw, 98px);
    }

    .accordion-wrapper .accordion-btn button::after {
        font-size: clamp(36px, 9.6vw, 72px);
        height: clamp(28px, 7.466vw, 57px);
        top: calc(50% - clamp(14px, 3.733vw, 28.5px));
        right: 6vw;
        width: clamp(28px, 7.466vw, 57px);
    }

    .inner-scene-11-100 .guide-text {
        font-size: clamp(12px, 3.2vw, 24px);
        margin-bottom: 4vw;
    }

    .inner-scene-11-100 .btn-modal button {
        font-size: clamp(18px, 4.8vw, 36px);
        margin-bottom: 6vw;
        min-height: clamp(50px, 13.33vw, 102px);
    }

    .accordion-wrapper .accordion-contents .box-scene-11-100 {
        margin-bottom: 2.66vw;
        min-height: clamp(85px, 22.66vw, 170px);
        padding: 1.33vw 2.66vw;
    }

    .accordion-wrapper .accordion-contents .box-scene-11-100 .rank-wrapper {
        height: clamp(53px, 14.13vw, 105px);
        margin-right: 2vw;
        width: clamp(53px, 14.13vw, 105px);
    }

    .accordion-wrapper .accordion-contents .box-scene-11-100 .rank-wrapper .number {
        font-size: clamp(32px, 8.533vw, 65px);
    }

    .accordion-wrapper .accordion-contents .box-scene-11-100 .rank-wrapper .rank {
        font-size: clamp(14px, 3.733vw, 28px);
        padding-top: 0.75em;
    }

    .accordion-wrapper .accordion-contents .box-scene-11-100.rank100 .rank-wrapper .number {
        font-size: clamp(24px, 6.4vw, 40px);
    }

    .accordion-wrapper .accordion-contents .box-scene-11-100.rank100 .rank-wrapper .rank {
        font-size: clamp(14px, 3.733vw, 28px);
        padding-top: 0.5em;
    }

    .accordion-wrapper .accordion-contents .box-scene-11-100 .text-and-percent {
        max-width: clamp(230px, 61.33vw, 406px);
        min-width: clamp(150px, 40vw, 300px);
    }

    .accordion-wrapper .accordion-contents .box-scene-11-100 .text-and-percent .text {
        font-size: clamp(11px, 3.14vw, 22px);
    }

    .accordion-wrapper .accordion-contents .box-scene-11-100 .text-and-percent .percent-wrapper .number {
        font-size: clamp(24px, 6.4vw, 36px);
    }

    .accordion-wrapper .accordion-contents .box-scene-11-100 .text-and-percent .percent-wrapper .percent {
        font-size: clamp(18px, 4.8vw, 24px);
    }

    .accordion-wrapper .accordion-contents .box-scene-11-100 .illust-area {
        max-height: none !important;
        max-width: none !important;
    }

/* accordion illust */

    .accordion-wrapper .accordion-contents .box-scene-11-100 .illust-area img {
        /* 768のとき1(100%)、375のとき0.5(50%)になる計算式 */
        zoom: clamp(0.5, calc((var(--w-num) - 375) / 786 + 0.5), 1);
    }

/* voice */

    .voice-section .title-seiritask100 {
        margin-bottom: 6vw;
        padding: 2vw 18vw;
    }

    .voice-section .voice-container {
        grid-template-columns: 1fr;
    }

    .voice-section .voice-container .box-voice {
        min-height: clamp(100px, 26.66vw, 147px);
        padding: 3.5vw 7vw;
    }

    .voice-section .box-voice .uc-object {
        width: 20.92%;
    }

    .voice-section .box-voice .uc-caption {
        font-size: clamp(12px, 3.2vw, 24px);
        margin-left: 2vw;
    }

/* yurutto */

    .yurutto-section .yurutto-wrapper .youtube-wrapper {
        display: block;
        margin-bottom: 0;
    }

    .yurutto-section .yurutto-wrapper .title-yurutto {
        margin: 0 auto 6vw;
        max-width: 490px;
        width: 65.33vw;
    }

    .yurutto-section .yurutto-wrapper .lead-text {
        margin-bottom: 8vw;
    }

    .yurutto-section .yurutto-wrapper .photo-talent {
        margin-bottom: 8vw;
    }

    .yurutto-section .yurutto-wrapper .youtube-wrapper .box-youtube-yurutto {
        max-width: 100%;
        margin-bottom: 6vw;
        padding: 0 1.66vw;
    }

    .yurutto-section .yurutto-wrapper .youtube-wrapper .title-yurutto-vol h3 {
        font-size: clamp(18px, 4.8vw, 40px);
        margin-bottom: 4vw;
    }

    .yurutto-section .yurutto-wrapper .youtube-wrapper .yurutto-video {
        border-width: clamp(5px, 1.33vw, 10px);
    }

    .yurutto-section .yurutto-wrapper .youtube-wrapper .yurutto-video iframe {
        min-height: auto;
        height: 46vw;
    }

    .yurutto-section .yurutto-wrapper .youtube-wrapper .yurutto-video.-coming-soon {
        min-height: auto;
        height: 46vw;
    }

/* lineup */

    .lineup-wrapper .title-seiritask100 {
        margin-bottom: 6vw;
        padding: 3vw 12vw;
    }

    .lineup-wrapper .text-luneup-gradation p {
        font-size: clamp(20px, 5.33vw, 40px);
        margin-bottom: 10vw;
    }

    .lineup-wrapper .container-lineup {
        border-radius: 6px;
        display: block;
        padding: 4vw 4vw 0.1vw 4vw;
    }

    .container-lineup .box-lineup {
        margin-bottom: 4vw;
    }

    .container-lineup .box-lineup .innner-lineup .uc-put-object img {
        max-height: clamp(200px, 53.33vw, 300px);
    }

    .container-lineup .box-lineup .innner-lineup h3 {
        font-size: clamp(18px, 4.8vw, 40px);
        height: auto;
        min-height: clamp(68px, 18.13vw, 120px);
        margin-bottom: 4vw;
        padding: 0 4vw;
    }

    .container-lineup .box-lineup .innner-lineup .uc-put-lead.uc-js-put-lead p:nth-of-type(1) {
        font-size: clamp(13px, 3.466vw, 26px);
        margin-bottom: 1vw;
    }

    .container-lineup .box-lineup .innner-lineup .uc-put-lead.uc-js-put-lead p:nth-of-type(2) {
        font-size: clamp(18px, 4.8vw, 40px);
        margin-bottom: 1vw;
    }

    .container-lineup .box-lineup .innner-lineup .uc-put-object {
        padding: 1vw 0;
    }

    .container-lineup .box-lineup .innner-lineup .uc-caption {
        font-size: clamp(12px, 3.2vw, 20px);
        height: clamp(35px, 9.333vw, 50px);
        width: clamp(100px, 26.66vw, 140px);
    }

    .container-lineup .box-lineup .innner-lineup a::after {
        height: clamp(30px, 8vw, 60px);
        right: 4vw;
        width: clamp(30px, 8vw, 60px);
    }

/* faq */

    .lineup-wrapper .faq {
        background-color: #fff;
        padding: 4vw 4vw 8vw;
    }

    .lineup-wrapper .faq .faq-btn button {
        font-size: clamp(16px, 4.266vw, 30px);
        margin-top: 3vw;
        min-height: 60px;
        width: clamp(280px, 74.66vw, 360px);
    }

    .lineup-wrapper .faq .faq-btn button::after {
        font-size: 36px;
        font-weight: normal;
        height: 35px;
        top: calc(50% - 18px);
        right: 4vw;
        width: 35px;
    }

/* banner */

    .banner-section .title-seiritask100-text-blue h2 {
        font-size: clamp(20px, 5.333vw, 40px);
    }

/* modal */

    .modal-overlay.js-modal {
        background: linear-gradient(180deg, rgba(111, 157, 231, 1), rgba(240, 148, 188, 1));
        padding: 5.6vw;
    }

    .js-close-btn {
        position: absolute;
        top: 0;
        right: 2vw;
    }

    .modal-content {
        border-radius: 4vw;
        max-width: none;
        height: 86vh;
        padding: 6vw 5.6vw;
        position: relative;
        width: 100%;
    }

    .box-modal .CMP-CM11-image-and-text img {
        max-width: clamp(200px, 53.33vw, 300px);
    }

    .box-modal .title h2 {
        font-size: clamp(20px, 5.333vw, 40px);
        margin-bottom: 4vw;
        margin-top: 2vw;
    }

    .box-modal .text p {
        font-size: clamp(12px, 3.2vw, 24px);
    }

    .box-modal .list {
        font-size: clamp(12px, 3.2vw, 24px);
    }

    .box-modal .list ul li {
        margin-bottom: 4vw;
    }

    .box-modal .list ul li::before {
        height: clamp(6px, 1.6vw, 12px);
        width: clamp(6px, 1.6vw, 12px);
    }

    .modal-content .btn-item-detail a {
        font-size: clamp(16px, 4.266vw, 32px);
        height: clamp(60px, 16vw, 90px);
        width: clamp(300px, 80vw, 428px);
    }

}