@charset "UTF-8";

@media screen and (max-width: 600px) {

  /* wrapper */
  #wrapper {
    min-width: 320px;
  }

  /* header */
  header {
    padding: 1.5em 15px;
    flex-direction: column;
    height: 20vh;
  }

  header h1 {
    text-align: left;
    width: auto;
  }

  header #pcnavi {
    display: none;
  }

  header #spnavi {
    display: block;
  }

  header #copy {
    text-align: left;
    width: auto;
    line-height: 1.25;
  }

  /* main */
  main {
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
  }

  /* pagetitle, category */
  #pagetitle {
    display: flex;
    justify-content: space-between;
    text-align: left;
    padding-bottom: 12px;
    gap: 20px;
  }

  #pagetitle h2 {
    width: 25%;
  }

  #pagetitle h3 {
    width: 75%;
  }

  #pagetitle p {
    display: none;
  }

  #pagetitle #category {
    width: 70%;
    display: block;
    column-count: 3;
    column-width: auto;
    column-gap: 0px;
    align-content: start;
  }

  #pagetitle #category li {
    margin-right: 0;
    margin-bottom: 0.5em;
    line-height: 1.3;
  }

  /* gallery_list */
  #gallery_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 15px;
    position: relative;
  }

  #gallery_list>li {
    padding: 8px 0;
  }

  #gallery_list>li:nth-child(5n)::after {
    content: none;
  }

  #gallery_list li h3 {
    text-align: left;
    margin-bottom: 0.4em;
    font-size: 0.9em;
  }

  /* gallery_single */
  #gallery_single {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;
    gap: 15px;
  }

  #gallery_single div.w100 {
    width: calc(100%);
  }

  #gallery_single div.w50 {
    width: calc(100%);
  }

  #gallery_single div.w33 {
    width: calc(100%);
  }

  /* single-credit */
  #single-credit {
    display: block;
    padding-top: 15px;
    margin-top: 15px;
    padding-bottom: 0;
  }

  #single-credit #left {
    width: 100%;
  }

  #single-credit #left p {
    margin-bottom: 3em;
  }

  #single-credit #left #link {
    width: 100%;
    display: block;
    gap: 0;
  }


  #single-credit #left #link h4 {
    text-align: left;
    margin-bottom: 1em;
    font-size: 0.85em;
  }

  #single-credit #left #link #link_study {
    width: 100%;
  }

  #single-credit #left #link .button_link {
    display: block;
    margin-bottom: 1em;
  }

  #single-credit #left #link #link_other {
    width: 100%;
    margin-top: 2em;
  }

  #single-credit #right {
    width: 100%;
    margin-top: 3em;
  }

  #single-credit #right p {
    font-size: 0.85em;
    margin-bottom: 5em;
  }

  /* study_list */
  #study_list {
    padding-top: 15px;
  }

  #study_list li {
    margin-bottom: 15px;
    padding-bottom: 15px;
  }

  #study_list li a {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }

  #study_list li a:after {
    font-family: 'ysdktnb', "IBM Plex Serif", serif;
    content: '→';
    font-size: 0.8em;
    right: 0.1em;
    bottom: 0.1em;
  }

  #study_list li h3 {
    width: 90%;
  }

  #study_list li p {
    width: 90%;
    margin-top: 0.3em;
    display: none;
  }

  /* study_single */
  #study_single {
    padding-top: 15px;
  }

  #study_single section {
    display: block;
    margin-bottom: 4em;
  }

  #study_single section:last-child {
    margin-bottom: 4em;
  }

  #study_single section .format_title {
    font-size: 0.85em;
    margin-bottom: 3em;
  }

  /* study_single entry */
  #study_single section .entry {
    width: 100%;
  }

  #study_single section .entry h2 {
    font-size: 1.2em;
  }

  #study_single section .entry h3 {
    font-size: 1.1em;
  }

  #study_single section .entry h4 {
    font-size: 1.05em;
  }

  #study_single section .entry h5 {
    font-size: 1em;
  }

  #study_single section .entry h6 {
    font-size: 0.9em;
  }

  /* study_single group_photo */
  #study_single section .group_photo {
    width: 100%;
    border-top: 1px dashed #707070;
    border-left: none;
    padding-top: 2em;
    margin-top: 2em;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 1em 0;
  }

  /* study_single photogallery */
  #study_single section .photogallery {
    width: 100%;
    text-align: left;
  }

  #study_single section .photogallery h2 {
    font-size: 1.1em;
  }

  #study_single section .photogallery ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  #study_single section .photogallery .source {
    display: block;
    text-align: left;
    margin-top: 2em;
    font-size: 0.85em;
    gap: 0;
  }

  #study_single section .photogallery .source h5 {
    width: 100%;
    margin-bottom: 1em;
  }

  #study_single section .photogallery .source div {
    width: 100%;
  }


  /* about */
  #about {
    margin-bottom: 0;
  }

  #about section {
    margin-top: 5em;
  }

  #about section.flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0;
  }

  #about section.flex .sc_title {
    width: 100%;
    margin-bottom: 1.5em;
  }

  #about section.flex .sc_contents {
    width: 100%;
  }

  /* about introduction */
  #about #introduction {
    width: 100%;
    text-align: left;
    margin-top: 2em;
  }

  #about #introduction::before {
    display: none;
  }

  #about #introduction div {
    width: 100%;
  }

  /* about member */
  #about #member .sc_contents .profile {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 4em;
  }

  #about #member .sc_contents .profile .text {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #about #member .sc_contents .profile .text dl {
    width: 100%;
    margin-bottom: 2em;
  }

  #about #member .sc_contents .profile .text dl:nth-child(2) {
    margin-bottom: 0;
  }

  #about #member .sc_contents .profile .text dl dt {
    margin-bottom: 1em;
  }

  #about #member .sc_contents .profile .text dl dd {
    font-size: 0.9em;
  }

  #about #member .sc_contents .profile .text dl.jp dd {
    font-size: 0.9em;
    text-align: justify;
  }

  #about #member .sc_contents .profile .text dl.en dd {
    font-size: 0.85em;
    line-height: 1.5;
  }

  #about #member .sc_contents .profile .text .link {
    width: 100%;
    display: flex;
    margin-top: 2em;
  }

  #about #member .sc_contents .profile .text .link li a {
    border-bottom: 1px solid #707070;
    font-size: 1em;
    padding-bottom: 5px;
    margin-right: 1em;
  }

  #about #member .sc_contents .profile figure {
    width: 100%;
    margin-top: 2em;
  }


  /* about statement */
  #about #statement .sc_contents {
    width: 100%;
    margin: 0 auto;
    margin-top: 3em;
  }

  #about #statement .sc_contents h2 {
    width: 90%;
    margin: 0 auto;
    font-size: 1.1em;
    margin-bottom: 3em;
  }

  #about #statement .sc_contents p {
    width: 90%;
    margin: 0 auto;
    line-height: 2;
    text-align: justify;
    margin-bottom: 2em;
    font-size: 1em;
  }

  #about #statement .sc_contents p#name {
    width: 90%;
  }

  #about #statement .sc_contents .slide {
    width: 100%;
    margin: 4em auto 5em;
    position: relative;
    padding: 0 8%;
  }

  #about #statement .sc_contents .slide .swiper-button-next {
    right: 0;
    width: 15px;
  }

  #about #statement .sc_contents .slide .swiper-button-prev {
    left: 0;
    width: 15px;
  }

  /* about service */
  #about #service .sc_contents ul li {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 1px dashed #707070;
  }

  #about #service .sc_contents ul li h4 {
    width: 100%;
  }

  /* about studio */
  #about #studio .sc_contents .kouba {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #about #studio .sc_contents .kouba .text {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #about #studio .sc_contents .kouba .text dl {
    width: 100%;
  }

  #about #studio .sc_contents .kouba .text dl.en {
    margin-top: 2em;
  }

  #about #studio .sc_contents .kouba .text dl dt {
    margin-bottom: 1em;
  }

  #about #studio .sc_contents .kouba .text dl dd {
    font-size: 0.9em;
  }

  #about #studio .sc_contents .kouba .text dl.jp dd {
    font-size: 0.9em;
    text-align: justify;
  }

  #about #studio .sc_contents .kouba .text dl.en dd {
    font-size: 0.85em;
    line-height: 1.5;
  }

  #about #studio .sc_contents .kouba figure {
    width: 100%;
    margin-top: 2em;
  }

  /* about project */
  #about #project .sc_contents ul {
    flex-wrap: wrap;
    gap: 0;
  }

  #about #project .sc_contents li {
    width: 100%;
    margin-bottom: 3em;
  }

  #about #project .sc_contents li figure {
    width: 100%;
    margin-bottom: 1em;
  }

  #about #project .sc_contents li .caption {
    display: block;
  }

  #about #project .sc_contents li .caption h4 {
    width: 100%;
    margin-bottom: 1em;
  }

  #about #project .sc_contents li .caption p {
    width: 100%;
    font-size: 0.85em;
  }

  /* news */
  #news {
    margin-bottom: 0;
  }

  #news #contents {
    width: 100%;
    display: block;
    gap: 0;
    margin-top: 2em;
  }

  #news #contents #category {
    width: 100%;
    column-count: 3;
    column-gap: 0;
  }

  #news #contents #news_list {
    width: 100%;
    margin-top: 6em;
  }

  #news #contents #news_list article {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 6em;
  }

  #news #contents #news_list article:last-child {
    margin-bottom: 0;
  }

  #news #contents #news_list article .date {
    width: 100%;
  }

  #news #contents #news_list article section {
    width: 100%;
    margin-top: 1em;
    padding-left: 10%;
  }

  /* contact */
  #contact {
    margin-bottom: 0;
  }

  #contact section.flex {
    width: 100%;
    text-align: left;
    display: block;
    gap: 0;
    margin-top: 5em;
  }


  #contact section.flex h3 {
    width: 100%;
    margin-bottom: 1em;
  }

  #contact section.flex .contents {
    width: 100%;
  }


  /* snow monkey form */
  .snow-monkey-form {
    margin-right: 0;
    width: 100%;
  }

  .smf-form--letter .smf-item {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
  }

  .smf-item__description {
    font-size: 0.9em !important;
    color: #121212;
  }

  .smf-item {
    margin: 0 auto 2em;
    display: block;
  }

  .smf-item__col.smf-item__col--label {
    width: 100%;
  }

  .smf-item__col.smf-item__col--controls {
    width: 100%;
  }

  .smf-item__controls {
    margin-top: 1em;
  }

  .smf-action .smf-button-control__control {
    padding: 0.75em 0;
    width: 46%;
  }


  /* footer */
  footer {
    width: 100%;
    padding: 2em 20px;
    height: auto;
    text-align: left;
    margin-top: 5em;
  }

  #ft_contents {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
  }

  #ft_contents h2 {
    width: auto;
  }

  #ft_contents nav {
    width: 50%;
  }

  #ft_contents nav ul li {
    margin-bottom: 0.35em;
  }

  #ft_contents #mailmagazine {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0;
  }

  #ft_contents #mailmagazine h3 {
    width: 100%;
    margin-bottom: 1em;
  }

  #ft_contents #mailmagazine #mg_caption {
    width: 100%;
    display: block;
    gap: 0;
    margin-bottom: 1.5em;
  }

  #ft_contents #mailmagazine #mg_caption p {
    width: 100%;
    margin-bottom: 1em;
  }

  #ft_contents #mailmagazine #mg_caption p.en {
    margin-bottom: 0;
  }

  #ft_contents #mailmagazine .line_link {
    width: 100%;
  }

  #ft_caption {
    gap: 20px;
    font-size: 0.75em;
    margin-top: 8em;
  }

  #ft_caption #copyright {
    width: auto;
  }

  #ft_caption #privacypolicy {
    width: auto;
  }

  #ft_caption #instagram {
    width: auto;
  }

  /* index */
  #index {
    margin-bottom: 0;
  }

  #index #contents {
    width: 100%;
  }

  #index #contents h2 {
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 1.1em
  }



}