.slideBox {
  aspect-ratio: 14 / 6;
  position: relative;
}

/* imgのみ */
.item1 {
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 18s 0s infinite;
  animation: anime 18s 0s infinite;
}

.item1:nth-of-type(2) {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

.item1:nth-of-type(3) {
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
}

/* ふわっとアニメーション */
@keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

.pan-h{
  font-size: 4rem;
  text-align: center;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1.5em;
}






/*=======================================================
==========================================================
　　　　　　　　　　　　　PC start
==========================================================
========================================================*/
@media screen and (min-width:768px) {
.gray-back{
  background-color: #f4f4f4;
}

.philosophy{
  padding:100px 0;
  margin:0 auto;
  overflow-x: hidden;
}
.philosophy p{
  line-height: 270%;
  margin:0;
  font-size:1.1vw;
}
.philosophy h2{
  font-size:3vw;
  margin:0 0 0 1.5em;
}
.philosophy h2 span{
  margin-left: 0!important;
  margin-top: 2em!important;
  font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
}
.news-box{
padding:90px 0;
}
.news-box-s{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}
.news-ul{
  width:75%;
}
.news-ul li{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: 100%;
  margin:2em 0;
}
.news-ul li p:nth-child(1){
  font-family: "myriad-pro", sans-serif;
  font-size: 3rem;
  line-height: 3rem;
  min-width: 183px;
  margin:0;
  padding-right: .8em;
  position:relative;
  width: 22%;
}
.news-ul li p:nth-child(1)::after{
  position:absolute;
  top:0;
  right:0;
  background-color: #4c4c4c;
  width:4px;
  height:3rem;
  content:"";
}
.news-ul li p:nth-child(2){
  font-size: 1.5rem;
  line-height: 3rem;
  padding: 0 0 0 2em;
  margin: 0;
  width: 77%;
}
.allview-box{
  width:20%;
}
a.allview{
  font-family: "myriad-pro", sans-serif;
  font-size: 3rem;
  padding-left: .5em;
  padding-right: .5em;
  padding-bottom:.6em;
  margin: 83px 10px 0;
  position:relative;
}
a.allview:after{
  position:absolute;
  content:"";
  bottom:0;
  right:0;
  width:100%;
  height: 3px;
  background-color: #4c4c4c;
}

.prof-box{
  padding: 90px 0;
}
ul.pro-box-imgbox{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul.pro-box-imgbox li:nth-child(1){
  width:20%;
  padding-top:20%;
  background: linear-gradient(90deg, #e8e6e7 0%, #e8e6e7 55%, #fff 55%, #fff 100%);
}
ul.pro-box-imgbox li:nth-child(2){
  width:77%;
}
ul.pro-box-imgbox li:nth-child(3){
  width:100%;
}
ul.pro-box-imgbox li:nth-child(3) p{
  line-height: 2.4em;
  padding:2em 0 0;
}

.media-box{
padding:90px 0;
}
.media-box-s{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.media-imgbox{
  display:flex;
  align-items: center;
  width:100%;
  height:250px;
  object-fit: cover;
  background-color: #fff;
  border:1px solid #9e9e9e;
}
.media-imgbox img{
  width:85%;
  margin:0 auto;
    max-height: 90%;
  object-fit: contain;
}
.media-box ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width:100%;
}
.media-box ul li{
  width:31%;
}
.media-date{
  font-family: "myriad-pro",'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
  font-size: 2rem;
  margin:.5em 0 0;
  line-height: 1.7em;
  font-weight: bold;
}
.mecia-p{
  margin:.4em 0;
  line-height: 1.7em;
}
.media-allview{
  width:fit-content;
  margin:20px 0 0 auto;
}


/*note*/
#message {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
#message p img {
display: none;
}
#message p{
display: none;
}
#message a.btn {
display: block;
position: absolute;
top:0;
left:0;
right:0;
bottom: 0
}
#message .mu {
width: 31%;
position: relative;
}
#message .mu img {
  display:flex;
  align-items: center;
  width:100%;
  height:250px;
  object-fit: contain;
  background-color: #fff;
  border:1px solid #9e9e9e;
}
#message .mu h3 {
  color: #4c4c4c;
  line-height: 2em;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  font-weight: 500;
}
#message .mu small {
display: block;
font-family: "myriad-pro", sans-serif;
font-size: 2rem;
margin: 0.5em 0 0;
line-height: 2em;
}
.mu:last-child{
  display:none;
}
.mu a{
  display:none;
}
.mu h2{
  display:none;
}

.prof-box table{
  font-size:1.4rem;
  border-top:1px dotted #ddd;
  margin: 3em 0 2em;
}
.prof-box th{
  border-bottom: 1px dotted #ddd;
  min-width: 70px;
  vertical-align: top;
  padding: 10px 0 10px 3em;
  width: 200px;
  font-size: 1.5rem;
}
.prof-box td{
  border-bottom:1px dotted #ddd;
  padding:10px 0;
}

h2.prof-h2{
  font-size: 2.7em;
  padding: 1rem 2rem;
  background-image: -webkit-linear-gradient(left, #fff 0%, #e8e6e7 100%);
  background-image: linear-gradient(to right, #fff 0%, #e8e6e7 100%);
  border-top: 1px solid #e8e6e7;
  border-bottom: 1px solid #e8e6e7;
  font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
  margin: 1em 0 0;
  padding-left: 20px;
}
ul.list-maru {
    list-style: disc;
    font-size: 1.4rem;
    padding: 10px 30px;
}
ul.list-maru li {
    padding: 0.5em 0;
}
.media-gray-back{
  margin: 0 0 11rem;
}


.main-shop{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 10rem 0;
  align-items: center;
}
.main-shop img{
  width:47%;
}
.main-shop_p{
  width:45%;
}
.wrap-shop{
  width:90%;
  margin:0 auto;
}
.main-shop_p h3{
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.7em;
}
.main-shop_p p{
  line-height: 2em;
  font-size: 1.6rem;
  margin: 1.5em 0px;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.keireki-ul li p{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
}
.keireki-ul li span{
  display: block;
}

















}/*=======================================================
==========================================================
　　　　　　　　　　　　　PC end
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
　　　　　　　　　　　　　SPstart
==========================================================
========================================================*/
@media screen and (max-width:768px) {
.gray-back{
  background-color: #f4f4f4;
}
.philosophy{
  padding:50px 0;
  margin:0 auto;
  overflow-x: hidden;
}
.philosophy p{
  line-height: 2em;
  margin: 0;
  font-size: 1.4rem;
}
.philosophy h2{
  font-size: 3rem;
  margin:0 0 .5em 0;
}

.news-box{
padding:50px 0;
}
.news-box-s{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.news-ul{
  width:100%;
}
.news-ul li{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: fit-content;
  margin:2em 0;
}
.news-ul li p:nth-child(1){
  font-family: "myriad-pro", sans-serif;
  font-size: 1.5rem;
  line-height: 2.3rem;
  margin: 0;
  padding-right: 0.8em;
  position: relative;
}
.news-ul li p:nth-child(1)::after{
  position:absolute;
  top:0;
  right:0;
  background-color: #4c4c4c;
  width:2px;
  height:2.3rem;
  content:"";
}
.news-ul li p:nth-child(2){
  font-size: 1.4rem;
  line-height: 2.3rem;
  margin:0 0 0 1em;
}
.allview-box{
  width:100%;
}
a.allview{
  font-family: "myriad-pro", sans-serif;
  font-size: 2.3rem;
  padding-left: .3em;
  padding-right: .3em;
  padding-bottom:.3em;
  margin:0 0 0 auto;
  position:relative;
  display: block;
  width: fit-content;
}
a.allview:after{
  position:absolute;
  content:"";
  bottom:0;
  right:0;
  width:100%;
  height: 2px;
  background-color: #4c4c4c;
}

.prof-box{
  padding: 50px 0;
}
ul.pro-box-imgbox{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
}
ul.pro-box-imgbox li:nth-child(1){
  display: none
}
ul.pro-box-imgbox li:nth-child(2){
  width:100%;
}
ul.pro-box-imgbox li:nth-child(3){
  width:100%;
}
ul.pro-box-imgbox li:nth-child(3) p{
  line-height: 2.4em;
  padding:.5em 0 0;
}
ul.pro-box-imgbox li:nth-child(4){
  display: flex;
  align-items: center;
}
.media-box{
padding:50px 0;
}
.media-box-s{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.media-imgbox{
  display:flex;
  align-items: center;
  width:100%;
  height:220px;
  object-fit: cover;
  background-color: #fff;
  border:1px solid #9e9e9e;
}
.media-imgbox img{
  width:85%;
  margin:0 auto;
    max-height: 90%;
  object-fit: contain;
}
.media-box ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width:100%;
}
.media-box ul li{
  width:47%;
  margin-bottom: 2em;
}
.media-box2 ul li {
    width: 100%;
    margin-bottom: 3em;
}
.media-date{
  font-family: "myriad-pro",'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
  font-size: 1.7rem;
  margin:.5em 0 0;
  font-weight: bold;
}
.mecia-p{
  margin:.4em 0;
  line-height: 1.7em;
}
.media-allview{
  width:fit-content;
  margin:-1.5em 0 0 auto;
}


/*note*/
#message {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row;
}
#message p img {
display: none;
}
#message p{
display: none;
}
#message a.btn {
display: block;
position: absolute;
top:0;
left:0;
right:0;
bottom: 0
}
#message .mu {
width: 47%;
position: relative
}
#message .mu img {
  display: flex;
  align-items: center;
  width: 100%;
  height: 120px;
  object-fit: contain;
  background-color: #fff;
  border: 1px solid #9e9e9e;
}
#message .mu h3 {
  color: #4c4c4c;
  line-height: 2em;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  font-weight: 500;
}
#message .mu small {
display: block;
font-family: "myriad-pro", sans-serif;
font-size: 2rem;
margin: 0.5em 0 0;
line-height: 2em;
}
.mu a{
  display:none;
}
.mu h2{
  display:none;
}


.prof-box table{
  font-size:1.4rem;
  border-top:1px dotted #ddd;
  margin:2em 0;
}
.prof-box th{
  border-bottom:1px dotted #ddd;
  min-width:70px;
  vertical-align: top;
  padding:10px 0;
}
.prof-box td{
  border-bottom:1px dotted #ddd;
  padding:10px 0;
}

h2.prof-h2 {
  font-size:2.7em;
  padding: 1rem 2rem;
  background-image: -webkit-linear-gradient(left, #fff 0%, #e8e6e7 100%);
  background-image: linear-gradient(to right, #fff 0%, #e8e6e7 100%);
  border-top: 1px solid #e8e6e7;
  border-bottom: 1px solid #e8e6e7;
  font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
  margin:0 0;
  padding-left: 20px;
}
ul.list-maru{
  list-style: disc;
  font-size: 1.4rem;
  padding: 5px 6px 5px 20px;
}
ul.list-maru li{
  padding:.5em 0;
}

.media-gray-back{
  margin: 0 0 6rem;
}


.main-shop{
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  margin: 3rem 0 7rem;
  align-items: center;
}
.main-shop img{
  width:100%;
}
.main-shop_p{
  width:100%;
}
.wrap-shop{
  width:90%;
  margin:0 auto;
}
.main-shop_p h3{
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.7em;
}
.main-shop_p p{
  line-height: 2em;
  font-size: 1.6rem;
  margin: 1.5em 0px;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.keireki-ul li p{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
}
.keireki-ul li span{
  display: block;
}

.slideBox {
  aspect-ratio: 10 / 18;
  position: relative;
}

.pan-h{
  font-size: 3.5rem;
  text-align: center;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1.7em;
  margin: 1.5em 0 1em;
}


}/*=======================================================
==========================================================
　　　　　　　　　　　　　SP end
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
  　　　　　　　　　　　　IPAD start
========================================================
========================================================*/
@media screen and (min-width:768px) and ( max-width:1190px) {
.media-imgbox {
    height: 170px;
}
.media-imgbox img{
    max-height: 90%;
  object-fit: contain;
}
#message .mu img {
  height: 170px;
}

.pan-h{
  font-size: 3rem;
  text-align: center;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1.5em;
}







}/*=======================================================
==========================================================
　　　　　　　　　　　　　IPAD SPend
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
　　　　　　　　　　　　　共通コード
==========================================================
========================================================*/



/*=======================================================
==========================================================
　　　　　　　　　　　　　共通end
==========================================================
========================================================*/