@charset "UTF-8";

/*common*/
:root {
  --color00: #FFFFFF;
  --color01: #004ea2;
  --color02: #f29a76;
  --color03: #8aa3d4;
  --color04: #4facc9;
  --color05: #4fb48c;
  --color06: #8aa3d4;
  
  --color92: #eeeeee;
  --color93: #dddddd;
  --color94: #cccccc;
  --color95: #aaaaaa;
  --color96: #999999;
  --color97: #666666;
  --color98: #333333;
  --color99: #000000;
  
  --f_sans: "Noto Sans JP", sans-serif;
  --f_serif: "Noto Serif JP", serif;
  

}


html { scroll-behavior: smooth;}
html * { font-feature-settings: "palt";}
a { text-decoration: none;}
body { font-family: "Noto Sans JP", sans-serif; font-weight: 500; min-height: 100vh; background: var(--color00); letter-spacing: 0.5px;}
.wrap { width: 100%; margin: auto; padding: 0;}

a,
a:hover { transition: ease .5s;}

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

a img { transform: scale(1); transition: ease .5s;}
a:hover img { transform: scale(1); transition: ease .5s; opacity: 0.7;}



/*PC*/
@media print, screen and (min-width: 1366px) {

.pc { display: block;}
.pcBr { display: inline-block;}
.sp { display: none;}
.spBr { display: none;}

body { font-size: 18px;}

.wrap { width: 100%; min-height: 100vh; margin: 0; padding: 0; position: relative;}

header { margin: auto; position: absolute; top: 0; left: 0; width: 100%; z-index: 100;}
header.active { position: fixed; margin: auto; top: 0; left: 0; width: 100%; z-index: 100;}

header .inner { width: 1366px; height: 100px; margin: auto; display: flex; justify-content: space-between; align-items: center;}
header .inner h1 { width: 202px; height: auto;}
header .inner nav { width: 270px; display: flex; justify-content: flex-end; align-items: center;}
header .inner nav .btn_cart { width: 200px;}
header .inner nav .btn_cart a { display: block; width: 100%; height: 40px; background: var(--color00); border-radius: 40px; border: solid 1px var(--color02); color: var(--color02); align-content: center; padding: 0 0 0 60px; position: relative;}
header .inner nav .btn_cart a::before { content: ""; width: 27px; height: 28px; background: url(../images/header/cart.svg) no-repeat; background-size: cover; position: absolute; top: 0; bottom: 0; left: 25px; margin: auto; transition: ease .5s;}
header .inner nav .btn_cart a:hover { display: block; width: 100%; height: 40px; background: var(--color02); border-radius: 40px; border: solid 1px var(--color02); color: var(--color99); align-content: center; padding: 0 0 0 60px; position: relative;}
header .inner nav .btn_cart a:hover::before { content: ""; width: 27px; height: 28px; background: url(../images/header/cart.svg) no-repeat; background-size: cover; position: absolute; top: 0; bottom: 0; left: 25px; margin: auto; filter: brightness(0); transition: ease .5s;}

header .inner nav .hamburger { width: 40px; height: 40px;}
header .inner nav .hamburger a { display: block; width: 100%; height: 40px; cursor: pointer; position: relative;}
header .inner nav .hamburger a span { width: 34px; height: 2px; background: var(--color00); position: absolute; left: 0; right: 0; margin: auto; transition: ease .3s;}
header .inner nav .hamburger a span:nth-of-type(1) { top: 10px;}
header .inner nav .hamburger a span:nth-of-type(2) { top: calc(50% - 1px);}
header .inner nav .hamburger a span:nth-of-type(3) { bottom: 10px;}

header .inner nav .hamburger.active { width: 40px; height: 40px;}
header .inner nav .hamburger.active a { display: block; width: 100%; height: 40px; cursor: pointer; position: relative;}
header .inner nav .hamburger.active a span { width: 34px; height: 2px; background: var(--color00); position: absolute; left: 0; right: 0; margin: auto; transform-origin: 50% 50%; transition: ease .3s;}
header .inner nav .hamburger.active a span:nth-of-type(1) { top: 10px; transform: rotate(30deg); top: calc(50% - 1px);}
header .inner nav .hamburger.active a span:nth-of-type(2) { top: calc(50% - 1px); transform: translateX(-100%); opacity: 0;}
header .inner nav .hamburger.active a span:nth-of-type(3) { bottom: 10px; transform: rotate(-30deg); bottom: calc(50% - 1px);}

.spMenu { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: var(--color01); z-index: 50; transform: translateY(-100%); transition: ease .3s; opacity: 0;}
.spMenu.open { display: block; position: fixed; top: 0; left: 0; left: 0; right: 0; background: var(--color01); z-index: 50; transform: translateY(0%); transition: ease .3s; opacity: 1;}
.spMenu .box { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%;}
.spMenu .box .item {}
.spMenu .box .item li { text-align: center; margin: 15px 0;}
.spMenu .box .item li a { font-size: 80px; font-family: "Roboto", sans-serif; font-style: italic; font-weight: 700; color: var(--color00);}
.spMenu .box .list { width: 480px; display: flex; justify-content: space-between; margin: 50px auto 0;}
.spMenu .box .list li { width: 220px;}
.spMenu .box .list li a { width: 100%; height: 46px; display: block; border: solid 1px var(--color00); font-size: 22px; color: var(--color00); text-align: center; align-content: center;}
.spMenu .box .list li a:hover { width: 100%; height: 46px; display: block; border: solid 1px var(--color00); font-size: 22px; color: var(--color01); text-align: center; align-content: center; background: var(--color00);}


footer { width: 100%; height: 180px; align-content: center;}
footer .txt { text-align: center;}
footer .txt p { font-size: 19px;}
footer .txt p a {}
footer .txt img { width: 325px; height: auto; margin: 10px auto 0;}



/*-----------------------*/

.common_links { margin: 50px 0 0;}
.common_links ul { width: 480px; margin: 0 auto 30px; display: flex; justify-content: center; font-size: 18px;}

/*.common_links ul li:nth-of-type(1) { width: 200px;}
.common_links ul li:nth-of-type(1) a { width: 100%; height: 44px; display: block; background: var(--color00); border: solid 2px var(--color02); border-radius: 50px; align-content: center; padding-left: 50px; color: var(--color02); position: relative;}
.common_links ul li:nth-of-type(1) a::before { content: ""; background: url(../images/common/icon_cart.svg) no-repeat; background-size: cover; width: 28px; height: 29px; position: absolute; top: 0; bottom: 0; left: 20px; margin: auto; transition: ease .5s;}

.common_links ul li:nth-of-type(1) a:hover { background: var(--color02); color: var(--color99);}
.common_links ul li:nth-of-type(1) a:hover::before { content: ""; filter: brightness(0); transition: ease .5s;}*/

.common_links ul li:nth-of-type(1) { width: 254px;}
.common_links ul li:nth-of-type(1) a { width: 100%; height: 44px; display: block; background: var(--color00); border: solid 2px var(--color03); border-radius: 50px; align-content: center; padding-left: 70px; color: var(--color03); position: relative;}
.common_links ul li:nth-of-type(1) a::before { content: ""; background: url(../images/common/icon_download.svg) no-repeat; background-size: cover; width: 35px; height: 26px; position: absolute; top: 0; bottom: 0; left: 20px; margin: auto; transition: ease .5s;}

.common_links ul li:nth-of-type(1) a:hover { background: var(--color03); color: var(--color99);}
.common_links ul li:nth-of-type(1) a:hover::before { content: ""; filter: brightness(0); transition: ease .5s;}

.common_links p { padding: 20px 0 50px;}
.common_links p a { display: flex; justify-content: space-between; align-items: center; width: 140px; margin: auto; cursor: pointer;}
.common_links p a .icon { width: 50px; height: 50px; border: solid 1px var(--color99); border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; transition: ease .5s;}
.common_links p a .icon::before { content: ""; width: 20px; height: 2px; background: var(--color99); display: inline-block; position: absolute; transition: ease .5s;}

.common_links p a:hover .icon { width: 50px; height: 50px; background: var(--color99); border: solid 1px var(--color99); border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; transition: ease .5s;}
.common_links p a:hover .icon::before { content: ""; background: var(--color00); transition: ease .5s;}


.w1366 { width: 1366px; margin: 0 auto;}
.w1000 { width: 1000px; margin: 0 auto;}

}



/*PC*/
@media print, screen and (min-width: 769px) and ( max-width: 1365px) {

.pc { display: block;}
.pcBr { display: inline-block;}
.sp { display: none;}
.spBr { display: none;}

body { font-size: 1.318vw;}

.wrap { width: 100%; min-height: 100vh; margin: 0; padding: 0; position: relative;}

header { margin: auto; position: absolute; top: 0; left: 0; width: 100%; z-index: 100;}
header .inner { width: 90vw; height: 7.321vw; margin: auto; display: flex; justify-content: space-between; align-items: center;}
header .inner h1 { width: 14.788vw; height: auto;}
header .inner nav { width: 19.766vw; display: flex; justify-content: flex-end; align-items: center;}
header .inner nav .btn_cart { width: 14.641vw;}
header .inner nav .btn_cart a { display: block; width: 100%; height: 2.928vw; background: var(--color00); border-radius: 2.928vw; border: solid 1px var(--color02); color: var(--color02); align-content: center; padding: 0 0 0 4.392vw; position: relative;}
header .inner nav .btn_cart a::before { content: ""; width: 1.977vw; height: 2.05vw; background: url(../images/header/cart.svg) no-repeat; background-size: cover; position: absolute; top: 0; bottom: 0; left: 1.83vw; margin: auto; transition: ease .5s;}
header .inner nav .btn_cart a:hover { display: block; width: 100%; height: 2.928vw; background: var(--color02); border-radius: 2.928vw; border: solid 1px var(--color02); color: var(--color099); align-content: center; padding: 0 0 0 4.392vw; position: relative;}
header .inner nav .btn_cart a:hover::before { content: ""; width: 1.977vw; height: 2.05vw; background: url(../images/header/cart.svg) no-repeat; background-size: cover; position: absolute; top: 0; bottom: 0; left: 1.83vw; margin: auto; filter: brightness(0); transition: ease .5s;}
header .inner nav .hamburger { width: 2.928vw; height: 2.928vw;}
header .inner nav .hamburger a { display: block; width: 100%; height: 2.928vw; cursor: pointer; position: relative;}
header .inner nav .hamburger a span { width: 2.489vw; height: 2px; background: var(--color00); position: absolute; left: 0; right: 0; margin: auto; transition: ease .3s;}
header .inner nav .hamburger a span:nth-of-type(1) { top: 0.732vw;}
header .inner nav .hamburger a span:nth-of-type(2) { top: calc(50% - 1px);}
header .inner nav .hamburger a span:nth-of-type(3) { bottom: 0.732vw;}

header .inner nav .hamburger.active { width: 2.928vw; height: 2.928vw;}
header .inner nav .hamburger.active a { display: block; width: 100%; height: 2.928vw; cursor: pointer; position: relative;}
header .inner nav .hamburger.active a span { width: 2.489vw; height: 0.146vw; background: var(--color00); position: absolute; left: 0; right: 0; margin: auto; transform-origin: 50% 50%; transition: ease .3s;}
header .inner nav .hamburger.active a span:nth-of-type(1) { top: 0.732vw; transform: rotate(30deg); top: calc(50% - 0.073vw);}
header .inner nav .hamburger.active a span:nth-of-type(2) { top: calc(50% - 0.073vw); transform: translateX(-100%); opacity: 0;}
header .inner nav .hamburger.active a span:nth-of-type(3) { bottom: 0.732vw; transform: rotate(-30deg); bottom: calc(50% - 0.073vw);}

.spMenu { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: var(--color01); z-index: 50; transform: translateY(-100%); transition: ease .3s; opacity: 0;}
.spMenu.open { display: block; position: fixed; top: 0; left: 0; left: 0; right: 0; background: var(--color01); z-index: 50; transform: translateY(0%); transition: ease .3s; opacity: 1;}
.spMenu .box { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%;}
.spMenu .box .item {}
.spMenu .box .item li { text-align: center; margin: 1.098vw 0;}
.spMenu .box .item li a { font-size: 5.857vw; font-family: "Roboto", sans-serif; font-style: italic; font-weight: 700; color: var(--color00);}
.spMenu .box .list { width: 35.139vw; display: flex; justify-content: space-between; margin: 3.66vw auto 0;}
.spMenu .box .list li { width: 16.105vw;}
.spMenu .box .list li a { width: 100%; height: 3.367vw; display: block; border: solid 1px var(--color00); font-size: 1.611vw; color: var(--color00); text-align: center; align-content: center;}
.spMenu .box .list li a:hover { width: 100%; height: 3.367vw; display: block; border: solid 1px var(--color00); font-size: 1.611vw; color: var(--color01); text-align: center; align-content: center; background: var(--color00);}


footer { width: 100%; height: 13.177vw; align-content: center;}
footer .txt { text-align: center;}
footer .txt p { font-size: 1.391vw;}
footer .txt p a {}
footer .txt img { width: 23.792vw; height: auto; margin: 0.732vw auto 0;}


/*-----------------------*/

.common_links { margin: 3.66vw 0 0;}
.common_links ul { width: 35.139vw; margin: 0 auto 2.196vw; display: flex; justify-content: center; font-size: 1.318vw;}

/*.common_links ul li:nth-of-type(1) { width: 14.641vw;}
.common_links ul li:nth-of-type(1) a { width: 100%; height: 3.221vw; display: block; background: var(--color00); border: solid 2px var(--color02); border-radius: 3.66vw; align-content: center; padding-left: 3.66vw; color: var(--color02); position: relative;}
.common_links ul li:nth-of-type(1) a::before { content: ""; background: url(../images/common/icon_cart.svg) no-repeat; background-size: cover; width: 2.05vw; height: 2.123vw; position: absolute; top: 0; bottom: 0; left: 1.464vw; margin: auto; transition: ease .5s;}

.common_links ul li:nth-of-type(1) a:hover { background: var(--color02); color: var(--color99);}
.common_links ul li:nth-of-type(1) a:hover::before { content: ""; filter: brightness(0); transition: ease .5s;}*/

.common_links ul li:nth-of-type(1) { width: 18.594vw;}
.common_links ul li:nth-of-type(1) a { width: 100%; height: 3.221vw; display: block; background: var(--color00); border: solid 2px var(--color03); border-radius: 3.66vw; align-content: center; padding-left: 5.124vw; color: var(--color03); position: relative;}
.common_links ul li:nth-of-type(1) a::before { content: ""; background: url(../images/common/icon_download.svg) no-repeat; background-size: cover; width: 2.562vw; height: 1.903vw; position: absolute; top: 0; bottom: 0; left: 1.464vw; margin: auto; transition: ease .5s;}

.common_links ul li:nth-of-type(1) a:hover { background: var(--color03); color: var(--color99);}
.common_links ul li:nth-of-type(1) a:hover::before { content: ""; filter: brightness(0); transition: ease .5s;}

.common_links p { padding: 1.464vw 0 3.66vw;}
.common_links p a { display: flex; justify-content: space-between; align-items: center; width: 10.249vw; margin: auto; cursor: pointer;}
.common_links p a .icon { width: 3.66vw; height: 3.66vw; border: solid 1px var(--color99); border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; transition: ease .5s;}
.common_links p a .icon::before { content: ""; width: 1.464vw; height: 0.146vw; background: var(--color99); display: inline-block; position: absolute; transition: ease .5s;}

.common_links p a:hover .icon { width: 3.66vw; height: 3.66vw; background: var(--color99); border: solid 1px var(--color99); border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; transition: ease .5s;}
.common_links p a:hover .icon::before { content: ""; background: var(--color00); transition: ease .5s;}


.w1366 { width: 100vw; margin: 0 auto;}
.w1000 { width: 73.206vw; margin: 0 auto;}

}



/*PC*/
/*@media print, screen and (min-width: 769px) and ( max-width: 1919px) {}*/



/*sp*/
@media only screen and (max-width: 768px) {
.pc { display: none;}
.pcBr { display: none;}
.sp { display: block;}
.spBr { display: inline-block;}

body { font-size: 2.344vw;}

.wrap { width: 100%; min-height: 100vh; margin: 0; padding: 0; position: relative;}

header { margin: auto; position: absolute; top: 0; left: 0; width: 100%; z-index: 100;}
header.active { position: fixed; margin: auto; top: 0; left: 0; width: 100%; z-index: 100;}

header .inner { width: auto; height: 15.625vw; margin: 0 6.25vw; display: flex; justify-content: space-between; align-items: center;}
header .inner h1 { width: 37.031vw; height: auto;}
header .inner nav { width: 33.438vw; display: flex; justify-content: flex-end; align-items: center;}
header .inner nav .btn_cart { width: 25vw;}
header .inner nav .btn_cart a { display: block; width: 100%; height: 5vw; background: var(--color00); border-radius: 6.25vw; border: solid 1px var(--color02); color: var(--color02); align-content: center; padding: 0 0 0 6.25vw; position: relative;}
header .inner nav .btn_cart a::before { content: ""; width: 4.219vw; height: 4.375vw; background: url(../images/header/cart.svg) no-repeat; background-size: cover; position: absolute; top: 0; bottom: 0; left: 3.906vw; margin: auto; transition: ease .5s;}
header .inner nav .btn_cart a:hover { display: block; width: 100%; height: 5vw; background: var(--color02); border-radius: 6.25vw; border: solid 1px var(--color02); color: var(--color99); align-content: center; padding: 0 0 0 9.375vw; position: relative;}
header .inner nav .btn_cart a:hover::before { content: ""; width: 4.219vw; height: 4.375vw; background: url(../images/header/cart.svg) no-repeat; background-size: cover; position: absolute; top: 0; bottom: 0; left: 3.906vw; margin: auto; filter: brightness(0); transition: ease .5s;}

header .inner nav .hamburger { width: 6.25vw; height: 6.25vw;}
header .inner nav .hamburger a { display: block; width: 100%; height: 6.25vw; cursor: pointer; position: relative;}
header .inner nav .hamburger a span { width: 5.313vw; height: 2px; background: var(--color00); position: absolute; left: 0; right: 0; margin: auto; transition: ease .3s;}
header .inner nav .hamburger a span:nth-of-type(1) { top: 1.563vw;}
header .inner nav .hamburger a span:nth-of-type(2) { top: calc(50% - 0.156vw);}
header .inner nav .hamburger a span:nth-of-type(3) { bottom: 1.563vw;}

header .inner nav .hamburger.active { width: 6.25vw; height: 6.25vw;}
header .inner nav .hamburger.active a { display: block; width: 100%; height: 6.25vw; cursor: pointer; position: relative;}
header .inner nav .hamburger.active a span { width: 5.313vw; height: 0.313vw; background: var(--color00); position: absolute; left: 0; right: 0; margin: auto; transform-origin: 50% 50%; transition: ease .3s;}
header .inner nav .hamburger.active a span:nth-of-type(1) { top: 1.563vw; transform: rotate(30deg); top: calc(50% - 0.156vw);}
header .inner nav .hamburger.active a span:nth-of-type(2) { top: calc(50% - 0.156vw); transform: translateX(-100%); opacity: 0;}
header .inner nav .hamburger.active a span:nth-of-type(3) { bottom: 1.563vw; transform: rotate(-30deg); bottom: calc(50% - 0.156vw);}

.spMenu { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: var(--color01); z-index: 50; transform: translateY(-100%); transition: ease .3s; opacity: 0;}
.spMenu.open { display: block; position: fixed; top: 0; left: 0; left: 0; right: 0; background: var(--color01); z-index: 50; transform: translateY(0%); transition: ease .3s; opacity: 1;}
.spMenu .box { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%;}
.spMenu .box .item {}
.spMenu .box .item li { text-align: center; margin: 2.344vw 0;}
.spMenu .box .item li a { font-size: 7.813vw; font-family: "Roboto", sans-serif; font-style: italic; font-weight: 700; color: var(--color00);}
.spMenu .box .list { width: 56.25vw; display: flex; justify-content: space-between; margin: 7.813vw auto 0;}
.spMenu .box .list li { width: 26.563vw;}
.spMenu .box .list li a { width: 100%; height: 5.938vw; display: block; border: solid 1px var(--color00); font-size: 2.656vw; color: var(--color00); text-align: center; align-content: center;}
.spMenu .box .list li a:hover { width: 100%; height: 5.938vw; display: block; border: solid 1px var(--color00); font-size: 2.656vw; color: var(--color01); text-align: center; align-content: center; background: var(--color00);}


footer { width: 100%; height: 22.813vw; align-content: center;}
footer .txt { text-align: center;}
footer .txt p { font-size: 2.344vw;}
footer .txt p a {}
footer .txt img { width: 40.938vw; height: auto; margin: 1.563vw auto 0;}



/*-----------------------*/

.common_links { margin: 7.813vw 0 0;}
.common_links ul { width: 65.625vw; margin: 0 auto 4.688vw; display: flex; justify-content: center; font-size: 2.344vw;}

/*.common_links ul li:nth-of-type(1) { width: 28.125vw;}
.common_links ul li:nth-of-type(1) a { width: 100%; height: 5.625vw; display: block; background: var(--color00); border: solid 2px var(--color02); border-radius: 7.813vw; align-content: center; padding-left: 7.813vw; color: var(--color02); position: relative;}

.common_links ul li:nth-of-type(1) a::before { content: ""; background: url(../images/common/icon_cart.svg) no-repeat; background-size: cover; width: 3.594vw; height: 2.969vw; position: absolute; top: 0; bottom: 0; left: 3.125vw; margin: auto; transition: ease .5s;}
.common_links ul li:nth-of-type(1) a:hover { background: var(--color02); color: var(--color99);}
.common_links ul li:nth-of-type(1) a:hover::before { content: ""; filter: brightness(0); transition: ease .5s;}*/

.common_links ul li:nth-of-type(1) { width: 35vw;}
.common_links ul li:nth-of-type(1) a { width: 100%; height: 5.625vw; display: block; background: var(--color00); border: solid 2px var(--color03); border-radius: 7.813vw; align-content: center; padding-left: 10.938vw; color: var(--color03); position: relative;}

.common_links ul li:nth-of-type(1) a::before { content: ""; background: url(../images/common/icon_download.svg) no-repeat; background-size: cover; width: 4.375vw; height: 2.969vw; position: absolute; top: 0; bottom: 0; left: 3.125vw; margin: auto; transition: ease .5s;}
.common_links ul li:nth-of-type(1) a:hover { background: var(--color03); color: var(--color99);}
.common_links ul li:nth-of-type(1) a:hover::before { content: ""; filter: brightness(0); transition: ease .5s;}

.common_links p { padding: 0 0 7.813vw;}
.common_links p a { display: flex; justify-content: space-between; align-items: center; width: 15.625vw; margin: auto; cursor: pointer;}
.common_links p a .icon { width: 6.25vw; height: 6.25vw; border: solid 1px var(--color99); border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; transition: ease .5s;}
.common_links p a .icon::before { content: ""; width: 3.125vw; height: 0.313vw; background: var(--color99); display: inline-block; position: absolute; transition: ease .5s;}

.common_links p a:hover .icon { background: var(--color99);  transition: ease .5s;}
.common_links p a:hover .icon::before { content: ""; background: var(--color00); transition: ease .5s;}


.w1366 { width: 100%; margin: 0 auto;}
.w1000 { width: 100%; margin: 0 auto;}


}



/*sp*/
@media screen and (width: 640px) {

.pc { display: none;}
.pcBr { display: none;}
.sp { display: block;}
.spBr { display: inline-block;}

body { font-size: 15px;}

.wrap { width: 100%; min-height: 100vh; margin: 0; padding: 0; position: relative;}

header { margin: auto; position: absolute; top: 0; left: 0; width: 100%; z-index: 100;}
header.active { position: fixed; margin: auto; top: 0; left: 0; width: 100%; z-index: 100;}

header .inner { width: auto; height: 100px; margin: 0 40px; display: flex; justify-content: flex-end; align-items: center;}
header .inner h1 { width: 237px; height: auto;}
header .inner nav { width: 214px; display: flex; justify-content: space-between; align-items: center;}
header .inner nav .btn_cart { width: 160px;}
header .inner nav .btn_cart a { display: block; width: 100%; height: 32px; background: var(--color00); border-radius: 40px; border: solid 1px var(--color02); color: var(--color02); align-content: center; padding: 0 0 0 40px; position: relative;}
header .inner nav .btn_cart a::before { content: ""; width: 27px; height: 28px; background: url(../images/header/cart.svg) no-repeat; background-size: cover; position: absolute; top: 0; bottom: 0; left: 25px; margin: auto; transition: ease .5s;}
header .inner nav .btn_cart a:hover { display: block; width: 100%; height: 32px; background: var(--color02); border-radius: 40px; border: solid 1px var(--color02); color: var(--color99); align-content: center; padding: 0 0 0 60px; position: relative;}
header .inner nav .btn_cart a:hover::before { content: ""; width: 27px; height: 28px; background: url(../images/header/cart.svg) no-repeat; background-size: cover; position: absolute; top: 0; bottom: 0; left: 25px; margin: auto; filter: brightness(0); transition: ease .5s;}

header .inner nav .hamburger { width: 40px; height: 40px;}
header .inner nav .hamburger a { display: block; width: 100%; height: 40px; cursor: pointer; position: relative;}
header .inner nav .hamburger a span { width: 34px; height: 2px; background: var(--color00); position: absolute; left: 0; right: 0; margin: auto; transition: ease .3s;}
header .inner nav .hamburger a span:nth-of-type(1) { top: 10px;}
header .inner nav .hamburger a span:nth-of-type(2) { top: calc(50% - 1px);}
header .inner nav .hamburger a span:nth-of-type(3) { bottom: 10px;}

header .inner nav .hamburger.active { width: 40px; height: 40px;}
header .inner nav .hamburger.active a { display: block; width: 100%; height: 40px; cursor: pointer; position: relative;}
header .inner nav .hamburger.active a span { width: 34px; height: 2px; background: var(--color00); position: absolute; left: 0; right: 0; margin: auto; transform-origin: 50% 50%; transition: ease .3s;}
header .inner nav .hamburger.active a span:nth-of-type(1) { top: 10px; transform: rotate(30deg); top: calc(50% - 1px);}
header .inner nav .hamburger.active a span:nth-of-type(2) { top: calc(50% - 1px); transform: translateX(-100%); opacity: 0;}
header .inner nav .hamburger.active a span:nth-of-type(3) { bottom: 10px; transform: rotate(-30deg); bottom: calc(50% - 1px);}

.spMenu { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: var(--color01); z-index: 50; transform: translateY(-100%); transition: ease .3s; opacity: 0;}
.spMenu.open { display: block; position: fixed; top: 0; left: 0; left: 0; right: 0; background: var(--color01); z-index: 50; transform: translateY(0%); transition: ease .3s; opacity: 1;}
.spMenu .box { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%;}
.spMenu .box .item {}
.spMenu .box .item li { text-align: center; margin: 15px 0;}
.spMenu .box .item li a { font-size: 50px; font-family: "Roboto", sans-serif; font-style: italic; font-weight: 700; color: var(--color00);}
.spMenu .box .list { width: 360px; display: flex; justify-content: space-between; margin: 50px auto 0;}
.spMenu .box .list li { width: 170px;}
.spMenu .box .list li a { width: 100%; height: 38px; display: block; border: solid 1px var(--color00); font-size: 17px; color: var(--color00); text-align: center; align-content: center;}
.spMenu .box .list li a:hover { width: 100%; height: 38px; display: block; border: solid 1px var(--color00); font-size: 17px; color: var(--color01); text-align: center; align-content: center; background: var(--color00);}


footer { width: 100%; height: 146px; align-content: center;}
footer .txt { text-align: center;}
footer .txt p { font-size: 15px;}
footer .txt p a {}
footer .txt img { width: 262px; height: auto; margin: 10px auto 0;}



/*-----------------------*/

.common_links { margin: 50px 0 0;}
.common_links ul { width: 420px; margin: 0 auto 30px; display: flex; justify-content: space-between; font-size: 15px;}

/*.common_links ul li:nth-of-type(1) { width: 180px;}
.common_links ul li:nth-of-type(1) a { width: 100%; height: 36px; display: block; background: var(--color00); border: solid 2px var(--color02); border-radius: 50px; align-content: center; padding-left: 50px; color: var(--color02); position: relative;}

.common_links ul li:nth-of-type(1) a::before { content: ""; background: url(../images/common/icon_cart.svg) no-repeat; background-size: cover; width: 23px; height: 19px; position: absolute; top: 0; bottom: 0; left: 20px; margin: auto; transition: ease .5s;}
.common_links ul li:nth-of-type(1) a:hover { background: var(--color02); color: var(--color99);}
.common_links ul li:nth-of-type(1) a:hover::before { content: ""; filter: brightness(0); transition: ease .5s;}*/

.common_links ul li:nth-of-type(1) { width: 224px;}
.common_links ul li:nth-of-type(1) a { width: 100%; height: 36px; display: block; background: var(--color00); border: solid 2px var(--color03); border-radius: 50px; align-content: center; padding-left: 70px; color: var(--color03); position: relative;}

.common_links ul li:nth-of-type(1) a::before { content: ""; background: url(../images/common/icon_download.svg) no-repeat; background-size: cover; width: 28px; height: 19px; position: absolute; top: 0; bottom: 0; left: 20px; margin: auto; transition: ease .5s;}
.common_links ul li:nth-of-type(1) a:hover { background: var(--color03); color: var(--color99);}
.common_links ul li:nth-of-type(1) a:hover::before { content: ""; filter: brightness(0); transition: ease .5s;}

.common_links p { padding: 0 0 50px;}
.common_links p a { display: flex; justify-content: space-between; align-items: center; width: 100px; margin: auto; cursor: pointer;}
.common_links p a .icon { width: 40px; height: 40px; border: solid 1px var(--color99); border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; transition: ease .5s;}
.common_links p a .icon::before { content: ""; width: 20px; height: 2px; background: var(--color99); display: inline-block; position: absolute; transition: ease .5s;}

.common_links p a:hover .icon { background: var(--color99);  transition: ease .5s;}
.common_links p a:hover .icon::before { content: ""; background: var(--color00); transition: ease .5s;}


.w1366 { width: 100%; margin: 0 auto;}
.w1000 { width: 100%; margin: 0 auto;}


}