/* mixin */
#obihiro { overflow: hidden; }

#obihiro img { width: 100%; }

#obihiro .hint { color: white; position: relative; animation-delay: 2s; animation: 2s ease infinite forwards running hint; }

#obihiro .hint::after { content: ""; width: 20px; height: 20px; border-left: 1px solid; border-bottom: 1px solid; display: block; transform: rotate(315deg); position: absolute; left: calc(50% - 10px); top: 10px; animation-delay: 1s; animation: 2s linear infinite forwards running hint; }

@keyframes hint { 0% { top: 10px;
    opacity: 1; }
  50% { top: 20px;
    opacity: 0.8; }
  100% { top: 30px;
    opacity: 0; } }

#obihiro #s1 { position: relative; min-height: 100vh; padding-bottom: 100px; display: flex; justify-content: center; align-items: center; background-image: url(../images/obihiro/top/top-bg.webp); background-size: cover; background-repeat: no-repeat; background-position: top center; }

#obihiro #s1 .top-icon img { width: 100%; max-width: 40vw; }

#obihiro .clip-1 { clip-path: polygon(0 calc(0% + 50px), 100% 0, 100% calc(100% - 50px), 0% 100%); padding: 100px 0; padding-bottom: 150px; }

#obihiro .clip-2 { clip-path: polygon(0 calc(0% + 50px), 100% 0, 100% 100%, 0% calc(100% - 50px)); padding: 100px 0; }

#obihiro .clip-3 { clip-path: polygon(0 0, 100% calc(0% + 50px), 100% calc(100% - 50px), 0% 100%); padding: 100px 0; }

#obihiro #s2 { position: relative; margin: -100px 0; }

#obihiro #s2 .cover { background-image: url(../images/obihiro/top/bg1.png); }

#obihiro #s2 .a-menu { /* margin: auto; */ justify-content: center; display: flex; margin: auto; width: 100%; }

#obihiro #s2 .a-menu a { max-width: 300px; width: 32%; }

#obihiro #s2 .a-menu .rotate1 { transform: rotate(-4deg); }

#obihiro #s2 .a-menu .rotate2 { transform: rotate(4deg); }

#obihiro #s2 .torn-top { position: absolute; top: -60px; max-width: initial; overflow-y: hidden; max-height: 100px; }

#obihiro #s2 .torn { position: absolute; bottom: -40px; max-width: initial; overflow-y: hidden; max-height: 100px; }

#obihiro .btn1 { border-radius: 20px; padding: .5rem 2rem; background-color: #643D08; color: white; position: relative; display: block; margin: auto; text-align: center; font-weight: bold; font-size: 1.2rem; min-width: 200px; width: fit-content; text-decoration: none; transition: all 0.2s 0s ease; top: 0; }

#obihiro .btn1::after { content: ""; width: 1rem; height: 1rem; display: inline-block; position: absolute; right: 1rem; top: 30%; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url(../images/obihiro/top/arw1.svg); }

#obihiro .btn1:hover { top: 3px; }

#obihiro #s3 { margin-bottom: -100px; }

#obihiro #s3 .cover { background-image: url(../images/obihiro/top/bg2.webp); padding: 50px 0; padding-bottom: 150px; }

#obihiro #s3 .ttl1 { margin: auto; max-width: 400px; display: block; padding: 30px 10px; }

#obihiro #s3 .ttl2 { margin: auto; max-width: 400px; display: block; padding: 30px 10px; }

#obihiro #s3 .wrp { padding: 1rem; background-color: #fff4d8e6; max-width: 1200px; margin: auto; padding-bottom: 100px; clip-path: polygon(0% 0%, 15% 0.3%, 35% 0%, 56% 0.3%, 75% 0%, 89% 0.3%, 100% 0%, 100% 100%, 88% 99.7%, 69% 100%, 51% 99.7%, 32% 100%, 11% 99.7%, 0% 100%); }

#obihiro #s3 .flex { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; }

#obihiro #s3 .flex-r { flex-direction: row-reverse; }

#obihiro #s3 .inner1 { width: 100%; max-width: 500px; }

#obihiro #s3 .inner2 { width: 100%; max-width: 500px; }

#obihiro #s4 { margin-bottom: -100px; }

#obihiro #s4 .ja-banner img { max-width: 500px; padding: 10px; }

#obihiro #s4 .cover { background-image: url(../images/obihiro/top/bg4.webp); background-repeat: repeat-y; background-size: contain; padding: 50px 1rem; padding-bottom: 150px; }

#obihiro #s4 .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1200px; margin: auto; }

#obihiro #s4 .grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 1200px; margin: auto; }

#obihiro #s4 .inner { border-radius: 8px; display: flex; flex-direction: column; }

#obihiro #s4 .inner p { flex-grow: 1; }

#obihiro #s4 .ttl1 { margin: auto; max-width: 400px; display: block; padding: 30px 10px; }

#obihiro #s4 .ttl2 { margin: auto; max-width: 400px; display: block; padding: 30px 10px; }

#obihiro #s5 { margin: -100px 0; }

#obihiro #s5 .cover { background-image: url(../images/obihiro/top/paper.webp); background-size: 500px; background-repeat: repeat; background-position: top center; padding: 100px 0; padding-bottom: 150px; }

#obihiro #s5 .adj { display: flex; justify-content: flex-end; }

#obihiro #s5 .wrap { width: 100%; border-top-right-radius: 20px; background: white; position: relative; min-height: initial; padding: 2rem 10px; }

#obihiro #s5 .wrap-r { border-top-left-radius: 20px; border-top-right-radius: initial; margin-top: 50px; }

#obihiro #s5 .border-yellow { border-bottom: 5px solid #F4C500; font-weight: bold; font-size: 1.4rem; color: #643D08; }

#obihiro #s5 .flex { max-width: initial; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; }

#obihiro #s5 .flex .inner1 img { max-width: 500px; width: 100%; position: relative; top: 0; }

#obihiro #s5 .flex .inner2 { max-width: initial; row-gap: 10px; display: flex; flex-direction: column; }

#obihiro #s5 .flex .inner2 p { margin: 0; }

#obihiro #s5 .flex .inner2 .bbo { border-bottom: 2px dashed #643D08; }

#obihiro #s5 .flex .inner2 h3 { color: #643D08; border-left: 1rem solid; border-bottom: 1px solid; padding-left: 1rem; font-size: 1.6rem; }

#obihiro #s5 .flex-r { flex-direction: row-reverse; }

#obihiro #s5 .flex-r .num-flex { display: flex; justify-content: space-evenly; gap: 10px; }

#obihiro #s5 .flex-r .num-flex .num { max-width: 270px; width: 100%; color: #643D08; font-weight: bold; background-repeat: no-repeat; background-size: contain; padding: 2rem 0; background-position: top; font-size: 14px; align-content: center; text-wrap: balance; }

#obihiro #s5 .flex-r .num-flex .num p { text-align: center; }

#obihiro #s5 .flex-r .num1 { background-image: url(../images/obihiro/top/num1.png); }

#obihiro #s5 .flex-r .num2 { background-image: url(../images/obihiro/top/num2.png); }

#obihiro #s5 .flex-r .num3 { background-image: url(../images/obihiro/top/num3.png); }

#obihiro #s6 { margin: -100px 0; }

#obihiro #s6 .cover { background-image: url(../images/obihiro/top/yellowbg.webp); background-size: contain; background-repeat: repeat; background-position: top center; padding: 100px 0; }

#obihiro #s6 .btn-2 { border-radius: 20px; padding: .5rem 2rem; background-color: #643D08; color: white; position: relative; display: block; margin: auto; text-align: center; font-weight: bold; font-size: 1.2rem; min-width: 200px; width: fit-content; text-decoration: none; }

#obihiro #s6 .btn-2::after { content: ""; width: 1rem; height: 1rem; display: inline-block; position: absolute; right: 1rem; top: 30%; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url(../images/obihiro/top/arw1.svg); }

#obihiro #s6 .btn-c1 { background-color: #F47A00; }

#obihiro #s6 .btn-c2 { background-color: #F4C500; }

#obihiro #s6 .btn-c3 { background-color: #3AB9E8; }

#obihiro #s6 .ttl1 { margin: auto; max-width: 400px; display: block; padding: 30px 10px; }

#obihiro #s6 .flex-1 { max-width: 1200px; margin: auto; gap: 10px; padding: 10px; display: flex; justify-content: center; padding-bottom: 50px; }

#obihiro #s6 .flex-1 .ic { max-width: 300px; position: relative; top: 0; transition: all .2s; }

#obihiro #s6 .flex-1 .ic::after { position: absolute; content: ""; width: 15px; height: 15px; border-right: 4px solid #ff8b1a; border-bottom: 4px solid #ff8b1a; transform: rotate(45deg); bottom: 15px; box-shadow: 0px 5px 10px 0px #00000087; left: calc(50% - 15px); transition: all .2s; }

#obihiro #s6 .flex-1 .ic:hover { top: 5px; }

#obihiro #s6 .flex-1 .ic:hover::after { bottom: 10px; }

#obihiro #s6 .flex-2 { display: flex; flex-wrap: wrap; max-width: 1200px; width: 100%; gap: 10px; margin: 50px auto; padding: 10px; background-image: url(../images/obihiro/top/orange-c.webp); background-size: contain; background-repeat: no-repeat; background-position: top; justify-content: space-evenly; flex-direction: row-reverse; }

#obihiro #s6 .flex-2 > * { color: #643D08; }

#obihiro #s6 .flex-2:nth-child(odd) { flex-direction: row; }

#obihiro #s6 .flex-2 .inner1 { max-width: 550px; }

#obihiro #s6 .flex-2 .inner2 { max-width: 550px; }

#obihiro #s6 .flex-2 .inner2 .ttl2 { font-weight: bold; font-size: 1.5rem; text-align: center; margin: 1rem 0; }

#obihiro #s6 .autumn { background-image: url(../images/obihiro/top/yellow-c.webp); }

#obihiro #s6 .winter { background-image: url(../images/obihiro/top/blue-c.webp); }

@media (min-width: 1200px) { #obihiro #s1 { padding-bottom: 150px; } #obihiro #s5 .flex { flex-direction: row; }
  #obihiro #s5 .flex-r { flex-direction: row-reverse; }
  #obihiro #s5 .wrap { width: calc(100vw - 50px); border-top-right-radius: 150px; background: white; position: relative; padding-bottom: 5rem; }
  #obihiro #s5 .wrap .inner1 { max-width: 600px; width: 100%; position: relative; }
  #obihiro #s5 .wrap .inner1 img { max-width: initial; top: 0; }
  #obihiro #s5 .wrap .inner2 { max-width: 600px; }
  #obihiro #s5 .wrap-r { border-top-left-radius: 150px; border-top-right-radius: initial; padding-top: 5rem; margin-top: 200px; }
  #obihiro #s5 .wrap-r .inner1 img { top: 0; } }

@media (min-width: 992px) { #obihiro #s3 .wrp { clip-path: polygon(0 1%, 12% 0%, 27% 1%, 45% 0, 63% 1%, 79% 0, 100% 1%, 99% 24%, 100% 41%, 99% 66%, 100% 84%, 99% 100%, 86% 99%, 67% 100%, 46% 99%, 28% 100%, 12% 99%, 0 100%, 1% 83%, 0 69%, 1% 52%, 0 37%, 1% 20%); } }

@media (max-width: 768px) { #obihiro #s4 .grid { grid-template-columns: 1fr; gap: 20px; }
  #obihiro #s4 .grid2 { grid-template-columns: 1fr; gap: 20px; } }

@media (min-width: 1800px) { #obihiro #s5 .wrap { width: calc(100vw - 100px); border-top-right-radius: 25% 50%; background: white; position: relative; }
  #obihiro #s5 .wrap-r { border-top-right-radius: initial; border-top-left-radius: 25% 50%; margin-top: 200px; }
  #obihiro #s5 .flex { max-width: initial; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; }
  #obihiro #s5 .flex .inner1 { max-width: 700px; }
  #obihiro #s5 .flex .inner1 img { max-width: initial; width: 100%; position: relative; top: 150px; }
  #obihiro #s5 .flex .inner2 { max-width: 830px; }
  #obihiro #s5 .flex .inner2 h3 { color: #643D08; border-left: 1rem solid; border-bottom: 1px solid; padding-left: 1rem; }
  #obihiro #s5 .flex-r { max-width: initial; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-evenly; }
  #obihiro #s5 .flex-r .inner1-r img { top: -150px; } }