/*
Theme Name:Listing-Theme
Theme URI:
Author:Listing-Theme
Author URI:
Description:Listing-Theme
Version: 1.0
*/

/*--------------------------------
reset
--------------------------------*/
html,body,div,p,img,iframe,a,span,blockquote,q,address,cite,
pre,code,em,small,strong,b,i,
header,article,section,nav,figure,figcaption,hgroup,menu,aside,footer,time,
h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dt,dd,
table,tbody,thead,tfoot,th,tr,td,
form,fieldset,legend,label,select,input,textarea,button{
    margin: 0;
    padding: 0;
    border: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: baseline;
}
header,article,section,nav,figure,figcaption,hgroup,menu,aside,footer{
    display: block;
}
ul li{
    list-style-type: none;
}
h1,h2,h3,h4,h5,h6{
    font-weight: 500;
}
body{
    line-height: 1;
}
a{
    text-decoration: none;
}
img{
    vertical-align: middle;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}
select,option,input:not([type=checkbox]):not([type=radio]),textarea,button{
    font: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}
blockquote::before,blockquote::after,q::before,q::after{
    content: '';
    content: none;
}
[type=submit],[type=button],[type=reset],[type=file],button{
    cursor: pointer;
}
:focus{
    outline: none;
}

/*--------------------------------
base
--------------------------------*/
body{
    background: #850328;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: white;
}
h2,h3,h4,h5,h6{
    line-height: 1.3;
}
a{
    color: #29bbff;
}
img{
    max-width: 100%;
    height: auto;
}
.inner {
    margin: auto;
    max-width: 1000px;
}
.deep-red {
    background: url(images/bg.webp);
}
.light-red {
    background: url(images/pink-bg.webp) repeat-y top center / contain;
}
.deep-green {
    background: url(images/green-bg.webp);
}
.h2{
    margin-bottom: 28px;
    text-align: center;
    text-shadow: -3px -3px 0px #b3226a,-3px -2px 0px #b3226a,-3px -1px 0px #b3226a,-3px 0px 0px #b3226a,-3px 1px 0px #b3226a,-3px 2px 0px #b3226a,-3px 3px 0px #b3226a,-2px -3px 0px #b3226a,-2px 3px 0px #b3226a,-1px -3px 0px #b3226a,-1px 3px 0px #b3226a,0px -3px 0px #b3226a,0px 3px 0px #b3226a,1px -3px 0px #b3226a,1px 3px 0px #b3226a,2px -3px 0px #b3226a,2px 3px 0px #b3226a,3px -3px 0px #b3226a,3px -2px 0px #b3226a,3px -1px 0px #b3226a,3px 0px 0px #b3226a,3px 1px 0px #b3226a,3px 2px 0px #b3226a,3px 3px 0px #b3226a;
    font-size: 22px;
    font-weight: bold;
}
.h2-sub{
    margin-bottom: 24px;
    padding: 8px;
    background: #b3226a;
    border-radius: 16px;
    position: relative;
    text-align: center;
    font-weight: bold;
}
.h2-sub::after{
    width: 0;
    border: solid 12px transparent;
    border-top: solid 16px #b3226a;
    left: 0;
    right: 0;
    bottom: -28px;
}
.h3{
    font-size: 20px;
    font-weight: bold;
}
.h4,
.h5{
    font-size: 18px;
    font-weight: bold;
}
.pcbr{
    display: none;
}
.h2-sub::after,
.about .item .balloon::before,
.btn-box.back .btn::before,
.btn-box.back .btn::after,
.closing .item .h3::before,
.closing .item .btn::before,
.closing .item .btn::after,
.closing.pr .btn::before,
.closing.pr .btn::after{
    margin: auto;
    content: "";
    position: absolute;
}

/*--------------------------------
contents
--------------------------------*/
.hero{
    overflow: hidden;
}
.hero .inner{
    overflow: hidden;
}
.hero .main{
    background:
    url(images/woman1.webp) no-repeat top 24px left -16px / contain,
    url(images/woman2.webp) no-repeat top 24px right -32px / contain,
    url(images/hero-bg2.webp) no-repeat center / contain,
    url(images/hero-bg1.webp) no-repeat center / cover;
    position: relative;
}
.hero .main .text{
    padding: 4px 8px;
    display: inline-block;
    background: #860329;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
}
.hero .main .h1-sub{
    margin-bottom: 16px;
    padding: 36px 18% 0;
    text-align: center;
}
.hero .main .h1{
    padding: 0 56px 16px;
}
.hero .swiper-container {
    margin-bottom: 10px;
    position: relative;
}
.hero .swiper-slide{
    border: solid 4px white;
    line-height: 0;
}
.hero .swiper-container .swiper-pagination{
    position: relative;
    bottom: -5px;
}
.hero .swiper-container .swiper-pagination-bullet{
    background: white;
}
.hero .swiper-slide img{
    width: 100%;
}
.pickup {
    background: url(images/pickup-bg.webp) no-repeat center / cover;
}
.closing.pickup .inner {
    padding: 16px 16px 0;
}
.closing.pickup .h2 {
    margin-bottom: 16px;
}
.about .inner{
    padding: 32px 16px 0;
    overflow: hidden;
}
.about .box,
.closing .box{
    margin: 0 0 32px;
}
.about .item{
    margin-bottom: 24px;
    padding: 16px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 0 8px #b3226a;
    color: #1a1a1a;
}
.about .item .h3{
    margin-bottom: 16px;
    text-align: center;
    font-weight: bold;
    color: #1a1a1a;
}
.about .item .h3 .strong{
    color: #34B334;
}
.about .item .img-box{
    margin-bottom: -14px;
    overflow: hidden;
}
.about .item:nth-of-type(1) .img-box{
    height: 220px;
    background: url(images/about-bg1.webp) no-repeat top right / 190px;
}
.about .item:nth-of-type(2) .img-box{
    height: 200px;
    background: url(images/about-bg2.webp) no-repeat top left / 160px;
    position: relative;
}
.about .item:nth-of-type(2) .img-box img{position: absolute;right: 0;}
.about .item .balloon{
    padding: 12px;
    background: #34B334;
    border-radius: 16px;
    position: relative;
    color: #fff;
}
.about .item .balloon::before{
    width: 0;
    height: 0;
    border: solid 12px transparent;
    border-bottom: solid 16px #34b334;
    top: -27px;
    left: 0;
    right: 0;
}
.about .item:nth-of-type(1) .balloon::before{
    left: -60%;
}
.about .item:nth-of-type(2) .balloon::before{
    right: -60%;
}
.about .balloon .strong {
    color: yellow;
}
.about .table-wrap{
    padding: 16px 16px 0;
    background: white;
    border-radius: 16px;
    box-shadow: 0 0 8px #b3226a;
    overflow: hidden;
    position: relative;
}
.about .scroll-hand{
    margin: auto;
    width: 120px;
    height: 100px;
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,0.5);
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
}
.about .scroll-hand .img-box{
    flex: 1;
    position: relative;
}
.about .scroll-hand img{
    margin: auto;
    width: 80px;
    animation: hand_animation 3s ease-in-out infinite;
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translateX(32px);
    opacity: 0;
}
@keyframes hand_animation{
    0%{
        transform: translateX(36px);
        opacity: 0;
    }
    50%{
        transform: translateX(22px);
        opacity: 1;
    }
    100%{
        transform: translateX(8px);
        opacity: 0;
    }
}
.about .scroll-hand .text{
    padding: 0 10px 10px;
    text-align: center;
    color: white;
}
.about .table-box {
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: auto;
}
.about .table-box .table{
    margin: 0;
    border-spacing: 0;
}
.about .table-box tr:first-child th:first-child{
    z-index: 1;
}
.about .table-box .th,
.about .table-box .td{
    padding: 8px;
    vertical-align: middle;
}
.about .table-box .th{
    background: #b9417c;
    border: solid 1px #ffffff;
    position: sticky;
    top: 0;
    left: 0;
    white-space: nowrap;
}
.about .th .text{
    display: block;
    font-size: 14px;
}
.about .table-box .td{
    background: #ffd2df;
    border: solid 1px #ffffff;
    white-space: nowrap;
    color: #1a1a1a
}
.about .table-box .strong{
    background: #34b334;
}
.about .table-box .td.strong{
    background: #baffba;
}
.about .table-box .img{
    margin: auto auto 4px;
    width: 30px;
    display: block;
}
.about .td .mark,
.about .td .text{
    display: block;
    text-align: center;
}
.about .td .mark{
    font-size: 20px;
}
.about .td.strong .mark{
    color: #b9417c;
}
.about .td .text{
    font-size: 14px;
}
.about .box:nth-child(3) .h2{
    margin-bottom: 8px;
}
.about .caution{
    margin-bottom: 16px;
    text-shadow: -2px -2px 0px #fff,-2px -1px 0px #fff,-2px 0px 0px #fff,-2px 1px 0px #fff,-2px 2px 0px #fff,-1px -2px 0px #fff,-1px 2px 0px #fff,0px -2px 0px #fff,0px 2px 0px #fff,1px -2px 0px #fff,1px 2px 0px #fff,2px -2px 0px #fff,2px -1px 0px #fff,2px 0px 0px #fff,2px 1px 0px #fff,2px 2px 0px #fff;
    color: #b3226a;
}
.about .ul .li{
    margin: 0 0 16px 0;
}
.about .ul .li-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.about .li .strong,
.closing .strong{
    background: linear-gradient(transparent 60%, #ff6 60%);
}
.about .ul .li:last-child{
    margin: auto;
}
.about .item:nth-of-type(1) .li .img-box {
    padding: 0;
    height: auto;
    background: none;
}
.about .ul .li .img-box{
    margin: 0 16px 0 0;
    width: 50px;
    display: block;
}
.about .ul .li .text{
    flex: 1;
}
.closing .inner{
    padding: 32px 16px 0;
    overflow: hidden;
}
.closing .h2{
    text-shadow: -3px -3px 0px #3f0113,-3px -2px 0px #3f0113,-3px -1px 0px #3f0113,-3px 0px 0px #3f0113,-3px 1px 0px #3f0113,-3px 2px 0px #3f0113,-3px 3px 0px #3f0113,-2px -3px 0px #3f0113,-2px 3px 0px #3f0113,-1px -3px 0px #3f0113,-1px 3px 0px #3f0113,0px -3px 0px #3f0113,0px 3px 0px #3f0113,1px -3px 0px #3f0113,1px 3px 0px #3f0113,2px -3px 0px #3f0113,2px 3px 0px #3f0113,3px -3px 0px #3f0113,3px -2px 0px #3f0113,3px -1px 0px #3f0113,3px 0px 0px #3f0113,3px 1px 0px #3f0113,3px 2px 0px #3f0113,3px 3px 0px #3f0113;
}
.closing .item {
    margin-bottom: 24px;
    padding: 16px 16px 0;
    background: white;
    border-radius: 16px;
    box-shadow: 0 0 8px #000000;
    overflow: hidden;
    color: #1a1a1a;
}
.closing .item .h3{
    margin-bottom: 16px;
    padding: 12px;
    background: #8b0f32;
    border-radius: 8px;
    position: relative;
    text-align: center;
    color: #ffffff;
}
.closing .item .h3::before{
    border: solid 1px #ffffff;
    border-radius: 4px;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
}
.closing .item .h4{
    margin: 24px 0 16px;
    padding: 0 0 0 54px;
    min-height: 45px;
    display: flex;
    align-items: center;
    background: url(images/h4-icon.webp) no-repeat left center / 40px;
    color: #8b0f32;
}
.closing .item a{
    display: block;
}
.closing .item .img-box {
    margin-bottom: 16px;
}
.closing .item .img-box.sp img{
    margin-bottom: 16px;
    object-fit: contain;
}
.closing .item .img-box.sp img:last-child{
    margin-bottom: 0;
}
.closing .item .img-box.pc{
    display: none;
}
.closing .item .img-box img{
    width: 100%;
    object-fit: contain;
}
.closing .video-box{
    margin-bottom: 16px;
    line-height: 0;
}
.closing .table{
    margin: 0 -1px 16px;
    width: calc(100% + 2px);
}
.closing .table .th,
.closing .table .td{
    padding: 8px;
    border: solid 1px white;
}
.closing .table .th{
    width: 40%;
    background: #b9417c;
    vertical-align: middle;
    color: white;
}
.closing .table .td{
    width: 60%;
    background: #baffba;
}
.closing .item .text{
    margin-bottom: 16px;
}
.closing .item .btn-box{
    margin: 24px 0;
}
.closing .item .btn,
.closing.pr .btn,
.btn-box.back .btn{
    margin: 0 0 16px;
    padding: 9px 45px 9px 16px;
    display: block;
    background: -webkit-linear-gradient(top, rgba(249,251,50,1) 0%,rgba(254,164,8,1) 100%);
    background: linear-gradient(to bottom, rgba(249,251,50,1) 0%,rgba(254,164,8,1) 100%);
    border: solid 4px #1a1a1a;
    border-radius: 16px;
    position: relative;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #1a1a1a;
}
.closing.pr .btn{
    padding: 17px 57px 17px 16px;
    background: -webkit-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(229,229,229,1) 100%);
    background: linear-gradient(to bottom, rgba(240,249,255,1) 0%,rgba(229,229,229,1) 100%);
    font-size: inherit;
}
.closing .item .btn::before,
.closing .item .btn::after,
.btn-box.back .btn::before,
.btn-box.back .btn::after,
.closing.pr .btn::before,
.closing.pr .btn::after{
    top: 0;
    bottom: 0;
}
.btn-box.back .btn::before,
.closing .item .btn::before,
.closing.pr .btn::before{
    width: 30px;
    height: 30px;
    background: #1a1a1a;
    border-radius: 30px;
    right: 16px;
}
.btn-box.back .btn::after,
.closing .item .btn::after,
.closing.pr .btn::after{
    height: 0;
    border: solid 8px transparent;
    border-left: solid 12px #fbd01d;
    right: 15px;
}
.closing.pr .btn::after{
    border-left: solid 12px #eaeff2;
    right: 15px;
}
.closing .item .btn.detail {
    background: linear-gradient(to bottom, rgb(110 255 110) 0%,rgb(46 187 46) 100%);
}
.closing .item .btn.detail::after {
    border-left: solid 12px #4ddc4d;
}
.closing .item .banner{
    margin: 0 0 16px;
    display: block;
}
.closing .item .banner img{
    width: 100%;
}
.closing .li.item{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.closing .li.item .img-box{
    margin-right: 16px;
    padding-top: 0;
    width: 80px;
}
.closing .li.item .text{
    flex: 1;
}
.closing .text .bold{
    font-weight: bold;
}
.closing .text .yellow-line{
    background: linear-gradient(transparent 60%, #ff6 60%);
}
.closing .text .red-line{
    background: linear-gradient(transparent 60%, #ffc2c2 60%);
}
.closing .text .red{
    color: #ec3d93;
}
.closing.pr .item {
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
}
.closing.pr .item .text {
    margin-bottom: 0;
    text-align: left;
    font-weight: normal;
}
.closing.pr .li.item .img-box {
    margin-right: 16px;
    margin-bottom: 0;
}
.closing.pr .item .img-box img {
    max-height: 80px;
}
.hero.ntop .main .h1 {
    padding: 16px;
}
.hero.ntop .main {
    background: url(images/woman1.webp) no-repeat top -10px left -2px / 140px, url(images/woman2.webp) no-repeat top -6px right -10px / 140px, url(images/hero-bg2.webp) no-repeat center / contain, url(images/hero-bg1.webp) no-repeat center / cover;
}
.closing .item .h4.another {
    margin: 24px 0 0;
    padding: 12px 12px 12px 52px;
    min-height: inherit;
    background: url(images/point-icon4.webp) no-repeat left 16px center / 24px,#b9417c;
    border-radius: 16px 16px 0 0;
    color: white;
}
.closing .point-box .h4.another {
    margin: 24px 0 -1px;
}
.closing.detail .item .ul{
    padding: 12px 12px 0;
    border: double 4px #b9417c;
}
.closing.detail .item .img-box {
    margin-bottom: 16px;
}
.closing.detail .point-box {
    margin-bottom: 16px;
}
.closing.detail .point-box .li {
    margin-bottom: 12px;
    display: flex;
}
.closing.detail .point-box .li .text {
    margin: 0;
    padding-top: 8px;
    flex: 1;
}
.closing.detail .point-box .li .num {
    margin-right: 8px;
    padding: 2px 12px;
    height: 37px;
    background: #b9417c;
    border-radius: 8px;
    font-size: 24px;
    font-weight: bold;
    color: white;
}
.btn-box.back {
    padding: 0 16px;
}
.btn-box.back .btn {
    margin: 0;
    padding: 9px 16px 9px 45px;
    border: solid 4px #ffffff;
    background: none;
    color: white;
}
.btn-box.back .btn::before {
    background: none;
    border: solid 2px white;
    left: 16px;
    right: inherit;
}
.btn-box.back .btn::after {
    border-left: none;
    border-right: solid 12px #ffffff;
    left: 26px;
    right: inherit;
}
.footer{
    padding: 16px 16px 8px;
    background: #1a1a1a;
    text-align: center;
    font-size: 14px;
}
.footer .text{
    margin-bottom: 8px;
    color: white;
}
.footer .text:last-child{
    font-size: 12px;
    color: #bababa;
}

/*--------------------------------
tablet
--------------------------------*/
@media (min-width: 600px){
    body{
        font-size: 24px;
    }
    .hero .main{
        background:
        url(images/woman1.webp) no-repeat top 24px left -24px / contain,
        url(images/woman2.webp) no-repeat top 24px right -40px / contain,
        url(images/hero-bg2.webp) no-repeat center / contain,
        url(images/hero-bg1.webp) no-repeat center / cover;
        position: relative;
    }
    .h2 {
        margin-bottom: 60px;
        text-shadow: -4px -4px 0px #b3226a,-4px -3px 0px #b3226a,-4px -2px 0px #b3226a,-4px -1px 0px #b3226a,-4px 0px 0px #b3226a,-4px 1px 0px #b3226a,-4px 2px 0px #b3226a,-4px 3px 0px #b3226a,-4px 4px 0px #b3226a,-3px -4px 0px #b3226a,-3px 4px 0px #b3226a,-2px -4px 0px #b3226a,-2px 4px 0px #b3226a,-1px -4px 0px #b3226a,-1px 4px 0px #b3226a,0px -4px 0px #b3226a,0px 4px 0px #b3226a,1px -4px 0px #b3226a,1px 4px 0px #b3226a,2px -4px 0px #b3226a,2px 4px 0px #b3226a,3px -4px 0px #b3226a,3px 4px 0px #b3226a,4px -4px 0px #b3226a,4px -3px 0px #b3226a,4px -2px 0px #b3226a,4px -1px 0px #b3226a,4px 0px 0px #b3226a,4px 1px 0px #b3226a,4px 2px 0px #b3226a,4px 3px 0px #b3226a,4px 4px 0px #b3226a;
        font-size: 36px;
    }
    .h2-sub {
        margin-bottom: 40px;
        padding: 16px;
        border-radius: 32px;
    }
    .h2-sub::after {
        border: solid 20px transparent;
        border-top: solid 28px #b3226a;
        bottom: -48px;
    }
    .h3{
        font-size: 32px;
    }
    .h4,
    .h5{
        font-size: 28px;
    }
    .hero .main .h1-sub {
        margin-bottom: 32px;
        padding: 44px 16% 0;
    }
    .hero .main .text {
        padding: 4px 12px;
        font-size: 20px;
    }
    .hero .main .h1 {
        padding: 0 32px 32px;
    }
    .hero .swiper-container {
        margin-bottom: 28px;
    }
    .hero .swiper-slide {
        border: solid 8px white;
    }
    .hero .swiper-container .swiper-pagination-bullet {
        margin: 0 8px;
        width: 16px;
        height: 16px;
    }
    .hero .swiper-container .swiper-pagination {
        bottom: -10px;
    }
    .closing.pickup .inner {
        padding: 32px 32px 0;
    }
    .closing.pickup .h2 {
        margin-bottom: 32px;
    }
    .about .inner {
        padding: 64px 32px 0;
    }
    .about .item {
        margin-bottom: 48px;
        padding: 32px;
        border-radius: 32px;
        box-shadow: 0 0 16px #b3226a;
    }
    .about .item .h3 {
        margin-bottom: 32px;
    }
    .about .item:nth-of-type(1) .img-box {
        height: 300px;
        background: url(images/about-bg1.webp) no-repeat top right / 240px;
    }
    .about .item:nth-of-type(2) .img-box {
        height: 300px;
        background: url(images/about-bg2.webp) no-repeat top left / 240px;
    }
    .about .item .balloon {
        padding: 24px;
    }
    .about .item .balloon::before {
        border: solid 20px transparent;
        border-bottom: solid 32px #34b334;
        top: -52px;
    }
    .about .table-wrap {
        padding: 32px 32px 0;
        border-radius: 32px;
        box-shadow: 0 0 16px #b3226a;
    }
    .about .box, .closing .box {
        margin: 0 0 64px;
    }
    .about .table-box {
        margin-bottom: 32px;
        border-radius: 16px;
    }
    .about .table-box .th {
        border: solid 2px #ffffff;
    }
    .about .table-box .th,
    .about .table-box .td {
        padding: 12px;
    }
    .about .table-box .img {
        margin: auto auto 8px;
        width: 40px;
    }
    .about .th .text {
        font-size: 20px;
    }
    .about .table-box .td {
        border: solid 2px #ffffff;
    }
    .about .td .mark {
        font-size: 30px;
    }
    .about .td .text {
        font-size: 20px;
    }
    .about .scroll-hand {
        width: 180px;
        height: 140px;
        border-radius: 10px;
    }
    .about .scroll-hand img {
        width: 100px;
        transform: translateX(60px);
    }
    @keyframes hand_animation{
        0%{
            transform: translateX(60px);
            opacity: 0;
        }
        50%{
            transform: translateX(40px);
            opacity: 1;
        }
        100%{
            transform: translateX(20px);
            opacity: 0;
        }
    }
    .about .box:nth-child(3) .h2 {
        margin-bottom: 16px;
    }
    .about .caution {
        margin-bottom: 48px;
        text-shadow: -4px -4px 0px #fff,-4px -3px 0px #fff,-4px -2px 0px #fff,-4px -1px 0px #fff,-4px 0px 0px #fff,-4px 1px 0px #fff,-4px 2px 0px #fff,-4px 3px 0px #fff,-4px 4px 0px #fff,-3px -4px 0px #fff,-3px 4px 0px #fff,-2px -4px 0px #fff,-2px 4px 0px #fff,-1px -4px 0px #fff,-1px 4px 0px #fff,0px -4px 0px #fff,0px 4px 0px #fff,1px -4px 0px #fff,1px 4px 0px #fff,2px -4px 0px #fff,2px 4px 0px #fff,3px -4px 0px #fff,3px 4px 0px #fff,4px -4px 0px #fff,4px -3px 0px #fff,4px -2px 0px #fff,4px -1px 0px #fff,4px 0px 0px #fff,4px 1px 0px #fff,4px 2px 0px #fff,4px 3px 0px #fff,4px 4px 0px #fff;
    }
    .about .ul .li {
        margin: 0 0 32px 0;
    }
    .about .ul .li .img-box {
        margin: 0 32px 0 0;
        width: 100px;
    }
    .closing .inner {
        padding: 64px 32px 0;
    }
    .closing .h2 {
        text-shadow: -4px -4px 0px #3f0113,-4px -3px 0px #3f0113,-4px -2px 0px #3f0113,-4px -1px 0px #3f0113,-4px 0px 0px #3f0113,-4px 1px 0px #3f0113,-4px 2px 0px #3f0113,-4px 3px 0px #3f0113,-4px 4px 0px #3f0113,-3px -4px 0px #3f0113,-3px 4px 0px #3f0113,-2px -4px 0px #3f0113,-2px 4px 0px #3f0113,-1px -4px 0px #3f0113,-1px 4px 0px #3f0113,0px -4px 0px #3f0113,0px 4px 0px #3f0113,1px -4px 0px #3f0113,1px 4px 0px #3f0113,2px -4px 0px #3f0113,2px 4px 0px #3f0113,3px -4px 0px #3f0113,3px 4px 0px #3f0113,4px -4px 0px #3f0113,4px -3px 0px #3f0113,4px -2px 0px #3f0113,4px -1px 0px #3f0113,4px 0px 0px #3f0113,4px 1px 0px #3f0113,4px 2px 0px #3f0113,4px 3px 0px #3f0113,4px 4px 0px #3f0113;
    }
    .closing .item {
        margin: 0 0 48px;
        padding: 32px 32px 0;
        border-radius: 32px;
        box-shadow: 0 0 16px #000000;
    }
    .closing .item .h3 {
        margin-bottom: 32px;
        padding: 20px;
        border-radius: 16px;
    }
    .closing .item .h3::before {
        border-radius: 12px;
        top: 8px;
        left: 8px;
        right: 8px;
        bottom: 8px;
    }
    .closing .item .h4 {
        margin: 40px 0 24px;
        padding: 0 0 0 80px;
        min-height: 72px;
        background: url(images/h4-icon.webp) no-repeat left center / 64px;
    }
    .closing .item .img-box {
        margin-bottom: 32px;
    }
    .closing .item .text {
        margin-bottom: 32px;
    }
    .closing .item .btn-box {
        margin: 48px 0;
    }
    .closing .item .btn {
        margin-bottom: 32px;
        padding: 16px 63px 16px 32px;
        border: solid 6px #1a1a1a;
        font-size: 36px;
    }
    .closing .item .btn::before,
    .closing.pr .btn::before{
        width: 40px;
        height: 40px;
        border-radius: 40px;
        right: 24px;
    }
    .closing .item .btn::after,
    .closing.pr .item .btn::after{
        border: solid 10px transparent;
        border-left: solid 16px #fccf1d;
        right: 24px;
    }
    .closing.pr .item .btn::after{
        border-left: solid 16px #fff;
    }
    .closing .li.item .img-box {
        margin-right: 24px;
        width: 100px;
    }
    .closing .item .img-box.sp img {
        margin-bottom: 32px;
    }
    .closing .video-box {
        margin-bottom: 32px;
    }
    .closing .item .h4.another {
        margin: 32px 0 0;
        padding: 20px 20px 20px 76px;
        background: url(images/point-icon4.webp) no-repeat left 16px center / 44px,#b9417c;
        border-radius: 16px 16px 0 0;
    }
    .hero.ntop .main {
        background: url(images/woman1.webp) no-repeat top -10px left -2px / 220px, url(images/woman2.webp) no-repeat top -6px right -10px / 220px, url(images/hero-bg2.webp) no-repeat center / contain, url(images/hero-bg1.webp) no-repeat center / cover;
    }
    .hero.ntop .main .h1 {
        padding: 32px;
    }
    .closing .table .th,
    .closing .table .td {
        padding: 16px;
        border: solid 2px white;
    }
    .closing .table {
        margin: 0 -2px 32px;
        width: calc(100% + 4px);
    }
    .closing.detail .item .img-box {
        margin-bottom: 32px;
    }
    .closing.detail .point-box {
        margin-bottom: 32px;
    }
    .closing.detail .item .ul {
        padding: 24px 24px 0;
        border: double 8px #b9417c;
    }
    .closing .point-box .h4.another {
        margin: 32px 0 -3px;
    }
    .closing.detail .point-box .li {
        margin-bottom: 24px;
    }
    .closing.detail .point-box .li .num {
        margin-right: 16px;
        padding: 4px 18px;
        height: 53px;
        border-radius: 16px;
        font-size: 32px;
    }
    .closing.detail .point-box .li .text {
        padding-top: 10px;
    }
    .closing .item .btn.detail::after {
        border-left: solid 16px #4ddc4d;
    }
    .closing.pr .item .img-box img {
        max-height: 100px;
    }
    .closing.pr .btn {
        margin: 0 0 32px;
        padding: 17px 79px 17px 16px;
    }
    .closing.pr .btn::after{
        border-left: solid 14px #eaeff2;
        right: 27px;
    }
    .btn-box.back {
        padding: 0 32px;
    }
    .btn-box.back .btn {
        padding: 16px 32px 16px 63px;
        border: solid 6px #ffffff;
        font-size: 36px;
    }
    .btn-box.back .btn::before{
        width: 40px;
        height: 40px;
        border-radius: 40px;
        left: 22px;
    }
    .btn-box.back .btn::after{
        border: solid 10px transparent;
        border-right: solid 16px #ffffff;
        left: 24px;
    }
    .footer {
        padding: 32px;
        font-size: 20px;
    }
    .footer .text:last-child {
        font-size: 16px;
    }
}
@media (min-width: 768px){
    body{
        font-size: 28px;
    }
    .hero .main{
        background:
        url(images/woman1.webp) no-repeat top 24px left -32px / contain,
        url(images/woman2.webp) no-repeat top 24px right -48px / contain,
        url(images/hero-bg2.webp) no-repeat center / contain,
        url(images/hero-bg1.webp) no-repeat center / cover;
        position: relative;
    }
    .h2{
        font-size: 40px;
    }
    .h3{
        font-size: 36px;
    }
    .h4,
    .h5{
        font-size: 32px;
    }
    .about .item:nth-of-type(1) .img-box {
        height: 440px;
        background: url(images/about-bg1.webp) no-repeat top right / 380px;
    }
    .about .item:nth-of-type(2) .img-box {
        height: 440px;
        background: url(images/about-bg2.webp) no-repeat top left / 370px;
    }
    .about .scroll-hand {
        width: 220px;
        height: 160px;
    }
    .about .scroll-hand img {
        width: 120px;
    }
    @keyframes hand_animation{
        0%{
            transform: translateX(80px);
            opacity: 0;
        }
        50%{
            transform: translateX(50px);
            opacity: 1;
        }
        100%{
            transform: translateX(20px);
            opacity: 0;
        }
    }
    .about .th .text {
        font-size: 24px;
    }
    .about .td .mark {
        font-size: 38px;
    }
    .about .td .text {
        font-size: 24px;
    }
    .closing .item .btn {
        padding: 16px 81px 16px 42px;
        font-size: 40px;
    }
    .closing .item .btn::before,
    .closing.pr .btn::before{
        width: 50px;
        height: 50px;
        border-radius: 50px;
        right: 32px;
    }
    .closing .item .btn::after,
    .closing.pr .btn::after{
        border: solid 12px transparent;
        border-left: solid 20px #fccf1d;
        right: 32px;
    }
    .closing.pr .btn::after{
        border-left: solid 20px #eaeff2;
    }
    .closing .li.item .img-box {
        width: 110px;
    }
    .closing.pr .item .img-box img {
        max-height: 110px;
    }
    .closing .item .btn.detail::after {
        border-left: solid 20px #4ddc4d;
    }
    .btn-box.back .btn {
        padding: 16px 42px 16px 81px;
        font-size: 40px;
    }
    .btn-box.back .btn::before {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        left: 32px;
    }
    .btn-box.back .btn::after {
        border: solid 12px transparent;
        border-right: solid 20px #ffffff;
        left: 34px;
    }
    .footer {
        font-size: 24px;
    }
    .footer .text:last-child {
        font-size: 20px;
    }
}
@media (min-width: 900px){
    body{
        font-size: 32px;
    }
    .h2{
        font-size: 54px;
    }
    .h3{
        font-size: 40px;
    }
    .h4,
    .h5{
        font-size: 32px;
    }
    .about .item:nth-of-type(1) .img-box {
        height: 500px;
        background: url(images/about-bg1.webp) no-repeat top right / 380px;
    }
    .about .item:nth-of-type(2) .img-box {
        height: 500px;
        background: url(images/about-bg2.webp) no-repeat top left / 370px;
    }
    .about .scroll-hand {
        width: 240px;
        height: 180px;
    }
    .about .scroll-hand img {
        width: 140px;
    }
    .about .th .text {
        font-size: 28px;
    }
    .about .td .mark {
        font-size: 46px;
    }
    .about .td .text {
        font-size: 28px;
    }
    .closing .item .btn {
        padding: 16px 81px 16px 42px;
        font-size: 54px;
    }
    .closing .li.item .img-box {
        width: 140px;
    }
    .closing .item .btn::before {
        width: 60px;
        height: 60px;
        border-radius: 60px;
        right: 32px;
    }
    .closing .item .btn::after {
        border: solid 16px transparent;
        border-left: solid 28px #fccf1d;
        right: 28px;
    }
    .closing .item .btn.detail::after {
        border-left: solid 28px #4ddc4d;
    }
    .closing.pr .item .img-box img {
        max-height: 140px;
    }
    .btn-box.back .btn {
        padding: 16px 42px 16px 81px;
        font-size: 40px;
    }
    .btn-box.back .btn::before {
        width: 60px;
        height: 60px;
        border-radius: 60px;
        left: 32px;
    }
    .btn-box.back .btn::after {
        border: solid 16px transparent;
        border-right: solid 28px #ffffff;
        left: 30px;
    }
    .footer {
        font-size: 28px;
    }
    .footer .text:last-child {
        font-size: 22px;
    }
}

/*--------------------------------
pc
--------------------------------*/
@media (min-width: 1001px){
    body{
        font-size: 24px;
    }
    .pcbr{
        display: block;
    }
    .spbr{
        display: none;
    }
    .hero .main .h1 {
        padding: 0 64px 32px;
    }
    .hero .main .text {
        padding: 8px 12px;
        font-size: 24px;
    }
    .light-red {
        background: url(images/pink-bg.webp) repeat-y top center / 900px, #fed2e1;
    }
    .about .item {
        margin: 0 24px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .about .item .h3 {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 24px;
    }
    .about .box:nth-child(1) .box-inner {
        margin: 0 8px;
        display: flex;
        justify-content: space-between;
    }
    .about .item:nth-of-type(1) .img-box,
    .about .item:nth-of-type(2) .img-box{
        height: 300px;
    }
    .about .item:nth-of-type(1) .img-box {
        background: url(images/about-bg1.webp) no-repeat top right / 210px;
    }
    .about .item:nth-of-type(2) .img-box {
        background: url(images/about-bg2.webp) no-repeat top left / 180px;
    }
    .about .item .balloon {
        font-size: 20px;
    }
    .about .table-wrap {
        margin: 0 32px;
    }
    .about .table-box .table {
        width: 100%;
    }
    .about .table-box tr:first-child th {
        font-size: 20px;
    }
    .about .table-box .img {
        margin: auto auto 16px;
        width: 50px;
    }
    .about .scroll-hand {
        display: none;
    }
    .about .th .text {
        font-size: 16px;
    }
    .about .td .mark {
        font-size: 46px;
    }
    .about .td .text {
        font-size: 16px;
    }
    .about .caution {
        text-align: center;
    }
    .about .box:nth-child(3) .item {
        margin: 0 auto;
        width: calc(100% - 64px);
    }
    .about .box:nth-child(3) .ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .about .box:nth-child(3) .li {
        margin: 0 0 32px;
        width: calc(50% - 8px);
    }
    .about .box:nth-child(3) .li:last-child{
        margin: 0;
        width: 100%;
    }
    .about .ul .li:last-child .text {
        flex: inherit;
    }
    .about .li:last-child .li-inner {
        justify-content: center;
    }
    .closing .item {
        margin: 0 32px 48px;
    }
    .closing .item .h4 {
        margin: 40px 32px 24px;
    }
    .closing .item .h4.another {
        margin: 32px 32px 0;
    }
    .closing .item .btn-box{
        margin: 48px 0;
        padding: 0 32px;
    }
    .closing .item .btn {
        margin: 0 0 32px;
        font-size: 40px;
    }
    .closing .item .img-box{
        margin-bottom: 32px;
    }
    .closing .item .img-box.sp{
        display: none;
    }
    .closing .item .img-box.pc{
        display: block;
    }
    .closing .item .img-box.pc img{
        margin-bottom: 32px;
        padding: 0 32px;
    }
    .closing .item .img-box.pc img:last-child{
        margin-bottom: 0;
    }
    .closing .item a{
        margin: 0 32px 0 0;
        width: 100%;
        display: block;
    }
    .closing .item .item-inner {
        display: flex;
    }
    .closing .item-inner .info{
        width: 100%;
    }   
    .closing .video-box, .closing .item > .text, .closing .table-wrap{
        padding: 0 32px;
    }
    .closing .box:nth-child(2) .item {
        display: flex;
    }
    .closing .box:nth-child(2) .banner {
        margin: 0 24px 32px 0;
        width: 336px;
        display: flex;
        align-items: center;
    }
    .closing .box:nth-child(2) .text{
        flex: 1;
    }
    .closing .box:nth-child(2) .text,
    .closing.pr .text{
        padding: 0;
    }
    .closing.pr .li.item .img-box{
        margin-right: 32px;
    }
    .closing .item .btn::before {
        width: 50px;
        height: 50px;
        border-radius: 50px;
    }
    .closing .item .btn::after {
        border: solid 12px transparent;
        border-left: solid 18px #fccf1d;
        right: 34px;
    }
    .closing .item .btn.detail::after {
        border: solid 12px transparent;
        border-left: solid 18px #4ddc4d;
    }
    .closing.pr .box {
        margin: 0 32px 64px;
    }
    .closing.pr .btn {
        border-radius: 32px;
        padding: 32px 116px 32px 32px;
    }
    .closing.detail .item .img-box {
        margin: 0 32px 32px;
    }
    .closing.detail .item .ul {
        margin: 0 32px;
    }
    .btn-box.back {
        padding: 0 96px;
    }
    .btn-box.back .btn::before {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        left: 32px;
    }
    .btn-box.back .btn::after {
        border: solid 12px transparent;
        border-right: solid 18px #ffffff;
        left: 35px;
    }
    .footer {
        font-size: 20px;
    }
    .footer .text:first-child {
        margin-bottom: 0;
    }
    .footer .text:last-child {
        font-size: 16px;
    }
}