@charset "utf-8";
/* CSS Document */

html{
  scroll-behavior: smooth;
}

.sp-only{
  display: none;
}
  .sp-br{
    display: none;
  }

  .body-active{
    overflow: hidden;
  }

  .loading-logo{
    display: block;
    width: 50%;
    margin: 0 auto;
  }
  .loading-logo-text{
    display: block;
    width: 50%;
    margin: 50px auto;
  }
  .loading-text p{
    font-size: 18px;
    line-height: 1.5;
    font-weight: normal;
    color: #383838;
  }




/* ======================================
ハンバーガーメニュー
======================================*/

/* overlay-styles.css */
.hamburger-overlay {
  border: none;
  background: transparent;
  cursor: pointer;
}

.hamburger-overlay__line {
  position: absolute;
  left: 11px;
  width: 26px;
  height: 2px;
  background-color: #333;
  transition: all .6s;
}

.hamburger-overlay__line:nth-of-type(1) { top: 14px; }
.hamburger-overlay__line:nth-of-type(2) { top: 23px; }
.hamburger-overlay__line:nth-of-type(3) { top: 32px; }

.hamburger-overlay.active .hamburger-overlay__line {
  background-color: #fff;
}

.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(2) {
  opacity: 0;
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
}

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(#ffbbd1, #ffc5ad);
  visibility: hidden;
  opacity: 0;
  transition: all .6s;
  z-index: 900;
}

.nav-overlay.active {
  visibility: visible;
  opacity: 1;
}

.nav-overlay__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: fit-content;
  display: flex;
  text-align: center;
  align-items: center;
}
.nav-overlay__content-logo-box a{
  display: block;
}
.nav-overlay__content-sns-icon{
  display: flex;
  justify-content: space-around;
}
.nav-rakuten-btn{
  margin: 100px 0;
}
.nav-overlay__content-sns-icon a p{
  font-weight: bold;
  padding-top: 10px;
}
.nav-overlay__content-logo-box{
  padding-right: 55px;
}

.nav-overlay__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-overlay__item {
  opacity: 0;
  transform: translateY(20px);
  transition: all .6s;
}

.nav-overlay.active .nav-overlay__item {
  opacity: 1;
  transform: translateY(0);
}

.nav-overlay.active .nav-overlay__item:nth-child(1) { transition-delay: 0.1s; }
.nav-overlay.active .nav-overlay__item:nth-child(2) { transition-delay: 0.2s; }
.nav-overlay.active .nav-overlay__item:nth-child(3) { transition-delay: 0.3s; }
.nav-overlay.active .nav-overlay__item:nth-child(4) { transition-delay: 0.4s; }
.nav-overlay.active .nav-overlay__item:nth-child(5) { transition-delay: 0.5s; }
.nav-overlay.active .nav-overlay__item:nth-child(6) { transition-delay: 0.6s; }
.nav-overlay.active .nav-overlay__item:nth-child(7) { transition-delay: 0.7s; }
.nav-overlay.active .nav-overlay__item:nth-child(8) { transition-delay: 0.8s; }
.nav-overlay.active .nav-overlay__item:nth-child(9) { transition-delay: 0.9s; }

.nav-overlay__link {
  display: inline-block;
  padding: 20px;
  color: #383838;
  font-size: 20px;
  text-decoration: none;
  transition: color .3s;
}

.hamburger-overlay-close{
	display: none;
}

.active .hamburger-overlay-close{
	display: block;
	color: #fff;
}

.active .hamburger-overlay-open{
	display: none;
}




/* ======================================
リセットCSS
======================================*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
}
ins {
    background-color:#fff;
    color:#000;
    text-decoration:none;
}
mark {
    background-color:#fff;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}
p{
  color: #383838;
}


/* ======================================
ローディング画面
======================================*/
.loading {
  /*ローディング画面の縦横幅を画面いっぱいになるように指定*/
  width: 100vw;
  height: 100vh;
  /*ローディング画面の表示位置を固定*/
  position: fixed;
  top: 0;
  left: 0;
  background: linear-gradient(#ffbbd1, #ffc5ad);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /*ローディング画面を0.5秒かけて非表示にする*/
  transition: all 0.5s linear;
	z-index: 999;
}

/*ローディング画面を非表示にする*/
.loading.loaded {
  /*0.5秒かけてopacityを0にする*/
  opacity: 0;
  visibility: hidden;
}

.loading-text {
  color: #FFF;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 30px;
  text-align: center;
}


.content {
  width: 100%;
  height: 100vh;
}

.content-text {
  color:#333;
}
	
.frog{
    transform-origin: center bottom;
    animation: yurayura 2s linear infinite;
}

@keyframes yurayura {
  0% , 100%{
      transform: rotate(10deg);
  }
  50%{
      transform: rotate(-10deg);
  }
}
	
.loading-text {
  animation: loading 1.5s;
}
@keyframes loading {
  0% {opacity: 0;}
  100% {opacity: 1;}
}





.first-view-contents_section{
	 background: linear-gradient(#ffbbd1, #ffc5ad);
   padding: 150px 0 0;
   height: 920px;
   position: relative;
   width: 100%;
}
#shiback-header{
	position: fixed;
	display: flex;
	justify-content: space-between;
	width: 100%;
	z-index: 999;
  padding-left: 90px;
  padding-top: 20px;
}
.header-menu_box{
	display: flex;
}
.header-menu_box .online-btnbox a{
    display: block;
    background: #ff7571;
    color: #fff;
    border-radius: 50px;
    padding: 10px 10px 11px;
    width: 100%;
    text-align: center;
    font-weight: bold;
}
.hamburger-overlay{
    display: block;
    background: #ff7571;
    color: #fff;
    width: 100%;
    padding: 3px 32px 0px;
    border-radius: 50px;
    font-size: 16px;
    height: 42px;
}
.hamburger-overlay-open{
  color: #fff!important;
  font-weight: bold;
}
.hamburger-overlay-open img{
    vertical-align: middle;
    display: inline-block;
    width: 15px;
    padding-right: 8px; 
}

.online-btnbox{
  margin-right: 40px;
}
.first-view-contents_textbox h1{
  font-size: 42px;
  color: #383838;
  line-height: 1.5;
  padding-bottom: 30px;
  padding-left: 90px;
}
.menu-btnbox{
  margin-right: 180px;
}
.position-img01{
  position: absolute;
  top: 130px;
  right: 115px;
}
.position-img02{
  position: absolute;
  right: 32%;
  top: 27%;
}
.first-view-contents_textbox p{
  font-size: 20px;
  line-height: 1.5;
  padding-left: 90px;
}
.first-view-contents_textbox img{
  display: block;
  margin-top: 120px;
  margin-left: 135px;
}



/*スクロールフェードインのCSS*/
.effect-fade {
    opacity: 0;
    transition: all 3000ms;
}
.effect-scroll {
    opacity: 1;
}

/*スクロールフェードインのCSS*/
.effect-fade02 {
    opacity: 0;
    transition: all 4000ms;
}
.effect-scroll {
    opacity: 1;
}

/*スクロールフェードインのCSS*/
.effect-fade03 {
    opacity: 0;
    transition: all 3000ms;
}
.effect-scroll03 {
    opacity: 1;
    animation-name: img-loading03; 
    animation-duration: 3s;
}


.myClass {
 animation-name: img-loading03;  
 animation-duration: 3s;
 opacity: 1;
}
@keyframes img-loading03 {
  0%{
    opacity: 0;
    transform: scale(0.8);
  }
  50%{
    transform: scale(1.1);
  }
  100%{
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes img-scale{
  0%{
    transform: scale(0.5);
  }
  50%{
    transform: scale(1);
  }
  100%{
    transform: scale(1.5);
  }
  50%{
    transform: scale(1);
  }
  0%{
    transform: scale(0.5);
  }
}








/*スクロール時に要素が後から表示されるCSS*/
	
	.sa--up {
  		transform: translate(0, 80px);
	}
	
	.sa {
  		opacity: 0;
  		transition: all 2s ease;
	}
	
	.sa.show {
  		opacity: 1;
  		transform: none;
	}




/*
.position-img01{
  opacity: 0;
}
.myClass {
  opacity: 1!important;  表示状態 
}*/



.position-img01{
  opacity: 0;
}
.myClass {
 animation-name: img-loading;  
 animation-duration: 3s;
 opacity: 1;
}
@keyframes img-loading {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.position-img02{
  opacity: 0;
}
.myClass {
 animation-name: img-loading;  
 animation-duration: 3s;
 opacity: 1;
}
@keyframes img-loading {
  0%{
    opacity: 0;
    transform: scale(0.8);
  }
  50%{
    transform: scale(1.05);
  }
  100%{
    opacity: 1;
    transform: scale(1);
  }
}


#shiback-consept-contents_section{
  background: #fff2d7;
  position: relative;
  padding-top: 40px;
  padding-bottom: 100px;
  margin-top: -30px;
}
.img-title{
  display: block;
  width: fit-content;
  margin: 0 auto;
}
.shiback-consept_box h3{
  text-align: center;
  font-size: 25px;
  color: #383838;
  padding: 55px 0 45px;
}
.shiback-consept_box p{
  font-size: 18px;
  line-height: 2.2;
  text-align: center;
}
.shiback-section-title{
  padding-top: 75px;
}
.shiback-color-img{
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 60px 0;
}
.shiback-consept-contents_img01{
  position: absolute;
  top: 80px;
  right: 155px;
  z-index: 1;
}
.shiback-consept-contents_img02{
  position: absolute;
  bottom: 180px;
  left: 190px;
}


  /*タイトルの動きCSS*/
.title-effect-fade {
  overflow: hidden;
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.title-effect-scroll::before{
    opacity: 1;
    animation: img-wrap 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff2d7;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}

  /*タイトルの動きCSS*/
.title-effect-fade02 {
  overflow: hidden;
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.title-effect-scroll02::before{
    opacity: 1;
    animation: img-wrap 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #ffe6dd;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}

  /*タイトルの動きCSS*/
.title-effect-fade03 {
  overflow: hidden;
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.title-effect-scroll03::before{
    opacity: 1;
    animation: img-wrap 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}

  /*タイトルの動きCSS*/
.title-effect-fade04 {
  overflow: hidden;
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.title-effect-scroll04::before{
    opacity: 1;
    animation: img-wrap 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fffaf8;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}


.shiback-consept_box span{
  display: block;
  text-align: center;
}
.shiback-consept_box span img{
  width: 70px;
  display: inline-block;
}

.news-contents_text-title{
  font-weight: bold;
  color: #ae0000;
  font-size: 20px;
}
.news-contents_text-subtitle{
  font-weight: bold;
  font-size: 20px;
  padding: 20px 0;
}
.news-contents{
  display: flex;
  margin: 30px auto 0;
  width: 65%;
  border-bottom: dotted 10px #fff;
  padding-bottom: 30px;
}
.news-contents_textbox{
  width: 100%;
  padding-left: 40px;
  padding-top: 15px;
}
.news-contents_textbox a{
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: 0;
  color: #ae0000;
  font-weight: bold;
  margin-top: 78px;
  padding-right: 30px;
}
#shiback-news-contents_section{
  background: #ffe6dd;
  padding-bottom: 30px;
}
.new-contents03{
  border-bottom: none!important;
}




.pickup-item-contents_list{
  display: flex;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  justify-content: space-between;
}
.pickup-item-contents_list li p{
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.pickup-item-contents_list li{
  margin-top: 70px;
}
.rakuten_btn-box p{
  position: relative;
  display: block;
  width: fit-content;
  padding: 0 30px;
  font-size: 20px;
  font-weight: bold;
  margin: 0 auto 20px;
}
.rakuten_btn-box{
  width: fit-content;
  margin: 90px auto 0;
}
.rakuten_btn-box p:before{
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 25px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.rakuten_btn-box p:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 27px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.rakuten_btn-box p::before {
  left:0;
}
.rakuten_btn-box p:after {
  right: 0;
}


#shiback-our-brand-contents_section{
  background: #ffe6dd;
}
.our-brand-contents_box{
    display: flex;
    flex-wrap: wrap;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
}
.our-brand-contents_imgbox img{
  display: block;
  width: 100%;
}
.our-brand-contents_textbox{
  width: fit-content;
  margin: 0 auto;
}
.our-brand-contents_textbox p{
  font-size: 18px;
  line-height: 2.0;
}



.fun-fact-contents_title{
  font-size: 20px;
}
.fun-fact-contents_title img{
  vertical-align: middle;
  padding-right: 8px;
}
.shiback-fun-fact-contents_box{
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
.fun-fact-contents_title{
  border-bottom: dotted 7px #383838;
  padding-left: 10px;
  padding-bottom: 10px;
}
.fun-fact-contents_title img{
  display: inline-block;
  width: 40px;
}
.charm-title{
  font-size: 20px;
  font-weight: bold;
  padding-left: 20px;
  padding-top: 38px;
}
.charm_box{
    padding-left: 20px;
    line-height: 1.5;
    padding-top: 30px;
}
.charm-subtitle{
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 5px;
}
.charm_box span{
  display: block;
  padding-left: 18px;
}
.fun-fact-contents_table-title{
  padding-left: 10px;
  padding-bottom: 15px;
  font-size: 20px;
}
.fun-fact-contents_table-title img{
  display: inline-block;
  width: 40px;
  vertical-align: middle;
  padding-right: 8px;
}
.shiback-fun-fact-contents_charm{
  margin-bottom: 55px;
}
.fun-fact-table{
    max-width: 1280px;
    width: 100%;
    border: solid 2px #ccc3b6;
    margin: 0 auto;
}
.table-item-title{
  background: #f4ede1;
}
.fun-fact-table tr th,.fun-fact-table tr td{
  border-right: solid 2px #ccc2b6;
}
.fun-fact-table tr td{
  border-right: solid 2px #ccc2b6;
  border-bottom: solid 2px #ccc2b6;
  padding:12px 12px 12px 25px;
}
.fun-fact-table tr th{
  font-weight: normal;
  padding: 15px 5px;
  font-size: 18px;
}



#shiback-contact-contents_section{
  background: #fffaf8;
}
.contact-btn{
    display: block;
    background: #ff7571;
    width: fit-content;
    margin: 0 auto;
    padding: 20px 55px;
    border-radius: 50px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    position: relative;
}
.contact-btn::after {
  content: '';
  width: 10px;
  height: 10px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  right: 28px;
  top: 24px;
}
.contact-btn::after {
  transform: rotate(45deg);
}
.img-text{
  display: block;
  margin: 130px auto 40px;
}
.contct-box_sns-icon-box{
  width: fit-content;
  margin: 0 auto; 
}
.contct-box_sns-icon-box .sns-icon01{
  display: inline-block;
  padding-right: 45px;
}
.shiback-contact-contents_box{
  background-image: url(http://www.shiback.com/img/img-21.png);
  background-repeat: no-repeat;
  height: 450px;
  background-size: contain;
  background-position: center;
  padding-top: 100px;
}


.company-profile-table{
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  border: solid 2px #ccc3b6;
}
.company-profile-table tr th{
  background: #f4ede1;
  text-align: left;
  padding: 18px 0 18px 25px;
  font-weight: normal;
}
.company-profile-table tr{
  border-bottom: solid 2px #ccc3b6;
}
.company-profile-table tr td{
  padding-left: 25px;
  padding-bottom: 12px;
  line-height: 2.0;
}


#shiback-our-website-contents_section ul{
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}


.shiback-footer{
  background: linear-gradient(#ffc5ad, #ffbbd1);
}
.footer-info_box{
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}
.footer-minami-logo{
    display: block;
    margin-top: 100px; 
}
.footer-company_link{
    display: block;
    color: #383838;
    margin: 30px 0 30px;
    font-size: 20px;
}
.footer-contact_link{
    display: block;
    font-size: 25px;
    color: #383838;
    font-weight: bold;
    margin-bottom: 15px;
}
.footer-info_box p{
    line-height: 1.5;
    font-weight: bold;
}
.shiback-footer-copyright_box{
    background: #383838;
    color: #fff;
    text-align: center;
    padding: 30px 0;
}
.footer-snsicon_box{
  width: fit-content;
  margin-right: 0;
  margin-left: auto;
}
.footer-snsicon_box img{
  display: inline-block;
  max-width: 65px;
  width: 100%;
}
.footer-snsicon_box a{
  display: inline-block;
}
.footer-snsicon_box .footer-sns-icon01{
  margin-right: 40px;
}


.active-online-btnbox a{
    width: fit-content;
    position: absolute;
    right: 240px;
    top: 19px;
    display: block;
    background: #ff7571;
    color: #fff;
    border-radius: 50px;
    padding: 10px 10px 11px;
    text-align: center;
    font-weight: bold;
}
.online-btnbox a img{
    vertical-align: sub;
    display: inline-block;
    width: 23px;
}
.active-online-btnbox a img{
    vertical-align: sub;
    display: inline-block;
    width: 23px;
}

.active .hamburger-overlay-close{
	position: fixed;
	z-index: 9999;
    display: block;
    background: #ff7571;
    color: #fff;
    width: fit-content;
    padding: 10px 32px 0px;
    border-radius: 50px;
    font-size: 16px;
	right: 85px;
  top: 20px;
  height: 30px;
  font-weight: bold;
}
.hamburger-overlay-close img{
vertical-align: middle;
    display: inline-block;
    width: 15px;
    padding-right: 8px; 
}

#shiback-pickup-item-contents_section{
  padding-top: 70px;
  margin-top: -30px;
  padding-bottom: 80px;
}
#shiback-our-brand-contents_section .shiback-section-title{
  padding-bottom: 70px;
}
#shiback-our-brand-contents_section{
  padding-bottom: 120px;
}

#shiback-fun-fact-contents_section .shiback-section-title{
  padding-bottom: 70px;
}

#shiback-fun-fact-contents_section{
  padding-bottom: 100px;
}
#shiback-company-profile-contents_section .shiback-section-title{
  padding-bottom: 50px;
}
#shiback-company-profile-contents_section{
  padding-top: 60px;
  margin-top: -30px;
}
#shiback-our-website-contents_section{
    padding-top: 70px;
    margin-top: -30px;
    padding-bottom: 130px;
}
#shiback-our-website-contents_section .shiback-section-title{
  padding-bottom: 50px;
}
.shiback-footer-mainbox{
  padding: 60px 0 60px;
}

#shiback-news-contents_section .shiback-section-title{
  padding-bottom: 25px;
}


#shiback-consept-contents_section::before{
  display:block;
  content: "";
  background-image: url(http://www.shiback.com/img/img-27.png);
  width: 230px;
  height: 208px;
  position: absolute;
  top: -90px;
  left: 220px;
}
#shiback-consept-contents_section::after{
  display:block;
  content: "";
  background-image: url(http://www.shiback.com/img/img-27.png);
  width: 230px;
  height: 208px;
  position: absolute;
  top: -90px;
  right: 220px;
}

#shiback-pickup-item-contents_section{
  position: relative;
}

.footprints{
  position: absolute;
}
.footprints-01{
  right: 330px;
  top: 195px;
}
.footprints-02{
  right: 265px;
  top: 215px;
}
.footprints-03{
  right: 240px;
  top: 285px;
}
.footprints-04{
  right: 140px;
  top: 495px;
}
.footprints-05{
  right: 185px;
  top: 555px;
}
.footprints-06{
  right: 155px;
  top: 620px;
}
.footprints-07{
  right: 200px;
  top: 680px;
}
.footprints-08{
  top: 1035px;
  left: 185px;
}
.footprints-09{
  top: 1100px;
  left: 145px;
}
.footprints-10{
  top: 1160px;
  left: 192px;
}
.footprints-11{
  top: 1220px;
  left: 157px;
}
.footprints-12{
  top: 1570px;
  left: 220px;
}
.footprints-13{
  top: 1635px;
  left: 210px;
}
.footprints-14{
  top: 1680px;
  left: 270px;
}




.fade-in-footprints {
  opacity: 0;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: calc(var(--delay) * 0.5s);
}

.fade-in-footprints.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-footprints-left {
  opacity: 0;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: calc(var(--delay) * 0.5s);
}

.fade-in-footprints-left.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-footprints-right {
  opacity: 0;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: calc(var(--delay) * 0.5s);
}

.fade-in-footprints-right.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-footprints-sp {
  opacity: 0;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: calc(var(--delay) * 0.5s);
}

.fade-in-footprints-sp.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-footprints-sp01 {
  opacity: 0;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: calc(var(--delay) * 0.5s);
}

.fade-in-footprints-sp01.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-footprints-sp02 {
  opacity: 0;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: calc(var(--delay) * 0.5s);
}

.fade-in-footprints-sp02.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-footprints-sp03 {
  opacity: 0;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: calc(var(--delay) * 0.5s);
}

.fade-in-footprints-sp03.visible {
  opacity: 1;
  transform: translateY(0);
}


.position-img01,.position-img02{
  display: block;
  width: 26%;;
}


@media screen and (max-width: 1500px) {
	/* 1500px以下に適用されるCSS（タブレット用） */
  .position-img01, .position-img02{
    width: 30%;
  }
  .position-img02{
    top: 42%;
  }
}



@media screen and (max-width: 1200px) {
	/* 1200px以下に適用されるCSS（タブレット用） */
  .position-img01{
    right: 50px;
  }
  .position-img01, .position-img02{
    width: 29%;
  }
  .position-img02{
    right: 29%;
    top: 34%;
  }
  .first-view-contents_textbox img{
    width: 25%;
    margin-left: 155px;
  }
}



@media screen and (max-width: 1140px) {
	/* 1024px以下に適用されるCSS（タブレット用） */
  .shiback-consept-contents_img01{
    width: 25%;
    right: 40px;
  }
  .shiback-consept-contents_img02{
    width: 18%;
    left: 40px;
  }
  .shiback-color-img{
    width: 35%;
  }
  .shiback-consept_box h3{
    position: relative;
    z-index: 2;
  }
  .news-contents{
    width: 80%;
  }
  .news-contents_textbox{
    width: 60%;
  }
  .pickup-item-contents_list{
    width: 85%;
  }
  .pickup-item-contents_list li img{
    display: block;
    width: 100%;;
  }
  .pickup-item-contents_list li{
    width: 30%;
  }
  .footprints-01{
    right: 95px;
  }
  .footprints-02{
    right: 45px;
  }
  .footprints-03{
    right: 30px;
  }
  .footprints-04{
    right: 20px;
  }
  .footprints-05{
    right: 35px;
  }
  .footprints-06{
    right: 20px;
  }
  .footprints-07{
    right: 35px;
  }
  .footprints-08{
    left: 20px;
  }
  .footprints-09{
    left: 30px;
  }
  .footprints-10{
    left: 20px;
  }
  .footprints-11{
    left: 15px;
  }
  .footprints-12{
    top: 1400px;
  }
  .footprints-13{
    top: 1450px;
  }
  .footprints-14{
    top: 1480px;
  }
  .sp-only{
    display: none!important;
  }
  .our-brand-contents_box{
    justify-content: space-around;
    width: 95%;
  }
  .our-brand-contents_imgbox{
    width: 45%;
  }
  .our-brand-contents_textbox{
    width: 45%;
    margin: initial;
  }
  .our-brand-contents_textbox p{
    font-size: 15px;
  }
  .table-wrap{
    padding: 0 15px;
  }
  .img-text{
    margin: 60px auto 40px;
  }
  .shiback-contact-contents_box{
    height: 400px;
  }
  .company-profile-table{
    width: 90%;
  }
  #shiback-our-website-contents_section ul li a{
    display: block;
    width: 90%;
    margin: 0 auto 35px;
  }
  #shiback-our-website-contents_section ul li a img{
    display: block;
    width: 100%;
  }
  .footer-info_box{
    width: 85%;
  }
  .nav-overlay__content{
    width: 70%;
    margin: 0 auto;
    justify-content: space-around;
  }

}


@media screen and (max-width: 820px) {
	/* 820px以下に適用されるCSS（タブレット用） */
  .online-btnbox{
    display: none;
  }
  .position-img01{
    right: -50px;
    top: 235px;
  }
  .position-img01, .position-img02{
    width: 50%;;
  }
  .position-img02{
    right: 56%;
    top: 40%;
  }
  .first-view-contents_textbox img{
    width: 20%;
    right: 65px;
    bottom: 125px;
    position: absolute;
  }
  .first-view-contents_textbox h1{
    font-size: 40px;
    padding-left: 38px;
  }
  .first-view-contents_textbox p{
    font-size: 18px;
    padding-left: 38px;
  }
  #shiback-header{
    padding-left: 35px;
  }
  .menu-btnbox{
    margin-right: 60px;
  }
  .first-view-contents_section{
    overflow-x: hidden;
  }
  .header-logo_box img{
    display: block;
    width: 70%;
  }
  .news-contents_textbox{
    width: 50%;
  }
  .news-contents_text{
    line-height: 1.5;
  }
  .nav-overlay__link{
    padding: 20px 0;
  }
  #shiback-consept-contents_section::before{
    left: 50px;
    top: -70px;
  }
  #shiback-consept-contents_section::after{
    right: 50px;
    top: -70px;
  }
  .shiback-consept_box{
    position: relative;
    z-index: 2;
  }
}





@media screen and (max-width: 430px) {
	/* 430px以下に適用されるCSS（タブレット用） */
  #shiback-header{
    width: 100%;
    padding-left: 14px;
  }
  .first-view-contents_section{
    padding: 115px 0 0;
  }
  .first-view-contents_textbox h1{
    font-size: 24px;
    padding-left: 22px;
  }
  .first-view-contents_textbox p{
    font-size: 15px;
    padding-left: 22px;
  }
  .position-img01, .position-img02{
    width: 62%;
  }
  .position-img01{
    right: -42px;
    top: 260px;
  }
  .position-img02{
    right: 50%;
    top: 43%;
  }
  .first-view-contents_textbox img{
    width: 35%;
    right: 35px;
    bottom: 170px;
  }
  .first-view-contents_section{
    height: 820px;
  }
  .hamburger-overlay-open{
    display: flex;
    align-items: center;
  }
  #shiback-consept-contents_section::before {
    background-size: cover;
    width: 107px;
    height: 90px;
    top: -50px;
    left: 30px;
  }
  #shiback-consept-contents_section::after{
    right: 30px;
    top: -50px;
    background-size: cover;
    width: 107px;
    height: 90px;
  }
  #shiback-our-website-contents_section ul li a img{
    display: block;
    width: 100%;
  }
  .img-title{
    width: 80%;
  }
  #shiback-consept-contents_section{
    padding-top: 0;
  }
  .shiback-consept-contents_img01{
    top: 185px;
    right: 15px;
    width: 40%;
    z-index: 0;
  }
  .shiback-consept-contents_img02{
    bottom: 250px;
    left: 20px;
    width: 25%;
    z-index: 0;
  }
  .shiback-color-img{
    width: 50%;
    padding: 95px 0 40px;
  }
  .shiback-consept_box h3{
    position: relative;
    z-index: 1;
    font-size: 20px;
  }
  .shiback-consept_box p{
    padding: 0 20px;
    text-align: left;
    position: relative;
    z-index: 1;
    font-size: 16px;
  }
  .news-contents_imgbox{
    width: 100%;
  }
  .news-contents_imgbox img{
    display: block;
    width: 100%;
  }
  .news-contents_textbox{
    width: 100%;
    padding-left: initial;
  }
  .news-contents{
    flex-wrap: wrap;
  }
  .pickup-item-contents_list{
    display: block;
  }
  .pickup-item-contents_list li{
    width: 100%;
  }
  .footprints-01{
    top: 250px;
  }
  .footprints-03{
    top: 325px;
    right: 15px;
  }
  .footprints-02{
    top: 265px;
    right: 30px;
  }
  .footprints-07{
    display: none;
  }
  .footprints-04{
    top: 728px;
  }
  .footprints-05{
    top: 790px;
    right: 13px;
  }
  .footprints-06{
    top: 850px;
    right: 10px;
  }
  .footprints-08{
    display: none;
  }
  .footprints-09{
    top: 1290px;
    left: 10px;
  }
  .footprints-12{
    top: 1630px;
    left: initial;
    right: 30px;
  }
  .footprints-13{
    left: initial;
    right: 86px;
    top: 1600px;
  }
  .footprints-14{
    top: 1688px;
    left: initial;
    right: 15px;
  }

  .sp-only{
    display: block!important;
    width: 43px!important;
  }

  .sp-footprints-05,.sp-footprints-06,.sp-footprints-07,.sp-footprints-08,.sp-footprints-09{
    position: relative;
  }
  .footprints-16{
    top: 58px;
    left: -17px;
    position: absolute;
  }
  .footprints-17{
    top: -30px;
    left: 45px;
    position: absolute;
  }
  .footprints-18{
    right: 0;
    position: absolute;
  }
  .footprints-19{
    position: absolute;
    right: -15px;
    top: 48px;
  }
  .footprints-20{
    position: absolute;
    right: -10px;
    top: 102px;
  }
  .footprints-22{
    position: absolute;
    left: -16px;
    top: 50px;
  }
  .footprints-23{
    position: absolute;
    left: -20px;
    top: 104px;
  }
  .footprints-24{
    position: absolute;
    right: 0;
  }
  .footprints-25{
    position: absolute;
    right: -22px;
    top: 53px;
  }
  .footprints-26{
    position: absolute;
    right: -5px;
    top: 105px;
  }
  .footprints-28{
    position: absolute;
    left: -10px;
    top: 54px;
  }
  .footprints-29{
    position: absolute;
    top: 107px;
  }
  .our-brand-contents_box{
    display: block;
    width: 90%;
  }
  .our-brand-contents_imgbox{
    width: 100%;
  }
  .our-brand-contents_textbox{
    width: 100%;
    padding-top: 30px;
  }
  #shiback-our-brand-contents_section{
    padding-bottom: 75px;
  }
  .fun-fact-contents_title img{
    width: 30px;
  }
  .fun-fact-contents_title{
    font-size: 18px;
    padding-right: 10px;
  }
  .charm-title{
    font-size: 18px;
  }
  .charm-subtitle{
    font-size: 16px;
  }
  .charm_box span{
    font-size: 15px;
  }
  .charm_box{
    padding-right: 35px;
  }
  .fun-fact-contents_table-title{
    font-size: 18px;
  }
  .fun-fact-contents_table-title img{
    width: 30px;
  }
  .menu-btnbox{
    margin-right: 30px;
  }
  .fun-fact-table{
    width: 1000px;
  }
  .table-wrap{
    overflow-x: scroll;
    padding: 0 10px;
  }
  .fun-fact-table tr th{
    font-size: 16px;
  }
  .fun-fact-table tr td{
    font-size: 15px!important;
  }
  .company-profile-table{
    border: solid 1px #ccc3b6;
  }
  .company-profile-table tr th{
    display: block;
  }
  .company-profile-table tr td{
    display: block;
    padding-top: 8px;
    padding-right: 25px;
    font-size: 15px;
  }
  .company-profile-table tr{
    border-bottom: none;
  }
  .address{
    display: block;
    line-height: 1.2;
  }
  .contct-box_sns-icon-box .sns-icon01{
    width: 40%;
    display: block;
  }
  .contct-box_sns-icon-box .sns-icon01 img{
    display: block;
    width: 80%;
  }
  .contct-box_sns-icon-box .sns-icon02{
    width: 40%;
    display: block;
  }
  .contct-box_sns-icon-box .sns-icon02 img{
    display: block;
    width: 80%;
  }
  .contct-box_sns-icon-box{
    display: flex;
  }
  .footer-logo{
    display: block;
    width: 65%;
    margin: 0 auto;
  }
  .footer-minami-logo{
    margin-top: 70px;
    width: 50%;
  }
  .footer-contact_link{
    font-size: 20px;
  }
  .footer-info_box p{
    font-weight: normal;
    font-size: 14px;
  }
  .footer-snsicon_box{
    margin: 40px auto 0;
  }
  .shiback-footer-mainbox{
    margin: 40px 0;
  }
  .nav-rakuten-btn{
    display: none!important;
  }
  .nav-overlay__content{
    display: block;
    margin-top: -50px;
  }
  .nav-overlay__content-logo-box{
    margin-right: initial;
    margin-top: -10px;
  }
  .nav-overlay__content-sns-icon{
    margin: 30px 0;
  }
  .nav-inst-iconlink{
    display: block;
    width: 18%;
    position: absolute;
    bottom: -100px;
    left: 50px;
  }
  .nav-inst-iconlink img{
    display: block;
    width: 100%;
  }
  .nav-inst-iconlink p{
    font-size: 12px;
  }
    .nav-tiktok-iconlink{
    display: block;
    width: 18%;
    position: absolute;
    bottom: -100px;
    right: 50px;
  }
  .nav-tiktok-iconlink img{
    display: block;
    width: 100%;
  }
  .nav-tiktok-iconlink p{
    font-size: 12px;
  }
  .nav-overlay__list-box{
    margin-top: -30px;
  }
  .active .hamburger-overlay-close{
    right: 25px;
  }
  .active-online-btnbox a{
    right: 195px;
    font-size: 14px;
  }
  .nav-overlay__link{
    font-size: 16px;
  }
  .nav-overlay__content-logo-box a .nav-logo{
    display: block;
    width: 55%;
    margin: 0 auto;
  }
  .nav-overlay__content-logo-box{
    padding-right: 0;
  }
  .nav-overlay__content-logo-box .nav-logo-link{
    width: 90%;
    margin: 0 auto;
  }
  .shiback-footer-copyright_box{
    font-size: 14px;
  }
  .nav-overlay__link{
    padding: 20px 0 10px;
  }

}







@media screen and (max-width: 375px) {
	/* 375px以下に適用されるCSS（タブレット用） */
  .nav-overlay__link{
    font-size: 14px;
    padding: 14px 0;
  }
  .nav-overlay__content-logo-box .nav-logo-link{
    width: 70%;
  }
  .nav-overlay__content-logo-box{
    margin-top: -30px;
  }
}