@charset 'utf-8';
/*! sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css */
pre,textarea{overflow:auto}
[hidden],audio:not([controls]),template{display:none}
details,main,summary{display:block}
input[type=number]{width:auto}
input[type=search]{-webkit-appearance:textfield}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
progress{display:inline-block}
textarea{resize:vertical}
[unselectable]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
*,::after,::before{box-sizing:inherit;border-width:0}
*{font-size:inherit;line-height:inherit;margin:0;padding:0}
::after,::before{text-decoration:inherit;vertical-align:inherit}
:root{-ms-overflow-style:-ms-autohiding-scrollbar;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;cursor:default;}
a{text-decoration:none;outline:none;}
audio,canvas,iframe,img,svg,video{vertical-align:top}
img{border:none;}
canvas{width:0;height:0}
button,input,select,textarea{background-color:transparent;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;min-height:1.5em}
button:focus,input:focus,select:focus,textarea:focus{outline:none;}
code,kbd,pre,samp{font-family:monospace,monospace}
ol,ul{list-style:none}
/*select{-moz-appearance:none;-webkit-appearance:none}
select::-ms-expand{display:none}
select::-ms-value{color:currentColor}*/
table{border-collapse:collapse;border-spacing:0}
::-moz-selection{background-color:#B3D4FC;text-shadow:none}
::selection{background-color:#B3D4FC;text-shadow:none}
@media screen{[hidden~=screen]{display:inherit}
[hidden~=screen]:not(:active):not(:focus):not(:target){clip:rect(0 0 0 0)!important;position:absolute!important}
}
html
{
    height: 9999px;
}

body
{
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Yu Gothic', YuGothic, Verdana, Meiryo, 'M+ 1p', sans-serif;
    font-size: 10px;
    line-height: 1.75;
    position: relative;
    overflow: hidden;
    letter-spacing: 0;

    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*
{
    font-style: normal;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    max-height: 99999px;

    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

img
{
    display: block;
}

@font-face
{
    font-family: 'techo2018';

    src: url('data:application/x-font-ttf;charset=utf-8;base64,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') format('truetype');
}

[class*='icon-']:before
{
    font-family: 'techo2018';
}

.icon-line:before
{
    content: '\e902';
}

[class*='mdi-']:before
{
    font-family: 'Material Design Icons';
}

[class*='icon-']:before,
[class*='mdi-']:before
{
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    display: block;
    white-space: nowrap;
    letter-spacing: normal;
    text-transform: none;
    word-wrap: normal;

    direction: ltr;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#landscape
{
    font-size: 24px;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

#landscape .btn-fav
{
    display: none;
    cursor: pointer;
}

#landscape .darken
{
    color: #000;
    border-color: #000;
}

#landscape .darken svg > *
{
    fill: #000;
}

#landscape h2.darken
{
    text-shadow: 0 0 .15em rgba(255,255,255,.5);
}

#landscape .lighten
{
    color: #fff;
    border-color: #fff;
}

#landscape .lighten svg > *
{
    fill: #fff;
}

#landscape h2.lighten
{
    text-shadow: 0 0 .15em rgba(0,0,0,.5);
}

#landscape.ready #ui > div *:not(h1),
#landscape.ready #menu
{
    opacity: 0;
}

#landscape.ready #ui > div *:not(h1) *,
#landscape.ready #menu *
{
    -webkit-transition-delay: 0ms !important;
       -moz-transition-delay: 0ms !important;
        -ms-transition-delay: 0ms !important;
         -o-transition-delay: 0ms !important;
            transition-delay: 0ms !important;
    -webkit-transition-duration: 0ms !important;
       -moz-transition-duration: 0ms !important;
        -ms-transition-duration: 0ms !important;
         -o-transition-duration: 0ms !important;
            transition-duration: 0ms !important;
}

#landscape.ready #ui > div *:not(h1) a,
#landscape.ready #menu a
{
    cursor: default;
    pointer-events: none;
}

#visual
{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

#visual li
{
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0, 0, 0) scale(.8);
       -moz-transform: translate3d(0, 0, 0) scale(.8);
        -ms-transform: translate3d(0, 0, 0) scale(.8);
         -o-transform: translate3d(0, 0, 0) scale(.8);
            transform: translate3d(0, 0, 0) scale(.8);
    background: #eee url('/store/techo/2018/images/loading3.gif') no-repeat 50% 50%;
    -webkit-background-size: 1.33em auto;
       -moz-background-size: 1.33em auto;
            background-size: 1.33em auto;
}

#visual li.active
{
    display: block;
}

#visual li.ready div
{
    opacity: 0;
}

#visual li div
{
    width: 100%;
    height: 100%;
    -webkit-transition: opacity .3s;
       -moz-transition: opacity .3s;
        -ms-transition: opacity .3s;
         -o-transition: opacity .3s;
            transition: opacity .3s;
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
       -moz-background-size: cover;
            background-size: cover;
}

#ui
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#ui > div
{
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

#ui h1
{
    position: absolute;
    top: 2.42%;
    left: 1.36%;
    -webkit-transition: opacity .3s;
       -moz-transition: opacity .3s;
        -ms-transition: opacity .3s;
         -o-transition: opacity .3s;
            transition: opacity .3s;
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    white-space: nowrap;
    opacity: .25;
}

#ui h1 a
{
    display: block;
    width: 7em;
    height: .42em;
}

#ui h1 a svg
{
    width: 100%;
    height: 100%;
}

#ui h1 a svg > *
{
    -webkit-transition: fill .3s;
       -moz-transition: fill .3s;
        -ms-transition: fill .3s;
         -o-transition: fill .3s;
            transition: fill .3s;
}

#ui h2
{
    font-weight: normal;
    position: absolute;
    bottom: 2.42%;
    left: 1.36%;
    width: 24.42em;
    -webkit-transition: border .3s, color .3s, opacity .3s, text-shadow .3s;
       -moz-transition: border .3s, color .3s, opacity .3s, text-shadow .3s;
        -ms-transition: border .3s, color .3s, opacity .3s, text-shadow .3s;
         -o-transition: border .3s, color .3s, opacity .3s, text-shadow .3s;
            transition: border .3s, color .3s, opacity .3s, text-shadow .3s;
}

#ui h2 small
{
    font-size: 85.71%;
    font-weight: bold;
    line-height: 1.83;
}

#ui h2 small:not(:empty) + strong:before
{
    content: ' ';
}

#ui h2 strong
{
    font-weight: bold;
}

#ui h2 span
{
    font-size: 58.33%;
    line-height: 1.57;
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    min-height: 3.14em;
    padding-left: .71em;
    vertical-align: top;
    opacity: 0;
    border-left-width: .08em;
    border-left-style: solid;
}

#ui h2 span:first-child + span
{
    -webkit-transition: opacity .3s ease .3s;
       -moz-transition: opacity .3s ease .3s;
        -ms-transition: opacity .3s ease .3s;
         -o-transition: opacity .3s ease .3s;
            transition: opacity .3s ease .3s;
}

#ui h2 span:first-child + span ~ span
{
    -webkit-transition: opacity .3s;
       -moz-transition: opacity .3s;
        -ms-transition: opacity .3s;
         -o-transition: opacity .3s;
            transition: opacity .3s;
}

#ui ul
{
    -webkit-transition: opacity .3s;
       -moz-transition: opacity .3s;
        -ms-transition: opacity .3s;
         -o-transition: opacity .3s;
            transition: opacity .3s;
}

#ui ul:nth-of-type(1).disabled
{
    opacity: 0;
}

#ui ul:nth-of-type(1).disabled li a
{
    cursor: default;
    pointer-events: none;
}

#ui ul:nth-of-type(1) li:nth-child(1) a
{
    left: -100px;
    padding-left: 100px;
}

#ui ul:nth-of-type(1) li:nth-child(1) a:before
{
    right: calc(100% - 1.5em - 100px);
}

#ui ul:nth-of-type(1) li:nth-child(2) a
{
    right: -100px;
    padding-right: 100px;
}

#ui ul:nth-of-type(1) li:nth-child(2) a:before
{
    left: calc(100% - 1.5em - 100px);
}

#ui ul:nth-of-type(1) li a
{
    position: absolute;
    top: 50%;
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
    width: calc(2.72% + 3.33em);
    height: calc(100% - 9.66% - 6.67em);
    cursor: pointer;
    -webkit-transition: border .3s, color .3s, opacity .3s;
       -moz-transition: border .3s, color .3s, opacity .3s;
        -ms-transition: border .3s, color .3s, opacity .3s;
         -o-transition: border .3s, color .3s, opacity .3s;
            transition: border .3s, color .3s, opacity .3s;
    -webkit-transform: translate3d(0, -50%, 0);
       -moz-transform: translate3d(0, -50%, 0);
        -ms-transform: translate3d(0, -50%, 0);
         -o-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
    opacity: .25;
    background: rgba(0,0,0,0);
}

#ui ul:nth-of-type(1) li a:before
{
    font-size: 83.33%;
    position: absolute;
    top: calc(50% - .5em);
}

#ui ul:nth-of-type(2)
{
    position: absolute;
    right: 1.36%;
    bottom: 2.42%;
}

#ui ul:nth-of-type(2):before,
#ui ul:nth-of-type(2):after
{
    display: table;
    content: '';
}

#ui ul:nth-of-type(2):after
{
    clear: both;
}

#ui ul:nth-of-type(2) li
{
    float: left;
}

#ui ul:nth-of-type(2) li:first-child a.like
{
    color: #f00 !important;
    border-color: #f00 !important;
}

#ui ul:nth-of-type(2) li + li
{
    margin-left: .42em;
}

#ui ul:nth-of-type(2) li + li a
{
    border-right-width: .05em;
    border-right-style: solid;
}

#ui ul:nth-of-type(2) li a
{
    position: relative;
    display: block;
    width: 1.67em;
    height: 1.67em;
    -webkit-transition: border .3s, color .3s;
       -moz-transition: border .3s, color .3s;
        -ms-transition: border .3s, color .3s;
         -o-transition: border .3s, color .3s;
            transition: border .3s, color .3s;
    border-bottom-width: .05em;
    border-bottom-style: solid;
}

#ui ul:nth-of-type(2) li a:before
{
    font-size: 83.33%;
    position: absolute;
    top: calc(50% - .5em);
    left: calc(50% - .5em);
}

#ui p
{
    position: absolute;
    top: 2.42%;
    right: calc(50% - 1.75em);
    display: table;
    margin-top: -.08em;
    -webkit-transition: opacity .3s, color .3s;
       -moz-transition: opacity .3s, color .3s;
        -ms-transition: opacity .3s, color .3s;
         -o-transition: opacity .3s, color .3s;
            transition: opacity .3s, color .3s;
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    white-space: nowrap;
    color: #fff;
}

#ui p.disabled
{
    opacity: 0;
}

#ui p > span:nth-child(1)
{
    font-size: 58.33%;
    line-height: 1;
    display: table-cell;
    text-align: right;
}

#ui p > span:nth-child(1):after
{
    font-size: 85.71%;
    position: relative;
    top: -.1em;
    content: '/';
}

#ui p > span:nth-child(2)
{
    font-size: 50%;
    line-height: 1;
    display: table-cell;
    width: 3.5em;
    vertical-align: text-bottom;
}

#detail
{
    position: absolute;
    top: -9999px;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform .5s cubic-bezier(.455, .03, .515, .955), opacity .5s cubic-bezier(.455, .03, .515, .955);
       -moz-transition:    -moz-transform .5s cubic-bezier(.455, .03, .515, .955), opacity .5s cubic-bezier(.455, .03, .515, .955);
        -ms-transition:     -ms-transform .5s cubic-bezier(.455, .03, .515, .955), opacity .5s cubic-bezier(.455, .03, .515, .955);
         -o-transition:      -o-transform .5s cubic-bezier(.455, .03, .515, .955), opacity .5s cubic-bezier(.455, .03, .515, .955);
            transition:         transform .5s cubic-bezier(.455, .03, .515, .955), opacity .5s cubic-bezier(.455, .03, .515, .955);
    -webkit-transform: translate3d(0, 0, 0) scale(1.5);
       -moz-transform: translate3d(0, 0, 0) scale(1.5);
        -ms-transform: translate3d(0, 0, 0) scale(1.5);
         -o-transform: translate3d(0, 0, 0) scale(1.5);
            transform: translate3d(0, 0, 0) scale(1.5);
    opacity: 0;
    background: rgba(255,255,255,.9);

    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
            backface-visibility: hidden;
}

#detail.open
{
    -webkit-transform: translate3d(0, 0, 0) scale(1);
       -moz-transform: translate3d(0, 0, 0) scale(1);
        -ms-transform: translate3d(0, 0, 0) scale(1);
         -o-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
}

#detail > div
{
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
}

#detail > div dl
{
    position: absolute;
    top: 0;
    left: 50%;
    display: table;
    max-width: 80.98%;
    max-width: 24.83em;
    -webkit-transform: translate3d(-50%, 0, 0);
       -moz-transform: translate3d(-50%, 0, 0);
        -ms-transform: translate3d(-50%, 0, 0);
         -o-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
}

#detail > div dl > *
{
    display: table-cell;
    vertical-align: middle;
}

#detail > div dl dd
{
    width: 7.08em;
    height: 3.75em;
    border-right: #000 .05em solid;
}

#detail > div dl dd img
{
    width: 94.12%;
}

#detail > div dl dt
{
    padding-left: .38em;
    text-align: left;
}

#detail > div dl dt small
{
    font-size: 85.71%;
    font-weight: bold;
    line-height: 1.83;
    display: block;
}

#detail > div dl dt strong
{
    font-weight: bold;
}

#detail > div dl dt span
{
    font-size: 58.33%;
    line-height: 1.57;
    display: block;
}

#detail > div ul
{
    position: absolute;
    left: 0;
    width: 100%;
}

#detail > div ul:nth-of-type(1)
{
    height: 1.67em;
}

#detail > div ul:nth-of-type(1) li
{
    display: inline-block;
    vertical-align: top;
}

#detail > div ul:nth-of-type(1) li:first-child a
{
    margin-right: 1.67em;
}

#detail > div ul:nth-of-type(1) li:first-child a span
{
    overflow: hidden;
    width: 8.5em;
    -webkit-transition: width .3s;
       -moz-transition: width .3s;
        -ms-transition: width .3s;
         -o-transition: width .3s;
            transition: width .3s;
    white-space: nowrap;
}

#detail > div ul:nth-of-type(1) li:first-child a span:after
{
    content: 'に追加';
    -webkit-transition: opacity .3s;
       -moz-transition: opacity .3s;
        -ms-transition: opacity .3s;
         -o-transition: opacity .3s;
            transition: opacity .3s;
}

#detail > div ul:nth-of-type(1) li:first-child a.like
{
    color: #f00;
    border-bottom-width: .05em;
    border-bottom-style: solid;
}

#detail > div ul:nth-of-type(1) li:first-child a.like span
{
    width: 5em;
}

#detail > div ul:nth-of-type(1) li:first-child a.like span:after
{
    opacity: 0;
}

#detail > div ul:nth-of-type(1) li + li a
{
    border-right: #000 .05em solid;
}

#detail > div ul:nth-of-type(1) li a
{
    position: relative;
    display: block;
    overflow: hidden;
    height: 1.67;
    padding: 0 .83em 0 2.08em;
    -webkit-transition: color .3s;
       -moz-transition: color .3s;
        -ms-transition: color .3s;
         -o-transition: color .3s;
            transition: color .3s;
    text-align: left;
    color: #000;
    border-bottom-width: .05em;
    border-bottom-style: solid;
}

#detail > div ul:nth-of-type(1) li a:before
{
    font-size: 83.33%;
    position: absolute;
    top: calc(50% - .5em);
    left: .5em;
}

#detail > div ul:nth-of-type(1) li a span
{
    font-size: 66.67%;
    line-height: 2.31;
    display: block;
}

#detail > div ul:nth-of-type(2)
{
    height: 1.25em;
}

#detail > div ul:nth-of-type(2) li
{
    display: inline-block;
    vertical-align: top;
}

#detail > div ul:nth-of-type(2) li + li
{
    margin-left: 1.67em;
}

#detail > div ul:nth-of-type(2) li a
{
    display: block;
    overflow: hidden;
    height: 1.25;
    padding: 0 .42em;
    text-align: left;
    color: #000;
    border-right: #000 .05em solid;
    border-bottom: #000 .05em solid;
}

#detail > div ul:nth-of-type(2) li a span
{
    font-size: 58.33%;
    line-height: 1.93;
    display: block;
}

#detail > div ul:nth-of-type(3)
{
    height: 1.25em;
}

#detail > div ul:nth-of-type(3) li
{
    display: inline-block;
    vertical-align: top;
}

#detail > div ul:nth-of-type(3) li + li
{
    margin-left: 1.25em;
}

#detail > div ul:nth-of-type(3) li a
{
    position: relative;
    display: block;
    color: #000;
}

#detail > div ul:nth-of-type(3) li a iframe
{
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
}

#menu
{
    position: absolute;
    top: 2.42%;
    right: 1.36%;
    width: 1.67em;
    height: 1.67em;
    cursor: pointer;
    -webkit-transition: border .3s, color .3s;
       -moz-transition: border .3s, color .3s;
        -ms-transition: border .3s, color .3s;
         -o-transition: border .3s, color .3s;
            transition: border .3s, color .3s;
    border-bottom-width: .05em;
    border-bottom-style: solid;
}

#menu.open
{
    color: #000 !important;
    border-color: #000 !important;
}

#menu.open span:nth-child(1)
{
    -webkit-transform: translate3d(0, 0, 0) scale(0);
       -moz-transform: translate3d(0, 0, 0) scale(0);
        -ms-transform: translate3d(0, 0, 0) scale(0);
         -o-transform: translate3d(0, 0, 0) scale(0);
            transform: translate3d(0, 0, 0) scale(0);
}

#menu.open span:nth-child(2)
{
    -webkit-transform: translate3d(0, 0, 0) scale(1);
       -moz-transform: translate3d(0, 0, 0) scale(1);
        -ms-transform: translate3d(0, 0, 0) scale(1);
         -o-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1);
}

#menu span
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform .5s;
       -moz-transition:    -moz-transform .5s;
        -ms-transition:     -ms-transform .5s;
         -o-transition:      -o-transform .5s;
            transition:         transform .5s;
}

#menu span:before
{
    font-size: 83.33%;
    position: absolute;
    top: calc(50% - .5em);
    left: calc(50% - .5em);
}

#menu span:nth-child(1)
{
    -webkit-transform: translate3d(0, 0, 0) scale(1);
       -moz-transform: translate3d(0, 0, 0) scale(1);
        -ms-transform: translate3d(0, 0, 0) scale(1);
         -o-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1);
}

#menu span:nth-child(2)
{
    -webkit-transform: translate3d(0, 0, 0) scale(0);
       -moz-transform: translate3d(0, 0, 0) scale(0);
        -ms-transform: translate3d(0, 0, 0) scale(0);
         -o-transform: translate3d(0, 0, 0) scale(0);
            transform: translate3d(0, 0, 0) scale(0);
}

#portrait
{
    font-size: 3.26vw;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0);
}

#portrait p
{
    font-size: 58.33%;
    font-weight: bold;
    line-height: 1.57;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 39.4%;
    padding: 2.57em 2.86em;
    -webkit-transform: translate3d(-50%, -50%, 0);
       -moz-transform: translate3d(-50%, -50%, 0);
        -ms-transform: translate3d(-50%, -50%, 0);
         -o-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0);
    white-space: nowrap;
    color: #fff;
    background: rgba(0,0,0,.9);
}

#portrait p.ready
{
    visibility: hidden;
}

#portrait p small
{
    font-size: 85.71%;
    position: relative;
    display: block;
    margin-top: 1.57em;
    padding-left: 1em;
}

#portrait p small:before
{
    position: absolute;
    left: 0;
    content: attr(data-marker);
}

body.iframe
{
    width: 96em !important;
    height: 54em !important;
}

body.iframe #detail > div
{
    max-height: 11em;
}

body.iframe #detail > div ul:nth-of-type(1)
{
    bottom: 26.52%;
}

body.iframe #detail > div ul:nth-of-type(2)
{
    display: none;
}

body.iframe #detail > div ul:nth-of-type(3)
{
    bottom: 0;
}

body:not(.iframe)[data-orientation='0'] #landscape
{
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(90deg);
       -moz-transform: translate3d(-50%, -50%, 0) rotate(90deg);
        -ms-transform: translate3d(-50%, -50%, 0) rotate(90deg);
         -o-transform: translate3d(-50%, -50%, 0) rotate(90deg);
            transform: translate3d(-50%, -50%, 0) rotate(90deg);
}

body:not(.iframe)[data-orientation='0'] #portrait
{
    font-size: 5.8vw;
    display: block;
}

body:not(.iframe)[data-orientation='0'] #portrait p
{
    width: 70.05%;
}

body:not(.iframe) #detail > div
{
    max-height: 13.92em;
}

body:not(.iframe) #detail > div ul:nth-of-type(1)
{
    bottom: 41.92%;
}

body:not(.iframe) #detail > div ul:nth-of-type(2)
{
    bottom: 20.96%;
}

body:not(.iframe) #detail > div ul:nth-of-type(3)
{
    bottom: 0;
}

/*# sourceMappingURL=dev/store/techo/ja/2018/visual/styl/visual.css.map */