@charset "UTF-8";

a {
  color: #000;
}

#loading {
  width: 100%;
  height: 100%;
}

/* font.com */
@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=ca6e5f3d-3b56-4cc8-bf93-b5da8f7ddde9");
    @font-face{
        font-family:"Univers LT W01_45 Light1475944";
        src:url("Fonts/a91ff084-fc8b-43f4-b0ea-111254b68524.eot?#iefix");
        src:url("Fonts/a91ff084-fc8b-43f4-b0ea-111254b68524.eot?#iefix") format("eot"),url("Fonts/9fa24f1f-00d8-4d28-910f-78e925eaead6.woff2") format("woff2"),url("Fonts/d64e7bbc-e9ea-46ad-982c-6195ae4a3c61.woff") format("woff"),url("Fonts/d270a34d-b6b8-4c07-8454-03a6a3db7603.ttf") format("truetype");
    }
    @font-face{
        font-family:"Univers LT W01_55 Roman1475956";
        src:url("Fonts/6510377f-160a-4f66-aec0-2b71f05e9736.eot?#iefix");
        src:url("Fonts/6510377f-160a-4f66-aec0-2b71f05e9736.eot?#iefix") format("eot"),url("Fonts/5c8d59c2-9c85-4a22-88e3-bf3fba01dcd8.woff2") format("woff2"),url("Fonts/fc51d03b-0d7d-45df-9415-3c6270c80749.woff") format("woff"),url("Fonts/74bdff6d-c5de-42e8-a4d8-11ea14eddb22.ttf") format("truetype");
    }
    @font-face{
        font-family:"Univers Next Typewriter W05 Rg";
        src:url("Fonts/e3e2b436-5250-4457-9041-24b5c3ba31b6.eot?#iefix");
        src:url("Fonts/e3e2b436-5250-4457-9041-24b5c3ba31b6.eot?#iefix") format("eot"),url("Fonts/2099e282-5216-45bd-905c-b5180bdcf4eb.woff2") format("woff2"),url("Fonts/98e703a3-e4bd-4317-99af-cad588c28a76.woff") format("woff"),url("Fonts/540c22ec-5d60-40b9-82ba-e052d07085df.ttf") format("truetype");
    }
    @font-face{
        font-family:"Univers Next Typewriter W05 It";
        src:url("Fonts/668f67e0-5b42-4883-8814-3b2cab4588e9.eot?#iefix");
        src:url("Fonts/668f67e0-5b42-4883-8814-3b2cab4588e9.eot?#iefix") format("eot"),url("Fonts/2cf3c8fc-279b-40c3-a201-38801c1bea2d.woff2") format("woff2"),url("Fonts/9ff16c73-dad0-426e-920a-447cd79bda4d.woff") format("woff"),url("Fonts/9815d785-e42f-4fa9-807a-1cf95a089300.ttf") format("truetype");
    }
    @font-face{
        font-family:"Univers Next Typewriter W05 Bd";
        src:url("Fonts/d83dc906-be06-493e-97a8-224075adda92.eot?#iefix");
        src:url("Fonts/d83dc906-be06-493e-97a8-224075adda92.eot?#iefix") format("eot"),url("Fonts/a236ffc9-c61b-42f6-9ca6-dfeeef53549f.woff2") format("woff2"),url("Fonts/346dcbd4-5769-47e1-a6d7-02d02fca1c71.woff") format("woff"),url("Fonts/62bec676-c767-449b-a9d3-5ea362bb44b5.ttf") format("truetype");
    }
    @font-face{
        font-family:"Univers Next Typewriter W05BdI";
        src:url("Fonts/7f11dd1a-379f-4633-a2eb-61052d2e163a.eot?#iefix");
        src:url("Fonts/7f11dd1a-379f-4633-a2eb-61052d2e163a.eot?#iefix") format("eot"),url("Fonts/b7fbec82-0f8a-44a9-808c-eb0424062139.woff2") format("woff2"),url("Fonts/db5adffb-48fa-41af-a1ff-82d573f6197f.woff") format("woff"),url("Fonts/49f2c4ee-d43f-4e17-b099-e29a876342f3.ttf") format("truetype");
    }
/* 游ゴシックの表示問題 */
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

/* 禁則処理 */
p,li,dt,dd,th,td,pre {
	-ms-line-break: strict;
	line-break: strict;
	-ms-word-break: break-strict;
	word-break: break-strict;
}
html {
	height: 100%;/**/
	width: 100%;
}
body {
  background: #fefefe;
}
body,p,h1,h2,h3,h4,h5,h6,a,table,ul,li,a {
	font-family: 'Univers Next Typewriter W05 Rg', "Yu Gothic", YuGothic, sans-serif;
  font-weight: normal;
  line-height: 1.75;
	text-align: left;
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4,h5,h6 {
  font-family:'Univers Next Typewriter W05 Rg', "Yu Gothic", YuGothic, sans-serif;
}
strong {
  font-family:'Univers Next Typewriter W05 Rg', "Yu Gothic", YuGothic, sans-serif;
  font-weight: normal;
}
body,p,h1,h2,h3,h4,h5,h6,a {
	color: #000;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
}
/* ol 数字のみakz */
ol{
  counter-reset: item;
  list-style-type: none;
}
ol li:before {
  counter-increment: item;
  content: counter(item)'.';
  font-weight: bold;
  font-family:"akzidenz-grotesk", sans-serif;
  position: absolute;
  left: 0;
}
.en-ak {
  font-family:"akzidenz-grotesk", sans-serif;
}
.menu-hide--contents a,
.menu-show--contents a {
  color: #000000;
  text-decoration: underline;
  background-color: transparent;
}
.menu-hide--contents a:hover,
.menu-show--contents a:hover {
  color: #000000;
  text-decoration: underline;
  background-color: transparent;
}
.strike-through-line {
  text-decoration: line-through;
}
br.br-sp {
  display: inline;
}
br.br-md {
  display: none;
}
br.br-lg {
  display: none;
}
@media (min-width: 992px) and (max-width: 1199px) {
  br.br-sp {
    display: none;
  }
  br.br-md {
    display: inline;
  }
  br.br-lg {
    display: none;
  }
}
@media (min-width: 1200px)  {
  br.br-sp {
    display: none;
  }
  br.br-md {
    display: none;
  }
  br.br-lg {
    display: inline;
  }
}

/* --------------------------------------------------------
global navigation
-------------------------------------------------------- */
.navbar .container {
  padding-left: 0;
  padding-right: 0;
}
/* js main */
.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}
/* ligature */
.header {
  font-variant-ligatures:none
}
.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  padding-bottom: 0;
  transition: all 0.5s;
  margin-top: 0;
  transform: translate3d(0, 0, 0);
}
.navbar-brand {
  display: inline-block;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 0;
  margin-right: 0.25rem;
  font-size: 1.375rem;
  line-height: inherit;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .navbar-brand {
    font-size: 1.5rem;
  }
}
/* js hide show menu */
.header.hide{
    transform: translate3d(0, 0, 0);/*safari html-top28px*/
    transform: translateY(-100%);
}
.header a {
  text-decoration: none;
  font-family:"akzidenz-grotesk", sans-serif;
  transition: 0.3s all;
}
.header a:hover {
  color: #000;
  font-weight: normal;
}
.header .navigation a:hover {
  border-bottom: 2px solid;
  color: #000;
  font-weight: bold;
}
/* typeshop g brand sub page space */
.header .navbar-brand {
  margin-right: 0.25em;
  line-height: 1;
}
.header .navbar-brand strong {
  font-family:"akzidenz-grotesk", sans-serif;
  font-weight: bold;
}

.header .sub-page::before   {
  content: "/";
  font-weight: normal;
  margin-right: 0.25em;
}

/* sp */
.navigation {
  width: 100%;
  opacity: 0;
  visibility: hidden;
  height: inherit;
  display: flex;
  position: fixed;
  flex-direction: column;
  margin-top: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: auto !important;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
}
.nav-open .navigation {
  opacity: 1;
  visibility: visible;
  background: rgba(255, 255, 255, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1030;
  min-width: 100%;
  height: 100vh;
  margin: 0;
}
/* burger btn */
.nav-button {
  visibility: visible;
  opacity: 1;
  position: relative;
  z-index: 1111;
  border: solid 1px #000;
  height: 34px;
  display: block;
  width: 40px;
  padding: 8px 8px;
}
.nav-button:hover,
.nav-button:focus,
.nav-button:active {
  text-decoration: none!important;
}
.nav-button #nav-icon3 {
  width: 22px;
  height: 22px;
  display: inline-block;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;cursor:pointer;
}
.nav-button #nav-icon3 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #000;
  border-radius: 9px;
  opacity: 1;left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out
}
.nav-button #nav-icon3 span:nth-child(1){
  top: 0
}
.nav-button #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3){
  top: 7px
}
.nav-button #nav-icon3 span:nth-child(4){
  top: 14px
}
.nav-open #nav-icon3 span:nth-child(1){
  top: 9px;
  width: 0;
  left: 50%
}
.nav-open #nav-icon3 span:nth-child(2){
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg)
}
.nav-open #nav-icon3 span:nth-child(3){
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
.nav-open #nav-icon3 span:nth-child(4){
  top:9px;
  width:0;
  left:50%
}
.row-navigation,
.row-navigation ul {
  width: 100%;
  display: block;
}
.row-navigation ul li {
  list-style: none;
  height: 3rem;
  font-size: 1.2rem;
}
@media (min-width: 992px) {
    .header {
      padding-bottom: 0.5em;
    }
    .navbar {
      margin-top: 1em;
      margin-bottom: 0;
      padding-top: 0;
      padding-bottom: 0.5em;
    }
    .navbar .container {
      padding-right: 15px;
      padding-left: 15px;
    }
    .lg-header--line {
      width: 100%;
    }
    .navigation {
      opacity: 1;
      position: relative;
      visibility: visible;
      height: inherit;
      display: block;
      margin-top: 0;
    }
    /* burger btn */
    .nav-button {
      visibility: hidden;
      opacity: 0;
      position: relative;
      z-index: 1111;
      border: solid 1px #000;
      height: 42px;
      display: block;
      width: 50px;
      padding: 12px;
    }
    .row-navigation,
    .row-navigation ul {
      width: 100%;
      display: flex;
    }
    .row-navigation ul li {
      height: 1.75rem;
      font-size: 1.1rem;
      -ms-flex: 0 0 17%;
      flex: 0 0 17%;
      max-width: 17%;
    }
/*
    .lg-header--line {
      border-top: 2px solid #000;
      border-bottom: 2px solid #000;
    }
*/
    .navbar-brand {
      margin-top: 0;
      margin-bottom: 0;
      padding: 0;
    }

}
/* dropdown */
.dropdown-menu {
  position: absolute;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.25rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: rgba(255,255,255,0.8);
  background-clip: padding-box;
  border: none;
  border-radius: 0;
}
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.5em;
  vertical-align: 0.15em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-top: 0.5em solid;
  border-left: 0.3em solid transparent;
}

.home .navigation .home {border-bottom: 2px solid;}
.publish .navigation .publish {border-bottom: 2px solid;}
.office .navigation .office {border-bottom: 2px solid;}
.huette .navigation .huette {border-bottom: 2px solid;}
.school .navigation .school {border-bottom: 2px solid;}
.studio .navigation .studio {border-bottom: 2px solid;}
.archive .navigation .archive {border-bottom: 2px solid;}
.about .navigation .about {border-bottom: 2px solid;}
.portfolio .navigation .portfolio {border-bottom: 2px solid;}
.faq .navigation .faq {border-bottom: 2px solid;}
.links .navigation .links {border-bottom: 2px solid;}


/* --------------------------------------------------------
slide slick
-------------------------------------------------------- */

.slide-wrapper {
  background: #000;
}
/* ロード中は非表示に */
.slider {
  display:none;
  width: 100%;
  /*マージン除去*/
  line-height: 0;
}
.slider.slick-initialized {
  display: block;
  max-height: 100%;
}
/* slick 縦方向中央配置 */
.main-slide .slick-initialized .slick-slide {
    float: none;
    display: inline-block;
    vertical-align: middle;
}
/*　縦長の画面　*/
.main-slide .slick-slide img {
    max-width: 100%;
    max-height: 100%;
    width: 100vw;
    height: auto;
}
/*　横長の画面　*/
@media only screen and (orientation:landscape){
 .main-slide .slick-slide img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: 100vh;
  }
}
/* slick caption
.slick-slide .caption {
  position: absolute;
  left: 0;
  bottom: -1em;
  z-index: 2;
  width: 100%;
  padding: 3px　0　0　0;
  color: #fff;
  font-size: 0.75rem;
  opacity: 0;
  transition: .3s ease;
}
.slick-current .caption {
  opacity: 1;
  transition-delay: .5s;
}
 */
 .main-slide .slick-slide {
   transition: .3s ease;
 }

/* currentのスライド以外を表示させない */
.main-slide .slick-slide:not(.slick-current) {
  opacity: .0;
}
.text-slide h4,
.text-slide h6,
.text-slide p {
  color: #fff;
}
.text-slide {
  width: 100vw;
}
.slide--content p {
  width: 100%!important;
}
.slide--content p.small {
  font-size: 0.75em;
}
@media (min-width: 992px) {
  .slide--content p.small {
    font-size: 0.75em;
  }
}



/* --------------------------------------------------------
contents
-------------------------------------------------------- */

h5, h6 {
  padding: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
}
ol {
  padding-left: 0;
}
ul {
  list-style: none;
}
ul.list {
  list-style-type: inherit;
}
/* border */
table.f-table {
  width: 100%;
  border-top: 2px solid #000;
}
.f-table tbody {
  width: 100%;
}
.f-table tr {
  border-bottom: 2px solid #000;
}
.f-table th {
  font-weight: normal;
}
.f-p--wrap {
  border-top: 2px solid #000;
}
.f-p {
  border-bottom: 2px solid #000;
}
.f-list {
  border-top: 2px solid #000;
  margin: 0;
  padding: 0;
  margin-top: -0.1em;
}
.f-list li {
  border-bottom: 2px solid #000;
  padding:0
}
.f-list-d li {
  border-bottom: 4px solid #000;
  padding:0
}

.f-list-p-in li {
  border-bottom: 2px solid #000;
  padding:0
}
.b-t {
  border-top: 2px solid #000;
}
.b-b {
  border-bottom: 2px solid #000;
}
.border--1 {
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}
.border--t--1 {
  border-top: 2px solid #000;
}
.border--b--1 {
  border-bottom: 2px solid #000;
}
.border-dot--t--1 {
  border-top: 2px dotted #000;
}
.border-dot--b--1 {
  border-bottom: 2px dotted #000;
}
.border--2 {
  border-top: 4px solid #000;
  border-bottom: 4px solid #000;
}
.border--t--2 {
  border-top: 4px solid #000;
}
.border--b--2 {
  border-bottom: 4px solid #000;
}
.inverse .f-list li {
  border-bottom: 2px solid #fff;
}
.inverse .f-table tr {
  border-bottom: 2px solid #fff;
}
.inverse .f-p--wrap {
  border-top: 2px solid #fff;
}
.inverse .f-p {
  border-bottom: 2px solid #fff;
}
.inverse .f-list {
  border-top: 2px solid #fff;
}
.inverse .f-list li {
  border-bottom: 2px solid #fff;
}
.inverse .f-list-d {
  border-top: 4px solid #fff;
}
.inverse .f-list-d li {
  border-bottom: 4px solid #fff;
}
.inverse .f-list-p-in li {
  border-bottom: 2px solid #fff;
}
.inverse .b-t {
  border-top: 2px solid #fff;
}
.inverse .b-b {
  border-bottom: 2px solid #fff;
}
.red {
  color: red!important;
}
/* end border */
.notes {
  font-size: 0.75em
}
.indent-p {
  text-indent: 5em;
}
.card .indent-p {
  text-indent: 4em;
}
.indent {
  padding-left: 1em;
  text-indent: -1em;
}
.collapse-text:before {
  content: 'ˇ';
  font-weight: bold;
  font-family:"akzidenz-grotesk", sans-serif;
  position: absolute;
  left: 0;
}
/*  card  */
.spread--content {
  cursor: pointer;
}
.card {
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #000;
  border-radius: 0;
  height: 21em;
  overflow: hidden;
  margin-bottom: 30px;
  transition: 0.3s all;
  transform-origin: right top!important;
}
.card .card-body img {
  width: 100%;
  height: auto;
  margin-bottom: 1em;
}
.card.spread--card  {
  width: auto;
  height: auto;
  overflow: visible;
  transition: 0.2s all;
  z-index: 100;
}
.card-a {
  text-decoration: none!important;
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
}
.card:hover {
  box-shadow: 0 0 0 4px rgba(0,0,0,1);
}
.spread--img {
  width: 66.666667%;
}
@media (min-width: 992px) {
  /*.card .card-body img {
    width: auto;
    height: auto;
  }*/
  .spread--card .card img {
    width: 66.666667%;
    height: auto;
    overflow: visible;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .card {
    height: 18em;
    overflow: scroll;
    margin-bottom: 30px;
  }
}
.card-body {
  padding: 1rem;
}
.card-body {
  padding: 1rem;
}
.card-header {
  padding: 0.75rem 1rem;
}
.card-text {
  font-size: 0.875em;
  letter-spacing: -0.025em;
}
.card-text ol{
  counter-reset: item;
  list-style-type: none;
}
.card-text li {
  font-size: 0.875em;
}
.card-text ol li:before {
  counter-increment: item;
  content: counter(item)'.';
  font-weight: bold;
  font-family:"akzidenz-grotesk", sans-serif;
  position: absolute;
  left: 0;
}
.home li {
  font-size: 0.875em;
}
.card-footer {
  padding: 0.75rem 1rem;
}
.card-img-top {
  width: 100%;
  min-height: auto;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/*　img-aspect　*/
.img-aspect {
    position: relative;
    width: 100%;
    overflow:hidden;
}
.img-aspect:before {
    content:"";
    display: block;
}
.img-aspect.ratio4_3:before {
    padding-top:75%;
}
.img-aspect.ratio16_9:before {
    padding-top:56.25%;
}
.img-aspect img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
/*  modal  */
.modal.fade .modal-dialog {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
.btn-text {
  text-decoration: underline;
  cursor: pointer;
}

.article-div {
  margin-top: 8em;
}

.menu--show--wrap {
  padding-top: 8em;
}
.menu-hide--contents {
  margin-top: 0;
}
.menu-show--contents {
  margin-top: 6em;
}
@media (min-width: 992px) {
  .menu-show--contents {
    margin-top: 14em;
  }
}
.main-contents {
  margin-top: 2em;
}
.contents h4 {
  font-size: 1.4rem;
  margin: 0;
}

.div-space {
  margin-top: 5em;
}
.spacer-one-line {
  margin-top: 1.75em;
}

/* google map */
.overlay {
   background:transparent;
   position:relative;
   width:640px;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
}
.google-maps {
  position: relative;
  padding-bottom: 90%; /*これが縦横比*/
  height: 0;
  overflow: hidden;
}
.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
.inverse {
  background: #000;
}


.inverse .menu-show--contents p,
.inverse .menu-show--contents a,
.inverse .menu-show--contents li {
  color: #fff;
}


.inverse .copyright {
  color: #fff;
}

/* --------------------------------------------------------
faq
--------------------------------------------------------*/
form#mail_form {
	width: 100%;
}
form#mail_form dl {
	width: 100%;
	overflow: visible;
  display: flex;
  flex-direction: column;
  border-top: 2px solid #000;
  margin: 0;
  position: relative;
}
.inverse form#mail_form dl {
  border-top: 2px solid #fff;
}
form#mail_form dl span.error_blank {
  flex-grow: 0;
}
form#mail_form dl dt {
	width: 100%;
	padding: 0;
  margin: 0;
	overflow: hidden;
  color: #000;
}
.inverse form#mail_form dl dt {
  color: #fff;
}

form#mail_form dl dd {
	margin-bottom: 0.75em;
  flex-grow: 3;
}
@media screen and ( min-width: 768px ) {
  form#mail_form dl dt {
  	width: 34.75%;
  }
  form#mail_form dl dd {
  	margin-top: 1em;
  }
}
form#mail_form .dl-child-wrap {
  border-top: 2px solid #fff;
  display: flex;
  flex-direction: column;
}
@media screen and ( min-width: 768px ) {
  form#mail_form .dl-child-wrap .dt-headering {
    width: 34.75%;
  }
  form#mail_form .dl-child-wrap .dl-child {
    width: 65.25%;
  }
}
.sp-row.boder-bottom {
  border-bottom: 2px solid #fff;
}
.sp-row.margin-top {
  margin-top: 0.65em!important;
}
form#mail_form .dl-child span.required,
form#mail_form .dl-child span.optional {
  display: none;
}
form#mail_form .dl-child dl {
  border-top: none;
  margin: 0;
}
form#mail_form dl.sp-row {
  display: flex;
  flex-direction: row;
  width: 100%;
}
form#mail_form dl.sp-row dt {
  width: 100%;
  flex-grow: 2;
  margin-right: 2em;
  justify-content: center;
  align-items: center;
}
form#mail_form dl.sp-row input {
  width: 3em;
  margin-bottom: 0;
}
form#mail_form .receipt-attention {
  margin-top: -0.5em;
}
@media screen and ( min-width: 768px ) {
  form#mail_form dl {
    display: flex;
    flex-direction: row;
  }
  form#mail_form .dl-child-wrap {
    display: flex;
    flex-direction: row;
  }
  form#mail_form dl.sp-row dt {
    margin-top: 1em;
  }
  .sp-row.margin-top {
    margin-top: -0.25em!important;
  }
  form#mail_form .receipt-attention {
    margin-left: 34.75%;
  }
}

/* -- for JavaScript ここから --------------------------------------------------------------------------------*/

span.required,
span.optional {
	display: inline-block;

	color: #fff;
  margin-right: 1em;
  padding-right: 1em;
  font-weight: normal;
}

span.required {
	border-right: 2px solid #ff0000;
}

span.optional {
	border-right: 2px solid #fff;
}
span.error_blank,
span.error_format,
span.error_match {
	display: block;

	color: #ff0000;
	margin-top: 3px;
}
span.loading {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border-top: 5px solid rgba( 255, 255, 255, 0.2 );
	border-right: 5px solid rgba( 255, 255, 255, 0.2 );
	border-bottom: 5px solid rgba( 255, 255, 255, 0.2 );
	border-left: 5px solid #ffffff;
	-webkit-transform: translateZ( 0 );
	-ms-transform: translateZ( 0 );
	transform: translateZ( 0 );
	-webkit-animation: load-circle 1.0s linear infinite;
	animation: load-circle 1.0s linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -30px;
}
@-webkit-keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}
@keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}
/* -- for JavaScript ここまで --------------------------------------------------------------------------------*/
form#mail_form input {
  margin: 0;
}
form#mail_form input[type="text"],
form#mail_form input[type="email"],
form#mail_form input[type="tel"] {
	max-width: 100%;
	height: 2em;
	padding: 2px 2%;
	border: 1px solid #000;
	background: #fff;
	-webkit-appearance: none;
  appearance: none;
	font-size: 100%;
	font-family: inherit;
}

form#mail_form input[type="text"]:focus,
form#mail_form input[type="email"]:focus,
form#mail_form input[type="tel"]:focus,
form#mail_form textarea:focus {
	box-shadow: 0px 0px 2px #000000;
	border: none;
	background: #fff;
}
textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus {
  outline: 0;
  box-shadow: none;
  border: 2px solid #000;
  background-color: #ffffff;
}

input:focus::placeholder {
  color: #fff!important;
}
form#mail_form ul li {
  margin-top: 0.5em;
  display: block;
  margin-right: 1em;
}
form#mail_form label {
  margin-bottom: 0;
}
form#mail_form ul li input[type="radio"],
form#mail_form ul li input[type="checkbox"] {
  display: inline-block;
	margin-right: 10px;
	margin-top: 7px;
  padding-bottom: 0;
  margin-bottom: 0;
}
form#mail_form ul li:last-child {
  margin-right: 0;
}

form#mail_form ul li:first-child input[type="radio"],
form#mail_form ul li:first-child input[type="checkbox"] {
	margin-top: 0px;
}

form#mail_form select {
	font-size: 100%;
	font-family: inherit;
	margin-top: 10px;
}

form#mail_form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 200px;
	padding: 2px 2%;
	resize: vertical;
	border: 1px solid #000;
	background: #fff;
	-webkit-appearance: none;
  appearance: none;
	font-size: 100%;
	font-family: inherit;
  margin-top: 0;
  margin-bottom: 0;
}
form#mail_form #number_books {
	display: inline-block;
	width: 30%;
	max-width: 30%;
  height: 2em;
	padding: 2px 2%;
	resize: vertical;
	border: 1px solid #000;
	background: #fff;
	-webkit-appearance: none;
  appearance: none;
	font-size: 100%;
	font-family: inherit;
}

form#mail_form input#company {
	width: 100%;
}

form#mail_form input#name_1,
form#mail_form input#read_1 {
  margin-left: 0;
  margin-right: 0.5%;
}
form#mail_form input#phone,
form#mail_form input#schedule {
	width: 100%;
}
form#mail_form input#name_1,
form#mail_form input#name_2,
form#mail_form input#read_1,
form#mail_form input#read_2 {
  width: 100%;
}
form#mail_form input#postal {
  width: 60%;
}
@media screen and ( min-width: 768px ) {
    form#mail_form input#name_1,
    form#mail_form input#name_2,
    form#mail_form input#read_1,
    form#mail_form input#read_2 {
    	width: 35%;
    }
    form#mail_form input#postal {
      width: 30%;
    }
    form#mail_form ul li {
      margin-top: 0;
      display: inline-block;
    }
}
form#mail_form input#phone {
	width: 100%;
}

form#mail_form input#mail_address,
form#mail_form input#mail_address_confirm {
	width: 100%;
}

form#mail_form input#address {
	width: 100%;
}
form#mail_form input[type="button"] {
	padding: 10px 20px;
	vertical-align: middle;
	line-height: 1;
	background: #fff;
	border: 2px solid #000;
	color: #000;
	font-family: inherit;
	-webkit-appearance: none;
  appearance: none;
	font-size: 100%;
  transition: 0.3s all;
  margin-top: 1em;
}
form#mail_form input[type="button"]:hover {
	cursor: pointer;
	background: #ccc;
	border: 2px solid #000;
}

form#mail_form input[type="text"],
form#mail_form input[type="email"],
form#mail_form input[type="tel"] {
	margin-top: 0px;
}

form#mail_form input#form_submit_button {
	margin-left: 0;
}

form#mail_form select {
	margin-top: 0;
}

form#mail_form input#phone,
form#mail_form input#schedule {
	width: 60%;
}



/* --------------------------------------------------------
portfolio
-------------------------------------------------------- */
.grid-item {
  width: 144px;
	-webkit-mask-repeat: no-repeat;
  -moz-mask-repeat: no-repeat;
  -o-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-image: url('img/circle.svg');
  -moz-mask-image: url('img/circle.svg');
  -o-mask-image: url('img/circle.svg');
  mask-image: url('img/circle.svg');
	-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.grid-item:hover {
	-webkit-mask-size: 300% 300%;
  -moz-mask-size: 300% 300%;
  -o-mask-size: 300% 300%;
  mask-size: 300% 300%;
	-webkit-mask-position: center;
  -moz-mask-position: center;
  -o-mask-position: center;
  mask-position: center;
	-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

/* --------------------------------------------------------
animation
-------------------------------------------------------- */
.spread--animation {
  -webkit-animation: 0.5s linear gradually;
        animation: 0.5s linear gradually;
}
@-webkit-keyframes gradually { from { opacity: 0; } to { opacity: 1; }  }
        @keyframes gradually { from { opacity: 0; } to { opacity: 1; }  }

/* --------------------------------------------------------
footer
-------------------------------------------------------- */
.copyright {
  font-size: 0.75rem;
  font-family:'Univers Next Typewriter W05 Rg', "Yu Gothic", YuGothic, sans-serif;
}

/* --------------------------------------------------------
magnific-popup
-------------------------------------------------------- */

/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
	padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
	top: 0;
	bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
	padding: 0;
}
/*

for zoom animation
uncomment this part if you haven't added this code anywhere else

*/

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
	opacity: 0;
	-webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
		opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
		opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
}

/* --------------------------------------------------------
btn
-------------------------------------------------------- */
.buy-btn {
  background: #000;
  padding: 0.125em 0.75em 0.1em;
  display: inline-block;
  margin-top: 0.875em;
  margin-bottom: 0.875em;
}

.buy-btn a {
  display: block;
  color: #fff;
  text-decoration: none;
}

ul li ul {
  margin-left: 1em;
}

/**/
.collection-slider {
  width: 100%;
  height: 500px;
}
.collection-slider img {
  margin: 0 2em 0 0;
}
.card .card-body img.icon-svg {
  width: 48px;
  height: 48px;
  margin-bottom: 1em;
}
.calendar iframe {
  width: 100%;
  min-height: 600px;
}
/**/
ol.circle-num {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
}
 
ol.circle-num li {
  padding-left: 0;
  position: relative;
}
ol.circle-num li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #fff;
  border: 1px solid #000;
  color: #000;
  display: block;
  float: left;
  line-height: 14px;
  font-weight: normal;
  font-size: 0.75rem;
  margin-left: -1.5em;
  text-align: center;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  margin-top: 0.3em;
  padding-left: 1px;
}