@charset "utf-8";
@import url('../css/common.css');

/* -------------------
LAYOUT               |
------------------- */
:root {
    --orange: #ff5e1e;
    --blue: #1f3893;
    --green: #619600;
}
/* -------------------
INDEX                |
------------------- */
#content.ad {padding-top: 7rem;padding-bottom: 0;}
.body-ad.scroll header {display: none;}
.body-ad footer {display: none;}
main {position: relative;}
section {padding: clamp(30px, 15vw, 150px) 0; color: #000; overflow: hidden}
section h1 {text-align: center; font-size: clamp(20px, 4vw, 48px);margin-bottom: 2.5rem; font-weight: 900}
section h1+p {margin-top: -.5rem; margin-bottom: 1.5rem; font-size: clamp(15px, 3vw, 28px);}
section h1 small {font-size: clamp(18px, 4vw, 38px);; display: block; font-weight: normal; line-height: 2}
section h1 b {display: block}
section .btn {font-size: 1.2rem; border-radius: 3rem; padding: 1rem 2rem;font-weight: bold;}
section .btn:hover {box-shadow: 5px 5px .5rem rgba(0, 0, 0, 0.1); color: #111}
.visual1 .btn.white:hover {color: var(--orange)}
.visual2 .btn.white:hover {color: var(--green)}
.visual3 .btn.white:hover {color: var(--blue)}
.visual1 .btn.primary {background-color: var(--orange);}
.visual2 .btn.primary {background-color: var(--green); color: #fff}
.visual3 .btn.primary {background-color: var(--blue);color: #fff}
section .btn:first-of-type:last-of-type {margin: 0 auto;display: block;margin-top: 2rem;}
section .btn span {color: #fff000}
.tabScroll .tab-visual-nav {position: fixed;top: 0;left: 0;right: 0;}
.tabScroll .tab-visual-nav li {background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2)}
.tab-visual {height: 43.5rem; padding-top: 8rem; display: flex;/* max-width: 1920px; */margin: 0 auto; position: relative; background-position: 50%; background-repeat: no-repeat;background-size: cover}
.tab-visual-nav {top: 3.5rem;position: absolute;left: 0; right: 0; display: flex; width: 100%;max-width: 1200px; margin: 0 auto;gap: 1.5rem;text-align: center;z-index: 1}
.tab-visual-nav li {flex-basis: 0;flex-grow: 1; background-color: rgba(255, 255, 255, 0.2); border-radius: 3rem;}
.visual1 .tab-visual {background-image: url(/img/ad/bg_tab1.png)}
.visual1 .tab-visual-nav li.active {background-color: var(--orange)}
.visual1 .tab-visual-nav li.active:hover {background-color: #fff; color: var(--orange)}
.visual1 .tab-visual-nav li:not(.active):hover {background-color: #f5f5f5;}
.visual2 .tab-visual {background-image: url(/img/ad/bg_tab2.png)}
.visual2 .tab-visual-nav li.active {background-color: var(--green)}
.visual2 .tab-visual-nav li.active:hover {background-color: #fff; color: var(--green)}
.visual2 .tab-visual-nav li:not(.active):hover {background-color: #f5f5f5;}
.visual2 .tab-visual .copy li {background-image: url(/img/ad/visual2_check.png)}
.visual3 .tab-visual {background-image: url(/img/ad/bg_tab3.png)}
.visual3 .tab-visual-nav li.active {background-color: var(--blue)}
.visual3 .tab-visual-nav li.active:hover {background-color: #fff; color: var(--blue)}
.visual3 .tab-visual-nav li:not(.active):hover {background-color: #f5f5f5;}
.visual1 .spot {color: var(--orange)}
.visual2 .spot {color: var(--green)}
.visual3 .spot {color: var(--blue)}
.tab-visual-nav li.active {color: #fff;}
.tab-visual-nav li a {display: block; padding: .75rem; font-size: .9rem}
.tab-visual-nav li b {display: block; font-size: 1.35rem;}
.tab-visual .copy {line-height: 1.3;margin-top: 7rem}
.tab-visual .copy b {font-size: 1.8rem;display: block; font-weight: 800}
.tab-visual .copy strong {font-size: 4rem;display: block;font-weight: 900}
.tab-visual .copy p {font-size: 1rem; font-weight: bold}
.tab-visual .copy ul {font-size: 1.1rem;margin-top: 1.5rem; font-weight: bold}
.tab-visual .copy li {padding-left: 2rem;position: relative; background: url(/img/ad/visual1_check.png) no-repeat 0 50% / 1.5rem}
.tab-visual .copy li~li {margin-top: .5rem}
.visual1 .copy b span {color: var(--orange)}
.visual2 .copy b span {color: var(--green)}
.visual3 .copy b span {color: var(--blue)}
.tab-visual .copy p {margin-top: 1.5rem}
.tab-visual .btns {margin-top: 2rem}
.counsel {background-color: #3c3c3c; color: #fff}
.counsel h1 {font-size: clamp(20px, 3.5vw, 40px);}
.counsel ul {display: flex; align-items: center;gap: 2rem; justify-content: center;margin: 3rem 0}
.counsel li {display: flex; align-items: center; font-size: 1.1rem; gap: 1rem;}
.counsel li b {display: block; font-size: 1.5rem;}
.form {max-width: 920px;;margin-left: auto; margin-right: auto}
.form .form-control {border-radius: 1.75rem; min-height: 3.5rem; border-color: #3c3c3c}
.form .row+.row {margin-top: 1rem}
.form .col-form-label {padding-top: 1rem;padding-bottom: 1rem;}
.form .col-form-label span {color: var(--orange);margin-left: 5px}
.form .checkbox label {color: #fff; display: flex; align-items: center; gap: .25rem}
.form .checkbox label:before {content: "\F582"; color: #fff; font-size: 1.5rem}
.form .checkbox :checked+label:before {content: "\F26C";}
.form .btn {width: 100%; max-width: clamp(100px, 50vw, 400px); display: block; }
.btn.orange {background-color: var(--orange);}
.btn.green {background-color: var(--green); color: #fff}
.btn.blue {background-color: var(--blue); color: #fff}
.btn.white {background-color: #fff;}
.visual1 .sc1 {text-align: center;}
.visual1 .sc1 p {font-size: clamp(15px, 5vw, 36px); font-weight: bold}
.visual1 .sc1 ul {display: flex;flex-wrap: wrap;gap: 1.5rem;}
.visual1 .sc1 li {flex-basis: calc(33.3333% - 3rem);flex-grow: 1;border-radius: 1rem; background-color: #f7f7f9; padding: 3rem 1rem; display: flex; flex-direction: column;  align-items: center; font-size: .9rem; position: relative;}
.visual1 .sc1 li b {font-size: 1.4rem; display: block;margin-bottom: .5rem}
.visual1 .sc1 li:hover {left: 2px; top: 2px;box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.1)}
.visual1 .sc1 li img {margin: 1.5rem auto;}
.visual1 .sc2 {background: #ff703e url(/img/ad/bg_v1_sc2.png) repeat-x 50% 0;color: #fff;text-align: center}
.visual1 .sc2 h1 span {color: #ffe400}
.visual1 .sc2 p span {color: #ffe400}
.visual1 .sc2 .row {margin-top: 4rem; text-align: left; color: #000; font-size: clamp(13px, 2.25vw, 26px)}
.number-circle {
    counter-reset: circle-num;
    list-style: none;
    padding-left: 0;
    display: flex; flex-direction: column; gap: 1.5rem;
    justify-content: center;
    padding-top: 1rem
}

.number-circle li {
    position: relative;
    padding-left: 3.5rem;
}
.number-circle li::before {
    counter-increment: circle-num;
    content: counter(circle-num);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual1 .sc2 p {margin-bottom: 260px;font-size: clamp(16px, 3vw, 36px)}
.visual1 .sc3 {background: #fff4e9 url(/img/ad/bg_v1_sc3.png) no-repeat 50% 100%}
.visual1 .sc3 h1 {text-align: left}
.visual1 .sc3 h1 .highlight {display: inline;  box-shadow: inset 0 -1rem 0 #ffccb5; }
.visual1 .sc3 .row {align-items: center}
.visual2 .sc1 p {font-size: clamp(15px, 3vw, 24px); text-align: center; }
.visual2 .sc1 h1 {margin: 2rem 0}
.visual2 .sc1 .row {align-items: center; font-size: clamp(14px, 2.5vw, 24px);}
.visual2 .sc1 img {max-width: 60vw; margin: 1rem auto 1.5rem auto; display: block}
.visual2 .sc1 ul {margin: 1rem 0; font-weight: bold; font-size: clamp(14px, 2.5vw, 34px); color: var(--orange)}
.visual2 .sc1 li {padding-left: 2rem;position: relative; background: url(/img/ad/visual1_check.png) no-repeat 0 50% / 1.5rem}
.visual2 .sc1 li~li {margin-top: .5rem}
.visual2 .sc1 .highlight {display: inline; box-shadow: inset 0 -.75rem 0 #eff4e5; font-weight: bold}
.visual2 .sc2 {background-color: #7aa230; color: #fff; text-align: center}
.visual2 .sc2 p {font-size: clamp(20px, 4vw, 36px); font-weight: bold}
.visual2 .sc2 ul:not(.check) {display: flex; gap: 1.5rem;margin: 2rem auto}
.visual2 .sc2 ul:not(.check) li {background-color: #fff; border-radius: 1rem; flex-basis: 0;flex-grow: 1; overflow: hidden; position: relative;box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.1)}
.visual2 .sc2 ul:not(.check) li:hover {left: 2px; top: 2px;}
.visual2 .sc2 ul:not(.check) li .img {overflow: hidden;height: 50%}
.visual2 .sc2 ul:not(.check) li .img img {width: 100%}
.visual2 .sc2 ul:not(.check) li .txt {padding: 1.5rem; color: #111; font-size: .9rem;}
.visual2 .sc2 ul:not(.check) li .txt .no {font-size: clamp(18px, 6vw, 40px); color: var(--green); font-weight: bold; display: block}
.visual2 .sc2 ul.check {font-size: clamp(13px, 2vw, 24px); display: flex; flex-direction: column; align-items: center;}
.visual2 .sc2 ul.check li:before {content: "";width: 2rem;height: 1.2rem; display: inline-block;background: url(/img/ad/visual2_check2.png) no-repeat 0 0 / 1.5rem}
.visual2 .sc2 ul.check li~li {margin-top: 1.5rem}
.visual2 .sc2 ul.check li b {color: #fffa1a}
.visual2 .sc3 {background-color: #e5f1d0}
.visual2 .sc3 ul {display: flex;gap: 1.5rem;margin: clamp(15px, 7vw, 80px) auto 0}
.visual2 .sc3 li {flex-basis: 0;flex-grow: 1; border-radius: 1rem; background-color: #fff; padding: 2rem; display: flex; flex-direction: column; align-items: center; font-size: .9rem;  position: relative; text-align: center}
.visual2 .sc3 li .spot {font-weight: bold}
.visual2 .sc3 li img {margin-bottom: 1.5rem;}
.visual2 .sc3 li:hover {left: 2px; top: 2px;box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.1)}
.visual2 .sc3 li strong {font-size: 1.2rem;margin-bottom: 1rem}
.visual2 .sc4 {font-size:clamp(14px, 2.5vw, 24px);}
.visual2 .sc4 h1+p {text-align: center}
.visual2 .sc4 .copy {background: url(/img/ad/bg_v2_sc4.png) no-repeat 100% 90%;padding-bottom: clamp(30px, 10vw, 140px);margin-top: clamp(20px, 6vw, 80px)}
.visual2 .sc4 p:last-of-type {text-align: center}
.visual2 .sc4 p:last-of-type b {font-size: clamp(16px, 3vw, 28px)}
.visual2 .sc4 ul {margin-top: 3rem}
.visual2 .sc4 li {padding-left: 2rem;position: relative; background: url(/img/ad/visual2_check.png) no-repeat 0 2px / 1.5rem; font-weight: bold}
.visual2 .sc4 li .spot {font-weight: normal}
.visual2 .sc4 li~li {margin-top: .5rem}
.visual2 .sc4 .img {margin: 0 auto;margin-top: 3rem;text-align: center}
.visual2 .sc4 .img img {max-width: 60vw}
.visual2 .sc5 {background: #f3f3f3 url(/img/ad/bg_v2_sc5.png) no-repeat 50% 100% / cover;}
.visual2 .sc5 h1 {text-align: left; margin-bottom: 5rem}
.visual2 .sc5 h1 .highlight {display: inline;  box-shadow: inset 0 -1rem 0 #e1e1e1; }
.visual2 .sc5 h1 span {display: block}
.visual2 .sc5 .row {align-items: center}
.visual2 .sc6 .img {display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: center; text-align: center}
.visual2 .sc6 .img img:last-child {flex-grow: 1}
.visual2 .sc6 .arr img {display: block;margin: 0 auto 1rem}
.visual2 .sc7 {text-align: center; font-size: clamp(15px, 3vw, 28px);background-color: #e5f1d0; padding-bottom: 0}
.visual2 .sc7 .img {margin: 4rem auto}
.visual2 .sc7 .bottom {text-align: left;background-color: var(--green); color: #fff; padding: 3rem 0; font-weight: bold; font-size: clamp(14px, 3vw, 32px)}
.visual2 .sc7 .bullet li:before {background-color: #fff}
.visual3 .sc1 {background-color: var(--blue); color: #fff;font-size: 1.2rem; padding: 2.5rem 0}
.visual3 .sc1 ul {display: flex}
.visual3 .sc1 li {flex-grow: 1;flex-basis: 0; text-align: center}
.visual3 .sc1 span {font-size: clamp(20px, 6vw, 60px);font-weight: bold; display: block;}
.visual3 .sc1 b {font-weight: 900;}
.visual3 .sc3 {background-color: #e1e6f8;text-align: center;}
.visual3 .sc3 p {font-size: clamp(15px, 5vw, 36px); font-weight: bold}
.visual3 .sc3 ul {display: flex;gap: 1.5rem;margin: clamp(15px, 7vw, 80px) auto}
.visual3 .sc3 li {flex-basis: 0;flex-grow: 1;border-radius: 1rem; background-color: #f7f7f9; padding: 3rem 1rem; display: flex; flex-direction: column;  align-items: center; font-size: .9rem; position: relative;}
.visual3 .sc3 li b {font-size: 1.2rem; display: block;}
.visual3 .sc3 li:hover {left: 2px; top: 2px;box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.1)}
.visual3 .sc3 li img {margin: 1.5rem auto;}
.visual3 .sc2 {text-align: center;}
.visual3 .sc2 ul {display: flex;gap: 1.5rem;margin-bottom: 2rem}
.visual3 .sc2 li {flex-basis: 0;flex-grow: 1; border-radius: 1rem; background-color: #f7f7f9; padding: 2rem .5rem; display: flex; flex-direction: column; align-items: center; font-size: .9rem;  position: relative}
.visual3 .sc2 li img {margin-bottom: 1.5rem;}
.visual3 .sc2 li:hover {left: 2px; top: 2px;box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.1)}
.visual3 .sc2 li b {font-size: 1.2rem;margin-bottom: 1rem}
.visual3 .sc2 p {font-size: 1.2rem;margin-top: clamp(15px, 7vw, 80px)}
.counsel {background-color: #f2aa30; color: #fff}
.counsel ul {display: flex;margin: 0 auto 3rem; max-width: 1200px}
.counsel li {flex-grow: 1; flex-basis: 0; display: flex; align-items: center; text-align: left; font-size: 1.1rem;}
.counsel li b {display: block; font-size: clamp(1.2rem, 3vw, 1.5rem); font-weight: 800}
.counsel li span+span {padding-left: 1.5rem}
.foot {padding: 2.5rem 0;text-align: center; font-size: 1rem}
@media (max-width: 991px) {
    .counsel ul {display: inline-block}
    .counsel li+li {margin-top: 2rem}
    .counsel li img {max-width: 3rem}
}

@media (max-width: 991px) {
	#content.ad {padding-top: 4.5rem;overflow: visible;}
    .tabScroll .tab-visual-nav {position: sticky;}
    .tab-visual {padding: 0;height: auto;background-position: 32% 100%; background-size: cover}
    .tab-visual-nav {position: sticky;top: 0; width: auto;gap: 1px; background-color: #e5e5e5;box-shadow: none;border-top: 1px solid #e5e5e5;}
    .tab-visual-nav li {border-radius: 0;box-shadow: none;background-color: #fff}
    .tab-visual-nav li b {font-size: 1.25rem; line-height: 1.2;margin-top: 5px;}
    .tab-visual-nav li a {padding: 1rem 1.5rem}
    .tab-visual .copy {margin-top: 0;padding: 2rem 0}
    .tab-visual .copy b {font-size: clamp(12px, 4vw, 24px)}
    .tab-visual .copy strong {font-size: clamp(15px, 7vw, 32px)}
    .counsel ul {display: block; text-align: center}
    .counsel ul img {max-width: 1.5rem}
    .counsel li {text-align: left; display: inline-flex}
    .counsel li span {display: inline-flex; align-items: center; gap: .5rem}
    .counsel li b {display: inline-block;font-size: 1.1rem}
    .visual1 .sc1 li {flex-basis: calc(50% - 3rem)}
    .visual1 .sc1 li img {max-height: 3rem}
    .visual1 .sc2 {background-size: cover; background-position: 50% 0}
    .visual1 .sc2 p {margin-bottom: 30vw}
    .number-circle  {gap: 1rem; padding-top: 2rem}
    .number-circle li {padding-left: 2rem}
    .number-circle li::before {width: 1.5rem;height: 1.5rem; font-size: .8rem}
    .number-circle li br {display: none}
    .visual1 .sc3 h1 {text-align: center}
    .visual2 .sc1 {text-align: center}
    .visual2 .sc1 ul {text-align: center; display: flex; flex-direction: column;}
    .visual2 .sc1 li {margin: 0 auto}
    .visual2 .sc1 p:last-child {margin-top: 2rem}
    .visual2 .sc2 ul:not(.check) {flex-direction: column}
    .visual2 .sc2 ul:not(.check) li {flex-basis: auto}
    .visual2 .sc3 ul {flex-direction: column;gap: 1rem}
    .visual2 .sc3 li {display: block;  position: relative;text-align: left;padding-left: 9rem}
    .visual2 .sc3 li img {width: 5rem;position: absolute;left: 2.5rem;top: 50%;transform: translate(0, -50%);margin: 0}
    .visual2 .sc3 li strong {display: block;margin-top: .5rem}
    .visual2 .sc4 .copy {background-size: 12rem}
    .visual2 .sc5 h1 {margin-bottom: 2.5rem}
    .visual2 .sc6 .arr img {transform: rotate(90deg)}
    .visual3 .sc3 ul {flex-direction: column;gap: 1rem}
    .visual3 .sc3 li {display: block;  position: relative;text-align: left;padding-left: 9rem}
    .visual3 .sc3 li img {width: 5rem;position: absolute;left: 2.5rem;top: 50%;transform: translate(0, -50%);margin: 0}
    .visual3 .sc3 li span {display: block;margin-top: .5rem}
    .visual3 .sc2 ul {flex-wrap: wrap;gap: 1rem;}
    .visual3 .sc2 li {flex-basis: auto;max-width: calc(50% - .5rem)}
    .visual3 .sc2 li img {max-height: 3rem}
}