@charset "utf-8";

/*
 * My House Sign Web Site ver.2  --  Style CSS
 * Author : Hideyuki Koyama -MONTAGE lab.(http://www.montagelab.jp)
 * Latest Updated : 2018.07.17
 *
 *
 * Table of Contents
 *
 * 0.0 - Import fonts
 * 0.1 - Reset css
 * 1.0 - Typography
 * 2.0 - Alignment
 * 3.0 - Links
 * 4.0 - Navigations
 * 5.0 - layout
 * 6.0 - Clearfix
 * 7.0 - 
 *  - 7.1 - series 
 *  - 7.2 - items
 *  - 7.3 - Design
 *  - 7.4 - gallery
 *  - 7.5 - Modal window
 * 8.0 - Forms
 * 9.0 rangeslider
 * 10.0 mCustomScrollbar
 * 11.0 - Media Queries
 */


/**
/* 0.0 Import fonts
 */

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');

/* 
/* 0.1 Reset css
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 62.5%;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    background: #fff;
    line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption,
th,
td {
    font-weight: normal;
    text-align: left;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}

blockquote,
q {
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    quotes: none;
}

input,
select {
    vertical-align: middle;
}

a:link,
a:visited {}

a:focus {
    outline: none;
}

a:hover,
a:active {
    outline: 0;
}

a img {
    border: 0;
}

img {
    vertical-align: bottom;
}


/* **************************************************************************** */


/*
/* 1.0 Typography
/*
/* **************************************************************************** */


/**
 * 1.2 Typo
 */

body,
button,
input,
select,
textarea {
    font-family: "Lato", "Hiragino Sans", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ ゴシック", sans-serif;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1;
    color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    font-weight: 700;
}

h1+h2,
h2+h3,
h3+h4,
h4+h5,
h5+h6 {
    margin-top: 0 !important;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.6rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.6rem;
}

h5 {
    font-size: 1.4rem;
}

h6 {
    font-size: 1.4rem;
}

section h1:first-child,
section h2:first-child,
section h3:first-child,
section h4:first-child,
section h5:first-child,
section h6:first-child,
.content h1:first-child,
.content h2:first-child,
.content h3:first-child,
.content h4:first-child,
.content h5:first-child,
.content h6:first-child,
.page-content h1:first-child,
.page-content h2:first-child,
.page-content h3:first-child,
.page-content h4:first-child,
.page-content h5:first-child,
.page-content h6:first-child,
.section-content h1:first-child,
.section-content h2:first-child,
.section-content h3:first-child,
.section-content h4:first-child,
.section-content h5:first-child,
.section-content h6:first-child {
    margin-top: 0 !important;
}

p {}

b,
strong {
    font-weight: 700;
}

em {
    font-style: normal;
}

dfn,
cite,
i {
    font-style: italic;
}

blockquote {
    border-left: 4px solid #707070;
    border-left: 4px solid rgba(51, 51, 51, 0.7);
    color: #707070;
    color: rgba(51, 51, 51, 0.7);
    font-size: 18px;
    font-size: 1.8rem;
    font-style: italic;
    line-height: 1.6667;
    margin-bottom: 1.6667em;
    padding-left: 0.7778em;
}

blockquote p {
    margin-bottom: 1.6667em;
}

blockquote>p:last-child {
    margin-bottom: 0;
}

blockquote cite,
blockquote small {
    color: #333;
    font-size: 15px;
    font-size: 1.5rem;
    font-family: "Noto Sans", sans-serif;
    line-height: 1.6;
}

blockquote em,
blockquote i,
blockquote cite {
    font-style: normal;
}

blockquote strong,
blockquote b {
    font-weight: 400;
}

address {
    font-style: normal;
    margin: 0;
}

code,
kbd,
tt,
var,
samp,
pre {
    font-family: Inconsolata, monospace;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

pre {
    background-color: transparent;
    background-color: rgba(0, 0, 0, 0.01);
    border: 1px solid #eaeaea;
    border: 1px solid rgba(51, 51, 51, 0.1);
    line-height: 1.2;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 0.8em;
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

abbr[title] {
    border-bottom: 1px dotted #eaeaea;
    border-bottom: 1px dotted rgba(51, 51, 51, 0.1);
    cursor: help;
}

mark,
ins {
    background-color: #fff9c0;
    text-decoration: none;
}

sup,
sub {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    bottom: 1ex;
}

sub {
    top: .5ex;
}

small {
    font-size: 75%;
}

large {
    font-size: 125%;
}


/**
 * - 1.3 Lists
 */

ul,
ol {
    margin: 1.6em 0 1.6em;
    list-style-position: outside;
    line-height: 1.5;
}

ul {
    margin-left: 0;
    list-style: none;
}

ol {
    margin-left: 0;
    list-style: decimal;
}

li>ul,
li>ol {
    margin: 1em 0 1em 1.3333em;
}

li>ol li:before {
    content: '';
    width: 0;
    height: 0;
    border: 0 !important;
}

nav ul {
    margin: 0;
}

h1+ul,
h2+ul,
h3+ul,
h4+ul,
h5+ul,
h6+ul,
h1+ol,
h2+ol,
h3+ol,
h4+ol,
h5+ol,
h6+ol {
    margin-top: 0 !important;
}

ul.reset,
ul.reset li,
ol.reset,
ol.reset li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    line-height: 1.5;
}

ul.reset li:before,
ul.reset li:after {
    content: '';
    width: 0;
    height: 0;
    border: 0 !important;
}

ul.list li,
ul li.list {
    position: relative;
    margin: 0 0 0.8em;
    padding-left: 10px;
}

ul.list li:before,
ul li.list:before {
    position: absolute;
    content: '';
    top: 6px;
    left: 0;
    width: 3px;
    height: 3px;
    border: solid transparent;
    border-width: 4px 0px 4px 7px;
    border-left-color: #7F9FE1;
}

ol li {
    position: relative;
    margin: 0 0 0.8em;
}

dl {
    margin-bottom: 1.6em;
    line-height: 1.5;
}

dt {
    font-weight: bold;
}

dd {
    margin-bottom: 1.6em;
}


/**
 * - 1.4 Table
 */

table,
th,
td {
    border: 1px solid #eaeaea;
    border: 1px solid rgba(51, 51, 51, 0.1);
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    border-width: 1px 0 0 1px;
    margin: 0 0 1.6em;
    table-layout: fixed;
    /* Prevents HTML tables from becoming too wide */
    width: 100%;
}

caption,
th,
td {
    padding: 0.4em;
    text-align: left;
    font-weight: normal;
}

th {
    border-width: 0 1px 1px 0;
    font-weight: 700;
}

td {
    border-width: 0 1px 1px 0;
}

caption {
    margin: 0.2em 0;
    color: #666;
    caption-side: bottom;
}

thead th {
    vertical-align: middle;
    font-weight: bold;
    background-color: #EAEBE7;
}

thead td {
    vertical-align: middle;
}

tbody th {
    vertical-align: middle;
    background-color: #D4DABD;
}

tbody td {
    vertical-align: middle;
    border-color: #ccc;
    border-width: 1px 1px 1px 1px;
}

tfoot {
    border-top: 3px double #999;
}

tfoot th {
    vertical-align: middle;
    font-weight: bold;
    background-color: #EAEBE7;
}

tfoot td {
    vertical-align: middle;
}

table ul,
table ol {
    margin: .6em 0 .6em 0em;
    list-style-position: outside;
    line-height: 1.25;
}

table ul li:before {
    top: 4px !important;
}

table.text-align-center,
table.text-align-center th,
table.text-align-center td,
tr.center th,
tr.center td {
    text-align: center;
}


/**
 * - 1.5 Elements
 */

::selection {
    background: #CDD3CD;
    color: #fff;
}

::-moz-selection {
    background: #CDD3CD;
    color: #fff;
}

hr {
    background-color: transparent;
    border: 0;
    height: 1px;
    margin-bottom: 1.6em;
}

img {
    -ms-interpolation-mode: bicubic;
    border: 0;
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
}

.image img {
    width: 100%;
}

figure {}

figcaption {}

del {
    opacity: 0.8;
}


/**
 * - 1.6 Decoration
 */

.attention {
    color: #f00;
}

.attentionBold {
    color: #f00;
    font-weight: bold;
}

.note {
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.5;
    color: #666;
}

.caption {
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.5;
    color: #666;
}


/* color */

.dark {
    color: #000;
}

.pale {
    color: #999;
}


/* family */

.serif {
    font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.sans {
    font-family: "Lato", Helvetica, sans-serif;
}


/* style */

.normal {
    font-style: normal;
}

.italic {
    font-style: italic;
}


/* **************************************************************************** */


/*
/* 2.0 Alignments
/*
/* **************************************************************************** */

.alignleft {
    display: inline;
    /* float: left; Delete 2018/11/08 */
    margin: 0 2.6rem 1rem 0;
}

.alignright {
    display: inline;
    /* float: right; Delete 2018/11/08 */
    margin: 0 0 1rem 2.6rem;
}

.aligncenter {
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 1rem;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}


/* **************************************************************************** */


/*
/* 3.0 Links
/*
/* **************************************************************************** */

a {
    color: #234100;
    text-decoration: none;
    outline: none;
    transition: all 0.2s ease;
}

a:hover,
a:focus {
    color: #23ab00;
}

a:active {}


/* **************************************************************************** */


/*
/* 4.0 Navigation
/*
/* **************************************************************************** */


/**
 * - .switch
 */

.switch {
    font-size: 0;
}

.switch ul {
    text-align: right;
}

.switch ul li {
    display: inline-block;
    margin: 8px 4px;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 21px 21px;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all 0.2s ease;
    cursor: pointer;
}

.switch .switch-l {
    background-image: url(../img/common/icon-list-l.png);
}

.switch .switch-s {
    background-image: url(../img/common/icon-list-s.png);
}

.switch .current {
    filter: grayscale(100%);
    opacity: 1;
}

.switch ul li:hover {
    box-shadow: 0 0 4px rgba(0, 0, 0, .4);
}

.switch ul li.current:hover {
    box-shadow: none;
    cursor: default;
}


/* **************************************************************************** */


/*
/* 5.0 layout
/*
/* **************************************************************************** */

body {
    text-align: center;
}

.not {
    margin-top: 0 !important;
    vertical-align: top;
}

.nor {
    margin-right: 0 !important;
}

.nob {
    margin-bottom: 0 !important;
}

.nol {
    margin-left: 0 !important;
}

.nobt {
    border-top: none !important;
}

.nobr {
    border-right: none !important;
}

.nobb {
    border-bottom: none !important;
}

.nobl {
    border-left: none !important;
}

.bt {
    border-top: 1px solid #ccc !important;
}

.br {
    border-right: 1px solid #ccc !important;
}

.bb {
    border-bottom: 1px solid #ccc !important;
}

.bl {
    border-left: 1px solid #ccc !important;
}

.hide {
    display: none;
}

.pc {
    display: none;
}

span.pc {
    display: none;
}

.spn {
    display: block;
}

span.spn {
    display: inline;
}

.check {
    position: fixed;
    z-index: 9999;
}


/**
 * - 5.1 loading
 */

#loading {
    position: fixed;
    z-index: 9999;
    top: 50%;
    left: 50%;
    width: 100%;
}

#loading span {
    display: block;
    position: absolute;
    top: -25px;
    left: -25px;
    width: 50px;
    height: 50px;
    background: transparent url(../img/common/Rolling.svg) no-repeat center center / 50px 50px;
}


/**
 * - 5.2 wrapper Include
 */

#wrapper {
    margin: 0 auto;
    text-align: left;
    background: #fff;
}

#headerwrap {}

#containerwrap {}


/**
 * - 5.3 Header Include
 */

.site-header {
    position: relative;
    z-index: 10;
    padding: 2px 0 0;
    background-color: #94A943;
}

.site-title {
    margin: 0 auto;
    padding: 0;
    width: 138px;
    height: 39px;
    /* width: 110px; */
    /* height: 54px; */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: url(../img/common/logo-header.png) no-repeat center top / 138px 39px;
    /* background: url(../img/common/logo-header.png) no-repeat center top / 110px 54px; */
}

.site-header .site-title a {
    display: block;
}

.site-header #headnav {
    position: absolute;
    top: 10px;
    right: 10px;
}

.site-header #headnav li {
    display: inline-block;
    vertical-align: top;
}

.site-header #headnav .hn_howto a {
    display: block;
    width: 34px;
    height: 34px;
    font-size: 0;
    background: url(../img/common/hn_howto.svg) no-repeat center center / 12px 18px;
    background-color: rgba(255, 255, 255, .5);
    border-radius: 50px;
}

.site-header #headnav .hn_howto a:hover {
    background-color: rgba(255, 255, 255, .8);
}

.site-header .headstep {
    padding: 8px 0 5px;
    background-color: #374112;
}

.site-header .headstep ul {
    text-align: center;
    font-size: 0;
    line-height: 1.2;
}

.site-header .headstep ul li {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
    width: 7em;
    font-size: 0.9rem;
    font-weight: bold;
    color: rgba(255, 255, 255, .5);
}

.site-header .headstep ul li em {
    display: block;
    height: 20px;
    font-size: 1.8rem;
    font-size: 0;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 12px 17px;
    opacity: 0.5;
}

.site-header .headstep ul li:nth-child(1) em {
    background-image: url(../img/common/step01.svg);
}

.site-header .headstep ul li:nth-child(2) em {
    background-image: url(../img/common/step02.svg);
}

.site-header .headstep ul li:nth-child(3) em {
    background-image: url(../img/common/step03.svg);
}

.site-header .headstep ul li:nth-child(4) em {
    background-image: url(../img/common/step04.svg);
}

.site-header .headstep ul li:nth-child(5) em {
    background-image: url(../img/common/step05.svg);
}


/**
 * - 5.4 container Include
 * 
 */

#container {}

.content {}

article {}

section {}

.section-header {}

.section-title {}

.section-content {}


/**
 * - 5.5 footer Include
 */

#footerwrap {
    position: relative;
    z-index: 900;
    border-top: 1px solid #fff;
}

.notes {
    padding: 3rem 10%;
    background-color: #EAEBE7;
}

.notes h5 {
    font-size: 1.2rem;
    line-height: 1.8;
}

.notes p {
    font-size: 1.1rem;
    line-height: 1.8;
}

.notes em {
    color: #23AB00;
}

.notes span {}

#footerwrap .notes {
    padding: 3em 10%;
}

.site-footer {
    padding: 24px 8%;
    font-size: 1.2rem;
    text-align: center;
    color: #374112;
    background-color: #94A943;
}

#copyright {
    margin: 0;
    padding: 0;
    font-size: 1rem;
}


/* **************************************************************************** */


/*
/* 6.0 - clearfix
/*
/* **************************************************************************** */

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html .clearfix,
*:first-child+html .clearfix {
    zoom: 1;
}


/* IE6,IE7 */


/* **************************************************************************** */


/*
/* 7.0 - .home / z-index = 0 - 99
/*
/* **************************************************************************** */

.home {}

.home .billboard {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url(../img/home/billboard-01.jpg);
}

.home .section-content {
    position: relative;
    z-index: 10;
    padding: 100px 0 40px;
    width: 100%;
    min-height: 100vh;
    background-color: rgba(0, 0, 0, .4);
    /* background-color: rgba(0, 77, 0, .7); */
}

.home .home-title {}

.home .home-logo {
    margin: 0 0 50px;
    font-size: 0;
}

.home .home-logo .subtitle {
    position: relative;
    display: block;
    margin: 0 0 14px;
    height: 49px;
    background: url(../img/common/home-logo-sub.svg) no-repeat center top / 206px auto;
}

.home .home-logo .maintitle {
    position: relative;
    display: block;
    height: 160px;
    /* height: 100px; */
    background: url(../img/common/home-logo.svg) no-repeat center top / 306px auto;
    /* background: url(../img/common/home-logo.svg) no-repeat center top / 206px auto; */
}

.home .home-lead {
    margin: 0 8%;
    padding: 3em 0;
    font-size: 1.3rem;
    line-height: 1.8;
    color: #fff;
}

.home .home-nav {
    margin: 12px 0;
}

.home .recommended {
    margin: 0 8%;
    padding: 3em 0;
    font-size: 1.3rem;
    line-height: 1.8;
    color: #fff;
}

.home .home-nav ul {
    text-align: center;
    font-size: 0;
}

.home .home-nav li {
    display: inline-block;
    vertical-align: top;
    margin: 2%;
    width: 40%;
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: bold;
}

.home .home-nav li span {
    display: block;
}

.home .home-nav li a {
    position: relative;
    display: block;
    padding: 1.5em 1em 1em;
    background-color: #fff;
    border: 1px solid rgba(0, 77, 0, .7);
    border-radius: 5px;
}

.home .home-nav li a:after {
    position: absolute;
    top: 50%;
    right: 10px;
    content: '';
    width: 7px;
    height: 7px;
    border: solid #296820;
    border-width: 1px 1px 0 0;
    transform: rotate(45deg);
    transition: all 0.2s ease;
}

.home .home-nav li a:hover {
    border-color: #fff;
}

.home .home-nav li a:hover:after {
    right: 6px;
}

.home .loaddesign {
    position: relative;
    margin: 0 8%;
}

.home .loaddesign input[type="text"] {
    height: 37px;
    font-size: 1.3rem;
    border: 0;
    border-radius: 3px;
    box-shadow: inset 1px 2px 4px rgba(0, 0, 0, .15);
}

.home .loaddesign input[type="submit"] {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0;
    width: 40px;
    height: 37px;
    background: #94A943 url(../img/common/arrow-submit.svg) no-repeat center center / 10px 17px;
    border-radius: 0 3px 3px 0;
    transition: background-color 0.2s ease;
}

.home .loaddesign input[type="submit"]:hover {
    background-color: #AED31E;
}

.home .loaddesign input[type="submit"]:active {
    box-shadow: inset 1px 2px 4px rgba(0, 0, 0, .2);
}

.home .manualLink {
    margin: 0 11%;
    padding: 3em 0 1em;
    text-align: center;
    /* font-size: 1rem; */
    /* line-height: 1; */
    /* color: #fff; */
}

.home .manualLink img {
    width: 300px;
}

.nextprev {
    padding: 3rem 8%;
    text-align: center;
    font-size: 0;
}

.nextprev div {
    display: inline-block;
    margin: 0;
    padding: 0.8em 0;
    width: 46%;
    text-align: center;
    font-size: 1.6rem;
    border: 4px solid #94A943;
    box-sizing: padding-box;
    transition: all 0.2s ease;
    cursor: pointer;
}

.nextprev div:nth-child(2) {
    margin-left: 8%;
}

.nextprev .back {
    color: #94A943;
}

.nextprev .next {
    color: #fff;
    background-color: #94A943;
}

.nextprev .print {
    color: #fff;
    background-color: #94A943;
}

.nextprev .back:hover {
    border-color: #A2C617;
}

.nextprev .next:hover,
.nextprev .print:hover {
    background-color: #A2C617;
    border-color: #A2C617;
}

.sec-preview .nextprev {
    padding: 2rem 0;
}

.sec-textinput .nextprev {
    padding: 2rem 0;
}

.sec-fixing .nextprev {
    padding: 2rem 0;
}


/* **************************************************************************** */


/*
/* 7.1 - series / monchu / z-index = 100 - 199
/*
/* **************************************************************************** */

.sec-series {
    position: relative;
    z-index: 100;
    background-color: #fff;
}

.sec-series .section-content {}

.sec-series .section-content ul {
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 0;
}

.sec-series .section-content ul li {
    border-bottom: 2px solid #fff;
}

.sec-series .section-content ul li:last-child {
    border-bottom: 1px solid #ddd;
}

.sec-series .section-content .image {
    position: relative;
    padding: 10%;
    text-align: center;
    background: radial-gradient(ellipse farthest-corner, #F6F7F7, #EAECEC);
}

.sec-series .section-content .image:after {
    position: absolute;
    bottom: -10px;
    left: calc((100% - 146px)/2);
    content: '';
    width: 18px;
    height: 18px;
    background-color: #fff;
    transform: rotate(45deg);
}

.sec-series .section-content .image img {
    transition: all 0.4s ease;
}

.sec-series .section-content .image {
    min-height: calc( 33.33vw);
}

.sec-series .section-content .image img {
    display: inline-block;
    vertical-align: middle;
    width: auto !important;
    max-width: 100%;
    max-height: 375px;
}

.sec-series .section-content .image span {
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: calc( 26vw);
    background-color: #f00;
}

.sec-series .section-content .name {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: calc(100% - 134px);
    padding: 0 1em;
    font-size: 1.4rem;
    font-weight: bold;
}

.sec-series .section-content .b_choice {
    display: inline-block;
    vertical-align: middle;
    width: 134px;
}

.sec-series .section-content .b_choice a {
    display: block;
    background-color: #94A943;
}

.sec-series .section-content .b_choice a:hover {
    background-color: #A2C617;
}

.sec-series .section-content .b_choice span {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.sec-series .section-content .b_choice .sbl {
    width: 134px;
    font-size: 1.4rem;
    font-weight: 500;
    color: #fff;
}

.sec-series .section-content .b_choice .sbs {
    width: 0;
    height: 134px;
    color: #222;
}

.sec-series .section-content ul.slist li {
    padding: 14px 0;
    border-bottom: 1px solid #ddd;
}

.sec-series .section-content ul.slist .image {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 16px;
    padding: 0;
    width: 60px;
    height: 60px;
}

.sec-series .section-content ul.slist .image {
    min-height: 60px;
}

.sec-series .section-content ul.slist .image:after {
    width: 0;
    height: 0;
}

.sec-series .section-content ul.slist .image img {
    width: auto;
    height: auto;
    max-width: 60px;
    max-height: 60px;
}

.sec-series .section-content ul.slist .image span {
    height: 60px;
}

.sec-series .section-content ul.slist .name {
    width: calc(100% - 136px);
    padding: 0 1em;
    font-size: 1.2rem;
}

.sec-series .section-content ul.slist .b_choice {
    width: 60px;
}

.sec-series .section-content ul.slist .b_choice a {
    position: relative;
    height: 60px;
    background-color: #fff;
}

.sec-series .section-content ul.slist .b_choice span {}

.sec-series .section-content ul.slist .b_choice .sbl {
    width: 0;
    height: 60px;
    font-size: 0;
}

.sec-series .section-content ul.slist .b_choice .sbs {
    width: 60px;
    height: auto;
    text-align: left;
    font-size: 1.3rem;
}

.sec-series .section-content ul.slist .b_choice .sbs:after {
    position: absolute;
    top: 50%;
    right: 18px;
    content: '';
    margin: -6px 0 0;
    width: 10px;
    height: 10px;
    border: solid #296820;
    border-width: 1px 1px 0 0;
    transform: rotate(45deg);
    transition: all 0.2s ease;
}

.sec-series .section-content ul.slist .b_choice a:hover .sbs:after {
    right: 10px;
}

.sec-kabe .section-header {
    padding: 32px 0 0;
}

.sec-monchu .section-content .image {
    padding: 0;
}

.sec-monchu .section-content .image img {
    max-height: 100%;
}

.masonry:after {
    content: '';
    display: block;
    clear: both;
}

.masonry .grid-sizer,
.masonry .item {
    width: auto;
    transition: 0.6s ease-in-out;
}


/* **************************************************************************** */


/*
/* 7.2 - items / z-index = 200 - 299
/*
/* **************************************************************************** */

.sec-items {
    position: relative;
    z-index: 200;
    background-color: #fff;
}

.sec-items .section-header {
    position: relative;
}

.sec-items .section-header .image {
    padding: 10%;
    text-align: center;
    background: radial-gradient(ellipse farthest-corner, #F6F7F7, #EAECEC);
}

.sec-items .section-header .name {
    position: relative;
    margin: 0;
    padding: 3em 8%;
    text-align: left;
    font-size: 1.3rem;
    line-height: 1.5;
    font-weight: 500;
    color: #296820;
}

.sec-items .section-header .name p {
    font-size: 1.5rem;
    font-weight: 600;
}

.sec-items .section-header .name small {
    display: block;
    font-size: 1.4rem;
    font-weight: 300;
}

.sec-items .section-header .name:before {
    position: absolute;
    top: -10px;
    left: 50%;
    content: '';
    margin: 0 0 0 -10px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    transform: rotate(45deg);
}

.sec-items .section-header .caption {
    padding: 1em 8%;
}

.sec-items .section-content ul {
    margin: 0;
    padding: 0;
    font-size: 0;
}

.sec-items .section-content ul li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 0 0 1em;
    width: 50%;
    font-size: 1.2rem;
    background: radial-gradient(ellipse farthest-corner, #F6F7F7, #EAECEC);
}

.sec-items .section-content ul li:nth-child(odd) {
    margin: 0 1px 2px 0;
    width: calc( 50% - 1px);
}

.sec-items .section-content ul li:nth-child(even) {
    margin: 0 0 2px 1px;
    width: calc( 50% - 1px);
}

.sec-items .section-content ul li a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    border: 0px solid #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sec-items .section-content ul li a:hover {
    border: 8px solid #fff;
}

.sec-items .section-content ul li.current a {
    border: 3px solid #18BEFF;
}

.sec-items .section-content .image {
    padding: 14% 14% 4%;
    text-align: center;
    height: calc( 44vw) !important;
}

.sec-items .section-content .image img {
    display: inline-block;
    vertical-align: middle;
    width: auto !important;
    max-width: 100%;
    max-height: 100%;
}

.sec-items .section-content .image span {
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: calc( 36vw);
    background-color: #f00;
}

.sec-items .section-content p {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 1.2rem;
}

.sec-items .section-content .name {}

.sec-items .section-content .detail {
    display: block;
    margin: 2px 14%;
    color: #333;
    background-color: #fafafa;
}


/* **************************************************************************** */


/*
/* 7.3 - Design / z-index = 1000 - 

   	.sec-design
   		- .section-content
   		- - .canvas
   		- - .editerwrap
   		- - - .sec-layout
   		- - - .sec-input
   		- - - .sec-preview
/* **************************************************************************** */

.sec-design {
    position: relative;
    z-index: 1000;
    background: #EAECEC;
    background: linear-gradient(180deg, #EAECEC, #EEEFEF, #EAECEC);
}

.canvas {
    width: 100%;
    height: 100vw;
    background: radial-gradient(ellipse farthest-corner, #F6F7F7, #EAECEC);
}


/* **************************************************************************** */


/*
/* 7.3.1 - layout / z-index = 1100 - 1199
/*
/* **************************************************************************** */

.sec-layout {}

.layout-header {
    position: relative;
    padding: 3rem 8%;
}

.layout-header:before {
    position: absolute;
    top: -10px;
    left: 50%;
    content: '';
    margin: 0 0 0 -10px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    transform: rotate(45deg);
}

.layout-header p {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.5;
    font-weight: 500;
    color: #296820;
}

.layout-header .btn {
    text-align: center;
}

.layout-header .btn span {
    display: inline-block;
    padding: 0.8em 0;
    width: 44%;
    color: #fff;
    background-color: #94A943;
    border: 4px solid #94A943;
}

.sec-layout .layoutlist ul {
    margin: 0;
    padding: 0;
    font-size: 0;
}

.sec-layout .layoutlist ul li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 50%;
    font-size: 1.2rem;
    background: radial-gradient(ellipse farthest-corner, #F6F7F7, #EAECEC);
}

.sec-layout .layoutlist ul li:nth-child(odd) {
    margin: 0 1px 2px 0;
    width: calc( 50% - 1px);
}

.sec-layout .layoutlist ul li:nth-child(even) {
    margin: 0 0 2px 1px;
    width: calc( 50% - 1px);
}

.sec-layout .layoutlist .image {
    position: relative;
    padding: 14%;
}

.sec-layout .layoutlist ul li a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 14%;
    width: 100%;
    height: 100%;
    border: 0px solid #fff;
    transition: all 0.2s ease;
}

.sec-layout .layoutlist ul li a:hover {
    border: 8px solid #fff;
}

.sec-layout .layoutlist ul li.current a {
    border: 3px solid #18BEFF;
}


/* **************************************************************************** */


/*
/* 7.3.2 - Input / z-index = 1200 - 1299
/*
/* **************************************************************************** */

.sec-input {
    font-size: 1.3rem;
}

.sec-input .swich {}

.sec-input .swich ul {
    text-align: center;
    font-size: 0;
}

.sec-input .swich ul li {
    display: inline-block;
    width: 50%;
    font-size: 1.2rem;
}

.sec-input .swich ul li a {
    position: relative;
    display: block;
    padding: 3.4rem 0 1rem;
    color: #fff;
    background-color: #94A943;
    background-position: center top 8px;
    background-repeat: no-repeat;
    background-size: 26px auto;
}

.sec-input .swich ul li.sw_text a {
    background-image: url(../img/common/icon-text.png);
}

.sec-input .swich ul li.sw_illu a {
    background-image: url(../img/common/icon-illust.png);
}

.sec-input .swich ul li a:hover {
    background-color: #A2C617;
}

.sec-input .swich ul li.current a {
    background-color: #6F8324;
}

.sec-input .swich ul li.current a:before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    content: '';
    margin: 0 0 0 -8px;
    width: 16px;
    height: 16px;
    background-color: #6F8324;
    transform: rotate(45deg);
}

.sec-text {
    margin: 0 5%;
}

.sec-text .sec-textinput {
    padding: 4rem 0 0;
}

.sec-text ul {
    margin: 0;
}

.sec-text li {
    margin: 0 0 2rem;
}

.sec-text b {
    display: block;
    font-weight: normal;
}

.sec-text input {}

.sec-text select {
    width: 100%;
    border: 1px solid #ccc;
}

.sec-text .text-attr {
    position: relative;
    margin: 0 0 4rem;
    font-size: 0;
}

.sec-text .text-attr li {
    display: inline-block;
    vertical-align: top;
    width: 28%;
    font-size: 1.2rem;
}

.sec-text .text-attr li:nth-child(2) {
    margin: 0 7.5%;
}

.sec-text .text-attr input[type=text] {
    padding: 1rem 0.8rem;
}

.sec-text .text-attr .textsize,
.sec-text .text-attr .intervalsize,
.fix-attr .fixsize,
.illust-attr .illustsize {
    padding: 1rem 0.8rem;
    position: relative;
}

.sec-text .text-attr .textsize:before,
.sec-text .text-attr .intervalsize:before,
.fix-attr .fixsize:before,
.illust-attr .illustsize:before {
    z-index: 1;
    position: absolute;
    right: 15px;
    top: 0;
    line-height: 43px;
    pointer-events: none;
}

.sec-text .text-attr .textsize,
.sec-text .text-attr .intervalsize,
.fix-attr .fixsize,
.illust-attr .illustsize {
    outline: none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    background: none transparent;
    background: url(../img/common/arrow.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%, #efebe1 100%);
    background: url(../img/common/arrow.png) right 50% no-repeat, linear-gradient(to bottom, #fff 0%, #efebe1 100%);
    background-size: 20px, 100%;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 8px 12px;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    padding: 8px;
    background-color: #fff;
    border: 2px solid #94A943;
}

.sec-text .text-attr .textsize::-ms-expand {
    display: none;
}

.sec-text .text-attr .intervalsize::-ms-expand {
    display: none;
}

.sec-text .text-attr .text-attr-size li {
    margin: 0.1rem 0 0;
    width: 48%;
}

.sec-text .text-attr .text-inte-size li {
    margin: 0.1rem 0 0;
    width: 48%;
}

.b_fixing {
    margin: 0 0 2rem;
    padding: 4rem 0 0;
}

.b_fixing a {
    display: block;
    padding: 1em 0;
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    color: #fff;
    background-color: #94A943;
}

.b_fixing a:hover {
    background-color: #A2C617;
}

.b_size {
    margin: 0 0 0rem;
    padding: 0 0 0;
}

.b_size a {
    display: block;
    padding: 0em 0;
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    color: #fff;
    background-color: #94A943;
}

.b_size a:hover {
    background-color: #A2C617;
}

.fix-attr {
    position: relative;
    margin: 0 0 4rem;
    font-size: 0;
}

.fix-attr li {
    display: inline-block;
    vertical-align: top;
    width: 28%;
    font-size: 1.2rem;
    /* color: #fff; */
}

.fix-attr li:nth-child(2) {
    margin: 0 7.5%;
}

.fix-attr input[type=text] {
    padding: 1rem 0.8rem;
}

.fix-attr .fixsize::-ms-expand {
    display: none;
}

.fix-attr .fix-attr-size li {
    margin: 0.1rem 0 0;
    width: 48%;
}


/* .sec-fixing {} */

.sec-illust {
    padding: 4rem 0 0;
    background-color: #fff;
    /* background-color: #94A943; */
    border-top: 1px solid #D4DABD;
}

.illust-attr .illustsize::-ms-expand {
    display: none;
}

.sec-illustinput {
    margin: 0 5%;
}

.sec-illustinput ul {
    margin: 0 0 4rem;
    font-size: 0;
}

.sec-illustinput ul li {
    display: inline-block;
    vertical-align: top;
    width: 28%;
    font-size: 1.2rem;
    /* color: #fff; */
}

.illust-attr li:nth-child(2) {
    margin: 0 7.5%;
}

.illust-attr input[type=text] {
    padding: 1rem 0.8rem;
}

.b_delet-iilust {
    cursor: pointer;
}

.b_delet-iilust span {
    display: block;
    padding: 1.1rem 1rem 1rem 2rem;
    text-align: center;
    font-size: 1.3rem;
    color: #222;
    background: #fff url(../img/common/icon-delete.svg) no-repeat left 20% center / 20px 17px;
    border: 2px solid #94A943;
}

.illustlist {
    background-color: #94A943;
}

.illustlist ul {
    font-size: 0;
}

.illustlist ul li {
    position: relative;
    display: inline-block;
    margin: 1px;
    vertical-align: top;
    width: 32.6%;
    width: calc(100%/3 - 2px);
    background-color: #fff;
}

.illustlist ul li a {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    transition: all 0.2s ease;
}

.illustlist ul li a:hover {
    background-color: rgba(0, 0, 0, .5);
}

.illustlist ul li a:hover:after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '追加';
    margin: -1.25em 0 0 -2.25em;
    padding: 0.5em 1.5em;
    font-size: 1.2rem;
    color: #222;
    background-color: #fff;
}

.colorbox-cont {
    top: 36px !important;
    left: auto !important;
    z-index: 10;
    right: 0;
    padding: 8px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 3px;
}

.colorbox-cont div {
    margin: 4px;
    border: 1px solid #999;
    border-radius: 5px;
}

.colorbox-cont div:hover {
    border: 1px solid #319EC6;
    box-shadow: 0 0 4px rgba(0, 187, 255, 1);
}

.textcs,
.fixcs,
.illustcs {
    padding: 8px;
    background-color: #fff;
    border: 2px solid #94A943;
}

#textcs,
#fixcs,
#illustcs {
    width: 24px !important;
    height: 24px !important;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 5px;
}

.slider-wrap {
    display: none;
    position: absolute;
    padding: 1rem;
    width: 50vw;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
}

.current .slider-wrap {
    display: block;
}

.current input {
    border: 2px solid #A2C617;
}


/* **************************************************************************** */


/*
/* 7.3.3 - Preview / finish / z-index = 1300 - 1399
/*
/* **************************************************************************** */

.sec-preview {
    position: relative;
    padding: 4rem 0;
    font-size: 1.3rem;
    background-color: #fff;
}

.sec-preview:before {
    position: absolute;
    top: -10px;
    left: 50%;
    content: '';
    margin: 0 0 0 -10px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    transform: rotate(45deg);
}

.sec-preview .content {
    margin: 3em 8% 3em;
}

.sec-preview h3 {
    margin: 0 0 1em;
    padding: 0 0 0.5rem;
    font-size: 1.4rem;
    color: #296820;
    border-bottom: 1px solid #94A943;
}

.sec-preview dl {
    margin: 0 0 3em;
}

.sec-preview dt {
    float: left;
    font-weight: 400;
    color: #9b9b9b;
}

.sec-preview dd {
    margin: 0 0 1rem;
    padding: 0 0 0 8em;
}

.sec-preview .total {
    margin: 0 0 1em;
}

.sec-preview .total p {
    color: #296820;
    border-bottom: 1px solid #94A943;
}

.sec-preview .total b {
    margin: 0 2em 0 0;
}

.sec-preview .total large {
    font-size: 2.4rem;
}

.sec-preview .total small {
    font-size: 1.2rem;
}

.sec-preview .caption {
    margin: 0 0 3em;
    font-size: 1.4rem;
}

.sec-preview .caption ul,
.sec-preview .caption ol {
    margin: 0 0 0 1em;
}

.sec-preview .caption ul li {
    margin: 0 0 0.5em;
}

.sec-preview .caption ul li:before {
    margin: 0 0 0 -1rem;
    content: '※';
}

.sec-preview .caption ol li:before {
    margin: 0;
    content: '';
}

.proofnumber {
    display: block;
    padding: 1.4rem 0;
    text-align: center;
    border: 3px solid #94A943;
}

.orderLink {
    display: block;
    padding: 1.4rem 0;
    color: #FFF;
    text-align: center;
    background-color: coral;
}

.orderLink b {
    color: #FFF;
}

.mailLink {
    display: block;
    padding: 1.4rem 0;
    color: #FFF;
    text-align: center;
    background-color: coral;
}

.mailLink b {
    color: #FFF;
}


/* .proofnumber b	{ font-size:1.4rem; font-weight:normal; letter-spacing:0.1em;} */

.proofnumber b {
    font-size: 2rem;
    font-weight: normal;
    letter-spacing: 0.1em;
}

.b_order {}

.b_order a {
    display: block;
    padding: 2em 0;
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    color: #fff;
    background-color: #94A943;
}

.b_order a:hover {
    background-color: #A2C617;
}

.b_ar a {
    display: block;
    margin: 2em 0 0;
    padding: 2.4rem 1em 2.4rem 8rem;
    text-align: left;
    font-size: 1.4rem;
    color: #94A943;
    background: url(../img/common/icon-ar.png) no-repeat left 2rem center / 38px auto;
    border: 3px solid #94A943;
}

.b_ar a:hover {
    border-color: #A2C617;
}

.video {
    padding: 4rem 0 0;
    border-top: 1px solid #94A943;
}

.video h4 {
    margin: 1em 0;
    text-align: center;
    font-size: 1.4rem;
}

.video .content {
    position: relative;
    margin: 0;
    padding: 0 0 0 0;
    /* padding: 56.25% 0 0 0; */
    width: 100%;
}

.video iframe {
    /* position: absolute; */
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}


/* **************************************************************************** */


/*
/* 7.4 - gallery / z-index = 500 - 599
/*
/* **************************************************************************** */

.sec-gallery {
    position: relative;
    z-index: 100;
    background-color: #fff;
}

.sec-gallery .section-header {
    padding: 32px 0 0;
}

.sec-gallery .section-title {
    position: relative;
    z-index: 2;
    padding: 32px 0 0;
    height: 78px;
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    font-weight: bold;
}

.sec-gallery .section-title:before {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 50%;
    content: '';
    margin: 0 0 0 -39px;
    width: 78px;
    height: 78px;
    background-color: #DDF4C5;
    border-radius: 100%;
}

.sec-gallery .lead {
    margin: 1em 5%;
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.1em;
}

.sec-gallery ul {
    font-size: 0;
}

.sec-gallery ul li {
    display: inline-block;
    margin: 1px;
    vertical-align: top;
    width: 32.6%;
    width: calc(100%/3 - 2px);
    background-color: #000;
}

.sec-gallery ul li a:hover {
    opacity: 0.5;
}

.sec-gallery img {
    width: 100%;
    height: auto;
}


/* **************************************************************************** */


/*
/* 7.5 - Modal window / z-index = 
/*
/* **************************************************************************** */

.modal {}

.modal-content {
    margin: 0 auto;
    width: 100%;
    min-height: 100vh;
    background-color: #fff;
    border: 8px solid #94A943;
}

.info-content,
.caution-content {
    margin: 0 auto;
    font-size: 2rem;
    width: 100%;
    min-height: 50vh;
    background-color: #fff;
    border: 8px solid #94A943;
}

.modal-content .image {
    padding: 10% 15%;
    background-size: contain;
    text-align: center;
}

.modal-content .image img {
    max-width: 400px;
    max-height: 400px;
}

.modal-content .content {
    margin: 0 8% 3em;
}

.info-content .content,
.caution-content .content {
    margin: 3em 8% 3em;
}

.modal-content .item-name {
    margin: 0 0 1em;
    padding: 0 0 0.5em;
    line-height: 1.2em;
    color: #296820;
    border-bottom: 1px solid #94A943;
}

.modal-content .info-title {
    margin: 0 0 1em;
    padding: 0 0 0.5em;
    line-height: 1.2em;
    color: #444;
    border-bottom: 1px solid #666;
}

.modal-content .item-name small {
    display: block;
}

.info-content dl,
.caution-content dl,
.modal-content dl {
    margin: 0 0 4rem;
}

.info-content dt,
.modal-content dt {
    float: left;
    color: #666;
}

.caution-content dt {
    text-align: left;
    float: left;
    color: #f00;
}

.caution-content dd,
.modal-content dd {
    margin: 0 0 1rem;
    padding: 0 0 0 8em;
}

.info-content dd {
    text-align: left;
    margin: 3rem 0 1rem;
}

.info-content p,
.caution-content p,
.modal-content p {
    margin: 0 0 4rem;
    text-align: left;
    color: #666;
}

.info-content .nextprev,
.caution-content .nextprev,
.modal-content .nextprev {
    padding: 2rem 0%;
}

.info-content .popup-modal-dismiss,
.caution-content .popup-modal-dismiss,
.modal-content .popup-modal-dismiss {
    position: fixed;
    top: 2rem;
    right: 3rem;
    width: 46px;
    height: 46px;
    font-size: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.info-content .popup-modal-dismiss:before,
.caution-content .popup-modal-dismiss:before,
.modal-content .popup-modal-dismiss:before {
    position: absolute;
    top: 20px;
    left: 0;
    content: '';
    width: 46px;
    height: 0;
    border-top: 1px solid #000;
    transform: rotate(45deg);
}

.info-content .popup-modal-dismiss:after,
.caution-content .popup-modal-dismiss:after,
.modal-content .popup-modal-dismiss:after {
    position: absolute;
    top: 20px;
    left: 0;
    content: '';
    width: 46px;
    height: 0;
    border-top: 1px solid #000;
    transform: rotate(-45deg);
}

.info-content .popup-modal-dismiss:hover,
.caution-content .popup-modal-dismiss:hover,
.modal-content .popup-modal-dismiss:hover {
    transform: rotate(90deg);
}

.gallery .caution-content .image,
.gallery .modal-content .image {
    padding: 0 0 5%;
    text-align: center;
}

.gallery .caution-content .image img,
.gallery .modal-content .image img {
    max-width: 100%;
    max-height: 100%;
}


/* **************************************************************************** */


/*
/* 8.0 Forms
/*
/* **************************************************************************** */

button,
input,
select,
textarea {
    background-color: #f7f7f7;
    border-radius: 0;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
    margin: 0;
    max-width: 100%;
    vertical-align: baseline;
}

button,
input {
    line-height: normal;
}

input,
textarea {
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    /* Removing the inner shadow on iOS inputs */
    border: 2px solid #94A943;
    color: #707070;
    color: rgba(51, 51, 51, 0.7);
}

input:focus,
textarea:focus {
    background-color: #fff;
    /*	border: 2px solid #CAED42;*/
    color: #333;
}

input:focus,
select:focus {}

input:valid {
    border: 2px solid #ACCF24;
}

input:placeholder-shown {
    border: 2px solid #94A943;
}

button[disabled],
input[disabled],
select[disabled],
textarea[disabled] {
    cursor: default;
    opacity: .5;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    background-color: #333;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-family: "Noto Sans", sans-serif;
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 0.7917em 1.5em;
    text-transform: uppercase;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
    background-color: #707070;
    background-color: rgba(51, 51, 51, 0.7);
    outline: 0;
}

input[type="search"] {
    -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
    padding: 0.375em 0.8em;
    width: 100%;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
    outline: 0;
}

input[type="checkbox"],
input[type="radio"] {
    padding: 0;
}


/* **************************************************************************** */


/*
/* 9.0 rangeslider
/*
/* **************************************************************************** */

.rangeslider,
.rangeslider__fill {
    display: block;
    -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.rangeslider {
    background: #e6e6e6;
    position: relative;
}

.rangeslider--horizontal {
    height: 20px;
    width: 100%;
}

.rangeslider--vertical {
    width: 20px;
    min-height: 150px;
    max-height: 100%;
}

.rangeslider--disabled {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=40);
    opacity: 0.4;
}

.rangeslider__fill {
    background: #00ff00;
    position: absolute;
}

.rangeslider--horizontal .rangeslider__fill {
    top: 0;
    height: 100%;
}

.rangeslider--vertical .rangeslider__fill {
    bottom: 0;
    width: 100%;
}

.rangeslider__handle {
    background: white;
    border: 1px solid #ccc;
    cursor: pointer;
    display: inline-block;
    width: 40px;
    height: 40px;
    position: absolute;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.rangeslider__handle:after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.13)), color-stop(100%, rgba(255, 255, 255, 0)));
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
    background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.rangeslider__handle:active,
.rangeslider--active .rangeslider__handle {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12)));
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
}

.rangeslider--horizontal .rangeslider__handle {
    top: -10px;
    touch-action: pan-y;
    -ms-touch-action: pan-y;
}

.rangeslider--vertical .rangeslider__handle {
    left: -10px;
    touch-action: pan-x;
    -ms-touch-action: pan-x;
}

input[type="range"]:focus+.rangeslider .rangeslider__handle {
    -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
    -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
}


/* **************************************************************************** */


/*
/* 10.0 mCustomScrollbar
/*
/* **************************************************************************** */


/* 
1. BASIC STYLE  
*/

.mCustomScrollbar {
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
    /* direct pointer events to js */
}

.mCustomScrollbar.mCS_no_scrollbar,
.mCustomScrollbar.mCS_touch_action {
    -ms-touch-action: auto;
    touch-action: auto;
}

.mCustomScrollBox {
    /* contains plugin's markup */
    position: relative;
    overflow: hidden;
    height: 100%;
    max-width: 100%;
    outline: none;
    direction: ltr;
}

.mCSB_container {
    /* contains the original content */
    width: auto;
    height: auto;
    overflow: hidden;
}


/* 
2. VERTICAL SCROLLBAR 
y-axis
*/

.mCSB_inside>.mCSB_container {
    margin-right: 30px;
}

.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
    margin-right: 0;
}


/* non-visible scrollbar */

.mCS-dir-rtl>.mCSB_inside>.mCSB_container {
    /* RTL direction/left-side scrollbar */
    margin-left: 30px;
    margin-right: 0;
}

.mCS-dir-rtl>.mCSB_inside>.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
    margin-left: 0;
}


/* RTL direction/left-side scrollbar */

.mCSB_scrollTools {
    /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
    position: absolute;
    top: 0;
    left: auto;
    bottom: 0;
    right: 0;
    width: 16px;
    height: auto;
}

.mCSB_outside+.mCSB_scrollTools {
    right: 0px;
}


/* scrollbar position: outside */

.mCS-dir-rtl>.mCSB_inside>.mCSB_scrollTools,
.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools {
    /* RTL direction/left-side scrollbar */
    left: 0;
    right: auto;
}

.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools {
    left: -26px;
}


/* RTL direction/left-side scrollbar (scrollbar position: outside) */

.mCSB_scrollTools .mCSB_draggerContainer {
    /* contains the draggable element and dragger rail markup */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: auto;
}

.mCSB_scrollTools a+.mCSB_draggerContainer {
    margin: 20px 0;
}

.mCSB_scrollTools .mCSB_draggerRail {
    margin: 0 auto;
    width: 2px;
    height: 100%;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}

.mCSB_scrollTools .mCSB_dragger {
    /* the draggable element */
    cursor: pointer;
    width: 100%;
    height: 30px;
    /* minimum dragger height */
    z-index: 1;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    /* the dragger element */
    position: relative;
    margin: 0 auto;
    width: 4px;
    height: 100%;
    text-align: center;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
    width: 12px;
    /* auto-expanded scrollbar */
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
    width: 8px;
    /* auto-expanded scrollbar */
}

.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown {
    display: block;
    position: absolute;
    margin: 0 auto;
    width: 100%;
    height: 20px;
    overflow: hidden;
    cursor: pointer;
}

.mCSB_scrollTools .mCSB_buttonDown {
    bottom: 0;
}


/* 
5. TRANSITIONS  
*/

.mCSB_scrollTools,
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight {
    -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
    transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,

/* auto-expanded scrollbar */

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail {
    -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
    -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
    -o-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
    transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
}


/* 
6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS  
*/

.mCSB_scrollTools {
    opacity: 0.75;
}

.mCS-autoHide>.mCustomScrollBox>.mCSB_scrollTools,
.mCS-autoHide>.mCustomScrollBox~.mCSB_scrollTools {
    opacity: 0;
}

.mCustomScrollbar>.mCustomScrollBox>.mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollbar>.mCustomScrollBox~.mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollBox:hover>.mCSB_scrollTools,
.mCustomScrollBox:hover~.mCSB_scrollTools,
.mCS-autoHide:hover>.mCustomScrollBox>.mCSB_scrollTools,
.mCS-autoHide:hover>.mCustomScrollBox~.mCSB_scrollTools {
    opacity: 1;
}

.mCSB_scrollTools .mCSB_draggerRail {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.15);
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.75);
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background-color: rgba(0, 0, 0, 0.85);
}

.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background-color: rgba(0, 0, 0, 0.9);
}

.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight {
    background-image: url(mCSB_buttons.png);
    /* css sprites */
    background-repeat: no-repeat;
    opacity: 0.4;
}

.mCSB_scrollTools .mCSB_buttonUp {
    background-position: 0 0;
}

.mCSB_scrollTools .mCSB_buttonDown {
    background-position: 0 -20px;
}

.mCSB_scrollTools .mCSB_buttonLeft {
    background-position: 0 -40px;
}

.mCSB_scrollTools .mCSB_buttonRight {
    background-position: 0 -56px;
}

.mCSB_scrollTools .mCSB_buttonUp:hover,
.mCSB_scrollTools .mCSB_buttonDown:hover,
.mCSB_scrollTools .mCSB_buttonLeft:hover,
.mCSB_scrollTools .mCSB_buttonRight:hover {
    opacity: 0.75;
    filter: "alpha(opacity=75)";
    -ms-filter: "alpha(opacity=75)";
}

.mCSB_scrollTools .mCSB_buttonUp:active,
.mCSB_scrollTools .mCSB_buttonDown:active,
.mCSB_scrollTools .mCSB_buttonLeft:active,
.mCSB_scrollTools .mCSB_buttonRight:active {
    opacity: 0.9;
    filter: "alpha(opacity=90)";
    -ms-filter: "alpha(opacity=90)";
}


/* **************************************************************************** */


/*
/* 11.0 - Media Queries
/*
/* **************************************************************************** */

@-ms-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

#headerwrap {
    display: none;
}

.home {
    display: block;
}

.sec-kabe {
    display: none;
}

.sec-monchu {
    display: none;
}

.sec-items {
    display: block;
}

.sec-design {
    display: none;
}

.sec-layout {
    display: none;
}

.sec-input {
    display: none;
}

.sec-text {
    display: none;
}

.sec-textinput {
    display: none;
}

.sec-fixing {
    display: none;
}

.sec-illust {
    display: none;
}

.sec-preview {
    display: none;
}

.sec-gallery {
    display: none;
}

.modal {
    display: none;
    position: relative;
}


/**
/*  412 <=                              */

@media screen and (min-width: 412px) {
    /**
	/* series / monchu
    /* ************************************************* */
    .sec-monchu .section-header {
        padding: 32px 0 0;
    }
    .sec-monchu .section-title {
        position: relative;
        z-index: 2;
        padding: 32px 0 0;
        height: 78px;
        text-align: center;
        font-size: 1.5rem;
        letter-spacing: 0.1em;
        font-weight: bold;
    }
    .sec-monchu .section-title:before {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 50%;
        content: '';
        margin: 0 0 0 -39px;
        width: 78px;
        height: 78px;
        background-color: #DDF4C5;
        border-radius: 100%;
    }
    .sec-monchu .lead {
        margin: 1em 5%;
        text-align: center;
        font-size: 1.4rem;
        font-weight: bold;
        font-weight: 500;
        line-height: 1.8;
        letter-spacing: 0.1em;
    }
    .sec-monchu .section-content ul li {
        display: inline-block;
        vertical-align: top;
        margin: 0 0;
        width: calc(100% / 2);
        border-right: 1px solid #fff;
    }
    .sec-monchu .section-content ul li:last-child {
        border-bottom: 2px solid #fff;
    }
    .sec-monchu .section-content .image:after {
        left: calc(50% - 12px);
    }
    .sec-monchu .section-content .image img {
        transition: all 0.4s ease;
    }
    .sec-monchu .section-content .name {
        display: block;
        position: relative;
        width: 100%;
        padding: 2rem 1rem 1rem;
        font-size: 1.4rem;
        font-weight: bold;
    }
    .sec-monchu .section-content .b_choice {
        display: inline-block;
        vertical-align: middle;
        margin: 1rem 5% 2rem;
        width: 90%;
    }
    .sec-monchu .section-content .b_choice a {
        display: block;
        padding: 1rem 0;
        background-color: #94A943;
    }
    .sec-monchu .section-content .b_choice a:hover {
        background-color: #A2C617;
    }
    .sec-monchu .section-content .b_choice span {
        display: inline-block;
        vertical-align: middle;
        text-align: center;
    }
    .sec-monchu .section-content .b_choice .sbl {
        width: 100%;
        font-size: 1.4rem;
        font-weight: 500;
        color: #fff;
    }
    .sec-monchu .section-content .b_choice .sbl br {
        display: none;
    }
    .sec-monchu .section-content .b_choice .sbs {
        width: 0;
        height: auto;
        color: #222;
    }
    .sec-monchu .section-content ul.slist li {
        display: block;
        padding: 14px 0;
        width: 100%;
        border-bottom: 1px solid #ddd;
    }
    .sec-monchu .section-content ul.slist .image {
        display: inline-block;
        vertical-align: middle;
        margin: 0 0 0 16px;
        padding: 0;
        width: 80px;
        height: 100px;
    }
    .sec-monchu .section-content ul.slist .image img {
        width: auto;
        height: auto;
        max-width: 80px;
        max-height: 100px;
    }
    .sec-monchu .section-content ul.slist .name {
        display: inline-block;
        padding: 0 1em;
        width: calc(100% - 156px);
    }
    .sec-monchu .section-content ul.slist .b_choice {
        display: inline-block;
        margin: 0;
        width: 60px;
    }
    .sec-monchu .section-content ul.slist .b_choice a {
        position: relative;
        height: 60px;
        padding: 0;
        background-color: #fff;
    }
    .sec-monchu .section-content ul.slist .b_choice .sbl {
        width: 0;
        height: 60px;
        font-size: 0;
    }
    .sec-monchu .section-content ul.slist .b_choice .sbs {
        width: 50px;
        height: auto;
        text-align: left;
        font-size: 1.3rem;
    }
    .sec-monchu .section-content ul.slist .b_choice .sbs:after {
        position: absolute;
        top: 50%;
        right: 18px;
        content: '';
        margin: -6px 0 0;
        width: 10px;
        height: 10px;
        border: solid #296820;
        border-width: 1px 1px 0 0;
        transform: rotate(45deg);
        transition: all 0.2s ease;
    }
    .sec-monchu .section-content ul.slist .b_choice a:hover .sbs:after {
        right: 10px;
    }
}


/**
/*  768 <=                              */

@media screen and (min-width: 768px) {
    /**
	/* series / monchu
	/* ************************************************* */
    .switch {
        display: none;
    }
    .sec-kabe .section-content ul li {
        display: inline-block;
        vertical-align: top;
        width: calc(100% / 2);
        border-right: 1px solid #fff;
    }
    .sec-monchu .section-content ul li {
        width: calc(100% / 3);
    }
    .masonry .grid-sizer,
    .masonry .item {
        width: 33.33% !important;
        transition: 0.6s ease-in-out;
    }
    /**
	/* items
	/* ************************************************* */
    .sec-items .section-header .image {
        display: none;
    }
    .sec-items .section-header .name {
        margin: 0 12.5%;
        text-align: center;
        border-bottom: 1px solid #333;
    }
    .sec-items .section-header .name p {
        display: block;
        text-align: center;
        font-size: 2rem;
    }
    .sec-items .section-header .name:before {
        width: 0;
        height: 0;
    }
    .sec-items .section-header .caption {
        margin: 0 12.5%;
        padding: 1em 0;
    }
    .sec-items .section-content {
        display: block;
    }
    .sec-items .section-content ul {
        margin: 0 10%;
        padding: 0 0 5%;
        font-size: 0;
    }
    .sec-items .section-content ul li {
        margin: 1px 1px 2px 1px !important;
        width: calc( 33% - 2px) !important;
        background: transparent;
    }
    .sec-items .section-content ul li a:hover {
        border: 8px solid #ddd;
    }
    .sec-items .section-content .image {
        height: calc( 24vw) !important;
    }
    .sec-items .section-content .image span {
        height: calc( 20vw);
    }
    .sec-items .section-content .detail {
        background-color: #f0f0f0;
    }
}


/**
/*  1024px <=                          */

@media screen and (min-width: 1024px) {
    .pc {
        display: block;
    }
    span.pc {
        display: inline;
    }
    .spn {
        display: none;
    }
    span.spn {
        display: none;
    }
    body,
    button,
    input,
    select,
    textarea {
        font-size: 14px;
        font-size: 1.4rem;
    }
    /**
	 *  - Typography 	**/
    h1 {
        font-size: 3rem;
    }
    h2 {
        font-size: 2.6rem;
    }
    h3 {
        font-size: 2rem;
    }
    h4 {
        font-size: 1.6rem;
    }
    h5 {
        font-size: 1.5rem;
    }
    h6 {
        font-size: 1.4rem;
    }
    /**
	 *  - header 		**/
    /**
	 *  - footer 		**/
    /* .billboard */
    /**
	 *  - container 	**/
    /* #container > article
	 */
    article {
        margin: 0 auto;
    }
    .page-header {
        margin: 2rem 0 6rem;
    }
    .page-content {
        margin: 0 auto 6rem;
        padding: 0;
        max-width: 1000px;
    }
    .narrow .page-content {
        padding: 0;
        max-width: 800px;
    }
    /**
	/*  -.home
	/* ************************************************* */
    .home .section-content {
        padding: 66px 0 40px;
    }
    .home .home-logo {
        margin: 0;
    }
    .home .home-logo .subtitle {
        margin: 0 0 14px;
        height: 49px;
        background-size: 226px 49px;
    }
    .home .home-logo .maintitle {
        height: 80px;
        background-size: 320px 80px;
        /* height: 116px; */
        /* background-size: 256px 116px; */
    }
    .home .home-lead {
        margin: 0 11%;
        padding: 3em 0 1em;
        text-align: center;
        font-size: 1.3rem;
        line-height: 1.8;
        color: #fff;
    }
    .home .recommended {
        margin: 0 11%;
        padding: 3em 0 1em;
        text-align: center;
        font-size: 1.3rem;
        line-height: 1.8;
        color: #fff;
    }
    .home .home-nav li {
        margin: 0 1%;
        width: 18%;
        max-width: 160px;
    }
    .home .loaddesign {
        position: relative;
        margin: 0 28% 3rem;
    }
    .home .manualLink {
        margin: 0 11%;
        padding: 3em 0 1em;
        text-align: center;
        /* font-size: 1rem; */
        /* line-height: 1; */
        /* color: #fff; */
    }
    .home .manualLink img {
        width: 400px;
    }
    /**
	/* series / kabe / monchu
	/* ************************************************* */
    .switch {
        display: none;
    }
    .sec-kabe .lead {
        margin: 1em 5%;
        text-align: center;
        font-size: 1.4rem;
        font-weight: bold;
        font-weight: 500;
        line-height: 1.8;
        letter-spacing: 0.1em;
    }
    .sec-kabe .section-content ul li {
        display: inline-block;
        vertical-align: top;
        width: calc(100% / 3);
        border-right: 1px solid #fff;
    }
    .sec-kabe .section-content ul li:nth-child(3n) {
        border-right: 0;
    }
    .sec-kabe .section-content ul li:last-child {
        border-bottom: 2px solid #fff;
    }
    .sec-kabe .section-content ul.slist li {
        padding: 0;
        border-bottom: 2px solid #fff;
    }
    .sec-kabe .section-content ul.slist .image {
        display: block;
        position: relative;
        margin: 0;
        padding: 10%;
        width: auto;
        height: auto;
        text-align: center;
        background: radial-gradient(ellipse farthest-corner, #F6F7F7, #EAECEC);
    }
    .sec-kabe .section-content ul.slist .image:after {
        position: absolute;
        bottom: -10px;
        left: calc((100% - 146px)/2);
        content: '';
        width: 18px;
        height: 18px;
        background-color: #fff;
        transform: rotate(45deg);
    }
    .sec-kabe .section-content ul.slist .image img {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }
    .sec-kabe .section-content ul.slist .name {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        width: calc(100% - 134px);
        padding: 0 1em;
        font-size: 1.4rem;
        font-weight: bold;
    }
    .sec-kabe .section-content ul.slist .b_choice {
        display: inline-block;
        vertical-align: middle;
        width: 134px;
    }
    .sec-kabe .section-content ul.slist .b_choice a {
        display: block;
        height: 134px;
        background-color: #94A943;
    }
    .sec-kabe .section-content ul.slist .b_choice a:hover {
        background-color: #A2C617;
    }
    .sec-kabe .section-content ul.slist .b_choice .sbl {
        width: 134px;
        height: auto;
        font-size: 1.4rem;
        font-weight: 500;
        color: #fff;
    }
    .sec-kabe .section-content ul.slist .b_choice .sbs {
        width: 0;
        height: 134px;
        font-size: 0;
        color: #222;
    }
    .sec-kabe .section-content ul.slist .b_choice .sbs:after {
        width: 0;
        height: 0;
    }
    .sec-monchu .section-header {
        padding: 32px 0 0;
    }
    .sec-monchu .section-title {
        position: relative;
        z-index: 2;
        padding: 32px 0 0;
        height: 78px;
        text-align: center;
        font-size: 1.5rem;
        letter-spacing: 0.1em;
        font-weight: bold;
    }
    .sec-monchu .section-title:before {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 50%;
        content: '';
        margin: 0 0 0 -39px;
        width: 78px;
        height: 78px;
        background-color: #DDF4C5;
        border-radius: 100%;
    }
    .sec-monchu .lead {
        margin: 1em 5%;
        text-align: center;
        font-size: 1.4rem;
        font-weight: bold;
        font-weight: 500;
        line-height: 1.8;
        letter-spacing: 0.1em;
    }
    .sec-monchu .section-content ul li {
        width: calc(100% / 4);
    }
    .masonry .grid-sizer,
    .masonry .item {
        width: 25% !important;
    }
    .sec-monchu .section-content ul li:last-child {
        border-bottom: 2px solid #fff;
    }
    .sec-monchu .section-content .image:after {
        left: calc(50% - 12px);
    }
    .sec-monchu .section-content .image img {
        transition: all 0.4s ease;
    }
    .sec-monchu .section-content .name {
        display: block;
        position: relative;
        width: 100%;
        padding: 2rem 1em 1rem;
        font-size: 1.4rem;
        font-weight: bold;
    }
    .sec-monchu .section-content .b_choice {
        display: inline-block;
        vertical-align: middle;
        margin: 1rem 5% 2rem;
        width: 90%;
    }
    .sec-monchu .section-content .b_choice a {
        display: block;
        padding: 1rem 0;
        background-color: #94A943;
    }
    .sec-monchu .section-content .b_choice a:hover {
        background-color: #A2C617;
    }
    .sec-monchu .section-content .b_choice span {
        display: inline-block;
        vertical-align: middle;
        text-align: center;
    }
    .sec-monchu .section-content .b_choice .sbl {
        width: 100%;
        font-size: 1.4rem;
        font-weight: 500;
        color: #fff;
    }
    .sec-monchu .section-content .b_choice .sbl br {
        display: none;
    }
    .sec-monchu .section-content .b_choice .sbs {
        width: 0;
        height: auto;
        color: #222;
    }
    .sec-monchu .section-content ul.slist li {
        padding: 0;
        border-bottom: 2px solid #fff;
    }
    .sec-monchu .section-content ul.slist .image {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        width: auto;
        height: auto;
        text-align: center;
        background: radial-gradient(ellipse farthest-corner, #F6F7F7, #EAECEC);
    }
    .sec-monchu .section-content ul.slist .image:after {
        position: absolute;
        bottom: -10px;
        left: calc(50% - 12px);
        content: '';
        width: 18px;
        height: 18px;
        background-color: #fff;
        transform: rotate(45deg);
    }
    .sec-monchu .section-content ul.slist .image img {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }
    .sec-monchu .section-content ul.slist .name {
        display: block;
        position: relative;
        width: 100%;
        padding: 2rem 1em;
        font-size: 1.4rem;
        font-weight: bold;
    }
    .sec-monchu .section-content ul.slist .b_choice {
        display: inline-block;
        vertical-align: middle;
        margin: 1rem 5%;
        width: 90%;
    }
    .sec-monchu .section-content ul.slist .b_choice a {
        display: block;
        padding: 1rem 0;
        height: auto;
        background-color: #94A943;
    }
    .sec-monchu .section-content ul.slist .b_choice a:hover {
        background-color: #A2C617;
    }
    .sec-monchu .section-content ul.slist .b_choice span {
        display: inline-block;
        vertical-align: middle;
        text-align: center;
    }
    .sec-monchu .section-content ul.slist .b_choice .sbl {
        width: 100%;
        height: auto;
        font-size: 1.4rem;
        font-weight: 500;
        color: #fff;
    }
    .sec-monchu .section-content ul.slist .b_choice .sbs {
        width: 0;
        height: auto;
        font-size: 0;
        color: #222;
    }
    .sec-monchu .section-content ul.slist .b_choice .sbs:after {
        width: 0;
        height: 0;
    }
    /**
	/* items
	/* ************************************************* */
    .sec-items .section-content ul li {
        margin: 1px 1px 2px 1px !important;
        width: calc( 20vw - 2px) !important;
        background: transparent;
    }
    .sec-items .section-content .image {
        height: calc( 18vw) !important;
    }
    .sec-items .section-content .image span {
        height: calc( 14vw);
    }
    .modal-content {
        font-size: 0;
    }
    .modal-content .image {
        display: inline-block;
        vertical-align: top;
        padding: 7.5%;
        width: 75%;
        text-align: center;
    }
    .modal-content .content {
        display: inline-block;
        vertical-align: top;
        margin: 0 0 3em;
        padding: 7.5% 7.5%;
        width: 80%;
        text-align: left;
        font-size: 1.4rem;
    }
    .gallery .modal-content .image {
        padding: 0;
        text-align: center;
    }
    .gallery .modal-content .image img {
        max-width: 100%;
        max-height: 100%;
    }
    /**
	/* Design
	/* ************************************************* */
    .sec-design {}
    .sec-design .section-content {
        margin: 0 auto;
        font-size: 0;
        max-width: 1024px;
    }
    .sec-design .canvas {
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 375px);
        margin: 0 0;
        height: calc(90vh - 100px);
        min-height: 500px;
    }
    .sec-design .editerwrap {
        position: absolute;
        top: 0;
        right: 0;
        vertical-align: top;
        margin: 0;
        width: 40%;
        max-width: 375px;
    }
    .sec-layout {}
    .sec-layout {
        margin: 0 auto;
        width: auto;
        max-width: 414px;
        height: calc(90vh - 100px);
        min-height: 500px;
        overflow: auto;
        background-color: #fff;
        box-shadow: 0 0 8px rgba(0, 0, 0, .2);
    }
    .sec-input {}
    .sec-input {
        margin: 0 auto;
        width: auto;
        max-width: 414px;
        height: calc(90vh - 100px);
        min-height: 500px;
        overflow: auto;
        background-color: #fff;
        box-shadow: 0 0 8px rgba(0, 0, 0, .2);
    }
    .sec-input .swich ul li.current a:before {
        top: auto;
        bottom: -6px;
        left: 50%;
    }
    .sec-preview {}
    .sec-preview {
        margin: 0 auto;
        width: auto;
        max-width: 414px;
        height: calc(90vh - 100px);
        min-height: 500px;
        overflow: auto;
        background-color: #fff;
        box-shadow: 0 0 8px rgba(0, 0, 0, .2);
    }
    /**
	/* gallery
	/* **************************************************************************** */
    .sec-gallery {}
    .sec-gallery ul li {
        width: 24.8%;
        width: calc(100%/4 - 2px);
    }
}


/* **************************************************************************** */


/*
/* 10.0 iziModal
/* iziModal | v1.5.1
/* **************************************************************************** */

.iziModal {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #FFF;
    box-shadow: 0 0 8px rgba(0, 0, 0, .3);
    transition: margin-top 0.3s ease, height 0.3s ease;
    transform: translateZ(0);
}

.iziModal * {
    -webkit-font-smoothing: antialiased;
}

.iziModal::after {
    content: '';
    width: 100%;
    height: 0px;
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.35)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#59000000', GradientType=0);
    transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    pointer-events: none;
}

.iziModal.hasShadow::after {
    height: 30px;
    opacity: 1;
}

.iziModal .iziModal-progressbar {
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    z-index: 1;
}

.iziModal .iziModal-progressbar>div {
    height: 2px;
    width: 100%;
}

.iziModal .iziModal-header-buttons {
    position: absolute;
    top: 50%;
    right: 10px;
    margin: -17px 0 0 0;
}

.iziModal .iziModal-loader {
    background: #FFF url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0NCA0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM5OTkiPiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS13aWR0aD0iMiI+ICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMS40cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuNHMiICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgPC9jaXJjbGU+ICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiAgICAgICAgICAgICAgICBiZWdpbj0iLTAuOXMiIGR1cj0iMS40cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgICAgICAgICAgICAgICAgYmVnaW49Ii0wLjlzIiBkdXI9IjEuNHMiICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgPC9jaXJjbGU+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9;
}

.iziModal .iziModal-content-loader {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0NCA0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM5OTkiPiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS13aWR0aD0iMiI+ICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMS40cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuNHMiICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgPC9jaXJjbGU+ICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiAgICAgICAgICAgICAgICBiZWdpbj0iLTAuOXMiIGR1cj0iMS40cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgICAgICAgICAgICAgICAgYmVnaW49Ii0wLjlzIiBkdXI9IjEuNHMiICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgPC9jaXJjbGU+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%;
}

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

.iziModal .iziModal-content:after {
    clear: both
}

.iziModal .iziModal-content {
    zoom: 1;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    /* overflow-y: scroll; */
}

.iziModal .iziModal-wrap {
    width: 100%;
    position: relative;
    -webkit-overflow-scrolling: touch;
    /* overflow-scrolling: touch; */
}

.iziModal .iziModal-iframe {
    border: 0;
    margin: 0 0 -6px 0;
    width: 100%;
    transition: height 0.3s ease;
}

.iziModal-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.iziModal-navigate {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1000 !important;
}

.iziModal-navigate-caption {
    position: absolute;
    left: 10px;
    top: 10px;
    color: white;
    line-height: 16px;
    font-size: 9px;
    font-family: 'Lato', Arial;
    letter-spacing: 0.1em;
    text-indent: 0;
    text-align: center;
    width: 70px;
    padding: 5px 0;
    text-transform: uppercase;
    display: none;
}

.iziModal-navigate-caption::before,
.iziModal-navigate-caption::after {
    position: absolute;
    top: 2px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 14px;
    font-size: 12px;
    content: '';
    background-size: 100% !important;
}

.iziModal-navigate-caption:before {
    left: 0;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAoCAYAAACFFRgXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyNmFjNjAyMy04OWU0LWE0NDAtYmMxMy1kOTA5MTQ3MmYzYjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDREQ0YwRjA1MzQzMTFFNkE5NUNDRDkyQzEwMzM5RTMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDREQ0YwRUY1MzQzMTFFNkE5NUNDRDkyQzEwMzM5RTMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpmNmM0Nzk3Ni1mNzE3LTk5NDAtYTgyYS1mNTdjNmNiYmU0NWMiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDowZGVmYTEyZC01MzM0LTExZTYtYWRkYi04Y2NmYjI5ZTAxNjYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7oo0ptAAACWklEQVR42uyZTWsTYRSFZybxo4kWk5g2NC5qTAU3Kq30A9udi1oXolV/hWuhv6R/Q6utioi4LbbVFHemamlRU0OCEk0wZjwXzwtDoBDopHMHcuFJMplZnLm5ue+589qu61qeOApyYAjEgG0FEyLqN/gKiqBuTtgewWlwCZw056xgwwirgU3wxSv4NJgCUV5YBRXQDEhsBJwCSSauBVZFdJRlIJk9Av7wbj577jDIOENtRmPVwcsw6KfAAvikRKzEDlhnhuU/lRPBWaa9wsxqC6ndPX7OiOA4D8qW3vjO9z7H0w3+KhZstNmOFbLoCQ6DYGmL+bAInmGfLFC4asFXwRJIgB+goVmw+I7HXO+/gevGnGgUPEGxktkSmAMbWmt4HDwBKS6XN1jDKrvEFYoVK7oLroE3h93Woh1eNwqWafJ/gQV65vM+ail34mc6EZwBK2CAx8fAIjjeBYMzDT4cVHCEXtRbRvEu/Nr9HCIOnGGp15vgEec9KYn74B0nAT/CZnv86FcNvwK3wENwAjwAs2Bbs5d4CW5zir0AXvv8p+tKH34B5lkW4h2egRHtbu05uMMHHWfB0zC4NRF5l09kzvE4rd2tyUJyjy4tz7akZqXbL8QETbJ/FsMgWOJtb6brCQ5YsBsC8Uab63DVkkgqFpzie93h8OhScFah2LTHi5ccWroaLd5l6//+hpYQoWP05LKqFs2WQYbTsNxAi+5fxpWmdfh7HS7XhwSzG+H3a2JnvZsyktmLbdOFhpDMvrf4sN1u2/aK0cwMcmYLcturweceW+CnOfFPgAEA8uWFFylBJYoAAAAASUVORK5CYII=') no-repeat 50% 50%;
}

.iziModal-navigate-caption:after {
    right: 0;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAoCAYAAACFFRgXAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAADhmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzIgNzkuMTU5Mjg0LCAyMDE2LzA0LzE5LTEzOjEzOjQwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjI2YWM2MDIzLTg5ZTQtYTQ0MC1iYzEzLWQ5MDkxNDcyZjNiMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NERDRjBGMDUzNDMxMUU2QTk1Q0NEOTJDMTAzMzlFMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NERDRjBFRjUzNDMxMUU2QTk1Q0NEOTJDMTAzMzlFMyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNS41IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmY2YzQ3OTc2LWY3MTctOTk0MC1hODJhLWY1N2M2Y2JiZTQ1YyIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjBkZWZhMTJkLTUzMzQtMTFlNi1hZGRiLThjY2ZiMjllMDE2NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuijSm0AAAKbSURBVFhH7ZnJj0xRGEerzFoIMTaCZmOIedhaiJj55yz8DaYdNhIJEUMQbCTG3rQ02hDSiEY553XdTpHS3nv96taV9ElO6lVt6peb7933fffVG41GrYW5uBaX4EysYzcw1Fd8hc/wM2a0Bl6Nm3BW9i0dDPsQX/olBF6FO72AH/gG3+N3jL3KBpqGC3ERTsGfeAsHDTyHi71oCXzBe/gaU2A5bscZOIxXTb8OLQNX9i6mElYsg/voqruwfQb2BhODWgqpMYDv0NLsNXC4yd42P1PEwNJj4HBTWdipErLVDfxfMRm408QMvBu3jV6WJ1Zg9/rbeBOP+UNZYgX+iE/Rp+lpPIKliBXYB9IhtPNy3z/T/F6YmDXsChvyBc7Gs3gACxEzsDzBg9iPPXgO92NuYgeWx2h3+AhtaM7jPsyF7aV37XR8gNZYO/pwKY51+xPkG27Fk2joT3gCr2A7NuJ6HMkTeAPadlp3VeMChF7G0P6X3dmfjAXOUxIj6LZkv1ylNuStDZejkL+PS96ScFzRqnDAtI5PoTefvbg7iNNOOwqVRCfYghdxBbpHH8Y7+DcKlUTV7MLLaNghPIrjhf2N2IF34AVcjE44hrXHyE3MwE6/loEzpEcIlqKjeyFiBe7FS+he/gENewMLEyuwXdo8dGWP43UsRazA9g7uDNbwNX8oS8watlsz+ISIGbgSJgN3GgOHlnFq8zNFQraGgT1iFc9iUyU0XsMGHhy9zh6XbvCp4ZuBBWglDBj4OdqLeu0+uRJTwMZ+Dbp/e21P3m97yWe2snsw1LTHmz5C/9lQdwhfGbiq89GwvrrwUT4UAouhN6MzloTRpVuEYI5O9urZYXtrYPGQw2OlZegM163QhrJMfWVgyTq0Qq32C/N7uPz9OknWAAAAAElFTkSuQmCC') no-repeat 50% 50%;
}

.iziModal-navigate>button {
    position: absolute;
    bottom: 0;
    top: 48%;
    border: 0;
    width: 44px !important;
    height: 44px !important;
    background-size: 100% !important;
    background-color: transparent !important;
    cursor: pointer;
    padding: 0;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    pointer-events: all;
    margin: 0;
    outline: none;
}

.iziModal-navigate>button:hover {
    opacity: 1;
}

.iziModal-navigate-prev {
    left: calc(50% + 120px);
    border: solid #000 !important;
    border-width: 0 0 1px 1px !important;
    transform: rotate(45deg);
}

.iziModal-navigate-next {
    right: calc(50% + 120px);
    border: solid #000 !important;
    border-width: 1px 1px 0 0 !important;
    transform: rotate(45deg);
}

.iziModal.isAttachedTop .iziModal-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.iziModal.isAttachedTop {
    margin-top: 0 !important;
    margin-bottom: auto !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.iziModal.isAttachedBottom {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.iziModal.isFullscreen {
    max-width: 100% !important;
    margin: 0 !important;
    height: 100% !important;
    border-radius: 0 !important;
}

.iziModal.isAttached {
    border-radius: 0 !important;
}

.iziModal.hasScroll .iziModal-wrap {
    overflow-y: scroll;
    overflow-x: hidden;
}

html.iziModal-isOverflow {
    overflow: hidden;
}

html.iziModal-isOverflow body,
html.iziModal-isAttached body {
    overflow-y: scroll;
    position: relative;
}

html.iziModal-isAttached {
    overflow: hidden;
}


/* SCROLL */

.iziModal ::-webkit-scrollbar {
    overflow: visible;
    height: 7px;
    width: 7px;
}

.iziModal ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
}

.iziModal ::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, .4);
}

.iziModal ::-webkit-scrollbar-button {
    height: 0;
    width: 0;
}

.iziModal ::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 2px;
}


/* ANIMATIONS */

.iziModal.fadeOut,
.iziModal-overlay.fadeOut,
.iziModal-navigate.fadeOut,
.iziModal .fadeOut {
    -webkit-animation: iziM-fadeOut 0.5s;
    -moz-animation: iziM-fadeOut 0.5s;
    animation: iziM-fadeOut 0.5s;
    animation-fill-mode: forwards;
}

.iziModal.fadeIn,
.iziModal-overlay.fadeIn,
.iziModal-navigate.fadeIn,
.iziModal .fadeIn {
    -webkit-animation: iziM-fadeIn 0.5s;
    -moz-animation: iziM-fadeIn 0.5s;
    animation: iziM-fadeIn 0.5s;
}

.iziModal.comingIn,
.iziModal-overlay.comingIn {
    -webkit-animation: iziM-comingIn 0.5s ease;
    -moz-animation: iziM-comingIn 0.5s ease;
    animation: iziM-comingIn 0.5s ease;
}

.iziModal.comingOut,
.iziModal-overlay.comingOut {
    -webkit-animation: iziM-comingOut 0.5s cubic-bezier(.16, .81, .32, 1);
    -moz-animation: iziM-comingOut 0.5s cubic-bezier(.16, .81, .32, 1);
    animation: iziM-comingOut 0.5s cubic-bezier(.16, .81, .32, 1);
    animation-fill-mode: forwards;
}

.iziModal.fadeInDown,
.iziModal-overlay.fadeInDown {
    -webkit-animation: iziM-fadeInDown 0.7s cubic-bezier(.16, .81, .32, 1);
    animation: iziM-fadeInDown 0.7s cubic-bezier(.16, .81, .32, 1);
}

.iziModal.fadeOutDown,
.iziModal-overlay.fadeOutDown {
    -webkit-animation: iziM-fadeOutDown 0.5s ease;
    animation: iziM-fadeOutDown 0.5s ease;
}

.iziModal.fadeInUp,
.iziModal-overlay.fadeInUp {
    -webkit-animation: iziM-fadeInUp 0.7s cubic-bezier(.16, .81, .32, 1);
    animation: iziM-fadeInUp 0.7s cubic-bezier(.16, .81, .32, 1);
}

.iziModal.fadeOutUp,
.iziModal-overlay.fadeOutUp {
    -webkit-animation: iziM-fadeOutUp 0.5s ease;
    animation: iziM-fadeOutUp 0.5s ease;
}

.iziModal.fadeInLeft,
.iziModal-overlay.fadeInLeft {
    -webkit-animation: iziM-fadeInLeft 0.7s cubic-bezier(.16, .81, .32, 1);
    animation: iziM-fadeInLeft 0.7s cubic-bezier(.16, .81, .32, 1);
}

.iziModal.fadeOutLeft,
.iziModal-overlay.fadeOutLeft {
    -webkit-animation: iziM-fadeOutLeft 0.5s ease;
    animation: iziM-fadeOutLeft 0.5s ease;
}

.iziModal.fadeInRight,
.iziModal-overlay.fadeInRight {
    -webkit-animation: iziM-fadeInRight 0.7s cubic-bezier(.16, .81, .32, 1);
    animation: iziM-fadeInRight 0.7s cubic-bezier(.16, .81, .32, 1);
}

.iziModal.fadeOutRight,
.iziModal-overlay.fadeOutRight {
    -webkit-animation: iziM-fadeOutRight 0.5s ease;
    animation: iziM-fadeOutRight 0.5s ease;
}

@-webkit-keyframes iziM-comingIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(-20px) perspective( 600px) rotateX( 10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0) perspective( 600px) rotateX( 0);
    }
}

@-moz-keyframes iziM-comingIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(-20px) perspective( 600px) rotateX( 10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0) perspective( 600px) rotateX( 0);
    }
}

@keyframes iziM-comingIn {
    0% {
        opacity: 0;
        /*transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );*/
        transform: scale(0.9) translateY(-20px) perspective( 600px) rotateX( 10deg);
    }
    100% {
        opacity: 1;
        /*transform: scale(1) translateY(0) perspective( 600px ) rotateX( 0 ); */
        transform: scale(1) translateY(0) perspective( 600px) rotateX( 0);
    }
}

@-webkit-keyframes iziM-comingOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

@-moz-keyframes iziM-comingOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

@keyframes iziM-comingOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

@-webkit-keyframes iziM-fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes iziM-fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes iziM-fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes iziM-fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes iziM-fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes iziM-fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes iziM-fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes iziM-fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@-webkit-keyframes iziM-fadeOutDown {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0);
    }
}

@keyframes iziM-fadeOutDown {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0);
    }
}

@-webkit-keyframes iziM-fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes iziM-fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@-webkit-keyframes iziM-fadeOutUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0);
    }
}

@keyframes iziM-fadeOutUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0);
    }
}

@-webkit-keyframes iziM-fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes iziM-fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@-webkit-keyframes iziM-fadeOutLeft {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0);
    }
}

@keyframes iziM-fadeOutLeft {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0);
    }
}

@-webkit-keyframes iziM-fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(200px, 0, 0);
        transform: translate3d(200px, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes iziM-fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(200px, 0, 0);
        transform: translate3d(200px, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@-webkit-keyframes iziM-fadeOutRight {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(200px, 0, 0);
        transform: translate3d(200px, 0, 0);
    }
}

@keyframes iziM-fadeOutRight {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(200px, 0, 0);
        transform: translate3d(200px, 0, 0);
    }
}