/* flag */
#wrapper .flag { display: block; clear: both; font-size: 1em; line-height: 2em; color: #C00; padding-top: 1em; padding-bottom: 1em; border: 1px solid #C00; margin-bottom: 2em; }

/* reset */
* { padding: 0; margin: 0; box-sizing: border-box; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
q:before, q:after { content: ''; }
abbr, acronym { border: 0; }
section, article { display: block; }

/* iOS reset */
input[type="submit"],input[type="button"] { border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer; }
input[type="submit"]::-webkit-search-decoration, input[type="button"]::-webkit-search-decoration { display: none; }
input[type="submit"]::focus, input[type="button"]::focus { outline-offset: -2px; }

/* basic */
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { font-family: "A-OTF A1ÌÀÄ« Std Bold", "A1ÌÀÄ«", "ÞâÌÀÄ«", YuMincho, "¥Ò¥é¥®¥ÎÌÀÄ« ProN W3", "Hiragino Mincho ProN", "HGÌÀÄ«E", "£Í£Ó £ÐÌÀÄ«", "£Í£Ó ÌÀÄ«", serif; -webkit-font-smoothing: auto !important;  text-align: center; letter-spacing: 0.2em; color: #333; background-color: #FFFFFF; margin: 0px; padding: 0px; font-size: 15px; }
img { vertical-align: bottom; max-width: 100%; }

/* link */
a:link, a:visited, a:active { color: #333333; text-decoration: none; }
a:hover { color: #09C; text-decoration: none; }
.clear { clear: both; }
.cbox { zoom: 100%; }
.cbox:after { content: " "; clear: both; height: 0; display: block; visibility: hidden; }
.over img { filter: alpha(opacity=50); opacity: 0.50; }

/* clear */
.clear { clear: both; }
.cbox { zoom: 100%; }
.cbox:after { content: " "; clear: both; height: 0; display: block; visibility: hidden; }

/* options */
.r { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; }
.rl { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin-right: auto; margin-left: auto; display: inline; }

/* sp */
.pc { display: block !important; }
.sp { display: none !important; }
.pcbr { display: block !important; }
.spbr { display: inline !important; }

/* wrapper */
#wrapper { margin-right: auto; margin-left: auto; padding-bottom:5em; font-feature-settings : "palt"; word-wrap : break-word; overflow-wrap : break-word; font-kerning: normal; -webkit-font-kerning: normal; }

/* online_header */
#header { font-family: "A-OTF A1ÌÀÄ« Std Bold", "A1ÌÀÄ«", "ÞâÌÀÄ«", YuMincho, "¥Ò¥é¥®¥ÎÌÀÄ« ProN W3", "Hiragino Mincho ProN", "HGÌÀÄ«E", "£Í£Ó £ÐÌÀÄ«", "£Í£Ó ÌÀÄ«", serif; font-weight: normal; margin: auto; position: relative; background-color: #FFF; height: auto; padding-right: 5%; padding-left: 5%; }
#header h1 { width: 14%; position: absolute; left: 8.2%; top: 1em; z-index: 999; }
#header h1 img { width: 100%; height:auto; }
#header h2 { font-size: 2.4em; float: left; letter-spacing: 0.2em; margin:3.3rem auto 3.3rem 30%; line-height: 1em; }
#header .onavi { float: right; overflow: hidden; padding-top:3.8rem; }
#header .onavi li { float: left; padding-right: 1.2em; padding-left: 1.4em; border-right-width: 1px; border-right-style: solid; border-right-color: #333; line-height: 1em; font-size:1.1em; }
#header .onavi li img { height: 1em !important; width: auto !important; }
#header .onavi li:first-child { border-left: solid 1px #333; }

/* contents */
#online #contents { padding-bottom:0 !important; }

/* footer */
footer { line-height: 1.75em; padding-top: 3em; text-color: #000; }
footer p { font-size: 0.7em; margin-top: 3em; margin-bottom: 1em; }
footer .f_logo { width: 15%; margin-right: auto; margin-left: auto; padding-top: 2em; }
.footer_credit { font-size: 0.7em; }
.menu nav { overflow: hidden; }
.menu li { margin-right: 1em; display: inline; margin-left: 1em; font-size: 1em; }

/* footer */
#footer { padding-top: 6em; padding-bottom: 3em; clear: both; background-color: #FFF; }
#footer nav { margin-bottom: 2em; }
#footer nav li { display: inline-block; padding-right: 1em; padding-left: 1em; }
#footer p { font-size: 0.8em; line-height: 1em; letter-spacing: 0.15em; }

/* etude */
#etude { font-family: "A-OTF A1ÌÀÄ« Std Bold", "A1ÌÀÄ«", "ÞâÌÀÄ«", YuMincho, "¥Ò¥é¥®¥ÎÌÀÄ« ProN W3", "Hiragino Mincho ProN", "HGÌÀÄ«E", "£Í£Ó £ÐÌÀÄ«", "£Í£Ó ÌÀÄ«", serif; font-weight: normal;  padding-bottom: 4em; margin:0 auto; }

/* main */
#etude .main { margin-bottom: 3em; overflow: hidden; position: relative; display: block; clear: both; }
#etude .main h2 { width: 15%; position: absolute; right: 5%; top: 45%; z-index: 99999; }
#etude .main .ex { width: 70%; margin-right: auto; margin-left: auto; overflow: hidden; text-align: left; padding-top: 8em; padding-bottom: 2em; clear: both; }
#etude .main .ex dl { float: left; width: 38%; }
#etude .main .ex dl .title { font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 5em; vertical-align: middle; margin-bottom: 0.5em; }
#etude .main .ex dl .title span {  font-size: 0.3em; vertical-align: middle; font-weight: normal; display: block; line-height: 1em; padding-top: 0.5em;  }
#etude .main .ex dl .size span a { -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; background-color: #333; margin-left: 1em; color: #FFF; font-size: 0.6em; padding-top: 0.5em; padding-right: 1em; padding-bottom: 0.5em; padding-left: 1em; vertical-align: middle; }
#etude .main .ex dl .size { font-size: 1.4em; vertical-align: middle; margin:0 0 0.5em 0; }
#etude .main .ex dl .price { font-size: 1.4em; margin:0 0 0.5em 0; }
#etude .main .ex p { float: right; width: 60%; font-size: 1.4em; line-height: 2.2em; }
#etude .main .banner ul li { -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; float: left; width: 31%; margin-right: 3.5%; overflow: hidden; }
#etude .main .banner ul li:nth-child(3) { margin-right: 0; }
#etude .main .photo { width:90%; background-color: #CCC; margin-right: auto; margin-left: auto; }

/* list */
#etude .list { width:80%; margin:5em auto 0 auto; overflow: hidden; }
#etude .list li { background-color: #FFF; float: left; width: 31.5%; margin-right: 2.75%; }
#etude .list li:nth-child(3n) { margin-right: 0px; }
#etude .list li dt { color: #333; background-color: #EEE; }
#etude .list li dd { display: inline; }
#etude .list li dd a { font-family: Helvetica, Arial, sans-serif; border:solid 1px #333; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #FFF; font-size: 1.4em; line-height: 2.5em; height: 2.5em; width: 2.5em; background-color: #333; margin-left: 0.25em; margin-bottom: 1.5em; margin-top: 1.5em; display: inline-block;  }
#etude .list li dd a:hover { color: #333;  background-color: #fff; }
#etude .list ul li dl .color { font-size: 1.2em; }
#etude .list .credit { text-align: right; font-size: 0.8em; margin-bottom: 2em; }
#etude .list.list_ex { border-top:solid 1px #999; padding-top:5em; margin-top:5em; }
#etude .list.list_ex h3 { font-size: 2.2em; margin:0 0 0.6em 0; line-height: 1em; text-align: left; margin-bottom:2em; }

/* banner */
#etude .banner { box-sizing: border-box; overflow: hidden; clear: both; width:80%; margin:0 auto; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; background-color: #f4f4f4; padding: 3.5%; margin: 5.5em auto 0 auto;   }
#etude .banner.none { padding: 0; }

/* ito_bn */
#etude .ito_bn { background-color: #f4f4f4; overflow: hidden; padding:0; text-align: left; }
#etude .ito_bn h3 { font-size: 2.2em; margin:0 0 0.6em 0; line-height: 1em; }
#etude .ito_bn p { font-size: 1.2em; line-height:2em; margin-bottom:2.5em; }
#etude .ito_bn a.link { background-color:#333; color:#fff; font-size: 1.2em; line-height:1em; padding:1em 2em; border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em; overflow: hidden; }
#etude .ito_bn a.link:hover { background-color:#fff; color:#333;  }
#etude .ito_bn .ito_left { padding:3em 0 0 5%; float:left; width:45%; }
#etude .ito_bn .ito_right { float:right; width:50%; }

/* ito */
#etude .ito { overflow: hidden; display:block; width:80%; margin:auto; }
#etude .ito dt { float: left; width: 50%; margin-right: 5%; }
#etude .ito dd { text-align: left; }
#etude .ito .title { font-family: Helvetica, Arial, sans-serif; font-size: 3.8em; font-weight: 700; margin-bottom: 0.25em; vertical-align: middle; padding-top: 0.25em; }
#etude .ito .title span { font-size: 0.4em; font-weight: normal; vertical-align: middle; }
#etude .ito .price { font-size: 1.3em; padding-top: 1em; }
#etude .ito .cart input[type=submit] { -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; cursor: pointer;  font-size: 1em; line-height: 1em; color: #FFF; background-color: #333; border: none; padding: 1em 1.5em; margin-top: 1em; }

/* size_ex */
#etude .size_ex { background-color: #fff; overflow: hidden; padding:5% 0; text-align: left; margin:0 auto; border-top:solid 1px #999; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
#etude .size_ex h3 { font-size: 2.2em; margin:0 0 1.5em 0; }
#etude .size_ex .size_s { float:left; width:48%; }
#etude .size_ex .size_m { float:right; width:48%; }
#etude .size_ex .size_s { float:left; width:48%; }
#etude .size_ex .ex { font-size: 1.3em; line-height:2em; margin:2em 0 0 0; }
#etude .size_ex .size_sml,
#etude_ex .size_sml { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
#etude_ex .size_sml { margin:3em auto 0 auto; }
#etude .size_ex .size_sml dt,
#etude_ex .size_sml dt { width:60%; margin:2em auto; }
#etude .size_ex .size_sml dd,
#etude_ex .size_sml dd { width:25%; text-align:left; }
#etude_ex .size_sml dd { font-size: 1.2em; line-height:2em; text-align:justify; }

/* iconsultationto */
#etude .consultation { background-color: #f4f4f4; overflow: hidden; padding:0; text-align: left; }
#etude .consultation h3 { font-size: 2.2em; margin:0 0 0.6em 0; line-height: 1em;  }
#etude .consultation p { font-size: 1.2em; line-height:2em; margin-bottom:2.5em; }
#etude .consultation a.link { background-color:#333; color:#fff; font-size: 1.2em; line-height:1em; padding:1em 2em; border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em; overflow: hidden; }
#etude .consultation a.link:hover { background-color:#fff; color:#333;  }
#etude .consultation .consultation_left { padding:3em 0 0 5%; float:left; width:45%; }
#etude .consultation .consultation_right { float:right; width:50%; }

/* etude_ex */
#etude_ex { clear:both; }
#etude_ex h2 { border-radius: 1em; -webkit-border-radius: 1em; -moz-border-radius: 1em; font-size: 1.8em; line-height: 2.6em; background-color: #E9E9D8; margin-bottom: 1em; font-weight: bold; margin-top: 3em; }
#etude_ex p { font-size: 1.4em; text-align: left; line-height: 2em; }
#etude_ex p span { font-size: 1.5em; font-weight: bold; }
#etude_ex { margin-bottom: 5em; }
#etude_ex .main { position: relative; }
#etude_ex .main .read { position: absolute; top: 8em; right: 12%; text-align: left; }
#etude_ex .main .read h1 { font-size: 2em; line-height: 1em; margin-bottom: 1.4em; font-weight: bold; letter-spacing: 0.05em; }
#etude_ex .main .read p { font-size: 1.2em; line-height: 2.2em; }
.etude_ex_box { border-radius: 1em; -webkit-border-radius: 1em; -moz-border-radius: 1em; width: 70%; margin-right: auto; margin-left: auto; }

/* products */
#etude .products { -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; position: relative; overflow: hidden; background-color:#f4f4f4; width:80%; margin: 0 auto 4em auto; padding:5em 5% 3em 5%; box-sizing: border-box; }
#etude .products .production { display: none; position: absolute; z-index: 0; left: 0px; text-align: center; font-size: 1.2em; line-height: 1.6em; width: 100%; padding: 1em 0; margin: 0 auto; }
#etude .products h2 { -webkit-border-radius: 0.3em; -moz-border-radius: 0.3em; border-radius: 0.3em; text-align: center; font-size: 2em; line-height: 2em; font-weight: bold; padding: 1.8em auto; margin:0 0 2em 0; background-color: #edd868; }
#etude .products li { border-bottom: solid 1px #ddd; overflow: hidden; position: relative; padding:0 0 2em 0; margin:0 0 2em 0; }
#etude .products li:last-child { border:none; margin:0; }
#etude .products li dt { float: left; text-align: left; margin: 0 2em 0 2em; font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 2em; line-height: 5em; }
#etude .products li dd.data { width:12%; margin-left:5%; margin-right:5%; text-align: left; float: left; font-weight: normal; font-size: 1.1em; line-height: 1.8em; display:block; font-family: "A-OTF A1ÌÀÄ« Std Bold", "A1ÌÀÄ«", "ÞâÌÀÄ«", YuMincho, "¥Ò¥é¥®¥ÎÌÀÄ« ProN W3", "Hiragino Mincho ProN", "HGÌÀÄ«E", "£Í£Ó £ÐÌÀÄ«", "£Í£Ó ÌÀÄ«", serif; }
#etude .products li dd.data span.spec_title { font-size: 0.8em; margin-bottom:0.5em; display:block; }
#etude .products li dd.knitter { background-color: #fff; padding:1em; overflow: hidden; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-right:3em; float: left; width:12%; }
#etude .products li dd.comment { font-size:1.1em; line-height: 1.8em; float: left; margin-top: 0.2em; margin-right: 1em; width:22%; text-align: justify; }
#etude .products li dd.comment span { font-size: 0.75em; margin-bottom:0.5em; display:block; }
#etude .products li dd.cart { float: right; padding-top: 3em; }
#etude .products li .cart .soldout { -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em;  font-size: 1em; line-height: 1em; color: #333; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; padding-top: 1em; padding-right: 1.5em; padding-bottom: 1em; padding-left: 1.5em; }
#etude .products li .cart .bn { font-family: "A-OTF A1ÌÀÄ« Std Bold", "A1ÌÀÄ«", "ÞâÌÀÄ«", YuMincho, "¥Ò¥é¥®¥ÎÌÀÄ« ProN W3", "Hiragino Mincho ProN", "HGÌÀÄ«E", "£Í£Ó £ÐÌÀÄ«", "£Í£Ó ÌÀÄ«", serif; letter-spacing: 0.15em; -webkit-border-radius: 3em; -moz-border-radius: 3em; border-radius: 3em; cursor: pointer;  font-size: 1.2em; line-height: 1em; color: #FFF; background-color: #333; border: none; padding: 1em 6em; }
#etude .products li .cart .bn:hover { color: #333; background-color: #fff; }
#etude .products .order { text-align: left; overflow: hidden; margin-bottom: 1em; }
#etude .products .order p { font-size: 1.2em; line-height: 2em; }
#etude .products .order p a { padding-bottom: 0.2em; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #333; }
#etude .products .order p span { font-size: 1.5em; font-weight: bold; margin-right: 0.4em; margin-left: 0.4em; }
#etude .products .order .order_ex a { border-radius: 3em; -webkit-border-radius: 3em; -moz-border-radius: 3em; text-align: center; display: block; width: 20%; float: right; }
#etude .products .cart { line-height: 3em; }
#etude .products .cart .cartjs_box .cartjs_product_form .cartjs_cart_in input { font-family: "A-OTF A1ÌÀÄ« Std Bold", "A1ÌÀÄ«", "ÞâÌÀÄ«", YuMincho, "¥Ò¥é¥®¥ÎÌÀÄ« ProN W3", "Hiragino Mincho ProN", "HGÌÀÄ«E", "£Í£Ó £ÐÌÀÄ«", "£Í£Ó ÌÀÄ«", serif; letter-spacing: 0.15em; -webkit-border-radius: 3em; -moz-border-radius: 3em; border-radius: 3em; cursor: pointer;  font-size: 1.2em; line-height: 1em; color: #FFF; background-color: #333; border: none; padding: 1em 3em; }
#etude .products .cart .cartjs_box .cartjs_product_form .cartjs_cart_in input:hover { color: #333; background-color: #fff; }
#etude .products .cart .cartjs_box .cartjs_product_form .cartjs_product_table { display: none; float: left; padding: 0px; margin-top: 0px; margin-right: 2em; margin-bottom: 0px; margin-left: 0px; height: auto; }
#etude .products .cart .cartjs_box .cartjs_product_form .cartjs_product_table td { padding: 0px; line-height: 1em; height: auto; padding-left:1em; }
#etude .products .cart .cartjs_box .cartjs_product_form .cartjs_cart_in { float: left; }

/* cartjs */
.cartjs_product_num { display:none !important; }
.cartjs_product_table { display:block !important; }

/* tobichi */
#tobichi .tobichi_main { margin-bottom: 3em; }
#tobichi .tobichi_box { text-align: left; background-size: contain; background-image: url(tobichi/back-01.png); background-repeat: repeat-y;  width: 80%; margin: auto; }
#tobichi .tobichi_box h2 { font-size: 1.6em; line-height: 2em; font-weight: bold; margin-bottom: 1em; width: 50%; margin-right: auto; margin-left: auto; margin-top: 1em; }
#tobichi .tobichi_box.txt { line-height: 2em; font-size: 1.1em; margin: auto; }
#tobichi .tobichi_box.txt img { margin-right: 0.5em; margin-left: 0.5em; }
#tobichi .tobichi_box.txt p { margin-bottom: 2em; width: 50%; margin-right: auto; margin-left: auto; }
#tobichi .tobichi_box.txt p .cap { font-size: 0.8em; line-height: 1.8em; padding-top: 1em; display: block; font-weight: bold; }
#tobichi .tobichi_box.txt p .price { font-size: 1.4em; font-weight: bold; }
#tobichi .tobichi_box.txt .line { width: 55%; margin-top: 2em; margin-right: auto; margin-bottom: 1em; margin-left: auto; }
#tobichi .tobichi_box a  ,#twotone .twotone_box a{ padding-bottom: 0.2em; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #000; }

/* twotone */
#twotone .twotone_main { margin: auto; padding: 2em; }
#twotone .twotone_box { padding-top: 8em; overflow: hidden; text-align: left;  margin: auto; width: 80%; }
#twotone .twotone_box.cap { text-align: center; font-size: 0.9em; line-height: 2em; padding-top: 5em; }
#twotone .twotone_box .left { float: left; width: 50%; }
#twotone .twotone_box .right { float: left; width: 50%; }
#twotone .twotone_box h2 { font-size: 1.3em; font-weight: bold; margin-bottom: 1em; margin-top: 1em; }
#twotone .twotone_box .txt { font-size: 1.2em; line-height: 2em; padding-left: 4em; box-sizing: border-box; }
#twotone .twotone_box .txt strong { font-weight: bold; }
#twotone .twotone_box .txt p { margin-bottom: 2em; }
#twotone .twotone_box .txt p span { font-size: 1.2em; font-weight: bold; }
#twotone .twotone_box a.online_link ,  #tobichi .tobichi_box a.online_link{ border-radius: 2em; -webkit-border-radius: 2em%; -moz-border-radius: 2em; color: #FFF; background-color: #000; padding-top: 0.8em; padding-right: 1.2em; padding-bottom: 0.8em; padding-left: 1.2em; font-weight: bold; font-size: 0.9em; line-height: 1em; }
#twotone .site_link{ text-align: center; overflow: hidden; padding-top: 5em; padding-bottom: 3em; }
#twotone .site_link   li{ display: inline; }
#twotone .site_link li   a{ border-radius: 2em; -webkit-border-radius: 2em%; -moz-border-radius: 2em; padding-top: 0.5em; padding-right: 1em; padding-bottom: 0.5em; padding-left: 1em; border: 2px solid #000; display: inline-block; margin-right: 2em; margin-left: 2em; font-weight: bold; }
#twotone .credit { text-align: right; padding-top:1em;font-size: 0.7em; }

/* policy */
#policy { vertical-align:top; text-align: left; width: 100%; margin-right: auto; margin-left: auto; padding-top: 5em; padding-bottom: 5em; line-height: 1.8em; }
#policy h2 {  font-size: 1.4em; font-weight: bold; margin-bottom: 2em; }
#policy h3 { font-size: 1.2em; font-weight: bold; margin-top: 2em; margin-bottom: 1em; }
#policy th { padding-top:1em; padding-right: 3em; font-size: 1em; white-space: nowrap; }
#policy td { padding-top:1em; font-size: 1em; }

/* other */
#other { text-align: left; width: 50%; margin-right: auto; margin-left: auto; }
#other h2 { font-size: 1.6em; margin-top: 2em; margin-bottom: 1em; }
#other h3 { font-size: 1.2em; margin-top: 2em; margin-bottom: 1em; }
#other table { width: 95%; margin-left: 5%; border-top-width: 1px; border-top-style: solid; border-top-color: #CCC; }
#other table th { white-space: nowrap; padding-top: 0.8em; padding-bottom: 0.8em; font-weight: normal; width: 35%; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; }
#other table td { line-height: 1.5em; padding-top: 0.8em; padding-bottom: 0.8em; padding-left: 2em; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; }

/* letter */
#letter { font-size: 16px; min-width: 1000px; max-width: 1280px; background-size: 100% auto; background-image: url(https://img21.shop-pro.jp/PA01324/882/etc/back.jpg?cmsp_timestamp=20181102102104); background-repeat: repeat-y; background-position: center top; width: 96%; margin-right: auto; margin-left: auto; padding-top: 5vh; position: relative; }
#letter #header { width: 62.5%; margin-right: auto; margin-left: auto; position: relative; display: block; }
#letter #header .photo { position: relative; overflow: hidden; margin-bottom: 6em; padding-top: 5em; margin-right: auto; margin-left: auto; }
#letter #header .photo h1 { position: static; z-index: 999; width: 30%; display: inline-block; vertical-align: middle; border: 1px solid #999; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; overflow: hidden; float: none; }
#letter #header .photo h1 img { height: auto; width: 100%; }
#letter #header .photo h2 { width: 16%; display: inline-block; margin-left: 10%; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; vertical-align: middle; }
#letter #header .photo h2 img { height: auto; width: 100%; }
#letter #header .cp { text-align: left; position: absolute;  z-index: 999; font-size: 0.7em; left: -3em; bottom: 0px; }
#letter #profile { width: 62.5%; margin-right: auto; margin-left: auto; overflow: hidden; margin-bottom: 3em; padding-top: 2em; border-top-width: 1px; border-top-style: solid; border-top-color: #CCC; padding-bottom: 2em; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCC; }
#letter #profile ul { float: none; width: 90%; margin-right: auto; margin-left: auto; }
#letter #profile ul li { float: left; width: 45%; }
#letter #profile ul li:nth-child(2) { float: right; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: solid; width: 45%; padding-left: 5%; border-left-width: 1px; border-left-color: #CCC; }
#letter #profile ul li dt { float: left; width: 25%; margin-right: 10%; }
#letter #profile ul li dd { text-align: left; float: right; width: 65%;  font-size: 0.8em; line-height: 1.8em; }
#letter #contents { width: 62.5%; margin-right: auto; margin-left: auto; }
#letter #cart { overflow: hidden; width: 62.5%; margin-right: auto; margin-left: auto; }
#letter #cart #main { margin-bottom: 1.3em; }
#letter #cart #list ul { font-size: 0; padding: 10px 0 0 0; margin: 0; }
#letter #cart #list li { float: left; width: 18%; margin-right: 2.5%; }
#letter #cart #list li:last-child { margin-right: 0px; }
#letter #cart .ex { text-align: left; padding-top: 3em; padding-bottom: 5em; overflow: hidden; clear: both;  width: 80%; margin-right: auto; margin-left: auto; line-height: 1.8em; }
#letter #cart .ex p { margin-bottom: 1em; }
#letter #cart .ex .left { float: left; width: 55%; font-size: 0.9em; }
#letter #cart .ex .left cp { font-size: 0.9em; line-height: 1.8em; }
#letter #cart .ex .right { float: right; width: 40%; }
#letter #cart .ex .right span { font-size: 1.8em; }
#letter #cart .ex .right input[type=text] { width: 50px; border: 1px solid #CCC; text-align: center; padding: 0.5em; }
#letter #cart .ex .right input[type=submit] {  font-size: 1em; line-height: 1em; color: #FFF; padding-top: 1em; padding-right: 3em; padding-bottom: 1em; padding-left: 3em; display: block; margin-top: 1em; background-color: #333; text-align: center; border: 1px solid #333; cursor: pointer; }
#letter #cart .ex .right a:hover { text-decoration: none; }
#letter .photo { margin-bottom: 4em; }
#letter .photo.hobo { padding-right: 15%; padding-left: 15%; }
#letter .text.rl { text-align: left; margin-right: auto; margin-left: auto;  line-height: 2.6em; padding-bottom: 2em; }
#letter .text.rl h2 { font-size: 1.5em; margin-bottom: 2em; margin-left: 2em; line-height: 2em; }
#letter .text.rl p { padding-top: 2em; line-height: 2.6em; margin-bottom: 3em; }
#letter .text.rl p a { color: #000; padding-left: 0.3em; border-left-width: 1px; border-left-style: dashed; border-left-color: #333; }
#letter .text.rl p a:hover { color: #999; text-decoration: none; border-top-color: #999; border-right-color: #999; border-bottom-color: #999; border-left-color: #999; }
#letter #back { width: 90%; margin-top: 4em; margin-bottom: 2.5em; margin-right: auto; margin-left: auto; }
#letter #back ul li { display: inline-block; margin-right: 2em; }
#letter #back ul li:nth-child(2) { margin-right: 0; }
#letter #back ul li span { padding-bottom: 3px; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #000; font-size: 0.8em;  display: inline-block; }
#letter #footer { padding-bottom: 3em; overflow: hidden;  font-size: 0.8em; }
#letter #footer .menu { margin-bottom: 1em; }
#letter #footer .menu li { display: inline; margin-right: 1em; margin-left: 1em; }
#letter #footer .menu li a { color: #000; text-decoration: none; }

/* sp */
body { }
body { }
body { }
body { }
body { }
body { }
body { }
body { }
body { }
body { }

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

/* sp */
.pc { display: none !important; }
.sp { display: block !important; }
.pcbr { display: inline !important; }
.spbr { display: block !important; }

/* online_header */
#header { padding:0; font-family: "A-OTF A1ÌÀÄ« Std Bold", "A1ÌÀÄ«", "ÞâÌÀÄ«", YuMincho, "¥Ò¥é¥®¥ÎÌÀÄ« ProN W3", "Hiragino Mincho ProN", "HGÌÀÄ«E", "£Í£Ó £ÐÌÀÄ«", "£Í£Ó ÌÀÄ«", serif; font-weight: normal; margin: auto; position: relative; background-color: #FFF; height: auto;  }
#header h1 { width: 33%; position: absolute; left: 0; top: 0; z-index: 999; }
#header h2 { margin:0; padding-top:1.5em; padding-left:37%; font-size: 1.8em; text-align: left; display:block; float: none; letter-spacing: 0.15em; line-height: 1.6em; }
#header .onavi { float: none; overflow: hidden; padding-top:3.5em; padding-bottom:2em; }
#header .onavi li { display:inline-block; float: none; padding-right: 1.2em; padding-left: 1.4em; border-right-width: 1px; border-right-style: solid; border-right-color: #333; line-height: 1em; font-size:1.1em; }
#header .onavi li img { height: 1em !important; width: auto !important; }
#header .onavi li:first-child { border-left: solid 1px #333; }

/* main */
#etude .main { margin-bottom: 3em; overflow: hidden; position: relative; display: block; clear: both; }
#etude .main h2 { width: 15%; position: absolute; right: 5%; top: 45%; z-index: 99999; }
#etude .main .ex { width: 80%; margin-right: auto; margin-left: auto; overflow: hidden; text-align: left; padding-top: 0; padding-bottom: 2em; clear: both; }
#etude .main .ex dl { float: none; width: 100%; margin-bottom:2em; text-align: center;}
#etude .main .ex dl .title { font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 4em; vertical-align: middle; margin-bottom: 0.5em; }
#etude .main .ex dl .title span {  font-size: 0.3em; vertical-align: middle; font-weight: normal; display: block; line-height: 1em; padding-top: 0.5em;  }
#etude .main .ex dl .size span a { -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; background-color: #333; margin-left: 1em; color: #FFF; font-size: 0.6em; padding-top: 0.5em; padding-right: 1em; padding-bottom: 0.5em; padding-left: 1em; vertical-align: middle; }
#etude .main .ex dl .size { font-size: 1.4em; vertical-align: middle; margin:0 0 0.5em 0; }
#etude .main .ex dl .price { font-size: 1.4em; margin:0 0 0.5em 0; }
#etude .main .ex p { float: none; width: 100%; font-size: 1.2em; line-height: 2em; text-align: justify; }
#etude .main .ex p br { display:none; }
#etude .main .banner ul li { -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; float: none; width: 100%; margin-right: 0; margin-bottom: 1em; overflow: hidden; }
#etude .main .banner ul li:nth-child(3) { margin: 0; }
#etude .main .photo { width:100%; background-color: #CCC; margin-right: auto; margin-left: auto; }

/* etude_ex */
#etude_ex h2 { border-radius: 1em; -webkit-border-radius: 1em; -moz-border-radius: 1em; font-size: 1.2em; line-height: 2.6em; background-color: #E9E9D8; margin-bottom: 1em; font-weight: bold; margin-top: 3em; }
#etude_ex p { font-size: 1.2em; line-height: 2em; text-align: justify;  }
#etude_ex p span { font-size: 1.5em; font-weight: bold; }
#etude_ex { margin-bottom: 5em; }
#etude_ex .main { position: relative; }
#etude_ex .main .read { position: static; text-align: left; width:80%; margin:auto; padding-top:5em; }
#etude_ex .main .read h1 { font-size: 1.6em; line-height: 1em; margin-bottom: 1.4em; font-weight: bold; letter-spacing: 0.05em; }
#etude_ex .main .read p { font-size: 1.2em; line-height: 2em; text-align: justify; }
#etude_ex .main .read p br { display:none; }
.etude_ex_box { border-radius: 1em; -webkit-border-radius: 1em; -moz-border-radius: 1em; width: 80%; margin-right: auto; margin-left: auto; }

/* list */
#etude .list { width:88%; margin:5em auto 0 auto; overflow: hidden; }
#etude .list li { background-color: #FFF; float: none; width: 100%; margin-right: 0; }
#etude .list li:nth-child(3n) { margin-right: 0px; }
#etude .list li dt { color: #333; background-color: #EEE; }
#etude .list li dd { display: inline; }
#etude .list li dd a { font-family: Helvetica, Arial, sans-serif; border:solid 1px #333; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #FFF; font-size: 1.4em; line-height: 2.5em; height: 2.5em; width: 2.5em; background-color: #333; margin-left: 0.25em; margin-bottom: 1.5em; margin-top: 1.5em; display: inline-block;  }
#etude .list li dd a:hover { color: #333;  background-color: #fff; }
#etude .list ul li dl .color { font-size: 1.2em; }
#etude .list .credit { text-align: right; font-size: 0.8em; margin-bottom: 2em; }
#etude .list.list_ex { border-top:solid 1px #999; padding-top:3em; margin-top:3em; }
#etude .list.list_ex h3 { font-size: 1.8em; line-height: 1em; text-align: left; margin-bottom:2em; }

/* banner */
#etude .banner { box-sizing: border-box; overflow: hidden; clear: both; width:86%; margin:0 auto; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; background-color: #f4f4f4; padding: 3.5%; margin: 3em auto 0 auto;   }
#etude .banner.none { padding: 0; }

/* flexslider */
#etude .flexslider { margin-bottom: 5em; }

/* ito_bn */
#etude .ito_bn { background-color: #f4f4f4; overflow: hidden; padding:0; text-align: left; }
#etude .ito_bn h3 { font-size: 1.8em; margin:0 0 1em 0; line-height: 1em; }
#etude .ito_bn p { font-size: 1.2em; line-height:2em; margin-bottom:2.5em; text-align: justify; letter-spacing:0.15em; }
#etude .ito_bn a.link { background-color:#333; color:#fff; font-size: 1.2em; line-height:1em; padding:1em 2em; border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em; overflow: hidden; }
#etude .ito_bn a.link:hover { background-color:#fff; color:#333;  }
#etude .ito_bn .ito_left { padding:3em 10% 4em 10%; float:none; width:100%; }
#etude .ito_bn .ito_right { float:none; width:100%; }

/* iconsultationto */
#etude .consultation { background-color: #f4f4f4; overflow: hidden; padding:0; text-align: left; }
#etude .consultation h3 { font-size: 1.8em; margin:0 0 1em 0; line-height: 1em;  }
#etude .consultation p { font-size: 1.2em; line-height:2em; margin-bottom:2.5em; text-align: justify; letter-spacing:0.15em; }
#etude .consultation a.link { background-color:#333; color:#fff; font-size: 1.2em; line-height:1em; padding:1em 2em; border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em; overflow: hidden; }
#etude .consultation a.link:hover { background-color:#fff; color:#333;  }
#etude .consultation .consultation_left { padding:3em 10% 4em 10%; float:none; width:100%; }
#etude .consultation .consultation_right { float:none; width:100%; }

/* size_ex */
#etude .size_ex { background-color: #fff; overflow: hidden; padding:2.5% 0; text-align: left; margin:0 auto; border-top:solid 1px #999; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; width:86% !important; }
#etude .size_ex h3 { font-size: 2.2em; margin:0 0 1.5em 0; }
#etude .size_ex .size_s { float:none; width:100%; margin-bottom:5em; }
#etude .size_ex .size_m { float:none; width:100%; }
#etude .size_ex .ex { font-size: 1.15em; line-height:2em; margin:2em 0 0 0; }
#etude .size_ex .size_sml,
#etude_ex .size_sml { flex-direction: column; }
#etude .size_ex .size_sml dt,
#etude_ex .size_sml dt { width:100%; margin:0 auto 2em auto; }
#etude .size_ex .size_sml dd,
#etude_ex .size_sml dd { width:100%; margin:0 auto 4em auto; }

/* online */
#contents .product_list li { position: relative; margin:0 auto 5em auto; padding:0; }
#contents .product_list li.mm01 { padding-bottom:1em; }
#contents .product_list li.sub { position: relative; width:90%; margin:0 auto 5em auto; }
#contents .product_list li.waku { border:solid 1em #f4f4f4; }
#contents .product_list li ul { width:80%; margin:auto; position: static; }
#contents .product_list li ul a { margin-top:0;}
#contents .product_list li.mm01 ul a { color:#fff; }
#contents .product_list li.mm01 ul a:hover { color:#333; background-color:#fff;}
#contents .product_list li ul li { margin-bottom:2em;}

/* products */
#etude .products { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; position: relative; overflow: hidden; background-color:#f4f4f4; width:100%; margin: 0 auto 4em auto; padding:2em 5% 2em 5%; box-sizing: border-box; }
#etude .products .production { display: none; position: absolute; z-index: 0; left: 0px; text-align: center; font-size: 1.2em; line-height: 1.6em; width: 100%; padding: 1em 0; margin: 0 auto; }
#etude .products h2 { -webkit-border-radius: 0.3em; -moz-border-radius: 0.3em; border-radius: 0.3em; text-align: center; font-size: 1.6em; line-height: 1.4em; font-weight: bold; padding: 1em; margin:0 0 2em 0; background-color: #edd868; }
#etude .products li { border-bottom: solid 1px #ddd; overflow: hidden; position: relative; padding:0 0 6em 0; margin:0 0 2em 0; }
#etude .products li:last-child { border:none; margin:0; }
#etude .products li dt { float: none; text-align: center; margin:0 auto 1em auto; font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 2em; line-height: 1.5em; }
#etude .products li dd.data { width:35%; margin:0 5% 2em 5%; text-align: left; float: left; font-weight: normal; font-size: 1.3em; line-height: 1.8em; display:block; font-family: "A-OTF A1ÌÀÄ« Std Bold", "A1ÌÀÄ«", "ÞâÌÀÄ«", YuMincho, "¥Ò¥é¥®¥ÎÌÀÄ« ProN W3", "Hiragino Mincho ProN", "HGÌÀÄ«E", "£Í£Ó £ÐÌÀÄ«", "£Í£Ó ÌÀÄ«", serif; }
#etude .products li dd.data span.spec_title { font-size: 0.8em; margin-bottom:0.5em; display:block; }
#etude .products li dd.knitter { margin:0 5% 2em 5%; background-color: #fff; padding:1em; overflow: hidden; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;  float: right; width:45%; }
#etude .products li dd.comment { font-size:1.1em; line-height: 1.8em; float: left; margin-top: 0.2em; margin-right: 1em; width:22%; text-align: justify; }
#etude .products li dd.comment span { font-size: 0.75em; margin-bottom:0.5em; display:block; }
#etude .products li dd.cart { float: none; padding-top: 3em; }
#etude .products li .cart .soldout { -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em;  font-size: 1em; line-height: 1em; color: #333; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; padding-top: 1em; padding-right: 1.5em; padding-bottom: 1em; padding-left: 1.5em; }
#etude .products li .cart .bn { font-family: "A-OTF A1ÌÀÄ« Std Bold", "A1ÌÀÄ«", "ÞâÌÀÄ«", YuMincho, "¥Ò¥é¥®¥ÎÌÀÄ« ProN W3", "Hiragino Mincho ProN", "HGÌÀÄ«E", "£Í£Ó £ÐÌÀÄ«", "£Í£Ó ÌÀÄ«", serif; letter-spacing: 0.15em; -webkit-border-radius: 3em; -moz-border-radius: 3em; border-radius: 3em; cursor: pointer;  font-size: 1.2em; line-height: 1em; color: #FFF; background-color: #333; border: none; padding: 1em 6em; }
#etude .products li .cart .bn:hover { color: #333; background-color: #fff; }
#etude .products .order { text-align: left; overflow: hidden; margin-bottom: 1em; width:90%; margin:auto; }
#etude .products .order p { font-size: 1.2em; line-height: 2em; letter-spacing:0.1em; text-align: justify;}
#etude .products .order p br { display:none; }
#etude .products .order p a { padding-bottom: 0.2em; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #333; }
#etude .products .order p span { font-size: 1.2em; font-weight: bold; margin-right: 0.4em; margin-left: 0.4em; }
#etude .products .order .order_ex a { border-radius: 3em; -webkit-border-radius: 3em; -moz-border-radius: 3em; text-align: center; display: block; width: 60%; float: none; margin:2em auto 2em auto; }
#etude .products .cart { line-height: 1.5em; height: auto; padding:0; margin:0;  }
#etude .products .cart .cartjs_box .cartjs_product_form .cartjs_cart_in input { width:100%; font-family: "A-OTF A1ÌÀÄ« Std Bold", "A1ÌÀÄ«", "ÞâÌÀÄ«", YuMincho, "¥Ò¥é¥®¥ÎÌÀÄ« ProN W3", "Hiragino Mincho ProN", "HGÌÀÄ«E", "£Í£Ó £ÐÌÀÄ«", "£Í£Ó ÌÀÄ«", serif; letter-spacing: 0.15em; -webkit-border-radius: 3em; -moz-border-radius: 3em; border-radius: 3em; cursor: pointer;  font-size: 1.2em; line-height: 1em; color: #FFF; background-color: #333; border: none; padding: 1em 3em; }
#etude .products .cart .cartjs_box .cartjs_product_form .cartjs_cart_in input:hover { color: #333; background-color: #fff; }
#etude .products .cart .cartjs_box .cartjs_product_form .cartjs_product_table { display: none; float: none; padding: 0px; margin-top: 0px; margin-right: 2em; margin-bottom: 0px; margin-left: 0px; height: auto; }
#etude .products .cart .cartjs_box .cartjs_product_form .cartjs_product_table td { text-align: center; padding: 0px; line-height: 1em; height: auto; padding-left:1em; }
#etude .products .cart .cartjs_box .cartjs_product_form .cartjs_cart_in { float: none; width:100%; margin-top:2em; }
#etude .products.yoyaku li { padding:0;}

/* letter */
#letter { font-size: 12px; min-width: 100%; max-width: 100%; background-size: 100% auto; background-image: url(https://img21.shop-pro.jp/PA01324/882/etc/back_s.jpg?cmsp_timestamp=20181102101919); background-repeat: no-repeat; background-position: center top; width: 96%; margin-right: auto; margin-left: auto; padding-top: 5vh; position: relative; }
#letter #header { width: 80%; margin-right: auto; margin-left: auto; position: relative; }
#letter #header .photo { position: relative; overflow: hidden; margin-bottom: 7em; padding-top: 5em; }
#letter #header .photo h1 { z-index: 999; width: 45%; display: inline-block; vertical-align: middle; border: 1px solid #999; margin-left: auto; margin-right: 5%; }
#letter #header h1 img { height: auto; width: 100%; }
#letter #header .photo h2 { width: 25%; display: inline-block; vertical-align: middle; padding: 0px; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; }
#letter #header .photo h2 img { height: auto; width: 100%; }
#letter #header .cp { text-align: left; position: absolute;  z-index: 999; font-size: 0.7em; left: -3em; bottom: 0px; }
#letter #profile { width: 90%; margin-right: auto; margin-left: auto; overflow: hidden; margin-bottom: 3em; padding-top: 2em; border-top-width: 1px; border-top-style: solid; border-top-color: #CCC; padding-bottom: 2em; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCC; }
#letter #profile ul li { float: none; width: 90%; margin-right: auto; margin-left: auto; }
#letter #profile ul li:nth-child(2) { padding-left: 0; padding-top: 2em; padding-bottom: 1em; float: none; width: 90%; margin-right: auto; margin-left: auto; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; }
#letter #profile ul li dt { float: none; width: 40%; margin-bottom: 2em; margin-top: 2em; margin-right: auto; margin-left: auto; }
#letter #profile ul li dd { margin-right: auto; margin-left: auto; text-align: left; float: none; width: 100%;  font-size: 10px; line-height: 1.8em; }
#letter #contents { width: 80%; margin-right: auto; margin-left: auto; }
#letter #cart { overflow: hidden; width: 80%; margin-right: auto; margin-left: auto; }
#letter #cart #main { margin-bottom: 1.3em; }
#letter #cart #list ul { font-size: 0; padding: 10px 0 0 0; margin: 0; }
#letter #cart #list li { float: left; width: 18%; margin-right: 2.5%; }
#letter #cart #list li:last-child { margin-right: 0px; }
#letter #cart .ex { text-align: left; padding-top: 3em; padding-bottom: 5em; overflow: hidden; clear: both;  width: 100%; margin-right: auto; margin-left: auto; }
#letter #cart .ex p { margin-bottom: 1em; }
#letter #cart .ex .left { float: none; width: 100%; font-size: 10px; margin-right: auto; margin-left: auto; margin-bottom: 3em; }
#letter #cart .ex .right { float: none; width: 100%; margin-right: auto; margin-left: auto; }
#letter #cart .ex .right span { font-size: 2.2em; }
#letter #cart .ex .right input[type=text] { width: 90px; border: 1px solid #CCC; text-align: center; padding: 0.5em; }
#letter #cart .ex .right input[type=submit] {  font-size: 1em; line-height: 1em; color: #FFF; padding-top: 1em; padding-right: 3em; padding-bottom: 1em; padding-left: 3em; display: block; margin-top: 1em; background-color: #333; text-align: center; border: 1px solid #333; cursor: pointer; }
#cart .ex .right a:hover { text-decoration: none; }
#letter .photo { margin-bottom: 4em; }
#letter .photo.slide { padding-bottom: 2em; }
#letter .photo.hobo { padding-right: 0%; padding-left: 0%; }
#letter .rl { -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; }
#letter .text { width: 90%; height: auto; text-align: left; margin-right: auto; margin-left: auto;  padding-bottom: 2em; }
#letter .text.rl { width: 90%; height: auto; text-align: left; }
#letter .text.rl h2 { font-size: 1.5em; margin-bottom: 1em; padding:0; margin-left: auto; margin-right: auto; line-height: 1.5em; }
#letter .text.rl p { padding-top: 2em; line-height: 2em; margin-bottom: 3em; }
#letter .text.rl p a { color: #000; padding-bottom: 0.3em; padding-left: 0; border-left-width: 0px; border-left-style: none; border-left-color: none; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #333; }
#letter .text.rl p a:hover { color: #999; text-decoration: none; border-top-color: #999; border-right-color: #999; border-bottom-color: #999; border-left-color: #999; }
#letter #navi li { width: 60px; height: 60px; float: left; background: none; padding: 0 10px 0px 0; margin: 0 0 10px 0; }
#letter #navi li a { display: block; }
#letter #navi li a:link { }
#letter #navi li a:visited { }
#letter #navi li a:hover { opacity: 0.8; }
#letter #navi li a:active { opacity: 0.8; }
#letter #footer { padding-bottom: 3em; overflow: hidden;  font-size: 0.8em; }
#letter #footer .menu { margin-bottom: 1em; }
#letter #footer .menu li { display: inline; margin-right: 1em; margin-left: 1em; }
#letter #footer .menu li a { color: #000; text-decoration: none; }
#letter footer { line-height: 1.75em; width: 90%; margin-right: auto; margin-left: auto; }

/* IE */
#letter #navi li a:hover img { filter: alpha(opacity=80); }
#letter #photo { margin: 20px 0 0 0; }
#letter #photo img { position: absolute; width: 100%; height: auto; max-width: 700px; }
#letter #back ul li { display: block; margin-right: 0; margin-bottom: 2em; }
#letter #back ul li:nth-child(2) { margin-right: 0; }
#letter #back ul li span { padding-bottom: 3px; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #000; font-size: 1em;  display: inline-block; }
#letter #footer { padding-bottom: 3em; overflow: hidden;  font-size: 0.8em; }
#letter #footer .menu { margin-bottom: 1em; }
#letter #footer .menu li { display: block; margin: 0 auto 1em auto; }
#letter #footer .menu li a { color: #000; text-decoration: none; }

/* footer */
#footer { padding-top: 2em; padding-bottom: 3em; clear: both; background-color: #FFF; }
#footer nav { margin-bottom: 2em; }
#footer nav li { display: block; padding-right: 1em; padding-left: 1em; line-height: 1em; margin-bottom: 1em; }
#footer p { font-size: 0.8em; line-height: 1em; }

}

@media screen and (max-width: 1380px) {
body { font-size: 12px; }
#letter { font-size: 14px; }
}
@media screen and (min-width: 1381px) and (max-width: 1450px) {
body { font-size: 13px; }
#letter { font-size: 16px; }
}
@media screen and (min-width: 1451px) and (max-width: 1550px) {
#letter { font-size: 16px; }
}
@media screen and (min-width: 1451px) and (max-width: 1650px) {
body { font-size: 14px; }
#letter { font-size: 16px; }
}


/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* Browser Resets
*********************************/
.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { outline: none; }
.slides, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; }
/* FlexSlider Necessary Styles
*********************************/
.flexslider { padding: 0; width: 100%; height: auto; margin: 0; }
.flexslider .slides > li { display: none; }
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img { display: block; }
.flex-pauseplay span { text-transform: capitalize; }
/* Clearfix for the .slides element */
.slides:after { content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child { display: block; }

/* FlexSlider Default Theme
*********************************/
.flexslider { position: relative; zoom: 1; }
.loading .flex-viewport { }
.flexslider .slides { zoom: 1; position: relative; }
.carousel li { margin-right: 5px; }

/* Direction Nav */
.flex-direction-nav { *height: 0; }
.flex-direction-nav a { text-decoration: none; display: block; width: 30px; height: 30px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 1; cursor: pointer; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { left: 0px; text-align: right; background-size: contain; background-image: url(../images/left.png); background-repeat: no-repeat; background-position: 0px 0px; height: 30px; width: 30px; }
.flex-direction-nav .flex-next { right: 0px; text-align: right; background-size: contain; background-image: url(../images/right.png); background-repeat: no-repeat; background-position: 0px 0px; height: 30px; width: 30px; }
.flexslider:hover .flex-prev { opacity: 1; left: 0px; }
.flexslider:hover .flex-next { opacity: 1; right: 0px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
.flex-direction-nav .flex-disabled { opacity: 0 !important; filter: alpha(opacity=0); cursor: default; }
.flex-direction-nav a:before { font-size: 40px; display: inline-block; }
.flex-direction-nav a.flex-next:before { }

/* Pause/Play */
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }

/* Control Nav */
.flex-control-nav { width: 100%; position: absolute; bottom: -3em; text-align: center; }
.flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; *display: inline; }
.flex-control-paging li a { width: 8px; height: 8px; display: block; cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; background-color: #333333; opacity: 0.3; }
.flex-control-paging li a:hover { background-color: #333333; opacity: 1; }
.flex-control-paging li a.flex-active { cursor: default; opacity: 1; background-color: #333333; }
.flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden; }
.flex-control-thumbs li { width: 25%; float: left; margin: 0; }
.flex-control-thumbs img { width: 100%; display: block; opacity: .7; cursor: pointer; }
.flex-control-thumbs img:hover { opacity: 1; }
.flex-control-thumbs .flex-active { opacity: 1; cursor: default; }
}