/*------------------------
common
------------------------*/
.c-ttl-second{
    text-align: left;
    font-size: 2rem
}
.p-freepage img{
    width: 100%;
    height: auto
}
.mb0{margin-bottom: 0!important;}
.mb1per{margin-bottom: 1%!important;}
.mb2per{margin-bottom: 2%!important;}
.mb3per{margin-bottom: 3%!important;}
.mb4per{margin-bottom: 4%!important;}
.mb5per{margin-bottom: 5%!important;}

.mt0{margin-top: 0!important;}
.mt1per{margin-top: 1%!important;}
.mt2per{margin-top: 2%!important;}
.mt3per{margin-top: 3%!important;}
.mt4per{margin-top: 4%!important;}
.mt5per{margin-top: 5%!important;}
.mt6per{margin-top: 6%!important;}
.mt7per{margin-top: 7%!important;}
.mt8per{margin-top: 8%!important;}
.mt9per{margin-top: 9%!important;}
.mt10per{margin-top: 10%!important;}
.mt11per{margin-top: 11%!important;}
.mt12per{margin-top: 12%!important;}
.mt13per{margin-top: 13%!important;}
.mt14per{margin-top: 14%!important;}
.mt15per{margin-top: 15%!important;}
.mt16per{margin-top: 16%!important;}
.mt17per{margin-top: 17%!important;}
.mt18per{margin-top: 18%!important;}
.mt19per{margin-top: 19%!important;}
.mt20per{margin-top: 20%!important;}

.mt-0_5em{margin-top: 0.5em;!important;}
.mt-1em{margin-top: 1em;}
.mt-1_5em{margin-top: 1.5em;}
.mt-2em{margin-top: 2em;}
.mt-2_5em{margin-top: 2.5em;}
.mt-3em{margin-top: 3em;}
.mt-3_5em{margin-top: 3.5em;}
.mt-4em{margin-top: 4em;}

.mr-1em{margin-right: 1em}

.ta-l{text-align: left}
.ta-c{text-align: center}
.ta-r{text-align: right}

.fs-08{font-size: 0.8rem}
.fs-09{font-size: 0.9rem}
.fs-10{font-size: 1rem}
.fs-11{font-size: 1.1rem}
.fs-12{font-size: 1.2rem}
.fs-13{font-size: 1.3rem}
.fs-14{font-size: 1.4rem}
.fs-15{font-size: 1.5rem}
.fs-16{font-size: 1.6rem}
.fs-17{font-size: 1.7rem}
.fs-18{font-size: 1.8rem}
.fs-19{font-size: 1.9rem}
.fs-20{font-size: 2rem}
.bold{font-weight: bold}
.normal{font-weight: normal}
.flex{
    display: flex;
    flex-wrap: wrap
}
.justify-sb{justify-content: space-between}
.justify-c{justify-content: center}
.align-c{align-items: center}
.gap-10{gap:10px}
.gap-15{gap:15px}
.gap-20{gap:20px}
.gap-25{gap:25px}
.gap-30{gap:30px}
.gap-40{gap:40px}
.gap-50{gap:50px}
.gap-60{gap:60px}
.flex-w20{width: 18%}
.flex-w25{width: 23%}
.flex-w30{width: 28%}
.flex-w40{width: 38%}
.flex-w50{width: 48%}
.flex-w60{width: 58%}
.flex-w70{width: 68%}
.flex-w75{width: 73%}
.flex-w80{width: 78%}

.list-num li{
    text-indent: -1em;
    padding-left: 1em;
}
.list-num li + li{
    margin-top: .5em
}


/*------------------------
guidebook
------------------------*/
.gb-area{
    margin-top: 120px
}
.ttl-line-gb{
    margin-bottom: 1.25em;
    border-left: solid 4px #444;
    padding-left: .8em;
    line-height: 1.6
}
.bdr-gray{
    border: solid 2px #ccc;
    padding: 40px;
}
.zfj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding: 0;
  width: 100%;
  gap:25px
}
.zfj-grid div{text-align: center}
.ebp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding: 0;
  width: 100%;
  gap:25px
}
.ebp-grid div{text-align: center}
.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  padding: 0;
  width: 100%;
  gap:25px
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  padding: 0;
  width: 100%;
    gap:25px
}
.feature-grid.grid-9{
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap:20px 
}
.feature-grid figure{
    margin: 0;
    padding: 0
}
.feature-grid figcaption{
    margin-top: .5em;
    font-size: 0.8rem
}
.icon-new{
    border: solid 1px red;
    color:red;
    padding: 2px 5px;
    font-size: .9rem　　　
}
.wis-grid,.np-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding: 0;
  width: 100%;
   gap:15px
}
.product-name-wis,.product-name-np{
    margin: .5em auto
}
.product-spec p {
  margin: 0 0 0.2em 0;
    font-size: 0.8rem
}
.contents-end{
    border-bottom: solid 1px #ccc;
    padding-bottom: 10%
}
img.gb2526-3{max-width: 99px}
img.gb2526-4,img.gb2526-5{max-width: 650px}
img.gb2526-6{max-width: 95px}
img.gb2526-zfj{max-width: 160px;}
img.gb2526-zfj-7{max-width: 274px;}
img.gb2526-ebp{max-width: 160px;}
img.gb2526-ebp-7{max-width: 160px;}
img.gb2526-ebp-8{max-width: 166px;}
img.gb2526-zfp{max-width:180px;}
img.gb2526-zfp-3{max-width:240px;}
img.gb2526-wis,img.gb2526-np{max-width:200px;}
img.gb2526-instagram{max-width: 140px;}


@media (max-width: 767px) {
    .c-ttl-second{
        font-size: 1.4rem!important
    }
    .gb-area{
        margin-top: 60px
    }
    .bdr-gray{
        padding: 5vw
    }
    .flex-tb{
        flex-direction: column;
    }
    .flex-tb .flex-w20,
    .flex-tb .flex-w25,
    .flex-tb .flex-w30,
    .flex-tb .flex-w40,
    .flex-tb .flex-w50,
    .flex-tb .flex-w60,
    .flex-tb .flex-w70,
    .flex-tb .flex-w75,
    .flex-tb .flex-w80{
        width: 100%;
    }
    img.gb2526-6{max-width: 70px}
    .item-script-image{
        text-align: center;
        margin-bottom: 6vw
    }
    img.gb2526-zfj-7{
        width: 50vw;
    }
    img.gb2526-ebp-7{
        width: 30vw;
    }
    img.gb2526-zfp-3{
        width: 40vw
    }
    .list-num li + li{
        margin-top: 1em
    }
}
/*------------------------
layeringmap
------------------------*/
.layeringmap-area{
    margin: 80px auto
}
.layeringmap-item-list{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: flex-end;
}
.layeringmap-item a{
    text-align: center;
    text-decoration: none;
}
.layeringmap-term{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:10px;
    margin-top: 1.5em;
    line-height: 1
}
.term-icon-01{
    background: linear-gradient(to right, #4a1e8c, #c8621f);
    padding: 3px 6px;
    color: white;
    font-size: 90%
}
.term-icon-02{
    background: linear-gradient(to right, #2d1766, #7b3fb5);
    padding: 3px 6px;
    color: white;
    font-size: 90%
}
.term-icon-03{
    background: linear-gradient(to right, #8b5a3c, #c8621f);
    padding: 3px 6px;
    color: white;
    font-size: 90%
}
.cv-btn-black{
    background: black;
    border: solid 1px black;
    color: white;
    padding: 8px 16px;
    max-width: 140px;
    margin: 1em auto;
    transition: .3s all ease;
}
.layeringmap-item a:hover .cv-btn-black{
    background: white;
    border: solid 1px black;
    color: black;
}
@media (max-width: 1200px) {
    .layeringmap-term{
        font-size: 1.15vw
    }
}
@media (max-width: 959px) {
    .layeringmap-item-list{
         grid-template-columns: repeat(4, 1fr);
    }
    .layeringmap-term{
        font-size: 13px
    }
    .layeringmap-area{
        margin: 60px auto
    }
}
@media (max-width: 767px) {
    .layeringmap-item-list{
         grid-template-columns: repeat(3, 1fr);
    }
    .layeringmap-area{
        margin: 40px auto
    }
}
@media (max-width: 599px) {
    .layeringmap-item-list{
         grid-template-columns: repeat(2, 1fr);
    }

}
/*------------------------
history
------------------------*/
.history-area{
    margin: 80px auto
}

.year-header {
    display: flex;
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid #ddd;
}
.year-header-end{
    border-bottom: 1px solid #ddd;
}
.year {
    font-weight: bold;
    color: #666;
    width: 10%;
}

.year-content {
    width: 90%;
}

.event-row {
    display: flex;
    align-items: flex-start;
}

.event-text {
    width: 65%;
    padding-right: 40px;
}
.event-text-only{
    width: 100%;
    padding-right: 0
}
.event-title {
    color: #333;
    line-height: 1.8;
}
.event-images {
    width: 35%;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.event-images-m{
    width: 24%;
    margin-left: auto
}
.event-images-s{
    width: 18%;
    margin-left: auto
}
.divider {
    border: 0;
    border-top: 1px dashed #ccc;
    margin: 20px 0
}

@media (max-width: 959px) {
    .history-area{
        margin: 60px auto
    }
}
@media (max-width: 767px) {
    .history-area{
        margin: 40px auto
    }
    .event-row {
        flex-direction: column;
    }

    .event-text {
        padding-right: 0;
    }

    .event-images {
        width: 100%;
        flex-wrap: wrap;
        margin-top: 10px
    }
    .event-images-m{
        width: 70%;
        margin-left: 0
    }
    .event-images-s{
        width: 50%;
        margin-left: 0
    }

}
@media (max-width: 599px) {
    .year {
        width: 5.5em;
    }

    .year-content {
        width: calc(100% - 5.5em);
    }
}







/* モーダルのスタイル */
.modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4); /* 背景色 */
    opacity: 0; /* 初期状態では透明 */
    visibility: hidden; /* 初期状態では不可視 */
    transition: opacity 0.5s, visibility 0.5s; /* アニメーション効果 */
}

/* モーダルの画像スタイル */
.modal-content {
    display: block;
    width: 80%;
    max-width: 700px;
}

/* モーダルの閉じるボタン */
#close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}


.popup  {
    cursor: pointer;
    transition: opacity 0.3s ;
}

.popup:hover {
    opacity: 0.7;
}