@charset "utf-8";

/* =#howtouse
-------------------------------------------------------------------------*/
.selector:after {
    content: '';
    display: block;
    clear: both;
    }

.pws_tabs_container ul.pws_tabs_controll {
    overflow: hidden;
    margin: 0 0 -12px;
    border-left: 2px solid #999 !important;
    }

.pws_tabs_container ul.pws_tabs_controll li {
    position: relative;
    width: calc(100% / 2);
    float: left;
    margin: 0 0 10px;
    z-index: 2;
    }

.pws_tabs_container ul.pws_tabs_controll li a {
    display: block;
    height: 9em;
    padding: 10px 5px 0;
    font-weight: 600;
    font-size: 3.5vw;
    text-align: center;
    color: rgba(0,0,0,.3);
    background: #fff;
    border-top: 8px solid #999 !important;
    border-right: 2px solid #999 !important;
    border-bottom: 2px solid #999 !important;
    }

.pws_tabs_container ul.pws_tabs_controll li:nth-child(1) a { border-top-color: #f3a3a4 !important; }
.pws_tabs_container ul.pws_tabs_controll li:nth-child(2) a { border-top-color: #f18c39 !important; }
.pws_tabs_container ul.pws_tabs_controll li:nth-child(3) a { border-top-color: #8cc63f !important; }

.pws_tabs_container ul.pws_tabs_controll li a.pws_tab_active {
    color: #2b494e;
    border-bottom-color: transparent !important;
    }

.pws_tabs_container ul.pws_tabs_controll li a span { cursor: pointer; }

.pws_tabs_container ul.pws_tabs_controll li a i {
    display: inline-block;
    white-space: nowrap;
    }

.pws_tabs_scale_hide {
    opacity: 0;
    transform: scale(0.9);
        -webkit-transform: scale(0.9);
    }

.pws_tabs_scale_show {
    opacity: 1;
    z-index: 10;
    transform: scale(1);
        -webkit-transform: scale(1);
    transition-delay: .3s;
        -webkit-transition-delay: .3s;
    }

.pws_tabs_container.pws_scale>.pws_tabs_list>.pws_hide {
    transform: scale(.9);
        -webkit-transform: scale(.9);
    opacity: 0;
    transition: all .3s ease-in-out .3s;
        -webkit-transition: all .3s ease-in-out .3s;
    }

.pws_tabs_container.pws_scale>.pws_tabs_list>.pws_show {
    z-index: 1;
    opacity: 1;
    transition: all .3s ease-in-out .3s;
        -webkit-transition: all .3s ease-in-out .3s;
    transition-delay: .3s;
        -webkit-transition-delay: .3s;
    transform: scale(1);
        -webkit-transform: scale(1);
    }

.pws_tabs_list {
    padding: 30px 20px;
    background: #fff;
    border: 2px solid #999 !important;
    overflow: auto;
    }

.pws_tabs_list header { margin: 0 0 60px; }

.pws_tabs_list header h2 {
    position: relative;
    font-weight: 400;
    font-size: 4vw;
    line-height: 1.6;
    margin: 0 0 1em;
    padding: 1em 0 1em 60px;
    border: 2px solid #2b494e !important;
    border-radius: 6px;
    }

.pws_tabs_list header h2:before {
    content: '';
    position: absolute;
    top: -8px;
    left: 10px;
    display: block;
    width: 40px;
    height: 47px;
    background: url("/images/temp/about/eyecatch02.svg") no-repeat 0 0;
    background-size: cover;
    z-index: 10;
    }

.pws_tabs_list header h2:after{
    content: '';
    position: absolute;
    top: -8px;
    left: 2px;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent #2c494d #2c494d transparent;
    border-width: 4px !important;
    z-index: 10;
    }

.pws_tabs_list header h2 span { display: inline-block; }

.pws_tabs_list header p {
    font-size: 3.6vw;
    margin: 0;
    }

.pws_tabs_list header p br { display: none; }

.pws_tabs_list .status {
    position: relative;
    margin: 0 0 5px;
    padding: 0 0 50px 15px;
    border-left: 5px solid #000 !important;
    }

.pws_tabs_list .status:last-of-type { padding-bottom: 1px; }
.pws_tabs_list .status.beginner { border-left-color: #00a99d !important; }
.pws_tabs_list .status.reserved { border-left-color: #f7931e !important; }
.pws_tabs_list .status.all { border-left-color: #fae164 !important; }

.pws_tabs_list .status h3 {
    position: relative;
    top: -20px;
    left: -27.5px;
    width: calc(100% + 27.5px);
    font-weight: 400;
    font-size: 5.5vw;
    line-height: 1.6;
    padding: 0 0 0 30px;
    }

.pws_tabs_list .status h3:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 20px;
    height: 80px;
    background: #000;
    border-top: 30px solid #fff !important;
    border-bottom: 30px solid #fff !important;
    transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }

.pws_tabs_list .status.beginner h3:before { background-color: #00a99d !important; }
.pws_tabs_list .status.reserved h3:before { background-color: #f7931e !important; }
.pws_tabs_list .status.all h3:before { background-color: #fae164 !important; }
.pws_tabs_list .status h3 span { display: inline-block; }

.pws_tabs_list .status h4 {
    position: relative;
    font-weight: 400;
    font-size: 5vw;
    line-height: 1.6;
    margin: 2em 0;
    overflow: hidden;
    z-index: 10;
    clear: both;
    }

.pws_tabs_list .status h4 span {
    display: block;
    font-weight: 700;
    font-family: 'Nunito',sans-serif;
    color: #f15a24;
    }

.pws_tabs_list .status p.extra { font-size: 1.1em; }
.pws_tabs_list .status p.extra br { display: none; }

.pws_tabs_list .status>ol>li { position: relative; }
.pws_tabs_list .status>ol>li ol:after,
.pws_tabs_list .status>ol>li ul:after,
.pws_tabs_list .status>ol>li.lead-store ul li:after,
.pws_tabs_list .status.all>ol>li:first-child>figure:after {
    content: '';
    display: block;
    clear: both;
    }

.pws_tabs_list .status:not(.all)>ol>li:first-child h4 { margin-top: 0; }
.pws_tabs_list .status>ol>li.lead-store ul { margin: 0 0 20px; }

.pws_tabs_list .status>ol>li.lead-store ul li>img {
    width: 75px;
    float: left;
    margin-right: 10px;
    box-shadow: 0 0 2px 0 rgba(0,0,0,.5);
    }

.pws_tabs_list .status>ol>li.lead-store ul li figure {
    width: calc(100% - 85px);
    max-width: 170px;
    float: left;
    }

.pws_tabs_list .status>ol>li.lead-store ul li figure figcaption {
    font-size: 1rem;
    line-height: 2;
    white-space: nowrap;
    }

.pws_tabs_list .status>ol>li.step ol li figure p {
    font-size: 1.1rem;
    margin: 0;
    }

.pws_tabs_list .status>ol>li ol li:not(:last-child):after,
.pws_tabs_list .status>ol>li figure>div:before {
    display: block;
    font-size: 5rem;
    line-height: 1.2;
    color: #00a99d;
    }

.pws_tabs_list .status>ol>li ol li:not(:last-child):after {
    content: '\f0d7';
    text-align: center;
    }

.pws_tabs_list .status>ol>li ol li:not(:last-child) figure>div:before {
    content: '\f0da';
    position: absolute;
    top: 50%;
    left: 112%;
    display: none;
    transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }

.pws_tabs_list .status>ol>li ul li { margin: 0 0 20px; }

.pws_tabs_list .status figure>div,
.pws_tabs_list .status figure .liquid {
    position: relative;
    width: 120px;
    height: 192px;
    margin: 0 auto 20px;
    border-radius: 20px;
    }

.pws_tabs_list .status.all figure>div,
.pws_tabs_list .status.all figure .liquid.extra { height: 120px; }

.pws_tabs_list .status.all>ol>li:first-child>figure>div { height: 192px; }
.pws_tabs_list .status.all figure li div.text { margin: 0 0 20px; }

.pws_tabs_list .status.all figure li div.text p {
    font-size: 4.5vw;
    margin: 0;
    }

.pws_tabs_list .status.all h4 {
    font-weight: 600;
    margin: 2em 0 2em -20px;
    padding: .5em 20px;
    background: #fae164;
    }

.pws_tabs_list .status.all>ol>li:first-child h4 { margin-top: 0px; }
.pws_tabs_list p.more.long { margin-bottom: 2em; }


#howtouse .pkg .pws_tabs_container {
	margin:0 -20px;
}
/* =Media Query
-------------------------------------------------------------------------*/
@media only screen and (min-device-width:375px){
    .pws_tabs_list .status>ol>li.lead-store ul li figure figcaption { font-size: 1.1rem; }
    .pws_tabs_list .status>ol>li.step ol li figure p { font-size: 1.2rem; }
    .pws_tabs_list .status>ol>li ol li:not(:last-child) figure>div:before { left: 108%; }
    .pws_tabs_list .status figure>div,.pws_tabs_list .status figure .liquid { width: 150px; height: 240px; }
	.pws_tabs_list .status .entry_member figure>div,.pws_tabs_list .status .entry_member figure .liquid { width: 150px; height: 300px; border-radius: 0;}
	.pws_tabs_list .status.all figure>div,.pws_tabs_list .status.all figure .liquid.extra { height: 150px; }
    .pws_tabs_list .status.all>ol>li:first-child>figure>div { height: 240px; }
    }

@media only screen and (min-device-width:414px){
    .pws_tabs_list .status>ol>li ol li:not(:last-child) figure>div:before { left: 115%; }
    }

@media only screen and (max-device-width:720px) and (orientation:landscape),only screen and (min-device-width:721px){
    .pws_tabs_container ul.pws_tabs_controll li a { height: 5.75em; padding: 10px 8px 0; font-size: 2vw; }
    .pws_tabs_list header h2 { font-size: 2.5vw; padding-left: 80px; }
    .pws_tabs_list header h2:before { top: -10px; left: 15px; width: 50px; height: 58px; }
    .pws_tabs_list header h2:after{ top: -10px; left: 5px; border-width: 5px !important; }
    .pws_tabs_list header p { font-size: 2.3vw; }
    .pws_tabs_list .status h3 { font-size: 3.2vw; }
    .pws_tabs_list .status h4 { font-size: 2.8vw; }
    .pws_tabs_list .status h4 span { height: auto; display:inline-block; float:left; }
    .pws_tabs_list .status p.extra br { display: block; }
    .pws_tabs_list .status>ol>li li,.pws_tabs_list .status.all figure li { width: calc((100% - 40px) / 3); float: left; margin-right: 20px !important; }
    .pws_tabs_list .status>ol>li li:last-child { margin-right: 0 !important; }
    .pws_tabs_list .status>ol>li.lead-store ul li { width: calc(50% - 10px); float: left; margin-right: 20px; }
    .pws_tabs_list .status>ol>li.lead-store ul li+li { margin-right: 0 !important; }
    .pws_tabs_list .status>ol>li ol li:not(:last-child):after { display: none; }
    .pws_tabs_list .status>ol>li ol li:not(:last-child) figure>div:before { left: 111%; display: block; }
    .pws_tabs_list .status.all figure li+li { width: calc((100% - 40px) / 3 * 2 + 20px); float: left; }
    .pws_tabs_list .status.all figure li div.text { margin: 0; }
    .pws_tabs_list .status.all figure li div.text p { font-size: 2.75vw; }
	
    }

@media only screen and (min-device-width:721px){
    .pws_tabs_container ul.pws_tabs_controll li a { border-top-width: 10px !important; }
    .pws_tabs_list { padding: 40px 30px; }
    .pws_tabs_list header p br { display: block; }
    .pws_tabs_list .status { padding: 0 10px 50px 30px; }
    .pws_tabs_list .status h3 { left: -42.5px; width: calc(100% + 42.5px); padding: 0 0 0 40px; font-size: 2.5rem; }
    .pws_tabs_list .status h4 { font-size: 2rem; }
    .pws_tabs_list .status.all h4 { margin-left: -30px; padding: .5em 30px; }
    .pws_tabs_list .status p.extra { font-size: 1.6rem; }
    .pws_tabs_list .status.all figure li div.text p { font-size: 1.8rem; }
    .pws_tabs_list .status>ol>li ol li:not(:last-child) figure>div:before { left: 108%; display: block; }
    .pws_tabs_list .status>ol>li.lead-store ul li figure figcaption { font-size: 1.2rem; }
 
}

@media only screen and (min-device-width:721px) and (orientation:landscape),only screen and (min-width:1024px){
    .pws_tabs_container ul.pws_tabs_controll li a { font-size: 1.8rem; }
    .pws_tabs_list { padding: 60px 50px; }
    .pws_tabs_list header h2 { font-size: 2.2rem; padding: .75em 0 .75em 80px; }
    .pws_tabs_list header p { font-size: 1.8rem; }
    .pws_tabs_list .status>ol>li ol li:not(:last-child) figure>div:before { left: 103%; }
    .pws_tabs_list .status>ol>li.step ol li figure p { font-size: 1.3rem; }
    .pws_tabs_list .status>ol>li.lead-store ul li>img { width: 100px; margin-right: 20px; }
    .pws_tabs_list .status>ol>li.lead-store ul li figure { width: calc(100% - 110px); max-width: 200px; }
    .pws_tabs_list .status>ol>li.lead-store ul li figure figcaption { font-size: 1.3rem; margin-bottom: 1em; }
    .pws_tabs_list .status p.extra { font-size: 1.8rem; }
    .pws_tabs_list .status figure>div,.pws_tabs_list .status figure .liquid { width: 230px; height: 368px; }
	.pws_tabs_list .status .entry_member figure>div,.pws_tabs_list .status .entry_member figure .liquid { width: 230px; height: 460px; border-radius: 0;}
    .pws_tabs_list .status.all figure>div,.pws_tabs_list .status.all figure .liquid.extra { height: 230px;}
    .pws_tabs_list .status.all figure li div.text p { font-size: 2rem; }
    .pws_tabs_list .status.all>ol>li:first-child>figure>div { height: 368px; }
#howtouse .pkg .pws_tabs_container {
	margin:0 0px;
}     }

@media only screen and (min-width:1280px){
    .pws_tabs_list .status { padding: 0 60px 50px 80px; }
    .pws_tabs_list .status>ol>li li,.pws_tabs_list .status.all figure li { width: calc((100% - 120px) / 3); margin-right: 60px !important; }
    .pws_tabs_list .status.all figure li+li { width: calc((100% - 120px) / 3 * 2 + 60px); }
    .pws_tabs_list .status>ol>li ol li:not(:last-child) figure>div:before { left: 112%; font-size: 7rem; }
    .pws_tabs_list .status>ol>li.lead-store ul li { width: 50%; margin-right: 0 !important; }
    .pws_tabs_list .status h3 { left: -92.5px; width: calc(100% + 92.5px); }
    .pws_tabs_list .status.all h4 { margin-left: -80px; margin-bottom: 3em; }
    }

/* IE11,Edge */
_:-ms-lang(x),.selector {  }

/* IE11 */
_:lang(x)::-ms-backdrop,.pws_tabs_container ul.pws_tabs_controll li {  width: calc(100% / 3 - (1px / 3)); }

/* Edge */
_:-ms-lang(x)::backdrop,.selector {  }


/* EOF
-------------------------------------------------------------------------*/