@charset "UTF-8";

/* ------------------------------------------------------
common
------------------------------------------------------ */

.h-100 {
    height: 100%;
}
.bg-lightblue {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  min-width: 1440px;
  height: 141vw;
  background-color: #DEECFE;
  z-index: -1;
  overflow: hidden;
}
.bg-lightblue::after {
  content: "";
  position: absolute;
  left: -17.5vw;
  top: 636px;
  display: block;
  width: 907px;
  height: 907px;
  background: radial-gradient(rgba(48,140,248, 1), rgba(48,140,248, 0) 65%);
  opacity: 0.3;
}
@media screen and (max-width:640px) {
    section {
        overflow: hidden;
    }
    .bg-lightblue {
        height: 100%;
        min-width: auto;
    }
    
}
@media print, screen and (min-width:641px) {
}



/* .discovery （暮らしへの貢献）
====================================================== */
#daily_life .mv-wrap {
  position: relative;
}
#daily_life .heading02 {
    color: var(--color_main_02);
    font-weight: bold;
}
#visuals {
    position: relative;
}
.visuals__image img {
    border-radius: 20px;
    max-width: none;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 1380 / 776;
    object-fit: cover;
    object-position: center;
}
.visuals__list {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}
.visuals__list--item {
    position: absolute;
}
.visuals__list-trigger-item {
    position: relative;
    cursor: pointer;
}
.visuals__list-trigger-item,
.visuals__list-trigger-item:hover{
    color: var(--color_white);
    text-decoration: none;
    display: block;
}
.visuals__list-trigger-item:before,
.visuals__list-trigger-item:after {
    content: "";
    background-color: rgba(255,255,255,0.5);
    -webkit-border-radius: 5em;
    border-radius: 5em;
    position: absolute;
    display: block;
    z-index: 1;
    -webkit-transform: scale( 0.0 );
    transform: scale( 0.0 );
    -webkit-animation: visuals__hover ease 1.5s forwards infinite;
    animation: visuals__hover ease 1.5s forwards infinite;
}
@-webkit-keyframes visuals__hover {
    0% {background-color: rgba(255,255,255,1.0);-webkit-transform: scale( 0.0 );transform: scale( 0.0 );}
    100% {background-color: rgba(255,255,255,0);-webkit-transform: scale( 1.5 );transform: scale( 1.5 );}
}
@keyframes visuals__hover {
    0% {background-color: rgba(255,255,255,1.0);-webkit-transform: scale( 0.0 );transform: scale( 0.0 );}
    100% {background-color: rgba(255,255,255,0);-webkit-transform: scale( 1.5 );transform: scale( 1.5 );}
}
.visuals__list-trigger-pin-item {
    background: url("/files/user/gt/images/discovery/pin.svg") no-repeat center top;
    background-size: contain;
    aspect-ratio: 163.533 / 182.123;
    position: absolute;
    z-index: 10;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    transform-origin: center;
    display: flex;
    display:-webkit-flex;
    align-items:flex-start;
    flex-wrap: nowrap;
    justify-content: center;
    flex-direction: row;
}
.visuals__list-trigger-pin-item img {
    aspect-ratio: 1 / 1;
    width: 78%;
    margin: 8% 11% 0;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}
.visuals__list-text-item {
    font-size: 3.73vmin; /* 14px */
    min-width: 4.5em;
    line-height: 1em;
    position: relative;
    z-index: 10;
    font-weight: 700;
    -webkit-border-radius: 5em;
    border-radius: 5em;
    display: block;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background-color: var(--color_main_02);
    text-align: center;
}
body.modal-active {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
.modal-active {
    overflow: hidden;
}
.modal-active #visualsmodal:after {
    opacity: 0.9;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
.modal-active .visualsmodal__window {
    -webkit-transition: .5s;
    transition: .5s;
    -webkit-transform: translateY(-2%);
    transform: translateY(-2%);
}
.modal-active .visualsmodal__window.active {
    display: flex;
}
.modal-active .visualsmodal__window.is-active {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
#visualsmodal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20001;
    display: none;
  justify-content: center;
  align-items: center;
}
#visualsmodal:after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-color: var(--color_grey);
    opacity: 0;
    -webkit-transition: .5s;
    transition: .5s;
    -webkit-transition-delay: 1.0s;
    transition-delay: 1.0s;
}
.visualsmodal__window {
    border: 5px solid var(--color_main_02);
    background-color: var(--color_white);
    z-index: 20001;
    width: 100%;
    margin: 4vmin auto;
    max-width: calc( 1440px - 4vmin*2);
    max-width: -webkit-calc( 1440px - 4vmin*2);
    position: relative;
    opacity: 0;
    display: none;
  flex-flow: column;
}
.visualsmodal__close {
    position: absolute;
    aspect-ratio: 1 / 1;
    background-color: var(--color_main);
    display: block;
    cursor: pointer;
    z-index: 10;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    -webkit-transform: translateX(-32%) translateY(-32%);
    transform: translateX(-32%) translateY(-32%);
    background-image: url("/files/user/gt/images/common/icon-close.svg");
    background-size: 38% auto;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-box-shadow: 0 3px 6px rgba(16,25,135,0.5);
    box-shadow: 0 3px 6px rgba(16,25,135,0.5);
}
.visualsmodal__header {
    background-color: var(--color_main_02);
    text-align: center;
    position: relative;
    color: var(--color_white);
    display:-webkit-flex;
    display: flex;
    align-items:center;
    flex-wrap: nowrap;
    justify-content: center;
    flex-direction: column;
    font-weight: 700;
  flex-shrink: 0;
}
.visualsmodal_name_header,
.visualsmodal_texts_header {
    position: relative;
    z-index: 100;
    line-height: 1.0;
}
.visualsmodal_name_header {
    font-size: 9vmin; /* 32px */
}
.visualsmodal_text_header {
    font-size: 5.3vmin; /* 20px */
}
.visualsmodal__content {
    /*
    scrollbar-width: .5rem;
    scrollbar-color: #E1E2EF;*/
    overflow-x: hidden;
    overflow-y: scroll;
  width: auto;
  min-height: 0;  
}
.visualsmodal__content::-webkit-scrollbar {
    width: .5rem;
}
.visualsmodal__content::-webkit-scrollbar-track {
    background-color: #E1E2EF;
}
.visualsmodal__content::-webkit-scrollbar-thumb {
    background-color: var(--color_main_02);
    border-radius: 20px;
}
.visualsmodal__inner {
    background-color: #EFF0F9;
}
.visualsmodal__inner .heading03 {
    color: var(--color_black);
}
.visualsmodal_sub_inner {
    position: relative;
    overflow: hidden;
}
.visualsmodal_sub_inner--range {
    font-size: 4.58vmin; /* 17px */
    position: absolute;
    top: 0;
    right: 0;
    font-weight: 500;
    display: flex;
    display:-webkit-flex;
    align-items:center;
    flex-wrap: nowrap;
}
.visualsmodal_sub_inner-domestic-range {
    background-color: #DEECFE;
    color: var(--color_black);
}
.visualsmodal_sub_inner-abroad-range {
    background-color: var(--color_main_02);
    color: var(--color_white);
}
.visualsmodal_white_inner {
    background-color: var(--color_white);    
}
.visualsmodal_sub_inner--heading {
    font-size: 6.0vmin; /* 22px */
    font-weight: 500;
    color: var(--color_black);
    position: relative;
}
.visualsmodal_sub_inner--heading:before {
    font-size: 4.58vmin; /* 17px */
    top: 0;
    height: 1.556em;
    width: .3333em;
    background-size: contain;
    background-position: left center;
}
.visualsmodal__inner--imagelist {
    display:-webkit-flex;
    display: flex;
    align-items:center;
    flex-wrap: nowrap;
    justify-content: center;
    flex-direction: row;
}
.visualsmodal__inner--imagelist img {
    width: 100%;
    margin: auto;
    display: block;
}
.tags {
    display: flex;
    display:-webkit-flex;
    flex-wrap: wrap;
}
.tags__item {
    font-size: 3.73vmin; /* 14px */
    background-color: var(--color_main_02);
    border-radius: 4px;
    color: var(--color_white);
    letter-spacing: .02em;
}

@media screen and (max-width:640px) {
    #daily_life {
        padding: 0 0 27.0vmin;
    }
    #daily_life .heading02 {
        padding-top: 16.0vmin;
        margin-bottom: 5vmin;
    }
    #visuals {
        margin-top: 15.0vmin;
    }
    .visuals__image img {
        aspect-ratio: 345 / 690;
    }
    .visuals__list-trigger-item:before {
        display: none;
    }
    .visuals__list-trigger-item:after {
        top: -1em;
        bottom: -1em;
        left: -1em;
        right: -1em;
    }
    .visuals__list-trigger-item:hover:after {
        background-color: rgba(255,255,255,0.7);
        -webkit-transform: scale( .95 );
        transform: scale( .95 );
    }
    .visuals__list-text-item {
        padding: .4em .25em;
    }
    .visuals__list-bank-item {
        left: 64.5%;
        top: 20.0%;
    }
    .visuals__list-station-item {
        left: 16%;
        top: 31.8%;
    }
    .visuals__list-restaurant-item {
        left: 68.25%;
        top: 46.0%;
    }
    .visuals__list-mall-item {
        left: 6.95%;
        top: 59.4%;
    }
    .visuals__list-mall-item .visuals__list-text-item {
        padding-left: 1.25em;
        padding-right: 1.25em;        
    }
    .visuals__list-accommodation-item {
        left: 64.7%;
        top: 80.0%;
    }
    .visuals__list-accommodation-item .visuals__list-text-item {
        padding-left: 1.25em;
        padding-right: 1.25em;        
    }
    .visuals__list-hospital-item {
        left: 9.85%;
        top: 89.0%;
    }
    .visuals__list-trigger-pin-item {
        width: clamp( calc(10px * 9 ), calc(4.0vw * 9), calc(1.4rem * 9));
        width: clamp( -webkit-calc(10px * 9 ), -webkit-calc(4.0vw * 9), -webkit-calc(1.4rem * 9));
        -webkit-transform: translateX(-50%) translateY(-100%);
        transform: translateX(-50%) translateY(-100%);
        left:50%;
        margin-top: clamp( calc(1.4rem * -1.5), calc(4.0vw * -1.5), calc(10px * -1.5 ));
        margin-top: clamp( -webkit-calc(1.4rem * -1.5), -webkit-calc(4.0vw * -1.5), -webkit-calc(10px * -1.5 ));
    }
    .visualsmodal__window,
    .visualsmodal__inner,
    .visualsmodal_sub_inner {
        border-radius: 20px;
    }
    .visualsmodal__window {
        max-width: calc( 100vw - 4vmin*2);
        max-width: -webkit-calc( 100vw - 4vmin*2);
      height: 90dvh; /* モダンブラウザなら動く */
      height: -webkit-fill-available; /* Safari対応 */
      height: calc(var(--vh, 1vh) * 90); /* JSで計算する方式にも対応 */
      max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 4vmin);
    }
    .visualsmodal__close {
        right: -9vmin;
       /* top: 0.5vmin;*/
      top: calc(env(safe-area-inset-top) + 0.5vmin);   /* notchやSafariのバー対策 */
      /*right: calc(env(safe-area-inset-right) + 10px);*/
        width: 16vmin;
        height: 16vmin;
    }
    .visualsmodal__header {
        height: calc( 9vmin * 2.8 );
        height: -webkit-calc( 9vmin * 2.8 );
    }
    .visualsmodal__header--imagelist {
        display: none;
    }
    .visualsmodal_name_header {
        padding-top: 5px;
    }
    #modal-mall .visualsmodal_name_header {
        font-size: 6vmin;
    }
    .visualsmodal__content {
        margin: 6vmin 3vmin 0;
        padding-right: 4vmin;
        padding-top: 2.5vmin;
      max-height: 100%;
      flex: 1 1 auto;
    }
    .visualsmodal__inner {
      margin-bottom: 6vmin;
        padding: 9vmin 5vmin;
    }
    .visualsmodal__inner .heading03 {
        line-height: 1.45;
    }
    .visualsmodal_sub_inner {
        margin: 0;
        padding: 18vmin 5vmin 7vmin;
    }
    .visualsmodal_sub_inner--range {
        left: 0;
        right: 0;
        height: 12.0vmin;
        padding: 0 5vmin;
        justify-content: flex-start;
    }
    .visualsmodal_sub_inner--range img {
        width: 8.25vmin;
        margin-left: 0;
        margin-right: 3.25vmin;
    }
    .visualsmodal_sub_inner + .visualsmodal_sub_inner {
        margin-top: 7vmin;
    }
    .visualsmodal_sub_inner--heading {
        line-height: 1.4;
        padding-left: 1em;
        margin-bottom: 5vmin;
    }
    .visualsmodal_sub_inner--heading:before {
        height: 1.8em;
    }
    .visualsmodal__inner--imagelist {    }
    .visualsmodal__inner-figure-imagelist {
        margin-bottom: 8vmin;
    }
    .tags {
        margin-left: -1.25vmin;
        padding-top: 6.7vmin;
        margin-right: -1.2vmin;
    }
    .tags__item {
        padding: 0 1.6em;
        line-height: 1.8;
        margin: 1.2vmin;
    }
}
@media print, screen and (min-width:641px) {
    #daily_life {
        padding: 30px 0 98px;
    }
    #daily_life .heading02 {
        margin-top: 6.0rem;
        margin-bottom: 3.0rem;
    }
    #visuals {
        margin-top: 5.8rem;
    }
    .visuals__list-trigger-item {}
    .visuals__list-trigger-item:before {
        top: -2.6rem;
        bottom: -2.6rem;
        left: -2.6rem;
        right: -2.6rem;
    }
    .visuals__list-trigger-item:after {
        top: -1.3rem;
        bottom: -1.3rem;
        left: -1.3rem;
        right: -1.3rem;
    }
    .visuals__list-trigger-item:hover:after {
        -webkit-transition-delay: .25s;
        transition-delay: .25s;
    }    
    .visuals__list-text-item {
        font-size: 1.4rem;
        padding: .5em 1.25em;
    }
    .visuals__list-bank-item {
        left: 8.8%;
        top: 59.25%;
    }
    .visuals__list-station-item {
        left: 33%;
        top: 28.25%;
    }
    .visuals__list-restaurant-item {
        left: 28.25%;
        top: 74.45%;
    }
    .visuals__list-mall-item {
        left: 54.25%;
        top: 31.45%;
    }
    .visuals__list-accommodation-item {
        left: 84.8%;
        top: 30.00%;
    }
    .visuals__list-hospital-item {
        left: 75.5%;
        top: 63%;
    }
    .visuals__list-trigger-pin-item {
        width: 16.5rem;
        -webkit-transform: translateX(-50%) translateY(-100%) scale(0);
        transform: translateX(-50%) translateY(-100%) scale(0);
        left:50%;
        margin-top: calc( 1.4rem * -1.5 );
        margin-top: -webkit-calc( 1.4rem * -1.5  );
    }
    .visuals__list-trigger-item:hover .visuals__list-trigger-pin-item {
        -webkit-transform: translateX(-50%) translateY(-100%) scale(1);
        transform: translateX(-50%) translateY(-100%) scale(1);
    }
    .visualsmodal__window,
    .visualsmodal__inner,
    .visualsmodal_sub_inner {
        border-radius: 20px;
    }
    .visualsmodal_sub_inner--range {
        font-size: 1.7rem;
        border-radius: 0px 0px 0px 20px;
        width: 8.8rem;
        aspect-ratio: 88 / 101;
        text-align: center;
        justify-content: center;
        flex-direction: column;
    }
    .visualsmodal_sub_inner--range img {
        margin-top: .25rem;
        margin-bottom: .5rem;
    }
    .visualsmodal__window {
        margin: calc(var(--vh, 1vh) * 4.86) auto;
        max-width: calc( 1440px - 3.62%*2);
        max-width: -webkit-calc( 1440px - 3.62%*2);
      max-height: calc(100dvh - 4.86% * 2); /* モダンブラウザなら動く */
      max-height: -webkit-fill-available; /* Safari対応 */
      max-height: calc(var(--vh, 1vh) * 100 - var(--vh, 1vh) * 4.86 * 2); /* JSで計算する方式にも対応 */
    }
    .visualsmodal__close {
        right: 0;
        top: 0;
        width: 8rem;
        height: 8rem;
    }
    .visualsmodal__header {
        height: calc( 4.0rem * 3.3 );
        height: -webkit-calc( 4.0rem * 3.3 );
    }
    .visualsmodal__header--imagelist {
        position: absolute;
        width: 100%;
        display: flex;
        display:-webkit-flex;
        align-items:center;
        flex-wrap: nowrap;
        justify-content: space-between;
        flex-direction: row;
        z-index: 9;
        padding: 0 calc( 8.5rem + 4.0rem *2) 0 calc( 8.5rem + 5.0rem *2);
        padding: 0 -webkit-calc( 8.5rem + 4.0rem *2) 0 -webkit-calc( 8.5rem + 5.0rem *2);
        -webkit-user-select: none;
        user-select: none;
    }
    .visualsmodal__header-item-imagelist {
        max-width: 22rem;
      max-height: 22rem;
        /*aspect-ratio: 1 / 1;*/
        display:-webkit-flex;
        display: flex;
        align-items:center;
        justify-content: center;
    }
    .visualsmodal__header-item-imagelist> img {
        object-fit: contain;
      width: 100%;
      height: 100%;
      max-width: none;
    }
    .visualsmodal_name_header {
        font-size: 4.0rem;
        padding-bottom: 0;
        margin-top: -.05em;
    }
    .visualsmodal_text_header {
        font-size: 2.2rem;
    }
    .visualsmodal__content {
        margin: 6rem 3.6rem 0 4rem;
        padding-right: 3.0rem;
      max-height: 100%;
      flex: 1 1 auto;
    }

    .visualsmodal__inner {
      margin-bottom: 6rem;
        padding-top: 6.0rem;
        padding-bottom: 6.0rem;
    }
    .visualsmodal_sub_inner {
        margin: 0 8.5rem;
        padding: 5.0rem 8.0rem;
    }
    .visualsmodal_sub_inner + .visualsmodal_sub_inner {
        margin-top: 2.0rem;
    }
    .visualsmodal_sub_inner--heading {
        font-size: 2.8rem;
        padding-left: .7em;
        margin-bottom: 2rem;
    }
    .visualsmodal_sub_inner--heading:before {
        font-size: 1.8rem;
    }
    .visualsmodal__inner--imagelist {
        padding-top: 1rem;
        padding-bottom: 1.5rem;
    }
    .tags {
        margin-left: -1.0rem;
        padding-top: 2.0rem;
    }
    .tags__item {
        font-size: 1.4rem;
        margin-top: 1.0rem;
        margin-left: 1.0rem;
        padding: 0 .8em;
    }
}