@charset "utf-8";

/* ページ内リンクの移動を滑らかに */
html {
  scroll-behavior: smooth;
}
body {
  background: #fff;
  color: #000;
}

/*共通*/
a:hover{
  opacity:0.6;
}
.pc_block {
  display: block;
}
.sp_block, .sp_offcm01 {
  display: none;
}
.container{
  position: relative;
  max-width: 1024px;
  margin: auto;
}
img {
  max-width: 100%;
  height: auto;
}
.indent {
  text-indent: -1em;
  padding-left: 1em;
  display: block;
}

/*header*/
header {
  position: fixed;
  width: 100%;
  height: 104px;
  background: #fff;
  z-index: 100;
}
.hd_inner {
  width: 100%;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1em;
}
.hd_logo {
  position: relative;
}
.hd_logo::before {
  content: 'オンラインショップ';
  position: absolute;
  top: -1.5em;
  left: 1em;
  color: #878787;
  font-size: 1.6rem;
  letter-spacing: 1.6px;
}
.hd_nav {
  position: relative;
  width: 100%;
  max-width: 454px;
  bottom: 0.5em;
}
.hd_nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.hd_nav li {
  width: 100%;
  max-width: 222px;
  height: 64px;
}
.hd_nav li a {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 2rem;
  letter-spacing: 2px;
  color: #fff;
}
.hd_nav li:first-child a {
  background: #E77137;
  padding-left: 2em;
}
.hd_nav li:last-child a {
  background: #0085CE;
  padding-left: 1.5em;
}
.hd_nav li a::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.hd_nav li:first-child a::before {
  background: url("../img/icon_mail.svg")no-repeat center;
  background-size: contain;
  width: 29px;
  height: 21px;
  left: 1em;
}
.hd_nav li:last-child a::before {
  background: url("../img/icon_login.svg")no-repeat center;
  background-size: contain;
  width: 28px;
  height: 28px;
  left: 2em;
}

/*アニメーション用CSS ↓↓*/
.fade{
  opacity: 0;
  transition: .5s ease-in-out;
}
.fade.fade--bot{transform: translate(0,100px);}
.fade.fade--top{transform: translate(0,-100px);}
.fade.fade--left{transform: translate(-100px,0);}
.fade.fade--right{transform: translate(100px,0);}
.fade.fadein{
  transform: translate(0,0);
  opacity: 1;
}
/* 子要素を順番にフェードイン */
.fade.fade--list{
  opacity: 1;
}
.fade_child{
  opacity: 0;
  transform: translate(0,100px);
  transition: .5s ease-in-out;
}
.fadein .fade_child{
  transform: translate(0,0);
  opacity: 1;
}
.fade_child:nth-child(1){transition-delay: 0.15s;}
.fade_child:nth-child(2){transition-delay: 0.3s;}
.fade_child:nth-child(3){transition-delay: 0.45s;}
.fade_child:nth-child(4){transition-delay: 0.6s;}
.fade_child:nth-child(5){transition-delay: 0.75s;}
.fade_child:nth-child(6){transition-delay: 0.9s;}
.fade_child:nth-child(7){transition-delay: 1.05s;}
.fade_child:nth-child(8){transition-delay: 1.2s;}
.fade_child:nth-child(9){transition-delay: 1.35s;}

/*footer*/
#back_top {
  position: fixed;
  right: 3%;
  bottom: 80px;
  z-index: 100;
}
#back_top a {
  display: block;
  width: 50px;
  height: 50px;
  background: url("../img/back_top.png") no-repeat center;
}

footer {
  position: relative;
  background: url("../img/cont_bg.png")no-repeat center;
  background-size: cover;
}
.ft_cont {
  padding: 72px 0;
}
.ft_cont .container {
  background: #fff;
  padding: 48px 0;
}
.ft_cont .container::after {
  content: '';
  position: absolute;
  background: url("../img/ft_img.png")no-repeat center;
  background-size: contain;
  width: 195px;
  height: 214px;
  bottom: 2em;
  right: 4em;
}
.ft_cont h2 {
  font-size: 4rem;
  font-weight: bold;
  margin-bottom: 32px;
  text-align: center;
  letter-spacing: 4px;
  color: #FEA21D;
}
.ft_btn {
  position: relative;
  width: 90%;
  max-width: 670px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px 16px;
  margin: 0 auto 32px;
}
.ft_btn li {
  width: 100%;
  max-width: 326px;
  text-align: center;
}
.ft_btn li > a {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 64px;
  background: #0085CE;
  border-radius: 50px;
  color: #fff;
  font-weight: bold;
  font-size: 2rem;
  letter-spacing: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  padding-left: 2em;
}
.ft_btn li > a::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 2em;
}
.ft_btn li:first-child > a::before {
  background: url("../img/icon_mail.svg")no-repeat center;
  background-size: contain;
  width: 29px;
  height: 21px;
  left: 3em;
}
.ft_btn li:nth-child(2) > a::before {
  background: url("../img/icon_tel.svg")no-repeat center;
  background-size: contain;
  width: 28px;
  height: 23px;
}
.ft_btn li:nth-child(3) > a::before {
  background: url("../img/icon_login.svg")no-repeat center;
  background-size: contain;
  width: 28px;
  height: 28px;
}
.ft_address {
  position: relative;
  width: 90%;
  max-width: 670px;
  margin: 0 auto;
}
.ft_address h3 {
  font-size: 2rem;
  letter-spacing: 2px;
  color: #0085CE;
  font-weight: bold;
  margin-bottom: 10px;
}

/*copyright*/
.copyright {
  position: relative;
  height: 48px;
  background: #0085CE;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.copyright small {
  font-size: 1.2rem;
}

#back_top {
  position: fixed;
  right: 3%;
  bottom: 80px;
  z-index: 2000;
}
#back_top a {
  display: block;
  width: 50px;
  height: 50px;
  background: url("../img/back_top.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}

@media screen and (max-width: 1279px) {
/* 推奨動作環境1280pxに固定 */
  body {
    width: 1280px;
  }
}

@media screen and (min-width: 768px) {
/* PCの場合はtelリンクを無効 */
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}
/*タブレット（縦）*/
@media screen and (orientation: portrait) and (min-width: 768px){
  
}

@media screen and (max-width: 767px) {
/* スマホ閲覧時、横幅可変 */
/*共通*/
  body {
    width: 100%;
  }
  .pc_block {
    display: none;
  }
  .sp_block {
    display: block;
  }
  .container {
    max-width: 90%;
  }

  
  .fade.fade--left {
    transform: translate(0,100px);
  }
  .fade.fade--right {
    transform: translate(0,100px);
  }
  .fade.fade--left.fadein,
  .fade.fade--right.fadein {
    transform: translate(0,0);
  }

  /*header*/
  .hd_inner {
    width: 95%;
    gap: 10px;
    padding-top: 11px;
  }
  .hd_logo::before {
    font-size: 1.2rem;
    letter-spacing: 1.2px;
  }
  .hd_nav {
    max-width: 160px;
  }
  .hd_nav ul {
    flex-direction: column;
    gap: 4px;
  }
  .hd_nav li {
    max-width: 160px;
    height: auto;
  }
  .hd_nav li a {
    font-size: 1.4rem;
    letter-spacing: 1.4px;
    padding: 9.5px 0;
    padding-left: 2em;
  }
  .hd_nav li:first-child a::before {
    height: 16px;
    left: 0.5em;
  }
  .hd_nav li:last-child a::before {
    height: 24px;
    left: 1em;
  }

  /*footer*/
  .ft_cont .container {
    padding: 48px 0 240px;
  }
  .ft_cont .container::after {
    right: 0;
    left: 0;
    margin: auto;
    bottom: 1em;
  }
  .ft_cont h2 {
    width: 90%;
    margin: 0 auto 24px;
    font-size: 2.4rem;
    letter-spacing: 2.4px;
  }
  .ft_btn {
    gap: 24px;
  }
  .ft_btn li > a {
    height: auto;
    padding: 16px 0;
    padding-left: 2em;
    font-size: 1.6rem;
    letter-spacing: 1.6px;
    margin-bottom: 8px;
  }
  .ft_btn li > a + p {
    font-size: 1.4rem;
    letter-spacing: 1.4px;
  }
}

/* 印刷用設定 */
@media print {
  body {
    width: 1280px;
    zoom: 0.68;
    -webkit-print-color-adjust: exact;
  }
  header .hd_inner, .hd_fixed, #back_top {
    position: absolute;
  }
}

@page {
  size: A4;
  margin: 5px;
}