.cbtn { padding: .5rem 1rem; border-radius: 2rem; }
.cbtn.visible-sm { padding: .5rem 1.5rem; display: inline-flex !important; }
.cbtn svg { font-weight: 800; }

#main { padding-top: 85px; }

#mainVisual { position: relative; width: 100%; aspect-ratio: 9/4; overflow: hidden; transition: transform .6s cubic-bezier(.32,.94,.6,1); }
#mainVisual .mainSwiper { height: 100%; }
#mainVisual .mainSwiper .swiper-slide { height: 100%; overflow: hidden; backface-visibility: hidden; transition: transform .3s; }
#mainVisual .mainSwiper .swiper-slide .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: center no-repeat; background-size: cover; }
#mainVisual .mainSwiper .swiper-slide .bg1 { background-image: url(/img/main/img_mainSlider01.jpg); }
#mainVisual .mainSwiper .swiper-slide .bg2 { background-image: url(/img/main/img_mainSlider02.jpg); }
#mainVisual .mainSwiper .swiper-slide .bg3 { background-image: url(/img/main/img_mainSlider03.jpg); }
#mainVisual .mainSwiper .swiper-slide .swiper-txt { position: relative; height: 100%; }
#mainVisual .mainSwiper .swiper-slide .swiper-txt p { position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#mainVisual .mainSwiper .swiper-button { color: #fff; }
#mainVisual .mainSwiper .swiper-button-prev { left: 2%; }
#mainVisual .mainSwiper .swiper-button-next { right: 2%; }
@media (max-width:990px){
    #main { padding-top: 65px; }
}
@media (max-width:768px){
    #main { padding-top: 50px; }
    #mainVisual { aspect-ratio: 5/9; }
    #mainVisual .mainSwiper .swiper-slide .bg1 { background-image: url(/img/main/img_mainSlider01_m.jpg); }
    #mainVisual .mainSwiper .swiper-slide .bg2 { background-image: url(/img/main/img_mainSlider02_m.jpg); }
    #mainVisual .mainSwiper .swiper-slide .bg3 { background-image: url(/img/main/img_mainSlider03_m.jpg); }
    #mainVisual .mainSwiper .swiper-slide .swiper-txt p { width: 100%; left: 50%; top: 7.5%; text-align: center; transform: translateX(-50%) translateY(0); }
}

#forTheFuture .emblem { width: 100%; height: 100%; background-image: url(/img/main/img_forthefuture_bg2.jpg); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; background-position: center;  mask-image: url(/img/main/img_emblem.png); mask-repeat: no-repeat; mask-size: 100%; aspect-ratio: 1/1; }

#forTheFuture .box:nth-child(2) p { position: absolute; bottom: 0; left: 0; }
@media (max-width:990px){
    #forTheFuture .box:nth-child(2) { margin-top: 3rem; }
}
@media (max-width:768px){
    #forTheFuture .box:nth-child(2) { margin-top: 6rem; }
    #forTheFuture .box:nth-child(2) p { font-size: 3.25rem; line-height: 1.25; }
}

#products { background: center no-repeat; background-size: cover; background-image: url(/img/main/img_product_bg.jpg); }
#products .swiper-pagination { position: relative; text-align: left; bottom: 0; }
#products .swiper-pagination li { position: relative; padding: 1rem 1.5rem; width: 75%; height: auto; background: none; opacity: .3; border-radius: 0; color: #fff; transition: background-color .35s, color .35s, opacity .25s; }
#products .swiper-pagination li.swiper-pagination-bullet-active { background-color: #fff; color: var(--pointcolor); opacity: 1; }
#products .swiper-pagination li.swiper-pagination-bullet-active::after { position: absolute; content: url(/img/common/ico_arrow.png); top: 50%; transform: translateY(-50%) scale(.75); transform-origin: right; right: 1.5rem; }
@media (max-width:768px){
    #products .swiper-pagination li { width: 85%; }
}

#Youtube .youtubeBox { display: flex; justify-content: space-between; }
#Youtube .youtubeBox .viewer { width: 57%; }
#Youtube .youtubeBox .viewer > iframe { width: 100%; aspect-ratio: 16/9; }
#Youtube .youtubeBox .listBox { width: 40%; aspect-ratio: 17/9; overflow-y: auto; }
#Youtube .youtubeBox .listBox .list::-webkit-scrollbar { width: 5px; border-radius: 0; }
#Youtube .youtubeBox .listBox .list { width: 100%; height: 100%; overflow-y: auto; }
#Youtube .youtubeBox .listBox .list li { margin-bottom: .25rem; cursor: pointer; }
#Youtube .youtubeBox .listBox .list li:hover { background-color: #fafafa; }
#Youtube .youtubeBox .listBox .thumb { width: 35%; aspect-ratio: 16/9; overflow: hidden; }
#Youtube .youtubeBox .listBox .thumb > img { width: 100%; height: 100%; object-fit: cover; }
#Youtube .youtubeBox .listBox .txt { width: 65%; padding: 0 1rem; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width:768px){
    #Youtube .youtubeBox { flex-wrap: wrap; }
    #Youtube .youtubeBox .viewer { width: 100%; }
    #Youtube .youtubeBox .listSwiper { position: relative; margin-top: 4rem; }
    #Youtube .youtubeBox .listSwiper .thumb { aspect-ratio: 16/9; overflow: hidden; }
    #Youtube .youtubeBox .listBox .thumb > img { width: 100%; height: 100%; object-fit: cover; }
    #Youtube .youtubeBox .listSwiper .txt { margin-top: 1.5rem; padding: 0; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    #Youtube .youtubeBox .listSwiper .swiper-pagination { position: absolute; bottom: -3rem; top: auto; background-color: #e3e3e3; }
    #Youtube .youtubeBox .listSwiper .swiper-pagination .swiper-pagination-progressbar-fill { background-color: var(--pointcolor); }
}