/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import url("https://fonts.googleapis.com/css?family=Roboto");
body {
  background-color: #EFEFEF; }

/* --------------------------------- */
/* paragraph */
/* --------------------------------- */
a.btn {
  background-color: #808080;
  display: inline-block;
  padding: 8px 16px;
  color: #fff; }
  a.btn:hover {
    background-color: #404040; }

/* --------------------------------- */
/* ul */
/* --------------------------------- */
/* --------------------------------- */
/* table */
/* --------------------------------- */
/* --------------------------------- */
/* common class */
/* --------------------------------- */
.wrap {
  max-width: 1008px;
  margin: auto; }

.column {
  padding: 24px;
  background-color: #bfbfbf; }

.mt {
  margin-top: 64px; }

/* --------------------------------- */
/* form */
/* --------------------------------- */
.form input.wFull {
  width: 98%;
  margin: 0; }
.form textarea {
  width: 98%;
  height: 200px;
  margin: 0;
  border-top-color: #eeeeee;
  border-bottom-color: #eeeeee;
  border-left-color: #eeeeee;
  border-right-color: #eeeeee; }
.form input[type="submit"] {
  -moz-transition: 0.25s linear;
  -webkit-transition: 0.25s linear;
  -ms-transition: 0.25s linear;
  o-transition: 0.25s linear;
  transition: 0.25s linear;
  display: inline-block;
  border: none;
  color: #fff;
  background-color: #808080; }
  .form input[type="submit"]:hover {
    background-color: #404040; }

/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */
@media screen and (max-width: 660px) {
  .wrap {
    width: 92%;
    margin: 0 4%; }

  .col2:before, .col2:after,
  .col3:before,
  .col3:after,
  .col2_1:before,
  .col2_1:after,
  .col1_2:before,
  .col1_2:after {
    content: "";
    display: table; }
  .col2:after,
  .col3:after,
  .col2_1:after,
  .col1_2:after {
    clear: both; }
  .col2,
  .col3,
  .col2_1,
  .col1_2 {
    *zoom: 1; }
  .col2 > *,
  .col3 > *,
  .col2_1 > *,
  .col1_2 > * {
    display: block;
    width: 100%; }
  .col2 > * + *,
  .col3 > * + *,
  .col2_1 > * + *,
  .col1_2 > * + * {
    margin-top: 48px; }
  .col2 img,
  .col3 img,
  .col2_1 img,
  .col1_2 img {
    margin-bottom: 16px; }

  .col4:before, .col4:after {
    content: "";
    display: table; }
  .col4:after {
    clear: both; }
  .col4 {
    *zoom: 1; }
  .col4 > * {
    float: left;
    width: 47%;
    margin-left: 6%;
    margin-top: 32px; }
  .col4 > *:nth-child(2n+1) {
    margin-left: 0; }
  .col4 > *:nth-child(1), .col4 > *:nth-child(2) {
    margin-top: 0; } }
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */
@media screen and (min-width: 661px) {
  /* common class */
  .wrap {
    padding-left: 16px;
    padding-right: 16px; }

  .col2:before, .col2:after,
  .col3:before,
  .col3:after,
  .col4:before,
  .col4:after {
    content: "";
    display: table; }
  .col2:after,
  .col3:after,
  .col4:after {
    clear: both; }
  .col2,
  .col3,
  .col4 {
    *zoom: 1; }
  .col2 > *,
  .col3 > *,
  .col4 > * {
    display: block;
    float: left;
    margin-top: 48px; }
  .col2 img,
  .col3 img,
  .col4 img {
    margin-bottom: 16px; }

  .col2 > * {
    width: 45.1%;
    margin-left: 9.8%; }
  .col2 > *:nth-child(2n+1) {
    margin-left: 0; }
  .col2 > *:nth-child(1), .col2 > *:nth-child(2) {
    margin-top: 0; }

  .col3 > * {
    width: 28%;
    margin-left: 7.9%; }
  .col3 > *:nth-child(3n+1) {
    margin-left: 0; }
  .col3 > *:nth-child(1), .col3 > *:nth-child(2), .col3 > *:nth-child(3) {
    margin-top: 0; }

  .col4 > * {
    width: 22%;
    margin-left: 4%; }
  .col4 > *:nth-child(4n+1) {
    margin-left: 0; }
  .col4 > *:nth-child(1), .col4 > *:nth-child(2), .col4 > *:nth-child(3), .col4 > *:nth-child(4) {
    margin-top: 0; }

  .col2_1,
  .col1_2 {
    display: table;
    width: 100%; }
    .col2_1:before, .col2_1:after,
    .col1_2:before,
    .col1_2:after {
      content: "";
      display: table; }
    .col2_1:after,
    .col1_2:after {
      clear: both; }
    .col2_1,
    .col1_2 {
      *zoom: 1; }
    .col2_1 > *,
    .col1_2 > * {
      display: table-cell;
      vertical-align: top; }

  .col2_1 > *:first-child {
    width: 58.9%; }
  .col2_1 > *:nth-child(2) {
    width: 33%;
    padding-left: 7.9%; }

  .col1_2 > *:first-child {
    width: 28%; }
  .col1_2 > *:nth-child(2) {
    width: 63.9%;
    padding-left: 7.9%; } }
footer {
  width: 930px;
  padding-top: 20px;
  margin: auto;
  min-height: 60px; }
  footer p {
    float: left;
    font-family: 'Roboto', sans-serif; }
  footer section a {
    float: right;
    margin-left: 20px; }

@media screen and (max-width: 660px) {
  footer {
    width: 90%;
    padding-top: 12px; }
    footer p {
      float: left;
      font-family: 'Roboto', sans-serif; }
    footer section a {
      float: right;
      margin-left: 12px; }
      footer section a img {
        width: 100%; } }
header {
  width: 930px;
  margin: auto;
  height: 80px; }
  header h1 {
    top: 30px; }
    header h1 a {
      display: block;
      width: 166px;
      height: 26px;
      background-image: url("/img/common/header_logo.svg");
      background-repeat: no-repeat;
      text-indent: -10000px; }
  header .header_navi {
    width: 50%;
    margin-left: auto;
    display: flex; }
    header .header_navi li {
      width: 25%;
      text-align: right; }
      header .header_navi li a {
        color: #bbb;
        width: 100%;
        font-size: 1.2rem;
        font-family: 'Roboto', sans-serif;
        font-weight: bold; }
        header .header_navi li a.current {
          color: #333; }

@media screen and (max-width: 660px) {
  header {
    width: 90%;
    height: 80px; }
    header h1 {
      top: 0px;
      padding-top: 18px;
      margin-bottom: 4px; }
    header .header_navi {
      width: 100%; }
      header .header_navi li a {
        display: block;
        color: #bbb;
        width: 100%;
        font-size: 0.9rem; } }
.contents {
  width: 930px;
  margin: auto; }
  .contents h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: bold;
    font-family: 'Roboto', sans-serif; }

@media screen and (max-width: 660px) {
  .contents {
    width: 90%; }
    .contents h2 {
      font-size: 1.2rem;
      margin-bottom: 1rem; } }
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 33px; }
  .gallery a {
    background-color: #fff;
    width: 288px;
    height: 288px;
    transition: 0.3s;
    overflow: hidden; }
    .gallery a.hide {
      visibility: hidden; }
    .gallery a:hover {
      box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); }
    .gallery a img {
      width: 100%;
      height: 100%;
      object-fit: cover; }

@media screen and (max-width: 660px) {
  .gallery {
    gap: 10px; }
  .gallery a {
    width: calc(50% - 5px);
    height: auto;
    aspect-ratio: 1 / 1; } }
.aboutus_profile {
  background-color: #fff;
  padding: 50px 80px;
  margin-bottom: 30px;
  background-repeat: no-repeat; }
  .aboutus_profile h4, .aboutus_profile h3 {
    font-size: 1rem;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    margin-bottom: 10px; }
  .aboutus_profile h3 {
    font-size: 1.6rem; }
  .aboutus_profile p {
    line-height: 1.75em; }
  .aboutus_profile.aboutus_hiromi {
    background-image: url(/img/aboutus/prof_hiromi.png);
    background-position: bottom right;
    padding-left: 100px; }
  .aboutus_profile.aboutus_takashi {
    background-image: url(/img/aboutus/prof_takashi.png);
    background-position: top left;
    padding-left: 500px; }

.aboutus_cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  .aboutus_cats dl {
    background-color: #fff; }
    .aboutus_cats dl dd {
      padding: 12px; }
      .aboutus_cats dl dd span {
        float: right; }

@media screen and (max-width: 660px) {
  .aboutus_profile {
    padding: 20px;
    margin-bottom: 20px; }
    .aboutus_profile h4, .aboutus_profile h3 {
      margin-bottom: 4px; }
    .aboutus_profile p {
      line-height: 1.5em;
      font-size: 1rem; }
    .aboutus_profile.aboutus_hiromi {
      background-image: url(/img/aboutus/prof_hiromi.png);
      background-position: bottom right;
      background-size: 60%;
      padding-left: 20px; }
    .aboutus_profile.aboutus_takashi {
      background-image: url(/img/aboutus/prof_takashi.png);
      background-position: 220px 0;
      background-size: 80%;
      padding-left: 20px; }

  .aboutus_cats dl {
    width: 30%; }
    .aboutus_cats dl dt img {
      width: 100%; }
    .aboutus_cats dl dd {
      padding: 12px; }
      .aboutus_cats dl dd span {
        float: right; } }
.contact_area {
  background-color: #fff;
  padding: 100px 60px;
  background-image: url(/img/contact/contact_bg.png);
  background-repeat: no-repeat; }
  .contact_area p {
    margin-bottom: 20px; }
    .contact_area p img {
      vertical-align: middle;
      margin-right: 5px; }
    .contact_area p a {
      font-size: 1.2rem;
      font-family: 'Roboto', sans-serif;
      font-weight: bold; }
    .contact_area p.mail a {
      color: #666; }
    .contact_area p.tw a {
      color: #30A2E3; }
    .contact_area p.fb a {
      color: #284DA5; }
    .contact_area p.instagram a {
      color: #E4405F; }

@media screen and (max-width: 660px) {
  .contact_area {
    background-position: top right;
    background-size: 70%; } }
#sitetop_mv {
  background-color: #fff;
  height: 85vh;
  text-align: center;
  background-image: url("/img/top_bg.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  display: flex; }
  #sitetop_mv section {
    width: 940px;
    margin: auto;
    top: -30px; }

.sitetop_navi {
  display: flex; }
  .sitetop_navi li {
    width: 25%; }
    .sitetop_navi li a {
      display: block;
      text-align: center;
      width: 100%;
      background-color: #000;
      font-size: 1.2rem;
      line-height: 2em;
      font-family: 'Roboto', sans-serif;
      color: #fff;
      font-weight: bold; }
      .sitetop_navi li a:hover {
        background-color: #ddd;
        color: #000; }

@media screen and (max-width: 660px) {
  #sitetop_mv {
    background-size: contain;
    height: 80vh; }
    #sitetop_mv section {
      width: 80%;
      margin: auto;
      top: -30px; }
      #sitetop_mv section img {
        width: 100%; }

  .sitetop_navi {
    display: flex; }
    .sitetop_navi li {
      width: 25%; }
      .sitetop_navi li a {
        font-size: 0.8rem; } }

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