@charset "UTF-8";

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,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,th,var {font-style: normal;font-weight: normal;}ul,ol {list-style: none;}caption,th {text-align: left;}h1,h2,h3,h4,h5,h6 {font-size: 100%;}q:before,q:after {content: '';}abbr,acronym {border: 0;font-variant: normal;}sup {vertical-align: text-top;}sub {vertical-align: text-bottom;}input,textarea,select {font-family: inherit;font-size: inherit;font-weight: inherit;}input,textarea,select {*font-size: 100%;}a img,map a {border: none;}

/* default */
html {
  overflow-x: hidden;
  font-size: 62.5%;
}
body {
  color: rgb(34 34 34);
  font-size: 1.6rem;
  font-weight: lighter;
  line-height: 2;
  font-family: 'メイリオ',Helvetica,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
a {
  color: rgb(163 119 176);
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
a:hover {
  color: rgb(163 119 176 / 80%);
}
img {
  vertical-align: bottom;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
a:hover img {
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  opacity: 0.8;
}
p {
  margin-top: 20px;
}
input,
textarea {
  -webkit-appearance: none;
}

/* header */
header {
  width: 100%;
  height: 50px;
  background: rgb(255 255 255);
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}
header .ico-menu {
  font-size: 2.6rem;
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -13px;
  cursor: pointer;
}
header #logo {
  margin: 0;
}
header #logo img {
  height: 22px;
  display: block;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}
#drawer {
  width: 260px;
  height: 100%;
  background: rgb(255 255 255);
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
  overflow-y: scroll;
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transform: translateX(-260px);
  transform: translateX(-260px);
}
#drawer.active {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
#drawer .headline {
  height: 50px;
  position: relative;
}
#drawer #close {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -13px;
  display: block;
}
#drawer #close:before,
#drawer #close:after {
  content: "";
  width: 26px;
  height: 2px;
  background: rgb(34 34 34);
  box-sizing: border-box;
  border-radius: 1px;
  display: block;
  position: absolute;
  top: 47%;
  transform: rotate(45deg);
}
#drawer #close:after {
  transform: rotate(-45deg);
}
#drawer nav ul {
  padding-top: 20px;
}
#drawer nav li {
  padding: 6px 30px;
}
#drawer nav li a {
  color: rgb(34 34 34);
}
#drawer nav li a:before {
  content: "ー";
  margin-right: 0.5em;
}
#drawer nav li a:hover {
  color: rgb(163 119 176);
}

/* contents */
#contents {
  padding: 30px 10% 0;
  display: flex;
}
main {
  width: 100%;
  flex: 1;
}
#hero {
  background: radial-gradient(circle, transparent 20%, rgb(255 255 255) 20%, rgb(255 255 255) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(255 255 255) 20%, rgb(255 255 255) 80%, transparent 80%, transparent) 50px 50px, linear-gradient(rgb(240 106 121 / 40%) 4px, transparent 4px) 0 -2px, linear-gradient(90deg, rgb(240 106 121 / 40%) 4px, transparent 4px) -2px 0;
  background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
}
#hero .inner {
  background: linear-gradient(135deg, rgb(86 132 231 / 80%) 0%, rgb(240 106 121 / 80%) 100%);
  box-sizing: border-box;
  color: rgb(255 255 255);
  padding: 0 10%;
  display: flex;
  align-items: center;
}
#hero .inner .text {
  flex: 1;
}
#hero .inner .text .copy {
  font-size: 6rem;
  font-weight: bold;
  line-height: 1.4;
}
#hero .inner .text p {
  font-size: 2rem;
  line-height: 1.6;
}
#hero .inner .text ul {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
}
#hero .inner .text ul li a {
  background: rgb(255 255 255 / 20%);
  border: solid 1px rgb(255 255 255);
  border-radius: 50px;
  font-size: 1.6rem;
  color: rgb(255 255 255);
  padding: 10px 20px;
  display: block;
}
#hero .inner .text ul li a:hover {
  background: rgb(255 255 255 / 10%);
}
#hero .inner .img {
  width: 40%;
  margin-top: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: right;
}
#hero .inner .img img {
  width: auto;
  height: 480px;
}
.home #contents {
  padding: 0;
}
.home section {
  background: rgb(163 119 176 / 10%);
  padding: 80px 20%;
}
.home section:nth-child(2n) {
  background: rgb(163 119 176 / 20%);
}
.home section .chapter {
  width: 80px;
  background: rgb(163 119 176);
  border-radius: 20px;
  color: rgb(255 255 255);
  text-align: center;
  padding: 2px 20px 0;
  margin: 0 auto 20px;
  display: block;
}
.home section h2,
.home section h3 {
  text-align: center;
  margin: 0;
}
.sectionList {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.sectionList li {
  margin: 20px 10px 0;
}
.sectionList li a {
  width: 100px;
  display: block;
}
.sectionList li a .img {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, rgb(86 132 231 / 80%) 0%, rgb(240 106 121 / 80%) 100%);
  border-radius: 50px;
  overflow: hidden;
}
.sectionList li a .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
}
.sectionList li a:hover .img img {
  transform: scale(1.1);
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  -khtml-opacity: 0.6;
  opacity: 0.6;
}
.sectionList li a .text {
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: center;
  margin-top: 5px;
  display: block;
}
.sectionArea .description {
  background: rgb(255 255 255);
  border-radius: 10px;
  margin-top: 40px;
  padding: 20px 40px 40px;
}
.qanda {
  margin-top: 40px;
}
.qanda .question {
  background: rgb(163 119 176);
  font-size: 1.6rem;
  color: rgb(255 255 255);
  padding: 20px 40px;
  margin: 0;
}
.qanda .question:before {
  content: "Q：";
}
.qanda .answer {
  background: rgb(255 255 255);
  padding: 20px 40px 40px;
}
.qanda .answer p:before {
  content: "A：";
  font-weight: bold;
}
.listArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.listArea li {
  width: 48%;
  margin-top: 20px;
}
.listArea li a {
  color: rgb(34 34 34);
  display: flex;
  align-items: flex-start;
  position: relative;
}
.listArea li a:hover {
  color: rgb(163 119 176 / 80%);
}
.listArea li .img {
  width: 40%;
  background: linear-gradient(135deg, rgb(86 132 231), rgb(240 106 121) 100%);
  border-radius: 5px;
  overflow: hidden;
}
.listArea li .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.listArea li a:hover .img img {
  transform: scale(1.1);
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  -khtml-opacity: 0.6;
  opacity: 0.6;
}
.listArea li .text {
  margin-left: 10px;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
}
.listArea li .category {
  background: rgb(163 119 176);
  border-radius: 5px;
  color: rgb(255 255 255);
  font-size: 1.2rem;
  padding: 2px 10px 0;
}
.listArea li time {
  color: rgb(170 170 170);
  font-size: 1.2rem;
  padding-left: 5px;
}
.listArea li .title {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.6;
  padding-top: 8px;
}
.new a:before {
  content: "NEW";
  background: rgb(239 73 75);
  border-radius: 5px 0;
  line-height: 22px;
  font-size: 1.2rem;
  color: rgb(255 255 255);
  padding: 1px 6px 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.ranking li {
  counter-increment: num;
}
.ranking li a:before {
  background: rgb(255 255 255);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 22px;
  font-size: 1.2rem;
  text-align: center;
  color: rgb(170 170 170);
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1;
  content: counter(num);
}
.ranking li:nth-of-type(1) a:before {
  background: rgb(217 179 64);
  color: rgb(255 255 255);
}
.ranking li:nth-of-type(2) a:before {
  background: rgb(111 123 131);
  color: rgb(255 255 255);
}
.ranking li:nth-of-type(3) a:before {
  background: rgb(161 83 38);
  color: rgb(255 255 255);
}
.pager {
  text-align: center;
  margin-top: 20px;
}
.pager a.page-numbers,
.pager .current {
  background: rgb(246 246 246);
  border-radius: 5px;
  color: rgb(102 102 102);
  padding: 5px 20px;
  margin: 20px 4px 0;
  display: inline-block;
}
.pager a.page-numbers:hover,
.pager .current {
  background: rgb(34 34 34);
  color: rgb(255 255 255);
}
.data {
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.data .category a {
  background: rgb(163 119 176);
  border-radius: 5px;
  font-size: 1.2rem;
  color: rgb(255 255 255);
  padding: 5px 15px;
  display: block;
}
.data .category a:hover {
  background: rgb(163 119 176 / 80%);
}
.data .time {
  font-size: 1.2rem;
  color: rgb(170 170 170);
  line-height: 1.4;
  margin-left: auto;
  display: flex;
  flex-direction: column;
}
.data .time time {
  margin-left: 5px;
}
.thumb {
  margin-top: 20px;
}
.thumb img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.imgArea {
  margin: 40px 0 30px 0;
}
.imgArea img {
  width: 100%;
  height: auto;
  border-radius: 10px;  
}
.author {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.author img {
  width: 50px;
  border-radius: 25px;
}
.author .text {
  line-height: 1.4;
  margin-left: 10px;
}
.author .text span {
  display: block;
}
.author .text .postNum {
  font-size: 1.4rem;
  color: rgb(170 170 170);
}
#cont {
  background: rgb(246 246 246);
  border-radius: 10px;
  padding: 40px;
  margin: 40px 0 60px;
}
#cont span {
  font-weight: bold;
}
#cont ol {
  counter-reset: num;
  padding-top: 0;
}
#cont ol li {
  counter-increment: num;
  font-size: 1.4rem;
  padding-left: 1.5em;
  position: relative;
}
#cont ol li:before {
  content: counter(num)".";
  font-weight: bold;
  position: absolute;
  left: 0;
}
#cont ol li a {
  color: rgb(34 34 34);
}
#cont ol li a:hover {
  color: rgb(163 119 176 / 80%);
}
#cont ol ol {
  padding-left: 1em;
}
.description img {
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.description .youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.description .youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.description ul {
  padding-top: 20px;
}
.description ul li {
  padding-left: 1em;
  position: relative;
}
.description ul li:before {
  content: "・";
  font-weight: bold;
  position: absolute;
  left: 0;
}
.description ul ul {
  padding: 0 0 0 1em;
}
.description ol {
  counter-reset: num;
  padding-top: 20px;
}
.description ol li {
  counter-increment: num;
  padding-left: 1.5em;
  position: relative;
}
.description ol li:before {
  content: counter(num)"．";
  font-weight: bold;
  position: absolute;
  left: 0;
}
.description ol ol {
  padding: 0 0 0 1em;
}
.description strong {
  background: linear-gradient(transparent 60%, rgb(246 199 116 / 40%) 0%);
}
.description .link {
  background: rgb(246 246 246);
  border-left: solid 5px rgb(238 238 238);
  color: rgb(34 34 34);
  padding: 10px 30px 10px 20px;
  margin-top: 20px;
  display: block;
  position: relative;
}
.description .link:hover {
  color: rgb(163 119 176);
}
.description .link:after {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid;
  border-color: rgb(34 34 34) rgb(34 34 34) transparent transparent;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 17px;
  margin-top: -5px;
}
.description .product {
  margin: 40px 0;
  display: flex;
}
.description .product a {
  width: 100%;
  min-height: 100px;
  border: solid 1px rgb(238 238 238);
  border-radius: 10px;
  box-sizing: border-box;
  box-shadow: 0 0 15px rgb(221 221 221);
  font-size: 1.6rem;
  color: rgb(102 102 102);
  padding: 20px;
  display: flex;
  align-items: center;
}
.description .product a:hover {
  box-shadow: 0 0 20px rgb(204 204 204);
}
.description .product a img {
  width: 20%;
}
.description .product a span {
  padding-left: 20px;
  flex: 1;
}
.description .product a span:after {
  content: "Rakutenで見る";
  background: rgb(191 0 0);
  border-radius: 5px;
  color: rgb(255 255 255);
  text-align: center;
  padding: 12px 0;
  margin-top: 10px;
  display: block;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.description .product a:hover span:after {
  background: rgb(191 0 0 / 80%);
}
.description figure {
  margin: 20px 0 30px 0;
}
.description blockquote {
  background: rgb(246 246 246);
  border-left: solid 5px rgb(238 238 238);
  font-style: italic;
  padding: 20px 40px 40px;
  margin: 40px 0;
}
.description blockquote cite {
  font-style: italic;
  text-align: right;
  display: block;
}
.description blockquote cite:before {
  content: "by ";
}
.description pre {
  background: rgb(246 246 246);
  padding: 40px;
  margin: 40px 0;
  white-space: pre-wrap;
}
.description table {
  width: 100%;
  margin: 40px 0;
}
.description table thead {
  background: rgb(246 246 246);
}
.description table th,
.description table td {
  border: solid 1px rgb(238 238 238);
  padding: 10px;
}
.description table thead th {
  font-weight: bold;
  text-align: center;
}
.tagArea {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
}
.tagArea li {
  margin: 10px 10px 0 0;
}
.tagArea li a {
  border: solid 1px rgb(170 170 170);
  border-radius: 5px;
  font-size: 1.2rem;
  color: rgb(170 170 170);
  padding: 5px 15px;
  display: block;
}
.tagArea li a:hover {
  background: rgb(246 246 246);
}
.tagArea li a:before {
  content: "#";
  margin-right: 2px;
}
.profile {
  background: rgb(246 246 246);
  border-radius: 10px;
  display: flex;
  padding: 40px;
  margin-top: 40px;
}
.profile .img {
  width: 25%;
  max-width: 300px;
}
.profile .img img {
  background: linear-gradient(135deg, rgb(86 132 231), rgb(240 106 121) 100%);
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 5px;
}
.profile .text {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.profile .text .name {
  font-size: 2rem;
  font-weight: bold;
}
.profile .text .hobby {
  color: rgb(170 170 170);
  font-size: 1.4rem;
  line-height: 1.4;
}
.profile .text p {
  margin-top: 10px;
}
.prevnext {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.prevnext .prev,
.prevnext .next {
  width: 48%;
}
.prevnext .listArea li {
  width: 100%;
}
.btnArea {
  margin-top: 40px;
}
.btn {
  margin-top: 20px;
}
.btn a {
  width: 100%;
  background: rgb(163 119 176);
  box-sizing: border-box;
  border-radius: 5px;
  color: rgb(255 255 255);
  text-align: center;
  padding: 10px 0;
  display: block;
}
.btn a:hover {
  background: rgb(163 119 176 / 80%);
}
h1,
h2,
h3,
h4,
h5 {
  line-height: 1.6;
  margin-top: 60px;
}
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 3rem;
  padding-top: 60px;
  position: relative;
}
h2:before {
  content: "";
  width: 100%;
  height: 5px;
  background: rgb(238 238 238);
  border-radius: 5px;
  position: absolute;
  top: 0;
}
h2:first-child {
  padding: 0;
}
h2:first-child:before {
  content: none;
}
h3 {
  font-size: 2.5rem;
}
h4 {
  font-size: 2rem;
}
.sns {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.sns li {
  width: 23%;
  margin: 22px 0 0;
}
.sns li a {
  border-radius: 5px;
  color: rgb(255 255 255);
  text-align: center;
  padding: 10px 0 9px;
  display: block;
}
.sns li a:before {
  font-size: 2.6rem;
}
.sns li a:hover {
  -webkit-transform: translate3d(0,2px,0);
  -moz-transform: translate3d(0,2px,0);
  transform: translate3d(0,2px,0);
  box-shadow: none;
}
.sns .twitter a {
  background: rgb(29 161 242);
  box-shadow: 0 2px 0 rgb(23 129 194);
}
.sns .twitter a:hover {
  background: rgb(23 129 194);
}
.sns .facebook a {
  background: rgb(59 89 152);
  box-shadow: 0 2px 0 rgb(47 71 122);
}
.sns .facebook a:hover {
  background: rgb(47 71 122);
}
.sns .google a {
  background: rgb(220 78 65);
  box-shadow: 0 2px 0 rgb(176 62 52);
}
.sns .google a:hover {
  background: rgb(176 62 52);
}
.sns .hatena a {
  background: rgb(0 164 222);
  box-shadow: 0 2px 0 rgb(0 131 178);
}
.sns .hatena a:hover {
  background: rgb(0 131 178);
}
.sns .line a {
  background: rgb(0 195 0);
  box-shadow: 0 2px 0 rgb(0 156 0);
}
.sns .line a:hover {
  background: rgb(0 156 0);
}
.sns .pocket a {
  background: rgb(239 63 86);
  box-shadow: 0 2px 0 rgb(191 50 69);
}
.sns .pocket a:hover {
  background: rgb(191 50 69);
}
.sns .feedly a {
  background: rgb(108 198 85);
  box-shadow: 0 2px 0 rgb(86 158 68);
}
.sns .feedly a:hover {
  background: rgb(86 158 68);
}
.sns .rss a {
  background: rgb(255 165 0);
  box-shadow: 0 2px 0 rgb(204 132 0);
}
.sns .rss a:hover {
  background: rgb(204 132 0);
}
input,
textarea {
  padding: 10px;
  border: solid 2px rgb(238 238 238);
  border-radius: 0;
  box-sizing: border-box;
}
input {
  width: 300px;
}
input[type="submit"] {
  width: 100%;
  background: rgb(163 119 176);
  border: none;
  border-radius: 5px;
  color: rgb(255 255 255);
  text-align: center;
  padding: 10px 0;
  display: inline-block;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
input[type="submit"]:hover {
  background: rgb(163 119 176 / 80%);
}
textarea {
  width: 100%;
  height: 150px;
  vertical-align: bottom;
}
.inputArea {
  letter-spacing: -0.4em;
}
.inputArea .input {
  width: 236px;
  height: 60px;
  border: solid 2px rgb(238 238 238);
  border-right: none;
  border-radius: 5px 0 0 5px;
  box-sizing: border-box;
  font-size: 2rem;
  padding: 10px 20px;
  margin-top: 20px;
  letter-spacing: normal;
  vertical-align: top;
}
.inputArea .btn {
  width: 100px;
  background: rgb(163 119 176);
  border: none;
  border-radius: 0 5px 5px 0;
  box-sizing: border-box;
  height: 60px;
  color: rgb(255 255 255);
  font-size: 2rem;
  padding: 10px 20px;
  letter-spacing: normal;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.inputArea .btn:hover {
  background: rgb(163 119 176 / 80%);
}

/* sidebar */
#sidebar {
  width: 300px;
  margin-left: 40px;
}
#sidebar .listArea li {
  width: 100%;
}
#sidebar .sticky {
  position: sticky;
  top: 90px;
}

/* footer */
footer {
  text-align: center;
  margin-top: 80px;
  padding-bottom: 40px;
}
#breadcrumb ol {
  background: rgb(255 255 255);
  font-size: 1.4rem;
  text-align: left;
  padding: 20px 10%;
}
#breadcrumb li {
  color: rgb(34 34 34);
  display: inline-block;
}
#breadcrumb li:after {
  content: "＞";
  padding: 0 5px;
  display: inline-block;
}
#breadcrumb li:last-of-type:after {
  content: none;
}
#breadcrumb li a {
  color: rgb(34 34 34);
}
#breadcrumb li a:hover {
  color: rgb(163 119 176 / 80%);
}
footer .sns {
  width: 300px;
  padding-top: 50px;
  margin: 0 auto;
}
footer .sns .twitter a,
footer .sns .facebook a,
footer .sns .google a,
footer .sns .hatena a,
footer .sns .line a,
footer .sns .pocket a,
footer .sns .feedly a,
footer .sns .rss a,
footer .sns .twitter a:hover,
footer .sns .facebook a:hover,
footer .sns .google a:hover,
footer .sns .hatena a:hover,
footer .sns .line a:hover,
footer .sns .pocket a:hover,
footer .sns .feedly a:hover,
footer .sns .rss a:hover {
  background: none;
  box-shadow: none;
  color: rgb(34 34 34);
}
footer nav ul li {
  margin: 15px 10px 0;
  display: inline-block;
}
footer nav ul li a {
  font-size: 1.2rem;
  color: rgb(34 34 34);
}
footer .logo img {
  height: 20px;
  margin-top: 20px;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}
#copy {
  font-size: 1.2rem;
  margin: 20px 20px 0;
  display: block;
}
#pageTop {
  background: rgb(163 119 176);
  border-radius: 50%;
  font-size: 2rem;
  color: rgb(255 255 255);
  padding: 15px;
  z-index: 11;
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
}
#pageTop:hover {
  background: rgb(163 119 176 / 80%);
}

/* responsive */
@media screen and (max-width: 768px) {
#contents {
  padding: 30px 5% 0;
  flex-direction: column;
}
#hero .inner {
  padding: 80px 5% 0;
  flex-direction: column;
}
#hero .inner .text .copy {
  font-size: 4rem;
}
#hero .inner .text p {
  font-size: 1.6rem;
  margin-top: 10px;
}
#hero .inner .text ul {
  margin-top: 20px;
  justify-content: center;
}
#hero .inner .img {
  width: auto;
}
#hero .inner .img img {
  height: 300px;
}
.home section {
  padding: 80px 5%;
}
.sectionList li a {
  width: 80px;
}
.sectionList li a .img {
  width: 80px;
  height: 80px;
}
.home .sectionArea .description {
  padding: 10px 30px 30px;
}
.qanda .question {
  padding: 20px 30px;
}
.qanda .answer {
  padding: 10px 30px 30px;
}
.listArea li {
  width: 100%;
}
img {
  max-width: 100%;
  height: auto;
}
#cont {
  padding: 30px;
}
#cont li {
  font-size: 1.4rem;
}
.description blockquote {
  padding: 1px 20px 20px;
}
.description pre {
  padding: 20px;
}
.description table {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
}
.profile {
  padding: 30px;
  display: block;
}
.profile .img {
  width: 50%;
  margin: 0 auto;
}
.profile .text {
  margin: 10px 0 0;
}
.prevnext .prev,
.prevnext .next {
  width: 100%;
}
#sidebar {
  width: 100%;
  margin: 0;
}
#pageTop {
  right: 10px;
  bottom: 10px;
}
}