@charset "utf-8";
/* 一般 */
div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video,input,textarea {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 100%;
}
/* about */
.about-title {
  width: 100%;
  max-width: 800px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.about-title-img {
  width: clamp(100px, 40.000px + 16vw, 200px);
  height: auto;
  object-fit: contain;
}
.line01 {
  margin-top: 30px;
  font-size: clamp(18px, 13.200px + 1.28vw, 26px);
  font-family: var(--mincho);
  font-weight: 700;
}
.line02 {
  margin-top: 10px;
  font-size: clamp(1rem, 0.943rem + 0.242vw, 1.125rem);
  font-family: var(--mincho);
  font-weight: 400;
  text-align: center;
}
/* 画像スライダー */
.slider-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
.slider-container {
  width: 100%;
  overflow: hidden;
  margin: 10px 0 0;
  padding: 30px 0;
  position: relative;
}
.slider-track {
  display: flex;
  gap: 50px;
  width: fit-content;
}
.slider-track.right-to-left { 
  animation: slideRightToLeft 20s linear infinite;
}
.slider-track.left-to-right { 
  animation: slideLeftToRight 20s linear infinite;
}
@keyframes slideRightToLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--slide-distance)); }
}
@keyframes slideLeftToRight {
  0% { transform: translateX(var(--slide-distance)); }
  100% { transform: translateX(0); }
}
@media (hover: hover) {
  .slider-track:hover {
    animation-play-state: paused;
  }
}
.slide {
  flex-shrink: 0;
  border-radius: clamp(5px, -1.600px + 1.76vw, 16px);
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
.yoko { width: 200px; height: 150px; }
.tate { width: 150px; height: 200px; }
.slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .slide:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  }
  .slide:hover::before { opacity: 1; }
}
.example {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
  background-color: #f0f0f0;
}
@media screen and (max-width:767px) and (min-width:468px) {
  .yoko { width: 160px; height: 120px; }
  .tate { width: 120px; height: 160px; }
}
@media screen and (max-width:467px) and (min-width:376px) {
  .slider-track { gap: 30px }
  .yoko { width: 120px; height: 90px; }
  .tate { width: 90px; height: 120px; }
}
@media screen and (max-width:375px) {
  .slider-track { gap: 20px }
  .yoko { width: 100px; height: 75px; }
  .tate { width: 75px; height: 100px; }
}

/* where */
.where-img {
  width: 70%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.donguri-img {
  width: 50%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* フッター */
.gazou-waku {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.noasobi-footer-logo {
  width: clamp(120px, 83.636px + 9.697vw, 200px);
  height: auto;
  object-fit: contain;
}
.footer {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 20px 0 0;
}
.link-container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #160c28;
}
.link-list {
  list-style: none;
  padding: 0;
}
.link-list li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 5px;
  line-height: 1.6;
}
.link-list li a {
  color: #160c28;
}
.link-list li::before {
  content: "→";
  position: absolute;
  left: 0;
}
.footer-copyright {
  width: 100%;
  height: 50px;
  background: #000;
  display: flex;
  align-items: center;
}
.footer-copyright p {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  color: white;
  font-size: 13px;
  margin-left: auto;
  margin-right: 5px;
  
}
/* スペース */
.space-5 { margin-top: -5px; }
.space-10 { margin-top: -10px; }
.space-15 { margin-top: -15px; }
.space-20 { margin-top: -20px; }
.space-30 { margin-top: -30px; }
.space-40 { margin-top: -40px; }
.space-50 { margin-top: -50px; }
.space-60 { margin-top: -60px; }
.space10 { margin-top: 10px; }
.space20 { margin-top: 20px; }
.space30 { margin-top: 30px; }
.space40 { margin-top: 40px; }
.space50 { margin-top: 50px; }
.space60 { margin-top: 60px; }
.space80 { margin-top: 80px; }
.space100 { margin-top: 100px; }
.space200 { margin-top: 200px; }
.space300 { margin-top: 300px; }
.space400 { margin-top: 400px; }
.botomu10 { margin-bottom: 10px; }

/* 画像大きさ */
.haba90 { width: 90%; }
.haba80 { width: 80%; }
.haba70 { width: 70%; }
.haba60 { width: 60%; }
.haba50 { width: 50%; }
.haba45 { width: 45%; }
.haba40 { width: 40%; }
.haba30 { width: 30%; }
.haba20 { width: 20%; }
.haba15 { width: 15%; }
.haba10 { width: 10%; }