@charset "UTF-8";

/* common
-----------------------------------------------------------*/
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

article {
    min-width: 1020px;
    margin: 0 auto;
    background: #00A0E9;
}

article * {
    box-sizing: border-box;
}

/* mv
-----------------------------------------------------------*/
.mv {
    text-align: center;
}

/* contents
-----------------------------------------------------------*/
.contents {
    max-width: 1520px;
    padding-top: 40px;
    margin: 0 auto;
    background: #FFFFFF;
}

.contents h2 {
    color: #00A0E9;
    font-size: 42px;
    font-weight: bold;
    line-height: calc(54/42);
}

.contents h2 span {
    display: block;
    color: #FFF100;
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
}

.contents section .inner > h3,
.contents .item_categoryList h3{
    color: #00A0E9;
    font-size: 24px;
    font-weight: bold;
    line-height: calc(36/24);
}

.contents .inner {
    width: 1000px;
    margin: 0 auto;
}

.contents .cmnBtn {
    color: #00A0E9;
    font-size: 16px;
    font-weight: bold;
    width: 320px;
    height: 50px;
    border: 1px solid #00A0E9;
    border-radius: 25px;
}

.contents .cmnBtn.-arrow span {
    position: relative;
    width: 24px;
    height: 24px;
    margin-left: 10px;
    border: 1px solid #00A0E9;
    border-radius: 100%;
}

.contents .cmnBtn.-arrow span:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block; 
    width: 5px;
    height: 5px;
    border-left: 1px solid #00A0E9;
    border-bottom: 1px solid #00A0E9;
    transform: rotate(-45deg) translateY(-75%);
}

.contents .cmnBtn.-accordion {
    font-size: 14px;
    width: 154px;
    height: 30px;
    background-color: #FFFFFF;
}

.contents .cmnBtn.-accordion span {
    position: relative;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    border: 1px solid #00A0E9;
    border-radius: 100%;
}

.contents .cmnBtn.-accordion span:before,
.contents .cmnBtn.-accordion span:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block; 
    width: 8px;
    height: 1px;
    background: #00A0E9;
    transform: translate(-50%, -50%);
}

.contents .cmnBtn.-accordion span:after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.contents .lead_text {
    font-size: 16px;
    line-height: calc(24/16);
    margin-top: 40px;
}

.contents .note_text {
    font-size: 14px;
    line-height: calc(21/14);
    text-indent: -1.25em;
    padding-left: 1.25em;
}

.contents .note_text::before {
    content: "※ ";
}

.contents .note_text a {
    color: #00A0E9;
    font-weight: bold;
}

.contents .note_text a:hover {
    text-decoration: none;
}

/* news
-----------------------------------------------------------*/
.news li {
    position: relative;
    border: 1px solid #00A0E9;
    border-radius: 8px;
}

.news li + li {
    margin-top: 10px;
}

.news li:before,
.news li:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    display: block; 
}

.news li:before {
    width: 24px;
    height: 24px;
    margin-right: 20px;
    border: 1px solid #00A0E9;
    border-radius: 100%;
    transform: translateY(-50%);
}

.news li:after {
    width: 5px;
    height: 5px;
    margin-right: 26px;
    border-left: 1px solid #00A0E9;
    border-bottom: 1px solid #00A0E9;
    transform: rotate(-45deg) translateY(-75%);
}

.news li a {
    display: block;
    color: #333333;
    font-size: 16px;
    line-height: calc(24/16);
    text-decoration: none;
    padding: 15px 20px;
}

.news li.new a:after {
    content: "NEW!";
    color: #00A0E9;
    font-weight: bold;
    padding: 0 5px;
    background-color: #FFF100;
}

.news li a:hover {
    text-decoration: underline;
}

/* anchor
-----------------------------------------------------------*/
.anchor {
    margin-top: 80px;
}

.anchor ul {
    display: flex;
    border: 1px solid #00A0E9;
    border-radius: 8px;
}

.anchor ul li {
    width: 25%;
}

.anchor ul li + li {
    border-left: 1px solid #00A0E9;
}

.anchor ul li a {
    position: relative;
    display: block;
    color: #00A0E9;
    font-size: 16px;
    line-height: calc(24/16);
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    padding: 20px 0 54px;
}

.anchor ul li a span {
    display: block;
    color: #CCCCCC;
    font-size: 12px;
    font-weight: bold;
}

.anchor ul li a:before,
.anchor ul li a:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    margin-top: 25px;
}

.anchor ul li a:before {
    width: 24px;
    height: 24px;
    border: 1px solid #00A0E9;
    border-radius: 100%;
    transform: translate(-50%, -50%);
}

.anchor ul li a:after {
    width: 5px;
    height: 5px;
    border-left: 1px solid #00A0E9;
    border-bottom: 1px solid #00A0E9;
    transform: rotate(-45deg) translateY(-75%);
}

/* about
-----------------------------------------------------------*/
.about {
    margin-top: 120px;
}

.about_text {
    position: relative;
}

.about_text img {
    position: absolute;
    top: 0;
    left: 0;
}

.about_text:nth-of-type(1) {
    min-height: 290px;
    padding-top: 540px;
    margin-top: 40px;
}

.about_text:nth-of-type(1) img:nth-of-type(2) {
    margin: 520px 0 0 510px;
}

.about_text:nth-of-type(2) {
    min-height: 390px;
    padding-left: 550px;
    margin-top: 60px;
}

.about_text h3 {
    color: #333333;
    font-size: 24px;
    font-weight: bold;
    line-height: calc(36/24);
}

.about_text p {
    color: #333333;
    font-size: 16px;
    line-height: calc(24/16);
    margin-top: 20px;
}

.about .cmnBtn {
    margin-top: 60px;
}

.about .cmnBtn + h3 {
    margin-top: 80px;
}

.about_featureList {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

.about_featureList li {
    position: relative;
    width: 320px;
    padding: 30px 30px 223px;
    background-color: #F4FBFF;
    border-radius: 8px;
}

.about_featureList li h4 {
    color: #00A0E9;
    font-size: 18px;
    font-weight: bold;
    line-height: calc(30/18);
    white-space: nowrap;
}

.about_featureList li p {
    font-size: 16px;
    line-height: calc(24/16);
    margin-top: 20px;
}

.about_featureList li img {
    position: absolute;
    left: 30px;
    bottom: 30px;
}

/* service
-----------------------------------------------------------*/
.service {
    padding: 80px 0;
    margin-top: 120px;
    background-color: #F4FBFF;
}

.service .lead_text + h3 {
    margin-top: 80px;
}

.service .note_text + h3 {
    margin-top: 60px;
}

.service h3 + .service_icon {
    margin-top: 40px;
}

.service_icon {
    font-size: 12px;
}

.service_icon span {
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    padding: 4.5px 5px;
    border-radius: 10px;
}

.service_icon span:nth-of-type(n + 2) {
    margin-left: 10px;
}

.service_icon span:not(.-gray) {
    color: #FFFFFF;
    background-color: #00A0E9;
}

.service_icon span.-gray {
    color: #5F5F5F;
    background-color: #DDDDDD;
}

.service_list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.service_list li {
    width: 320px;
    padding: 20px 20px 20px 110px;
    background-color: #FFFFFF;
    background-position: top 20px left 20px;
    background-repeat: no-repeat;
    background-size: 80px auto;
    border: 1px solid #DDDDDD;
    border-radius: 8px;
}

.service_list li h4 {
    font-size: 16px;
    font-weight: bold;
    line-height: calc(24/16);
}

.service_list li p:not(.note_text):not(.service_icon) {
    font-size: 14px;
    line-height: calc(21/14);
    margin-top: 10px;
}

.service_list li .note_text {
    font-size: 12px;
    line-height: calc(21/12);
}

.service_list + .note_text {
    margin-top: 20px;
}

.service_list .service_icon + .note_text {
    margin-top: 5px;
}

.service_list .service_icon {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.service_list .service_icon span {
    text-align: center;
    width: calc((100% - 10px)/3);
    margin: 0;
}

.service_list.-free li:nth-of-type(1) {
    background-image: url(/v2/cmn/img/campaign/geo-digitalbase-portal/service_icon01.svg);
}

.service_list.-free li:nth-of-type(2) {
    background-image: url(/v2/cmn/img/campaign/geo-digitalbase-portal/service_icon02.svg);
}

.service_list.-free li:nth-of-type(3) {
    background-image: url(/v2/cmn/img/campaign/geo-digitalbase-portal/service_icon03.svg);
}

.service_list.-free li:nth-of-type(4) {
    background-image: url(/v2/cmn/img/campaign/geo-digitalbase-portal/service_icon04.svg);
}

.service_list.-free li:nth-of-type(5) {
    background-image: url(/v2/cmn/img/campaign/geo-digitalbase-portal/service_icon05.svg);
}

.service_list.-digital li:nth-of-type(1) {
    background-image: url(/v2/cmn/img/campaign/geo-digitalbase-portal/service_icon06.svg);
}

.service_list.-digital li:nth-of-type(2) {
    background-image: url(/v2/cmn/img/campaign/geo-digitalbase-portal/service_icon07.svg);
}

.service_list.-digital li:nth-of-type(3) {
    background-image: url(/v2/cmn/img/campaign/geo-digitalbase-portal/service_icon08.svg);
}

.service_list.-digital li:nth-of-type(4) {
    background-image: url(/v2/cmn/img/campaign/geo-digitalbase-portal/service_icon09.svg);
}

.service_list.-digital li:nth-of-type(5) {
    background-image: url(/v2/cmn/img/campaign/geo-digitalbase-portal/service_icon10.svg);
}

.service_list.-digital li:nth-of-type(6) {
    background-image: url(/v2/cmn/img/campaign/geo-digitalbase-portal/service_icon11.svg);
}

.service_list.-digital li:nth-of-type(7) {
    background-image: url(/v2/cmn/img/campaign/geo-digitalbase-portal/service_icon12.svg);
}

.service_list.-digital li:nth-of-type(8) {
    background-image: url(/v2/cmn/img/campaign/geo-digitalbase-portal/service_icon13.svg);
}

/* item
-----------------------------------------------------------*/
.item {
    margin-top: 120px;
}

.item .lead_text + .note_text {
    margin-top: 10px;
}

.item_categoryList {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 80px 20px;
    margin-top: 80px;
}

.item_categoryList > li {
    width: 490px;
}

.item_categoryList > li:nth-of-type(3) .note_text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.item_categoryList > li.js-accordion {
    position: relative;
    border-bottom: 1px solid #00A0E9;
}

.item_categoryList > li.js-accordion::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 235px;
    background: linear-gradient(180deg, #FFFFFF00 0%, #FFFFFF 100%);
    transition: 0.3s ease-out;
}

.item_categoryList > li img {
    margin-top: 20px;
}

.item_list {
    display: flex;
    gap: 20px;
    overflow: hidden;
    transition: 0.3s ease-out;
}

.item_categoryList > li.js-accordion:not(.-open) .item_list {
    height: 235px !important;
}

.item_categoryList > li.js-accordion .item_list > li {
    padding-bottom: 35px;
}

.item_list > li {
    font-size: 16px;
    width: 235px;
    margin-top: 40px;
}

.item_list > li h4 {
    font-weight: bold;
    line-height: calc(24/16);
}

.item_list > li h4 + h4 {
    margin-top: 20px;
}

.item_list > li ul + h4 {
    margin-top: 40px;
}

.item_list > li ul li {
    line-height: calc(20/16);
    margin-top: 10px;
}

.item_list > li h4 small,
.item_list > li ul li small {
    color: #ED0000;
    font-size: 14px;
    line-height: calc(20/14);
}

.item_categoryList > li .cmnBtn.-accordion {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(50%);
    opacity: 1 !important;
    z-index: 1;
}

.item_categoryList > li.js-accordion.-open::after {
    height: 0;
}

.item_categoryList > li.js-accordion.-open .item_list {
    height: auto;
}

.item_categoryList > li.js-accordion.-open .item_list {
    height: auto;
}

.item_categoryList > li.js-accordion.-open .cmnBtn.-accordion span:after {
    display: none;
}

/* shop
-----------------------------------------------------------*/
.shop {
    padding: 80px 0;
    margin-top: 135px;
    background-color: #F4FBFF;
}

.shop_list {
    margin-top: 60px;
}

.shop_list li {
    position: relative;
}

.shop_list li + li {
    margin-top: 60px;
}

.shop_list li h3 {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: bold;
    padding: 20px; 30px;
    background-color: #00A0E9;
    border-radius: 8px 8px 0 0;
}

.shop_open {
    position: absolute;
    top: 0;
    right: 20px;
    color: #00A0E9;
    font-size: 20px;
    font-weight: bold;
    line-height: calc(24/20);
    padding: 5px 10px 2.5px;
    background-color: #FFF100;
    transform: translateY(-50%);
}

.shop_open::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: -19px;
    display: block;
    border-top: 20px solid #FFF100;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.shop_info {
    display: flex;
    gap: 20px;
    padding: 30px;
    background-color: #FFFFFF;
    border-radius: 0 0 8px 8px;
}

.shop_text {
    font-size: 16px;
    line-height: calc(24/16);
    width: 300px;
}

.shop_text dl {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
}

.shop_text img + dl {
    margin-top: 20px;
}

.shop_text dl dt {
    width: 66px;
}

.shop_text dl dd {
    width: 224px;
}

.shop_map {
    width: 620px;
    height: 480px;
}

.shop_map iframe {
    width: 100%;
    height: 100%;
}

/* sns
-----------------------------------------------------------*/
.sns {
    margin-top: 80px;
    padding-bottom: 120px;
}

.sns h2 {
    font-size: 24px;
    text-align: center;
}

.sns_list {
    display: flex;
    gap: 20px;
    width: fit-content;
    margin: 40px auto 0;
}

.sns_list li {
    width: 62px;
}