/*----------------------------------------------------
                   Font Declaration
-----------------------------------------------------*/

/*@charset "UTF-8";*/
@font-face {
    font-family: 'Quail';
    src: url('quail-webfont.eot');
    src: url('quail-webfont.eot?#iefix') format('embedded-opentype'),
         url('quail-webfont.woff') format('woff'),
         url('quail-webfont.ttf') format('truetype'),
         url('quail-webfont.svg#QuailRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

         /* display fonts */

h1 { font: 1.6vw/1 Arial, Verdana;
	   text-overflow: ellipsis;
	   overflow: hidden;
     white-space: nowrap;
}
h2 { font: 23px/1  Arial, Verdana; }
h3 { font: 16px/1  Calibri, Arial, Verdana; }
ul, p { font: 16px/1  Calibri, Arial, Verdana; }

h3:lang(jp) { font: 16px/1  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif; }
ul:lang(jp), p:lang(jp) { font: 14px/1  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif; }

/*----------------------------------------------------
		            HTML5 Reset
-----------------------------------------------------*/

html, body, div, section, article, aside, header,
hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p,
blockquote, address, time, span, em, strong, img,
ol, ul, li, figure, canvas, video, th, td, tr {
	margin: 0;
	padding: 0;
	border: 0;
}

a { text-decoration: none;}
a:hover { color: white;}

/*----------------------------------------------------
                 HTML5 Display Rules
-----------------------------------------------------*/

address, article, aside, canvas, details, figcaption,
figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}

html {
	background-color: white;
	box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: border-box;
}

::selection {
    color: yellow;
    background: #ff52BB;
}


/*----------------------------------------------------
                 Amazon A+ feature style
-----------------------------------------------------*/

body {
  -webkit-font-smoothing: antialiased;
  width: 100%;
  height: auto;
  margin: 4vw 0;
  padding: 0 10%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4%;
  row-gap: 40px;
}

.pagebreak {
	display: none;
}

a.index {
  display: grid;
  width: 140px;
  grid-column: span 2;
}

img.logo {
  width: 100%;
}

.intro {
  grid-column: span 2;
  padding: 0 25%;
}

.intro h2 {
  padding: 2% 0 0 2%;
}

.intro ul {
  padding-left: 5%;
}

ul span {
  font-weight: bold;
  font-family: Arial;
  font-size: 14px;
}

.feature {
  display: grid;
  grid-template-columns: clamp(240px,50%,350px) 1fr;
  column-gap: 20px;
  align-items: center;
}

.feature img {
  grid-row-start: 1;
  grid-row-end: 3;
  width: 100%;
  border-radius: 1.5vw;
}

.description {
  grid-row-start: 1;
  grid-row-end: 3;
  align-self: center;
}

.description ul {
 padding: 1% 0 0 10%;
}

h1 {
  text-align: center;
  font-size: 1.6em;
  font-weight: 800;
  padding-bottom: 2%;

}

h2 {
  margin-bottom: 2%;
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1em;
}

sup {
    background-color: #ff0034;
    padding: 1px 3px;
    margin-left: 6px;
    color: white;
    font-size: 0.55em;
}

@media screen and (max-width: 1300px) {
  body {
    padding: 0 3%;
  }

  .intro {
    padding: 0 19%;
  }
}