@charset "UTF-8";
/* reset */
*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
/* reset */

html,body {
    font-size: 16px;
    background-color: var(--color-04);
    color: var(--color-black);
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

:root {
    --color-01: #f71a64;
    --color-01-hover: #fa90b4;
    --color-white: #fff;
    --color-black: #242424;
    --color-02: #f9ebf0;
    --color-03: #f3f0f1;
    --color-04: #e4e1de;
    --duration-01: .3s;
}
.triangle {
  width: 0;
	margin:0 auto;
  height: 0;
  border-style: solid;
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
  border-top: 27px solid #3195ff;
  border-bottom: 0;
}
.keiko-yellow{
font-weight:bold;
 text-decoration: underline; /* 下線 */
  text-decoration-thickness: 0.5em; /* 線の太さ */
  text-decoration-color: rgba(255, 228, 0, 0.4); /* 線の色 */
  text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
color: #333;
}
.afterpill-01 {
    background-color: var(--color-white);
    font-size: 16px;
    color: #222;
    max-width: 440px;
    margin: 0 auto;
}


.fix-btn {
    position: fixed;
    bottom: -200px;
    z-index: 3;
    background-color: var(--color-white);
    padding: 5px;
    text-align: center;
    width: 100%;
    height: 100px;
    max-width: 440px;
    transition-duration: var(--duration-01);
}

.afterpill-01 .cta-01 {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 50px;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    background-color: #00B900;
    color: var(--color-white);
/*    width: 100%; */
max-width:100%;
    margin: 30px 10px 0;
    padding: 0 10px 0 50px;
    transition-duration: var(--duration-01);
}
.afterpill-01 .cta-01::before {
    position: absolute;
    z-index: 2;
    left: 10px;
    top: 8px;
    content: "";
    background-image: url(img/line.svg);
    background-repeat: no-repeat;
    width: 35px;
    height: 100%;
}
.afterpill-01 .cta-01:hover {
    background-color: var(--color-01-hover);
    transition-duration: var(--duration-01);
}

.fix-btn .cta-01 {
    margin: 0;
}

.show {
    bottom: 0px;
    transition-duration: var(--duration-01);
}
.afterpill-01 p {
    line-height: 1.75;
}


.afterpill-01 .fv {
    position: relative;
    z-index: 1;
    width: 100%;
    background-image: url(img/fv-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 15px;
}
.afterpill-01 .fv .label-text {
    display: table;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 0.5rem 0.6rem;
    background-color: #fff;
    margin-bottom: 15px;
}

.afterpill-01 .fv .label-text span {
    color: #14b355;
}

.fv-illust-01 {
    position: absolute;
    top: 0px;
    right: 15px;
    z-index: -1;
}
.afterpill-01 h1 {
    display: inline-block;
    color: var(--color-white);
    font-weight: bold;
    font-size: 1.4rem;
    text-align: center;
    background-color: #ff6748;
    padding: 1rem;
    border-radius: 10px;
    margin-top: 10px;
    line-height: 1.5;
}
.afterpill-01 .fv .sokyu-01 {
    margin-top: 20px;
}
.afterpill-01 .sec-first {
    background-color: var(--color-03);
    padding: 15px 0 25px;
}
.afterpill-01 .sec-first .ttl-01 {
    position: relative;
    color: #fff;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 0.5rem 0;
    text-align: center;
    background-color: #222;
    margin: 0 15px;
    border-radius: 10px;
}

.afterpill-01 .sec-first .ttl-01::after {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    margin: auto;
    border-style: solid;
    border-right: 14px solid transparent;
    border-left: 14px solid transparent;
    border-top: 16px solid #222;
    border-bottom: 0;
}
.afterpill-01 .worried-list {
    padding: 2rem 15px 0;
}
.afterpill-01 .worried-list li {
    color: var(--color-01);
    background-color: var(--color-white);
    font-weight: bold;
    text-align: center;
    padding: .5rem 15px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
    margin-bottom: 8px;
}
.worried-woman {
    padding: 0 20% 20px;
}
.afterpill-01 .caution-01 {
    color: var(--color-01);
    padding: 20px 15px;
    font-weight: bold;
    text-align: center;
    line-height: 1.75;
}

.caution-img {
    padding: 0 15px;
}
.afterpill-01 section {
    padding: 0 15px 50px;
}
.afterpill-01 h2 {
    font-weight: bold;
    font-size: 1.4rem;
    line-height: 1.75;
}
.afterpill-01 .about-pill {
    padding: 50px 0 0;
}
.afterpill-01 .about-pill h2 {
    color: var(--color-01);
    text-align: center;
    background-color: var(--color-02);
    padding: 10px 15px;
    border-radius: 30px;
    margin: 0 15px;
}
.afterpill-01 .about-pill p {
    font-size: 0.9rem;
    padding: 0 15px;
}
.afterpill-01 .about-pill p + p {
    margin-top: 1rem;
}
.afterpill-01 .about-pill p span {
    color: var(--color-01);
}

.afterpill-01 .shinjukuap h2 {
color: var(--color-01);
    text-align: center;
    background-color: var(--color-02);
    padding: 10px 15px;
    border-radius: 30px;
    margin: 0 15px;
}
.afterpill-01 .shinjukuap h2 span {
    font-size: 2.2rem;
    color: var(--color-01);
}

.afterpill-01 .shinjukuap {
    padding: 30px 0 0;
}

.afterpill-01 .shinjukuap .item {
    width: 100%;
    min-height: 100px;
    position: relative;
    padding: 5px 50px;
}
.afterpill-01 .shinjukuap .item figure {
    margin: 5px 40px;
}
/* .afterpill-01 .shinjukuap .item:nth-child(odd)::after {
    position: absolute;
    right: -1.5px;
    top: calc(15px);
    display: block;
    content: "";
    width: 3px;
    height: calc(100% - 30px);
    border-radius: 1.5px;
    background-color: var(--color-03);
} */
.afterpill-01 .shinjukuap .item::before {
    position: absolute;
    right: 15px;
    bottom: -1.5px;
    display: block;
    content: "";
    width: calc(100% - 30px);
    height: 3px;
    border-radius: 1.5px;
    background-color: var(--color-03);
}
.afterpill-01 .shinjukuap .item:last-child::before {
    display: none;
}
.afterpill-01 .shinjukuap h3 {
    font-size: 1.05rem;
    line-height: 1.5;
    text-align: center;
}
.afterpill-01 .shinjukuap h3 span {
    color: var(--color-01);
}
.afterpill-01 .shinjukuap .item p {
    font-size: 0.8rem;
    line-height: 1.5;
}
.afterpill-01 .reservation {
    padding: 25px 15px 50px;
}

.afterpill-01 .reservation h2 {
color: var(--color-01);
    text-align: center;
    background-color: var(--color-02);
    padding: 10px 15px;
    border-radius: 30px;
    margin: 0 15px;}
.afterpill-01 .reservation p span {
    color: var(--color-01);
}
.afterpill-01 .slide-wrap {
    background-color: var(--color-03);
    border-radius: 15px;
}

.afterpill-01 .slide-box {
    display: flex;
    overflow-x: scroll;
    flex-wrap: initial;
    gap: 20px;
    padding: 20px 20px;
}

.afterpill-01 .slide {
    flex: 0 0 65%;
    background-color: var(--color-white);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
}

.afterpill-01 .inform-text-wrap dl {
    position: relative;
    margin-top: 30px;
    border: 1px solid var(--color-01-hover);
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
}
.afterpill-01 .inform-text-wrap dl dt {
    color: var(--color-white);
    background-color: var(--color-01-hover);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30px;
}
.afterpill-01 .inform-text-wrap dl dd {
    font-size: 0.85rem;
    padding: 5px;
    line-height: 1.75;
}
.afterpill-01 .delivery h2 {
color: var(--color-01);
    text-align: center;
    background-color: var(--color-02);
    padding: 10px 15px;
    border-radius: 30px;
    margin: 0 15px;
}
.afterpill-01 .delivery .img-wrap {
    display: flex;
    gap: 15px;
    padding: 30px 0;
}
.afterpill-01 .delivery h3 {
    background-color: #ff5857;
    color: var(--color-white);
    font-weight: bold;
    text-align: center;
    padding: 10px;
    margin-bottom: 20px;
}
.afterpill-01 .delivery p span {
    color: var(--color-01);
}

.afterpill-01 #hour96,
.afterpill-01 #hour100 {
    margin-top: 50px;
}

.afterpill-01 .reason h2 {
    border-left: 3px solid var(--color-01);
    padding: 5px 15px;
    font-size: 1rem;
    color: var(--color-01);
    margin-bottom: 20px;
}
.afterpill-01 .reason p {
    font-size: 0.9rem;
    line-height: 1.75;
}
.afterpill-01 .reason dd span,
.afterpill-01 .reason p span {
    color: var(--color-01);
}
.afterpill-01 .reason dl {
    margin-top: 30px;
}

.afterpill-01 .reason dl h3 {
    margin-bottom: 20px;
}

.afterpill-01 .reason dd {
    font-size: 0.9rem;
    line-height: 1.75;
}
.afterpill-01 .reason .cta-01 + h2 {
    margin-top: 50px;
}
.afterpill-01 .reason table {
    border: 1px solid var(--color-04);
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 10px;
}

.afterpill-01 .reason table th,
.afterpill-01 .reason table td {
    border: 1px solid var(--color-04);
    padding: 10px;
    font-size: 0.9rem;
}
.afterpill-01 .reason table th {
    background-color: var(--color-01-hover);
}
.afterpill-01 .reason table td {
    color: var(--color-01);
    font-weight: bold;
}
.afterpill-01 .flow h2 {
  color: var(--color-01);
    text-align: center;
    background-color: var(--color-02);
    padding: 10px 15px;
    border-radius: 30px;
    margin: 0 15px;
margin-bottom:15px;
}
.afterpill-01 .slide h3,
.afterpill-01 .slide p {
    padding: 10px;
}
.afterpill-01 .slide p {
    padding: 0 10px 10px;
    font-size: 0.85rem;
}
.afterpill-01 .payment h2 {
     border-left: 3px solid var(--color-01);
    padding: 5px 15px;
    font-size: 1rem;
    color: var(--color-01);
    margin-bottom: 20px;
}
.afterpill-01 .delivery-method h2 {
      border-left: 3px solid var(--color-01);
    padding: 5px 15px;
    font-size: 1rem;
    color: var(--color-01);
    margin-bottom: 20px;

}
.afterpill-01 .faq h2 {
    border-left: 3px solid var(--color-01);
    padding: 5px 15px;
    font-size: 1rem;
    color: var(--color-01);
    margin-bottom: 20px;
}
.afterpill-01 .faq-wrap {
    padding: 0 0 20px;
}
.afterpill-01 .faq .question {
    position: relative;
    background-color: var(--color-03);
    padding: 10px 50px 10px 50px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 8px;
}
.afterpill-01 .faq .question::before {
    position: absolute;
    left: 10px;
    top: 8px;
    content: "";
    background-image: url(img/question.svg);
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    background-size: cover;
}
.afterpill-01 .faq .question::after {
    position: absolute;
    right: 10px;
    top: 8px;
    content: "";
    background-image: url(img/arrow-01.svg);
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    background-size: 100% 100%;
    transition-duration: var(--duration-01);
}
.afterpill-01 .faq .question.arrow-active::after {
    transform: rotateZ(180deg);
    transition-duration: var(--duration-01);
}
.afterpill-01 .faq .answer {
/*    display: none;*/
    position: relative;
    padding: 10px 50px 10px 50px;
    font-size: 0.9rem;
}
.afterpill-01 .faq .answer::before {
    position: absolute;
    left: 10px;
    top: 8px;
    content: "";
    background-image: url(img/answer.svg);
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    background-size: cover;
}

.afterpill-01 .recommend h2 {
    text-align: center;
}
.afterpill-01 .recommend p {
    font-size: 0.9rem;
    line-height: 1.75;
}
.afterpill-01 .recommend p span {
    color: var(--color-01);
    font-size: 0.9rem;
    line-height: 1.75;
}
.afterpill-01 .recommend .obi-01 {
    margin-bottom: 15px;
}