@charset "UTF-8";
a.btn[href="#continue"] {
  font-size: 87.5%;
  background-image: url(../images/2017/icon_arrow_l.svg);
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 32px;
  border-radius: 1em 0.25em 0.25em 1em;
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
  width: 22.41379%; }

/* Reset

Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.8.2r1

-------------------------------------------------------------------------------*/
html {
  color: #000;
  background: #FFF; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0; }

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

fieldset, img {
  border: 0; }

address, caption, cite, code, dfn, em, strong, th, var, optgroup {
  font-style: inherit;
  font-weight: inherit; }

del, ins {
  text-decoration: none; }

li {
  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;
  font-variant: normal; }

sup {
  vertical-align: baseline; }

sub {
  vertical-align: baseline; }

legend {
  color: #000; }

input, button, textarea, select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit; }

input, button, textarea, select {
  *font-size: 100%; }

/* Font
-------------------------------------------------------------------------------*/
body {
  font: -apple-system-body;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  line-height: 1.75;
  letter-spacing: .05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  .en body {
    letter-spacing: 0; }

/* Basic
-------------------------------------------------------------------------------*/
a {
  text-decoration: none;
  -webkit-touch-callout: none; }
  a:link {
    color: #7070cb;
    text-decoration: underline; }
  a:visited {
    color: #535398;
    text-decoration: underline; }
  a:focus {
    outline: 0; }
  a img {
    vertical-align: top; }
  .current > a {
    cursor: default;
    pointer-events: none; }
  a[target=_blank]::after {
    font-family: "Hobonichi-Icons", sans-serif;
    content: '\e914'; }

@media all and (min-width: 768px) {
  br {
    display: inline; }
    br.only-sp {
      display: none; } }

@media all and (max-width: 768px) {
  br:not(.sp) {
    display: none; }
    br:not(.sp).only-sp {
      display: inline; } }

@media all and (min-width: 601px) {
  a {
    transition: all 0.25s; }
    a:hover {
      color: #ff8000;
      text-decoration: none; }
  .opc a:link, .opc a:visited {
    opacity: 1; }
  .opc a:hover {
    opacity: .5; }
  .opc .current > a:hover {
    opacity: 1; }
  .opc input[type="image"]:hover {
    opacity: .5; } }

a.btn {
  font-weight: bold;
  line-height: 1;
  padding: .5em 1em;
  text-decoration: none;
  border-radius: 1em; }
  a.btn:link, a.btn:visited {
    color: #FFFFFF;
    background-color: #00b8d9; }
  a.btn[href="#continue"] {
    display: inline-block; }

.sprite {
  position: relative;
  display: block;
  overflow: hidden; }

.sprite img {
  position: absolute; }

.normal {
  font-weight: normal !important; }

.bold {
  font-weight: bold; }

.fltL {
  float: left !important; }

.fltR {
  float: right !important; }

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

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

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

.clrmt {
  margin-top: 0 !important; }

.clrbt {
  clear: both !important; }

.clrL {
  clear: left !important; }

.clrR {
  clear: right !important; }

.clrbd {
  border: none !important; }

.alnR {
  text-align: right; }

.block {
  display: block; }

.whitespace {
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -hp-pre-wrap;
  word-wrap: break-word; }

.clrfx:after {
  content: "";
  display: block;
  clear: both; }

/* Layout
-------------------------------------------------------------------------------*/
html, body {
  height: 100%;
  overflow: auto; }

html {
  background: #FFFFFF url(/store/cart/images/techo2014/bg_html.png); }

body * {
  box-sizing: border-box; }

#wrapper {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100%; }

#content {
  margin: 20px 0;
  background-color: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3); }
  #content section {
    padding: 25px 0; }
    #content section + section {
      padding-top: 0; }
    #content section h2, #content section h3 {
      font-weight: bold;
      line-height: 1.5; }
    #content section h2 {
      background-color: #00b8d9;
      color: #FFFFFF;
      padding: 0.25em 25px;
      margin-right: 25px;
      display: inline-block;
      border-radius: 0 100px 100px 0;
      box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3); }
    #content section h3 {
      color: #ff8300;
      margin: 1.75em auto; }
    #content section p {
      margin: 1.75em auto; }
    #content section table {
      margin: 1.75em 0; }
      #content section table th, #content section table td {
        border: 1px solid #000000;
        padding: 0.25em 1em; }
      #content section table th {
        font-weight: bold;
        background-color: #E3E2AB; }
    #content section article, #content section aside {
      padding: 0 10px; }
      #content section article:first-of-type, #content section aside:first-of-type {
        padding-top: 25px; }
      #content section article::before, #content section aside::before {
        content: "";
        display: block;
        background: url(/sn/images/hr.svg) repeat-x left top;
        height: 3px;
        margin: 0 auto; }
      #content section article:last-of-type::after, #content section aside:last-of-type::after {
        content: "";
        display: block;
        background: url(/sn/images/hr.svg) repeat-x left top;
        height: 3px;
        margin: 0 auto; }
      #content section article > div, #content section aside > div {
        padding: 0;
        margin: 0 auto;
        max-width: 90%; }
        @media all and (min-width: 768px) {
          #content section article > div, #content section aside > div {
            max-width: 71.42857%; } }
    #content section aside {
      padding-bottom: 25px; }
      #content section aside::before, #content section aside::after {
        content: none !important; }
      #content section aside p {
        margin: 0;
        font-size: 14px; }
      #content section aside > div {
        padding: 0;
        max-width: 90%;
        display: flex;
        flex-direction: column; }
        @media all and (min-width: 768px) {
          #content section aside > div {
            max-width: 90.81633%;
            flex-direction: row;
            align-items: center; } }
        #content section aside > div > div {
          margin-right: 0;
          margin-bottom: 0.5em; }
          @media all and (min-width: 768px) {
            #content section aside > div > div {
              margin-right: 50px;
              margin-bottom: 0; } }
          #content section aside > div > div strong {
            font-family: "UD Shin Go Heavy", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
            -webkit-font-feature-settings: 'palt' 1;
            font-feature-settings: 'palt' 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: auto;
            font-weight: normal;
            font-size: 24px;
            font-weight: bold;
            line-height: 1;
            letter-spacing: 0;
            color: #00b8d9; }
            .ua-desktop-windows #content section aside > div > div strong {
              -ms-transform: rotate(0.001deg);
              transform: rotate(0.001deg); }
          #content section aside > div > div p {
            font-weight: bold;
            color: #404040; }

#header {
  background-color: #00b8d9;
  overflow: hidden;
  width: 100%;
  margin-bottom: 20px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3); }
  #header h1 {
    float: left;
    padding: 18px; }
  #header > a {
    display: block;
    float: right;
    padding-top: 50px;
    margin-right: 20px;
    text-decoration: none;
    width: 50px;
    text-align: center;
    color: #FFFFFF; }
    #header > a.store {
      background: url(/sn/images/icon_store.svg) no-repeat center 14px;
      padding-bottom: 15px; }
    #header > a.help {
      background: url(/sn/images/icon_help.svg) no-repeat center 14px;
      padding-bottom: 15px; }
    #header > a img {
      vertical-align: middle;
      display: inline-block; }
    #header > a span {
      display: block;
      font-size: 75%;
      font-weight: bold;
      line-height: 1.2;
      margin-top: 5px; }
    #header > a[target=_blank]::after {
      content: none; }
    #header > a + a {
      margin-right: 10px; }
  #header > p {
    clear: both;
    background-color: #FFFFFF;
    padding: 8px 16px;
    text-align: right;
    font-size: 81.25%; }

.en #header > a.store {
  width: 70px; }

@media only screen and (min-width: 600px) {
  #header > a {
    margin-right: 25px;
    transition: all 0.25s; }
    #header > a.store:hover {
      background-image: url(/sn/images/icon_store-over.svg);
      color: #ffe093; }
    #header > a.help:hover {
      background-image: url(/sn/images/icon_help-over.svg);
      color: #ffe093; } }

/* Footer
-------------------------------------------------------------------------------*/
#footer {
  background-color: #00b8d9;
  margin: auto 0 0 0;
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3); }
  #footer ul {
    list-style: none;
    margin: 0;
    padding: 10px 20px 10px 20px;
    position: relative;
    overflow: hidden; }
  #footer li {
    display: block;
    position: relative; }
    #footer li a {
      font-size: 75%;
      font-weight: bold;
      line-height: 1.66667;
      display: block;
      padding: 5px 5px 5px 25px;
      text-align: left;
      text-decoration: none;
      color: #fff;
      background: url(/sn/images/icon_arrow_footer.svg) no-repeat left center;
      transition: all 0.25s; }
      #footer li a:hover {
        color: #FFb600; }

@media only screen and (min-width: 600px) {
  #footer {
    border-radius: 10px 10px 0 0; }
    #footer li {
      display: inline-block; }
      #footer li a:hover {
        background-image: url(/sn/images/icon_arrow_footer-over.svg); }
      #footer li:last-child {
        float: right; }
        #footer li:last-child a {
          display: inline-block; }
  .en #footer li:last-child {
    float: none; } }