@charset "UTF-8";
body {
  /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
  -webkit-backface-visibility: hidden;
}

header {
	margin: 0 auto 7.5% auto;
	font-feature-settings: "palt";
}
header h2 {
  margin: 0 auto 5.2% auto;
}
header h2 img {
	margin: 0 auto 0.2% auto;
}
header h2 p {
	font-size: 13px !important;
	text-align: left;
}
header div {
  width: 100%;
	margin: 8% auto 0;
}
header p {
}
.content_wrap {
  text-align: center;
  font-family: a-otf-ryumin-pr6n, 游明朝,"Yu Mincho",YuMincho,Ryumin Medium KL,"リュウミン M-KL","Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,HiraMinProN-W3,HiraMinPro-W3,"ヒラギノ明朝 ProN W3","ヒラギノ明朝 Pro W3","ＭＳ 明朝",serif;
  font-weight: 300;
  font-style: normal;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #363636;
}
.content_wrap a:hover img {
  opacity: 0.7;
  transition: .3s;
}
.content_wrap nav {
	margin: 0 auto 10% auto;
	max-width: 1170px;
}
.content_wrap nav ul {
  width: 100%;
  max-width: 1170px;
	display: flex;
	justify-content: space-between;
}
.content_wrap nav ul li {
	max-width: 222px;
	width: 19%;
}
.content_wrap .style {
	margin: 0 auto 15% auto;
	color: #000000;
}
.content_wrap .style h3 {
  width: 100%;
  max-width: 1141px;
  margin: 5% auto;
}
.content_wrap .style h4 {
  width: 80%;
  max-width: 510px;
  margin: 5% auto;
}
.content_wrap .style h5 {
  width: 90%;
  max-width: 700px;
  margin: 5% auto;
}
.content_wrap .style .set_img {
  width: 90%;
  max-width: 855px;
  margin: 5% auto;
}
.content_wrap .style .spacer {
  width: 10%;
  margin: 11% auto;
}
.content_wrap .style ul{
	display: flex;
	justify-content: space-between;
	margin-bottom: 3%;
	width: 100%;
}
.content_wrap .style .item{
	width: 100%;
  max-width: 930px;
	margin: 7% auto 5% auto;
	display: flex;
	justify-content: space-between;
}
.content_wrap .style .item_detail{
  width: 30%;
  max-width: 290px;
  padding: 1%;
  border: solid 1px #e5e5e5; 
	display: flex;
	align-items: center;
  text-align: left;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-weight: 300;
  font-style: normal;
	font-size: 13px;
	line-height: 2;
}
.content_wrap .style .item_detail img{
  width: 100%;
}
.content_wrap .style .item_detail .item_color_img {
  width: 40%;
  max-width: 106px;
}
.content_wrap .style .item_detail p{
	margin-top: 2%;
  margin-left: 4%;
}
.content_wrap .style .item_detail a{
	color: #808080;
	text-decoration: underline;
}
.content_wrap .style .item_detail a:hover{
	opacity: .7;
	text-decoration: none;
}
.btn-codelist a, .btn-codelist a:visited, .btn-codelist a:active, .btn-codelist a:link {
  display: block;
  width: 90%;
  max-width: 546px;
  margin: auto;
  padding: 3.2% 0;
  background: #343434;
  color: #fff;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  letter-spacing: 0;
  text-decoration: none;
  transition: 0.3s;
}
.btn-codelist a:hover {
  background: #99b0bb;
  transition: 0.3s;
}
.hidden-480{
	display: block;
}
.visible-480{
	display: none;
}
.hidden-770{
	display: block;
}
span.hidden-770, br.hidden-770 {
  display: inline;
}
.visible-770{
	display: none;
}

@media(max-width: 1200px) {}

@media(max-width: 770px) {
  header h2 p {
  	font-size: 15px !important;
  	letter-spacing: 0;
    text-align: left;
  }
  header div {
  	width: 87%;
  }
  header h2 {
  	font-size: 33px;
  	margin: 0 auto 4% auto;
  	line-height: 1.4;
  }
  .content_wrap {
    font-size: 12px;
  }
  .content_wrap .style h3,
  .content_wrap .style h4,
  .content_wrap .style h5 {
    margin: 10% auto;
  }
  .content_wrap .style .item {
    width: 80%;
    margin: 7% auto 5%;
    display: block;
  }
  .content_wrap .style .item_detail {
  	width: 90%;
    max-width: none;
    margin-bottom: 5%;
    padding: 5%;
    font-size: 10px;
  }
  .content_wrap .style .item_detail .item_color_img {
    width: 45%;
    max-width: none;
  }
  .content_wrap .style .item_detail img {
  	margin: 0 6% 0 0; 
  }
  .content_wrap .style .item_detail p {
  	margin-top: 2%;
    margin-left: 7%;
  }
  .btn-codelist a, .btn-codelist a:visited, .btn-codelist a:active, .btn-codelist a:link {
    font-size: 16px;
  }
  .hidden-770 {
  	display: none;
  }
  .visible-770 {
  	display: block;
  }
}

@media(max-width: 480px) {
  header {
  	margin: 0 auto 5% auto;
  }
  .content_wrap .style .item {
  	margin: 7% auto 5% auto;
  }
  .hidden-480 {
  	display: none;
  }
  .visible-480 {
  	display: block;
  }
}

.u-hide_text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.u-clearfix:after,
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.u-clear,
.clear {
  clear: both;
}

.u-fluid_img,
.fluid_img {
  max-width: 100%;
  height: auto;
}

.u-flo--left {
  float: left;
}

.u-flo--right {
  float: right;
}

.u-text--left {
  text-align: left;
}

.u-text--right {
  text-align: right;
}

.u-text--center {
  text-align: center;
}

.u-font--xs {
  font-size: 60%;
}

.u-font--s {
  font-size: 80%;
}

.u-none {
  display: none;
}

@media (min-width: 768px) {
  .u-sm-inline {
    display: inline;
  }
}

@media (min-width: 980px) {
  .u-md-inline {
    display: inline;
  }
}

@media (min-width: 768px) {
  .u-sm-block {
    display: block;
  }
}

@media (min-width: 980px) {
  .u-md-block {
    display: block;
  }
}

@media (min-width: 768px) {
  .u-sm-table {
    display: table;
  }
}

@media (min-width: 980px) {
  .u-md-table {
    display: table;
  }
}

@media (min-width: 544px) {
  .u-xs-none {
    display: none;
  }
}

@media (min-width: 768px) {
  .u-sm-none {
    display: none;
  }
}

@media (min-width: 980px) {
  .u-md-none {
    display: none;
  }
}

.u-font-xs {
  font-size: 60%;
}

.u-font-sm {
  font-size: 80%;
}

.u-font-md {
  font-size: 100%;
}

.u-font-lg {
  font-size: 120%;
}

.u-font-xl {
  font-size: 140%;
}

.u-pos-relative {
  position: relative;
}

.u-mb-0 {
  margin-bottom: 0;
}

.u-hidden {
  visibility: hidden;
}