@charset "UTF-8";

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html {
    font-size: 62.5%;
}

.cf {
    zoom: 1;
}

.cf:before,
.cf:after {
    content: '';
    display: table;
}

.cf:after {
    clear: both;
}

#panoramadesigneyepalette_specialsite .menu-trigger span {
    background: #000;
}

#panoramadesigneyepalette_specialsite .menu-trigger.active span {
    background: #000;
}

.font-roboto-condensed {
    font-family: "Roboto Condensed", "Roboto", sans-serif !important;
    font-weight: 300;
}

body {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

body #wrap {
    background-color: #fff;
}

body iframe {
    border: none;
}

body main {
    line-height: 1.6;
    letter-spacing: .05em;
    font-size: 14px;
    display: block;
    width: 100%;
    overflow: hidden;
    line-height: 1.6;
    letter-spacing: .01em;
    font-size: 14px;
    color: #000;
    background: #000;
}

body main h1,
body main h2,
body main h3,
body main h4,
body main h5,
body main h6,
body main li,
body main dl,
body main dt,
body main dd,
body main input,
body main p,
body main span,
body main a,
body main caption,
body main th,
body main td,
body main figure {
    font-family: "Roboto", "游ゴシック体", YuGothic, "Noto Sans JP", "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.08em;
    -webkit-font-feature-settings: "palt";
    -moz-font-feature-settings: "palt";
    font-feature-settings: "palt";
}

body main .sp {
    display: none;
}

body main p {
    color: #000;
}

body main section.sec-main {
    position: relative;
    width: 100%;
    padding: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

body main section.sec-main .img-main {
    position: relative;
    width: 100%;
}

body main section.sec-main .img-main .image {
    width: 100%;
}

body main section.sec-main .img-main .image img {
    width: 100%;
    height: auto;
}

body main section.sec-main .img-main .text-box {
    position: absolute;
    top: 10%;
    left: 4%;
    width: 39%;
    max-width: 500px;
}

body main section.sec-main .img-main .text-box li {
    position: relative;
    width: 90%;
}

body main section.sec-main .img-main .text-box li img {
    width: 100%;
    height: auto;
}

body main section.sec-main .img-main .text-box li:nth-child(2) {
    width: 72%;
    margin-top: 9px;
}

body main section.sec-main .img-main .text-box li:nth-child(3) {
    width: 48%;
    margin-top: 0px;
}

body main section.sec-main .img-main .logo-visee {
    position: absolute;
    bottom: 2.5%;
    right: 2.5%;
    width: 40.625%;
    max-width: 720px;
}

body main section.sec-main .img-main .logo-visee img {
    width: 100%;
    height: auto;
}

body main section.sec-nav {
    position: relative;
    width: 100%;
    height: 138px;
    background: url("../img/bg_nav.png") top center no-repeat;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

body main section.sec-nav ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

body main section.sec-nav ul li {
    position: relative;
    width: 50%;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 32px 0 0;
    box-sizing: border-box;
    cursor: pointer;
}

body main section.sec-nav ul li .name {
    width: 202px;
    margin: 0 auto;
}

body main section.sec-nav ul li .name img {
    width: 100%;
    height: auto;
}

body main section.sec-nav ul li .txt {
    position: relative;
    font-size: 14px;
    margin-top: 10px;
}

body main section.sec-nav ul li span.icon {
    position: absolute;
    display: block;
    top: 55px;
    left: 40px;
    width: 28px;
    height: 28px;
    border: 1px solid #000;
    border-radius: 50%;
}

body main section.sec-nav ul li span.icon:before {
    position: absolute;
    content: "";
    top: 11px;
    left: 8px;
    background: url("../img/icon_down.svg") center center no-repeat;
    width: 10px;
    height: 5px;
    background-size: contain;
}

body main section.sec-outline {
    position: relative;
    width: 100%;
    height: 1080px;
    background: #000;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

body main section.sec-outline:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../img/bg_outline.jpg") bottom center no-repeat;
    background-size: cover;
    z-index: 0;
}

body main section.sec-outline span.line {
    position: relative;
    display: block;
    width: 2px;
    height: 110px;
    background: #bfa696;
    margin: 0 auto;
}

body main section.sec-outline .ttl-box {
    position: relative;
    margin-top: 40px;
}

body main section.sec-outline .ttl-box p.txt-debut {
    position: relative;
    font-family: "Roboto Condensed", "Roboto", sans-serif !important;
    color: #d39e8d;
    letter-spacing: 0.01em;
    font-size: 24px;
    text-align: center;
}

body main section.sec-outline .ttl-box h2 {
    position: relative;
    width: 670px;
    margin: 16px auto 0;
}

body main section.sec-outline .ttl-box h2 img {
    width: 100%;
    height: auto;
}

body main section.sec-outline .ttl-box p.txt-catch {
    position: relative;
    width: 484px;
    margin: 40px auto 0;
}

body main section.sec-outline .ttl-box p.txt-catch img {
    width: 100%;
    height: auto;
}

body main section.sec-outline .txt-point {
    position: relative;
    margin: 150px 0 0;
    width: 100%;
}

body main section.sec-outline .txt-point ul {
    width: 49%;
    margin: 0 0 0 auto;
}

body main section.sec-outline .txt-point ul li {
    position: relative;
    padding-left: 128px;
    box-sizing: border-box;
}

body main section.sec-outline .txt-point ul li:before {
    position: absolute;
    content: "";
    top: 9px;
    left: 0;
    width: 95px;
    height: 1px;
    background: #d0c2b9;
}

body main section.sec-outline .txt-point ul li:nth-child(2) {
    margin-top: 72px;
}

body main section.sec-outline .txt-point ul li img {
    width: 280px;
    height: auto;
}

body main section.sec-movie {
    position: relative;
    width: 100%;
    background: url("../img/bg_movie.png") center center no-repeat;
    background-size: 100% 100%;
    padding: 140px 0 140px;
}

body main section.sec-movie .video-box {
    position: relative;
    width: 880px;
    margin: 0 auto;
}

body main section.sec-movie .video-box .movie {
    position: relative;
    width: 100%;
    cursor: pointer;
}

body main section.sec-movie .video-box .movie:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    transition: all 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

body main section.sec-movie .video-box .movie video {
    display: block;
    width: 100%;
    height: auto;
}

body main section.sec-movie .video-box .icon-play {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

body main section.sec-movie .video-box .icon-play img {
    width: 110px;
    height: auto;
}

body main section.sec-kakomime {
    position: relative;
    width: 100%;
    background: url("../img/bg_kakomime.jpg") top center no-repeat #000;
    padding: 114px 0 230px;
}

body main section.sec-kakomime .title-box {
    position: relative;
    width: 586px;
    margin: 0 auto;
}

body main section.sec-kakomime .title-box img {
    width: 100%;
    height: auto;
}

body main section.sec-kakomime .lead-box {
    position: relative;
    margin: 44px auto 0;
    text-align: center;
}

body main section.sec-kakomime .lead-box p {
    font-size: 16px;
    color: #fff;
    line-height: 1.75;
}

body main section.sec-kakomime .howto-box {
    position: relative;
    margin: 56px auto 0;
}

body main section.sec-kakomime .howto-box>h4 {
    position: relative;
    width: 245px;
    margin: 0 auto;
}

body main section.sec-kakomime .howto-box>h4 img {
    width: 100%;
    height: auto;
}

body main section.sec-kakomime .howto-box .blend-box {
    position: relative;
    width: 980px;
    margin: 68px auto 0;
    border-left: 1px solid #766154;
    border-right: 1px solid #766154;
    border-bottom: 1px solid #766154;
    box-sizing: border-box;
    color: #fff;
    background: url("../img/bg_blendmake.png") top center no-repeat;
    background-size: 100% 100%;
}

body main section.sec-kakomime .howto-box .blend-box ul.line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
}

body main section.sec-kakomime .howto-box .blend-box ul.line li {
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    height: 1px;
    background: #766154;
}

body main section.sec-kakomime .howto-box .blend-box ul.line li:nth-child(2) {
    left: auto;
    right: 0;
}

body main section.sec-kakomime .howto-box .blend-box h5 {
    position: relative;
    top: -28px;
    width: 350px;
    margin: 0 auto;
}

body main section.sec-kakomime .howto-box .blend-box h5 img {
    width: 100%;
    height: auto;
}

body main section.sec-kakomime .howto-box .blend-box .inner {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 35px 0 68px;
}

body main section.sec-kakomime .howto-box .blend-box .inner .image-box .image-make {
    position: relative;
    width: 566px;
}

body main section.sec-kakomime .howto-box .blend-box .inner .image-box .image-make img {
    width: 100%;
    height: auto;
}

body main section.sec-kakomime .howto-box .blend-box .inner .image-box p.note {
    text-align: left;
    color: #fff;
    font-size: 13px;
    margin-top: 14px;
}

body main section.sec-kakomime .howto-box .blend-box .inner .point-box {
    position: relative;
    font-size: 15px;
    padding: 23px 0 0 92px;
    margin-top: 34px;
}

body main section.sec-kakomime .howto-box .blend-box .inner .point-box p {
    color: #fff;
}

body main section.sec-kakomime .howto-box .blend-box .inner .point-box:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background: url("../img/label_point.png") center center no-repeat;
    width: 70px;
    height: 70px;
    background-size: contain;
}

body main section.sec-kakomime .howto-box .blend-box .inner .text-box {
    position: relative;
    width: 200px;
    margin-left: 65px;
    white-space: nowrap;
}

body main section.sec-kakomime .howto-box .blend-box .inner .text-box:before {
    position: absolute;
    content: "";
    top: 0;
    left: -35px;
    width: 1px;
    height: 100%;
    background: #fff;
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}

body main section.sec-kakomime .howto-box .blend-box .inner .text-box h4 {
    font-size: 17px;
}

body main section.sec-kakomime .howto-box .blend-box .inner .text-box .image-make {
    position: relative;
    margin-top: 12px;
    width: 100%;
}

body main section.sec-kakomime .howto-box .blend-box .inner .text-box .image-make img {
    width: 100%;
    height: auto;
}

body main section.sec-kakomime .howto-box .blend-box .inner .text-box p {
    position: relative;
    margin-top: 28px;
    color: #fff;
    font-size: 14px;
    line-height: 1.65;
}

body main section.sec-kakomime .howto-box .gradation-box {
    position: relative;
    width: 840px;
    margin: 54px auto 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

body main section.sec-kakomime .howto-box .gradation-box .text-box {
    position: relative;
    padding-left: 120px;
    margin-right: 64px;
    padding-top: 30px;
}

body main section.sec-kakomime .howto-box .gradation-box .text-box:before {
    position: absolute;
    content: "";
    top: 39px;
    left: 0;
    width: 95px;
    height: 1px;
    background: #d0c2b9;
    opacity: 0.75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}

body main section.sec-kakomime .howto-box .gradation-box .text-box .image {
    width: 300px;
}

body main section.sec-kakomime .howto-box .gradation-box .text-box .image img {
    width: 100%;
    height: auto;
}

body main section.sec-kakomime .howto-box .gradation-box .image-box {
    width: 360px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

body main section.sec-kakomime .howto-box .gradation-box .image-box img {
    width: 100%;
    height: auto;
}

body main section.sec-kakomime .onlineshop-box {
    position: relative;
    width: 980px;
    margin: 75px auto 0;
}

body main section.sec-kakomime .onlineshop-box h3 {
    position: relative;
    font-family: "Roboto Condensed", "Roboto", sans-serif !important;
    font-size: 14px;
    padding-left: 72px;
    box-sizing: border-box;
}

body main section.sec-kakomime .onlineshop-box h3:before {
    position: absolute;
    content: "";
    top: 10px;
    left: 0px;
    width: 60px;
    height: 1px;
    background: #eaa1a1;
}

body main section.sec-kakomime .onlineshop-box ul {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 26px;
}

body main section.sec-kakomime .onlineshop-box ul li {
    position: relative;
    width: 310px;
}

body main section.sec-kakomime .onlineshop-box ul li a {
    position: relative;
    width: 100%;
    height: 90px;
    display: block;
    border: 1px solid rgba(118, 97, 84, 0.5);
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
    padding-top: 22px;
}

body main section.sec-kakomime .onlineshop-box ul li a img {
    width: 190px;
    height: auto;
}

body main section.sec-color {
    position: relative;
    width: 100%;
    background: url("../img/bg_colorvariation.png") center center no-repeat;
    background-size: 100% 100%;
    padding-bottom: 120px;
}

body main section.sec-color span.line {
    position: relative;
    display: block;
    width: 2px;
    height: 110px;
    background: #c08d75;
    margin: 0 auto;
}

body main section.sec-color .ttl-box {
    position: relative;
    margin-top: 40px;
}

body main section.sec-color .ttl-box h2 {
    position: relative;
    width: 412px;
    margin: 16px auto 0;
}

body main section.sec-color .ttl-box h2 img {
    width: 100%;
    height: auto;
}

body main section.sec-color .ttl-box p {
    position: relative;
    margin: 18px auto 0;
    text-align: center;
    font-size: 15px;
}

body main section.sec-color .color-box {
    position: relative;
    width: 100%;
    margin: 72px auto 0;
}

body main section.sec-color .color-box .flickity-viewport {
    overflow: visible;
}

body main section.sec-color .color-box .flickity-page-dots {
    bottom: -40px;
}

body main section.sec-color .color-box .flickity-page-dots .dot {
    border-radius: 0;
    width: 5px;
    height: 5px;
    margin: 0 7px;
    transition: all 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}

body main section.sec-color .color-box .flickity-page-dots .dot.is-selected {
    -webkit-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4);
    background: #965e40;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

body main section.sec-color .color-box .flickity-page-dots .dot:nth-child(2).is-selected {
    background: #843033;
}

body main section.sec-color .color-box .flickity-page-dots .dot:nth-child(3).is-selected {
    background: #594939;
}

body main section.sec-color .color-box .flickity-page-dots .dot:nth-child(4).is-selected {
    background: #803d46;
}

body main section.sec-color .color-box .flickity-page-dots .dot:nth-child(5).is-selected {
    background: #645450;
}

body main section.sec-color .color-box .flickity-prev-next-button.next {
    background: url("../img/icon_niziuslide_nav_next.png") top center no-repeat;
    top: 50%;
    right: calc(50% - 550px);
    width: 64px;
    height: 8px;
    background-size: contain;
    border-radius: 0;
    padding: 10px 0 10px;
}

body main section.sec-color .color-box .flickity-prev-next-button.next svg {
    display: none;
}

body main section.sec-color .color-box .flickity-prev-next-button.previous {
    background: url("../img/icon_niziuslide_nav_prev.png") top center no-repeat;
    top: 50%;
    left: calc(50% - 550px);
    width: 64px;
    height: 8px;
    background-size: contain;
    border-radius: 0;
    padding: 10px 0 10px;
}

body main section.sec-color .color-box .flickity-prev-next-button.previous svg {
    display: none;
}

body main section.sec-color .color-box article {
    position: relative;
    width: 100%;
}

body main section.sec-color .color-box article:nth-child(2n+1):before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    mix-blend-mode: overlay;
}

body main section.sec-color .color-box article .inner {
    position: relative;
    width: 980px;
    margin: 0 auto;
    padding: 44px 0 28px;
    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

body main section.sec-color .color-box article .inner .text-box {
    position: relative;
    top: -10px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: left;
}

body main section.sec-color .color-box article .inner .text-box .image-make {
    width: 135px;
    margin-right: 28px;
}

body main section.sec-color .color-box article .inner .text-box .image-make img {
    width: 100%;
    height: auto;
}

body main section.sec-color .color-box article .inner .text-box .text .name {
    position: relative;
    width: 250px;
}

body main section.sec-color .color-box article .inner .text-box .text .name img {
    width: 100%;
    height: auto;
}

body main section.sec-color .color-box article .inner .text-box .text .catch {
    font-size: 15px;
    margin-top: 12px;
}

body main section.sec-color .color-box article .inner .image-box {
    position: relative;
}

body main section.sec-color .color-box article .inner .image-box ul {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

body main section.sec-color .color-box article .inner .image-box ul.label:after {
    position: absolute;
    content: "";
    top: -25px;
    left: -25px;
    background: url("../img/label_color_hokuto.png") center center no-repeat;
    width: 75px;
    height: 75px;
    background-size: contain;
}

body main section.sec-color .color-box article .inner .image-box ul.label.tzuyu:after {
    background: url("../img/label_color_tzuyu.png") center center no-repeat;
    background-size: contain;
}

body main section.sec-color .color-box article .inner .image-box ul li {
    width: 200px;
}

body main section.sec-color .color-box article .inner .image-box ul li:nth-child(2) {
    margin-left: 10px;
}

body main section.sec-color .color-box article .inner .image-box ul li .thumb {
    width: 100%;
}

body main section.sec-color .color-box article .inner .image-box ul li .thumb img {
    width: 100%;
    height: auto;
}

body main section.sec-color .color-box article .inner .image-box ul li p {
    font-size: 13px;
    margin-top: 10px;
}

body main section.sec-color .banner-box {
    position: relative;
    width: 850px;
    margin: 100px auto 0;
}

body main section.sec-color .banner-box ul {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

body main section.sec-color .banner-box ul li {
    position: relative;
    width: 400px;
}

body main section.sec-color .banner-box ul li h3 {
    color: #000;
    font-size: 14px;
    position: relative;
    font-size: 14px;
    padding-left: 72px;
    box-sizing: border-box;
}

body main section.sec-color .banner-box ul li h3:before {
    position: absolute;
    content: "";
    top: 10px;
    left: 0px;
    width: 60px;
    height: 1px;
    background: #d97b7b;
}

body main section.sec-color .banner-box ul li .banner {
    position: relative;
    margin-top: 20px;
}

body main section.sec-color .banner-box ul li .banner a {
    display: block;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}

body main section.sec-color .banner-box ul li .banner a img {
    width: 100%;
    height: auto;
}

body main section.sec-color .banner-box ul li .text-box {
    position: relative;
    text-align: center;
    margin-top: 22px;
}

body main section.sec-color .banner-box ul li .text-box p {
    font-size: 14px;
    font-weight: 400;
}

body main section.sec-color .banner-box ul li .text-box p.note {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 400;
}

body main section.sec-color .onlineshop-box {
    position: relative;
    width: 850px;
    margin: 100px auto 0;
}

body main section.sec-color .onlineshop-box h3 {
    color: #000;
    font-size: 14px;
    position: relative;
    font-size: 14px;
    padding-left: 72px;
    box-sizing: border-box;
    font-family: "Roboto Condensed", "Roboto", sans-serif !important;
    letter-spacing: 0.01em;
}

body main section.sec-color .onlineshop-box h3:before {
    position: absolute;
    content: "";
    top: 10px;
    left: 0px;
    width: 60px;
    height: 1px;
    background: #d97b7b;
}

body main section.sec-color .onlineshop-box ul {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 20px;
}

body main section.sec-color .onlineshop-box ul li {
    position: relative;
    width: 265px;
}

body main section.sec-color .onlineshop-box ul li .banner {
    position: relative;
}

body main section.sec-color .onlineshop-box ul li .banner a {
    display: block;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    height: 90px;
    background: #fff;
    text-align: center;
    padding-top: 21px;
}

body main section.sec-color .onlineshop-box ul li .banner a img {
    width: 185px;
    height: auto;
}

body main section.sec-items {
    position: relative;
    background: url("../img/bg_item.png") top center no-repeat;
    padding-bottom: 150px;
}

body main section.sec-items span.line {
    position: relative;
    display: block;
    width: 2px;
    height: 110px;
    background: #d89d8d;
    margin: 0 auto;
}

body main section.sec-items .ttl-box {
    position: relative;
    margin-top: 40px;
}

body main section.sec-items .ttl-box h2 {
    position: relative;
    width: 344px;
    margin: 16px auto 0;
}

body main section.sec-items .ttl-box h2 img {
    width: 100%;
    height: auto;
}

body main section.sec-items .ttl-box p {
    position: relative;
    margin: 18px auto 0;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
}

body main section.sec-items .lead-box {
    position: relative;
    margin-top: 64px;
}

body main section.sec-items .lead-box .container {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

body main section.sec-items .lead-box .container h4 {
    position: relative;
    color: #000;
    font-size: 15px;
    font-family: "Roboto Condensed", "Roboto", sans-serif !important;
    letter-spacing: 0.01em;
    padding-right: 90px;
}

body main section.sec-items .lead-box .container h4:before {
    position: absolute;
    top: 11px;
    right: 0;
    width: 70px;
    height: 1px;
    background: #000;
    content: "";
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

body main section.sec-items .lead-box .container .image {
    width: 257px;
    margin-left: 20px;
}

body main section.sec-items .lead-box .container .image img {
    width: 100%;
    height: auto;
}

body main section.sec-items .item-box {
    position: relative;
    width: 980px;
    margin: 60px auto 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

body main section.sec-items .item-box.hokuto .movie-box {
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
}

body main section.sec-items .item-box.hokuto .items {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}

body main section.sec-items .item-box>h3 {
    position: relative;
    margin-bottom: 38px;
    text-align: center;
}

body main section.sec-items .item-box>h3 img {
    width: 168px;
    height: auto;
}

body main section.sec-items .item-box>h3.hokuto img {
    width: 192px;
    height: auto;
}

body main section.sec-items .item-box .movie-box {
    position: relative;
    width: 320px;
    border-radius: 4px;
    cursor: pointer;
}

body main section.sec-items .item-box .movie-box .inner {
    position: relative;
    width: 100%;
}

body main section.sec-items .item-box .movie-box .inner:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    content: "";
    transition: all 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

body main section.sec-items .item-box .movie-box .inner video {
    border-radius: 4px;
    overflow: hidden;
    display: block;
    width: 100%;
    height: auto;
}

body main section.sec-items .item-box .movie-box .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 110px;
    pointer-events: none;
}

body main section.sec-items .item-box .movie-box .icon img {
    width: 100%;
    height: auto;
}

body main section.sec-items .item-box .items {
    position: relative;
    width: 600px;
}

body main section.sec-items .item-box .items h3 {
    position: relative;
    padding-left: 118px;
    margin-bottom: 52px;
}

body main section.sec-items .item-box .items h3.hokuto img {
    width: 214px;
    height: auto;
}

body main section.sec-items .item-box .items h3:before {
    position: absolute;
    top: 15px;
    left: 0;
    width: 90px;
    height: 1px;
    background: #d97b7b;
    content: "";
}

body main section.sec-items .item-box .items h3 img {
    width: 187px;
    height: auto;
}

body main section.sec-items .item-box .items .container {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 24px;
}

body main section.sec-items .item-box .items .container li {
    position: relative;
    width: 33.333%;
    text-align: center;
}

body main section.sec-items .item-box .items .container li.new:after {
    position: absolute;
    content: "";
    top: 4px;
    left: 0;
    background: url("../img/label_new.png") center center no-repeat;
    width: 55px;
    height: 42px;
    background-size: contain;
}

body main section.sec-items .item-box .items .container li a {
    width: 100%;
}

body main section.sec-items .item-box .items .container li a .image {
    width: 140px;
    margin: 0 auto;
}

body main section.sec-items .item-box .items .container li a .image img {
    width: 100%;
    height: auto;
}

body main section.sec-items .item-box .items .container li a .text {
    position: relative;
    margin-top: 18px;
}

body main section.sec-items .item-box .items .container li a .text p {
    font-family: "Roboto Condensed", "Roboto", sans-serif !important;
    letter-spacing: 0.01em;
    font-size: 16px;
}

body main section.sec-items .item-box .items .container li a .text p.name {
    line-height: 1.3;
}

body main section.sec-items .item-box .items .container li a .text p.color {
    font-size: 14px;
}

body main section.sec-items .onlineshop-box {
    position: relative;
    width: 980px;
    margin: 112px auto 0;
    border-top: 1px solid #000;
    padding-top: 50px;
}

body main section.sec-items .onlineshop-box .ttl-box h3 {
    position: relative;
    color: #000;
    font-size: 14px;
    position: relative;
    font-size: 14px;
    box-sizing: border-box;
    font-family: "Roboto Condensed", "Roboto", sans-serif !important;
    letter-spacing: 0.01em;
    text-align: center;
    font-size: 32px;
}

body main section.sec-items .onlineshop-box .ttl-box h3:after {
    position: absolute;
    bottom: -4px;
    left: calc(50% - 28px);
    width: 56px;
    height: 1px;
    background: #ef9d99;
    content: "";
}

body main section.sec-items .onlineshop-box .ttl-box p {
    font-size: 15px;
}

body main section.sec-items .onlineshop-box ul {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 36px;
}

body main section.sec-items .onlineshop-box ul li {
    position: relative;
    width: 310px;
    position: relative;
    margin-top: 20px;
}

body main section.sec-items .onlineshop-box ul li a {
    display: block;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    height: 90px;
    background: #fff;
    text-align: center;
    padding-top: 20px;
}

body main section.sec-items .onlineshop-box ul li a img {
    width: 185px;
    height: auto;
}

body main section.sec-making {
    position: relative;
    background: #000;
    text-align: center;
    height: 606px;
    overflow: hidden;
    cursor: pointer;
}

body main section.sec-making:before {
    position: absolute;
    content: "";
    top: -1px;
    left: 0;
    background: url("../img/making_mask_1.png") top center no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 50vw;
    z-index: 5;
}

body main section.sec-making:after {
    position: absolute;
    content: "";
    bottom: -1px;
    left: 0;
    background: url("../img/making_mask_2.png") bottom center no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 50vw;
    z-index: 5;
}

body main section.sec-making .base {
    position: relative;
    width: 100%;
    height: 100%;
}

body main section.sec-making .base:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    z-index: 2;
    content: "";
    transition: all 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

body main section.sec-making .base video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: hidden;
    width: 100%;
    height: auto;
    z-index: 1;
}

body main section.sec-making .container {
    position: absolute;
    z-index: 20;
    top: 55%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

body main section.sec-making .container h3 {
    width: 240px;
    margin: 0 auto;
}

body main section.sec-making .container h3 img {
    width: 100%;
    height: auto;
}

body main section.sec-making .container .btn {
    position: relative;
    width: 110px;
    margin: 54px auto 0;
}

body main section.sec-making .container .btn img {
    width: 100%;
    height: auto;
}

body main section.sec-sns {
    position: relative;
    background-color: #fff;
    padding-bottom: 20px;
    z-index: 10;
}

body main section.sec-sns span.line {
    position: relative;
    top: -2.3vw;
    display: block;
    width: 2px;
    height: 110px;
    background: #f19696;
    margin: 0 auto;
}

body main section.sec-sns .ttl-box {
    margin-top: -36px;
}

body main section.sec-sns .ttl-box h2 {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: #000;
    font-size: 38px;
    font-family: "Roboto Condensed", "Roboto", sans-serif !important;
    letter-spacing: 0.01em;
    margin-top: 25px;
}

body main section.sec-sns .ttl-box p {
    position: relative;
    margin-top: 2px;
    font-size: 15px;
    text-align: center;
    letter-spacing: 0.04em;
    color: #000;
}

body main section.sec-sns .sns-box {
    position: relative;
    margin-top: 54px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

body main section.sec-sns .sns-box li {
    width: 50px;
}

body main section.sec-sns .sns-box li:nth-child(n+2) {
    margin-left: 82px;
}

body main section.sec-sns .sns-box li a {
    display: block;
    width: 100%;
}

body main section.sec-sns .sns-box li a img {
    width: 100%;
    height: auto;
}

body #youtube,
body #youtube-making,
body #youtube-howto,
body #youtube-howto-hokuto {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

body #youtube .cover,
body #youtube-making .cover,
body #youtube-howto .cover,
body #youtube-howto-hokuto .cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    cursor: pointer;
}

body #youtube .box,
body #youtube-making .box,
body #youtube-howto .box,
body #youtube-howto-hokuto .box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 880px;
    height: 500px;
    margin-left: -440px;
    margin-top: -250px;
    background-color: #000;
}

body #youtube .box .btn-close,
body #youtube-making .box .btn-close,
body #youtube-howto .box .btn-close,
body #youtube-howto-hokuto .box .btn-close {
    position: absolute;
    top: 0px;
    right: -60px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    width: 42px;
}

body #youtube .box .btn-close img,
body #youtube-making .box .btn-close img,
body #youtube-howto .box .btn-close img,
body #youtube-howto-hokuto .box .btn-close img {
    width: 100%;
    height: auto;
}

body #youtube .box .player,
body #youtube-making .box .player,
body #youtube-howto .box .player,
body #youtube-howto-hokuto .box .player {
    width: 880px;
    height: 500px;
}

body #youtube .box .player .video-js,
body #youtube-making .box .player .video-js,
body #youtube-howto .box .player .video-js,
body #youtube-howto-hokuto .box .player .video-js {
    width: 100%;
    height: 100%;
}

body #howto-player {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

body #howto-player .cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    cursor: pointer;
}

body #howto-player .box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 880px;
    height: 500px;
    margin-left: -440px;
    margin-top: -250px;
    background-color: #000;
}

body #howto-player .box .btn-close {
    position: absolute;
    top: 0px;
    right: -60px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    width: 42px;
}

body #howto-player .box .btn-close img {
    width: 100%;
    height: auto;
}

body #howto-player .box .player {
    width: 880px;
    height: 500px;
}

body #howto-player .box .player article {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

body #howto-player .box .player article .video-js {
    width: 100%;
    height: 100%;
}

body #btn-anchor {
    position: fixed;
    bottom: 0px;
    right: 0px;
    max-width: 750px;
    width: 60%;
    -webkit-transform: translateY(220px);
    -ms-transform: translateY(220px);
    transform: translateY(220px);
    transition: opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1);
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
    cursor: pointer;
    z-index: 10;
    background: #000;
}

body #btn-anchor.display {
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
}

body #btn-anchor.hide {
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
}

body #btn-anchor .inner {
    position: relative;
    width: 100%;
    transition: all 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}

body #btn-anchor .inner:hover {
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

body #btn-anchor .inner:hover img {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

body #btn-anchor .inner img {
    width: 100%;
    height: auto;
}

body #btn-anchor .btn-close {
    position: absolute;
    top: -6px;
    right: 8px;
    width: 26px;
    cursor: pointer;
}

body #btn-anchor .btn-close img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    body main .pc {
        display: none;
    }

    body main .sp {
        display: block;
    }

    body main section.sec-main {
        padding: 0;
    }

    body main section.sec-main .img-main .text-box {
        top: auto;
        bottom: 2.8vw;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 220px;
        text-align: center;
    }

    body main section.sec-main .img-main .text-box li {
        width: 86%;
        margin: 0 auto;
    }

    body main section.sec-main .img-main .text-box li:nth-child(2) {
        margin: 0px auto 0;
        width: 85%;
        left: -3px;
    }

    body main section.sec-main .img-main .text-box li:nth-child(3) {
        margin: -12px auto 0;
        width: 56%;
        left: -3px;
    }

    body main section.sec-nav {
        height: 70px;
        background-size: cover;
    }

    body main section.sec-nav ul li {
        padding: 16px 0 0;
    }

    body main section.sec-nav ul li .name {
        width: 100px;
    }

    body main section.sec-nav ul li .txt {
        font-size: 10px;
        margin-top: 4px;
        -webkit-transform: scale(0.75);
        -ms-transform: scale(0.75);
        transform: scale(0.75);
    }

    body main section.sec-nav ul li:first-child span.icon {
        left: 10px;
    }

    body main section.sec-nav ul li span.icon {
        top: 26px;
        left: 16px;
        width: 16px;
        height: 16px;
        border: 1px solid #000;
    }

    body main section.sec-nav ul li span.icon:before {
        top: 6px;
        left: 4px;
        width: 6px;
        height: 3px;
    }

    body main section.sec-outline {
        height: auto;
        padding-bottom: 80px;
    }

    body main section.sec-outline:before {
        background: url("../img/bg_outline_sp.jpg") top center no-repeat;
        background-size: cover;
        width: 100%;
    }

    body main section.sec-outline span.line {
        height: 75px;
        width: 1px;
        background: #b98f74;
    }

    body main section.sec-outline .ttl-box {
        margin-top: 30px;
    }

    body main section.sec-outline .ttl-box p.txt-debut {
        font-size: 19px;
    }

    body main section.sec-outline .ttl-box h2 {
        width: 250px;
        margin: 14px auto 0;
    }

    body main section.sec-outline .ttl-box p.txt-catch {
        width: 170px;
        margin: 30px auto 0;
    }

    body main section.sec-outline .txt-point {
        margin: 117vw 0 0;
    }

    body main section.sec-outline .txt-point ul {
        width: calc(100% - 30px);
    }

    body main section.sec-outline .txt-point ul li {
        padding-left: 88px;
    }

    body main section.sec-outline .txt-point ul li:before {
        width: 70px;
    }

    body main section.sec-outline .txt-point ul li:nth-child(2) {
        margin-top: 30px;
    }

    body main section.sec-outline .txt-point ul li img {
        width: 214px;
    }

    body main section.sec-movie {
        padding: 90px 0 90px;
    }

    body main section.sec-movie .video-box {
        width: calc(100% - 24px);
    }

    body main section.sec-movie .video-box .icon-play img {
        width: 75px;
    }

    body main section.sec-kakomime {
        padding: 65px 0 100px;
        background: url("../img/bg_kakomime_sp.jpg") top center no-repeat #000;
        background-size: 100% auto;
    }

    body main section.sec-kakomime .title-box {
        width: 272px;
    }

    body main section.sec-kakomime .lead-box {
        margin: 36px auto 0;
    }

    body main section.sec-kakomime .lead-box p {
        font-size: 13px;
        line-height: 1.6;
    }

    body main section.sec-kakomime .howto-box {
        margin: 45px auto 0;
    }

    body main section.sec-kakomime .howto-box>h4 {
        width: 186px;
    }

    body main section.sec-kakomime .howto-box .blend-box {
        width: calc(100% - 40px);
        margin: 48px auto 0;
        background: url("../img/bg_blendmake_sp.png") top center no-repeat;
        background-size: 100% 100%;
    }

    body main section.sec-kakomime .howto-box .blend-box ul.line li {
        width: calc(100% - 305px);
    }

    body main section.sec-kakomime .howto-box .blend-box h5 {
        width: calc(100% - 84px);
        top: -19px;
    }

    body main section.sec-kakomime .howto-box .blend-box .inner {
        padding: 20px 25px 48px;
        box-sizing: border-box;
        display: block;
    }

    body main section.sec-kakomime .howto-box .blend-box .inner .image-box .image-make {
        width: 100%;
    }

    body main section.sec-kakomime .howto-box .blend-box .inner .image-box p.note {
        font-size: 10px;
        margin-top: 10px;
    }

    body main section.sec-kakomime .howto-box .blend-box .inner .point-box {
        font-size: 12.5px;
        padding: 12px 0 0 56px;
    }

    body main section.sec-kakomime .howto-box .blend-box .inner .point-box:before {
        width: 44px;
        height: 44px;
    }

    body main section.sec-kakomime .howto-box .blend-box .inner .text-box {
        width: 100%;
        margin: 28px 0 0;
    }

    body main section.sec-kakomime .howto-box .blend-box .inner .text-box:before {
        display: none;
    }

    body main section.sec-kakomime .howto-box .blend-box .inner .text-box h4 {
        font-size: 13px;
        line-height: 1.55;
    }

    body main section.sec-kakomime .howto-box .blend-box .inner .text-box .image-make {
        position: absolute;
        width: 113px;
        top: -25px;
        right: -18px;
    }

    body main section.sec-kakomime .howto-box .blend-box .inner .text-box p {
        font-size: 10px;
        margin-top: 6px;
        line-height: 1.75;
    }

    body main section.sec-kakomime .howto-box .gradation-box {
        width: calc(100% - 40px);
        margin: 46px auto 0;
        display: block;
    }

    body main section.sec-kakomime .howto-box .gradation-box .text-box {
        padding-left: 60px;
        margin-right: 0;
        padding-top: 0px;
    }

    body main section.sec-kakomime .howto-box .gradation-box .text-box:before {
        width: 48px;
        top: 6px;
    }

    body main section.sec-kakomime .howto-box .gradation-box .text-box .image {
        width: 224px;
    }

    body main section.sec-kakomime .howto-box .gradation-box .image-box {
        margin-top: 34px;
        padding-left: 60px;
        width: 228px;
    }

    body main section.sec-kakomime .onlineshop-box {
        width: calc(100% - 96px);
        margin: 50px auto 0;
        display: block;
    }

    body main section.sec-kakomime .onlineshop-box h3 {
        font-size: 13px;
        padding-left: 36px;
    }

    body main section.sec-kakomime .onlineshop-box h3:before {
        width: 25px;
        top: 9px;
    }

    body main section.sec-kakomime .onlineshop-box ul {
        margin-top: 13px;
        display: block;
    }

    body main section.sec-kakomime .onlineshop-box ul li {
        width: 100%;
    }

    body main section.sec-kakomime .onlineshop-box ul li:nth-child(n+2) {
        margin-top: 10px;
    }

    body main section.sec-kakomime .onlineshop-box ul li a {
        height: 60px;
        padding-top: 16px;
        border-radius: 2px;
    }

    body main section.sec-kakomime .onlineshop-box ul li a img {
        width: 124px;
        height: auto;
    }

    body main section.sec-color {
        padding-bottom: 100px;
    }

    body main section.sec-color span.line {
        height: 75px;
        width: 1px;
    }

    body main section.sec-color .ttl-box {
        margin-top: 20px;
    }

    body main section.sec-color .ttl-box h2 {
        width: 275px;
    }

    body main section.sec-color .ttl-box p {
        font-size: 14px;
        margin: 14px auto 0;
    }

    body main section.sec-color .color-box {
        margin: 38px auto 0;
        width: calc(100% - 50px);
    }

    body main section.sec-color .color-box .flickity-page-dots {
        bottom: -36px;
    }

    body main section.sec-color .color-box .flickity-page-dots .dot {
        margin: 0 5px;
        width: 5px;
        height: 5px;
    }

    body main section.sec-color .color-box .flickity-prev-next-button.next {
        top: 52%;
        width: 50px;
        height: 6px;
        right: -16px;
    }

    body main section.sec-color .color-box .flickity-prev-next-button.previous {
        top: 52%;
        width: 50px;
        height: 6px;
        left: -16px;
    }

    body main section.sec-color .color-box article {
        width: 100%;
        margin: 0 auto;
        margin-right: 10px;
    }

    body main section.sec-color .color-box article:before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #6d3929;
        opacity: 0.1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
        mix-blend-mode: overlay;
    }

    body main section.sec-color .color-box article:nth-child(2n+1):before {
        background: #6d3929;
        opacity: 0.1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    }

    body main section.sec-color .color-box article .inner {
        display: block;
        width: 100%;
        padding: 62px 25px 58px;
        box-sizing: border-box;
    }

    body main section.sec-color .color-box article .inner .text-box {
        display: block;
        text-align: center;
    }

    body main section.sec-color .color-box article .inner .text-box .image-make {
        width: 118px;
        margin: 0 auto;
    }

    body main section.sec-color .color-box article .inner .text-box .text .name {
        width: 200px;
        margin: 22px auto 0;
    }

    body main section.sec-color .color-box article .inner .text-box .text .catch {
        margin-top: 16px;
        font-size: 14px;
    }

    body main section.sec-color .color-box article .inner .image-box {
        margin-top: 22px;
    }

    body main section.sec-color .color-box article .inner .image-box ul.label:after {
        width: 55px;
        height: 55px;
        top: -19px;
        left: -19px;
    }

    body main section.sec-color .color-box article .inner .image-box ul li:nth-child(2) {
        margin-left: 8px;
    }

    body main section.sec-color .color-box article .inner .image-box ul li p {
        text-align: center;
        font-size: 11px;
        margin-top: 12px;
    }

    body main section.sec-color .banner-box {
        width: calc(100% - 96px);
        margin: 80px auto 0;
        display: block;
    }

    body main section.sec-color .banner-box ul {
        display: block;
    }

    body main section.sec-color .banner-box ul li {
        width: 100%;
    }

    body main section.sec-color .banner-box ul li:nth-child(n+2) {
        margin-top: 24px;
    }

    body main section.sec-color .banner-box ul li h3 {
        font-size: 13px;
        padding-left: 36px;
    }

    body main section.sec-color .banner-box ul li h3:before {
        width: 25px;
        top: 9px;
    }

    body main section.sec-color .banner-box ul li .banner {
        margin-top: 14px;
    }

    body main section.sec-color .banner-box ul li .banner a {
        border-radius: 2px;
    }

    body main section.sec-color .banner-box ul li .text-box {
        margin-top: 18px;
    }

    body main section.sec-color .banner-box ul li .text-box p {
        font-size: 13px;
        line-height: 1.5;
    }

    body main section.sec-color .banner-box ul li .text-box p.note {
        font-size: 11px;
        margin-top: 6px;
    }

    body main section.sec-color .onlineshop-box {
        width: calc(100% - 96px);
        margin: 28px auto 0;
        display: block;
    }

    body main section.sec-color .onlineshop-box h3 {
        font-size: 13px;
        padding-left: 36px;
    }

    body main section.sec-color .onlineshop-box h3:before {
        width: 25px;
        top: 9px;
    }

    body main section.sec-color .onlineshop-box ul {
        display: block;
        margin-top: 13px;
    }

    body main section.sec-color .onlineshop-box ul li {
        width: 100%;
    }

    body main section.sec-color .onlineshop-box ul li:nth-child(n+2) {
        margin-top: 10px;
    }

    body main section.sec-color .onlineshop-box ul li .banner a {
        height: 60px;
        padding-top: 16px;
        border-radius: 2px;
    }

    body main section.sec-color .onlineshop-box ul li .banner a img {
        width: 124px;
        height: auto;
    }

    body main section.sec-items {
        padding-bottom: 86px;
        background: url("../img/bg_item_sp.png") top center no-repeat;
        background-size: 100% auto;
    }

    body main section.sec-items span.line {
        height: 75px;
        width: 1px;
    }

    body main section.sec-items .ttl-box {
        margin-top: 20px;
    }

    body main section.sec-items .ttl-box h2 {
        width: 230px;
    }

    body main section.sec-items .ttl-box p {
        font-size: 14px;
        margin: 14px auto 0;
    }

    body main section.sec-items .lead-box {
        margin-top: 36px;
    }

    body main section.sec-items .lead-box .container {
        display: block;
        text-align: center;
    }

    body main section.sec-items .lead-box .container h4 {
        padding-right: 0;
        font-size: 14px;
    }

    body main section.sec-items .lead-box .container h4:before {
        width: 48px;
        top: auto;
        bottom: -5px;
        left: 50%;
        right: auto;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    body main section.sec-items .lead-box .container .image {
        width: 242px;
        margin: 22px auto 0;
    }

    body main section.sec-items .item-box {
        width: 100%;
        display: block;
        margin: 46px auto 0;
    }

    body main section.sec-items .item-box.hokuto {
        margin: 64px auto 0;
    }

    body main section.sec-items .item-box .movie-box {
        width: 220px;
        margin: 0 auto;
    }

    body main section.sec-items .item-box .movie-box .icon {
        width: 75px;
    }

    body main section.sec-items .item-box .items {
        width: calc(100% - 20px);
        margin: 54px auto 0;
    }

    body main section.sec-items .item-box .items .container {
        margin-bottom: 18px;
    }

    body main section.sec-items .item-box .items .container li.new:after {
        width: 43px;
        height: 32px;
        top: 1px;
        left: -5px;
    }

    body main section.sec-items .item-box .items .container li a .image {
        width: 75%;
    }

    body main section.sec-items .item-box .items .container li a .text p {
        font-size: 13px;
    }

    body main section.sec-items .item-box .items .container li a .text p.name {
        line-height: 1.2;
    }

    body main section.sec-items .item-box .items .container li a .text p.color {
        font-size: 12px;
        margin-top: 1px;
    }

    body main section.sec-items .onlineshop-box {
        margin: 72px auto 0;
        width: calc(100% - 40px);
        padding-top: 11px;
    }

    body main section.sec-items .onlineshop-box .ttl-box h3 {
        font-size: 21px;
    }

    body main section.sec-items .onlineshop-box .ttl-box h3:after {
        display: none;
    }

    body main section.sec-items .onlineshop-box .ttl-box p {
        font-size: 12px;
        letter-spacing: 0.03em;
        line-height: 1.2;
        margin-top: 0px;
    }

    body main section.sec-items .onlineshop-box ul {
        display: block;
        margin-top: 34px;
    }

    body main section.sec-items .onlineshop-box ul li {
        width: 280px;
        margin: 10px auto 0;
    }

    body main section.sec-items .onlineshop-box ul li a {
        height: 60px;
        padding-top: 14px;
        border-radius: 2px;
    }

    body main section.sec-items .onlineshop-box ul li a img {
        width: 124px;
        height: auto;
    }

    body main section.sec-making {
        height: 400px;
    }

    body main section.sec-making .base video {
        height: 100%;
        width: auto;
    }

    body main section.sec-making .container {
        top: 50%;
    }

    body main section.sec-making .container h3 {
        width: 180px;
    }

    body main section.sec-making .container .btn {
        width: 84px;
        margin: 38px auto 0;
    }

    body main section.sec-sns {
        padding-bottom: 50px;
    }

    body main section.sec-sns span.line {
        height: 75px;
        width: 1px;
    }

    body main section.sec-sns .ttl-box {
        margin-top: -10px;
    }

    body main section.sec-sns .ttl-box h2 {
        font-size: 24px;
        margin-top: 19px;
    }

    body main section.sec-sns .ttl-box p {
        font-size: 12px;
        margin-top: 0px;
    }

    body main section.sec-sns .sns-box {
        margin-top: 35px;
    }

    body main section.sec-sns .sns-box li {
        width: 35px;
    }

    body main section.sec-sns .sns-box li:nth-child(n+2) {
        margin-left: 45px;
    }

    body #btn-anchor {
        width: 100%;
        -webkit-transform: translateY(220px);
        -ms-transform: translateY(220px);
        transform: translateY(220px);
        max-width: 400px;
    }

    body #btn-anchor .inner:hover {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    body #btn-anchor .btn-close {
        top: -10px;
        right: 4px;
        width: 20px;
    }
}

@media screen and (min-width: 769px) {
    body main section.sec-nav ul li {
        transition: all 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    }

    body main section.sec-nav ul li:hover {
        opacity: 0.4;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    }

    body main section.sec-nav ul li:hover img {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    body main section.sec-movie .video-box .movie:hover:before {
        opacity: 0.4;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    }

    body main section.sec-kakomime .onlineshop-box ul li a {
        transition: all 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    }

    body main section.sec-kakomime .onlineshop-box ul li a:hover {
        opacity: 0.5;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }

    body main section.sec-kakomime .onlineshop-box ul li a:hover img {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    body main section.sec-color .color-box .flickity-prev-next-button.next {
        transition: all 0.15s cubic-bezier(0.33, 1, 0.68, 1);
    }

    body main section.sec-color .color-box .flickity-prev-next-button.next:hover {
        -webkit-transform: translate(10px, -50%);
        -ms-transform: translate(10px, -50%);
        transform: translate(10px, -50%);
    }

    body main section.sec-color .color-box .flickity-prev-next-button.previous {
        transition: all 0.15s cubic-bezier(0.33, 1, 0.68, 1);
    }

    body main section.sec-color .color-box .flickity-prev-next-button.previous:hover {
        -webkit-transform: translate(-10px, -50%);
        -ms-transform: translate(-10px, -50%);
        transform: translate(-10px, -50%);
    }

    body main section.sec-color .banner-box ul li .banner a {
        transition: all 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    }

    body main section.sec-color .banner-box ul li .banner a:hover {
        opacity: 0.5;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }

    body main section.sec-color .banner-box ul li .banner a:hover img {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    body main section.sec-color .onlineshop-box ul li .banner a {
        transition: all 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    }

    body main section.sec-color .onlineshop-box ul li .banner a:hover {
        opacity: 0.5;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }

    body main section.sec-color .onlineshop-box ul li .banner a:hover img {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    body main section.sec-items .item-box .movie-box .inner:hover:after {
        opacity: 0.4;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    }

    body main section.sec-items .item-box .items .container li a {
        transition: all 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    }

    body main section.sec-items .item-box .items .container li a:hover {
        opacity: 0.5;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }

    body main section.sec-items .item-box .items .container li a:hover img {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    body main section.sec-items .onlineshop-box ul li a {
        transition: all 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    }

    body main section.sec-items .onlineshop-box ul li a:hover {
        opacity: 0.5;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }

    body main section.sec-items .onlineshop-box ul li a:hover img {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    body main section.sec-making:hover .base:after {
        opacity: 0.4;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    }

    body main section.sec-sns .sns-box li a {
        transition: all 0.2s cubic-bezier(0.33, 1, 0.68, 1);
    }

    body main section.sec-sns .sns-box li a:hover {
        opacity: 0.5;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }

    body main section.sec-sns .sns-box li a:hover img {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    body #youtube .box .btn-close,
    body #youtube-making .box .btn-close,
    body #youtube-howto .box .btn-close,
    body #youtube-howto-hokuto .box .btn-close {
        transition: all 0.2s cubic-bezier(0.33, 1, 0.68, 1);
    }

    body #youtube .box .btn-close:hover,
    body #youtube-making .box .btn-close:hover,
    body #youtube-howto .box .btn-close:hover,
    body #youtube-howto-hokuto .box .btn-close:hover {
        opacity: 0.5;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }

    body #howto-player .box .btn-close {
        transition: all 0.2s cubic-bezier(0.33, 1, 0.68, 1);
    }

    body #howto-player .box .btn-close:hover {
        opacity: 0.5;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }

    body #btn-anchor .btn-close {
        transition: all 0.2s cubic-bezier(0.33, 1, 0.68, 1);
    }

    body #btn-anchor .btn-close:hover .inner {
        opacity: 0.8;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    }
}

@media screen and (max-width: 600px) {

    body #youtube .box,
    body #youtube-making .box,
    body #youtube-howto .box,
    body #youtube-howto-hokuto .box {
        width: 100%;
        height: 240px;
        margin-left: -50%;
        margin-top: -120px;
    }

    body #youtube .box .btn-close,
    body #youtube-making .box .btn-close,
    body #youtube-howto .box .btn-close,
    body #youtube-howto-hokuto .box .btn-close {
        top: auto;
        right: auto;
        left: calc(50% - 14px);
        bottom: -60px;
        width: 28px;
    }

    body #youtube .box .player,
    body #youtube-making .box .player,
    body #youtube-howto .box .player,
    body #youtube-howto-hokuto .box .player {
        width: 100%;
        height: 100%;
    }

    body #howto-player .box {
        width: 100%;
        height: 240px;
        margin-left: -50%;
        margin-top: -120px;
    }

    body #howto-player .box .btn-close {
        top: auto;
        right: auto;
        left: calc(50% - 14px);
        bottom: -60px;
        width: 28px;
    }

    body #howto-player .box .player {
        width: 100%;
        height: 100%;
    }
}