@charset "utf-8";
body {
  position: relative;
  font-family: "M PLUS Rounded 1c" , "Bookman Old Style";
}
/* layout */
.l-w20{width: 20%; padding: 0 1rem;}
.l-w25{width: 25%; padding: 0 1rem;}
.l-w30{width: 30%; padding: 0 1rem;}
.l-w40{width: 40%; padding: 0 1rem;}
.l-w45{width: 45%; padding: 0 1rem;}
.l-w50{width: 50%; padding: 0 1rem;}
.l-w55{width: 55%; padding: 0 1rem;}
.l-w60{width: 60%; padding: 0 1rem;}
.l-w70{width: 70%; padding: 0 1rem;}
.l-w80{width: 80%; padding: 0 1rem;}
.l-mt23 {
  margin-top: 23px;
}
.l-mt6 {
  margin-top: 6px;
}
.l-container{
  width: 100%;
}
.l-contents {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid transparent;
}
.l-contents::after {
  display: block;
  clear: both;
  content: "";
}
.l-left{
  float: left;
}
.l-right{
  float: right;
}
.l-clear{
  padding-top: 30px;
  margin-bottom: 60px;
  clear: both;
  display: flex;
  display: -webkit-flex; /* Safari */
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
.l-clear::after {
  display: block;
  clear: both;
  content: "";
}
.l-table{
  display: table;
  width: 100%;
}
.l-table-cell{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
footer{
  width: 100%;
  max-width: 700px;
  margin: auto;
}
/* theme */
.theme-blue{
  color: #ffffff;
  padding: 100px 0;
  background-color: #007dd1;
  background-image: url(../img/bg.png);
}
.theme-blue:first-child{
  padding-top: 0;
}
.theme-gray{
  margin-top: 66px;
  padding: 100px 0;
  background: #efefef;
}
.theme-white{
  padding: 100px 0;
  background: #ffffff;
}
.theme-blue-text{
  color: #007dd1;
}
/*英語セクション*/
.en-sec p{
  opacity: .8;
}
.top .en-sec h2{
  font-size: 2.8rem;
}
.en-sec h2{
  opacity: .8;
}
.en-sec h4{
  opacity: .8;
}
.top .en-sec p{
  font-size: 1.8rem;
}
.en-sec p.en-sec-small {
  font-size: 1.5rem!important;
}
/* h1 */
h1#logo {
  position: absolute;
  top: 50px;
  left: 50px;
  margin: 0;
  max-width: 217px;
}
h1#logo img {
  width: 100%;
}
/* h2 */
h2{
  font-family:  "M PLUS Rounded 1c" ;
  text-align: center;
  font-size: 3.75rem;
}
h2 .small{
  font-size: 3rem;
}
h2 .x-small{
  font-size: 2.1rem;
}
h2 .x-small::after{
  content: "";
  display: block;
}
h2.p-ttl{
  margin-top: 0;
  margin-bottom: 50px;
}
h2.p-ttl span {
  display: block;
  margin-bottom: 18px;
}
h2.w-ttl{
  margin:0 0 60px;
  text-align: left;
}
h2.a-ttl {
  font-size: 2.8rem;
  text-align: left;
  margin-top: 0;
  margin-bottom: 18px;
}
h2.nomal{
  font-family: "M PLUS Rounded 1c" ;
  font-weight: normal;
}
h2.about-ttl{
  font-family: "M PLUS Rounded 1c";
  text-align: left;
  font-size: 2.25rem;
}
h2.about-ttl:first-child{
  margin-top: 0;
}

/* h3 */
h3{
  font-size: 2.5rem;
  text-align: center;
}
h3.desc2-ttl {
  font-family: 'Bookman Old Style';
  font-weight: normal;
  color: #ffffff;
  background: #007dd1;
  margin: 0;
  padding: 1em 0;
}
h3.noren-ttl {
  font-weight: normal;
  text-align: left;
  font-size: 3rem;
  margin-top: 0;
  margin-bottom: 5px;
  line-height: 1;
}
/* h4 */
h4{
  text-align: center;
}
h4.noren-ttl {
  font-family: "M PLUS Rounded 1c";
  font-size: 3rem;
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
}
/* module */
.pcnone{
  display: none;
}
.spnone{
  display: block;
}
a{
  color: #1d9dd8;
}
a.btn-detail{
  display: inline-block;
  border: solid 2.5px #1d9dd8;
  border-radius: 2rem;
  background: #ffffff;
  font-size: 2rem;
  padding: 0.2rem 1rem 0.3rem;
  color: #1d9dd8;
  text-decoration: none;
  margin-top: 20px;
}
a.btn-detail:hover{
  background: #eaf4f9;
}
a.btn-detail img {
  margin-bottom: 4px;
}
a.btn-first {
  margin-top: 40px;
  margin-right: 20px;
}
/* トップ　リード */

.top-visual{
  margin-top: 50px;
  margin-bottom: 90px;
}
.top-visual1 {
  margin-bottom: 40px;
  width: 100%;
  max-width: 521px;
  max-height: 85px;
}
.top-visual2{
  width: 100%;
  max-width:950px;
  max-height:500px;
}
.top-date {
  width: 100%;
  max-width: 566px;
  margin: auto;
  margin-bottom: 100px;
}
.attention{
  font-size: 1rem;
}
.soon{
  color: #727171;
  font-family: 'Bookman Old Style';
  font-weight: normal;
  margin: 0;
}
.top{
  text-align: center;
}
.top-desc2{
  text-align: center;
}
.top-desc2 p{
  font-size: 3.8rem;
}
.top-desc2 .theme-gray{
  margin-top: 0;
}
.p1{
  color: #3E3A39;
}
.p1-desc{
  text-align: center;
}
.p1-desc .en-sec p{
  font-size: 1.8rem;
}
.p2{
  color: #3E3A39;
}
.p2-desc{
  text-align: center;
}
.p2-desc .en-sec p{
  font-size: 1.8rem;
}
.p3{
  color: #3E3A39;
}
.p3-desc{
  text-align: center;
}
.p3-desc .en-sec p{
  font-size: 1.8rem;
}

/* project */
.project-outline {
  padding: 0 0 100px;
}

/* project01 */
.project1{
  background: url(../img/project1bg.png) no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 290px;
  padding: 50px 0;
}
.project1 h4 span{
  font-size: 2rem;
  color: #007dd1;
}
/* project02 */
.project2{
  background: url(../img/project2bg.png) no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 290px;
  padding: 50px 0;
}
.project2 h4 span{
  font-size: 2rem;
  color: #007dd1;
}
.col-wrap {
  display: flex;
  justify-content: space-around;
  margin: 60px 0 0;
}
.col-wrap__col {
  margin: 0 15px;
}
.col-wrap__col h3 {
  margin: 0 0 3px;
  color: #007dd1;
  font-size: 32px;
}
.details-stampsheet {
  margin: 80px 0 0;
}
.details-stampsheet__link {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  border: 3px solid #007dd1;
  border-radius: 15px;
  width: 228px;
  padding: 7px 10px;
  color: #007dd1;
}
.details-stampsheet__link:hover {
  background: #eaf4f9;
}
.details-stampsheet__link__wrap {
  text-align: center;
  margin: 0 15px 0 0;
}
.details-stampsheet__link__wrap div:first-child {
  font-size: 16px;
  font-weight: bold;
}
.details-stampsheet__link__wrap div:last-child {
  font-size: 12px;
}
.details-stampsheet__link__icon img {
  width: 33.6194px;
}

.details-stockStatus {
  margin: 20px 0 0;
}
.details-stockStatus__link {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  border: 3px solid #007dd1;
  border-radius: 15px;
  width: 228px;
  padding: 7px 10px;
  color: #007dd1;
}
.details-stockStatus__link:hover {
  background: #eaf4f9;
}
.details-stockStatus__link__wrap {
  text-align: center;
}
.details-stockStatus__link__wrap div:first-child {
  font-size: 16px;
  font-weight: bold;
}
.details-stockStatus__link__wrap div:last-child {
  font-size: 12px;
}

/* project03 */
.project3{
  background: url(../img/project3bg.png) no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 290px;
  padding: 50px 0;
}
.project3 h4 span{
  font-size: 2rem;
  color: #007dd1;
}
/* project04 */
.project4{
  background: url(../img/project4bg.png) no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 290px;
  padding: 100px 0;
}
/* 作品紹介 */
p.w-desc{
  font-size: 1.5rem;
}
p.w-desc.en{
  font-size: 1.12rem;
  opacity: .8;
}
div.w-title {
  font-size: 1.8rem;
}
.bio p{
  font-family: "M PLUS Rounded 1c";
  font-size: 1.5rem;
}
.bio .en-sec{
  color: #303030;
}
.bio .en-sec .a-ttl{
  font-size: 2.1rem;
  margin-bottom: 0.8rem;
}
.bio .en-sec p{
  font-size: 1.25rem;
  margin-top: 0;
}
ruby{
  line-height: 1;
}
ruby rt  {
  font-family: "M PLUS Rounded 1c";
  font-size: 1.2rem;
}
.artwork .l-clear figure.l-right{
  order:2;
  position: relative;
  height: auto;
  margin-bottom: 2em;
}
.artwork .l-clear figure.l-right > img {
    position: absolute;
    top: 145px;
    right: 0;
}
.artwork .l-clear figure.l-right .artwork-sec1-bio-img{
  position: absolute;
  top: 0;
  right: 0;
}
.artwork .l-clear figure.l-left{
  text-align: center;
}
.bio a{
  font-size: 1.5rem;
  font-family: 'Bookman Old Style';
  font-weight: normal;
}
.artwork .l-clear figure.l-left img{
  margin-top: 2rem;
}

.artwork .l-clear figure.l-right .openday {
  position: absolute;
  top: 360px;
  right: 0;
}

.openday {
  max-width: 195px;
  margin: 0 auto;
}
.openday-sp {
  display: none;
}
/* 暖簾アート */
.noren{
  padding-top: 50px;
}
.noren h2.nomal:after {
  content: "";
  display: block;
  width: 40px;
  border-bottom: solid 3px #fff;
  margin: 20px auto;
  border-radius: 1.5px;
}
.noren p{
  text-align: center;
}
.noren figure{
  text-align: center;
}
.noren .en-sec p{
  font-size: 1.68rem;
}
.noren .noren-attention{
  max-width: 1037.5px;
  font-size: 1.5rem;
  float: right;
  text-align: left;
  padding-right: 50px;
}
.noren .noren-attention div:first-child {
  padding: 0 85px 0 0;
}
.noren .noren-attention div:last-child {
  font-size: 1.3rem;
  padding: 0 36px 0 0;
}
.noren section{
  margin-bottom: 90px;
}
.noren section:last-child{
  margin-bottom: 0;
}
.noren2 {
  color: #3e3a39;
  margin-bottom: 100px;
}
.thanks .bio{
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
}
.thanks .bio .en-sec {
    color: #ffffff;
}
.thanks .bio .en-sec .noren-ttl{
  font-size: 2.25rem;
}
.thanks .bio .en-sec p{
  font-size: 1.3rem;
}
.thanks .bio p {
  font-family: "M PLUS Rounded 1c";
  font-size: 1.75rem;
  text-align: left;
}
.thanks .bio figure {
  margin-top: 10px;
  padding-right: 10px;
}
.about a{
  font-size: 1.5rem;
  font-family: 'Bookman Old Style';
  font-weight: normal;
  text-decoration: none;
}
.about p{
  font-size: 1.5rem;
}
footer{
  overflow: hidden;
}
footer dl{
  display: flex;
  display: -webkit-flex; /* Safari */
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  font-size: 2.25rem;
}
footer dl::after {
  display: block;
  clear: both;
  content: "";
}
footer dl dd{
  margin-left: 0;
}
footer dl dd.footer-host{
  display: flex;
  display: -webkit-flex; /* Safari */
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
footer dl dd.footer-organizer{
  font-size: 1.8rem;
}
footer dl dd p{
  width: 100%;
  display: block;
  clear: both;
  font-size: 1.8rem;
}
footer dl dd.sponsor{
  display: flex;
  display: -webkit-flex; /* Safari */
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  align-items: center;
  -webkit-align-items: center;/* Safari */
}
footer dl dd object {
  float: left;
  margin-right: 56px;
}
footer dl.sponsor::after {
  display: block;
  clear: both;
  content: "";
}
footer dl dd{
  margin-bottom: 40px;
}
.footer{
  padding-bottom: 0;
}
/* アニメーション */
.invisible {
  transition: opacity;
  opacity: 0.0;
}

.visible {
  transition: opacity 0.5s ease;
  opacity: 1.0;
}
.animated {
  animation-duration: 2s;
  animation-fill-mode: both;
}






.ssp {
  padding: 80px 15px;
  width: 1200px;
  margin: 0 auto;
}
.ssp h2.p-ttl img {
  width: 420px;
}

.ssp h2.p-ttl span {
  font-size: 3.2rem;
  margin-top: 5px;
}

.ssp table {
  width: 100%;
  font-size: 2.1rem;
  border: 3px solid #007dd1;
}
.ssp table tr th {
  background-color: #007dd1;
  color: #fff;
  font-weight: normal;
  padding: 10px 15px;
  border-right: 2px solid #fff;
}
.ssp table tr th.status {
  background-color: #00A993;
}
.ssp table tr td {
  padding: 10px 10px;
  border-right: 2px solid #007dd1;
}
.ssp table tr:nth-child(odd) td {
  background-color: #D9EBF6;
  font-weight: normal;
}
.ssp table tr td > span {
  font-size: 1.7rem;
  display: block;
}
.ssp table tr td > a {
  color: #231815;
  text-decoration: none;
}
.ssp table tr td.status {
  font-size: 3rem;
  background-color: #F2FBF9;
  text-align: center;
}
.ssp table tr:nth-child(odd) td.status {
  background-color: #CCEEE9;
}

.ssp .stock-desc {
  text-align: right;
  font-size: 2.1rem;
  margin-top: 25px;
}
.ssp .stock-desc > span:not(:last-child) {
  margin-right: 30px;
}








@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media only screen and (max-width: 1040px) {
  h1#logo {
    position: absolute;
    top: 25px;
    left: 25px;
    margin: 0;
    max-width: 150px;
  }
  .top-visual {
    margin-top: 125px;
    margin-bottom: 90px;
  }
}
@media only screen and (max-width: 768px) {
  figure{
    text-align: center;
  }
  /*  レイアウト */
  .l-contents {
      padding: 0 18px;
  }
  /* theme */
  .theme-blue{
    padding: 50px 0;
  }
  .theme-blue:first-child{
    padding-top: 0;
  }
  .theme-gray{
    margin-top: 33px;
    padding: 50px 0;
  }
  .theme-white{
    padding: 50px 0;
  }
  .noren .noren-attention {
    padding: 0;
  }
  .noren .noren-attention >div:first-child {
    padding: 0;
  }
  .noren .noren-attention >div:last-child {
    padding: 0;
  }
  /* モジュール */
  .top-visual {
    margin: 125px auto 40px auto;
    width: 80%;
  }
  .pcnone{
    display: block;
  }
  .spnone{
    display: none;
  }
  .top-visual1 {
    margin-bottom: 40px;
  }
  .top-date {
    margin-bottom: 50px;
  }
  .top {
    margin-bottom: 50px;
  }
  .artwork .l-clear figure.l-right img {
    position: absolute;
    top: 1rem;
    bottom: auto;
    right: 0;
  }
  .col-wrap {
    display: block;
  }
  .col-wrap__col {
    margin: 0 0 30px;
  }
  .col-wrap__col h3 {
    font-size: 24px;
  }
  .details-stampsheet {
    margin: 20px 0 0;
  }
  .noren section {
      margin-bottom: 45px;
  }
  .noren .bio{
    max-width: 100%;
  }
  footer{
    padding: 1rem;
  }
  footer dl dt {
      font-size: 1.6rem;
      margin-bottom: 15px;
      display: flex;
      display: -webkit-flex; /* Safari */
      align-items: center;
      -webkit-align-items: center; /* Safari */
  }
  footer dl dd {
      font-size: 1.4rem;
      margin-bottom: 15px;
  }
  footer dl dd object {
    float: left;
    padding: 0 15px;
    margin: auto;
    display: inline-block;
    width: 50%;
    height: 50px;
  }
  footer dl dd.sponsor object{
    width: calc(100% / 4);
  }

/*  レイアウト */
  .l-right {
    width: 100%;
    float: none;
  }
  .l-left {
    width: 100%;
    float: none;
  }
  .l-w20{width: 100%; padding: 0;}
  .l-w25{width: 100%; padding: 0;}
  .l-w30{width: 100%; padding: 0;}
  .l-w40{width: 100%; padding: 0;}
  .l-w45{width: 100%; padding: 0;}
  .l-w50{width: 100%; padding: 0;}
  .l-w55{width: 100%; padding: 0;}
  .l-w60{width: 100%; padding: 0;}
  .l-w70{width: 100%; padding: 0;}
  .l-w80{width: 100%; padding: 0;}
  .l-mt23 {
    margin-top: 0;
  }
  .l-mt6 {
    margin-top: 17px;
  }
  /* theme */
  .theme-blue{
    padding: 25px 0;
  }
  .theme-blue:first-child{
    padding-top: 0;
  }
  .theme-gray{
    margin-top: 15px;
    padding: 25px 0;
  }
  .theme-white{
    padding: 25px 0;
  }
  /* モジュール */
  a.btn-detail {
      display: block;
      text-align: center;
      margin: 20px auto 40px;
      max-width: 245px;
  }
  a.btn-first {
    margin: 40px auto 20px;
  }
  h1#logo {
    top: 10px;
    left: 10px;
    margin: 0;
    max-width: 100px;
  }
  h2 {
    font-size: 2rem;
  }
  h2 .small{
    font-size: 1.8rem;
  }
  h2 .x-small{
    font-size: 1.6rem;
  }
  h2 .x-small::after{
    content: "";
    display: block;
  }
  h2.p-ttl{
    margin-bottom: 25px;
  }
  h2.p-ttl span {
    margin-bottom: 10px;
  }
  h2.w-ttl{
    margin:0 0 30px;
  }
  h2.a-ttl {
    margin-bottom: 10px;
  }
  h2.about-ttl{
    font-size: 2rem;
    margin-top: 40px;
  }
  h4.noren-ttl{
    font-size: 1.5rem;
    text-align: left;
  }
  p {
      font-size: 1.4rem;
  }
  .top {
    margin-bottom: 25px;
  }
  .top-date {
      margin-bottom: 25px;
  }
  .top-visual1 {
    margin-bottom: 10px;
  }
  .artwork .l-clear figure.l-right .artwork-sec1-bio-img {
    position: relative;
  }
  .artwork .l-clear figure.l-right{
    text-align: center;
  }
  .artwork .l-clear figure.l-right.artist{
    order: 1;
  }
  .artwork .l-clear .bio {
    order: 2;
  }
  .artwork .l-clear .l-left.artist{
    text-align: center;
  }
  .artwork .l-clear figure.l-right img {
      position: relative;
      bottom: 0;
      right: 0;
  }

  .openday {
    display: none;
  }
  .openday-sp {
    display: block;
    max-width: 310px;
    margin: 50px auto 0;
  }

  .noren section {
      margin-bottom: 30px;
  }
  .noren .bio p{
    font-size: 1.4rem;
  }
  .noren .bio-detail{
    max-width: 100%;
  }
  .about .about-logo{
    width: 50%;
    margin: auto auto 40px;
  }
  .thanks .bio figure {
    margin-top: auto;
    padding-right: 0;
  }
  .thanks .bio .artist{
    text-align: center;
    margin-bottom: 2rem;
  }
  footer dl dt{
    display: block;
  }
  footer dl dt,footer dl dd{
    text-align: center;
  }
  /* 英語セクション */
  .top .en-sec h2 {
    font-size: 1.5rem;
  }
  .top .en-sec p{
    font-size: 1.2rem;
  }
  .p1-desc .en-sec p {
    font-size: 1.2rem;
}
  .p2-desc .en-sec p {
    font-size: 1.2rem;
}
  .p3-desc .en-sec p {
    font-size: 1.2rem;
}
  .noren .en-sec{
    font-size: 1.2rem;
  }
  .noren .en-sec p{
    font-size: 1.2rem;
  }
}