/*
 * Mixin Style
*/
/*
 * Reset Style
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, address, em, img, small, strong, b, i,
dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, canvas, footer,
header, menu, nav, section, time, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, footer, header, menu, nav, section {
  display: block;
}

ul {
  list-style: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

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

em, b {
  font-style: normal;
}

img {
  vertical-align: top;
}

hr {
  display: block;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

input, select {
  vertical-align: middle;
}

/*
 * Base Style
*/
body {
  margin: 0;
  padding: 0;
  background: #eee;
  font-size: 14px;
  text-align: left;
  font-family: arial, "Hiragino Kaku Gothic Pro", sans-serif;
}

section {
  position: relative;
}

a {
  color: #0060C1;
}

/*
 * Top Page Style
*/
/* Module */
section#top.top {
  padding-bottom: 60px;
}

section#top.top .contents {
  width: 1000px;
  margin: 0 auto 40px;
  padding: 30px 10px 0;
}

/*
*  Atomic Design UI Parts Style
*  Parts Contents
- Bg Style
- Paragraph style
- Icon style
- Title Style
- Navigation & Menu Style
- Button Style
- Box Style
- List Style
- Separate Style
- Form Style
- Header Style
- Footer Style
- Modal Style
- Animation Style
*
*/
/* Bg Style
-------------------------------------------------- */
/*
 * Background Style
*/
/* Module */
section.top {
  background: #FFF6E2;
}

/* Paragraph style
-------------------------------------------------- */
/*
 * Paragraph Style
*/
/* Atomic */
.text {
  /* Skin */
  /* State */
  /* Module */
  /* Atomic */
}

.text.orange {
  color: #E5A45B;
}

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

.text.note {
  color: #BC0000;
}

.text.success {
  color: #6A9E00;
}

.text .icon.ban {
  margin: 0 4px -10px 0;
}

.text strong {
  color: #DC7F28;
}

/* Atomic */
.thumbnail {
  /* State */
  /* Module */
}

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

.thumbnail.apbCSSType {
  margin: 40px 0;
}

/* Atomic */
.linkText {
  font-size: 18px;
  /* State */
}

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

/* Atomic */
.label {
  padding: 6px 0;
  font-size: 18px;
  font-weight: bold;
}

/* Atomic */
.pic {
  /* Module */
}

.pic.apbCSSType {
  width: 104px;
  height: 132px;
  background: url(/prx/000/http/apbcss.com/img/ui/common/icon_apb_css_class_sp.png) no-repeat;
  -webkit-background-size: 800px auto;
  background-size: 800px auto;
}

.pic.apbCSSType.module {
  background-position: -137px top;
}

.pic.apbCSSType.skin {
  background-position: -279px top;
}

.pic.apbCSSType.number {
  background-position: -409px top;
}

.pic.apbCSSType.state {
  width: 141px;
  background-position: -530px top;
}

.pic.apbCSSType.other {
  background-position: -693px top;
}

/* Icon Style
-------------------------------------------------- */
/*
 * Icon Style
*/
/* Atomic */
.icon {
  display: inline-block;
  /* Module */
  /* Module */
}

.icon.social {
  width: 34px;
  height: 34px;
  background: url(/prx/000/http/apbcss.com/img/ui/common/icon_social_circle_sp.png) no-repeat;
  -webkit-background-size: 205px auto;
  background-size: 205px auto;
  /* Skin */
}

.icon.social.twitter {
  background-position: -42px top;
}

.icon.social.hatena {
  background-position: -84px top;
}

.icon.social.rss {
  background-position: -129px top;
}

.icon.social.github {
  background-position: -171px top;
}

.icon.social .white {
  background: url(/prx/000/http/apbcss.com/img/ui/common/icon_social_s_sp.png) no-repeat;
  -webkit-background-size: auto 15px;
  background-size: auto 15px;
}

.icon.social .white.facebook {
  width: 8px;
  height: 15px;
  background-position: left top;
}

.icon.social .white.twitter {
  width: 16px;
  height: 13px;
  background-position: -9px top;
}

.icon.social .white.google {
  width: 16px;
  height: 16px;
  background-position: -26px top;
}

.icon.social .white.hatena {
  width: 15px;
  height: 13px;
  background-position: -43px top;
}

.icon.social .white.feedly {
  width: 17px;
  height: 15px;
  background-position: -59px top;
}

.icon.social .white.pocket {
  width: 15px;
  height: 13px;
  background-position: -78px top;
}

.icon.ban {
  width: 40px;
  height: 40px;
  background: url(/prx/000/http/apbcss.com/img/ui/common/icon_ban.png) no-repeat;
  -webkit-background-size: 40px auto;
  background-size: 40px auto;
}

/* Module */
.mainLogo {
  width: 188px;
  height: 225px;
  background: url(/prx/000/http/apbcss.com/img/ui/common/logo_main.png) no-repeat;
  -webkit-background-size: 188px auto;
  background-size: 188px auto;
  /* Skin */
  /* State */
}

.mainLogo.s {
  width: 33px;
  height: 38px;
  -webkit-background-size: 33px auto;
  background-size: 33px auto;
}

.mainLogo.center {
  margin: 0 auto;
}

/* Title Style
-------------------------------------------------- */
/*
 * Title Style
*/
/* Atomic */
h1 {
  /* Atomic */
  /* Atomic */
  /* Atomic */
}

h1::after {
  content: "";
  display: block;
  clear: both;
}

h1 a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
  line-height: 38px;
}

h1 .mainLogo {
  float: left;
}

h1 .text {
  margin-left: 38px;
}

/* Atomic */
h2 {
  font-size: 74px;
  color: #333;
  /* State */
  /* Skin */
}

h2.center {
  text-align: center;
}

h2.yellow {
  color: #F6D667;
}

/* Atomic */
h3 {
  padding-bottom: 6px;
  border-bottom: #E5A45B 2px solid;
  font-size: 40px;
  color: #333;
}

/* Atomic */
h4 {
  padding-left: 6px;
  border-left: #E5A45B 5px solid;
  font-size: 30px;
  color: #333;
}

/* Navigation & Menu Style
-------------------------------------------------- */
/*
 * Navigation & Menu Style
*/
/* Button Style
-------------------------------------------------- */
/*
 * Button Style
*/
/* Atomic */
.btn {
  position: relative;
  width: 200px;
  height: 40px;
  border-radius: 6px;
  /* Atomic */
  /* Module */
  /* Skin */
  /* State */
  /* Atomic */
}

.btn a {
  display: block;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 18px;
}

.btn.primary {
  background: #404040;
  background: -webkit-gradient(linear, left top, left bottom, from(#404040), to(#282828));
  background: -webkit-linear-gradient(top, #404040, #282828);
  background: linear-gradient(to bottom, #404040, #282828);
}

.btn.primary:hover {
  background: #303030;
}

.btn.secondly {
  background: #EEEEEE;
  -webkit-box-shadow: inset #E5E5E5 0 0 1px 1px;
  box-shadow: inset #E5E5E5 0 0 1px 1px;
  background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#E5E5E5));
  background: -webkit-linear-gradient(top, #EEEEEE, #E5E5E5);
  background: linear-gradient(to bottom, #EEEEEE, #E5E5E5);
}

.btn.secondly > a,
.btn.secondly > input {
  color: #000000;
}

.btn.secondly:hover {
  background: #EAEAEA;
}

.btn.green {
  background: #2A8000;
  background: -webkit-gradient(linear, left top, left bottom, from(#2D8900), to(#246E00));
  background: -webkit-linear-gradient(top, #2D8900, #246E00);
  background: linear-gradient(to bottom, #2D8900, #246E00);
}

.btn.green:hover {
  background: #267400;
}

.btn.orange {
  background: #FA9600;
  background: -webkit-gradient(linear, left top, left bottom, from(#FFC70A), to(#FA9600));
  background: -webkit-linear-gradient(top, #FFC70A, #FA9600);
  background: linear-gradient(to bottom, #FFC70A, #FA9600);
}

.btn.orange:hover {
  background: #FCAE05;
}

.btn.l {
  width: 260px;
}

.btn.center {
  margin: 0 auto;
}

.btn.disable {
  opacity: 0.4;
}

.btn .icon {
  /* Module */
}

.btn .icon.social {
  margin: 0px 6px -11px -34px;
}

/* Box Style
-------------------------------------------------- */
/*
 * Box Style
*/
/* Module */
.mainTop {
  padding: 60px 0 30px;
  background: #eee;
  /* Module */
}

.mainTop .mainLogo {
  margin: 20px auto;
}

.mainTop .btnList {
  width: 500px;
  margin: 50px auto 0;
}

/* Module */
.contents {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* Atomic */
  /* Module */
  /* Module */
}

.contents .text {
  margin-top: 10px;
  font-size: 30px;
  font-weight: bold;
}

.contents .text.small {
  font-size: 16px;
  line-height: 1.5;
  font-weight: normal;
}

.contents h3 {
  margin: 30px 0 20px;
}

.contents h4 {
  margin: 30px 0 20px;
}

.contents .textList {
  margin-top: 20px;
}

.contents.agenda2 .thumbnail.atomicDesign {
  margin: 20px 0 30px;
}

.contents .detailBox {
  margin-bottom: 40px;
}

/* Module */
.thumbBox.agenda1 {
  position: relative;
  width: 900px;
  margin: 10px auto 0;
  /* Atomic */
}

.thumbBox.agenda1 .thumbnail {
  margin-top: 20px;
  /* Module */
}

.thumbBox.agenda1 .thumbnail.smacss {
  position: absolute;
  top: 30px;
  right: 50px;
}

/* Module */
.picBox {
  /* Atomic */
}

.picBox .label {
  text-align: center;
}

/* Module */
.detailBox {
  /* Atomic */
  /* Module */
}

.detailBox .column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.detailBox .thumbnail {
  padding: 0 10px;
}

.detailBox .detail {
  min-width: 200px;
  padding: 0 40px;
}

.detailBox .codeBox {
  width: 530px;
}

.detailBox .partsBox {
  display: table-cell;
  width: 200px;
  height: 180px;
  vertical-align: middle;
  text-align: center;
}

.detailBox .picBox {
  padding-right: 40px;
}

.detailBox.profile .detail {
  /* Atomic */
}

.detailBox.profile .detail .text {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 36px;
}

/* Module */
.codeBox {
  width: 100%;
}

.codeBox pre {
  display: block;
  padding: 10px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #333;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
  word-break: break-all;
  word-wrap: break-word;
  overflow: auto;
}

/* Module */
.fbLikeBox {
  width: 500px;
  margin: 0 auto;
}

/* List Style
-------------------------------------------------- */
/*
 * List Style
*/
/* Module */
.textList {
  /* Module */
  /* State */
}

.textList.apbCSSType {
  margin-bottom: 30px;
}

.textList.apbCSSType > li strong {
  display: inline-block;
  width: 130px;
}

.textList.small > li {
  margin-top: 2px;
}

.textList.small > li strong {
  width: 80px;
}

/* Module */
.profileSocialList::after {
  content: "";
  display: block;
  clear: both;
}

.profileSocialList > li {
  float: left;
  margin-right: 79px;
  /* Atomic */
  /* Atomic */
}

.profileSocialList > li .icon {
  float: left;
  margin-top: 3px;
}

.profileSocialList > li .linkText {
  margin-left: 40px;
  margin-bottom: 8px;
}

.btnList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.socialLinkList.share {
  margin-top: 60px;
  text-align: center;
  vertical-align: top;
}

.socialLinkList.share > li {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 8px;
  padding: 0;
  background: #305097;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 4px;
}

.socialLinkList.share > li > .iconWrap {
  height: 60px;
}

.socialLinkList.share > li > .iconWrap .icon.social {
  display: block;
  margin: 40px auto 0;
  background: url(/prx/000/http/apbcss.com/img/ui//common/icon_social_s_sp.png) no-repeat;
  -webkit-background-size: auto 15px;
  background-size: auto 15px;
}

.socialLinkList.share > li > .iconWrap .icon.social.facebook {
  width: 8px;
  height: 15px;
  background-position: left top;
}

.socialLinkList.share > li > .iconWrap .icon.social.twitter {
  width: 16px;
  height: 13px;
  background-position: -9px top;
}

.socialLinkList.share > li > .iconWrap .icon.social.google {
  width: 16px;
  height: 16px;
  background-position: -26px top;
}

.socialLinkList.share > li > .iconWrap .icon.social.hatena {
  width: 15px;
  height: 13px;
  background-position: -43px top;
}

.socialLinkList.share > li > .iconWrap .icon.social.feedly {
  width: 17px;
  height: 15px;
  background-position: -59px top;
}

.socialLinkList.share > li > .iconWrap .icon.social.pocket {
  width: 15px;
  height: 13px;
  background-position: -78px top;
}

.socialLinkList.share > li > .iconWrap .icon.social.line {
  width: 17px;
  height: 15px;
  background-position: -94px top;
}

.socialLinkList.share > li > .iconWrap .icon.social.rss {
  width: 17px;
  height: 17px;
  background-position: -116px top;
}

.socialLinkList.share > li > .iconWrap .icon.social.line {
  margin: 24px auto 0;
}

.socialLinkList.share > li.twitter {
  background: #00aced;
}

.socialLinkList.share > li.hatena {
  background: #008fde;
}

.socialLinkList.share > li.google {
  background: #db4a39;
}

.socialLinkList.share > li.pocket {
  background: #d3505a;
}

.socialLinkList.share > li.line {
  background: #00c300;
}

.socialLinkList.share > li .count {
  position: absolute;
  top: 5px;
  left: 4%;
  width: 92%;
  height: 15px;
  background: #fff;
  border-radius: 2px;
}

.socialLinkList.share > li .count > .txt {
  font-size: 12px;
  text-align: center;
  line-height: 15px;
}

.socialLinkList.share > li .count::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -7px;
  left: 50%;
  height: 0px;
  width: 0px;
  margin: 0 0 0 -4px;
  border-top: #fff 8px solid;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 0px solid transparent;
}

.socialLinkList.share > li .btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 10;
}

.socialLinkList.share > li .btn > a {
  display: block;
  width: 100%;
  height: 60px;
}

/* Separate Style
-------------------------------------------------- */
/*
 * Separate Style
*/
/* Form Style
-------------------------------------------------- */
/*
 * Form Style
*/
/* Header Style
-------------------------------------------------- */
/*
 * Header Style
*/
/* Module */
header.header {
  height: 50px;
  background: #f8f8f8;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8f8f8));
  background: -webkit-linear-gradient(top, #fff, #f8f8f8);
  background: linear-gradient(to bottom, #fff, #f8f8f8);
  /* Other */
}

header.header > .wrap {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  /* Atomic */
}

header.header > .wrap h1 {
  padding-top: 7px;
}

header.header .facebook {
  position: absolute;
  right: 10px;
  top: 17px;
}

/* Footer Style
-------------------------------------------------- */
/*
 * Footer Style
*/
/* Module */
footer {
  background: #404040;
  color: #CCCCCC;
  /* Other */
}

footer .wrap {
  position: relative;
  width: 1000px;
  min-height: 100px;
  margin: 0 auto;
  padding-top: 14px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 13px;
  font-family: Arial, sans-serif;
  /* Atomic */
  /* Module */
}

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

footer .wrap .copyright {
  clear: both;
  margin-top: 68px;
  padding-bottom: 20px;
  text-align: center;
}

footer .wrap .footerLogo {
  float: right;
  margin-top: 4px;
  /* Module */
  /* Atomic */
}

footer .wrap .footerLogo .mainLogo {
  float: right;
}

footer .wrap .footerLogo .text {
  margin-right: 38px;
  font-weight: bold;
  line-height: 38px;
}

/* Modal Style
-------------------------------------------------- */
/*
 * Modal Window Style
*/
/* Animation Style
-------------------------------------------------- */
/*
 * Animation Style
*/