/* pc
----------------------------------------------- */
.artstudio .sec_mod_mv .ttl_mod_box {
  background-color: rgba(121, 175, 33, 0.81);
}

#basiclesson {
  position: relative;
}

@media print, screen and (min-width: 960px) {
  /* artstudio
  ----------------------------------------------- */
  #artstudio {
    overflow: hidden;
  }
  #artstudio .spshow {
    display: none;
  }
  #artstudio img {
    width: auto;
  }
  /* title
  ----------------------------------------------- */
  #artstudio .title {
    position: relative;
    height: 313px;
    background: url(../../artstudio/images/kv_pc.png) center center no-repeat;
    background-size: auto 313px;
    background-size: cover;
  }
  #artstudio .title h2 {
    position: absolute;
    top: 50%;
    left: 0;
    margin: -50px 0 0;
    width: 100%;
    text-align: center;
  }
  #artstudio .summary {
    position: relative;
    margin: 55px 0 0;
    text-align: center;
    z-index: 1;
  }
  #artstudio .summary_text {
    width: 960px;
    margin: 30px auto 0;
    padding: 20px 0 0;
    font-size: 18px;
    font-weight: 400;
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: 36px;
  }
  #artstudio .lesson {
    margin: auto;
    padding: 80px 0 0;
    width: 960px;
  }
  #artstudio h3 {
    position: relative;
    margin: 30px auto -20px;
    width: 960px;
    z-index: 1;
  }
  /* article
  ----------------------------------------------- */
  #artstudio article {
    margin: 40px auto 30px;
    width: 960px;
  }
  #artstudio article h4 {
    padding: 8px 10px;
    border-left: 8px solid #e3f3ed;
  }
  #artstudio article h5 {
    margin: 50px 0 0;
  }
  #artstudio article p {
    padding: 20px 0 0;
    font-size: 18px;
    font-weight: 400;
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: 36px;
  }
  #artstudio article p.attention {
    color: #494949;
    font-size: 20px;
    font-weight: 500;
  }
  #artstudio article p .star {
    color: #e3f3ed;
  }
  #artstudio article figure.center {
    margin: 40px 0 0;
    text-align: center;
  }
  /* column */
  #artstudio article .column {
    display: flex;
    margin: 5px 0 0;
  }
  #artstudio article .column figure {
    margin: 0 20px 0 0;
    padding: 20px 0 0;
    width: calc(50% - 20px);
  }
  #artstudio article .column figure img {
    width: 100%;
    height: auto;
  }
  #artstudio article .column p {
    margin: 0 0 0 20px;
    width: calc(50% - 20px);
  }
  #artstudio article .column.reverse figure {
    margin: 0 0 0 20px;
  }
  #artstudio article .column.reverse p {
    margin: 0 20px 0 0;
  }
  /* index
  ----------------------------------------------- */
  #artstudio .index {
    margin: 25px auto 0;
    width: 960px;
  }
  #artstudio.lesson .index {
    margin: 25px auto 80px;
  }
  #artstudio .index ul {
    display: flex;
    flex-wrap: wrap;
  }
  #artstudio .index li {
    margin: 45px 0 0;
    min-height: 148px;
    width: 50%;
  }
  #artstudio .index li a {
    display: flex;
  }
  #artstudio .index li .image {
    width: 204px;
  }
  #artstudio .index li .side {
    position: relative;
    padding: 0 0 0 10px;
    width: calc(100% - 214px);
  }
  #artstudio .index li span {
    display: block;
  }
  #artstudio .index li .image span:nth-child(1) {
    transition: opacity 0.25s;
  }
  #artstudio .index li a:hover .image span:nth-child(1) {
    opacity: 0.7;
  }
  #artstudio .index li .side span:nth-child(1) {
    position: relative;
    padding: 10px 0 8px;
  }
  #artstudio .index li .side span:nth-child(1):after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 170px;
    height: 4px;
    background: #e3f3ed;
  }
  #artstudio .index li .side span:nth-child(2) {
    margin-top: 12px;
  }
  #artstudio .index li .side span:nth-child(3) {
    display: none;
  }
  #artstudio .index li .side span:nth-child(4) {
    position: absolute;
    top: 50%;
    right: 35px;
    margin: -14px 0 0;
    transition: transform 0.25s;
  }
  #artstudio .index li a:hover .side span:nth-child(4) {
    transform: translateX(5px);
  }
  #artstudio .index li.current .side span:nth-child(1) {
    padding-left: 25px;
  }
  #artstudio .index li.current .side span:nth-child(1):after {
    background: #fffc53;
  }
  #artstudio .index li.current .side span:nth-child(3) {
    display: block;
    position: absolute;
    top: -5px;
    left: 12px;
  }
  #artstudio .index li:nth-child(6) .side span {
    padding-top: 0;
  }
  #artstudio .index li:nth-child(6) .side span::after {
    display: none;
  }
  #artstudio .index li:nth-child(6) .side span:nth-child(4) {
    top: 80%;
  }
  /* basic
  ----------------------------------------------- */
  #artstudio.basic {
    position: relative;
  }
  #artstudio.basic .figure01 {
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 0 200px;
  }
  /* paint */
  #artstudio.basic .paint .example {
    margin: 40px 0 0;
  }
  #artstudio.basic .paint .example ul {
    display: flex;
  }
  #artstudio.basic .paint .example li {
    position: relative;
    padding: 0 0 44px;
    min-height: 180px;
    width: calc(50% - 20px);
    border: 1px dashed #b6b6b6;
  }
  #artstudio.basic .paint .example li:first-child {
    margin: 0 20px 0 0;
  }
  #artstudio.basic .paint .example li:last-child {
    margin: 0 0 0 20px;
  }
  #artstudio.basic .paint .example li span {
    display: block;
  }
  #artstudio.basic .paint .example li span:nth-child(1) {
    padding: 20px 15px 0;
    color: #494949;
    font-size: 22px;
    font-weight: 500;
  }
  #artstudio.basic .paint .example li span:nth-child(2) {
    position: absolute;
    top: 50%;
    left: 0;
    margin: -90px 0 0;
    padding: 22px 0 0;
  }
  #artstudio.basic .paint .example li span:nth-child(3) {
    margin: 0 15px 0 178px;
    padding: 32px 0 0;
    font-size: 18px;
    font-weight: 400;
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: 36px;
  }
  /* make */
  #artstudio.basic .make .figures ul {
    margin: 0 30px;
    font-size: 0;
    line-height: 1;
  }
  #artstudio.basic .make .figures li {
    display: inline-block;
    margin: 25px 30px 0;
    width: calc(25% - 60px);
    font-size: 0;
    line-height: 1;
  }
  #artstudio.basic .make .figures li img {
    display: block;
    width: 100%;
    height: auto;
  }
  #artstudio.basic .make .figures li span {
    display: inline-block;
    margin: -15px 0 0;
    width: 50%;
    font-size: 17px;
    font-weight: 500;
    text-align: center;
  }
  /* shape */
  #artstudio.basic .shape .example {
    margin: 30px 0 0;
    border: 1px dashed #bcbcbc;
  }
  #artstudio.basic .shape .example .inner {
    display: flex;
    position: relative;
    padding: 25px 0;
  }
  #artstudio.basic .shape .example .inner:after {
    display: block;
    content: "";
    position: absolute;
    top: 25px;
    left: 50%;
    width: 1px;
    height: calc(100% - 50px);
    border-right: 1px dashed #bcbcbc;
  }
  #artstudio.basic .shape .sample01,
  #artstudio.basic .shape .sample02 {
    width: 50%;
  }
  #artstudio.basic .shape .example h5 {
    margin: 0 15px;
    padding: 25px 0 0;
    height: 22px;
    font-size: 22px;
    font-weight: 500;
    line-height: 22px;
  }
  #artstudio.basic .shape .example .inner h5 {
    padding: 0;
  }
  #artstudio.basic .shape .example p {
    margin: 0 15px;
    padding: 10px 0 0;
    font-size: 18px;
    line-height: 38px;
  }
  #artstudio.basic .shape .example dl {
    display: flex;
    margin: 30px 20px 0;
  }
  #artstudio.basic .shape .example dl.center {
    align-items: center;
  }
  #artstudio.basic .shape .example dd {
    padding: 0 0 0 10px;
    font-size: 18px;
    font-weight: 400;
    line-height: 36px;
  }
  #artstudio.basic .shape .example dl.center dd {
    padding: 0;
  }
  #artstudio.basic .shape .example dd strong {
    display: block;
    padding: 0 0 10px;
    font-size: 22px;
    font-weight: 500;
  }
  /* gradation */
  #artstudio.basic .gradation .example {
    margin: 40px 0 0;
    padding: 0 0 25px;
    border: 1px dashed #bcbcbc;
  }
  #artstudio.basic .gradation .example div, span, object, iframe, h1, h2, h3, h4, h5, h6,
  p, blockquote, pre, abbr, address, cite, code, del, dfn, img, ins, kbd, q, samp, strong,
  var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
  tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu,
  nav, section, time, mark, audio, video {
    -webkit-box-sizing: unset !important;
    -moz-box-sizing: unset !important;
    box-sizing: unset !important;
  }
  #artstudio.basic .gradation .sample {
    margin: 30px 20px 0;
    border-top: 1px dashed #bcbcbc;
  }
  #artstudio.basic .gradation .sample:first-child {
    margin: 0 20px;
    border: 0;
  }
  #artstudio.basic .gradation .example h5 {
    margin: 0;
    padding: 25px 0 0;
    font-size: 22px;
    font-weight: 500;
  }
  #artstudio.basic .gradation .example h5 small {
    font-size: 16px;
  }
  #artstudio.basic .gradation .example p {
    padding: 10px 0 0;
    font-size: 18px;
    line-height: 36px;
  }
  #artstudio.basic .gradation .column {
    display: flex;
    margin: 10px 0 0;
  }
  #artstudio.basic .gradation .column .left {
    width: 444px;
  }
  #artstudio.basic .gradation .column .right {
    padding: 10px 0 0 30px;
    width: calc(100% - 474px);
    font-size: 18px;
    font-weight: 400;
    line-height: 36px;
  }
  #artstudio.basic .gradation .column p {
    padding: 10px 0 0;
    width: auto;
  }
  #artstudio.basic .gradation .column ul {
    font-size: 0;
    line-height: 1;
  }
  #artstudio.basic .gradation .column li {
    display: inline-block;
    width: 33.3333333333%;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
  }
  #artstudio.basic .gradation .matrix {
    display: flex;
    margin: 0 10px;
  }
  #artstudio.basic .gradation .matrix.first {
    margin-top: 40px;
  }
  #artstudio.basic .gradation .matrix .base {
    padding: 10px 20px;
    width: 84px;
    border-right: 1px dashed #bcbcbc;
  }
  #artstudio.basic .gradation .matrix .dark {
    padding: 10px 20px;
    width: 280px;
    border-right: 1px dashed #bcbcbc;
  }
  #artstudio.basic .gradation .matrix .more {
    padding: 10px 20px;
    width: 450px;
  }
  #artstudio.basic .gradation .matrix .case {
    margin: 0 0 15px;
    padding: 0;
    height: 22px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
  }
  #artstudio.basic .gradation .matrix .tips {
    margin: 10px 0 0;
    padding: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 36px;
  }
  #artstudio.basic .gradation .matrix .dark img {
    margin: 5px 0 0;
  }
  #artstudio.basic .gradation .matrix ul {
    margin: 0 10px 0 0;
    height: 42px;
    font-size: 0;
    line-height: 1;
    text-align: left;
  }
  #artstudio.basic .gradation .matrix li {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    vertical-align: top;
    line-height: 21px;
  }
  #artstudio.basic .gradation .matrix .dark ul {
    margin-top: 5px;
  }
  #artstudio.basic .gradation .matrix .dark li {
    width: 33.3333333333%;
  }
  #artstudio.basic .gradation .matrix .dark li:nth-child(1) {
    width: calc(33.3333333333% - 10px);
  }
  #artstudio.basic .gradation .matrix .dark li:nth-child(2) {
    width: calc(33.3333333333% + 20px);
  }
  #artstudio.basic .gradation .matrix .dark li:nth-child(3) {
    width: calc(33.3333333333% - 10px);
  }
  #artstudio.basic .gradation .matrix .more li {
    width: 20%;
  }
  #artstudio.basic .gradation .matrix .more li:nth-child(1) {
    width: calc(20% - 10px);
  }
  #artstudio.basic .gradation .matrix .more li:nth-child(2) {
    width: calc(20% - 10px);
  }
  #artstudio.basic .gradation .matrix .more li:nth-child(3) {
    width: calc(20% - 5px);
  }
  #artstudio.basic .gradation .matrix .more li:nth-child(4) {
    width: calc(20% + 30px);
  }
  #artstudio.basic .gradation .matrix .more li:nth-child(5) {
    width: calc(20% - 5px);
  }
  /* supervision */
  #artstudio.basic .supervision {
    position: relative;
    margin: 80px auto 0;
    width: 740px;
  }
  #artstudio.basic .supervision h4 {
    margin: 0;
    padding: 0 0 10px;
    text-align: center;
    border: 0;
    background: url(/sp/irojiten/assets/images/artstudio/basic/supervision_line_pc.png) no-repeat center bottom;
  }
  #artstudio.basic .supervision .column {
    margin: 30px 0 0;
    padding: 0 0 30px;
  }
  #artstudio.basic .supervision .column p {
    margin: 0;
    padding: 0;
  }
  #artstudio.basic .supervision .column p:first-child {
    padding: 15px 0 0;
    width: 185px;
  }
  #artstudio.basic .supervision .column p:last-child {
    width: calc(100% - 185px);
  }
  #artstudio.basic .supervision .column a {
    text-decoration: none;
    border-bottom: 1px solid #494949;
  }
  #artstudio.basic .supervision figure {
    position: absolute;
    top: 140px;
    left: 70px;
  }
  #artstudio.basic .supervision figure img {
    width: auto;
    height: 86px;
  }
  /* lesson
  ----------------------------------------------- */
  #artstudio.lesson {
    position: relative;
  }
  #artstudio.lesson .figure01 {
    position: absolute;
    top: -1.8%;
    left: 50%;
    margin: 0 0 0 160px;
  }
  /* move */
  #artstudio.lesson .move {
    position: relative;
    margin: 60px auto 0;
    width: 800px;
    z-index: 1;
  }
  /* pickup */
  #artstudio.lesson .pickup {
    margin: 70px auto 0;
    padding: 0 0 15px;
    width: 960px;
    text-align: center;
    border: 2px solid #033300;
    border-radius: 12px;
    box-sizing: border-box;
  }
  #artstudio.lesson .pickup h4 {
    display: inline-block;
    position: relative;
    top: -20px;
    padding: 0 15px;
    background: #fff;
  }
  #artstudio.lesson .pickup ul {
    margin: 10px 0 0;
    font-size: 0;
    line-height: 1;
  }
  #artstudio.lesson .pickup li {
    display: inline-block;
    margin: 0 20px;
    vertical-align: top;
  }
  #artstudio.lesson .pickup li img {
    margin: 0 0 20px;
  }
  #artstudio.lesson .pickup li span {
    display: block;
    margin: 5px 0 0;
    color: #033300;
    font-size: 16px;
    font-family: "Noto Sans Japanese", sans-serif;
    font-weight: 400;
    line-height: 20px;
  }
  #artstudio.lesson .pickup p {
    margin: 15px 40px 0;
    font-size: 18px;
    font-family: "Noto Sans Japanese", sans-serif;
    font-weight: 400;
    text-align: justify;
    line-height: 36px;
  }
  /* point */
  #artstudio.lesson .point {
    margin: auto;
    padding: 20px 0 0;
    width: 960px;
  }
  #artstudio.lesson .point h4 {
    margin: 60px 0 0;
  }
  #artstudio.lesson .point .column {
    display: flex;
    margin: 30px 0 0;
  }
  #artstudio.lesson .point .column figure {
    padding: 0 20px 0 0;
    width: calc(50% - 20px);
  }
  #artstudio.lesson .point .column figure img {
    width: 100%;
    height: auto;
  }
  #artstudio.lesson .point .column p {
    padding: 0 0 0 20px;
    width: calc(50% - 20px);
    font-size: 18px;
    font-family: "Noto Sans Japanese", sans-serif;
    font-weight: 400;
    text-align: justify;
    line-height: 36px;
  }
  /* example */
  #artstudio.lesson .example {
    margin: 80px auto 0;
    width: 960px;
  }
  #artstudio.lesson .example p {
    margin: 50px 0 0;
    text-align: center;
  }
  #artstudio.lesson .example .figure {
    text-align: center;
  }
  #artstudio.lesson .example .figures {
    display: flex;
  }
  #artstudio.lesson .example .figures figure {
    width: calc(50% - 20px);
  }
  #artstudio.lesson .example .figures figure:first-child {
    padding: 0 20px 0 0;
  }
  #artstudio.lesson .example .figures figure:last-child {
    padding: 0 0 0 20px;
  }
  #artstudio.lesson .example .figures figure img {
    width: 100%;
    height: auto;
  }
  /* examples */
  #artstudio.lesson .examples {
    margin: 75px auto 0;
    width: 960px;
    background: #fbfcf7;
  }
  #artstudio.lesson .examples .inner {
    margin: 0 20px;
    padding: 40px 0 70px;
  }
  #artstudio.lesson .examples .copy01 {
    text-align: center;
  }
  #artstudio.lesson .examples .copy02 {
    margin: 10px 0 0;
    text-align: center;
  }
  #artstudio.lesson .examples .items {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0 0;
  }
  #artstudio.lesson .examples .item {
    margin: 0 50px;
    width: calc(50% - 100px);
    text-align: center;
  }
  #artstudio.lesson .examples .item:nth-child(1) {
    width: calc(100% - 100px);
  }
  #artstudio.lesson .examples .download {
    margin: 10px 0 0;
    text-align: center;
  }
  #artstudio.lesson .examples .download a {
    display: inline-block;
    width: 360px;
    height: 70px;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    line-height: 70px;
    border-radius: 10px;
    background: #033300;
    transition: background 0.25s;
  }
  #artstudio.lesson .examples .download a:after {
    display: inline-block;
    content: "";
    margin: -5px 0 0 20px;
    width: 26px;
    height: 31px;
    vertical-align: middle;
    background: url(/sp/irojiten/assets/images/artstudio/ic_pdf_white.svg) no-repeat;
    background-size: 26px 31px;
  }
  #artstudio.lesson .examples .download a:hover {
    background-color: #001400;
  }
  #artstudio.lesson .examples .caution {
    margin: 20px 0 0;
    font-size: 17px;
    font-weight: 400;
    text-align: center;
  }
  /* profile */
  #artstudio.lesson .profile {
    display: flex;
    align-items: center;
    margin: 80px auto 0;
    padding: 0 0 30px;
    width: 960px;
  }
  #artstudio.lesson .profile p {
    font-family: "Noto Sans Japanese", sans-serif;
  }
  #artstudio.lesson .profile p:nth-child(1) {
    width: 220px;
  }
  #artstudio.lesson .profile p:nth-child(2) {
    width: 190px;
  }
  #artstudio.lesson .profile p:nth-child(3) {
    width: 550px;
    font-size: 18px;
    font-weight: 400;
    line-height: 36px;
  }
  #artstudio.lesson .profile p:nth-child(1) img {
    width: 180px;
    height: auto;
  }
}
/* tablet
----------------------------------------------- */
/* mobile
----------------------------------------------- */
@media only screen and (max-width: 959px) {
  /* artstudio
  ----------------------------------------------- */
  #artstudio {
    overflow: hidden;
  }
  /* title
  ----------------------------------------------- */
  #artstudio .title {
    position: relative;
    height: 178px;
    background: url(../../artstudio/images/kv_sp.png) center center no-repeat;
    background-size: cover;
  }
  #artstudio .title h2 {
    position: absolute;
    top: 50%;
    left: 0;
    margin: -20px 0 0;
    width: 100%;
    text-align: center;
  }
  #artstudio .title h2 img {
    width: auto;
    height: 45px;
  }
  #artstudio .summary {
    position: relative;
    margin: 30px 20px 0;
    text-align: center;
    z-index: 1;
  }
  #artstudio .summary_text {
    max-width: 375px;
    margin: 20px auto 0;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 400;
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: 28px;
  }
  #artstudio .summary img {
    max-width: 333px;
    width: 100%;
    height: auto;
  }
  #artstudio .lesson {
    margin: auto;
    padding: 55px 20px 0;
    max-width: 335px;
  }
  #artstudio .lesson img {
    width: auto;
    height: 50px;
  }
  #artstudio h3 {
    position: relative;
    margin: 30px auto 0;
    padding: 0 20px;
    max-width: 335px;
    z-index: 1;
  }
  #artstudio h3 img {
    width: 100%;
    height: auto;
  }
  /* article
  ----------------------------------------------- */
  #artstudio article {
    margin: 20px auto 30px;
    max-width: 375px;
  }
  #artstudio article h4 {
    margin: 0 20px;
    padding: 5px 7px;
    border-left: 6px solid #e3f3ed;
  }
  #artstudio article h4 img {
    width: auto;
    height: 17px;
  }
  #artstudio article h5 {
    margin: 35px 20px 0;
  }
  #artstudio article h5 img {
    width: auto;
    height: 24px;
  }
  #artstudio article p {
    margin: 0 20px;
    padding: 20px 0 0;
    font-size: 14px;
    font-weight: 400;
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: 28px;
  }
  #artstudio article p.attention {
    color: #494949;
    font-weight: 500;
  }
  #artstudio article p .star {
    color: #e3f3ed;
  }
  #artstudio article figure.center {
    margin: 30px 20px 0;
    text-align: center;
  }
  #artstudio article figure.center img {
    width: 100%;
    height: auto;
  }
  /* column */
  #artstudio article .column figure {
    margin: 20px 20px 0;
  }
  #artstudio article .column figure img {
    width: 100%;
    height: auto;
  }
  /* index
  ----------------------------------------------- */
  #artstudio .index {
    margin: auto;
    padding: 0 0 50px;
    max-width: 375px;
  }
  #artstudio .index ul {
    margin: 0 20px;
  }
  #artstudio .index li {
    margin: 35px 0 0;
  }
  #artstudio .index li a {
    display: flex;
  }
  #artstudio .index li .image {
    padding: 0 10px 0 0;
    width: calc(50% - 15px);
  }
  #artstudio .index li .side {
    position: relative;
    padding: 0 20px 0 0;
    width: calc(50% - 20px);
  }
  #artstudio .index li img {
    width: 100%;
    height: auto;
  }
  #artstudio .index li span {
    display: block;
  }
  #artstudio .index li .side span:nth-child(1) {
    position: relative;
    padding: 6px 0 8px;
  }
  #artstudio .index li .side span:nth-child(1):after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% - 40px);
    height: 2px;
    background: #e3f3ed;
  }
  #artstudio .index li .side span:nth-child(2) {
    margin-top: 12px;
  }
  #artstudio .index li .side span:nth-child(3) {
    display: none;
  }
  #artstudio .index li .side span:nth-child(4) {
    position: absolute;
    top: 50%;
    right: 0px;
    margin: -10px 0 0;
  }
  #artstudio .index li .side span:nth-child(4) img {
    width: 20px;
    height: 20px;
  }
  #artstudio .index li.current .side span:nth-child(1) {
    padding-left: 25px;
    margin-right: -25px;
  }
  #artstudio .index li.current .side span:nth-child(1):after {
    background: #fffc53;
  }
  #artstudio .index li.current .side span:nth-child(3) {
    display: block;
    position: absolute;
    top: -5px;
    left: 3px;
  }
  #artstudio .index li.current .side span:nth-child(3) img {
    width: auto;
    height: 35px;
  }
  #artstudio .index li:nth-child(6) .side span {
    padding-top: 0;
  }
  #artstudio .index li:nth-child(6) .side span::after {
    display: none;
  }
  #artstudio .index li:nth-child(6) .side span:nth-child(4) {
    top: 80%;
  }
  /* basic
  ----------------------------------------------- */
  #artstudio.basic {
    position: relative;
  }
  #artstudio.basic .figure01 {
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 0 55px;
  }
  #artstudio.basic .figure01 img {
    width: auto;
    height: 150px;
  }
  /* paint */
  #artstudio.basic .paint .example {
    margin: 0 20px;
  }
  #artstudio.basic .paint .example li {
    position: relative;
    margin: 20px 0 0;
    padding: 0 0 20px;
    min-height: 140px;
    border: 1px dashed #b6b6b6;
  }
  #artstudio.basic .paint .example li span {
    display: block;
  }
  #artstudio.basic .paint .example li span:nth-child(1) {
    padding: 15px 10px 0;
    color: #494949;
    font-size: 15px;
    font-weight: 500;
  }
  #artstudio.basic .paint .example li span:nth-child(2) {
    position: absolute;
    top: 30px;
    left: 0;
  }
  #artstudio.basic .paint .example li span:nth-child(2) img {
    width: auto;
    height: 130px;
  }
  #artstudio.basic .paint .example li span:nth-child(3) {
    margin: 0 15px 0 130px;
    padding: 15px 0 0;
    font-size: 14px;
    font-weight: 400;
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: 28px;
  }
  /* make */
  #artstudio.basic .make .figures ul {
    margin: 0 10px;
    font-size: 0;
    line-height: 1;
    text-align: center;
  }
  #artstudio.basic .make .figures li {
    display: inline-block;
    margin: 30px 25px 0;
    width: calc(50% - 50px);
    font-size: 0;
    line-height: 1;
  }
  #artstudio.basic .make .figures li img {
    display: block;
    width: 100%;
    height: auto;
  }
  #artstudio.basic .make .figures li span {
    display: inline-block;
    margin: -15px 0 0;
    width: 50%;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
  }
  #artstudio.basic .make .figures li span:last-child {
    text-align: right;
  }
  /* shape */
  #artstudio.basic .shape .example {
    margin: 25px 20px 0;
    padding: 15px 0;
    border: 1px dashed #bcbcbc;
  }
  #artstudio.basic .shape .example h5 {
    margin: 0 10px;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
  }
  #artstudio.basic .shape .example p {
    margin: 0 10px;
    padding: 5px 0 0;
    font-size: 14px;
    line-height: 28px;
  }
  #artstudio.basic .shape .example dl {
    display: flex;
    margin: 20px 10px 0;
  }
  #artstudio.basic .shape .example dl.center {
    align-items: center;
  }
  #artstudio.basic .shape .example dd {
    padding: 0 0 0 10px;
    width: calc(100% - 110px);
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
  }
  #artstudio.basic .shape .example dt img {
    width: 100px;
    height: auto;
  }
  #artstudio.basic .shape .example dd strong {
    display: block;
    font-size: 16px;
    font-weight: 500;
  }
  /* gradation */
  #artstudio.basic .gradation .example {
    margin: 25px 20px 0;
    padding: 0 0 20px;
    border: 1px dashed #bcbcbc;
  }
  #artstudio.basic .gradation .sample {
    margin: 25px 15px 0;
    border-top: 1px dashed #bcbcbc;
  }
  #artstudio.basic .gradation .sample:first-child {
    margin-top: 0;
    border: 0;
  }
  #artstudio.basic .gradation .example h5 {
    margin: 0;
    padding: 20px 0 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
  }
  #artstudio.basic .gradation .example h5 small {
    display: block;
    font-size: 12px;
  }
  #artstudio.basic .gradation .example p {
    margin: 0;
    padding: 10px 0 0;
    font-size: 14px;
    line-height: 28px;
  }
  #artstudio.basic .gradation .column {
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
  }
  #artstudio.basic .gradation .column img {
    margin: 5px 0 0;
    width: 100%;
    height: auto;
  }
  #artstudio.basic .gradation .column ul {
    margin: 0 0 10px;
    font-size: 0;
    line-height: 1;
  }
  #artstudio.basic .gradation .column li {
    display: inline-block;
    width: 33.3333333333%;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
  }
  #artstudio.basic .gradation .matrix {
    margin: 20px 15px 0;
  }
  #artstudio.basic .gradation .matrix.first {
    margin-top: 0;
  }
  #artstudio.basic .gradation .matrix .case {
    margin: 15px 0 0;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
  }
  #artstudio.basic .gradation .matrix .tips {
    margin: 10px 0 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
  }
  #artstudio.basic .gradation .matrix img {
    margin: 10px 0 0;
    width: 100%;
    height: auto;
  }
  #artstudio.basic .gradation .matrix .base img {
    max-width: 85px;
  }
  #artstudio.basic .gradation .matrix ul {
    padding: 5px 0 10px;
    font-size: 0;
    line-height: 1;
    text-align: left;
  }
  #artstudio.basic .gradation .matrix li {
    display: inline-block;
    width: 33.3333333333%;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    vertical-align: top;
    line-height: 15px;
  }
  #artstudio.basic .gradation .matrix .base ul {
    display: inline-block;
    margin-left: 10px;
  }
  #artstudio.basic .gradation .matrix .base li {
    padding: 35px 0 0;
    width: 100%;
  }
  #artstudio.basic .gradation .matrix .dark li:nth-child(1) {
    width: calc(33.3333333333% - 15px);
  }
  #artstudio.basic .gradation .matrix .dark li:nth-child(2) {
    width: calc(33.3333333333% + 20px);
  }
  #artstudio.basic .gradation .matrix .dark li:nth-child(3) {
    width: calc(33.3333333333% - 5px);
  }
  #artstudio.basic .gradation .matrix .more li {
    width: 20%;
  }
  #artstudio.basic .gradation .matrix .more li:nth-child(1) {
    width: calc(20% - 10px);
  }
  #artstudio.basic .gradation .matrix .more li:nth-child(2) {
    width: calc(20% - 10px);
  }
  #artstudio.basic .gradation .matrix .more li:nth-child(3) {
    width: calc(20% - 5px);
  }
  #artstudio.basic .gradation .matrix .more li:nth-child(4) {
    width: calc(20% + 15px);
  }
  #artstudio.basic .gradation .matrix .more li:nth-child(5) {
    width: calc(20% + 10px);
  }
  /* supervision */
  #artstudio.basic .supervision {
    position: relative;
  }
  #artstudio.basic .supervision h4 {
    margin: 0 20px;
    padding: 0 0 10px;
    text-align: center;
    border: 0;
    background: url(/sp/irojiten/assets/images/artstudio/basic/supervision_line_sp.png) no-repeat center bottom;
    background-size: 100% auto;
  }
  #artstudio.basic .supervision .column {
    padding: 0 0 30px;
  }
  #artstudio.basic .supervision .column p:first-child {
    padding: 30px 0 0;
    text-align: center;
  }
  #artstudio.basic .supervision .column p:first-child img {
    width: auto;
    height: 40px;
  }
  #artstudio.basic .supervision .column p:last-child {
    padding: 30px 0 0;
  }
  #artstudio.basic .supervision .column a {
    text-decoration: none;
    border-bottom: 1px solid #494949;
  }
  #artstudio.basic .supervision figure {
    position: absolute;
    top: 40px;
    left: 50%;
    margin: 0 0 0 70px;
  }
  #artstudio.basic .supervision figure img {
    width: auto;
    height: 85px;
  }
  /* lesson
  ----------------------------------------------- */
  #artstudio.lesson {
    position: relative;
  }
  #artstudio.lesson .figure01 {
    position: absolute;
    top: -0.7%;
    left: 50%;
    margin: 0 0 0 5px;
  }
  #artstudio.lesson .figure01 img {
    width: auto;
    height: 285px;
  }
  /* move */
  #artstudio.lesson .move {
    margin: auto;
    max-width: 375px;
  }
  #artstudio.lesson .move .inner {
    position: relative;
    margin: 50px 20px 0;
    padding-top: 56.25%;
    z-index: 1;
  }
  #artstudio.lesson .move iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* pickup */
  #artstudio.lesson .pickup {
    margin: 50px auto 0;
    max-width: 375px;
  }
  #artstudio.lesson .pickup .inner {
    margin: 0 20px;
    padding: 0 0 15px;
    text-align: center;
    border: 1px solid #033300;
    border-radius: 6px;
    box-sizing: border-box;
  }
  #artstudio.lesson .pickup h4 {
    display: inline-block;
    position: relative;
    top: -15px;
    padding: 0 15px;
    background: #fff;
  }
  #artstudio.lesson .pickup h4 img {
    width: auto;
    height: 25px;
  }
  #artstudio.lesson .pickup ul {
    margin: 0 10px;
    font-size: 0;
    line-height: 1;
  }
  #artstudio.lesson .pickup li {
    display: inline-block;
    margin: 15px 0 0;
    width: 50%;
    vertical-align: top;
  }
  #artstudio.lesson .pickup li img {
    max-width: 100px;
    width: 100%;
    height: auto;
  }
  #artstudio.lesson .pickup li span {
    display: block;
    color: #033300;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
  }
  #artstudio.lesson .pickup p {
    margin: 15px 16px 0;
    font-size: 14px;
    font-weight: 400;
    text-align: justify;
    line-height: 28px;
  }
  /* point */
  #artstudio.lesson .point {
    margin: auto;
    max-width: 375px;
  }
  #artstudio.lesson .point h4 {
    margin: 40px 20px 0;
  }
  #artstudio.lesson .point h4 img {
    width: 100%;
    height: auto;
  }
  #artstudio.lesson .point .column figure {
    margin: 15px 20px 0;
  }
  #artstudio.lesson .point .column figure img {
    width: 100%;
    height: auto;
  }
  #artstudio.lesson .point .column p {
    margin: 15px 20px 0;
    font-size: 14px;
    font-weight: 400;
    text-align: justify;
    line-height: 28px;
  }
  /* example */
  #artstudio.lesson .example {
    margin: auto;
    max-width: 375px;
  }
  #artstudio.lesson .example p {
    margin: 30px 20px 0;
  }
  #artstudio.lesson .example p img {
    width: 100%;
    height: auto;
  }
  #artstudio.lesson .example figure {
    margin: 30px 0 0;
  }
  #artstudio.lesson .example figure img {
    width: 100%;
    height: auto;
  }
  /* examples */
  #artstudio.lesson .examples {
    margin: 30px auto 0;
    max-width: 375px;
    background: #fbfcf7;
  }
  #artstudio.lesson .examples .inner {
    padding: 30px 0;
  }
  #artstudio.lesson .examples .copy02 {
    margin: 5px 0 0;
  }
  #artstudio.lesson .examples .copy01 img,
  #artstudio.lesson .examples .copy02 img {
    width: 100%;
    height: auto;
  }
  #artstudio.lesson .examples .item {
    margin: 10px 0 0;
    text-align: center;
  }
  #artstudio.lesson .examples .item:nth-child(3) {
    margin: 25px 0 0;
  }
  #artstudio.lesson .examples .item img {
    width: 100%;
    height: auto;
  }
  #artstudio.lesson .examples .item:nth-child(2) img {
    width: 90%;
  }
  #artstudio.lesson .examples .item:nth-child(3) img {
    width: 90%;
  }
  #artstudio.lesson .examples .download {
    margin: 10px 30px 0;
  }
  #artstudio.lesson .examples .download a {
    display: block;
    position: relative;
    height: 50px;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    line-height: 50px;
    border-radius: 5px;
    background: #033300;
  }
  #artstudio.lesson .examples .download a:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    margin: -10px 0 0;
    width: 18px;
    height: 21px;
    vertical-align: middle;
    background: url(/sp/irojiten/assets/images/artstudio/ic_pdf_white.svg) no-repeat;
    background-size: 18px 21px;
  }
  #artstudio.lesson .examples .caution {
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
  }
  /* profile */
  #artstudio.lesson .profile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 40px auto 0;
    max-width: 375px;
    text-align: center;
  }
  #artstudio.lesson .profile p {
    width: 50%;
  }
  #artstudio.lesson .profile p:nth-child(1) {
    padding: 0 0 0 20px;
    width: calc(50% - 20px);
  }
  #artstudio.lesson .profile p:nth-child(2) {
    padding: 0 20px 0 0;
    width: calc(50% - 20px);
  }
  #artstudio.lesson .profile p:nth-child(3) {
    margin: 20px 20px 0;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    text-align: justify;
    line-height: 28px;
  }
  #artstudio.lesson .profile p:nth-child(1) img {
    width: 100%;
    height: auto;
  }
  #artstudio.lesson .profile p:nth-child(2) img {
    width: auto;
    height: 40px;
  }
}

/*# sourceMappingURL=artstudio.css.map */