@charset "utf-8";

.CMP-CM19-breadcrumb {
 /* width: 100%; */
 max-width: 1280px;
 margin: 0 auto;
 padding: 3px 20px;
 background: #fff;
}

.CMP-CM18-video {
 width: 100%;
 max-width: 100% !important;
}

.uc-mod-hdg-lv1-01 {
 margin-bottom: 18px;
 font-size: 3.2rem;
}

.uc-mod-hdg-lv1-01 h1 {
 font-weight: bold;
}

.tampon-pages-navi {
 justify-content: center;
 margin: 25px 0 50px;
 /* gap: 10px; */
}

.tampon-pages-navi > div {
 padding: 0 5px;
 /* flex: 1 0 auto; */
 max-width: fit-content;
}

.tampon-pages-navi a {
 color: #e85ba0;
 text-decoration: underline;
}

.tampon-pages-navi .uc-mod-media-01 {
 margin: 0 auto;
}

.tampon-pages-navi .tampon-pages-navi-caption {
 text-align: center;
 padding: 8px 0 0 0;
 font-size: 1.4rem;
}

.tampon-pages-container {
 background: #fff;
 /* background: #fcc; */
 max-width: 1000px;
 width: 100%;
 margin: 0 auto;
 margin-bottom: 40px;
 border-radius: 10px;
 position: relative;
 padding: 35px 20px;
}

.tampon-pages-container-first {
 padding-top: 47px;
}

.tampon-pages-container .uc-mod-media-01 {
 margin: 0 auto;
}

.tampon-pages-h2-fukidashi {
 background: #e85ba0;
 max-width: 310px;
 width: 100%;
 padding: 6px 0;
 border-radius: 5rem;
 position: absolute;
 top: 0;
 left: 50%;
 transform: translate(-50%, -50%);
}

.tampon-pages-h2-fukidashi h2 {
 color: #fff;
 font-size: 2.4rem;
 margin: 0;
 font-weight: bold;
}

.tampon-pages-h2-fukidashi::before {
 content: "";
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 9px 15px 9px;
 display: block;
 border-color: transparent transparent #e85ba0 transparent;
 position: absolute;
 top: 0;
 left: 16%;
 transform: translate(-50%, -70%);
}

.tampon-pages-h2-fukidashi-3-2::before {
 left: 50%;
}

.tampon-pages-h2-fukidashi-3-3::before {
 left: 85%;
}

.tampon-pages-h2-fukidashi-2-1::before {
 left: 21.9%;
}

.tampon-pages-h2-fukidashi-2-2::before {
 left: 78%;
}

.tampon-pages-h3-fukidashi-sub h3 {
 font-size: 2.4rem;
 margin-bottom: 1.6rem;
 font-weight: bold;
 margin-top: 35px;
}

.tampon-pages-h3-fukidashi-sub h3 span {
 font-size: 1.8rem;
 display: block;
}

.tampon-pages-pink-border {
 margin: 0 0 17px 0;
}

.tampon-pages-pink-border > * {
 border-bottom: 3px dotted #e85ba0;
 display: inline-block;
 font-size: 2.4rem;
 font-weight: bold;
 margin: 0;
}

/*--------------------------*/
/* guide.html */
/*--------------------------*/

.guide-index-section01 {
 background: #ffffe7;
 text-align: center;
 padding: 25px 5.33%;
}

.guide-index-section01 .tampon-pages-container {
 padding-top: 25px;
 margin-bottom: 0;
}

.guide-index-section01 .uc-mod-media-02 {
 margin: 0;
 width: 100%;
}

.guide-index-section02 {
 background: #9edbf0;
 padding: 29px 20px 40px;
}
.guide-index-section02 h2 {
 font-size: 2.4rem;
 font-weight: bold;
}

.guide-index-section02 h2 span {
 font-size: 1.8rem;
}

.guide-index-section02-grid {
 max-width: 1000px;
 margin: 0 auto;
 gap: 40px;
}

.guide-index-section02-grid-box {
 background: #fff;
 margin-bottom: 17px;
}

.guide-index-section02-grid-box a {
 display: flex;
 width: 100%;
 font-size: 20px;
 color: #296db3;
 text-decoration: none;
}

.guide-index-section02-grid-box .uc-object {
 padding-top: 47px;
 margin-right: 30px;
 align-self: flex-end;
 max-width: 113px;
}

.guide-index-section02-grid-box .uc-caption {
 align-self: center;
 font-size: 1.6rem;
 padding: 11px 0;
}

.guide-index-section02-grid-box .uc-caption b {
 border-bottom: 2px dotted #296db3;
 font-weight: normal;
 display: inline-block;
 margin: 10px 0;
}

.guide-index-section02-grid-text b {
 color: #e85ba0;
}

.guide-index-section02-grid-text a {
 color: #e85ba0;
 font-size: 1.8rem;
 text-decoration: underline;
}

/*--------------------------*/
/* guide/illust.html */
/*--------------------------*/

.guide-illust-section01 {
 background: #ffffe7;
 text-align: center;
 padding: 25px 20px 25px 20px;
}

#guide-illust-container01 .tampon-pages-h3-accent h3 {
 font-size: 2.4rem;
 position: relative;
 margin: 0 0 12px 0;
 font-weight: bold;
}

#guide-illust-container01 .tampon-pages-h3-accent h3::before,
#guide-illust-container01 .tampon-pages-h3-accent h3::after {
 position: absolute;
 bottom: 0;
 line-height: 1;
}

#guide-illust-container01 .tampon-pages-h3-accent h3::before {
 content: "＼ ";
 left: 0;
}

#guide-illust-container01 .tampon-pages-h3-accent h3::after {
 content: " ／";
 right: 0;
}

#guide-illust-container01 p b {
 color: #e85ba0;
}

#guide-illust-container01 .guide-illust-container01-grid {
 margin-top: 20px;
 justify-content: center;
 gap: 18px;
}

#guide-illust-container01 .uc-mod-media-01 {
 margin-bottom: 0;
}

.guide-illust-section01 #step0 .uc-mod-hdg-lv3-01 {
 color: #296db3;
 font-size: 2.4rem;
 margin: 0;
}

.guide-illust-section01 #step0 .uc-mod-hdg-lv3-01 h3 {
 border-bottom: 3px dotted #296db3;
 display: inline;
 font-weight: bold;
}

.guide-illust-section01 #step0 .uc-mod-hdg-lv4-01 {
 color: #296db3;
 font-size: 2rem;
 margin: 30px 0 20px 0;
}

.guide-illust-section01 #step0 .uc-mod-hdg-lv4-01 h4 {
 font-weight: bold;
}

.guide-illust-step0-box .uc-mod-hdg-lv5-01 {
 color: #296db3;
 font-size: 2rem;
 margin-bottom: 10px;
}

.guide-illust-step0-box .uc-mod-hdg-lv5-01 h5 {
 font-weight: bold;
}

.guide-illust-step0-grid01 {
 display: flex;
 flex-direction: column-reverse;
 max-width: 600px;
 margin: 0 auto;
 margin-top: 25px;
}

.guide-illust-step0-grid01 .uc-object {
 background: #ecf8fc;
}
.guide-illust-step0-grid01 .uc-caption {
 text-align: left;
 font-size: 1.8rem;
 color: #296db3;
 margin-bottom: 10px;
}

.guide-illust-step0-grid02 > div {
 margin-bottom: 30px;
}

. .guide-illust-step0-grid02 .uc-mod-media-01 {
 margin-bottom: 0;
}

.guide-illust-step0-grid02 .uc-caption {
 padding-left: 1.2em;
 text-indent: -1.2em;
 font-size: 1.6rem;
 margin-top: 20px;
}

.guide-illust-step0-grid02 .uc-caption b {
 color: #296db3;
 font-weight: normal;
}

.guide-illust-step0-box {
 box-shadow: 0 0 0 10px #ebf9ff;
 padding: 17px 20px 27px;
}

.guide-illust-step0-box-grid {
 margin: 28px 0 40px 0;
}

.guide-illust-step0-box
 .CMP-CM11-image-and-text:last-child
 > .guide-illust-step0-box-grid {
 margin: 0;
}

.guide-illust-step0-box-grid .uc-caption {
 text-align: left;
 text-indent: -1.2em;
 padding-left: 1.2em;
}

.guide-illust-step0-grid03 {
 gap: 40px;
}

.guide-illust-step0-grid03 .uc-mod-media-01 {
 margin-bottom: 0;
}

.guide-illust-step0-grid03 .uc-mod-hdg-lv5-01 {
 color: #296db3;
 font-size: 2.4rem;
 margin: 7px 0 9px 0;
}

.guide-illust-step0-grid03 .uc-mod-hdg-lv5-01 h5 {
 font-weight: bold;
}

#step1 {
 padding-top: 30px;
 padding-bottom: 26px;
}

.guide-illust-step1-image01 {
 margin: 34px 0 0 0;
}

.guide-illust-step1-image01 .uc-caption {
 text-align: left;
 margin-top: 16px;
}

.guide-illust-fukidashi-pink {
 margin: 1.6em 0 0 0;
}

.guide-illust-fukidashi-pink .uc-object {
 background: #fee6f3;
 border-radius: 10px;
 position: relative;
}

.guide-illust-fukidashi-pink .uc-object::before {
 content: "";
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 7.5px 13px 7.5px;
 border-color: transparent transparent #fee6f3 transparent;
 position: absolute;
 top: 0;
 left: 50%;
 transform: translate(-50%, -100%);
 display: block;
}

.guide-illust-fukidashi-pink .uc-caption {
 color: #e85ba0;
 margin: 6px 0 0 0;
}

.guide-illust-point-box {
 background: #e2f4fb;
 padding: 16px 20px 28px;
 color: #296db3;
 border-radius: 10px;
 margin: 30px 0 0 0;
 font-size: 1.4rem;
}

.guide-illust-point-box h4 {
 color: #296db3;
 margin: 0 0 8px 0;
 font-size: 2.4rem;
 font-weight: bold;
}

.guide-illust-point-box .uc-mod-hdg-lv4-01 {
 margin: 0;
}

.guide-illust-point-box .guide-illust-point-text {
 text-align: left;
 margin-bottom: 1.6em;
}

#step1 .guide-illust-point-box .uc-put-media {
 display: flex;
 flex-direction: column-reverse;
}

#step1 .guide-illust-point-box .uc-caption {
 text-align: left;
 margin: 0 0 10px 0;
}

#step2 {
 padding-top: 30px;
 padding-bottom: 26px;
}

#step2 .uc-mod-hdg-lv3-01 {
 font-size: 2.4rem;
 margin: 0 0 10px 0;
}

#step2 .uc-mod-hdg-lv3-01 h3 {
 border-bottom: 2px dotted #e85ba0;
 display: inline;
}

.guide-illust-step2-grid01 {
 margin: 32px 0 44px 0;
 gap: 40px;
}

.guide-illust-step2-image01 .uc-object {
 margin: 0 0 12px 0;
}

.guide-illust-step2-image01 .uc-caption {
 text-align: left;
}

.guide-illust-step2-image01 .uc-caption b {
 color: #e85ba0;
 font-weight: normal;
}

#step2 .guide-illust-point-box .guide-illust-point-text b {
 font-size: 1.8rem;
 font-weight: normal;
}

#guide-illust-point-box03 {
 margin-bottom: 26px;
}

#guide-illust-point-box03 .guide-illust-point-text01 {
 font-size: 1.4rem;
 text-align: left;
 margin: 0 0 24px 0;
}

#guide-illust-point-box03 .guide-illust-step3-grid01 .uc-mod-media-01 {
 margin: 0 0 17px 0;
}

.guide-illust-point-text02 {
 font-size: 1.8rem;
 color: #e85ba0;
}

#guide-illust-point-box03 .uc-mod-media-02 {
 margin: 0;
}

#step3 .uc-mod-hdg-lv4-01 {
 font-size: 2.4rem;
 margin: 0;
 font-weight: bold;
}

#step3 .uc-mod-hdg-lv4-01 h4 {
 font-weight: bold;
}

.guide-illust-step3-image01 {
 margin: 30px 0 0 0;
}

.guide-illust-step3-image01 .uc-object {
 margin: 0 0 8px 0;
}

.guide-illust-step3-image01 .uc-caption {
 text-align: left;
}

.guide-illust-step3-grid02 {
 margin: 30px 0 0 0;
 gap: 40px;
}

.guide-illust-step3-grid02 b {
 color: #e85ba0;
 font-weight: normal;
}

.guide-illust-step3-grid02 .uc-mod-media-01 {
 margin-bottom: 0;
 font-size: 1.6rem;
}

#guide-illust-step3-point-box02 h4 {
 font-size: 2rem;
}

#step3 .guide-illust-point-text {
 font-size: 1.4rem;
}

#step3 .guide-illust-point-text p b {
 color: #e85ba0;
 font-weight: normal;
}

#step3 .uc-mod-btn-01 {
 margin: 0;
}

.guide-illust-section02 {
 padding: 42px 0 22px 0;
}

.guide-illust-section02 .uc-mod-hdg-lv2-01 {
 font-size: 3.2rem;
 font-weight: bold;
}

.guide-illust-section02 .uc-caption::after {
 display: none !important;
}

.CMP-CM49-menu {
 position: sticky;
 bottom: 0;
}

.guide-illust-footer-menu {
 background: #e85ba0;
}

.guide-illust-footer-menu ul {
 display: flex;
 font-size: 1.4rem;
 padding: 5px 0;
 max-width: 800px;
 margin: 0 auto;
}

.guide-illust-footer-menu ul li {
 list-style: none;
 width: 25%;
 margin: 0;
 border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.guide-illust-footer-menu ul li:first-child {
 border-left: none;
}

.guide-illust-footer-menu ul li a {
 color: #fff;
 display: flex;
 flex-direction: column-reverse;
 text-align: center;
 padding: 6px 0;
}

.guide-illust-footer-menu ul li a .uc-title {
 font-weight: bold;
}

.guide-illust-footer-menu ul li a .uc-sub {
 font-size: 1rem;
}

/*--------------------------*/
/* guide/use.html */
/*--------------------------*/

.guide-use-section01 {
 background: #ffffe7;
 text-align: center;
 padding: 25px 20px 25px 20px;
}

#guide-use-container01 {
 padding: 75px 18px 35px;
 margin-bottom: 30px;
}

#guide-use-container01 h3 {
 display: flex;
 flex-direction: column;
 font-size: 1.8rem;
 font-weight: bold;
}

#guide-use-container01 h3 span {
 color: #296db3;
}

.guide-use-section01 .guide-use-case-title {
 padding: 36px 0 0 0;
}

.guide-use-section01 .guide-use-case-title h4 {
 font-size: 2rem;
 color: #296db3;
 font-weight: bold;
 position: relative;
 padding: 2.6em 0 0 0;
 margin: 0 0 20px;
}

.guide-use-section01 .guide-use-case-title h4 b {
 font-size: 2.4rem;
}

.guide-use-section01 .guide-use-case-title h4 span {
 position: absolute;
 top: 0;
 left: 50%;
 text-align: center;
 background: #296db3;
 color: #fff;
 font-size: 1.6rem;
 padding: 3px 24px;
 border-radius: 5em;
 font-weight: normal;
 transform: translate(-50%, 0);
}

.guide-use-section01 .guide-use-box {
 border-top: 1px dashed #296db3;
 padding: 28px 0;
 text-align: left;
}

.guide-use-section01 .guide-use-box .uc-mod-hdg-lv5-01 {
 font-size: 2rem;
 color: #53585f;
 margin: 0 0 27px 0;
}

.guide-use-section01 .guide-use-box .uc-mod-hdg-lv5-01 h5 {
 font-weight: bold;
}

.guide-use-section01 .guide-use-box-grid .uc-mod-media-01 {
 margin: 0 auto;
 width: 80.2%;
}

.guide-use-section01 .guide-use-box-grid > div:nth-child(2) {
 order: 3;
}

.guide-use-section01 .guide-use-box-grid > div:nth-child(3) {
 order: 2;
}

.guide-use-section01 .guide-use-box .guide-use-box-text {
 margin: 14px 0 25px 0;
}

.guide-use-section01 .guide-use-box .guide-use-box-text b {
 color: #296db3;
 font-weight: normal;
}

.guide-use-section01 .guide-use-box .guide-use-box-text b.tampon-pink {
 color: #e85ba0;
 font-weight: bold;
}

.guide-use-point-box {
 box-shadow: 0 0 0 10px #ebf9ff;
 border-radius: 5px;
 padding: 40px 20px;
 margin-bottom: 32px;
}

.guide-use-point-box .uc-mod-hdg-lv5-01 h5 {
 color: #e85ba0;
 font-weight: bold;
 font-size: 1.8rem;
}

.guide-use-point-box-grid {
 text-align: left;
}

.guide-use-point-box-grid p {
 margin: 0 0 10px 0;
}

.guide-use-point-box-grid .uc-mod-media-01 {
 margin: 0;
}

#guide-use-box-grid07 {
 margin: 0 0 36px 0;
}

#guide-use-box-grid07 > div:first-child .parsys {
 display: flex;
 flex-direction: column-reverse;
}

#guide-use-box-grid07 .guide-use-failure-grid {
 align-items: flex-start;
 flex-wrap: nowrap;
 margin-bottom: 14px;
}

#guide-use-box-grid07 .guide-use-failure-grid > div {
 max-width: fit-content;
 flex: 1 0 auto;
}

#guide-use-box-grid07 .guide-use-failure-grid > div:nth-child(1) {
 color: #296db3;
 font-size: 1.4rem;
 border: 1px solid #296db3;
 border-radius: 5px;
 padding: 11px 7px;
 margin-right: 6px;
}

.guide-use-btn-blue {
 background: #296db3;
 border-radius: 5px;
 padding: 16px 15px;
 max-width: fit-content;
 margin: 0 auto;
}

.guide-use-btn-blue a {
 color: #fff;
 text-decoration: none;
}

.guide-use-btn-blue a:hover {
 opacity: 0.7;
}

#guide-use-case03-title {
 border-top: 1px dashed #296db3;
}

.guide-use-case3-video {
 margin: 32px 0 23px 0;
 display: flex;
 flex-direction: column-reverse;
}

.guide-use-case3-video .uc-caption {
 text-align: center;
 font-weight: bold;
 margin-bottom: 13px;
}

.guide-use-case3-list-title {
 margin: 17px 0 0 0;
}

.guide-use-case3-list-title h5 {
 font-size: 2rem;
 color: #e85ba0;
 font-weight: bold;
 margin: 0 0 20px 0;
}

.guide-use-products-box {
 background: #eff9ff;
 border-radius: 10px;
 padding: 30px;
 margin: 20px 0 15px 0;
}

.guide-use-products-box h6 {
 color: #e85ba0;
 font-size: 2rem;
 text-align: center;
}

.guide-use-products-box h6 span {
 color: #53585f;
 font-size: 1.6rem;
 display: block;
}

.guide-use-products-box-grid {
 row-gap: 30px;
}

.guide-use-products-box .uc-mod-media-01 {
 margin: 0;
 width: 100%;
}

.guide-use-products-box .uc-mod-media-01 a .uc-caption {
 padding: 11px 0 0 0;
 text-decoration: underline;
 color: #e85ba0;
 font-size: 1.6rem;
 text-align: center;
}

.guide-use-products-box .uc-mod-media-01 a .uc-caption::after {
 display: none;
}

.guide-use-products-box .tampon-pages-attention {
 margin-top: 20px;
}

.guide-use-text-pink {
 font-size: 2rem;
 color: #e85ba0;
 text-align: center;
 font-weight: bold;
}

.guide-use-contact-box {
 text-align: center;
 color: #296db3;
 padding: 20px 25px;
 margin-top: 23px;
 margin-bottom: 15px;
}

.guide-use-contact-box .guide-use-btn-blue {
 max-width: 100%;
}

.tampon-pages-attention {
 text-align: left;
 font-size: 1.3rem;
}

.tampon-pages-attention p {
 padding-left: 1.3em;
 text-indent: -1.3em;
}

/*--------------------------*/
/* question.html */

.question-section01 {
 background: #ffffe7;
 text-align: center;
 padding: 25px 20px 25px 20px;
}

.question-section01 h1 {
 font-size: 3.2rem;
 font-weight: bold;
 margin-bottom: 13px;
}

.question-section01 .tampon-pages-navi {
 margin-bottom: 0;
}

.question-basic-section {
 padding: 33px 15px 0px;
}

.question-basic-section .uc-mod-media-01 {
 margin-bottom: 0;
}

.question-basic-section .uc-mod-hdg-lv2-01 {
 font-size: 1.8rem;
 color: #296db3;
 margin-top: 22px;
}

.question-basic-section .uc-mod-hdg-lv2-01 h2 {
 font-weight: bold;
}

.question-basic-section .uc-mod-hdg-lv3-01 {
 font-size: 2.4rem;
 color: #e85ba0;
 text-align: center;
 margin: 35px 0;
}

.question-basic-section .uc-mod-hdg-lv3-01 h3 {
 font-weight: bold;
 border-bottom: 3px dotted #e85ba0;
 width: fit-content;
 min-width: 221px;
 margin: 0 auto;
}

.question-accordion {
 margin: 0 0 15px 0;
}

.question-accordion .uc-accordion-title {
 background: #fff;
 border: 1px solid #e85ba0;
 border-radius: 5px;
 display: flex;
 min-height: 80px;
}

.question-accordion .uc-accordion-title::before {
 content: "Q";
 background: #e85ba0;
 color: #fff;
 font-size: 2rem;
 font-weight: bold;
 padding: 0 10px;
 display: flex;
 align-items: center;
}

.question-accordion .uc-accordion-text {
 color: #333333;
 padding: 0 16px;
 display: flex;
 align-items: center;
}

.question-accordion .uc-accordion-title .uc-js-tgl-btn {
 display: none !important;
}

.uc-accordion-btn-close {
 display: none;
}

.uc-accordion-table {
 background: #ffdeed;
 padding: 12px;
}

.question-accordion-box {
 background: #fff;
 border-radius: 5px;
 padding: 20px 13px 20px 32px;
 color: #53585f;
 position: relative;
}

.question-accordion-box::before {
 content: "A";
 color: #e85ba0;
 font-size: 2rem;
 font-weight: bold;
 position: absolute;
 left: 10px;
}

.question-grid {
 margin-top: 20px;
 justify-content: center;
 gap: 18px;
}

.question-grid > div {
 max-width: fit-content;
 flex: 1 0 auto;
}

#trouble-qa {
 margin-bottom: 70px;
}

/*--------------------------*/
/* circum.html */

.circum-section01 {
 background: #ffffe7;
 text-align: center;
 padding: 25px 20px 80px 20px;
}

.circum-link-list {
 margin: 38px 0 60px 0;
}

.circum-link-list ul {
 text-align: left;
 border-top: 1px solid #c8c8c8;
}

.circum-link-list li {
 list-style: none;
 border-bottom: 1px solid #c8c8c8;
 background: url(/content/dam/sites/www_sofy_jp/products/tampon/tampon-circum-icon.png)
  no-repeat center left;
 margin: 0;
}

.circum-link-list li a {
 color: #e85ba0;
 padding: 7px 24px 7px 27px;
 display: block;
 font-size: 1.3rem;
 font-weight: bold;
 background: url(/content/dam/sites/www_sofy_jp/products/tampon/circum-arrow-icon.png)
  no-repeat center right;
}

.circum-grid01 {
 gap: 40px;
}

.circum-grid01 > div {
 background: #fff;
 border-radius: 5px;
}

.circum-grid-box {
 padding: 26px 10px 34px;
}

.circum-grid-box .uc-mod-hdg-lv2-01 {
 margin-bottom: 0;
}

.circum-grid-box h2 {
 font-size: 2.4rem;
 font-weight: bold;
 margin: 0 0 10px 0;
}

.circum-grid-box h2::before {
 content: "";
 background: url(/content/dam/sites/www_sofy_jp/products/tampon/tampon-circum-icon.png)
  no-repeat center left;
 width: 22px;
 height: 20px;
 display: inline-block;
}

.circum-grid-box h3 {
 margin: 30px 0 16px 0;
 font-size: 1.6rem;
 color: #296db3;
 font-weight: bold;
}

.circum-grid-box h3::before {
 content: "Q";
 color: #fff;
 background: #296db3;
 display: inline-block;
 font-size: 1.4rem;
 line-height: 1;
 border-radius: 50%;
 padding: 4px 6px;
 margin-right: 5px;
}

.circum-grid-box .uc-mod-media-01 {
 margin-bottom: 0;
}

/*--------------------------*/
/* how.html */

.how-section01 {
 background: #ffffe7;
 text-align: center;
 padding: 25px 20px 20px 20px;
}

.how-section01 h1 {
 font-size: 3.2rem;
 margin: 0 0 13px 0;
 font-weight: bold;
}

.how-container-lead {
 font-weight: bold;
 margin-bottom: 25px;
 text-align: left;
}

.how-section01 .uc-mod-hdg-lv3-01 {
 margin: 0;
}

.how-section01 h3 {
 color: #296db3;
 font-size: 1.8rem;
 margin-bottom: 27px;
 font-weight: bold;
}

.how-section01 h3 span {
 color: #e85ba0;
 display: block;
}

.how-grid01 > div {
 border-bottom: 1px dashed #296db3;
 padding: 17px 0;
}

.how-grid01 > div:nth-child(3),
.how-grid01 > div:last-child {
 border-bottom: 0;
}

.how-grid01 .uc-mod-media-01 {
 margin-bottom: 0;
}

.how-section01 .tampon-pages-container p b {
 color: #296db3;
}

#how-container03 .how-container-text {
 text-align: left;
}

#how-container04 .how-container-text {
 text-align: left;
}

/*--------------------------*/
/* body.html */

.body-section01 {
 background: #ffffe7;
 text-align: center;
 padding: 25px 20px 20px 20px;
}

.body-section01 h1 {
 font-size: 3.2rem;
 margin: 0 0 13px 0;
 font-weight: bold;
}

.body-section01 .tampon-pages-container-first {
 padding-top: 67px;
 padding-bottom: 40px;
}

.body-section01 .tampon-pages-pink-border {
 margin-bottom: 36px;
}

.body-section01 .uc-mod-hdg-lv4-01 {
 margin: 0;
}

.body-grid01 {
 gap: 26px;
}

.body-section01 h4 {
 color: #296db3;
 font-size: 1.8rem;
 margin-bottom: 27px;
 font-weight: bold;
}

.body-section01 h4 span {
 color: #e85ba0;
 display: block;
}

.body-section01 .tampon-pages-container p b {
 color: #296db3;
}

.body-section01 .body-point-box {
 box-shadow: 0 0 0 10px #ebf9ff;
 border-radius: 5px;
 padding: 36px 20px;
 margin-top: 38px;
}

.body-section01 .body-point-box .uc-mod-hdg-lv5-01 h5 {
 color: #e85ba0;
 font-weight: bold;
 font-size: 1.8rem;
}

.body-section01 .body-point-box h6 {
 font-size: 1.8rem;
 font-weight: bold;
 color: #296db3;
}

.body-section01 .body-point-box-grid {
 text-align: left;
}

.body-section01 .body-point-box-grid p {
 margin: 0 0 10px 0;
}

.body-section01 .body-point-box-grid .uc-mod-media-01 {
 margin-top: 26px;
 margin-bottom: 26px;
}

.body-section01 .body-point-box a {
 text-decoration: underline;
}

/*-------------------------------------------------------------*/
/* MB */
/*-------------------------------------------------------------*/

@media screen and (max-width: 768px) {
 .tampon-no-sp {
  display: none;
 }
}

/*-------------------------------------------------------------*/
/* PC */
/*-------------------------------------------------------------*/

@media screen and (min-width: 769px), print {
 .tampon-no-pc {
  display: none;
 }

 .uc-mod-hdg-lv1-01 {
  margin-bottom: 22px;
  font-size: 4rem;
 }

 .tampon-pages-lead {
  font-size: 1.8rem;
 }

 .tampon-pages-navi {
  margin-top: 47px;
  margin-bottom: 80px;
  gap: 0 50px;
 }

 .tampon-pages-navi > div {
  min-width: fit-content;
  padding: 0;
  justify-content: center;
  flex: 1 0 auto;
 }

 .tampon-pages-h2-fukidashi-2-2::before {
  left: 65%;
 }

 .tampon-pages-h2-fukidashi-2-1::before {
  left: 35%;
 }

 .tampon-pages-navi .tampon-pages-navi-caption {
  font-size: 1.7rem;
 }

 .tampon-pages-h2-fukidashi {
  min-width: 600px;
  padding: 10px 0;
 }

 .tampon-pages-h2-fukidashi h2 {
  font-size: 2.5rem;
 }

 .tampon-pages-h3-fukidashi-sub h3 {
  margin: 60px 0 35px;
 }

 .tampon-pages-h3-fukidashi-sub h3 span {
  font-size: 2rem;
 }

 .tampon-pages-container {
  margin-bottom: 50px;
  padding-top: 53px;
  padding-bottom: 56px;
 }

 .tampon-pages-container-first {
  padding-top: 57px;
 }

 .tampon-pages-container .uc-mod-media-02 .uc-object {
  max-width: 640px;
 }

 .tampon-pages-pink-border {
  margin: 0 0 30px 0;
 }

 .tampon-pages-pink-border > * {
  font-size: 3.6rem;
 }

 /*--------------------------*/
 /* guide/index.html */

 .guide-index-section01 {
  padding: 57px 0 104px 0;
 }

 .guide-index-section01 .tampon-pages-navi {
  margin-bottom: 78px;
 }

 .guide-index-section01 .tampon-pages-container {
  padding: 28px 0 128px 0;
 }

 .guide-index-section02 {
  padding: 70px 20px 97px 20px;
 }

 .guide-index-section02 h2 {
  font-size: 4rem;
 }

 .guide-index-section02-grid > div {
  max-width: 480px;
  width: 43%;
  flex: 1 0 auto;
 }

 .guide-index-section02-grid-box {
  border-radius: 10px;
  box-shadow: 4px 4px 0px 2px rgba(41, 109, 179, 0.2);
  margin-bottom: 27px;
 }

 .guide-index-section02-grid-box .uc-object {
  max-width: 182px;
  width: 37.9%;
 }

 .guide-index-section02-grid-box .uc-caption {
  font-size: 2rem;
 }

 /*--------------------------*/
 /* guide/illust.html */

 .guide-illust-section01 {
  padding-top: 57px;
 }

 #guide-illust-container01 .tampon-pages-h3-accent {
  margin-bottom: 18px;
 }

 #guide-illust-container01 .tampon-pages-h3-accent h3 {
  font-size: 3.6rem;
  position: relative;
  margin: 0 0 12px 0;
  display: inline;
  padding: 0 1.3em;
 }

 #guide-illust-container01 {
  padding-top: 82px;
  padding-bottom: 72px;
 }

 .guide-illust-container01-grid {
  gap: 40px;
  margin-top: 40px;
 }

 .guide-illust-container01-grid > div {
  min-width: max-content;
 }
 .guide-illust-container01-grid .uc-mod-media-01 {
  margin: 0;
 }

 .guide-illust-section01 #step0 .uc-mod-hdg-lv3-01 {
  font-size: 3.6rem;
 }

 .guide-illust-section01 #step0 .uc-mod-hdg-lv4-01 {
  font-size: 3rem;
  margin: 62px 0 16px 0;
 }

 .guide-illust-step0-grid01 {
  margin-top: 40px;
 }

 .guide-illust-step0-grid02 {
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
  gap: 32px;
 }

 .guide-illust-step0-grid02 > div {
  max-width: fit-content;
  width: 46.6%;
  flex: 1 0 auto;
 }

 .guide-illust-step0-grid02 .uc-object {
  min-width: fit-content;
 }

 .guide-illust-step0-grid02 .uc-mod-media-01 {
  margin: 0;
 }

 .guide-illust-step0-box {
  max-width: 800px;
  margin: 0 auto;
  margin-top: 80px;
  padding: 38px 100px;
  box-sizing: border-box;
 }

 .guide-illust-step0-box-grid {
  display: flex;
  align-items: center;
  margin: 0 0 10px 0;
 }

 .guide-illust-step0-box-grid .uc-object {
  min-width: fit-content;
 }

 .guide-illust-section01 #step0 .guide-illust-step0-box .uc-mod-hdg-lv5-01 {
  margin-bottom: 12px;
  font-size: 2.4rem;
 }

 .guide-illust-step0-grid03 {
  max-width: 800px;
  margin: 0 auto;
  margin-top: 33px;
  gap: 40px;
 }

 .guide-illust-step0-grid03 > div {
  width: 29%;
  flex: 1 0 auto;
 }

 .guide-illust-step0-box-text {
  margin: 0 0 50px 0;
 }

 .guide-illust-step0-grid03 .uc-object {
  min-width: fit-content;
 }

 .guide-illust-step0-grid03 .uc-caption {
  padding-left: 1.3em;
  text-indent: -1.3em;
 }

 .guide-illust-step0-grid03 .uc-mod-hdg-lv5-01 {
  margin: 12px 0 9px 0;
 }

 #step1 {
  padding-top: 48px;
  padding-bottom: 63px;
 }

 .guide-illust-step1-image01 {
  width: fit-content;
  margin: 0 auto;
  margin-top: 43px;
 }
 .guide-illust-fukidashi-pink {
  max-width: 600px;
  margin: 0 auto;
  margin-top: 40px;
 }

 .guide-illust-fukidashi-pink .uc-object::before {
  border-width: 0 16.5px 29px 16.5px;
 }

 .guide-illust-fukidashi-pink .uc-caption {
  margin: 12px 0 0 0;
 }

 .guide-illust-point-box {
  max-width: 600px;
  margin: 0 auto;
  margin-top: 40px;
  padding: 25px 40px;
  position: relative;
 }

 #step1 .guide-illust-point-box .uc-put-text {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
 }

 #step1 .guide-illust-point-box .uc-put-media {
  display: flex;
  flex-direction: row-reverse;
  gap: 50px;
  align-items: center;
 }

 #step1 .guide-illust-point-box .uc-put-object {
  min-width: max-content;
 }

 #step2 {
  padding-top: 48px;
  padding-bottom: 48px;
 }

 .guide-illust-step2-grid01 {
  max-width: 600px;
  margin: 0 auto;
  margin-top: 33px;
  text-align: left;
 }

 .guide-illust-step2-grid01 > div {
  max-width: 280px;
  width: 46.6%;
  flex: 1 0 auto;
 }

 .guide-illust-step3-image01 {
  max-width: 280px;
  margin: 0 auto;
  margin-top: 47px;
  margin-bottom: 33px;
 }

 .guide-illust-step3-image01 .uc-object {
  margin-bottom: 20px;
 }

 #guide-illust-point-box03 {
  padding: 30px 25px 60px;
 }

 #guide-illust-point-box03 .guide-illust-step3-grid01 .uc-mod-media-01 {
  margin: 0;
 }

 .guide-illust-step3-grid01 {
  justify-content: center;
  gap: 15px;
 }

 .guide-illust-step3-grid01 > div {
  max-width: 265px;
  flex: 1 0 auto;
 }

 .guide-illust-point-text02 {
  margin: 28px 0 20px 0;
 }

 #step2 .guide-illust-point-box .guide-illust-point-text {
  font-size: 1.6rem;
 }

 #step3 .uc-mod-hdg-lv4-01 {
  font-size: 3rem;
 }

 .guide-illust-step3-grid02 {
  max-width: 600px;
  margin: 0 auto;
  margin-top: 33px;
 }

 .guide-illust-step3-grid02 > div {
  max-width: 280px;
  width: 46.6%;
  flex: 1 0 auto;
 }

 #guide-illust-step3-point-box02 {
  margin-top: 56px;
  padding: 34px 40px;
 }

 #guide-illust-step3-point-box02 h4 {
  font-size: 2.4rem;
  margin-bottom: 16px;
 }

 #guide-illust-step3-point-box02 .uc-mod-btn-01 a {
  display: block;
 }

 .guide-illust-section02 {
  padding: 70px 0 54px;
 }

 .guide-illust-section02 .uc-mod-hdg-lv2-01 {
  font-size: 4rem;
 }

 .guide-illust-footer-menu ul li:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.5);
 }

 .guide-illust-footer-menu ul li:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.5);
 }

 .guide-illust-footer-menu ul li a {
  flex-direction: row-reverse;
  justify-content: center;
 }

 .guide-illust-footer-menu ul li a .uc-sub {
  font-size: 1.4rem;
 }

 /*--------------------------*/
 /* guide/use.html */

 .guide-use-section01 {
  padding-top: 57px;
  padding-bottom: 37px;
  margin-bottom: 35px;
 }

 #guide-use-container01 {
  padding: 60px 70px 18px;
  margin-bottom: 27px;
 }

 .guide-use-box .uc-mod-hdg-lv5-01 h5 {
  text-align: left;
 }

 .guide-use-box-grid {
  justify-content: space-between;
 }

 .guide-use-box-grid > div {
  max-width: max-content;
 }

 .guide-use-section01 .guide-use-box-grid .uc-mod-media-01 {
  width: 100%;
  max-width: 400px;
 }

 .guide-use-section01 .guide-use-box .guide-use-box-text {
  margin: 30px 0 5px 0;
 }

 .guide-use-point-box {
  padding: 35px 40px;
 }

 .guide-use-point-box .uc-mod-hdg-lv5-01 h5 {
  text-align: center;
  font-size: 2rem;
 }

 .guide-use-point-box-grid {
  gap: 90px;
 }

 .guide-use-point-box-grid > div:nth-child(1) {
  max-width: 340px;
 }

 .guide-use-point-box-grid > div:nth-child(2) {
  max-width: fit-content;
 }

 .guide-use-point-box-grid p {
  margin: 0 0 3.4rem 0;
 }

 .guide-use-section01 .guide-use-box-grid > div:nth-child(2) {
  order: 2;
 }

 .guide-use-section01 .guide-use-box-grid > div:nth-child(3) {
  order: 3;
 }

 #guide-use-box-grid07 > div:first-child .parsys {
  flex-direction: column;
 }

 #guide-use-box-grid07 .guide-use-failure-grid {
  margin: 15px 0 0 0;
 }

 .guide-use-case3-video {
  text-align: center;
  margin: 32px 0 13px 0;
 }

 .guide-use-case3-video iframe {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 640 / 362;
 }

 .guide-use-case3-list-title {
  margin-top: 0;
 }

 .guide-use-case3-list-title h5 {
  margin-bottom: 12px;
 }

 .guide-use-case3-list-text {
  padding-left: 70px;
  margin-bottom: 27px;
  text-align: left;
 }

 .guide-use-products-box .uc-mod-hdg-lv6-01 {
  margin-bottom: 30px;
 }

 .guide-use-products-box-grid {
  justify-content: center;
  gap: 74px;
 }

 .guide-use-products-box-grid > div {
  max-width: fit-content;
 }

 .guide-use-contact-box {
  margin: 27px auto;
  padding: 40px 0 30px;
 }

 .guide-use-contact-box .guide-use-btn-blue {
  max-width: 285px;
 }

 .tampon-pages-attention {
  width: fit-content;
  margin: 0 auto;
 }

 /*--------------------------*/
 /* question.html */

 .question-section01 {
  padding-top: 57px;
  padding-bottom: 80px;
 }

 .question-section01 h1 {
  font-size: 4rem;
 }

 .question-basic-section .uc-mod-hdg-lv2-01 {
  font-size: 2rem;
 }

 .question-basic-section .uc-mod-hdg-lv3-01 {
  font-size: 2.8rem;
 }

 .question-accordion {
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 15px;
 }

 .question-accordion-box {
  padding: 20px 25px 15px 42px;
 }

 /*--------------------------*/
 /* circum.html */

 .circum-section01 {
  padding: 42px 20px 40px 20px;
  margin-bottom: 55px;
 }

 .circum-link-list {
  width: fit-content;
  margin: 0 auto;
  margin-top: 38px;
  margin-bottom: 77px;
 }

 .circum-link-list li a {
  font-size: 1.6rem;
 }

 .circum-grid01 {
  max-width: 1000px;
  margin: 0 auto;
  row-gap: 30px;
 }

 .circum-grid01 > div {
  max-width: 47%;
  flex: 1 0 auto;
  background: #fff;
  border-radius: 5px;
 }

 .circum-grid-box {
  padding: 30px 20px;
 }

 .circum-grid-box h2 {
  margin-bottom: 23px;
 }

 .circum-grid-box .uc-mod-hdg-lv3-01 {
  margin: 0;
 }

 .circum-grid-box h3 {
  margin: 25px 0 18px 0;
 }

 /*--------------------------*/
 /* how.html */

 .how-section01 {
  padding-top: 57px;
 }
 .how-section01 h1 {
  font-size: 4rem;
  margin-bottom: 22px;
 }

 .how-section01 .tampon-pages-container {
  padding: 30px 50px 60px;
 }

 .how-section01 .tampon-pages-container-first {
  padding-top: 70px;
 }

 .how-container-lead {
  margin: 0 auto;
  margin-bottom: 36px;
  max-width: fit-content;
  text-align: left;
 }

 .how-grid01 {
  gap: 56px 11.1%;
 }

 .how-grid01 > div {
  border-bottom: 0;
  padding: 0;
  max-width: 400px;
  width: 44.4%;
  flex: 1 0 auto;
 }

 .how-section01 .tampon-pages-pink-border h2 {
  font-size: 2.8rem;
 }

 .how-section01 h3 {
  font-size: 2rem;
 }

 #how-container03 .how-container-text {
  text-align: center;
 }

 #how-container04 .how-container-text {
  text-align: center;
 }

 /*--------------------------*/
 /* body.html */

 .body-section01 {
  padding-top: 57px;
 }

 .body-section01 h1 {
  margin-bottom: 22px;
  font-weight: bold;
 }

 .body-section01 .tampon-pages-container {
  padding-left: 60px;
  padding-right: 60px;
 }

 .body-section01 .tampon-pages-pink-border h3 {
  font-size: 2.8rem;
 }

 .body-grid01 {
  gap: 50px;
  justify-content: center;
  flex-direction: row-reverse;
 }

 .body-grid01 > div {
  flex: 1 0 auto;
  max-width: 305px;
 }

 .body-section01 h4 {
  text-align: left;
  font-size: 2rem;
 }

 .body-section01 .body-point-box {
  margin-top: 118px;
 }

 .body-section01 .body-point-box .uc-mod-hdg-lv5-01 h5 {
  font-size: 2rem;
 }

 .body-section01 .body-point-box h6 {
  font-size: 2rem;
  text-align: left;
 }

 .body-section01 .body-point-box-grid {
  gap: 50px;
  justify-content: center;
 }

 .body-section01 .body-point-box-grid > div {
  flex: 1 0 auto;
  max-width: 340px;
 }
}