@charset "UTF-8";

html{
  margin: 0;
  padding: 0;
  font-size: 62.5%
}

/*------------------------All*/
body{
  margin: 0;
  padding: 0;
  color: #595857;
  font-family: 'Shippori+Mincho','YuMincho','Yu Mincho', serif;
  font-size: 1.6rem;
  text-align: left;
  line-height: 2;
  display: none;
}

a{
  color: #595857;
  text-decoration: none;
}

p{
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6{
  margin: 0;
  padding: 0;
  font-weight: normal;
}

main, section{
  position: relative;
}

ul{
  margin: 0;
  padding: 0;
}

ul li{
  list-style-type: none;
  padding: 0;
}

img{
  width: 100%;
  height: auto;
}

.inner{
  width: 1024px;
  margin: 0 auto;
}

h1{
  font-size: 3rem;
}

.logo{
  /* font-family: 'Mukta'; */
  font-size: 2rem;
  line-height: 30px;
}

.sp,
.tb{
  display: none;
}

.fa-envelope,
.fa-instagram{
  color: #595857;
  transition: 0.5s;
}

.fa-envelope:hover,
.fa-instagram:hover{
  color: #CFD8DC;
}

/*--------ヘッダー-----*/
.menubar{
  position: fixed;
  z-index: 100;
}

.menubar .baner{
  position: fixed;
  display: flex;
  right: 70px;
  top: 18px;
  width: 210px;
  height: auto;
}

.menubar .baner img{
  width: 100px;
  height: auto;
  margin: 0 5px;
}

.hmenu {
  display: block;
  position: fixed;
  z-index: 100;
  right: 20px;
  top: 15px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  text-align: center;
}

.hmenu span {
  display: block;
  position: absolute;
  width: 26px;
  height: 2px;
  left: 6px;
  background: #888888;
  transition: 0.3s ease-in-out;
}

.hmenu span:nth-child(1) {
  top: 10px;
}
.hmenu span:nth-child(2) {
  top: 18px;
}
.hmenu span:nth-child(3) {
  top: 26px;
}

/* ナビ開いてる時のボタン */
.hmenu.active span:nth-child(1){
  top: 16px;
  left: 6px;
  transform: rotate(-45deg);
}

.hmenu.active span:nth-child(2),
.hmenu.active span:nth-child(3){
  top: 16px;
  transform: rotate(45deg);
}

.gnav{
  position: fixed;
  z-index : 5;
  top: 0;
  bottom: 0;
  color: #000;
  background: #fff;
  text-align: center;
  transform: translateX(100%);
  width: 100%;
  height: 100%;
}

.gnav .inner{
  width: 100%;
  margin: 0 auto;
  height: 100%;
  position: relative;
  z-index: 1;
  overflow-y: scroll;
  box-sizing: border-box;
}

.gnav .inner .innerbox{
  width: 80%;
  margin: 0 auto;
  padding: 110px 0;
  display: flex;
}

.gnav .innerbox .box-a{
  width: 40%;
  height: auto;
}

.gnav ul{
  background: #fff;
  margin: 20px 10px;
}

.gnav ul li{
  list-style-type: none;
  padding: 0;
  width: 100%;
  line-height: 2.5rem;
  position: relative;
}

.gnav .menu li:first-child::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  display: inline-block;
  width: 22px;
  height: 2px;
  transform: translate(-50%);
  background-color: #e8ecef;
}

.gnav .menu li:nth-child(2)::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  display: inline-block;
  width: 32px;
  height: 2px;
  transform: translate(-50%);
  background-color: #e8ecef;
}

.gnav .menu li:nth-child(3)::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  display: inline-block;
  width: 32px;
  height: 2px;
  transform: translate(-50%);
  background-color: #e8ecef;
}

.gnav .menu li:nth-child(4)::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  display: inline-block;
  width: 38px;
  height: 2px;
  transform: translate(-50%);
  background-color: #e8ecef;
}

.gnav .menu li:nth-child(5)::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  display: inline-block;
  width: 45px;
  height: 2px;
  transform: translate(-50%);
  background-color: #e8ecef;
}

.gnav .stores{
  width: 140px;
  height: auto;
  margin: 0 auto;
}

.gnav .link{
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 120px;
}

.gnav .link li{
  padding: 0 10px;
}

.gnav .link li::after{
  display: none;
}

.gnav ul li a{
  display: block;
  padding: 1em 0;
  text-decoration :none;
  transition: 0.6s;
}

.gnav ul li a:hover{
  color: #CFD8DC;
  letter-spacing: 2px;
}

.gnav li a img{
 width: 20px;
 height: 20px;
}

.gnav .innerbox .box-b{
  width: 60%;
  height: auto;
}

.gnav .innerbox .box-b img{
  object-fit: cover;
}

/*-----------フッター------------*/
footer{
  height: 200px;
  background-color: #F9FAFB;
  position: relative;
}

#footerPageTop{
  position: absolute;
  top: -20px;
  left: 20px;
  font-size: 1rem;
}

footer .inner{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0 0 20px;
}

footer .contact{
  margin: 10px 0 0;
}

footer .contact ul{
  display: flex;
  justify-content: space-between;
  margin: 0 15px 0;
}

footer .contact li{
  margin: 10px 0 0 30px;
}

footer .footer-nav ul{
  display: flex;
  justify-content: flex-end;
  margin: 0 50px 0;
}

footer .footer-nav li{
  margin: 10px 0 0 60px;
  font-size: 1.2rem;
}

footer a{
  transition: 0.5s;
}

footer a:hover{
  color: #CFD8DC;
}

footer .baner{
  position: relative;
  width: 100%;
  height: auto;
  top: 0;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

footer .baner img{
  width: 140px;
  height: auto;
  padding: 0 50px;
}

footer .baner img:hover{
  opacity: 0.6;
}

footer .logo img{
  max-width: 18px;
  max-height: auto;
  vertical-align: -6px;
  margin: 3px 7px;
}

footer .brand{
  text-align: center;
  margin: 40px 0 10px;
}

footer .logo{
  font-size: 2.4rem;
}

footer .copyright{
  font-size: 1rem;
  text-align: center;
  margin: -10px 0 30px;
  letter-spacing: 0.1em;
}

footer .brand{
  margin: -10px 0 10px;
}

/*------------wraptop------------*/
.wrap{
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.wrap .main-photo{
  position: absolute;
  width: 100%;
  min-height: 100vh;
  background: url(./images/TopKV_photo.png) no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -1;
  display: none;
}

#kv{
  width: 100%;
  min-height: 100vh;
  z-index: 2;
}

#kv .inner{
  position: relative;
  min-height: 100vh;
  width: 100%;
  display:flex;
  justify-content: center;
}

#kv .name{
  position: absolute;
  top: 45%;
  width: 400px;
  text-align: center;
  /* font-family: 'Shippori+Mincho',serif; */
  font-size: 3rem;
  z-index: 10;
  display: none;
}

#kv .name img{
    max-width: 30px;
    max-height: auto;
    vertical-align: -6px;
    margin: 3px 10px;
}

#kv .underarrow{
  position: absolute;
  display: inline-block;
  bottom: 2%;
  right: 2%;
  font-size: 2rem;
  display: none;
}

#kv .underarrow:hover{
  opacity: 0.3;
}

/*-----------top-news----------*/
#news{
  width: 100%;
  height: 400px;
  background: #f8fbf8;
}

#news .inner{
  position: relative;
  width: 100%;
  height: 400px;
}

#news .inner .title{
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  top: 50px;
  left: 10%;
}

#news .inner .title::after{
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  top: 50%;
  left: 50px;
  background: #0d0015;
  content: "";
}

#news .news_list{
  position: relative;
  top: 60px;
  width: 70%;
  margin: 0 auto;
}

#news .news_list{
  padding-top: 50px;
}

#news .news_list tr{
  position: relative;
  width: 80%;
  height: 45px;
  vertical-align: top
}

#news .news_list .date{
  width: 80px;
  font-size: 1.4rem;
  color: #9ea1a3;
}

#news .news_list .new::before{
  position: absolute;
  display: inline-block;
  top: 3px;
  left: -28px;
  color: #a25768;
  font-size: 1rem;
  content: "NEW";
}

#news .news_list .topic{
  font-size: 1.6rem;
  transition: 0.5s;
}

#news .news_list .topic:hover{
opacity: 0.3;
}

#news .btn{
  position: absolute;
  top: 83%;
  right: 3%;
  display: inline-block;
  box-sizing: border-box;
  width: 100px;
  height: 40px;
  transition: 0.6s;
}

#news a:hover{
  color: #CFD8DC;
}

/*-----------top-story----------*/
#story{
  width: 100%;
  height: 500px;
  background: #e8ecef;
}

#story .inner{
  position: relative;
  width: 100%;
  height: 500px;
}

#story .inner .title{
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  top: 50px;
  left: 10%;
}

#story .inner .title::after{
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  top: 50%;
  left: 50px;
  background: #0d0015;
  content: "";
}

#story .phototheme{
  position: relative;
  background: #ffffff;
  margin: 0 auto;
  top: 80px;
  width: 90%;
  height: 350px;
  text-align: center;
  display: flex;
}

#story .phototheme .text{
  position: relative;
  width: 50%;
}

#story .phototheme .photo{
  width: 50%;
}

#story .phototheme h2{
  position: absolute;
  top: 45%;
  font-size: 1.5rem;
  left: 15px;
  text-align: left;
}

#story .phototheme p{
  position: absolute;
  right: 15px;
  top: 70%;
  font-size: 1.3rem;
  text-align: right;
}

#story .phototheme span{
  font-size: 1.6rem;
  /* font-weight: bold; */
}

#story .phototheme img{
  object-fit: cover;
  width: 100%;
  height: 350px;
}

#story .btn{
  position: absolute;
  top: 87%;
  right: 3%;
  display: inline-block;
  box-sizing: border-box;
  width: 100px;
  height: 40px;
  transition: 0.6s;
}

#story a:hover{
  color: #CFD8DC;
}

/*-----top-project----------------------*/

#project{
  width: 100%;
  height: 800px;
}

#project .inner{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 800px;
  padding: 20px;
}

#project .inner .title{
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  top: 50px;
  left: 10%;
}

#project .inner .title::after{
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  top: 50%;
  left: 55px;
  background: #0d0015;
  content: "";
}

#project .slick_selection{
  position: relative;
  box-sizing: border-box;
  margin: 70px auto;
}

#project .slick_list{
  position: relative;
  margin:0 auto;
  width:1000px;
  text-align:center;
}

#project .slick_Item{
  box-sizing: border-box;
  width: 100%;
  height: auto;
}

#project .slick_Item a:hover{
 display: block;
 background-color: #fff;
 opacity: 0.3;
}

#project .slick_img{
  margin: 0 30px;
  width: 300px;
  height: 400px;
}

#project .slick_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#project .slick_ex{
 text-align: center;
}

#project  .slick_text{
  display: inline-block;
  box-sizing: border-box;
  font-size: 1.1rem;
}

#project  .slick_title{
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  margin-top: -8px;
}

.slide-arrow,
.prev-arrow{
  max-width: 12px;
  max-height: 12px;
  position: absolute;
  top: 50%;
  cursor: pointer;
}

.slide-arrow:hover,
.slide-arrow:focus,
.prev-arrow:hover,
.prev-arrow:focus
{
    color: transparent;
    opacity: 0.25;
}
.slide-arrow:hover:before,
.slide-arrow:focus:before,
.prev-arrow:hover:before,
.prev-arrow:focus:before
{
    opacity: 1;
}

.prev-arrow{
  left: -30px;
}

.slide-arrow{
  right:-30px;
}

/*----------news-page-----*/
#newspage{
  background: #dcdddd;
  height: 100%;
  padding-top: 300px;
}

#newspage .news_chart{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 800px;
}

#newspage .news_chart .inner{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 800px;
  padding: 20px;
  background: linear-gradient(90deg, #dcdddd 0%, #dcdddd 25%, #fff 25%, #fff 100%);
}

#newspage .news_chart .title{
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  top: -50px;
  left: 15%;
  font-size: 2rem;
  letter-spacing: 0.5em;
}

#newspage .news_chart .title::after{
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  top: 55%;
  left: 100px;
  background: #A1A1AA;
  content: "";
}

#newspage .news_list{
  padding-top: 50px;
  padding-left: 30%;
}

#newspage .news_list tr{
  position: relative;
  width: 80%;
  height: 45px;
  vertical-align: top
}

#newspage .news_list .date{
  width: 100px;
  font-size: 1.3rem;
}

#newspage .news_list .new::before{
  position: absolute;
  display: inline-block;
  top: 3px;
  left: -28px;
  color: #a25768;
  font-size: 1rem;
  content: "NEW";
}

#newspage .news_list .topic{
  font-size: 1.5rem;
  transition: 0.5s;
}

#newspage .news_list .topic:hover{
opacity: 0.3;
}

/*----------newslist-page-----*/
.news_detail{
  background-color: #e9e4d4;
  padding-top: 150px;
}

.news_detail .maintitle{
  width: 100%;
  height: 180px;
  position: relative;
}

.news_detail .maintitle h1{
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.7em;
}

.news_detail .maintitle h1 span{
  position: relative;
  font-size: 1.9rem;
  letter-spacing: 0.1em;
}

.news_detail .maintitle .number::after{
  position: absolute;
  display: inline-block;
  width: 55px;
  height: 1px;
  top: -16px;
  left: 50%;
  transform: translate(-50%);
  background: #595857;
  content: "";
}

.news_detail .news_ex{
  position: relative;
  background: #f8fbf8;
  width: 100%;
  height: 850px;
}

.news_detail .news_ex .news_flex{
  display: flex;
  width: 100%;
}

.news_flex .photo{
  width: 30%;
  padding-top: 60px;
  padding-left: 12%;
}

.news_flex .photo img{
  width: 85%;
  object-fit: cover;
}

.news_flex .text{
  width: 60%;
  padding-top: 40px;
  margin: 0 auto;
}

.news_flex .text .sentence{
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 3em;
}

.news_flex .text .sentence img{
  width: 35%;
  height: auto;
}

.news_detail .opentime{
  display: inline-block;
  box-sizing: border-box;
  padding-top: 50px;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  line-height: 1.5em;
}

.news_ex .btn{
  position: absolute;
  bottom: 30px;
  right: 20px;
  display: inline-block;
  box-sizing: border-box;
  width: 150px;
  height: 10px;
  font-size: 1.4rem;
  transition: 0.5s;
}

.news_ex .btn:hover{
opacity: 0.3;
}

.tohkiichi_b{
 padding: 3px 10px;
 width: 90%;
 border: 1px solid #dcdddd; /* 枠線 */
 box-shadow: 1px 1px 2px #dcdddd;
 font-size: 1.1rem;
}

.kickpage{
 text-decoration: underline;
}

/*----------story-page-----*/
#storypage{
  height: 100%;
  padding-top: 300px;
}

#storypage .concept{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 700px;
}

#storypage .concept .inner{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 700px;
  padding: 20px;
  background: linear-gradient(90deg, #fff 0%, #fff 25%, #e8ecef 25%, #e8ecef 100%);
}

#storypage .concept .title{
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  top: -50px;
  left: 15%;
  font-size: 2rem;
  letter-spacing: 0.5em;
}

#storypage .concept .title::after{
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  top: 55%;
  left: 100px;
  background: #A1A1AA;
  content: "";
}

#storypage .projectstory{
  position: absolute;
  width: 70%;
  left: 30%;
}

#storypage .projectstory .logol{
  position: absolute;
  left: -5%;
  height: 425px;
  width: auto;
  opacity: 0.8;
  z-index: 1;
}

#storypage .projectname{
  position: absolute;
  margin: 10px;
  top: 0;
  left: 0;
  z-index: 2;
}

#storypage .projectname h1{
  font-size: 2.5rem;
  letter-spacing: 0.2em;
  margin-top: 20px;
  margin-left: 200px;
}

#storypage .projectname .logos{
  max-width: 25px;
  max-height: auto;
  vertical-align: -6px;
  margin: 3px 10px;
}

#storypage .projectname p{
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  display: inline-block;
  box-sizing: border-box;
  margin-top: 30px;
  margin-left: 250px;
}

#storypage .target{
  width: 100%;
  height: 220px;
  padding-top: 50px;
  position: relative;
}

#storypage .target .inner{
  position: absolute;
  width: 60%;
  left: 40%;
  box-sizing: border-box;
  padding: 30px 80px;
  display: flex;
  justify-content: center;
}

#storypage .target .inner .title{
 position: absolute;
 display: inline-block;
 top: 0;
 left: 0;
 z-index: 2;
}

#storypage .target .inner .title::after{
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  top: 50%;
  left: 260px;
  background: #A1A1AA;
  content: "";
}

#storypage .target .content{
  position: relative;
  flex-direction: column;
  width: 180px;
  height: 100px;
  box-sizing: border-box;
  margin: 10px 50px;
  top: 20px;
}

#storypage .target h2{
  position: absolute;
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  line-height: 4.5em;
  width: 150px;
  height: 100px;
  border: solid 1px #BDBDBD;
  z-index: 10;
  transition: 0.6s;
}

#storypage .target h2::after{
  position: absolute;
  display: block;
  width: 28px;
  height: 2px;
  top: 52%;
  left: 60px;
  background: #BDBDBD;
  opacity: 0.5;
  content: "";
}

#storypage .target a:hover{
  color: #CFD8DC;
  letter-spacing: 2px;
}

#storypage .target .subtitle{
  position: absolute;
  top: 30px;
  color: #BDBDBD;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  line-height: 6em;
  width: 150px;
  text-align: center;
  /* transform: rotate(-90deg) translateX(-100%); */
  /* transform-origin: left top;
  left: -25px; */
}

#storypage .vision .setcolor{
  height: 150px;
  background: linear-gradient(90deg, #fff 0%, #fff 25%, #e8ecef 25%, #e8ecef 100%);
}

#storypage .vision{
  width: 100%;
  height: 1500px;
  background: linear-gradient(90deg, #e8ecef 0%, #e8ecef 25%, #fff 25%, #fff 100%);
}

#storypage .vision .inner{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 1000px;
  padding-top: 100px;
  padding-bottom: 50px;
}

#storypage .vision .grid-box{
  position: relative;
  height: 1200px;
  display: grid;
  grid-template-columns: 25% 40% 35%;
  grid-template-rows: 33.3333% 33.3333% 33.3333%;
  padding-bottom: 100px;
}

#storypage .vision .title{
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
  position: relative;
}

#storypage .vision .fadephoto-a{
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  position: relative;
}

#storypage .vision .fadephoto-b{
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  position: relative;
}

#storypage .vision .fadephoto-c{
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
  position: relative;
}

#storypage .vision .photo img{
  position: absolute;
  box-sizing: border-box;
  margin-left: 80px;
  width: 80%;
  height: 80%;
  object-fit: cover;
}

#storypage .vision .text-a{
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  position: relative;
}

#storypage .vision .text-b{
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
  position: relative;
}

#storypage .vision .text-c{
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
  position: relative;
}

#storypage .vision .text-a::after,
#storypage .vision .text-b::after{
  position: absolute;
  display: block;
  width: 20%;
  height: 1.5px;
  bottom: 45px;
  left: 10%;
  background: #e8ecef;
  content: "";
}

#storypage .vision .text h2{
  text-align: left;
  box-sizing: border-box;
  padding-left: 70px;
  font-size: 1.8rem;
  letter-spacing: 0.5em;
}

#storypage .vision .text .subtitle{
  position: absolute;
  font-size: 1.2rem;
  color: #D1D5DB;
  letter-spacing: 0.4em;
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: left top;
  top: 0;
  left: 0;
}

#storypage .vision .text .subtitle::after{
  position: absolute;
  display: block;
  width: 70%;
  height: 2px;
  top: 120%;
  right: 5%;
  background: #e8ecef;
  content: "";
}

#storypage .vision .text .description{
  position: absolute;
  font-size: 1.3rem;
  line-height: 2.8em;
  letter-spacing: 0.2em;
  display: inline-block;
  box-sizing: border-box;
  margin-top: 20px;
  margin-left: 70px;
}

/*-----------projectpage------*/
#projectpage{
  width: 100%;
  height: auto;
  padding-top: 50px;
  padding-bottom: 100px;
  background: #dcdddd;
}

#projectpage .inner{
  position: relative;
  width: 100%;
  height: 100%;
}

#projectpage .title{
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  top: 40px;
  left: 3%;
  font-size: 2rem;
  letter-spacing: 0.5em;
}

#projectpage .title::after{
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  top: 50%;
  right: -40%;
  background: #A1A1AA;
  content: "";
}

#projectpage .itemgroup{
  display: flex;
  flex-wrap: wrap;
  padding-top: 80px;
  padding-bottom: 50px;
  width: 80%;
  margin: 0 auto;
  position: relative;
}

#projectpage .itemlist{
  display: block;
  box-sizing: border-box;
  padding-bottom: 20px;
  flex-direction: column;
  margin: 0 24px;
  width: 40%;
  height: 100%;
  position: relative;
}

#projectpage .itemblk{
  width: 100%;
  background: #fff;
  transition: 0.6s;
}

#projectpage a:hover{
  display: block;
  opacity: 0.3;
}

#projectpage .itemtitle{
  position: absolute;
  font-size: 1.2rem;
  z-index: 2;
  letter-spacing: 0.1em;
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: left top;
  top: 20px;
  left: 15px;
}

#projectpage .itemphoto{
  display: block;
  width: 100%;
  background-color: #fff;
  text-align: center;
  padding-top: 30px;
  position: relative;
}

#projectpage .itemphoto img{
  max-width: 80%;
  height: 500px;
  object-fit: cover;
}

#projectpage .itemplan{
  position: relative;
  font-size: 1.2rem;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
}

/*----------project_itempage------*/
.itemmain{
  padding: 150px 70px 100px;
  background-color: #D1D5DB;
}

.itemmain .maintitle{
  width: 100%;
  height: 350px;
  position: relative;
}

.itemmain .maintitle h1{
  text-align: center;
  letter-spacing: 0.15em;
  line-height: 1.5em;
}

.itemmain .maintitle h1 span{
  position: relative;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}

.itemmain .maintitle .number::after{
  position: absolute;
  display: inline-block;
  width: 55px;
  height: 1px;
  top: -12px;
  left: 50%;
  transform: translate(-50%);
  background: #595857;
  content: "";
}

.itemmain .maintitle .itemcontents{
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  margin-top: 25px;
  left: 50%;
  transform: translate(-50%);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}

.itemmain .itemlibrary{
  position: relative;
  height: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.itemmain .introduce_box{
  position: relative;
  padding: 10px 3px 70px;
  box-sizing: border-box;
  text-align: center;
  display: block;
  flex-basis: 33.333%;
  height: 650px;
}

.itemmain .introduce_photo{
  position: relative;
  width: 95%;
  height: 95%;
  margin: 0 auto;
}

.itemmain .introduce_photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.itemmain .hover-mask{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  color: #fff;
  padding: 0 40px;
  text-align: left;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  transition: all 1.2s ease;
}

.itemmain .hover-mask span{
  font-size: 1.8rem;
  line-height: 2.5em;
}

.modalbtn{
  background-color: #fff;
  opacity: 0.9;
  font-size: 1.6rem;
}

.introduce_photo:hover .hover-mask{
  opacity: 1;
  padding-top: 120px;
}

.itemmain .introduce_text{
  position: absolute;
  bottom: 74px;
  right: 12px;
  font-size: 1.4rem;
}

.itemmain .introduce_text a{
  transition: 0.5s;
}

.itemmain .introduce_text a:hover{
  opacity: 0.3;
}

.itemmain .btn{
  position: absolute;
  bottom: -50px;
  right: -30px;
  display: inline-block;
  box-sizing: border-box;
  width: 150px;
  height: 10px;
  font-size: 1.4rem;
  transition: 0.5s;
}

.itemmain .btn:hover{
  opacity: 0.3;
}

#hana{
  background: #FCE4EC;
}

#washi{
  background: #EFEBE9;
}

#kyoto{
  background: #0d0015;
  color: #f8fbf8;
}

#kohgei_t{
  background: #cee4ae;
}

#amami{
  background: #432f2f;
  color: #f8fbf8;
}

#kiri{
  background: #c1e4e9;
}

#kyoto .maintitle .number::after,
#amami .maintitle .number::after{
  background: #f8fbf8;
}

#kyoto .detail{
  display: inline-block;
  font-size: 1.2rem;
}

#kyoto .detail a{
  color: #f8fbf8;
  transition: 0.5s;
}

#rewear{
  padding-top: 50px;
  width: 100%;
  height: 950px;
  position: relative;
  padding-bottom: 80px;
}

#rewear h2{
  text-align: center;
  font-size: 1.8rem;
  letter-spacing: 0.5em;
  padding: 10px 0;
}
#rewear .rewear_img{
  position: relative;
  width: 70%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}

#rewear .montuki_baner{
  width: 320px;
  height: auto;
}

#rewear .rewear_photo{
  text-align: center;
  object-fit: cover;
  padding-top: 10px;
  width: 100%;
  height: auto;
}

#rewear .rewear_ex{
  text-align: center;
  padding: 10px;
}

#rewear .go_montuki{
  display: inline-block;
  box-sizing: border-box;
  margin: 0 auto;
  border: solid 0.7px;
  width: 350px;
  height: 32px;
  font-size: 1.5rem;
}

#rewear .go_montuki a{
  color: #f8fbf8;
  transition: 0.5s;
}

#kyoto .detail:hover,
#rewear .go_montuki:hover{
  opacity: 0.3;
}

#rewear .attention{
  font-size: 1.3rem;
  display: inline-block;
  box-sizing: border-box;
  margin: 0 auto;
  width: 100%;
}

#rewear .btn{
  position: absolute;
  bottom: -50px;
  right: -30px;
  display: inline-block;
  box-sizing: border-box;
  width: 180px;
  height: 10px;
  font-size: 1.4rem;
  transition: 0.5s;
}

#amami .btn a,
#rewear .btn a{
  color: #f8fbf8;
}

.black #footerPageTop{
  color: #f8fbf8;
  transition: 0.5s;
}

.black a:hover{
  opacity: 0.3;
}

/*------------タブレット---------*/
@media screen and (max-width: 1024px){
  .tb{
    display: inline;
  }

  .inner{
    width: 100%;
  }

  /*------フッター-------*/
  footer{
    height: 170px;
  }

  footer .contact{
    margin: 0 10px 0;
  }

  footer .footer-nav ul{
    margin: 0 20px 0;
  }

  footer .footer-nav li{
    margin: 7px 0 0 30px;
    font-size: 1.1rem;
  }

  footer .baner img{
    width: 100px;
  }

  footer .copyright{
    font-size: 0.9rem;
  }

  #footerPageTop{
    font-size: 1rem;
  }

  /*-------メインーーー------*/
  #kv .inner{
    position: relative;
  }

  #kv .name{
    top: 400px;
    margin: 0 auto;
    text-align: center;
    font-size: 2.2rem;
  }

  #news{
    height: 400px;
  }

  #news .inner{
    height: 400px;
  }

  #news .inner .title{
    top: 25px;
  }

  #news .news_list{
    top: 40px;
    width: 70%;
    margin: 0 auto;
  }

  #news .news_list{
    padding-top: 50px;
  }

  #news .news_list tr{
    width: 80%;
  }

  #news .news_list .date{
    font-size: 1.3rem;
  }

  #news .news_list .new::before{
    display: none;
  }

  #news .news_list .topic{
    font-size: 1.5rem;
  }

  #news .btn{
    font-size: 1.1rem;
    width: 80px;
    top: 90%;
    left: 90%;
  }

  #story{
    height: 500px;
  }

  #story .inner{
    height: 500px;
  }

  #story .inner .title{
    top: 25px;
  }

  #story .phototheme h2{
    font-size: 1.4rem;
  }

  #story .phototheme p{
    font-size: 1.2rem;
  }

  #story .phototheme span{
    font-size: 1.4rem;
    /* font-weight: bold; */
  }

  #story .btn{
    font-size: 1.0rem;
    width: 50px;
    top: 90%;
    left: 90%;
  }

  #project{
    height: 600px;
  }

  #project .inner{
    height: 600px;
  }

  #project .inner .title{
    top: 25px;
    left: 10%;
  }

  #project .slick_selection{
    top: 20px;
    margin: 20px auto;
  }

  #project .slick_list{
    width: 90%;
  }

  #project  .slick_img{
    margin: 0 5px;
    width: 90%;
    height: 400px;
  }

  #project  .slick_text{
    font-size: 0.5rem;
    letter-spacing: 0.1em;
  }

  #project  .slick_title{
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    margin-top: -8px;
  }

  /*-------newspage-----*/
  #newspage{
    padding-top: 220px;
  }

  #newspage .news_chart .title{
    top: -40px;
    left: 10%;
    font-size: 1.7rem;
    letter-spacing: 0.6em;
  }

  #newspage .news_chart .title::after{
    left: 85px;
  }

  #newspage .news_list{
    padding-left: 30%;
  }

  #newspage .news_list tr{
    width: 80%;
    height: 70px;
  }

  #newspage .news_list .date{
    width: 80px;
  }

  #newspage .news_list .new::before{
    display: none;
  }

  #newspage .news_list .topic{
    font-size: 1.4rem;
  }

  /*----------newslist-page-----*/
  .news_detail .maintitle h1{
    font-size: 2.5rem;
  }

  .news_detail .maintitle h1 span{
    font-size: 1.4rem;
  }

  .news_flex .photo{
    padding-left: 5%;
  }

  .news_flex .text .sentence{
    font-size: 1.3rem;
  }

  .news_detail .opentime{
    padding-top: 40px;
    font-size: 1.2rem;
  }

  .news_ex .btn{
    bottom: 20px;
    right: 15px;
    width: 130px;
    height: 10px;
    font-size: 1.2rem;
  }

  /*-------storypage-----*/
  #storypage{
    padding-top: 220px;
  }

  #storypage .concept .title{
    top: -40px;
    left: 10%;
    font-size: 1.7rem;
    letter-spacing: 0.6em;
  }

  #storypage .concept .title::after{
    left: 85px;
  }

  #storypage .projectname h1{
    font-size: 2rem;
    margin-top: 20px;
    margin-left: 100px;
  }

  #storypage .projectname .logos{
    max-width: 22px;
    max-height: auto;
    vertical-align: -6px;
    margin: 3px 10px;
  }

  #storypage .projectname p{
    font-size: 1.3rem;
    margin-left: 100px;
  }

  #storypage .target .inner .title{
   font-size: 1.3rem;
   letter-spacing: 0.1em;
  }

  #storypage .target .inner .title::after{
    left: 260px;
  }

  #storypage .target h2{
    font-size: 1.2rem;
    line-height: 7em;
    width: 90px;
    height: 90px;
  }

  #storypage .target h2::after{
    width: 30px;
    height: 2px;
    top: 60%;
    left: 30px;
  }

  #storypage .target .subtitle{
    top: 65px;
    font-size: 0.1rem;
    line-height: 4em;
    width: 90px;
  }

  #storypage .vision .photo img{
    margin-left: 50px;
    width: 80%;
    height: 80%;
    object-fit: cover;
  }

  #storypage .vision .text::after{
    bottom: 30px;
  }

  #storypage .vision .text h2{
    padding-left: 50px;
    font-size: 1.5rem;
  }

  #storypage .vision .text .subtitle{
    font-size: 1.1rem;
  }

  #storypage .vision .text .description{
    font-size: 1.1rem;
    line-height: 2.4em;
    margin-top: 15px;
    margin-left: 50px;
  }

    /*-------projectpage-------*/

  #projectpage .title{
    top: 40px;
    left: 8%;
    font-size: 1.7rem;
    letter-spacing: 0.6em;
  }

  #projectpage .itemgroup{
    width: 90%;
  }

  #projectpage .itemtitle{
    font-size: 1.1rem;
    left: 20px;
  }

  #projectpage .itemplan{
    font-size: 1.1rem;
  }

  /*-------itemページー-------*/
  .itemmain .maintitle{
    height: 320px;
  }

  .itemmain .maintitle h1{
    font-size: 2.5rem;
  }

  .itemmain .maintitle h1 span{
    font-size: 1.4rem;
  }

  .itemmain .maintitle .itemcontents{
    font-size: 1.3rem;
    left: 20%;
    transform: translate(0%);
  }

  .itemmain .introduce_box{
    padding: 10px 3px 55px;
    flex-basis: 50%;
    height: 600px;
  }

  .itemmain .hover-mask{
    font-size: 1rem;
  }

  .itemmain .hover-mask span{
    font-size: 1.6rem;
  }

  .itemmain .introduce_text{
    bottom: 60px;
    font-size: 1.3rem;
  }

  .itemmain .btn{
    width: 130px;
    height: 10px;
    font-size: 1.2rem;
  }

  #rewear{
    padding: 50px 0;
    height: 680px;
  }

  #rewear h2{
    font-size: 1.7rem;
  }

  #rewear .montuki_baner{
    width: 220px;
  }

  #rewear .rewear_ex{
    font-size: 1.3rem;
  }

  #rewear .go_montuki{
    width: 260px;
    height: 30px;
    font-size: 1.4rem;
  }

  #rewear .attention{
    margin-top: 5px;
    font-size: 1.2rem;
    width: 100%;
    line-height: 1.5em;
  }

  #rewear .btn{
    width: 150px;
    height: 10px;
    font-size: 1.1rem;
    right: -30px;
  }

}/*タブレット閉じカッコ

/*------------スマホ---------*/
@media screen and (max-width: 599px){
  .sp{
    display: inline;
  }

  .inner{
    width: 100%;
  }

    /*-------ヘッダー-------*/
  .gnav .innerbox{
    position: relative;
    padding-top: 150px;
    display: block;
  }

  .box-a{
    position: absolute;
    width: 100%;
    left: 30%;
  }

  .box-b{
    display: none;
  }

    /*------フッター-------*/
    footer{
      height: 180px;
    }

    footer .inner{
      display: block;
      display: flex;
      justify-content: space-between;
    }

    footer .contact{
      padding: 0;
      margin: 0 0 30px;
    }

    footer .contact ul{
      margin: 0;
      width: 70%;
      padding-left: 15px;
    }

    footer .contact li{
      margin: 8px;
    }

    footer .footer-nav ul{
      width: 90%;
      margin: 0 auto;
    }

    footer .footer-nav li{
      margin: 8px;
    }

    footer span{
      display: none;
    }

    footer .baner{
      top: -40px;
    }

    footer .baner img{
      width: 90px;
      padding: 0 25px;
    }

    footer .brand{
      margin: -30px 0 10px;
    }

    #footerPageTop{
      position: absolute;
      top: -25px;
      left: 5px;
      font-size: 1.5rem;
    }

    /*-------メインーーー------*/
   .wrap{
     height: 800px;
   }

   .main-photo{
     height: 800px;
   }

    #kv{
      height: 800px;
    }

    #kv .inner{
      height: 800px;
      position: relative;
    }

    #kv .name{
      top: 350px;
      margin: 0 auto;
      text-align: center;
      font-size: 2.2rem;
    }

    #kv .underarrow{
      bottom: 40px;
      right: 5%;
      font-size: 2rem;
      display: none;
    }

    #news .news_list{
      position: relative;
      top: 60px;
      width: 75%;
      margin: 0 auto;
      padding-top: 50px;
    }

    #news .news_list tr{
      position: relative;
      width: 95%;
      height: 45px;
    }

    #news .news_list .date{
      width: 70px;
      font-size: 1.2rem;
    }

    #news .news_list .topic{
      font-size: 1.3rem;
    }

    #news .btn{
      font-size: 0.6rem;
      width: 60px;
      top: 90%;
      left: 80%;
    }

    #story{
      height: 600px;
    }

    #story .inner{
      height: 600px;
    }

    #story .inner .title{
      display: inline-block;
      box-sizing: border-box;
      top: 15px;
      left: 5%;
    }

    #story .phototheme{
      flex-wrap: wrap;
      height: 350px;
      text-align: center;
    }

    #story .phototheme .text{
      width: 100%;
      text-align: center;
      height: 100px;
    }

    #story .phototheme .photo{
      width: 100%;
      text-align: center;
      margin: 0 auto;
    }

    #story .phototheme h2{
      font-size: 1.3rem;
      top: 10px;
      left: 20px;
      line-height: 1.5em;
    }

    #story .phototheme p{
      font-size: 1.1rem;
      text-align: left;
      top: 60px;
      right: 20px;
      line-height: 1.5em;
    }

    #story .phototheme span{
      font-size: 1.3rem;
    }

    #story .btn{
      font-size: 0.6rem;
      width: 35px;
      top: 90%;
      left: 85%;
    }

    #project{
      height: 450px;
    }

    #project .inner{
      height: 450px;
    }

    #project .inner .title{
      top: 15px;
      left: 5%;
    }

    #project .slick_selection{
      top: 10px;
      margin: 20px auto;
    }

    #project .slick_list{
      width: 95%;
    }

    #project  .slick_img{
      margin: 0 5px;
      height: 280px;
    }

    #project  .slick_text{
      font-size: 0.5rem;
      letter-spacing: 0.1em;
    }

    #project  .slick_title{
      font-size: 1.1rem;
      letter-spacing: 0.1em;
      margin-top: -8px;
    }

    /*-------newspage-----*/
    #newspage{
      padding-top: 220px;
    }

    #newspage .news_chart .inner{
      padding: 20px 5px;
      background: linear-gradient(90deg, #dcdddd 0%, #dcdddd 10%, #fff 10%, #fff 100%);
    }

    #newspage .news_chart .title{
      top: -40px;
      left: 8%;
      font-size: 1.6rem;
      letter-spacing: 0.5em;
    }

    #newspage .news_chart .title::after{
      left: 80px;
      background: #A1A1AA;
      content: "";
    }

    #newspage .news_list{
      padding-left: 15%;
    }

    #newspage .news_list tr{
      width: 80%;
    }

    #newspage .news_list .date{
      width: 60px;
      font-size: 1.2rem;
    }

    #newspage .news_list .topic{
      font-size: 1.3rem;
    }

    /*----------newslist-page-----*/
    .news_detail .maintitle{
      height: 120px;
    }

    .news_detail .maintitle h1{
      font-size: 2rem;
    }

    .news_detail .maintitle h1 span{
      font-size: 1.2rem;
    }

    .news_detail .news_ex{
      height: auto;
    }

    .news_flex{
      flex-wrap: wrap;
    }

    .news_flex .photo{
      width: 100%;
      padding-top: 30px;
      padding-left: 0;
      text-align: center;
    }

    .news_flex .photo img{
      width: 60%;
      height: auto;
    }

    .news_flex .text{
      width: 75%;
      padding-top: 30px;
    }

    .news_flex .text .sentence{
      font-size: 1.3rem;
      line-height: 2em;
    }

    .news_flex .text .sentence img{
      width: 60%;
      height: auto;
    }

    .news_detail .opentime{
      padding-top: 40px;
      font-size: 1.2rem;
    }

    .news_ex .btn{
      right: 10px;
      bottom: 20px;
      width: auto;
    }

    /*-------storypage------*/
    #storypage .concept{
      height: 700px;
    }

    #storypage .concept .inner{
      height: 700px;
      padding: 20px 5px;
      background: linear-gradient(90deg, #fff 0%, #fff 10%, #e8ecef 10%, #e8ecef 100%);
    }

    #storypage .concept .title{
      top: -40px;
      left: 8%;
      font-size: 1.6rem;
      letter-spacing: 0.5em;
    }

    #storypage .concept .title::after{
      left: 80px;
      background: #A1A1AA;
      content: "";
    }

    #storypage .logol{
      left: -5%;
      height: 345px;
      width: auto;
    }

    #storypage .projectname{
      margin: 5px 0;
      top: 0;
      left: 0;
      z-index: 2;
    }

    #storypage .projectname h1{
      font-size: 1.4rem;
      margin-left: 0;
    }

    #storypage .projectname .logos{
      max-width: 20px;
      max-height: auto;
      vertical-align: -6px;
      margin: 3px 10px;
    }

    #storypage .projectname p{
      font-size: 1.2rem;
      letter-spacing: 0.1em;
      margin-top: 30px;
      margin-left: 0;
    }

    #storypage .target{
      height: 280px;
      padding-top: 10px;
    }

    #storypage .target .inner{
      left: 20%;
      padding: 20px 0;
      flex-wrap: wrap;
    }

    #storypage .target .inner .title{
     top: 0;
     left: -30px;
     font-size: 1.2rem;
    }
    #storypage .target .inner .title::after{
      width: 50px;
      height: 1px;
      left: 240px;
    }

    #storypage .target .content{
      padding-top: 0;
      width: 85px;
      height: 85px;
      margin: 12px;
    }

    #storypage .target .subtitle{
      font-size: 1rem;
      left: -18px;
    }

    #storypage .target h2{
      font-size: 1.2rem;
      line-height: 7em;
      width: 85px;
      height: 85px;
    }

    #storypage .target h2::after{
      width: 15px;
      left: 32px;
    }

    #storypage .target .subtitle{
      top: 50px;
      font-size: 0.1rem;
      letter-spacing: 0;
      width: 100px;
      left: -9px;
    }

    #storypage .vision .setcolor{
      height: 50px;
      background: linear-gradient(90deg, #fff 0%, #fff 10%, #e8ecef 10%, #e8ecef 100%);
    }

    #storypage .vision{
      background: linear-gradient(90deg, #e8ecef 0%, #e8ecef 10%, #fff 10%, #fff 100%);
      height: 1200px;
    }

    #storypage .vision .inner{
      padding-top: 50px;
      height: 1200px;
    }

    #storypage .vision .grid-box{
      height: 1000px;
      display: grid;
      grid-template-columns: 100%;
      grid-template-rows: 16.6666% 16.6666% 16.6666% 16.6666% 16.6666% 16.6666%;
      padding-bottom: 100px;
    }

    #storypage .vision .title{
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 1;
      grid-row-end: 4;
      position: relative;
    }

    #storypage .vision .fadephoto-a{
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 1;
      grid-row-end: 2;
    }

    #storypage .vision .fadephoto-b{
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 3;
      grid-row-end: 4;
    }

    #storypage .vision .fadephoto-c{
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 5;
      grid-row-end: 6;
    }

    #storypage .vision .photo img{
      margin-left: 80px;
      width: 220px;
      height: 150px;
      object-fit: cover;
    }

    #storypage .vision .text-a{
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 2;
      grid-row-end: 3;
      position: relative;
    }

    #storypage .vision .text-b{
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 4;
      grid-row-end: 5;
      position: relative;
    }

    #storypage .vision .text-c{
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 6;
      grid-row-end: 7;
      position: relative;
    }

    #storypage .vision .text::after{
      bottom: 15px;
      left: 15%;
    }

    #storypage .vision .text h2{
      padding-left: 70px;
      font-size: 1.5rem;
    }

    #storypage .vision .text .subtitle{
      font-size: 1rem;
      letter-spacing: 0.4em
      top: -30px;
      left: 12px;
      color: #fff;
    }

    #storypage .vision .text .subtitle::after{
      display: none;
    }

    #storypage .vision .text .description{
      position: absolute;
      font-size: 1.1rem;
      line-height: 1.4em;
      margin-top: 5px;
      margin-left: 70px;
    }

    /*-------projectpage------*/
    #projectpage .title{
      top: 40px;
      left: 3%;
      font-size: 1.6rem;
      letter-spacing: 0.3em;
    }

    #projectpage .title::after{
      right: -60%;
    }

    #projectpage .itemlist{
      flex-basis: 100%;
      padding-top: 20px;
    }

    #projectpage .itemphoto{
      display: block;
      width: 100%;
      padding: 0;
      margin: 0 auto;
    }

    #projectpage .itemphoto img{
      width: 100%;
    }

    #projectpage .itemtitle{
      font-size: 1rem;
      top: 20px;
      left: -20px;
    }

    #projectpage .itemplan{
      display: none;
    }

    /*-------itemページー-------*/
    .itemmain{
      padding: 150px 15px 100px;
    }

    .itemmain .maintitle{
      height: 320px;
    }

    .itemmain .maintitle h1{
      font-size: 2rem;
    }

    .itemmain .maintitle h1 span{
      font-size: 1.2rem;
    }

    .itemmain .maintitle .days::after{
      top: -10px;
    }

    .itemmain .maintitle .itemcontents{
      margin-top: 20px;
      left: 5%;
      transform: translate(0%);
      font-size: 1.2rem;
      letter-spacing: 0.05em;
    }

    .itemmain .introduce_box{
      padding: 10px 5px 45px;
      flex-basis: 100%;
      height: 550px;
    }

    .itemmain .hover-mask{
      font-size: 1rem;
    }

    .itemmain .hover-mask span{
      font-size: 1.5rem;
    }

    .itemmain .introduce_text{
      bottom: 53px;
      font-size: 1.2rem;
      overflow-x: auto;
	　　 -webkit-overflow-scrolling: touch;
    }

    .itemmain .introduce_text::-webkit-scrollbar{
      display:none;
    }

    .itemmain .btn{
      right: 5px;
      bottom: 20px;
      width: auto;
    }

    #kyoto .detail{
      display: inline-block;
      font-size: 1rem;
    }

    #rewear{
      padding: 50px 0;
      height: 500px;
    }

    #rewear h2{
      font-size: 1.4rem;
    }

    #rewear .montuki_baner{
      width: 170px;
    }

    #rewear .rewear_ex{
      font-size: 1.2rem;
    }

    #rewear .attention{
      font-size: 1.1rem;
      width: 100%;
    }

    #rewear .go_montuki{
      width: 260px;
      height: 30px;
      font-size: 1.4rem;
    }

    #rewear .attention{
      font-size: 1.2rem;
    }


    #rewear .btn{
      bottom: -40px;
      right: 5px;
      width: auto;
    }

}/*スマホ閉じカッコ