/*
Theme Name:le Chainon 公式サイト
Theme URI:
Version: 1.0
Author: takami
Author URI: https://yoshida-designbu.com
License: takami
*/

/*--------------
common
--------------*/
html {
  font-size: 62.5%;
}

*,
*::before,
*::after{
  box-sizing: border-box;
}

:root{
  --color-black:#000;
  --color-gray:#595757;
  --color-blue:#618696;
  --color-beige:#f2efec;
  --color-white:#fefefe;
  --font-Tangerine:'Tangerine', cursive;
  --font-400:400;
  --font-500:500;
  --font-600:600;
  --font-700:700;
  --ns-margin:4vw;
  --p-margin:5em;
  --s-margin:124px;
}

body {
  font-size: min(1.6rem,3.58vw);
  font-family: 'Shippori Mincho', '游明朝', 'YuMincho', 'Yu Mincho','Hiragino Mincho ProN', 'ヒラギノ明朝 ProN', serif;
  line-height: 1.9;
  letter-spacing: 0.1em;
  color: var(--color-gray);
  background: var(--color-beige);
  margin: 0;
  padding: 0;
  position: relative;
  animation: fadeIn 1.4s forwards;
}

@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

h1,h2,h3,h4,h5,h6{
  font-weight: 500;
}

h1,h2,h3,h4,h5,h6,ul,dl,dt,dd,td,p {
  margin: 0;
  padding: 0;
}

small{
  font-size: 1.24rem;
}

li {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  margin: 0;
  padding: 0;
  text-decoration: none;
  transition: all 0.5s;
  color: var(--color-navy);
  font-weight: var(--font-500);
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  margin: 0;
  padding: 0;
}

table {
  clear: both;
  border-collapse: collapse;
  width: 100%;
}

th,tr{
  margin: 0;
  padding: 0;
}

.contents{
  max-width: 1440px;
  padding: 0 4vw;
  margin: auto;
}

main.l-wrapper{
  padding: 100px 0px 0px 0px;
  position: relative;
}

/*----- common contents title -----*/
.contents-title{
  font-size: 5.24rem;
  font-weight: var(--font-600);
  font-family: var(--font-Tangerine);
  color: var(--color-blue);
  line-height: 1.4;
  position: relative;
  text-align: center;
  margin-bottom: 56px;
}

.contents-title::after{
  content: "";
  position: absolute;
  background: var(--color-gray);
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.contents-title span.contents-titleInner{
  background: var(--color-beige);
  padding: 0 0.65em;
  z-index: 1;
  position: relative;
}

/*----- link button -----*/
.linkBox {
  position: relative;
  padding: min(12px, 2.63vw) 16px;
  border: solid 1px var(--color-gray);
  background: var(--color-beige);
  display: block;
  text-align: center;
  line-height: 1.4;
  max-width: 240px;
  width: 60%;
  margin: auto;
}

.linkBox span{
  position: relative;
  padding-right: 20px;
}

.linkBox span::after{
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
	transform: rotate(45deg) translateX(-50%);
  border-top: solid 1px var(--color-gray);
  border-right: solid 1px var(--color-gray);
  top: 50%;
  right: 0;
  width: 10px;
  height: 10px;
  transition: ease .6s;
}

.linkBox:hover{
  background: #e1e7e9;
}

.linkBox span:hover::after{
  right: -4px;
}

/*----- animation -----*/
.fade-in {
  opacity: 0;
  transition-duration: 1400ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 6px);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

.eachTextAnime span{
  opacity: 0;
}

.eachTextAnime.appeartext span{
  animation:text_anime_on 2s ease-out forwards;
}

@keyframes text_anime_on {
	0% {
    opacity:0;
    filter: blur(3px);
  }
	100% {
    opacity:1;
    filter: blur(0px);
  }
}


/*----- breadcrumbs/pageTop -----*/
.breadcrumbs {
  text-align: left;
  font-size: min(1.24rem, 2.83vw);
  margin: auto;
  padding: 16px 4vw;
}

.breadcrumbs span {
  padding: 0 2px;
}

.breadcrumbs a {
  text-decoration: underline;
}


/*----- googleMap/youtube -----*/
.googleMap{
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.googleMap iframe, .googleMap object, .googleMap embed{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.youtube{
  position:relative;
  width:100%;
  padding-top:62.25%;
}

.youtube iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}


/*----- not found -----*/
.notFound{
  text-align: center;
  padding: 120px 6vw;
}

.notFont-wrapper h2{
  font-size: min(6.2rem,12vw);
  font-weight: 400;
  padding-bottom: 16px;
  line-height: 1.3;
}

.notFont-wrapper p{
  font-size: 1.83rem;
  padding-bottom: 40px;
}

.notFound a.linkBox{
  max-width: 380px;
  margin: auto;
}

/*----- js swiper -----*/
.swiper-wrapper {
  transition-timing-function: linear;
}

.swiper-slide img {
  height: auto;
  width: 100%;
}

/*----- fixed contact -----*/
.mobile-contactFixed,
.mobile-menu,
ul.mobile-iconMenu{
  display: none;
}


/*----- loading -----*/
.loading{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:var(--color-beige);
  text-align:center;
  top: 0;
}

.loading-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading-logo img{
  max-width: 110px;
  width: 26vw;
}

.tel-icon_path, .tel-stroke {
  fill: none;
  stroke: var(--color-gray);
  stroke-miterlimit: 10;
}

.tel-stroke {
  stroke-width: .75px;
}

/*--------------
  header
--------------*/
header {
  width: 100%;
  height: 100px;
  background: var(--color-beige);
  position: fixed;
  left: 0px;
  top: 0px;
  padding: 0 4vw;
  z-index: 3;
}

@keyframes leftFade{
  0% {
    opacity: 0;
    transform: translateY(-24%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}


header h1 {
  max-width: 112px;
  width: 20vw;
  line-height: 0;
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  margin: auto;
  transition: all 0.5s ease;
  animation-duration: 1.2s;
  animation-delay: 1.2s;
  animation-name: leftFade;
  animation-fill-mode: forwards;
  opacity: 0;
  transform: translateY(-24%);
}

header a{
  position: relative;
  line-height: 1.2;
  font-weight: var(--font-600);
}

header h1 a:hover{
  opacity: 0.6;
}

.headerMenu-list li a:hover{
  color: var(--color-blue);
}

.headerMenu-leftMenu,
.headerMenu-rightMenu{
  transition: all 0.5s ease;
  animation-duration: 1.2s;
  animation-delay: 1.2s;
  animation-name: leftFade;
  animation-fill-mode: forwards;
  opacity: 0;
  transform: translateY(-24%);
}

.headerMenu-leftMenu{
  position: absolute;
  left: 4vw;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6vw;
  font-size: 1.7rem;
}

.headerMenu-rightMenu{
  position: absolute;
  right: 4vw;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
}

.headerMenu-rightMenu li.headerMenu-formArea{
  display: flex;
}

.headerMenu-rightMenu li.headerMenu-formArea a{
  padding: 0 0.6em;
  text-transform: uppercase;
}

.headerMenu-rightMenu li.headerMenu-formArea a:nth-of-type(1){
  border-right: solid 1px var(--color-gray);
}

.headerMenu-rightMenu li.headerMenu-cart{
  width: 28px;
}

.cart-icon_path{
  fill: var(--color-gray);
  transition: ease .5s;
}

a:hover .cart-icon_path{
  fill: var(--color-blue);
}

/*--- header scroll ---*/
header.js-headerScroll {
  height: 82px;
}

header.js-headerScroll h1{
  max-width: 74px;
  width: 18vw;
  top: 10px;
}


/*----- hamburger -----*/
.openBtn{
  cursor: pointer;
  width: 26px;
  height: 18px;
  border-radius: 5px;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 200;
  border-radius: 50%;
  transition: ease .5s;
  display: none;
}

.openBtn span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  height: 2px;
  border-radius: 2px;
  background: var(--color-gray);
  width: 100%;
}

.openBtn span:nth-of-type(1) {
  top:0px;
}

.openBtn span:nth-of-type(2) {
  top: 14px;
}

.openBtn.active span:nth-of-type(1){
top: 14px;

}

.openBtn.active span:nth-of-type(2){
  top: 14px;
}

#js-g-nav{
  transition: all 0.6s;
  opacity: 0;
  visibility: hidden;
}

#js-g-nav.panelactive{
  opacity: 1;
  visibility: inherit;
  overflow: auto;
}

.g-nav{
  position: fixed;
  z-index: 100;
  top: 0;
  width: 100%;
  height: 100svh;
  padding: 12vw 12vw 6vw;
  visibility: hidden;
  background: var(--color-white);
}

.g-nav h1{
  max-width: 110px;
  width: 22vw;
  margin: 0 auto 24px
}

.g-nav ul.g-nav_mainMenu{
  font-size: min(2.24rem,5vw);
  letter-spacing: 0.16em;
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-bottom: 12vw;
}

.g-nav ul.g-nav_mainMenu li,
.g-nav ul.g-nav_sns li{
  transition: 0.8s;
  opacity: 0;
  -webkit-transform: translateY(14px);
  transform: translateY(14px);
}

#js-g-nav.panelactive ul.g-nav_mainMenu li,
#js-g-nav.panelactive ul.g-nav_sns li{
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.g-nav ul.g-nav_mainMenu li:nth-of-type(1){
  transition-delay: 0.6s;
}

.g-nav ul.g-nav_mainMenu li:nth-of-type(2){
  transition-delay: 0.8s;
}

.g-nav ul.g-nav_mainMenu li:nth-of-type(3){
  transition-delay: 1s;
}

.g-nav ul.g-nav_mainMenu li:nth-of-type(4){
  transition-delay: 1.2s;
}

.g-nav ul.g-nav_mainMenu li:nth-of-type(5){
  transition-delay: 1.4s;
}

.g-nav ul.g-nav_mainMenu li:nth-of-type(6){
  transition-delay: 1.6s;
}

.g-nav ul.g-nav_mainMenu a:hover{
  color: var(--color-blue);
}

.g-nav ul.g-nav_sns{
  display: flex;
  gap: 4vw;
}

.g-nav ul.g-nav_sns li {
  width: 8vw;
  max-width: 36px;
  transition-delay: 2s;
}

/*--------------
KV
--------------*/
.KV{
  height: 88svh;
  position: relative;
  background: var(--color-beige);
}

.KV-inner{
  margin: 0 1.6vw;
  height: 88svh;
  position: relative;
}

.KV-inner::before{
  position: absolute;
  position: absolute;
  content: "";
  background: rgba(89, 87, 87, 0.3);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

.KV-copy{
  position: absolute;
  color: var(--color-white);
  font-family: var(--font-Tangerine);
  text-align:left;
  left: 6vw;
  bottom: 12vh;
  z-index: 2;
  line-height: 1.2;
}

.KV-copy h2 span.-copy_main{
  display: block;
  font-size: min(20.2vw,12rem);
  animation-duration: 2.4s;
  animation-delay: 1.0s;
  animation-name: fadeInKV;
  animation-fill-mode: forwards;
  opacity: 0;
}

.KV-copy span.-copy_sub{
  font-size: min(11.2vw,5.4rem);
  animation-duration: 2.4s;
  animation-delay: 1.4s;
  animation-name: fadeInKV;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInKV {
	0% {
    opacity: 0;
    filter: blur(6px);
  }
	100% {
    opacity: 1;
    filter: blur(0);
  }
}

/*--- KV swiper ---*/
.KV-swiper{
  height: 100%;
width: 100%;
overflow: hidden;
}

.KV-swiper .swiper-slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}



/*--------------
topics blog
--------------*/
.news-wrapper{
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(254,254,254,0.8);
  width: 100%;
  z-index: 2;
  padding: 12px 4vw;
  display: flex;
  align-items: center;
  gap: 2em;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-name: fadeInKV;
  animation-fill-mode: forwards;
  opacity: 0;
}

p.newsTitle{
  font-size: min(1.83rem,4.5vw);
  line-height: 1.2;
}

.news-wrapper ul.topicsList li a{
  display: flex;
  gap: 24px;
}

.news-wrapper ul.topicsList li a:hover{
  opacity: 0.8;
}

/*--------------
concept
--------------*/
.concept-inner{
  background: var(--color-beige);
  padding-top: 92px;
}

.concept h2{
  text-align: center;
  font-size: min(2.83rem,5.83vw);
  line-height: 1.6;
  letter-spacing: 0.14em;
  font-weight: 600;
  padding-bottom: 92px;
  padding-left: 4vw;
  padding-right: 4vw;
  position: relative;
}

.concept h2 span.concept-sub{
  color: var(--color-blue);
  display: block;
  font-size: min(1.6rem,4vw);
  letter-spacing: 0.14em;
  padding-top: 4px;
}

.concept h2::after{
  position: absolute;
  content: "";
  background: url(img/leaf-image.png) no-repeat center;
  background-size: 100%;
  width: 20px;
  height: 20px;
  left: 50%;
  bottom: 17%;
  transform: translate(-50%, -17%);
}

.concept-text{
  text-align: center;
  padding: 0 3.6vw 72px;
}

.concept-text p{
  line-height: 2.6;
  padding-bottom: 22px;
  letter-spacing: 0.088em;
}

/*--- concept image ---*/
div.concept-mainImage{
  position: relative;
  padding: 13vw;
  overflow: hidden;
}

div.concept-mainImage::before{
  content: "";
  position: fixed;
  background: url(img/concept-image.jpg) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 100vh;
  z-index: -1;
  top: 0;
  left: 0;
  display: block;
}

.concept-mainImage_inner::before,
.concept-mainImage_inner::after{
  position: absolute;
  content: "";
  background: var(--color-white);
  width: 100%;
  height: 1px;
  left: 0;
}

.concept-mainImage_inner::before{
  top: 1vw;
  z-index: 1;
}

.concept-mainImage_inner::after{
  bottom: 1vw;
}

/*--------------
shop information
--------------*/
.shopinfo{
  padding-top: min(132px, 20vw);
  background: var(--color-beige);
}

.shopinfo .contents{
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  gap: 4em;
  padding-bottom: 120px;
}

.si-mainImage,
.shopinfo-area{
  width: 48%;
}

picture.si-mainImage{
  overflow: hidden;
  display: block;
}

picture.si-mainImage img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.shopinfo-area{
  display: flex;
  flex-direction: column;
  gap: 2.2em;
}

.shopinfo-area .googleMap{
  padding-bottom: 40.25%;
  margin-bottom: 8px;
}

div.-area_title{
  display: flex;
  justify-content: space-between;
  padding-bottom: 16px;
  align-items: flex-end;
}

div.-area_title h3{
  color: var(--color-blue);
  line-height: 2;
}

div.-area_title h3 span._title-sub{
  display: block;
  font-size: min(1.6rem,5.83vw);
}

h3._title-chainon img{
  display: block;
  width: min(164px, 35vw);
}

h3._title-ichiren ruby{
  line-height: 1.6;
}

h3._title-ichiren ._title-big{
  font-size: min(2.83rem,5.83vw);
  line-height: 1.4;
}

div.-area_title ul{
  display: flex;
  justify-content: end;
  gap:8px;
  align-items: center;
}

div.-area_title ul li{
  width: 26px;
}

div.-area_title ul li a{
  display: block;
}

div.-area_title ul li a:hover svg.icon-path{
  fill: var(--color-blue);
}

div.-area_title ul li a svg{
  display: block;
}

ul.shopInfo-date{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shopInfo-chainon .shopInfo-date{
  margin-bottom:min(24px,4vw);
}

.shopInfo-chainon a.linkBox{
  margin: auto 0 0 0;
  max-width: 184px;
  width: 80%;
}

/*--------------
photo slider
--------------*/
.photoSlide-area{
  background: var(--color-beige);
  padding-bottom: 112px;
}

.photoSlide-area .swiper-slide{
  padding: 0 2px;
}

/*--------------
linkArea
--------------*/
.top-linkArea{
  background: var(--color-beige);
  padding-bottom: 112px;
}

.top-linkArea img{
  transition: ease .5s;
}

.top-linkArea ul{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2em;
}

.top-linkArea ul a{
  display: block;
}

.top-linkArea ul a:hover img{
  opacity: 0.6;
  transform: scale(1.04);
}

/*--------------
order/style
--------------*/
.order{
  padding-bottom: 120px;
  background: var(--color-beige);
}

.order-text{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.order-text p{
  text-align: center;
  padding-bottom: 4px;
}

ul.order-originalImage{
  display: flex;
  padding-top: 32px;
  justify-content: center;
}

ul.order-originalImage li{
  width: calc(100% / 4);
}

div.-originalImage_price{
  padding-top: 12px;
}

.order-link{
  width: 100%;
}

/*--------------
Instagram
--------------*/
.instagram{
  position: relative;
  padding-bottom: 132px;
  text-align: center;
  z-index: 1;
  padding-top: 3em;
  background: var(--color-beige);
}

.instagram::after{
  position: absolute;
  content: "";
  width: 100%;
  height: min(310px, 54vw);
  top: 0;
  left: 0;
  background: #b8c9d0;
  z-index: -1;
}

h3.instagram-title{
  padding-bottom: 2em;
  font-size: min(2.83rem,5.83vw);
  position: relative;
}

h3.instagram-title::before{
  position: absolute;
  content: "";
  background: url(img/icon-arrow.svg) no-repeat center;
  background-size: 100%;
  width: 10px;
  height: 14px;
  transform: translateY(-50%);
  left: 50%;
  bottom: 30px;
}

.instagram-link{
  margin: 32px auto 0;
}

/*--------------
contact
--------------*/
.contact{
  border-top: solid 1px var(--color-gray);
  padding: 82px 0;
  text-align: center;
  background: var(--color-beige);
}

.contact a{
  display: block;
}

.contact h3{
  font-size: 2.24rem;
  padding-bottom: min(24px, 2.4vw);
}

.contact ul{
  display: flex;
  flex-wrap: wrap;
}

.contact ul li{
  width: 50%;
  border-right: solid 1px var(--color-gray);
  border-bottom: solid 1px var(--color-gray);
}

.contact ul li:nth-of-type(1){
  border-top: solid 1px var(--color-gray);
}

.contact ul li:nth-of-type(1),
.contact ul li:nth-of-type(3){
  border-left: solid 1px var(--color-gray);
}

.contact ul li:nth-of-type(2){
  border-top: solid 1px var(--color-gray);
}

.contact ul li a{
  font-size: min(1.83rem,4.12vw);
  padding: 20px 16px;
  line-height: 1.2;
}

.contact ul li a span{
  position: relative;
}

.contact ul li a span::before{
  content: "";
  position: absolute;
  -webkit-mask-size: auto;
  mask-size: auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-repeat: no-repeat;
  background-color: var(--color-gray);
  width: 36px;
  height: 21px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.contact ul li a:hover{
  background: #e1e7e9;
}

li.-item_contact a span{
padding-left: 32px;
}

li.-item_contact a span::before{
  -webkit-mask: url("img/icon-contact.svg");
  mask: url("img/icon-contact.svg");
}

li.-item_order a span{
  padding-left: 40px;
}

li.-item_order a span::before{
  -webkit-mask: url("img/icon-order.svg");
  mask: url("img/icon-order.svg");
}

li.-item_tel a span{
  padding-left: 24px;
}

.contact ul li.-item_tel a span::before{
  -webkit-mask: url("img/icon-tel.svg");
  mask: url("img/icon-tel.svg");
  width: 19px;
  height: 24px;
}


li.-item_line a span::before{
  display: none;
}

.contact ul li:last-of-type a span{
  padding-left: 0;
}

/*--------------
footer
--------------*/
footer {
  position: relative;
  border-top: solid 1px var(--color-gray);
  font-size: 1.4rem;
  background: var(--color-beige);
}

.footer-info{
  padding: 40px 4vw;
  display: flex;
  justify-content: space-between;
}

.-info_left,.-info_right{
  width: 48%;
}

.-info_shopDate{
  display: flex;
  gap: 24px;
}

._shopDate-logo{
  width: 112px;
}

._shopDate-text{
  width: calc(100% - 112px);
}

._shopDate-text p{
  padding-bottom: 12px;
  line-height: 1.4;
}

._shopDate-text p span{
  display: block;
  font-size: 2.24rem;
  font-weight: 600;
}

._shopDate-text ul.footer-sns{
  display: flex;
  gap: 8px;
  padding-top: 12px;
}

._shopDate-text ul.footer-sns li{
  width: 26px;
}

ul.-info_menu{
  display: flex;
  gap: 24px;
  justify-content: end;
  align-items: center;
}

ul.-info_menu li{
  line-height: 1.1;
}

ul.-info_menu li.-item_ec{
  width: 24px;
}

ul.-info_menu li ul{
  display: flex;
}

ul.-info_menu li ul li{
  padding: 0 min(12px, 1.8vw);
  font-weight: var(--font-600);
}

ul.-info_menu li ul li:first-of-type{
  border-right: solid 1px var(--color-gray);
}

ul.-info_menu li a{
  text-transform: uppercase;
}

ul.-info_menu li a:hover,
ul.-info_menu li ul li a:hover,
.f-bottom ul li a:hover{
  color: var(--color-blue);
  font-weight: var(--font-600);
}

.f-bottom{
  border-top: solid 1px var(--color-gray);
}

.f-bottom ul{
  padding: min(40px, 4vw) 4vw 12px;
  display: flex;
  line-height: 1.2;
  font-size: min(1.4rem, 3.4vw);
}

.f-bottom ul li{
  padding: 0 min(12vw,1.83vw);
}

.f-bottom ul li:first-of-type{
  border-right: solid 1px var(--color-gray);
}

footer small{
  display: block;
  padding: 0 5vw 8px;
}

/*--------------
responsive
--------------*/
nav.globalMenuSp {
  display: none;
}


@media screen and (max-width:920px) {
/*--------------
common
--------------*/
main.l-wrapper{
  padding: 60px 0px 0px 0px;
}

.contents-title{
  font-size: min(11.2vw,4rem);
  margin-bottom: 6vw;
}

/*----- fixed contact -----*/
.mobile-menu{
  display: block;
  transition: ease .5s;
  opacity: 0;
}

.mobile-contactFixed{
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 90%;
  max-width: 630px;
  transform: translate(-50%,-4vw);
  background: var(--color-blue);
  color: var(--color-white);
  z-index: 10;
  display: flex;
  padding: 12px 10px;
  border-radius: 50em;
  justify-content: center;
  text-align: center;
  align-items: center;
  transition: ease .5s;
}

.mobile-contactFixed .cart-icon_path{
  fill: var(--color-white);
}

.mobile-contactFixed .tel-icon_path,
.mobile-contactFixed .tel-stroke{
  stroke: var(--color-white);
}

.contact-icon_path{
  fill: none;
  stroke: var(--color-white);
  stroke-miterlimit: 10;
}

.-contactFixed_item{
  width: calc(100% / 2);
  padding: 0 2vw;
}

.-contactFixed_item:nth-of-type(1){
  border-right: solid 1px var(--color-white);
}

.-contactFixed_item a{
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  letter-spacing: 0.06em;
  gap: 1.4vw;
  font-size: min(3.7vw,1.83rem);
}

svg.-contactFixed-path{
  width: 7vw;
  height: auto;
  max-width: 27px;
}

.-contactFixed_tel svg.-contactFixed-path{
  width: 5vw;
  max-width: 24px;
}

.-contactFixed_item span{
  display: block;
}

.-contactFixed_item span small{
  display: block;
}


/*--------------
header
--------------*/
header{
  height: 60px;
}

header.js-headerScroll {
  height: 54px;
}

.headerMenu-list{
  display: none;
}

ul.headerMenu{
  display: none;
}

/*--- global nav ---*/
.openBtn,
ul.mobile-iconMenu{
display: block;
}

.g-nav{
  display: block;
}

/*--- fixed contents ---*/
ul.mobile-iconMenu{
  position: fixed;
  align-items: center;
  top: 14px;
  left: 58px;
  z-index: 3;
  max-width: 62px;
  width: 15vw;
  display: flex;
  gap: 0.5em;
}

ul.mobile-iconMenu li{
  width: calc(100% / 2);
}

ul.mobile-iconMenu li a{
  display: block;
}

 /*--------------
  KV
  --------------*/
.KV-inner {
  margin: 0 3.6vw;
}

.KV-copy{
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  width: 100%;
}

.KV-copy span.-copy_sub,
.KV-copy span.-copy_sub span{
  display: block;
}

 /*--------------
  contact
  --------------*/
  .contact {
    padding: 10vw 0;
  }

/*--------------
footer
--------------*/
._shopDate-text ul li span{
  display: block;
}


}

@media screen and (max-width:768px) {
 /*--------------
  common
  --------------*/
  :root{
    --ns-margin:6vw;
    --p-margin:3.4em;
    --s-margin:92px;
  }

  span.sp-block{
    display: block;
  }

  .g-nav{
    padding: 27vw 10vw 6vw;
  }

 /*--------------
  topics news
  --------------*/
  .news-wrapper{
    flex-wrap: wrap;
    gap: 0.3em;
  }

  .news-wrapper ul.topicsList{
    width: 100%;
  }

  .news-wrapper ul.topicsList li a{
    font-size: 1.4rem;
    gap: 12px;
    line-height: 1.5;
  }

   /*--------------
  concept
  --------------*/
  .concept-mainImage{
    height: 48vw;
  }

  .concept-text p span{
    display: block;
  }

   /*--------------
  info/order
  --------------*/
  .shopinfo .contents{
    padding: 0 4.83vw 16vw 0;
    gap: 2vw;
  }

  .si-mainImage{
    width: 17vw;
  }

  .shopinfo-area{
    width: 69vw;
  }

  .shopinfo-area .googleMap{
    padding-bottom: 50.25%;
    margin-bottom: 12px;
  }

  div.-area_title{
    flex-wrap: wrap;
    gap: 1em;
    padding-bottom:16px;
  }

  div.-area_title h3{
    width: 100%;
  }

  .top-linkArea ul{
    flex-wrap: wrap;
    gap: 1em 0.8em;
  }

  .top-linkArea ul li{
    width: calc((100% - 15px) / 2);
  }

  .order{
    padding-bottom: 16vw;
  }

  .order-text{
    flex-wrap: wrap;
  }

  .top-linkArea,
  .photoSlide-area{
    padding-bottom: 16vw;
  }

  ul.order-originalImage{
    flex-wrap: wrap;
    gap: 1.6em 0;
  }

  ul.order-originalImage li{
    width: calc(100% / 2);
  }

  div.-originalImage_price p span{
    display: block;
  }

   /*--------------
  instagram
  --------------*/
  .instagram{
    padding-bottom: 16vw;
    padding-top: 2em;
  }

  h3.instagram-title{
    padding-bottom: 1em;
  }

  h3.instagram-title::before{
    bottom: 3px;
  }

 /*--------------
  footer
  --------------*/
  .footer-info{
    flex-wrap: wrap;
    gap: 40px;
  }

  .-info_left, .-info_right {
    width: 100%;
  }

  ._shopDate-logo {
    width: 20vw;
  }

  ._shopDate-text{
    width: calc(100% - 20vw);
  }

  ._shopDate-text p{
    font-size: 1.24rem;
  }

  ._shopDate-text p span{
    font-size: 1.83rem;
  }

  .-info_shopDate{
    gap: 16px;
  }

  ul.-info_menu{
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1em;
  }

  footer small{
    padding: 16px 4vw;
    text-align: left;
  }
}

@media screen and (max-width:620px) {
  :root{
    --s-margin: 72px;
  }

  .contact ul li{
    width: 100%;
  }

  .contact ul li:nth-of-type(2){
    border-top: none;
    border-left: solid 1px var(--color-gray);
  }

  .contact ul li:nth-of-type(4){
    border-left: solid 1px var(--color-gray);
  }
}