/* 共通パーツ（このページの）==================== */
/* 見出し */
.cocoroa-container .el-heading-g{
  margin-bottom: 1rem;
  font-weight: bold;
}

.cocoroa-container .el-heading-g h2{
  font-size: 200%;
}

/* 小見出し */
.cocoroa-container .el-sub-heading{
  font-weight: bold;
  line-height: 1.2;
}

@container container__global (max-width: 1120px) {
  .cocoroa-container .el-heading-g h2{
    font-size: 175%;
  }
}

/* 各セクション毎の記述==================== */
/* FV */
.cocoroa-container .sec-fv{
  margin-bottom: 5rem;
}

.sec-fv .fv-bar{
  display: flex;
  align-items: center;
  gap: 0 1rem;
  padding: 1rem;
  background-color: var(--color-deep-blue);
  color: var(--color-white);
}

.sec-fv .logo-block{
  width: calc((100% - 1rem)*.23);
}

.sec-fv .catch-block{
  width: calc((100% - 1rem)*.77);
  text-align: right;
  white-space: nowrap;
  font-size: clamp(12px, 3.5vw, 40px);
}

.sec-fv .unit-box{
  position: relative;
  display: flex;
}

.sec-fv .img-coffee-bike{
  position: absolute;
  bottom: 1rem;
  left: 7%;
  width: 20%;
}

.sec-fv .img-logoa-lpha{
  width: 45%;
  padding: 2rem;
}

.sec-fv .img-slideshow{
  width: 55%;
  aspect-ratio: 3/2;
  position: relative;
  overflow: hidden;
}

.sec-fv .img-slideshow > img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: fade 15s infinite;
  opacity: 0;
}

.sec-fv .img-slideshow > img:nth-child(1){
  animation-delay: 0s;
}

.sec-fv .img-slideshow > img:nth-child(2){
  animation-delay: 7.5s;
}

  @keyframes fade {
    0%   { opacity: 0; }
    12.5% { opacity: 1; }
    45%  { opacity: 1; }
    57.5% { opacity: 0; }
    100% { opacity: 0; }
  }

@container container__global (max-width: 768px) {
  .cocoroa-container .sec-fv{
    margin-bottom: 2rem;
  }
}
@container container__global (max-width: 600px) {
  .sec-fv .fv-bar{
    padding: .5rem;
  }
}
@container container__global (max-width: 414px) {
  .sec-fv .img-coffee-bike{
    width: 17%;
  }
}

/* 営業情報 */
.sec-info .inner{
  container-type: inline-size;
  container-name: container__sec-info-inner;
}

.sec-info .unit-box{
  display: flex;
  gap: 1.5rem;
}

.sec-info .business-info{
  flex: 1;
}

.sec-info .parking-info{
  width: fit-content;
  height: fit-content;
  padding: 1rem;
  border-radius: .5rem;
  background-color: var(--color-white);
  box-shadow: 3px 3px .5rem var(--color-lightgray);
}

.sec-info .fot-cyclist{
  margin-top: 1rem;
}

.sec-info .explanation-box{
  margin-top: 2rem;
}

@container container__sec-info-inner (max-width: 930px) { 
  .sec-info .unit-box{
    flex-direction: column;
  }

  .sec-info .business-info,
  .sec-info .parking-info{
    width: 100%;
  }
}

/* お知らせ */
.sec-news .inner{
  container-type: inline-size;
  container-name: container__sec-news-inner;
}

.sec-news .news-list-wrapper{
  max-height: 400px;
  overflow-y: scroll;
}

.sec-news .news-list > li{
  display: flex;
  gap: .25rem 2rem;
  padding-block: 1.5rem;
  padding-inline: .5rem;
  border: 0 solid var(--color-black);
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.sec-news .news-list > li + li{
  border-top: 0;
}

.sec-news .date{
  opacity: 0.7;
}

@container container__sec-news-inner (max-width: 600px) { 
  .sec-news .news-list > li{
    flex-direction: column;
    padding-block: 1rem;
  }
}

/* メニュー */
.sec-menu .inner{
  container-type: inline-size;
  container-name: container__sec-menu-inner;
}

.sec-menu .el-sub-heading{
  margin-bottom: .5rem;
  padding: 3px 0 3px 6px;
  border: 0 solid var(--color-soft-blue);
  border-left-width: .5rem;
  border-bottom-width: 1px;
  font-size: 125%;
}

.sec-menu .menu-unitbox {
  position: relative;
}

.sec-menu .menu-text-block{
  width: calc(100% - 1rem - min(350px, calc(40% - 1rem)));
  height: fit-content;
}

.sec-menu .menu-wrapper + .menu-wrapper{
  margin-top: 2rem;
}

.sec-menu .menu-list > div{
  display: grid;
  grid-template-columns: 1fr 5rem;
  grid-template-rows: 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 0;
}

.sec-menu .menu-list > div + div{
  margin-top: .5rem;
}

.sec-menu .icecream-list{
  font-size: 85%;
}

.sec-menu .menu-note{
  margin-top: 1rem;
  font-size: 85%;
}

/* （イメージスライダー） */
.sec-menu .menu-image-block{
  position: absolute;
  top: 0;
  right: 0;
  width: calc(40% - 1rem);
  max-width: 350px;
  height: 100%;
  overflow: hidden;
}

.sec-menu .image-slider-content{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: scrollLoop 50s linear infinite;
}

.sec-menu .image-slider-content img{
  width: 100%;
  height: auto;
  display: block;
}

@container container__sec-menu-inner (max-width: 600px) { 
  .sec-menu .menu-text-block{
    width: 100%;
  }

  .sec-menu .menu-image-block{
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    margin-top: 1rem;
  }

  .sec-menu .image-slider-content{
    flex-direction: row;
    animation: scrollLoopX 15s linear infinite;
  }

  .sec-menu .image-slider-content figure{
    width: 180px;
  } 
}

@container container__sec-menu-inner (max-width: 414px) { 
  .sec-menu .image-slider-content{
    animation: scrollLoopX 10s linear infinite;
  }
}

@keyframes scrollLoop{
  0%{ transform: translateY(0);}
  100%{ transform: translateY(-50%);}
}

@keyframes scrollLoopX {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Cocoroa Art Gallery */
.sec-gallery .inner{
  container-type: inline-size;
  container-name: container__sec-gallery-inner;
}

.sec-gallery .unit-box{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: .5rem 1.5rem;
  padding-block: 1rem;
}

.sec-gallery .text-block{
  width: calc((100% - 1.5rem)*0.55);
}

.sec-gallery .img-slideshow{
  position: relative;
  overflow: hidden;
  width: calc((100% - 1.5rem)*0.45);
  aspect-ratio: 3/2;
  max-width: 500px;
  margin-top: 1rem;
  box-shadow: -.5rem .5rem 0 var(--color-verylightgray);
}

.sec-gallery .img-slideshow > img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: fade-gallery 10s infinite;
  opacity: 0;
}

.sec-gallery .img-slideshow > img:nth-child(1){
  animation-delay: 0s;
}

.sec-gallery .img-slideshow > img:nth-child(2){
  animation-delay: 5s;
}

  @keyframes fade-gallery {
    0%   { opacity: 0; }
    12.5% { opacity: 1; }
    45%  { opacity: 1; }
    57.5% { opacity: 0; }
    100% { opacity: 0; }
  }

@container container__sec-gallery-inner (max-width: 730px) {
  .sec-gallery .unit-box{
    flex-direction: column;
    align-items: start;
    padding-block: 0;
  }
  .sec-gallery .text-block,
  .sec-gallery .img-slideshow{
    width: 100%;
  }
}

/* アクセス */
.cocoroa-container .sec-access{
  margin-bottom: 3rem;
}

.sec-access .inner{
  container-type: inline-size;
  container-name: container__sec-access-inner;
}

.sec-access .unit-box{
  display: flex;
  align-items: center;
  gap: .5rem 1.5rem;
}

.sec-access .text-block{
  width: calc((100% - 1.5rem)*0.4);
}

.sec-access .map-block{
  width: calc((100% - 1.5rem)*0.6);
  max-width: 600px;
  margin-top: 1rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.sec-access .map-block iframe {
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.sec-access .paragraph + .paragraph{
  margin-top: 1rem;
}

@container container__sec-access-inner (max-width: 800px) {
  .sec-access .unit-box{
    flex-direction: column;
    align-items: start;
  }
  
  .sec-access .text-block,
  .sec-access .map-block{
    width: 100%;
  }
}