@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');

#doughnut_main {
	margin-inline: min(0px, 600px - 50cqw);
	background: #FFFDFA;
	font-family: "Zen Kaku Gothic New", sans-serif;

	--klee : "Klee One", cursive;
}
.section_inner {
    width: 1200px;
    margin-inline: auto;
}



section#mv {
    background: url(/img/usr/detail_design/ufufu/back.jpg) no-repeat center / cover #FFFDFA;
    background-blend-mode: multiply, normal;
    padding-block: 130px 110px;
}
section#lead {
    background: url(/img/usr/detail_design/ufufu/back.jpg) no-repeat center / cover, url(/img/usr/detail_design/ufufu/wave01.png) repeat-x left bottom / auto 50px #FFFDFA;
    background-blend-mode: multiply, normal, normal;
    padding-bottom: 180px;
}
.lead_title {
    width: 970px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 28px;
    background: url(/img/usr/detail_design/ufufu/line01.png) no-repeat left bottom / contain;
    font-family: var(--klee);
    font-size: 28px;
    font-weight: 700;
    position: relative;
}
.lead_title::before {
    content: "";
    display: inline-block;
    width: 27px;
    height: 56px;
    background: url(/img/usr/detail_design/ufufu/deco01.png) no-repeat center / contain;
    position: absolute;
    right: calc(100% + 24px);
    bottom: 10px;
}
.lead_title::after {
    content: "";
    display: inline-block;
    width: 27px;
    height: 56px;
    background: url(/img/usr/detail_design/ufufu/deco01.png) no-repeat center / contain;
    position: absolute;
    left: calc(100% + 24px);
    bottom: 10px;
		rotate: y 180deg;
}
.lead_text {
    text-align: center;
    margin-bottom: 60px;
    font-size: 14px;
    line-height: 2.3;
}
.lead_text p:nth-of-type(n + 2) {
    margin-top: 2.3em;
}
.lead_text .opener {
    display: none;
}
.lead_img .swiper-wrapper {
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
.lead_img .swiper-slide {
    width: 368px;
    border-radius: 150px;
    overflow: hidden;
}


section#content {
    background: url(/img/usr/detail_design/ufufu/back.jpg) no-repeat center / cover, url(/img/usr/detail_design/ufufu/wave02.png) repeat-x left bottom / auto 50px #F8F4E9;
    background-blend-mode: multiply, normal, normal;
    padding-block: 68px 180px;
}
.content_item {
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
.content_item:nth-of-type(n + 2) {
    margin-top: 54px;
}
.content_item:nth-of-type(even) {
    flex-direction: row-reverse;
}
.content_img {
    width: 744px;
}
.content_item:nth-of-type(2) .content_img {
    width: 623px;
}
.content_item:nth-of-type(3) .content_img {
    width: 700px;
}
.content_item:nth-of-type(4) .content_img {
    width: 623px;
}
.content_textwrap {
    width: calc(100% - 770px);
}
.content_catch {
    font-family: var(--klee);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 32px;
}
.content_text {
    font-size: 14px;
    line-height: 48px;
    background: url(/img/usr/detail_design/ufufu/line02.png) repeat-y left top / auto 48px;
}
.content_text .opener {
    display: none;
}
section#bottom {
    background: url(/img/usr/detail_design/ufufu/back.jpg) no-repeat center / cover #E8DFD4;
    background-blend-mode: multiply, normal;
}
.bottom_content {
    padding-block: 68px 110px;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    width: 944px;
    margin-inline: auto;
}
.bottom_logo {
    width: 264px;
}
.bottom_text {
    width: calc(100% - 384px);
    font-family: var(--klee);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.8;
}
.bottom_imgs {
    display: flex;
    flex-flow: row wrap;
}
.bottom_imgs_item {
    flex: 1;
}

div#doughnut_deta {
    margin-inline: min(0px, 600px - 50cqw);
    padding-block: 66px 64px;
    border-bottom: 1px solid #100C61;
}
.deta_inner {
    width: 1066px;
    margin-inline: auto;
}
.deta_content {
    border-left: 1px solid #B2A090;
    border-top: 1px solid #B2A090;
}
.deta_content dl {
    display: flex;
    flex-flow: row wrap;
    border-bottom: 1px solid #B2A090;
    border-right: 1px solid #B2A090;
}
.deta_content dt {
    width: 264px;
    padding: 11px 40px;
    background: #E2DBD5;
    font-size: 13px;
		line-height: 1.9;
}
.deta_content dd {
    width: calc(100% - 264px);
    padding: 11px 40px;
		font-size: 13px;
    line-height: 1.9;
}
.deta_content dd ul {
    display: flex;
    flex-flow: row wrap;
}
.deta_content dd li::before {
    content: "・";
}.deta_content dd .color {
    color: #B40001;
    font-size: 11px;
    display: inline-block;
    margin-top: 10px;
}
.deta_note {
    font-size: 11px;
    margin-top: 10px;
}



[data-browse-mode="S"] .block-goods-comment2 {
    display: flex;
    flex-flow: column-reverse wrap;
}
[data-browse-mode="S"] #doughnut_main {
    margin-inline: -28px;
    width: calc(100% + 56px);
}
[data-browse-mode="S"] .section_inner {
    width: 100%;
}
[data-browse-mode="S"] section#mv {
    background: #FFFDFA;
    padding-block: 20px 32px;
}
[data-browse-mode="S"] section#lead {
    background: url(/img/usr/detail_design/ufufu/wave01.png) repeat-x left -10vw bottom / 45vw 14vw #FFFDFA;
    background-blend-mode: normal;
    padding-bottom: 100px;
}
[data-browse-mode="S"] section#lead .section_inner {
    display: flex;
    flex-flow: column;
    padding-inline: 13px;
}
[data-browse-mode="S"] .lead_title {
    width: 100%;
    margin-bottom: 10px;
    padding-bottom: 24px;
    background-size: auto 18px;
    font-size: 20px;
}
[data-browse-mode="S"] .lead_text {
    display: contents;
    text-align: left;
}
[data-browse-mode="S"] .lead_text .lead_text p:nth-of-type(n + 2) {
    margin-top: 0;
}
[data-browse-mode="S"] .lead_text p.hiddentext {
    height: 140px;
    overflow: hidden;
    padding-bottom: 38px;
		position: relative;
		transition: .5s;
}
[data-browse-mode="S"] .lead_text p.hiddentext::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 38px;
    background: #fffdfa;
    position: absolute;
    left: 0;
    bottom: 0;
}
[data-browse-mode="S"] .lead_text .opener {
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 210px;
    height: 38px;
    background: #fffdfa;
    border: 1px solid #100C61;
    border-radius: 300px;
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 0;
    cursor: pointer;
}
[data-browse-mode="S"] .lead_text p:nth-of-type(2) {
    order: 4;
}
[data-browse-mode="S"] .lead_img {
    margin: 45px 42px 36px;
}
[data-browse-mode="S"] .lead_img .swiper {
    overflow: visible;
}
[data-browse-mode="S"] .lead_img .swiper-wrapper {
    flex-wrap: nowrap;
}
[data-browse-mode="S"] .lead_img .swiper-slide {
    border-radius: 60px;
}
[data-browse-mode="S"] .lead_img_pager {
    margin-top: 36px;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 16px;
}
[data-browse-mode="S"] .lead_img_pager .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 !important;
    opacity: 1;
    background: #EFEFEF;
}
[data-browse-mode="S"] .lead_img_pager .swiper-pagination-bullet-active {
    background: #8E8E8E;
}

[data-browse-mode="S"] section#content {
    background: url(/img/usr/detail_design/ufufu/wave02.png) repeat-x left -10vw bottom / 45vw 14vw #F8F4E9;
    background-blend-mode: normal;
    padding-bottom: 100px;
}
[data-browse-mode="S"] .content_item:nth-of-type(n + 2) {
    margin-top: 44px;
}
[data-browse-mode="S"] .content_img {
    width: 100%;
    order: 2;
    padding-inline: 13px;
}
[data-browse-mode="S"] .content_textwrap {
    display: contents;
}
[data-browse-mode="S"] .content_text p.hiddentext {
    height: 190px;
    overflow: hidden;
    padding-bottom: 38px;
    position: relative;
		transition: .5s;
}
[data-browse-mode="S"] .content_text p.hiddentext::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 52px;
    background: #f8f4e9;
    position: absolute;
    left: 0;
    bottom: 0;
}
[data-browse-mode="S"] .content_text p.hiddentext .opener {
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 210px;
    height: 38px;
    background: #f8f4e9;
    border: 1px solid #100C61;
    border-radius: 300px;
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 0;
    cursor: pointer;
}
[data-browse-mode="S"] .content_catch {
    order: 1;
    width: 100%;
    padding-inline: 6px;
    text-align: center;
    margin-bottom: 16px;
    font-size: 20px;
}
[data-browse-mode="S"] .content_text {
    order: 3;
    width: calc(100% - 26px);
    margin-inline: auto;
}
[data-browse-mode="S"] section#bottom {
    background: #E8DFD4;
}
[data-browse-mode="S"] .bottom_content {
    padding-block: 36px 80px;
    width: 100%;
}
[data-browse-mode="S"] .bottom_logo {
    margin-bottom: 55px;
    margin-inline: auto;
}
[data-browse-mode="S"] .bottom_text {
    width: 100%;
    text-align: center;
    font-size: 16px;
}
[data-browse-mode="S"] .bottom_imgs {
    display: none;
}

[data-browse-mode="S"] #doughnut_deta {
    width: calc(100% + 56px);
    margin-inline: -28px;
}
[data-browse-mode="S"] .deta_inner {
    width: 100%;
    padding: 12px 10px;
}
[data-browse-mode="S"] .deta_content {
    border-color: #161857;
}
[data-browse-mode="S"] .deta_content dl {
    border-color: #161857;
}
[data-browse-mode="S"] .deta_content dt {
    width: 100%;
    background: #161857;
    text-align: center;
    color: #fff;
}
[data-browse-mode="S"] .deta_content dd {
    width: 100%;
    padding: 20px 13px;
}