/* mixin */
#obihiro-activity { background-image: url(../images/obihiro/activity/paper.webp); background-size: 500px; background-repeat: repeat; background-position: bottom; overflow: hidden; }

#obihiro-activity img { width: 100%; }

#obihiro-activity .btn1 { border-radius: 20px; padding: .5rem 3rem; 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-activity .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/activity/arw2.svg); }

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

#obihiro-activity .btn-blk { background-color: white; color: black; border: 1px solid; box-shadow: 3px 3px 3px #ababab; }

#obihiro-activity .btn-blk::after { color: black; }

#obihiro-activity .white-bg { background: #ffffffb8; padding: 1rem; border-radius: 20px; }

#obihiro-activity #s1 { position: relative; }

#obihiro-activity #s1 .menu { background-image: url(../images/obihiro/activity/grass.webp); background-position: bottom; background-repeat: no-repeat; padding: 100px 0; }

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

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

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

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

#obihiro-activity #s2 { padding: 50px 0; }

#obihiro-activity #s2 .ttl1 { max-width: 600px; width: 100%; margin: auto; display: block; }

#obihiro-activity #s3 { background-image: url(../images/obihiro/activity/bg-curve1.svg); background-repeat: no-repeat; background-position: right; background-size: contain; font-weight: bold; }

#obihiro-activity #s3 .ttl2 { max-width: 400px; }

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

#obihiro-activity #s3 .inner2 { width: 100%; max-width: 500px; background-color: white; padding: 1rem; border-radius: 16px; display: flex; color: #643D08; flex-direction: column; justify-content: center; align-items: center; border: 3px solid; box-shadow: 5px 6px 0px #643D08; }

#obihiro-activity #s3 .inner2 span { font-size: 1.4rem; font-weight: bold; margin: 0; padding: 0; }

#obihiro-activity #s3 .inner2 img { border-radius: 16px; padding-bottom: 1rem; }

#obihiro-activity #s4 { background-image: url(../images/obihiro/activity/bg-curve2.svg); background-repeat: no-repeat; background-position: left top; background-size: cover; font-weight: bold; }

#obihiro-activity #s4 .map { width: 100%; }

#obihiro-activity #s4 .ttl2 { max-width: 400px; }

#obihiro-activity #s4 .fish { max-width: 1100px; display: block; margin: auto; width: 100%; }

#obihiro-activity #s5 { background-image: url(../images/obihiro/activity/bg-curve3.svg); background-repeat: no-repeat; background-position: left top; background-size: cover; font-weight: bold; }

#obihiro-activity #s5 .ttl2 { max-width: 400px; margin: auto; display: block; }

#obihiro-activity #s5 .text1 { max-width: 800px; display: block; margin: auto; }

#obihiro-activity #s5 .inner1 { background-color: white; padding: 1rem; border: solid 3px #643D08; border-radius: 20px; box-shadow: 7px 10px 0 #643D08; display: flex; flex-direction: column; align-items: center; color: #643D08; }

#obihiro-activity #s5 .inner1 img { display: block; max-width: 800px; }

#obihiro-activity #s5 .inner1 p { max-width: 800px; }

#obihiro-activity #s5 .wrp { background-color: white; padding: 1rem; border: solid 3px #643D08; border-radius: 20px; box-shadow: 7px 10px 0 #643D08; display: flex; flex-direction: column; color: #643D08; width: 100%; position: relative; margin-top: 120px; }

#obihiro-activity #s5 .hov { position: absolute; background: white; padding: 0.5rem 1rem; border-radius: 18px; transform: rotate(-9deg); top: -64px; border: solid 3px #643D08; font-weight: bold; left: -7px; }

#obihiro-activity #s5 .yt { width: 100%; }

#obihiro-activity #s5 .hov2 { position: absolute; background: white; padding: 0.5rem 1rem; border-radius: 18px; transform: rotate(7deg); top: -64px; border: solid 2px #643D08; font-weight: bold; right: -15px; }

#obihiro-activity #s5 .bold { font-weight: bold; font-size: 1.4rem; }

#obihiro-activity #s6 .ttl1 { max-width: 600px; width: 100%; margin: auto; display: block; }

#obihiro-activity #s6 .ttl2 { max-width: 400px; margin: auto; display: block; }

#obihiro-activity #s6 .flex { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: 1rem; }

#obihiro-activity #s6 .flex .inner1 { max-width: 600px; background-color: white; padding: 1rem; padding-top: 4rem; position: relative; border-radius: 20px; }

#obihiro-activity #s6 .flex .inner1::after { content: ""; width: 200px; height: 50px; background-image: url(../images/obihiro/activity/tape.png); background-size: contain; background-repeat: no-repeat; display: block; top: -22px; position: absolute; left: 35%; }

#obihiro-activity #s6 .flex .inner1 .t1 { padding-bottom: 1rem; border-bottom: dashed 2px; }

#obihiro-activity #s6 .flex .inner1 .t2 { font-weight: bold; font-size: 1.2rem; border-radius: 11px; border: solid 3px; padding: .5rem 2rem; width: fit-content; }

#obihiro-activity #s6 .flex .inner1 .t3 { position: relative; }

#obihiro-activity #s6 .flex .inner1 .t3 span { font-weight: bold; background: linear-gradient(transparent 60%, yellow 30%); display: inline-block; }

#obihiro-activity #s6 .flex .inner2 { max-width: 600px; }

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

#obihiro-activity #s7 .ttl1 { max-width: 600px; width: 100%; margin: auto; display: block; }

#obihiro-activity #s7 .ttl2 { max-width: 400px; margin: auto; display: block; }

#obihiro-activity #s7 .flex { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: 1rem; }

#obihiro-activity #s7 .flex .inner1 { max-width: 600px; background-color: white; padding: 1rem; padding-top: 4rem; position: relative; border-radius: 20px; }

#obihiro-activity #s7 .flex .inner1::after { content: ""; width: 200px; height: 50px; background-image: url(../images/obihiro/activity/tape2.png); background-size: contain; background-repeat: no-repeat; display: block; top: -22px; position: absolute; left: 35%; }

#obihiro-activity #s7 .flex .inner1 .t1 { padding-bottom: 1rem; border-bottom: dashed 2px; }

#obihiro-activity #s7 .flex .inner1 .t2 { font-weight: bold; font-size: 1.2rem; border-radius: 11px; border: solid 3px; padding: .5rem 2rem; width: fit-content; }

#obihiro-activity #s7 .flex .inner1 .t3 { position: relative; }

#obihiro-activity #s7 .flex .inner1 .t3 span { font-weight: bold; background: linear-gradient(transparent 60%, #8cffb2 30%); display: inline-block; }

#obihiro-activity #s7 .flex .inner2 { max-width: 600px; }

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

#obihiro-activity #s7 .flex2 { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }

#obihiro-activity #s7 .flex2 .inner1 { max-width: 600px; background-color: white; padding: 1rem; padding-top: 4rem; position: relative; border-radius: 20px; }

#obihiro-activity #s7 .flex2 .inner1 .gttl { max-width: 80%; position: absolute; top: -40px; }

#obihiro-activity #s7 .flex2 .inner1 .gimg { border-radius: 18px; }

#obihiro-activity #s8 { width: 100%; }

#obihiro-activity #s8 .ttl1 { max-width: 600px; width: 100%; margin: auto; display: block; }

#obihiro-activity #s8 .ttl2 { max-width: 400px; margin: auto; display: block; }

#obihiro-activity #s8 .top { height: 100px; width: 100%; background-image: url(../images/obihiro/activity/grass2-top.webp); background-repeat: no-repeat; background-position: top; }

#obihiro-activity #s8 .flex1 { background-color: white; border-radius: 20px; display: flex; flex-wrap: wrap; gap: 10px; padding: 1rem; justify-content: space-around; align-items: center; margin-bottom: 50px; }

#obihiro-activity #s8 .flex1 .inner1 { max-width: 500px; }

#obihiro-activity #s8 .flex1 .inner1 .innerttl { padding: 1rem 0; }

#obihiro-activity #s8 .flex1 .inner1 .historyttl { border-radius: 15px; padding: 0.5rem 1rem; border: solid 2px; color: #643D08; display: inline-block; font-size: 1.2rem; font-weight: bold; background-color: white; }

#obihiro-activity #s8 .flex1 .inner1 .text { background-image: url(../images/obihiro/activity/mesh-bg.png); background-repeat: no-repeat; position: relative; background-size: cover; background-position: top; padding: 50px 10px; border-radius: 10px; box-shadow: 3px 3px 3px #aaa; color: #643D08; }

#obihiro-activity #s8 .flex1 .inner1 .text span { font-weight: bold; background: linear-gradient(transparent 60%, #6cd8ff 30%); display: inline-block; }

#obihiro-activity #s8 .flex1 .inner1 .text::after { content: ""; width: 30px; height: 30px; position: absolute; border-radius: 30px; top: -15px; left: calc(50% - 15px); background-color: #1f86ac75; }

#obihiro-activity #s8 .flex1 .inner2 { max-width: 600px; color: #643D08; }

#obihiro-activity #s8 .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 600px), 1fr)); padding-top: 50px; gap: 10px; }

#obihiro-activity #s8 .grid .wrp { background-color: #ffffffcf; box-shadow: 3px 3px 3px #aaa; padding: 1rem; border-radius: 16px; display: grid; grid-template-rows: subgrid; grid-row: span 3; position: relative; margin-bottom: 50px; }

#obihiro-activity #s8 .grid .wrp .c-ttl { position: absolute; top: -50px; left: -8px; max-width: 500px; }

#obihiro-activity #s8 .grid .wrp .img1 { max-width: 400px; display: block; margin: auto; padding: 1rem 0; padding-top: 50px; }

#obihiro-activity #s8 .middle { background-image: url(../images/obihiro/activity/grass2.webp); background-repeat: repeat; background-position: top; background-size: 500px; }

#obihiro-activity #s9 { background-image: url(../images/obihiro/activity/grass3.webp); background-repeat: repeat; background-position: top; background-size: 500px; }

#obihiro-activity #s9 .white { font-weight: bold; color: white; font-size: 1.4rem; text-align: center; }

#obihiro-activity #s9 .flex1 { display: flex; justify-content: space-evenly; align-items: center; flex-wrap: wrap; padding-bottom: 2rem; }

#obihiro-activity #s9 .flex1 .inner1 { max-width: 500px; }

#obihiro-activity #s9 .flex1 .inner2 { color: white; max-width: 600px; }

#obihiro-activity #s9 .flex1 .inner2 img { max-width: 500px; display: block; padding-bottom: 1rem; }

#obihiro-activity #s9 .flex2 { display: flex; justify-content: space-evenly; flex-wrap: wrap; }

#obihiro-activity #s9 .flex2 .inner1 { max-width: 500px; }

#obihiro-activity #s9 .flex2 .inner1 img { padding: 1rem; }

#obihiro-activity #s9 .ttl2 { max-width: 400px; margin: auto; display: block; }

#obihiro-activity #s9 .top { height: 100px; width: 100%; background-image: url(../images/obihiro/activity/grass2-bottom.webp); background-repeat: no-repeat; background-position: bottom; }

#obihiro-activity #s9 .btn-wrp { display: flex; justify-content: center; flex-wrap: wrap; padding: 2rem 10px; gap: 10px; }

#obihiro-activity #s9 .btn-wrp a { border-radius: 8px; width: 100%; box-shadow: 3px 3px 3px #aaa; padding: 1rem 3rem; font-weight: bold; background-color: #643D08; color: black; text-decoration: none; text-align: center; background-color: white; position: relative; font-size: 14px; }

#obihiro-activity #s9 .btn-wrp a::after { content: ""; width: 3rem; height: 3rem; background-repeat: no-repeat; background-size: contain; background-position: top; position: absolute; left: 0; top: 5px; }

#obihiro-activity #s9 .btn-wrp .type1::after { background-image: url(../images/obihiro/activity/btn-icon1.png); }

#obihiro-activity #s9 .btn-wrp .type2::after { background-image: url(../images/obihiro/activity/btn-icon2.png); }

#obihiro-activity #s9 .btn-wrp .type3::after { background-image: url(../images/obihiro/activity/btn-icon3.png); }

#obihiro-activity #s9 .btn-wrp .type4::after { background-image: url(../images/obihiro/activity/btn-icon4.png); }

#obihiro-activity #links { margin-block: 6rem 4rem; display: grid; width: min(1200px,100%); grid-template-columns: repeat(1, 1fr); }

#obihiro-activity #links a { transition: scale 0.25s ease; }

#obihiro-activity #links img { width: 100%; }

@media (min-width: 992px) { #obihiro-activity #s5 .wrp { width: 49%; } #obihiro-activity #links#links { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 1200px) { #obihiro-activity #s8 .grid .wrp .c-ttl { left: 1rem; } #obihiro-activity #s9 .btn-wrp a { width: 24%; font-size: 1rem; } }

@media (min-width: 576px) { #obihiro-activity #links { grid-template-columns: repeat(2, 1fr); } }

@media (any-hover: hover) { #obihiro-activity #links a:hover { scale: 1.1; } }