.ukulele-container {
    --content-max-width:850px;
    --marker-yellow:linear-gradient(transparent 55%, #f5f084 55%, #f5f084 85%, transparent 85%, transparent 100%);
    --border-radius:30px;
}

.ukulele-wrapper {
    font-size: 16px;
    line-height: 1.7;
    width: 100%;
    overflow: hidden;
}

.ukulele-wrapper img {
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
    object-fit: contain;
}

.ukulele-top {
    position: relative;
    text-align: center;
}

.ukulele-top img {
    width:100%
}

.ukulele-suzuki {
    background: url(../img/bg1.png) center top 4px / 100%;
    padding: 50px 0 70px;
    --wavesize: 21px;
    mask: url(../img/deco_wave2.png) center bottom calc(var(--wavesize)/1.8) / 900px repeat-x, url(../img/bg_white.png) top center / 100% calc(100% - var(--wavesize)) no-repeat;
    margin-bottom: calc(-1 * var(--wavesize));
    z-index: 3;
    position: relative;
}

.ukulele-suzuki h2 > span:first-child {
    font-size: 20px;
    display: block;
}

.ukulele-suzuki h2 > span:last-child {
    display:flex;
    justify-content:center;
    align-items: baseline;
    gap: 4px;
    background: var(--marker-yellow);
}

.ukulele-suzuki h2 > span:last-child span {
    font-size: 0.6em;
}

.ukulele-suzuki h2 {
  display:flex;
  font-size: 2.2em;
  font-weight: bold;
  justify-content:center;
  align-items: baseline;
  gap: 13px;
  height: 80px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
}

.ukulele-suzuki h2::before,
.ukulele-suzuki h2::after {
  content: "";
  width: 2em;
  height: 2px;
  background: black;
  --angle: 30deg;
  transform: rotate(calc(90deg + -1 * var(--angle)));
  position: relative;
  top: -5px;
}

.ukulele-suzuki h2::before {
  left: 20px;
}

.ukulele-suzuki h2::after {
  right: 20px;
  transform: rotate(calc(90deg + var(--angle)));
}

.ukulele-suzuki-intro {
    display: flex;
    justify-content: center;
    gap: 0px;
    margin: auto;
    max-width: var(--content-max-width);
}

.ukulele-suzuki-intro > div:first-child img {
    height:100%;
    object-fit:cover;
    clip-path: polygon(30% 0%, 53% 0, 100% 34%, 100% 44%, 76% 100%, 12% 100%, 0 78%, 0% 56%);
}

.ukulele-suzuki-intro > div:last-child {
    flex:1.5;
}

.ukulele-suzuki-intro > div:last-child > div {
    background:#fff7df;
    padding:30px;
    border-radius:var(--border-radius);
}

.ukulele-suzuki-intro > div:last-child:before {
    content:"";
    width: 240px;
    height: 30px;
    background: #fef7df;
    display:block;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.ukulele-suzuki-intro > div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ukulele-suzuki-intro > div:first-child {
    width: 300px;
    padding: 0px 0 0 43px;
}

.ukulele-suzuki-profile {
    background:white;
    padding:40px;
    border-radius:var(--border-radius);
    box-shadow: 0 0 12px 1px #00000029;
    max-width: var(--content-max-width);
    margin: 70px auto 40px;
    box-sizing: border-box;
    position: relative;
}

.ukulele-suzuki-profile:before {
    content:"";
    display:block;
    background: url(../img/icon_ukulele.png?251008) center / 100% no-repeat;
    width: 128px;
    aspect-ratio: 128/149;
    position: absolute;
    top: -70px;
    right: -470px;
    left: 0;
    margin: auto;
}

.ukulele-suzuki-profile h3 {
    text-align:center;
    margin-top:-66px;
    margin-bottom:35px;
}

.ukulele-suzuki-profile ul {
    margin: .5em 0;
    display:flex;
    gap:10px;
    justify-content: center;
}

.ukulele-suzuki-profile ul li a {
    border-radius:2em;
    min-width:20px;
    text-align:center;
}

.ukulele-suzuki-profile ul li + li:before {
    content:"/";
    padding-right: 1em;
    padding-left: 0.5em;
}

p.ukulele-product-link a {
    display: block;
    text-align: center;
    border: 1px solid;
    width: 380px;
    max-width: 90%;
    margin: 30px auto 0;
    padding: 10px;
    border-radius: 30px;
    color: #ff8c74;
}

p.ukulele-product-link a:hover {
    color:white;
    background:#ff8c74;
    text-decoration:none;
}

.ukulele-movie {
    max-width: var(--content-max-width);
    margin: auto;
    aspect-ratio: 16/9;
    position: relative;
}

.ukulele-movie iframe {
    width:100%;
    aspect-ratio: 16/9;
}

.ukulele-recommend {
    background: url(../img/bg_recommend.png) center / 100% repeat-y;
    padding: 60px 50px 82px;
    --wavesize: 21px;
    mask: url(../img/deco_wave2.png) center bottom calc(var(--wavesize)/1.8) / 900px repeat-x, url(../img/bg_white.png) top center / 100% calc(100% - var(--wavesize)) no-repeat;
    margin-bottom: calc(-1 * var(--wavesize));
    position: relative;
    z-index: 2;
}

.ukulele-recommend ul {
}

.ukulele-recommend ul li {
    display: flex;
    gap:30px;
    justify-content:center;
    align-items:center
}

.ukulele-recommend ul li:nth-child(even) {
    flex-direction:row-reverse;
}

.ukulele-recommend ul li > div:last-child p + p {
    margin-top:.5em;
}

.ukulele-recommend ul li > div:last-child p a + a {
    margin-left:1em;
}

.ukulele-recommend ul li > div:first-child img {
    max-height:200px;
    max-width: 290px;
}

.ukulele-recommend ul li h3 {
    margin-bottom:1em;
    line-height: 1.6;
}

.ukulele-recommend ul li h3 span {
    background: var(--marker-yellow);
    font-size: 24px;
    font-weight: bold;
    padding: 0 10px;
    display: inline-block;
    color: black;
}

.ukulele-recommend ul li + li,
.ukulele-recommend ul:nth-of-type(2) li{
    border-top: 4px dotted #f58034;
    margin-top: 1.5em;
    padding-top: 1.5em;
}

.ukulele-recommend > div {
    max-width:var(--content-max-width);
    margin: auto;
    background:white;
    border-radius:var(--border-radius);
    overflow: hidden;
    padding-bottom: 40px;
}

.ukulele-recommend > div h2 {
    text-align:center;
    padding:20px;
    background:#f58034;
    color:white;
    font-weight:bold;
    font-size:20px;
}

.ukulele-recommend ul {
    margin:20px 40px;
    padding-top: 10px;
}

.ukulele-about {
    background: #fff7df;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    box-sizing: border-box;
    margin: 40px;
}

.ukulele-about h3 {
    margin-top:-60px;
    margin-bottom:20px;
}

.ukulele-about h3 + p {
    background: var(--marker-yellow);
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 0.8em;
}

.ukulele-about h3 + p + p {
    text-align:center;
}

.ukulele-report {
    padding: 61px 0 97px;
    background: #ffffdd;
    --wavesize: 21px;
    mask: url(../img/deco_wave2.png) center bottom calc(var(--wavesize)/1.8) / 900px repeat-x, url(../img/bg_white.png) top center / 100% calc(100% - var(--wavesize)) no-repeat;
    margin-bottom: calc(-1 * var(--wavesize));
}

.ukulele-report > div {
    max-width: var(--content-max-width);
    margin: auto;
    position: relative;
}

.ukulele-report > div:before, .ukulele-report > div:after {
    content:"";
    height: 100%;
    display: block;
    background: red;
    position: absolute;
    top: 0;
}

.ukulele-report > div:before {
    background: url(../img/deco_report_left.png) left 10px top 60px / 176px repeat-y;
    left: -140px;
    width: 200px;
}

.ukulele-report > div:after {
    background: url(../img/deco_report_right.png) left top 60px / 103px repeat-y;
    width: 103px;
    right: -59px;
    z-index: -1;
}

.ukulele-report h2 {
    text-align:center;
}

.ukulele-report h2 + p {
    text-align:center;
    margin-bottom:1.5em;
    margin-top: -10px;
}

.ukulele-report h2 + p span {
    font-weight: bold;
    text-align: center;
    background: var(--marker-yellow);
    font-size: 26px;
}

.ukulele-report h2 + p + p {
    padding: 0 30px;
}

.ukulele-suzuki-about {
    padding: 55px 50px 75px 10px;
    background: url(../img/bg_cloud.png) center / 100% 100% no-repeat;
    box-sizing: border-box;
}

.ukulele-suzuki-about > div:first-child {
    display: flex;
    gap: 51px;
    margin: 30px 0 0 -4%;
    justify-items: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.ukulele-suzuki-about > div:first-child > div:first-child {
    width: 270px;
}

.ukulele-suzuki-about > div:first-child > div:last-child {
    flex:1;
}

.ukulele-suzuki-about > div:first-child > div:first-child img {
    rotate:-10deg;
    box-shadow: 0 0 13px 3px #0000001f;
    padding: 7px;
    position: relative;
    z-index: 2;
}

.ukulele-suzuki-about > div:nth-child(2) {
    display:flex;
    gap: 20px;
    background: whitesmoke;
    padding: 30px;
    width: 510px;
    margin: 2em auto 0;
    position: relative;
    left: 20px;
}

.ukulele-suzuki-about > div:nth-child(2) > div:first-child {
    width: 140px;
}

.ukulele-suzuki-about > div:nth-child(2) > div:last-child {
    flex:1;
}

.ukulele-suzuki-about > div:nth-child(2) > div:first-child img {
    position: relative;
    z-index: 2;
}


.ukulele-report-box {
    margin:40px 0;
}

.ukulele-report-box li {
    display: grid;
    grid-template-columns: 370px 1fr;
    gap: 30px;
    padding: 30px;
    border: 3px solid #efa18f;
    border-radius:var(--border-radius);
    justify-items: center;
    align-items: center;
    background: white;
    position: relative;
    margin-bottom: 90px;
}

@media (min-width: 801px){
    .ukulele-report-box li > div:first-child img:last-child {
        position:absolute;
        width: 200px;
        z-index: 3;
        display: block;
        border: 3px solid #efa18f;
    }

    .ukulele-report-box li:nth-child(2n + 1) > div:first-child img:last-child {
        bottom: -106px;
        left:-2px;
        rotate: 7deg;
    }

    .ukulele-report-box li:nth-child(2n) > div:first-child img:last-child {
        bottom: -106px;
        right:-2px;
        rotate: -7deg;
    }

    .ukulele-report-box li:nth-child(1) > div:first-child img:last-child {
    width: 130px;
    }
}

.ukulele-present {
    background: #bbe8c3;
    padding: 35px 0 70px;
    margin-bottom: 50px;
}

.ukulele-present h2 {
    text-align: center;
}

.ukulele-present h2 + p {
    text-align:center;
    margin-top:-30px;
}

.ukulele-present h2 + p span {
    font-weight: bold;
    text-align: center;
    background: var(--marker-yellow);
    font-size: 26px;
}

.ukulele-present-product {
    display: flex;
    gap: 20px;
    max-width: var(--content-max-width);
    margin: -1em auto 0;
    padding: 0 30px 0;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    border-radius: var(
    --border-radius);
}

.ukulele-present-product > div:first-child {
    width: 230px;
}

.ukulele-present-product > div:last-child {
    flex:1;
}

.ukulele-present-product > div:last-child h3 {
    margin-bottom: .5em;
    line-height: 1.6;
    font-size: 24px;
}

.ukulele-present-product > div:last-child h3 a {
    color:black;
}

.ukulele-present-product > div:last-child h3 span {
    font-weight: bold;
    background: var(--marker-yellow);
}

.ukulele-present-desc {
    max-width: var(--content-max-width);
    margin: 30px auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: center;
}

.ukulele-present-detail {
    background: white;
    padding: 60px 40px 40px;
    margin: 45px auto 0px;
    position: relative;
    display: grid;
    justify-items: center;
    max-width: var(--content-max-width);
    border-radius: var(--border-radius);
    box-sizing: border-box;
}

.ukulele-present-detail h3 {
    background:#f83370;
    color:white;
    width:180px;
    height: 52px;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:30px;
    font-size:22px;
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    margin: auto;
}

.ukulele-present-detail h3 + p {
    line-height: 2;
}

.ukulele-present-detail dl {
    display:flex;
    flex-wrap:wrap;
    --dtwidth: 119px;
    --dlgap: 2px;
    margin: 10px 0 0;
    gap: 20px var(--dlgap);
}

.ukulele-present-detail dt {
    width:var(--dtwidth);
    font-weight: bold;
}

.ukulele-present-detail dd {
    width: calc(100% - var(--dtwidth) - var(--dlgap));
}

.ukulele-present-detail dt,
.ukulele-present-detail dd {
    border-top: 1px dashed #f94e83;
    padding-top: 20px;
}

.ukulele-links {
    overflow: auto;
    display: flex;
    justify-content: center;
    padding: 70px 0 20px;
}

.ukulele-links ul {
    display: flex;
    gap: 13px;
    white-space: nowrap;
    margin: 20px;
}

.ukulele-links ul li {
    white-space: normal;
    width: calc(100% / 3);
    max-width: 260px;
}

.ukulele-links ul li p {
    font-size: 14px;
    max-height: 5em;
    overflow: hidden;
}

.ukulele-links ul li img {
    box-sizing: border-box;
    border: 1px solid #cacaca;
    min-width: 90px;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    margin-bottom: .5em;
}

.ukulele-sns {
    margin: 1.5em 0;
    display: flex;
    gap: 10px;
}

.ukulele-sns:before {
    content:"|";
    order:2;
}

.ukulele-wrapper .ukulele-sns a {
    color:#f02d6c;
    display: inline-block;
}

.ukulele-wrapper .ukulele-sns a:first-child {
    order:1;
}

.ukulele-wrapper .ukulele-sns a:last-child {
    order:3;
}

.suzuki-live {
    display: flex;
    gap: 20px;
    margin: 2em 0;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
    background: whitesmoke;
    padding: 20px;
}

.suzuki-live > div:first-child {
    width: 190px;
}

.suzuki-live > p:last-child {
    felx:1;
}


@media (max-width: 480px){
    .ukulele-sns {
    flex-direction:column;
        justify-content:center;
        align-items:center;
    }
    .ukulele-sns:before {
        display:none;
    }
}


@media (max-width: 800px){
    .ukulele-container {
        --border-radius: 20px;
    }

    .ukulele-wrapper a {
        color: #795284;
        display: inline;
        text-decoration: underline;
    }

    .ukulele-suzuki-intro {
        flex-direction: column;
        margin: 15px;
        gap: 10px;
    }

    .ukulele-wrapper {
        font-size: 14px;
    }

    .ukulele-suzuki-intro > div:first-child {
        width: 100%;
        padding-left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .ukulele-suzuki-intro > div:first-child img {
        width: 250px;
    }

    .ukulele-suzuki-intro > div:last-child:before {
        width: 40px;
        height: 20px;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }

    .ukulele-suzuki-intro > div {
        flex-direction: column;
    }

    .ukulele-suzuki h2 {
        flex-direction: column;
        align-items: center;
        gap: 0;
        font-size: 1.7em;
        position: relative;
        width: 320px;
        margin: auto;
    }

    .ukulele-suzuki h2::before, .ukulele-suzuki h2::after {
        position: absolute;
        bottom: 30px;
        top: auto;
    }

    .ukulele-suzuki h2::before {
      left: 0px;
    }

    .ukulele-suzuki h2::after {
      right: 0px;
    }

    .ukulele-suzuki h2 > span:first-child {
        line-height: 1.2;
    }

    .ukulele-suzuki-profile h3 {
        width: 170px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        margin-top: -37px;
    }

    .ukulele-suzuki-profile {
        padding: 20px 20px 10px;
        margin: 45px 15px 40px;
    }

    .suzuki-live {
        flex-direction: column-reverse;
        margin: 1em 0;
    }

    .ukulele-recommend {
        padding: 38px 15px 47px;
        --wavesize: 10px;
        mask: url(../img/deco_wave2.png) center bottom calc(var(--wavesize) / 1.8) / 440px repeat-x, url(../img/bg_white.png) top center / 100% calc(100% - var(--wavesize)) no-repeat;
    }

    .ukulele-recommend ul li:nth-child(n) {
        flex-direction: column;
        gap: 10px;
    }

    .ukulele-recommend ul li:nth-child(n) > div:first-child {
    display: flex;
    justify-content: center;
    align-items: center;

}

    .ukulele-recommend ul {
        margin: 20px 20px;
    }

    .ukulele-recommend ul li h3 span {
        font-size: 16px;
    }

    .ukulele-recommend > div h2 {
        font-size: 16px;
        padding: 10px 15px;
    }

    .ukulele-about {
        margin: 50px 15px 30px;
        padding: 40px  15px 20px;
    }

    .ukulele-suzuki-about {
        padding: 30px;
        gap: 40px;
        width: auto;
        margin: 20px;
        background: url(../img/bg_cloud_sp.png) center / 100% 100% no-repeat;
    }

    .ukulele-suzuki-about > div:first-child {
        flex-direction: column;
        margin: auto;
        gap: 40px;
    }

    .ukulele-suzuki-about > div:nth-child(2) {
        left: 0;
        padding: 20px;
        flex-direction: column-reverse;
        width: auto;
        align-items: center;
        margin-top: 1em;
    }

    .ukulele-movie {
        margin: 15px;
    }

    .ukulele-suzuki {
        padding-bottom: 25px;
        --wavesize: 10px;
        mask: url(../img/deco_wave2.png) center bottom calc(var(--wavesize) / 1.8) / 440px repeat-x, url(../img/bg_white.png) top center / 100% calc(100% - var(--wavesize)) no-repeat;
        background: url(../img/bg1_sp.png) center top -42px / 100%;
    }

    .ukulele-report {
        padding: 35px 0 6px;
        --wavesize: 10px;
        mask: url(../img/deco_wave2.png) center bottom calc(var(--wavesize) / 1.8) / 440px repeat-x, url(../img/bg_white.png) top center / 100% calc(100% - var(--wavesize)) no-repeat;
    }

    .ukulele-report-box {
        margin: 20px 15px 40px;
    }

        .ukulele-report-box li {
        margin-bottom: 20px;
        gap: 20px;
        grid-template-columns: repeat(1, 1fr);
        padding: 20px;
        flex-direction: column-reverse;
        display: flex;
    }

    .ukulele-report-box li > div:first-child {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
    }

        .ukulele-present-product {
        flex-direction: column;
        padding: 15px;
        gap: 15px;
        margin-top: -23%;
    }

    .ukulele-present-product > div:last-child h3 {
        font-size: 16px;
        text-align: center;
    }

    .ukulele-present h2 + p {
        margin-top:-18%;
    }

    .ukulele-present h2 + p span {
        font-size: 18px;
    }

    .ukulele-present-detail {
        margin: 15px;
        padding: 40px 20px 20px;
    }

    .ukulele-present-detail h3 {
        font-size: 16px;
        padding: 10px;
        box-sizing: border-box;
        width: 140px;
        height: 40px;
        top: -17px;
    }

    .ukulele-suzuki-profile ul {
        gap:2px;
    }

    .ukulele-suzuki-profile ul li + li:before {
        padding: 0 0.5em;
    }

    p.ukulele-product-link a {
        margin: 25px 15px;
        width: auto;
    }

    .ukulele-recommend > div {
        padding-bottom: 15px;
    }

    .ukulele-present {
        padding: 35px 0 8px;
        margin-bottom: 40px;
    }

    .ukulele-present-detail dl {
        flex-direction: column;
        --dtwidth: 100%;
        gap: 10px var(--dlgap);
    }

    .ukulele-present-detail dd {
        width: 100%;
        border-top: none;
        padding-top: 0;
    }

        .ukulele-links {
        padding: 10px 0 20px;
    }

    .ukulele-about h3 {
        width: 180px;
        margin-top: -57px;
    }

    .ukulele-about h3 + p {
        font-size: 16px;
    }

    .ukulele-report h2 + p span {
        font-size: 20px;
    }

    .ukulele-report h2 {
        max-width: 320px;
        margin: auto;
    }

    .ukulele-report > div:before {
        background: url(../img/deco_report_left.png) left 10px top 60px / 96px repeat-y;
        left: -40px;
        width: 90px;
    }

    .ukulele-report > div:after {
        background: url(../img/deco_report_right.png) left top 60px / 63px repeat-y;
        width: 55px;
        right: 2px;
        z-index: -1;
    }
    .ukulele-suzuki-profile:before {
        right: -10px;
        left: auto;
        top: -30px;
        position: relative;
        float: right;
        width: 70px;
    }
    .ukulele-about h3 + p + p {
        text-align: left;
    }
    .ukulele-about h3 + p + p br {
        display:none;
    }
    .ukulele-suzuki-intro > div:last-child > div {
        padding: 20px;
    }

    .ukulele-recommend ul li > div:first-child img {
        height: 140px;
    }
    .ukulele-suzuki-about > div:first-child > div:first-child img {
        left: -10px;
    }
    .ukulele-report-box li img {
        max-height: 254px;
    }
}