@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap');

/*------------------------------------------------
					common
------------------------------------------------*/
.row {
	text-align:center;
	width:100%;
    max-width:1200px;
	box-sizing:border-box;
	margin:0 auto;
}

.josefin {
    font-family: 'Josefin Sans', sans-serif;
    text-transform: uppercase;
}

* {box-sizing: border-box;}

.ttl {
    text-align: center;
}
.ttl p {
    font-weight: bold;
    font-size:30px;
    
}
.ttl h2 {
    font-size:50px;
    font-weight: bold;
    margin-top:-10px;
}
.ttl h2 span {
    color:#0038d2;
    font-size:50px;
    font-weight: bold;
    
}





/*------------------------------------------------
					header
------------------------------------------------*/
header {
    padding:10px 0;
    background:#fff;
}
header .row {
    display:flex;
    justify-content: space-between;
    align-items: center;
}
header ul {
    display:flex;
    justify-content: space-between;
    align-items: center;
}
header ul li {padding:0 20px;}
header ul li a {
    color:#000;
    font-size:18px;
    border-bottom: 1px solid transparent;
}
header ul li a:hover {border-bottom: 1px solid #000;}

header .delivery {
    font-size:16px;
    background:#004d91;
    color:#fff;
    padding:0 5px 5px;
}
header .delivery span {
    display:block;font-size:46px;
    font-weight: bold;
    line-height: 46px;
    color:#fefd06;
}







/*------------------------------------------------
					visual
------------------------------------------------*/



#scrollwrap::before {
    -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    -moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    -o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;

    position: absolute;
    top: 135px;
    left: 50%;
    margin-left: -1px;
    width: 1px;
    height: 100px;
    background: #000;
    content: ' ';
}
@-webkit-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-moz-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-o-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}






/*------------------------------------------------
					article
------------------------------------------------*/
article {
    margin-top:100px;
}
.demonstrate {
    position: relative;
}
.demonstrate:before {
    content:'';
    width: 100%;
    height: 70%;
    background:#e7f62b;
    -webkit-transform:skewY(-7deg);
    transform: skewY(-7deg);
    position: absolute;
    top:20%;
}
.demonstrate:after {
    content:'';
    width: 100%;
    height: 83%;
    background:#e7f62b;
    -webkit-transform:skewY(7deg);
    transform: skewY(7deg);
    position: absolute;
    bottom:-44%;
    z-index: -1;
}

.demonstrate ul {
    position: relative;
    display: flex;
    justify-content: space-between;
}
.demonstrate ul li {
    text-align: center;
}
.demonstrate ul li h2 {
    font-size:70px;
    font-weight: bold;
    text-align: center;
}
.demonstrate ul li h2 span {
    font-size:70px;
    color:#0038d2;
    font-weight: bold;
}
.demonstrate p {
    font-size:30px;
}
.demonstrate .txt {
    text-align: left;
    width:50%;
    margin:50px auto;
    font-size:16px;
}






/*------------------------------------------------
					about
------------------------------------------------*/

.about {
    max-width:1650px;
    width:100%;
    margin:200px auto 300px;
    text-align: center;
    position: relative;
}
.about ul {
    display:flex;
    justify-content: space-between;
}
.about ul li {
    width:49%;
}
.about h2 {
    font-size:30px;
    font-weight: bold;
}
.about h3 {
    font-size:60px;
    font-weight: 600;
}
.about h3 span {
    font-size:60px;
    color:#0038d2;
    font-weight: 600;
}
.about ul li p {
    font-size:18px;
    margin-top:50px;
    text-align: left;
}

.about .shoes {
    position: absolute;
    bottom:-25%;
    right:10%;
}










/*------------------------------------------------
					size
------------------------------------------------*/
.sizetable {
    background:url(../img/bg2.png) 0 -15% no-repeat;
    background-size:cover;
}

/*measure*/
.measure {}
.measure ul {
    display:flex;
    justify-content: space-between;
    padding-bottom: 50px;
}
.measure ul li {
    width:40%;
}
.measure .title h2 {
    font-size:60px;
    font-weight: bold;
    position: relative;
}
.measure .title h2:after {
    content:'';
    width:64px;
    height:5px;
    background:#000;
    position: absolute;
    top:10px;
    left:50%;
    transform: translate(-50%, -50%);
}
.measure .title p {
    font-size:22px;
    font-weight: bold;
    margin:-16px 0 40px;
}

.measure  ul li .txt {
    color:#000;
    font-size:16px;
}



/*size table*/
.size-wrap {
    padding:0 0 100px;
}

.size-wrap .title {
    color:#000;
    font-weight: bold;
    font-size:40px;
    line-height: 30px;
    position: relative;
    margin:50px 0;
}
.size-wrap .title:after {
    content:'';
    width:36px;
    height:3px;
    background:#000;
    position: absolute;
    top:-6%;
    left:50%;
    transform: translate(-50%, -50%);
}
.size-wrap .title span {
    font-size:30px;
    display:block;
    font-weight: bold;
}


/*table*/
.table ul {
    display:flex;
    justify-content: space-between;
    color:#000;
}
.table ul li {
    font-size:24px;
}


.table {width:100%;}
.table table td {
    border:1px solid #eee;
    color:#000;
    vertical-align: middle;
    width:100px;
    padding:5px 0;
}
.table table td:hover {
    background:rgba(255,255,255,.2);
}
.table .gray {
    background:#ddd;
    color:#000;
}
.table td.gray:hover, #women .table td.gray:hover {
    background:#ddd;
}
.table .white {
    background:#000;
    color:#000;
}
.table .white:hover, #women .table .white:hover {background:#000;}

.sizetable .size-wrap .caution.blk {color:#000;}
.sizetable .size-wrap .caution {
    color:#000;
    font-size:14px;
    padding:30px 20px 0;
}


/*women*/
#women {margin:120px 0 0;}
#women .size-wrap {padding:0;}
#women .title {color:#000;}
#women .title:after {background:#000;}
#women td {color:#000;}
#women .table table td:hover {
    background:rgba(0,0,0,.1);
}


.table {display:flex;}
.table .size-ttl {max-height:361px;}






/*------------------------------------------------
					recommend
------------------------------------------------*/

#recommend {
    margin-top:100px;
}
#recommend .textbox {
    text-align: center;
    font-size:16px;
    padding:50px 0 0;
}
#recommend .textbox p {
    font-size:14px;
    color:#838383;
    margin-top:30px;
}



/*tab*/
.tab-wrap {
    position:relative;
    margin-top:200px;
}
.tab-wrap:before {
    content:'';
    background:#0038d2;
    height:100px;
    width:1px;
    position: absolute;
    top:-100px;
    left:50%;
}
.tab-wrap:after {
    content:'';
    background:#000;
    height:100px;
    width:1px;
    position: absolute;
    top:0px;
    left:50%;
}

.tab-group {
    display: flex;
    justify-content: center;
    position: absolute;
    top:30%;
    z-index:999;
    left:50%;
    transform: translate(-50%, 0%);
}
.tab-group .tab {
    flex-grow: 1;
    padding:0 50px;
    list-style:none;
    text-align:center;
    cursor:pointer;
    outline: none;
    font-size:20px;
    position: relative;
    color:#000;
    opacity:.5;
}
.tab-group .tab span {
    display:block;
    font-weight: bold;
    font-size:26px;
}
.tab-group .is-active:after {
    content:'';
    width:20px;
    height:5px;
    background:#000;
    position: absolute;
    top:53%;
    left:50%;
    transform: translate(-50%, -50%);
    
}
.tab.is-active{
    transition: all 0.5s ease;
    opacity:1;
}




.panel-group{
    width:100%;
    text-align: center;
    margin:0 auto;
    border-top:none;
    background:#eee;
    position: relative;
}


.panel-group .men {
    background:url(../img/reco_bg2.jpg) top center no-repeat;
    background-attachment: fixed;
    background-size:cover;
    width:100%;
    height:100%;
}

.panel-group .wm {
    background:url(../img/reco_bg2.jpg) top center no-repeat;
    background-attachment: fixed;
    background-size:cover;
    width:100%;
    height:100%;
}

.panel-group .panel ul {
    display:flex;
    justify-content: center;
    max-width:1650px;
    width:100%;
    text-align: center;
    padding:200px 0 0;
    margin:0 auto;
    position:relative;
    top:130px;
}
.panel-group .panel ul li {
    width:20%;
    margin-right:10px;
    position:relative;
}
.panel-group .panel ul li:last-child {margin-right:0;}

.panel-group .panel ul li a {
    color:#000;
    display: block;
}

.panel figure img {width:100%;}
.panel figure figcaption {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    padding:120px 20px;
    font-size:26px;
    font-weight: bold;
    color:#000;
    background:rgba(0,0,0,.8);
    transition:all .5s ease;
}

.panel .hover {
    font-size:18px;
    color:#000;
    font-weight: bold;
    text-decoration: underline;
    display:none;
    margin-top:20px;
    transition:all .5s ease;
}

.panel figure figcaption:hover {
    background:rgba(231,246,43,.9);
    color:#000;
    padding:86px 20px;
}
.panel figure figcaption:hover .hover {
    display:block;
    
}



.panel{
    display:none;
}

.panel.is-show{
    display:block;
    transition: all 0.5s ease;
}










/*------------------------------------------------
					footer
------------------------------------------------*/

footer {
    text-align: center;
    margin:14% 0 3%;
}
footer .btn {
    color:#000;
    background:#0038d2;
    display:inline-block;
    border-radius: 50px;
    font-size:22px;
    width:50%;
    padding:10px 0 15px
}
footer .btn:hover {
    background:#0d2360;
    box-shadow: 0 6px 6px rgba(0,0,0,.3);
}
footer small {
    display: block;
    margin-top:50px;
    font-weight: 18px;
}





/*------------------------------------------------
					responsive
------------------------------------------------*/
@media screen and (max-width: 1440px) {
    .about .shoes {width:50%;}
    
    .panel figure figcaption {font-size:18px;padding:105px 20px;}
}
@media screen and (max-width: 1400px) {
    .about .shoes {width:42%;}
}
@media screen and (max-width: 1024px) {
    #visual {height:78vh;}
    #visual .txt h2 {font-size:90px;}
    #visual .txt p {font-size:34px;letter-spacing: 2px;}
    #visual .txt p span {font-size:40px;}
    #scrolldown {bottom:14%;right:20px;}
    
    
    .demonstrate ul {padding:0 20px;}
    .demonstrate ul li h2, .demonstrate ul li h2 span {font-size:50px;}
    .demonstrate p {font-size:20px;}
    .demonstrate:before {top:14%;}
    .demonstrate ul li {width:49%;}
    
    
    
    .about ul {padding:0 20px;}
    .about h2 {font-size:16px;}
    .about h3, .about h3 span {font-size:46px;}
    .about ul li p {font-size:16px;}
    .about .shoes {bottom:-40%;}
    
    
    
    .sizetable {background-size:600%;padding:0 0 10%;}
    .measure, .size-wrap {padding:0 20px;}
    .measure ul li {width:48%;}
    
    #women {padding:0 20px 0;}
    
    
    .panel-group .panel {padding:0 20px;}
    .tab-group {top:40%;}
    .panel-group .men, .panel-group .wm {background-attachment: scroll;background-position: center center;}
    .panel-group .panel ul {top:70px;}
    
    
    .panel figure figcaption {font-size:14px;padding:66px 20px;}
    
}

@media screen and (max-width: 768px) {
    header {padding:10px 20px;}
    header ul {display:none;}
    
    
    #visual .txt h2 {font-size:60px;}
    #visual .imgbox {width:93%;top:37%;}
    #scrolldown {bottom:0;}
    
    
    .demonstrate ul li h2, .demonstrate ul li h2 span {font-size:44px;}
    
    
    .about {margin:100px auto;}
    .about h3, .about h3 span {font-size:36px;}
    .about .shoes {display:none;}
    
    
    
    .panel-group .panel ul {flex-wrap: wrap;padding:50px 0 0;top:210px;}
    .panel-group .panel ul li {width:32%;margin-bottom: 30px;}
    .tab-group {top:26%;}
    .panel figure figcaption {padding:92px 0 20px;}
    
}


@media screen and (max-width: 767px) {
    header .delivery {font-size:12px;}
    header .delivery span {font-size:34px;}
    
    
    .sphide {display:none;}
    
    #visual {height:60vh;}
    #visual .txt {top:10%;}
    #visual .txt h2 {font-size:42px;}
    #visual .txt p {font-size:24px;}
    #visual .txt p span {font-size:30px;}
    #visual .imgbox {width:100%;top:70%;}
    #scrolldown {bottom:-40px;}
    
    
    
    article {margin-top:50px;}
    .demonstrate ul {flex-wrap: wrap;}
    .demonstrate ul li {width:100%;margin-bottom:30px;}
    .demonstrate ul li h2, .demonstrate ul li h2 span {font-size:32px;}
    .demonstrate p {font-size:18px;}
    
    
    
    .about ul {flex-wrap: wrap;}
    .about ul li {width:100%;margin-bottom:30px;}
    .about h3, .about h3 span {font-size:32px;}
    
    
    
    .measure ul {flex-wrap: wrap;}
    .measure ul li {width:100%;}
    .measure ul li:last-child {margin-top:50px;}
    .measure ul li:last-child h2 {color:#000;}
    .measure ul li:last-child h2:after {background:#000;}
    .measure ul li .txt {margin-top:20px;}
    .measure .title p {color:#000;}
    .measure ul li:first-child .title p {color:#000;}
    
    
    .size-wrap .title {font-size:34px;line-height: 50px;}
    .table {overflow-x: auto;overflow-y: hidden;}
    .table table td {padding:5px 10px;}
    
    
    
    .ttl p {font-size:26px;line-height: 2em;}
    .ttl h2, .ttl h2 span {font-size:38px;line-height: 40px;}
    #recommend .textbox {padding:50px 20px 0;}
    
    .tab-group .tab {padding:0px 20px;}
    .tab-group {top:30%;}
    .panel-group .panel ul {padding:50px 0 0;top:230px;}
    .panel-group .panel ul li {width:48%;}
    .panel-group .panel ul li:nth-child(2n+2) {margin-right:0;}
    .panel figure figcaption {padding:44px 0 20px;}
    
    
    footer {margin:72% 0 3%;}
    
    .panel figure figcaption:hover .hover {display:none;}
    .panel figure figcaption:hover {padding:53px 0;}
    
    
    .table .size-ttl {max-height:100%;}
    
}