/* ========
page-mine
======== */
.page-mine .section-hero-v2 {
background-color: #96d4e6;
background-image: url(/future/flow/collection/mine/images/index_mv_bg.jpg);
background-repeat: no-repeat;
background-position: right bottom;
background-size: 1366px;
}
.page-mine .section-hero-v2__character-doctor {
position: absolute;
right: 0;
bottom: 0;
width: 390px;
}
.page-mine .section-hero-v2__titleGroup {
width: 100%;
margin: 102px 0 0;
text-align: center;
}
.page-mine .section-hero-v2__title {
margin-bottom: 20px;
color: #ffffff;
}
.page-mine .section-hero-v2__title .font-yellow {
color: #fee028;
}
.page-mine .section-hero-v2__title-en {
width: 100%;
max-width: 840px;
margin: 0 auto;
color: #fff;
opacity: .1;
}
.page-mine .section-01 {
padding-top: 164px;
}
.page-mine .section-01 .section-title {
margin-top: 60px;
margin-bottom: 80px;
font-size: 40px;
font-weight: 700;
line-height: 1;
color: #017976;
text-align: center;
}
.page-mine .section-01 .section-title .line {
display: inline-block;
}
.page-mine .section-01 .section-title .line::after {
display: block;
width: 100%;
height: 10px;
content: '';
background-color: #ccefee;
transform: translateY(-1px);
}
.page-mine .section-01 .section-title .dot {
font-family: cursive;
}
.page-mine .circle-title {
box-sizing: border-box;
width: 350px;
height: 350px;
padding-top: 54px;
margin: 0 auto 100px;
color: #fff;
text-align: center;
background-color: #02ada9;
border-radius: 50%;
}
.page-mine .circle-title__num {
display: block;
font-family: "Heebo", sans-serif;
font-size: 60px;
font-weight: 400;
line-height: 1;
}
.page-mine .circle-title__text {
display: block;
margin-top: 6px;
font-size: 30px;
font-weight: 700;
line-height: 1;
}
.page-mine .circle-title__icon {
display: block;
margin-top: 48px;
}
.page-mine .circle-title__icon img {
width: 97px;
}
.page-mine .block-item {
margin-bottom: 90px;
}
.page-mine .block-item__title {
margin-bottom: 60px;
font-size: 30px;
font-weight: 700;
line-height: 1.3;
color: #02ada9;
text-align: center;
}
.page-mine .block-item__title::after {
display: block;
width: 394px;
height: 4px;
margin: 14px auto 0;
content: '';
background-color: #02ada9;
}
.page-mine .block-item__image {
text-align: center;
}
.page-mine .block-item__text {
max-width: 600px;
margin: 60px auto 0;
}
.page-mine .block-item.-block-01 .block-item__image img {
width: 693px;
}
.page-mine .block-item.-block-02 .block-item__image img {
width: 780px;
}
.page-mine .block-item.-block-03 .block-item__image img {
width: 798px;
}
.page-mine .group-process {
position: relative;
margin-top: 60px;
}
.page-mine .group-process::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
display: block;
width: 10px;
height: 100%;
margin: auto;
content: '';
background-color: #7cd4d2;
}
.page-mine .group-process__branch {
width: 200px;
margin: 143px auto 60px;
transform: translateX(-200px);
}
.page-mine .group-process__branch::before,
.page-mine .group-process__branch::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
display: block;
width: 10px;
height: 100%;
margin: auto;
content: '';
background-color: #7cd4d2;
}
.page-mine .group-process__branch:before {
height: 295px;
transform: translate(0px, 60px) rotate(-135deg);
transform-origin: top left;
}
.page-mine .group-process .process-item {
position: relative;
z-index: 1;
box-sizing: border-box;
width: 200px;
height: 200px;
padding-top: 30px;
margin: 0 auto 40px auto;
color: #fff;
text-align: center;
cursor: pointer;
background-color: #02ada9;
border-radius: 50%;
}
.page-mine .group-process .process-item__title {
margin: 0 0 16px;
font-size: 26px;
font-style: italic;
font-weight: 700;
line-height: 1;
}
.page-mine .group-process .process-item__icon {
margin-bottom: 10px;
}
.page-mine .group-process .process-item__icon img {
width: 73px;
}
.page-mine .group-process .process-item.-small {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
padding-top: 0;
cursor: inherit;
}
.page-mine .group-process .process-item.-small .process-item__title {
margin: 0 0 5px;
font-size: 16px;
line-height: 1.25;
}
.page-mine .group-process .process-item.-small:hover {
background-color: #02ada9;
}
.page-mine .group-process .process-item.-big {
width: 600px;
height: 600px;
padding-top: 60px;
}
.page-mine .group-process .process-item.-big .process-item__title {
margin-bottom: 40px;
font-size: 40px;
}
.page-mine .group-process .process-item.-big .process-item__image {
margin: 78px 0 10px;
text-align: center;
}
.page-mine .group-process .process-item.-big .process-item__image img {
width: 315px;
}
.page-mine .group-process .process-item.-item-01 .process-item__icon img {
width: 73px;
}
.page-mine .group-process .process-item.-item-02 .process-item__icon img {
width: 65px;
}
.page-mine .group-process .process-item.-item-04 .process-item__icon img {
width: 67px;
}
.page-mine .group-process .process-item__link {
font-size: 16px;
font-weight: 700;
letter-spacing: 0;
}
.page-mine .group-process .process-item__link span::before {
display: inline-block;
margin-right: 8px;
content: '';
border-color: transparent transparent transparent #fee028;
border-style: solid;
border-width: 6px 0 6px 10px;
}
.page-mine .group-process .process-item:hover {
background-color: #04c5c1;
}
.page-mine .js-modal-box {
box-sizing: border-box;
width: 100%;
max-width: 720px;
margin: 0 auto;
}
.page-mine .modal-slider > .slick-list {
box-sizing: border-box;
padding: 5vh 0 0;
}
.page-mine .modal-slider > .slick-list .slick-track,
.page-mine .modal-slider > .slick-list .slick-track > .slick-slide,
.page-mine .modal-slider > .slick-list > .slick-slide > div {
height: 100%;
}
.page-mine .modal-slider > .slick-arrow {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
width: 124px;
height: 86px;
margin: auto 0;
font-size: 0;
cursor: pointer;
background: url(/future/common/images/com_arrow_slider.png) no-repeat;
background-position: center;
background-size: 45px;
transition-duration: .3s;
}
.page-mine .modal-slider > .slick-arrow.slick-prev {
left: -100px;
transform: rotate(180deg);
}
.page-mine .modal-slider > .slick-arrow.slick-prev:hover {
transform: translateX(-5px) rotate(180deg);
}
.page-mine .modal-slider > .slick-arrow.slick-next {
right: -100px;
}
.page-mine .modal-slider > .slick-arrow.slick-next:hover {
transform: translateX(5px);
}
.page-mine .modal-slider > .slick-dots {
position: absolute;
top: 18px;
right: 0;
left: 0;
display: flex;
justify-content: center;
}
.page-mine .modal-slider > .slick-dots li {
width: 44px;
margin: 0 3px;
}
.page-mine .modal-slider > .slick-dots button {
display: block;
width: 100%;
height: 4px;
font-size: 0;
cursor: pointer;
background-color: #fff;
}
.page-mine .modal-slider > .slick-dots .slick-active button {
background-color: #02ada9;
}
.page-mine .modal-slider__item {
margin-bottom: 30px;
}
@media screen and (min-width: 1px) and (max-width: 768px) {
.page-mine .section-hero-v2 {
background-image: url(/future/flow/collection/mine/images/index_mv_bg_sp.jpg);
background-size: 375px;
}
.page-mine .section-hero-v2__character-doctor {
z-index: 1;
width: 273px;
}
.page-mine .section-hero-v2__title-en {
opacity: .3;
}
.page-mine .section-01 .l-inner {
padding: 0;
}
.page-mine .section-01 .section-title {
margin-bottom: 60px;
}
.page-mine .circle-title {
margin-bottom: 90px;
}
.page-mine .block-item {
padding-right: 20px;
padding-left: 20px;
}
.page-mine .block-item__title::after {
width: 100%;
max-width: 334px;
}
.page-mine .block-item.-block-03 {
margin-bottom: 60px;
}
.page-mine .block-item.-block-03 .block-item__image {
width: 100vw;
margin-left: -20px;
}
.page-mine .group-process {
max-width: 335px;
margin: 60px auto 0;
}
.page-mine .group-process::before {
left: 130px;
height: 90%;
}
.page-mine .group-process__branch {
transform: translateX(-78px);
}
.page-mine .group-process__branch:before {
transform: translate(0px, 60px) rotate(-146deg);
}
.page-mine .group-process .process-item {
margin: 0 0 40px auto;
}
.page-mine .group-process .process-item.-small {
margin: 40px auto 40px;
}
.page-mine .group-process .process-item.-big {
width: 336px;
height: 336px;
padding-top: 30px;
}
.page-mine .group-process .process-item.-big .process-item__title {
margin-bottom: 10px;
}
.page-mine .group-process .process-item.-big .process-item__image {
margin: 23px 0 10px;
}
.page-mine .group-process .process-item.-big .process-item__image img {
width: 226px;
}
.page-mine .modal-slider > .slick-list {
padding: 5vh 0 0;
}
.page-mine .modal-slider > .slick-arrow {
width: 33px;
height: 62px;
background-size: cover;
}
.page-mine .modal-slider > .slick-arrow.slick-prev {
left: 0;
}
.page-mine .modal-slider > .slick-arrow.slick-next {
right: 0;
}
.page-mine .modal-slider > .slick-dots {
top: auto;
bottom: 10px;
}
}
@media screen and (min-width: 1px) and (max-width: 374px) {
.page-mine .group-process::before {
left: 90px;
}
.page-mine .group-process__branch {
transform: translateX(-58px);
}
.page-mine .group-process__branch:before {
transform: translate(0px, 60px) rotate(-153deg);
}
}