@charset "UTF-8";

/* ----------------------------------------------------------------------------------------------------
*  YOLO MEDICAL LP
* --------------------------------------------------------------------------------------------------*/

/* SP */

.pc { display:none; }
.sp { display:block; }

.w-80 {
    width: 80% !important;
}

body {
    color: #535353;
    font: normal normal medium 14px/20px Noto Sans CJK JP;
}
main > :first-child {
    padding-top: 0;
}
.toggle-language {
    float: right;
    position: relative;
    top: 15px;
    right: 25px;
    width: unset;
    height: 0;
    z-index: 5;
}
.menu-btn {
    position: fixed;
    top: 33px;
    left: 25px;
    display: block;
    height: 50px;
    width: 50px;
    justify-content: center;
    align-items: center;
    z-index: 36;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 2px;
    width: 25px;
    border-radius: 3px;
    background-color: #000;
    position: absolute;
    transition: all 300ms 0s ease;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
    transition: all 300ms 0s ease;
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
    transition: all 300ms 0s ease;
}
#menu-btn-check {
    display: none;
}
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 100%;
    z-index: 5;
    background-color: #FFF;
    transition: all 0.3s;
}
.menu-content a:hover {
    opacity: 0.8;
    background: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}
.menu-content ul {
    padding: 70px 0 0;
}
.menu-content ul li.first {
    border-top: solid 0.5px #404040;
    border-bottom: solid 0.5px #404040;
    list-style: none;
}
.menu-content ul li {
    border-bottom: solid 0.5px #404040;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    text-align: center;
    color: #404040;
    font-size: 0.9rem;
}
#menu-btn-check:checked ~ .menu-content {
    bottom: 0;
}
picture.campaign {
    background-color: #F6F7F7;
}

/* キービジュアル */
section.key-visual {
    background-color: #E3BAAF;
    text-align: center;
    min-height: 420px;
    width: 100%;
}
section.key-visual .content {
    max-width: 320px;
    padding: 65px 0 0px;
    margin: 0 auto;
}
section.key-visual .content .head {
    font-size: 1.3rem;
    color: #FFF;
    margin-bottom: 20px;
}
section.key-visual .content .logo {
    width: 90%;
    margin-bottom: 15px;
}
section.key-visual .content .kv-image {
    width: 90%;
    margin-bottom: -3px;
}


/* アバウト */
section.about {
    background-color: #F6F7F7;
}
section.about .content {
    padding: 65px 25px 50px;
    margin: 0 auto;
    max-width: 1000px;
}
section.about .content h2 {
    font-size: 1.5rem;
    padding-bottom: 30px;
    line-height: 1.7;
    letter-spacing: .1em;
    font-family: AvenirLTPro-Black;
    color: #363636;
    width: 110%;
}
section.about .content p {
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 2;
    letter-spacing: .2em;
    font-weight: 600;
    color: #363636;
}
section.about .content .pill-text {
    font-size: 1.3rem;
    font-weight: 600;
    color: #363636;
    padding-bottom: 15px;
}
section.about h1 {
    font-size: 1.5rem;
    padding-bottom: 30px;
    line-height: 1.7;
    letter-spacing: .1em;
    font-family: AvenirLTPro-Black;
    color: #363636;
    width: 110%;
}
section.about h3 {
    font-size: 2rem;
    text-align: center;
    color: #D1B737;
    font-family: Raleway;
}
.about-point-content {
    padding-bottom: 50px;
    max-width: 1000px;
    margin: 60px auto 90px;
}
.about-point-content .row {
    margin: 60px 0;
}
.webp section.about .about-point-content .about-item1 { 
    background: url(/assets/yolopillonline/img/webp/about1.webp) top center /cover no-repeat;
}
.no-webp section.about .about-point-content .about-item1 { 
    background: url(/assets/yolopillonline/img/about1.png) top center /cover no-repeat;
}
section.about .about-point-content .about-item1 {
    position: relative;
    height: 180px;
    width: 100%;
    border-radius: 0px 15px 15px 0;
    left: -15px;
}

.webp section.about .about-point-content .about-item2 { 
    background: url(/assets/yolopillonline/img/webp/about2.webp) top center /cover no-repeat;
}
.no-webp section.about .about-point-content .about-item2 { 
    background: url(/assets/yolopillonline/img/about2.png) top center /cover no-repeat;
}
section.about .about-point-content .about-item2 {
    position: relative;
    height: 180px;
    width: 100%;
    border-radius: 15px 0 0 15px;
    right: -15px;
}

.webp section.about .about-point-content .about-item3 { 
    background: url(/assets/yolopillonline/img/webp/about3.webp) top center /cover no-repeat;
}
.no-webp section.about .about-point-content .about-item3 { 
    background: url(/assets/yolopillonline/img/about3.png) top center /cover no-repeat;
}
section.about .about-point-content .about-item3 {
    position: relative;
    height: 180px;
    width: 100%;
    border-radius: 0px 15px 15px 0;
    left: -15px;
}
section.about .about-point-content .yolo-pill-online-icon {
    width: 70%;
    margin: 40px 15px 10px;
}
section.about .about-point-content .text {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: .22em;
    margin: 0 15px;
    color: #363636;
}

/* お悩み */
section.problem {
    max-width: 1000px;
    margin: auto;
}
section.problem .content h2 {
    font-size: 1.5rem;
    text-align: center;
    padding-bottom: 50px;
    line-height: 1.7;
    letter-spacing: .1em;
    font-family: AvenirLTPro-Black;
    color: #363636;
}
section.problem .content .problem-card {
    background-color: #FEF9F6;
    width: 100%;
    border-radius: 15px;
    padding: 50px 25px;
    margin: 0 auto 30px;
}
section.problem .content .problem-card h3 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 10px;
}
section.problem .content .problem-card .number {
    font-size: 4rem;
    color: #EB6F75;
    font-weight: 600;
}
section.problem .content .problem-card .percent {
    font-size: 2.2rem;
    color: #EB6F75;
    font-weight: 600;
}
section.problem .content .problem-card .title {
    font-size: 1.7rem;
    color: #EB6F75;
    font-weight: 600;
}
section.problem .content .problem-card p {
    color: #363636;
    line-height: 1.5;
    font-weight: 600;
    font-size: 1rem;
    margin: 10px auto 20px;
    letter-spacing: .22em;
}
section.problem .content .problem-card .problem-image {
    width: 100%;
}
section.problem .content .problem-card .problem-image3 {
    width: 70%;
}

section.problem .content .point-text {
    color: #363636;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0 15px;
}

/* YOLO PILL ONLINEの特徴 */
section.feature {
    max-width: 1000px;
    margin: auto;
}
section.feature .content {
    padding: 65px 25px 50px;
    margin: 0 auto;
    max-width: 1000px;
}
section.feature .content h2 {
    font-size: 1.5rem;
    text-align: center;
    padding-bottom: 50px;
    line-height: 1.7;
    letter-spacing: .1em;
    font-family: AvenirLTPro-Black;
    color: #363636;
}
.webp section.feature .content .feature-card1 { 
    background: url(/assets/yolopillonline/img/webp/feature1.webp) top center /cover no-repeat;
}
.no-webp section.feature .content .feature-card1 { 
    background: url(/assets/yolopillonline/img/feature1.png) top center /cover no-repeat;
}
section.feature .content .feature-card1 {
    position: relative;
    height: 280px;
    width: 100%;
    border-radius: 15px;
    margin: 0 auto;
}

.webp section.feature .content .feature-card2 { 
    background: url(/assets/yolopillonline/img/webp/feature2.webp) top center /cover no-repeat;
}
.no-webp section.feature .content .feature-card2 { 
    background: url(/assets/yolopillonline/img/feature2.png) top center /cover no-repeat;
}
section.feature .content .feature-card2 {
    position: relative;
    height: 280px;
    width: 100%;
    border-radius: 15px;
    margin: 0 auto;
    background-size: 130%;
}

.webp section.feature .content .feature-card3 { 
    background: url(/assets/yolopillonline/img/webp/feature3.webp) top center /cover no-repeat;
}
.no-webp section.feature .content .feature-card3 { 
    background: url(/assets/yolopillonline/img/feature3.png) top center /cover no-repeat;
}
section.feature .content .feature-card3 {
    position: relative;
    height: 280px;
    width: 100%;
    border-radius: 15px;
    margin: 0 auto;
}
section.feature .content h3 {
    font-size: 1.2rem;
    padding: 25px 15px 15px;
    line-height: 1.5;
    color: #363636;
}
section.feature .content p {
    font-size: 1rem;
    padding: 0 15px 30px;
    line-height: 1.5;
    color: #363636;
}

/* pill処方 */
section.pill {
    background-color: #FFF;
    position: relative;
    margin-bottom: -70px;
}

.webp section.pill .image-wrap { 
    background: url(/assets/yolopillonline/img/webp/bg-pill-sp.webp) top center /cover no-repeat;
}
.no-webp section.pill .image-wrap { 
    background: url(/assets/yolopillonline/img/bg-pill-sp.jpg) top center /cover no-repeat;
}
section.pill .image-wrap {
    min-height: 180px;
    background-color: #FFEDE8;
}
section.pill .content {
    background-color: rgba(255,255,255,0.8);
    text-align: center;
    padding: 30px 15px;
    margin: 15px;
    position: relative;
    top: -70px;
    min-height: 600px;
}
section.pill .content.pink {
    background-color: #EF959A;
    opacity: 0.93;
}
section.pill .content h2 {
    color: #EB6F75;
    font-size: 1.2em;
}
section.pill .content p {
    line-height: 1.9;
    text-align: left;
    font-size: 1rem;
}
.booking-btn {
    background-color: #EB6F75;
    color: #FFF;
    display: block;
    margin: 30px auto;
    padding: 1rem 0;
    text-align: center;
    max-width: 280px;
    border-radius: 50px;
}
.booking-btn:hover {
    opacity: 0.8;
    color: #FFF;
}
section.pill .content img {
    width: 40px;
}
section.pill .consultation-day {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #EBA096;
    padding: 20px 0;
}
section.pill .consultation-day b {
    word-break: break-all;
}
section.pill .consultation-time {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #EBA096;
    padding: 20px 0;
    margin-top: -1px;
}

/*ピルの定期プラン*/
section.plan .about {
    max-width: 900px;
    margin: auto;
}
section.plan h2 {
    border-bottom: 2px solid #535353;
    line-height: 2.5;
    font-size: 1.2rem;
}
section.plan p {
    padding: 15px 0;
    line-height: 1.5;
    font-size: 0.9rem;
}
section.plan small {
    font-size: 0.8rem;
}
section.plan .pink-box {
    border: 2px solid #EBA096;
    padding: 5px;
    font-size: 0.75rem;
    text-align: center;
    align-items: center !important;
    justify-content: center !important;
    display: flex !important;
    max-width: 80px;
    height: 65px;
    margin: 0 auto;
}
section.plan .gray-box {
    border: 1px solid #535353;
    font-size: 0.9rem;
    padding: 5px;
    color: #535353;
    width: 230px;
    margin: 0 auto 5px;
    background-color: #FFF;
    font-weight: 500;
}
section.plan .price-wrap {
    background-color: #F6F6F6;
    height: 100%;
    color: #EB6F75;
    text-align: center;
    padding: 30px 0;
}
section.plan .price-wrap .price {
    font-size: 60px;
    font-weight: 600;
    /* font: normal normal normal 70px/80px Bebas Kai; */
}
section.plan .price-wrap .tax {
    font-size: 1rem;
    float: left;
}
section.plan .price-wrap .yen {
    font-size: 1.5rem;
    float: left;
}
section.plan .comparison-wrap .triangle {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #FFF;
    margin: -20px auto 0;
}
section.plan .comparison-wrap {
    background-color: #FAE7D6;
    padding: 20px;
}
section.plan .comparison-wrap h5 {
    text-align: left;
    font-size: 0.9rem;
}
section.plan .content {
    max-width: 800px;
    margin: 50px auto;
}
section.plan .content .card {
    border-radius: 15px;
    border: 2px solid #EBA096;
    text-align: center;
    padding: 15px 10px;
    margin-bottom: 20px;
}
section.plan .content .card p {
    text-align: left;
    font-size: 0.8rem;
}
section.plan .content .card img {
    width: 60px;
    margin: 20px auto;
}
section.plan .content h4 {
    background-color: #EBA096;
    text-align: center;
    padding: 20px 0;
    color: #FFF;
    border-radius: 5px;
    margin: 25px 0px 20px;
    font-size: 0.9rem;
    font-weight: 400;
}
section.plan .content .price-list {
    padding: 0;
}
section.plan .content .price-list table {
    border: 4px solid #EBA096;
}
section.plan .content .price-list th {
    background-color: #FFEDE8;
    vertical-align: middle;
    max-width: 120px;
    height: 60px;
    color: #535353;
    font-weight: 500;
    font-size: 0.9rem;
    text-align: left;
}
section.plan .content .table-bordered td {
    border: 1px solid #D9D9D9!important;
    vertical-align: middle;
    background-color: #FFF;
    color: #878787;
    font-size: 0.9rem;
    padding: 15px;
}
section.plan .content .table-bordered td b {
    font-size: 0.9rem;
}
section.plan .content .table-bordered td img {
    width: 30px;
}
section.plan .content .value {
    color: #EBA096;
    font-weight: 600;
    text-align: center;
    margin-bottom: 15px;
    font-size: 1.2rem;
}
section.plan .content .value .price {
    font-size: 1.5rem;
}
section.plan .content p {
    padding: 10px 0 0;
    line-height: 1.6;
}

/*低用量ピル*/
section.oc {
    background-color: #EBADA4;
}
section.oc .pill-left {
    position: absolute;
    left: 10px;
    padding: 15px 0;
}
section.oc .pill-left img {
    width: 40px;
}
section.oc .pill-right {
    position: absolute;
    right: 10px;
    padding: 15px 0;
}
section.oc .pill-right img {
    width: 40px;
}
section.oc .content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 0 0px;
}
section.oc h2 {
    font-size: 1.2rem;
    color: #FFF;
    text-align: center;
}
section.oc p {
    padding: 25px 15px 30px;
    line-height: 1.5;
    font-size: 0.9rem;
    color: #FFF;
}
section.oc .more-btn,
section.oc .close-btn {
    background-color: #EB6F75;
    color: #FFF;
    width: 200px;
    padding: 15px;
    font-size: 0.9rem;
    margin: 15px auto;
    text-align: center;
}
section.oc .more-btn:hover,
section.oc .close-btn:hover {
    opacity: 0.8;
}
section.oc .js-accordion {
    background-color: #EBADA4;
}
section.oc .accordion-wrap {
    background-color: #FFF;
    padding: 5px 15px;
    margin: 15px 15px 30px;
}
section.oc .accordion-wrap h5 {
    font-size: 1rem;
    color: #EBADA4;
    border-left: 5px solid #EBADA4;
    padding: 5px 0px 5px 10px;
    margin-top: 20px;
}
section.oc .accordion-wrap p {
    padding: 20px 0 20px;
    line-height: 1.6;
    color: #535353;
}
section.oc .accordion-wrap p.underline {
    border-bottom: 1px solid #707070;
}
section.oc .oc-image {
    position: relative;
    left: 50%;
    bottom: -2px;
    width: 150px;
}
section.oc .list-head {
    font-size: 0.9rem;
    margin-bottom: 10px;
}

/* 医師紹介 */
.webp section.doctor .image-wrap { 
    background: url(/assets/yolopillonline/img/webp/bg-doctor-sp.webp) center /cover no-repeat;
}
.no-webp section.doctor .image-wrap { 
    background: url(/assets/yolopillonline/img/bg-doctor-sp.jpg) center /cover no-repeat;
}
section.doctor .image-wrap {
    position: relative;
    height: 100%;
    min-height: 300px;
}
section.doctor .content {
    background-color: rgba(0,0,0,0.52);
    padding: 30px 15px;
    height: 100%;
    width: 100%;
}
section.doctor .content h3 {
    font-size: 1.2rem;
    padding-bottom: 15px;
    border-bottom: 2px solid;
    color: #FFF;
}
section.doctor .content p {
    padding: 15px 0;
    color: #FFF;
    font-size: 0.9rem;
    line-height: 1.55;
}

/* オンライン診療の流れ */
section.step {
    background-color: #F6F6F6;
    padding: 0 0 50px;
    color: #777777;
}
section.step .content {
    max-width: 1000px;
    margin: 0 auto;
}
section.step h2 {
    text-align: center;
    padding: 50px 0 50px;
    font-size: 1.2rem;
}
section.step .card {
    text-align: center;
    padding: 10px;
    min-height: 250px;
    margin-bottom: 10px;
}
section.step .card .step {
    font-size: 1rem;
    font: normal normal bold 18px/24px Noto Sans CJK JP;
}
section.step .card img {
    width: 50px;
    height: 50px;
    margin: 15px auto;
}
section.step .card .title {
    font-size: 0.9rem;
    color: #535353;
    margin-bottom: 15px;
    font-weight: 500;
}
section.step .card p {
    color: #535353;
    text-align: left;
    line-height: 1.5;
    font-weight: 500;
    font-size: 0.9rem;
    border: unset;
}

section.step .preparation-wrap {
    background-color: #FFF;
    padding: 30px 0 50px;
    margin: 0 15px;
}
section.step .preparation-wrap .doctor-icon {
    width: 110px;
}
section.step .preparation-wrap h3 {
    color: #535353;
    border-bottom: 1px solid;
    padding: 25px 0 15px;
    margin: 0 auto;
    text-align: center;
    width: 70%;
}
section.step .preparation-wrap .text {
    color: #535353;
    font-size: 0.85rem;
    padding: 15px 0;
    line-height: 1.5;
}
section.step .preparation-wrap a {
    color: #535353;
    text-decoration: underline;
    font-size: 0.85rem;
}
section.step .preparation-wrap .text img {
    margin: -5px 5px;
}

/* ご利用料金 */
section.payment {
    background-color: #FFF;
    padding: 20px 0 100px;
    max-width: 900px;
    text-align: center;
    margin: 0 auto;
}
section.payment h2 {
    padding: 25px 0;
    font-size: 1.2rem;
}
section.payment p {
    padding-bottom: 30px;
    padding: 15px;
    font-size: 0.9rem;
}
section.payment .main-wrap {
    background-color: #FFF;
    padding-bottom: 20px;
}
section.payment .price-detail {
    margin: 15px auto 0;
}
section.payment .normal {
    background-color: #FAE7D6;
    padding: 5px;
    text-align: center;
}
section.payment .normal .price {
    color: #EBA096;
    padding: 10px 0 0px;
    font: normal normal normal 60px/70px Bebas Kai;
}
section.payment .normal .head {
    padding: 5px 0 10px;
    line-height: 1.6;
    font-size: 0.9rem;
}
section.payment .normal .price-detail .box {
    background-color: #F6F6F6;
    padding: 15px;
    height: 100%;
    line-height: 1.5;
    font-size: 0.9rem;
}
section.payment .price-free {
    padding: 15px;
}
section.payment .price-free .box {
    color: #FF3939;
    background-color: #FAE7D6;
    font-weight: 600;
    padding: 5px;
    align-items: center !important;
    justify-content: center !important;
    display: flex !important;
    line-height: 1.5;
    height: 70px;
    font-size: 0.9rem;
}
section.payment .regular {
    background-color: #EB6F75;
    padding: 5px;
    text-align: center;
}
section.payment .regular .price {
    padding: 10px 0 0px;
    color: #EB6F75;
    font: normal normal normal 60px/70px Bebas Kai;
}
section.payment .regular .head {
    padding: 5px 0 10px;
    line-height: 1.6;
    color: #FFF;
    font-size: 0.9rem;
}
section.payment .regular .head .emphasis {
    font-size: 1rem;
}
section.payment .regular .price-detail .box {
    background-color: #F6F6F6;
    padding: 15px;
    height: 100%;
    line-height: 1.5;
    font-size: 0.9rem;
    margin: auto 15px;
}

/* FAQ */
section.faq {
    background-color: #FFF7F5;
    padding-bottom: 50px;
}
section.faq h2 {
    padding: 45px 0;
    font-size: 1.2rem;
    text-align: center;
}
section.faq .content {
    padding: 5px 0px 90px;
    text-align: center;
    margin: 0 15px;
    background-color: #FFF;
    border-radius: 15px;
}
section.faq .accordion-group {
    max-width: 800px;
    margin: 25px 5px;
    text-align: left;
}
section.faq .accordion {
    box-shadow: none;
    padding: 10px 0px 5px;
    border-bottom: 1px dotted;
}
section.faq .accordion-content {
    color: #000;
    padding-left: 54px;
    font-weight: 500;
    font-size: 0.9rem;
}
section.faq .accordion-content a {
    color: #535353;
    text-decoration: underline;
}
section.faq .accordion-content a.medical {
    color: #00A4CE;
}
.accordion-title {
    color: #3A3A3A;
    font-weight: 400;
}
.accordion-title label {
    font-size: 0.9rem;
}
.accordion-title:before, .accordion-title:after {
    background: #EBA096;
}
.accordion.opened .accordion-title:before {
    background: #EBA096;
}
section.faq .more-btn {
    border: 1px solid #707070;
    color: #707070;
    border-radius: 15px;
    padding: 15px;
    position: relative;
    top: 30px;
}
section.faq .more-btn:hover {
    opacity: 0.8;
    background-color: #eeeeee;
}

/* ZOOM */
section.zoom {
    background-color: #F6F6F6;
    padding-bottom: 0px;
}
section.zoom .content {
    margin: 0 auto;
    max-width: 800px;
    text-align: center;
}
section.zoom h2 {
    padding: 45px 0 25px;
    font-size: 1.2rem;
    text-align: center;
}
section.zoom .zoom-image {
    width: 50px;
    margin-bottom: 15px;
}
section.zoom p {
    font-size: 0.8rem;
    padding: 0 15px 20px;
    line-height: 1.5;
}
section.zoom a {
    color: #535353;
    text-decoration: underline;
}
section.zoom a.medical {
    color: #00A4CE;
    text-decoration: underline;
}
section.zoom .dl-btn {
    background: #000000 0% 0% no-repeat padding-box;
    border-radius: 10px;
    color: #FFF;
    font-size: 0.8rem;
    width: 190px;
    text-decoration: unset;
    padding: 15px 0;
}
section.zoom .dl-btn:hover {
    opacity: 0.8;
}
section.zoom .appstore-btn {
    width: 190px;
    margin-bottom: 15px;
}
section.zoom .appstore-btn:hover {
    opacity: 0.8;
}
section.zoom .googleplay-btn {
    width: 190px;
}
section.zoom .googleplay-btn:hover {
    opacity: 0.8;
}
section.zoom .app-box {
    background-color: #FEF9F6;
    height: 100%;
    text-align: center;
    padding: 20px 0;
}
section.zoom .device-wrap {
    background-color: #FFF;
    padding: 10px;
    margin: 15px 15px 20px;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.5;
}
section.zoom .device-wrap h4 {
    text-align: center;
    padding: 15px 0 30px;
}
section.zoom .device-wrap a {
    color: #000;
    text-decoration: unset;
    font-size: 0.8rem;
}

/* シェア */
section.share {
    background-color: #F6F6F6;
    padding-bottom: 50px;
}
section.share .content {
    margin: 0 auto;
    padding: 0 15px;
}
section.share .content h4 {
    font-size: 1rem;
}
section.share .twitter-btn {
    color: #1CA2F1;
    background: #FFFFFF;
    border-radius: 43px;
    width: 200px;
    margin: 0 auto 20px;
    padding: 10px;
}
section.share .facebook-btn {
    color: #4267B2;
    background: #FFFFFF;
    border-radius: 43px;
    width: 200px;
    margin: 0 auto 20px;
    padding: 10px;
}
section.share .line-btn {
    color: #00B902;
    background: #FFFFFF;
    border-radius: 43px;
    width: 200px;
    margin: 0 auto 20px;
    padding: 10px;
}
section.share .twitter-btn:hover,
section.share .facebook-btn:hover,
section.share .line-btn:hover {
    opacity: 0.8;
}
section.share .icon {
    width: 30px;
}
/* section.share .link-wrap {
    text-align: left;
    position: relative;
    left: 25%;
    line-height: 2;
} */
section.share .link-wrap .left,
section.share .link-wrap .center,
section.share .link-wrap .right {
    text-align: center;
}

section.share a {
    color: #535353;
}

/* フッター */
.pill-footer .copyright {
    background: #FAE7D6;
    color: #000;
    font-size: 0.8rem;
    font-family: PROXIMA NOVA;
    font-weight:400;
}
.pill-footer .copyright .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    padding: 6px 15px;
    max-width: 1000px;
    font-size: 1rem;
}
.pill-footer .toggle-language {
    cursor: pointer;
    display: block;
    background-color: #FAE7D6;
    width: 48px;
    height: 48px;
    border: none;
    padding: 0;
    text-align: center;
    position: relative;
    top: 0px;
}

/* ご利用者様の声 */
section.user-voice {
    background-color: #EBADA4;
    padding-bottom: 70px;
}
section.user-voice .content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 70px 0 0px;
}
section.user-voice .card {
    background-color: #FFF;
    /* margin: 25px; */
    margin: 0 10px;
    border-radius: 15px;
    width: 95%!important;
}
section.user-voice h2 {
    font-size: 1.5rem;
    text-align: center;
    padding-bottom: 30px;
    line-height: 1.7;
    letter-spacing: .1em;
    font-family: AvenirLTPro-Black;
    color: #FFF;
}
section.user-voice .head {
    padding: 25px 0px 0px;
    line-height: 1.7;
    font-size: 1.2rem;
    color: #EB6F75;
    font-weight: 600;
    text-align: center;
}
section.user-voice p {
    padding: 15px;
    line-height: 1.7;
    font-size: 0.9rem;
    color: #363636;
    text-align: center;
}
.webp section.user-voice .card .user-voice1-sp { 
    background: url(/assets/yolopillonline/img/webp/user-voice1.webp) center /cover no-repeat;
}
.no-webp section.user-voice .card .user-voice1-sp { 
    background: url(/assets/yolopillonline/img/user-voice1.jpg) center /cover no-repeat;
}
section.user-voice .card .user-voice1-sp {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 15px;
}

.webp section.user-voice .card .user-voice2-sp { 
    background: url(/assets/yolopillonline/img/webp/user-voice2.webp) center /cover no-repeat;
}
.no-webp section.user-voice .card .user-voice2-sp { 
    background: url(/assets/yolopillonline/img/user-voice2.png) center /cover no-repeat;
}
section.user-voice .card .user-voice2-sp {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 15px;
}

.webp section.user-voice .card .user-voice3-sp { 
    background: url(/assets/yolopillonline/img/webp/user-voice3.webp) center /cover no-repeat;
}
.no-webp section.user-voice .card .user-voice3-sp { 
    background: url(/assets/yolopillonline/img/user-voice3.png) center /cover no-repeat;
}
section.user-voice .card .user-voice3-sp {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 15px;
}

.webp section.user-voice .card .user-voice4-sp { 
    background: url(/assets/yolopillonline/img/webp/user-voice4.webp) center /cover no-repeat;
}
.no-webp section.user-voice .card .user-voice4-sp { 
    background: url(/assets/yolopillonline/img/user-voice4.png) center /cover no-repeat;
}
section.user-voice .card .user-voice4-sp {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 15px;
}
.footer-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 110px;
    z-index: 2;
    background-color: rgba(0,0,0,0.7);
}
/*アニメーション要素のスタイル*/
.animation{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(30px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}


/* 低用量ピルについて */

section.triquilar {
    background-color: #FAE7D6;
}
section.triquilar .content {
    max-width: 800px;
    margin: 0 auto;
}
section.triquilar .content h2 {
    font-size: 1.5rem;
    text-align: center;
    padding: 50px 0 25px;
    line-height: 1.7;
    letter-spacing: .1em;
    font-family: AvenirLTPro-Black;
    color: #000;
}
section.triquilar .content p {
    font-size: 1.2rem;
    color: #000;
}
section.triquilar .content p b {
    font-size: 1.2rem;
}
section.triquilar .content .left-text-wrap {
    position: absolute;
    top: 15%;
    left: 15%;
    width: 200px;
    font-weight: 600;
}
section.triquilar .content .right-text-wrap {
    position: absolute;
    top: 15%;
    right: 0%;
    width: 200px;
    font-weight: 600;
}
section.triquilar .content .left-text-wrap.lower,
section.triquilar .content .right-text-wrap.lower {
    top: 25%;
}
section.triquilar .content .left-text-wrap small,
section.triquilar .content .right-text-wrap small
{
    font-weight: 600;
    line-height: 2.5;
}

.webp section.triquilar .generation-1 {
    background: url(/assets/yolopillonline/img/webp/generation1.webp) center /contain no-repeat;
}
.no-webp section.triquilar .generation-1 { 
    background: url(/assets/yolopillonline/img/generation1.png) center /contain no-repeat;
}
section.triquilar .generation-1 { 
    height: 200px;
    border-radius: 15px;
    position: relative;
    margin-bottom: -15px;
}

.webp section.triquilar .generation-2 { 
    background: url(/assets/yolopillonline/img/webp/generation2.webp) center /contain no-repeat;
}
.no-webp section.triquilar .generation-2 { 
    background: url(/assets/yolopillonline/img/generation2.png) center /contain no-repeat;
}
section.triquilar .generation-2 {
    height: 200px;
    border-radius: 15px;
    position: relative;
    margin-bottom: -15px;
}

.webp section.triquilar .generation-3 { 
    background: url(/assets/yolopillonline/img/webp/generation3.webp) center /contain no-repeat;
}
.no-webp section.triquilar .generation-3 { 
    background: url(/assets/yolopillonline/img/generation3.png) center /contain no-repeat;
}
section.triquilar .generation-3 { 
    height: 200px;
    border-radius: 15px;
    position: relative;
    margin-bottom: -15px;
}

.webp section.triquilar .generation-4 { 
    background: url(/assets/yolopillonline/img/webp/generation4.webp) center /contain no-repeat;
}
.no-webp section.triquilar .generation-4 { 
    background: url(/assets/yolopillonline/img/generation4.png) center /contain no-repeat;
}
section.triquilar .generation-4 { 
    height: 200px;
    border-radius: 15px;
    position: relative;
    margin-bottom: -15px;
}
section.triquilar h3 {
    color: #EB6F75;
    font-size: 1.2rem;
    margin-bottom: 20px;
}
section.triquilar .text-triquilar {
    color: #EB6F75;
    font-size: 1.2rem;
    font-weight: 600;
}

/* PC */
@media screen and (min-width: 764px){
    .pc { display:block; }
    .sp { display:none; }

    .hamburger-menu {
        width: 100%;
        margin: 0 auto;
    }
    .hamburger-menu .fixed {
        position: fixed;
        width: 100%;
        z-index: 5;
    }
    .hamburger-menu .pc {
        display: block;
        text-align: center;
    }
    .hamburger-menu .pc a {
        color: #535353;
        margin-right: 10px;
        position: relative;
        top: 20px;
        left: 40px;
        font-size: 0.9rem;
        font-weight: 600;
    }
    .hamburger-menu .pc .toggle-language {
        position: relative;
        top: 12px;
        float: right;
        right: 5%;
        background: rgba(0,0,0,0);
    }

    /* キービジュアル */
    section.key-visual .content {
        max-width: 60%;
    }
    section.key-visual .content .head {
        font-size: 2.5rem;
        margin-bottom: 30px;
    }

    /* アバウト */
    section.about .content {
        padding: 65px 0px 0px;
        margin: 0 auto;
        max-width: 1000px;
    }
    section.about .content h2 {
        font-size: 2rem;
        line-height: 1.7;
        letter-spacing: .1em;
        white-space: unset;
        max-width: 500px;
    }
    section.about h3 {
        font-size: 2.5rem;
        margin-bottom: 100px;
    }
    section.about .content p {
        font-size: 1rem;
    }
    .about-point-content .row {
        margin: 100px 0;
    }
    section.about .about-point-content .about-item1 {
        position: relative;
        height: 330px;
        width: 100%;
        margin: 0 auto;
        border-radius: 15px;
        padding: 12px;
    }
    section.about .about-point-content .about-item2 {
        position: relative;
        height: 330px;
        width: 100%;
        margin: 0 auto;
        border-radius: 15px;
        padding: 12px;
    }
    section.about .about-point-content .about-item3 {
        position: relative;
        height: 330px;
        width: 100%;
        margin: 0 auto;
        border-radius: 15px;
        padding: 12px;
    }
    section.about .about-point-content .yolo-pill-online-icon {
        width: 90%;
        margin: unset;
    }
    section.about .about-point-content .text {
        font-size: 1.6rem;
        font-weight: 600;
        line-height: 1.5;
        margin: unset;
    }

    /* お悩み */
    section.problem .content h2 {
        font-size: 2rem;
        text-align: center;
    }
    section.problem .content .problem-card {
        background-color: #FEF9F6;
        width: 100%;
        border-radius: 15px;
        padding: 50px;
        margin: 30px auto 10px;
    }
    section.problem .content .problem-card p {
        color: #363636;
        line-height: 1.5;
        margin-top: 10px;
        font-weight: 600;
    }
    section.problem .content .problem-card .problem-image {
        width: 100%;
    }
    section.problem .content .point-text {
        color: #363636;
        font-size: 0.9rem;
        text-align: right;
        font-weight: 600;
    }

    /* YOLO PILL ONLINEの特徴 */
    section.feature .content {
        padding: 65px 25px 100px;
    }

    /* PILL処方 */
    .webp section.pill { 
        background: url(/assets/yolopillonline/img/webp/bg-pill.webp) 30% 30% /cover no-repeat;
    }
    .no-webp section.pill { 
        background: url(/assets/yolopillonline/img/bg-pill.jpg) 30% 30% /cover no-repeat;
    }
    section.pill {
        position: relative;
        height: 100%;
        margin-bottom: 0;
    }
    section.pill .image-wrap {
        min-height: 823px;
        background: unset!important;
    }
    section.pill .content {
        background-color: rgba(255,255,255,0.8);
        text-align: center;
        padding: 30px 50px;
        width: 500px;
        margin: -823px auto 0;
        top: 0;
    }
    .booking-btn {
        background-color: #EB6F75;
        color: #FFF;
        display: block;
        margin: 30px auto;
        padding: 1rem 0;
        text-align: center;
        width: 70%;
        border-radius: 50px;
    }
    .booking-btn:hover {
        opacity: 0.8;
    }
    section.pill .content h2 {
        font-size: 1.5em;
    }
    section.pill .content.pink {
        background-color: #EF959A;
        opacity: 0.93;
        width: 100%;
    }
    section.pill .content.pink .card-body {
        width: 50%;
        margin: 0 auto;
    }
    section.pill .regular-plan {
        margin-top: 0;
    }
    section.pill .regular-plan .detail-btn {
        background-color: #D92933;
        color: #FFF;
        display: block;
        margin: 20px 0;
        padding: 1rem 0;
        text-align: center;
        width: 40%;
    }
    section.pill .consultation-day {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #EBA096;
        padding: 20px 0;
    }
    section.pill .consultation-time {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #EBA096;
        padding: 20px 0;
        margin-top: -1px;
    }
    section.pill .content img {
        width: 60px;
    }

    /*ピルの定期プラン*/
    section.plan .about {
        max-width: 900px;
        margin: 50px auto;
    }
    section.plan h2 {
        border-bottom: 2px solid #535353;
        line-height: 2.5;
        font-size: 1.5rem;
    }
    section.plan p {
        padding: 15px 0;
        line-height: 1.5;
        font-size: 1rem;
    }
    section.plan small {
        font-size: 0.8rem;
    }
    section.plan .pink-box {
        border: 2px solid #EBA096;
        padding: 5px;
        font-size: 0.75rem;
        text-align: center;
        align-items: center !important;
        justify-content: center !important;
        display: flex !important;
        max-width: 90px;
        height: 60px;
    }
    section.plan .gray-box {
        border: 1px solid #535353;
        font-size: 1rem;
        padding: 5px;
        color: #535353;
        width: 300px;
        margin-bottom: 5px;
        background-color: #FFF;
    }
    section.plan .price-wrap {
        background-color: #F6F6F6;
        height: 100%;
        color: #EB6F75;
        text-align: center;
        padding: 0;
    }
    section.plan .price-wrap .price {
        font-size: 80px;
        font-weight: 600;
        /* font: normal normal normal 109px/131px Bebas Kai; */
    }
    section.plan .price-wrap .tax {
        font-size: 1.2rem;
        float: unset;
    }
    section.plan .price-wrap .yen {
        font-size: 2rem;
        float: unset;
    }
    section.plan .comparison-wrap .triangle {
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 20px solid #FFF;
        margin: -20px auto 0;
    }
    section.plan .comparison-wrap {
        background-color: #FAE7D6;
        padding: 20px;
    }
    section.plan .comparison-wrap h5 {
        text-align: center;
        font-size: 1rem;
    }
    section.plan .content {
        max-width: 800px;
        margin: 50px auto;
    }
    section.plan .content .card {
        border-radius: 25px;
        border: 2px solid #EBA096;
        text-align: center;
        padding: 20px 15px;
        min-height: 300px;
    }
    section.plan .content .card p {
        text-align: left;
        font-size: 0.9rem;
    }
    section.plan .content .card img {
        width: 60px;
        margin: 25px auto 15px;
    }
    section.plan .content h4 {
        background-color: #EBA096;
        text-align: center;
        padding: 20px;
        color: #FFF;
        border-radius: 5px;
        margin: 40px 15px 25px;
    }

    section.plan .content .price-list {
        padding: 15px;
    }
    section.plan .content .price-list table {
        border: 4px solid #EBA096;
    }
    section.plan .content .price-list th {
       background-color: #FFEDE8;
       vertical-align: middle;
       max-width: 120px;
       height: 80px;
       color: #535353;
       font-weight: 500;
       font-size: 0.9rem;
    }
    section.plan .content .table-bordered td {
        border: 1px solid #D9D9D9!important;
        vertical-align: middle;
        background-color: #FFF;
        color: #878787;
        font-size: 0.9rem;
        padding: 15px;
    }
    section.plan .content .table-bordered td img {
        width: 30px;
    }
    section.plan .content .value {
        color: #EBA096;
        font-weight: 600;
        text-align: center;
        margin-bottom: 15px;
    }
    section.plan .content .value .price {
        font-size: 1.5rem;
    }
    section.plan .content p {
        padding: 15px 15px 0;
        line-height: 1.6;
    }

    /*ピルの定期プラン*/
    section.oc {
        background-color: #EBADA4;
    }
    section.oc .content {
        max-width: 1000px;
        margin: 0 auto -50px;
        padding: 40px 0 0px;
    }
    section.oc .pill-left {
        position: absolute;
        left: 20%;
        padding: 50px 0;
    }
    section.oc .pill-left img {
        width: 90%;
    }
    section.oc .pill-right {
        position: absolute;
        right: 20%;
        padding: 50px 0;
    }
    section.oc .pill-right img {
        width: 90%;
    }
    section.oc h2 {
        line-height: 2.5;
        font-size: 1.5rem;
        color: #FFF;
        text-align: center;
    }
    section.oc p {
        padding: 25px 200px 30px;
        line-height: 1.7;
        color: #FFF;
    }

    section.oc .more-btn,
    section.oc .close-btn {
        background-color: #EB6F75;
        color: #FFF;
        width: 250px;
        padding: 20px;
        font-size: 1rem;
        margin: 15px auto;
        text-align: center;
    }
    section.oc .more-btn:hover,
    section.oc .close-btn:hover {
        opacity: 0.8;
    }
    section.oc .js-accordion {
        background-color: #EBADA4;
    }
    section.oc .accordion-wrap {
        background-color: #FFF;
        padding: 80px 180px;
        margin: 15px auto 30px;
    }
    section.oc .accordion-wrap h5 {
        font-size: 1.1rem;
        color: #EBADA4;
        border-left: 5px solid #EBADA4;
        padding: 5px 0px 5px 10px;
        margin-top: 25px;
    }
    section.oc .accordion-wrap p {
        padding: 25px 0 30px;
        line-height: 1.7;
        color: #535353;
    }
    section.oc .accordion-wrap p.underline {
        border-bottom: 2px solid #707070;
    }
    section.oc .oc-image {
        position: relative;
        left: 70%;
        width: 240px;
        bottom: 48px;
    }

    /* 医師紹介 */
    section.doctor .image-wrap {
        background: unset!important;
    }
    section.doctor {
        position: relative;
        height: 100%;
        min-height: 480px;
        background: unset;
    }
    .webp section.doctor { 
        background: url(/assets/yolopillonline/img/webp/bg-doctor.webp) center /cover no-repeat;
    }
    .no-webp section.doctor { 
        background: url(/assets/yolopillonline/img/bg-doctor.jpg) center /cover no-repeat;
    }

    section.doctor .image-wrap {
        position: unset;
        height: unset;
        min-height: unset;
        background: unset;
    }
    section.doctor .content {
        background-color: rgba(0,0,0,0.52);
        padding: 50px 60px 0;
        min-height: 390px;
        position: relative;
        top: 12%;
        right: 15%;
        width: 700px;
    }
    section.doctor .content h3 {
        font-size: 1.5rem;
        padding-bottom: 15px;
        border-bottom: 2px solid;
        color: #FFF;
    }
    section.doctor .content p {
        padding: 15px 0;
        color: #FFF;
        line-height: 1.5;
        font-size: 1rem;
    }

    /* オンライン診療の流れ */
    section.step {
        background-color: #F6F6F6;
        padding: 50px 0 50px;
        color: #777777;
    }
    section.step .content {
        max-width: 1000px;
        margin: 0 auto;
    }
    section.step h2 {
        text-align: center;
        padding: 50px 0 50px;
        font-size: 1.5rem;
    }
    section.step .card {
        text-align: center;
        padding: 15px;
        min-height: 350px;
    }
    section.step .card .step {
        font-size: 1.2rem;
        padding: 5px 0;
    }
    section.step .card img {
        width: 118px;
        height: 118px;
        margin: 20px auto;
    }
    section.step .card .title {
        font-size: 1.2rem;
        color: #535353;
        margin-bottom: 15px;
        font-weight: 500;
    }
    section.step .card p {
        color: #535353;
        text-align: left;
        line-height: 1.5;
        font-weight: 500;
        font-size: 1rem;
    }
    section.step .preparation-wrap {
        background-color: #FFF;
        padding: 50px;
        margin: unset;
    }
    section.step .preparation-wrap .doctor-icon {
        width: 240px;
    }
    section.step .preparation-wrap h3 {
        color: #535353;
        border-bottom: 2px solid;
        padding: 15px 0;
        margin: unset;
        text-align: unset;
        width: unset;
    }
    section.step .preparation-wrap .text {
        color: #535353;
        font-size: 0.9rem;
        padding: 15px 0;
        line-height: 1.5;
    }
    section.step .preparation-wrap a {
        color: #535353;
        text-decoration: underline;
        font-size: 0.9rem;
    }
    section.step .preparation-wrap .text img {
        margin: -5px 5px;
    }

    /* ご利用料金 */
    section.payment {
        background-color: #FFF;
        padding: 20px 0 100px;
        max-width: 900px;
        text-align: center;
        margin: 0 auto;
    }
    section.payment h2 {
        padding: 50px 0 25px;
        font-size: 1.5rem;
    }
    section.payment p {
        padding-bottom: 50px;
    }
    section.payment .main-wrap {
        background-color: #FFF;
        padding-bottom: 20px;
    }
    section.payment .price-detail {
        margin: 30px auto 0;
    }
    section.payment .normal {
        background-color: #FAE7D6;
        padding: 5px;
        text-align: center;
    }
    section.payment .normal .price {
        color: #EBA096;
        padding: 20px 0 0px;
        font: normal normal normal 60px/70px Bebas Kai;
    }
    section.payment .normal .head {
        padding: 15px;
        line-height: 1.8;
    }
    section.payment .normal .price-detail .box {
        background-color: #F6F6F6;
        padding: 30px 15px;
        height: 100%;
        line-height: 1.5;
        font-size: 0.9rem;
    }
    section.payment .normal .price-free {
        padding: 15px;
    }
    section.payment .regular .price-free {
        padding: 15px 0px;
    }
    section.payment .price-free .box {
        color: #FF3939;
        background-color: #FAE7D6;
        font-weight: 600;
        padding: 30px 5px;
        align-items: center !important;
        justify-content: center !important;
        display: flex !important;
        line-height: 1.5;
        height: unset;
        font-size: 1rem;
    }

    section.payment .regular {
        background-color: #EB6F75;
        padding: 5px;
        text-align: center;
    }
    section.payment .regular .price {
        padding: 20px 0 0px;
        color: #EB6F75;
        font: normal normal normal 60px/70px Bebas Kai;
    }
    section.payment .regular .head {
        padding: 12px;
        line-height: 1.8;
        color: #FFF;
        font-weight: 600;
        font-size: 1rem;
    }
    section.payment .regular .head .emphasis {
        font-size: 1.2rem;
    }
    section.payment .regular .price-detail .box {
        background-color: #F6F6F6;
        padding: 28px 15px;
        height: 100%;
        line-height: 1.5;
        font-size: 0.9rem;
        margin: auto 15px;
    }

    /* FAQ */
    section.faq {
        background-color: #FFF7F5;
        padding-bottom: 100px;
    }
    section.faq h2 {
        padding: 70px 0 50px;
        font-size: 1.5rem;
        text-align: center;
    }
    section.faq .content {
        padding: 20px 0 120px;
        max-width: 1000px;
        text-align: center;
        margin: 0 auto;
        background-color: #FFF;
        border-radius: 25px;
    }
    section.faq .accordion-group {
        max-width: 800px;
        margin: 25px auto;
        text-align: left;
    }
    section.faq .accordion {
        box-shadow: none;
        padding: 15px 15px 5px;
        border-bottom: 1px dotted;
    }
    section.faq .accordion-content {
        color: #000;
        padding-left: 65px;
        font-weight: 500;
        font-size: 1rem;
    }
    .accordion-title {
        color: #3A3A3A;
        font-weight: 400;
    }
    .accordion-title label {
        font-size: 1rem;
    }
    .accordion-title:before, .accordion-title:after {
        background: #EBA096;
    }
    .accordion.opened .accordion-title:before {
        background: #EBA096;
    }
    section.faq .more-btn {
        border: 1px solid #707070;
        color: #707070;
        border-radius: 15px;
        padding: 20px 30px;
        position: relative;
        top: 50px;
    }
    section.faq .more-btn:hover {
        opacity: 0.8;
        background-color: #eeeeee;
    }

    /* ZOOM */
    section.zoom {
        background-color: #F6F6F6;
        padding-bottom: 50px;
    }
    section.zoom .content {
        margin: 0 auto;
        max-width: 800px;
        text-align: center;
    }
    section.zoom h2 {
        padding: 70px 0 50px;
        font-size: 1.5rem;
        text-align: center;
    }
    section.zoom .zoom-image {
        width: 70px;
        margin-bottom: 15px;
    }
    section.zoom a {
        color: #535353;
        text-decoration: underline;
    }
    section.zoom a.medical {
        color: #00A4CE;
        text-decoration: underline;
    }
    section.zoom .dl-btn {
        background: #000000 0% 0% no-repeat padding-box;
        border-radius: 11px;
        color: #FFF;
        font-size: 0.8rem;
        width: 200px;
        text-decoration: unset;
        padding: 15px 0;
        font-weight: 600;
    }
    section.zoom .dl-btn:hover {
        opacity: 0.8;
    }
    section.zoom .appstore-btn {
        width: 40%;
        height: 55px;
        margin-bottom: unset;
    }
    section.zoom .appstore-btn:hover {
        opacity: 0.8;
    }
    section.zoom .googleplay-btn {
        width: 44%;
        height: 55px;
    }
    section.zoom .googleplay-btn:hover {
        opacity: 0.8;
    }
    section.zoom .app-box {
        background-color: #FEF9F6;
        height: 100%;
        text-align: center;
        padding: 40px 0 30px;
    }
    section.zoom .device-wrap {
        background-color: #FFF;
        padding: 25px 50px;
        margin-bottom: 30px;
        text-align: left;
    }
    section.zoom .device-wrap a {
        color: #000;
        text-decoration: unset;
        font-size: 1rem;
    }

    /* フッター */
    .pill-footer .copyright {
        background: #FAE7D6;
        color: #000;
        font-size: 0.8rem;
    }
    .pill-footer .copyright .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        padding: 6px;
        max-width: 1000px;
    }
    .pill-footer .toggle-language {
        cursor: pointer;
        display: block;
        background-color: #FAE7D6;
        width: 48px;
        height: 48px;
        border: none;
        padding: 0;
        text-align: center;
        position: relative;
        top: 0px;
    }

    /* シェア */
    section.share .content {
        max-width: 800px;
    } 
    section.share .twitter-btn {
        color: #1CA2F1;
        background: #FFFFFF;
        border-radius: 43px;
        width: 230px;
        margin: 0 auto;
        padding: 15px;
    }
    section.share .facebook-btn {
        color: #4267B2;
        background: #FFFFFF;
        border-radius: 43px;
        width: 230px;
        margin: 0 auto;
        padding: 15px;
    }
    section.share .line-btn {
        color: #00B902;
        background: #FFFFFF;
        border-radius: 43px;
        width: 230px;
        margin: 0 auto;
        padding: 15px;
    }
    section.share .link-wrap .left {
        text-align: left;
    }

    section.share .link-wrap .right {
        text-align: right;
    }
    /* section.share .link-wrap {
        text-align: left;
        position: relative;
        left: 43%;
        line-height: 2;
    } */

    /* ご利用者様の声 */
    section.user-voice .card {
        background-color: #FFF;
        margin: 15px auto;
        border-radius: 15px;
        max-width: 750px;
        width: 100%!important;
        min-height: 330px;
    }
    section.user-voice .head {
        padding: 25px 30px 15px;
        text-align: left;
    }
    section.user-voice p {
        padding: 0 30px 15px;
        text-align: left;
    }
    .webp section.user-voice .card .user-voice1 { 
        background: url(/assets/yolopillonline/img/webp/user-voice1.webp) center /cover no-repeat;
    }
    .no-webp section.user-voice .card .user-voice1 { 
        background: url(/assets/yolopillonline/img/user-voice1.jpg) center /cover no-repeat;
    }
    section.user-voice .card .user-voice1 {
        min-height: 330px;
        height: 100%;
        width: 100%;
        border-radius: 0 15px 15px 0;
    }

    .webp section.user-voice .card .user-voice2 { 
        background: url(/assets/yolopillonline/img/webp/user-voice2.webp) center /cover no-repeat;
    }
    .no-webp section.user-voice .card .user-voice2 { 
        background: url(/assets/yolopillonline/img/user-voice2.png) center /cover no-repeat;
    }
    section.user-voice .card .user-voice2 {
        height: 330px;
        width: 100%;
        border-radius: 0 15px 15px 0;
    }

    .webp section.user-voice .card .user-voice3 { 
        background: url(/assets/yolopillonline/img/webp/user-voice3.webp) center /cover no-repeat;
    }
    .no-webp section.user-voice .card .user-voice3 { 
        background: url(/assets/yolopillonline/img/user-voice3.png) center /cover no-repeat;
    }
    section.user-voice .card .user-voice3 {
        height: 330px;
        width: 100%;
        border-radius: 0 15px 15px 0;
    }

    .webp section.user-voice .card .user-voice4 { 
        background: url(/assets/yolopillonline/img/webp/user-voice4.webp) center /cover no-repeat;
    }
    .no-webp section.user-voice .card .user-voice4 { 
        background: url(/assets/yolopillonline/img/user-voice4.png) center /cover no-repeat;
    }
    section.user-voice .card .user-voice4 {
        height: 330px;
        width: 100%;
        border-radius: 0 15px 15px 0;
    }
    section.triquilar .generation-1,
    section.triquilar .generation-2,
    section.triquilar .generation-3,
    section.triquilar .generation-4 {
        margin-bottom: unset;
    }
    section.triquilar .content .right-text-wrap {
        right: 5%;
    }
}

@media screen and (min-width: 481px) and (max-width: 1130px) {
    .hamburger-menu .fixed {
        position: unset;
        width: unset;
    }
    .hamburger-menu .pc {
        display: none;
    }
    /* .right-text {
        display: none;
    } */
    .hamburger-menu .sp {
        display: block;
    }
    /* .toggle-language {
        left: 100px;
    } */
}

.slick-active {
    text-align: center!important;
}