@charset "UTF-8";
.pc {
  display: none; }
  .wrapper > .container {
  margin: 0 7.03125%; }
html {
  font-size: 3.125vw;
  line-height: 2.4em;
  letter-spacing: 0.1em;
  height: auto; 
  position:fixed}
  @media only screen and (max-width: 768px) and (orientation: landscape) {
  html {
  font-size: 2vmin;
  line-height: 2.4em;
  letter-spacing: 0.1em; } }
header {
  width: 60%;
  top: 10px;
  padding-bottom: 0; }
header .logo {
  padding-top: 0.4rem;
  position: relative; }
header .logo img {
  width: 20.4rem; }
header .rightarea .nav {
  display: none; }
header .rightarea .sidenavtoggle {
  margin-left: 0; }
header .rightarea .sidenavtoggle img {
  width: 2.35rem; }
header .sidenav {
  z-index: 205;
  right: -100vw;
  width: 100vw;
  font-size: 1.15rem;
  overflow: auto;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  filter: alpha(opacity=0);
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0; }
header .sidenav .bg {
  margin-right: 100vw; }
header .sidenav .container {
  width: 100vw;
  padding: 1.6rem 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.95); }
header .sidenav .container .logo {
  margin-left: 2.3rem; }
header .sidenav .container .close {
  margin-right: 2.8rem;
  margin-top: 0.1428571429rem; }
header .sidenav .container .close img {
  width: 2.35rem; }
header .sidenav .container .base {
  position: static;
  padding-top: 0;
  padding-bottom: 0; }
header .sidenav .container ul.nav {
  display: block;
  background-color: #f2f2f2;
  padding: 2.5rem 0;
  list-style: none;
  letter-spacing: -0.5em;
  text-align: center;
  margin-top: 2.2rem; }
header .sidenav .container ul.nav li {
  display: inline-block;
  vertical-align: bottom;
  font-size: 1.4rem;
  line-height: 1em;
  letter-spacing: 0.2em; }
header .sidenav .container ul.nav li:not(:first-child)::before {
  content: "/";
  display: inline-block;
  padding: 0 1.5em; }
header .sidenav .container ul.nav li a {
  text-decoration: none;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
  transition: color 0.2s ease; }
header .sidenav .container ul.nav li a:active, header .sidenav .container ul.nav li a:hover {
  color: #999; }
footer {
display: none; }
.no-view {
  display: none !important; }
* {
  box-sizing: border-box; }
#navi_box {
  background: #fff; }
body {
  margin: 0;
  background: #f1f1f1;
  line-height: 1.5; }
#main_contents {
  display: flex;
  flex-wrap: wrap-reverse;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0 1%;
  margin-bottom: 40px;}
#main_contents #view_area .help_menu {
  position: absolute;
  width: 38px;
  left: 2%;
  bottom: 0.5%; }
#main_contents #view_area #popup-on:checked + .popup {
  position: fixed;
  display: block; }
#main_contents #view_area .popup  .icon-close {
  width: 30px;
  height: 30px; }
#main_contents #view_area .popup .popup-content .icon-close span {
  font-size: 20px;
  width: 30px;
  height: 30px; }
#main_contents #view_area .sp_pw_mogadigi {
  display: block;
  position: absolute;
  bottom: 1%;
  right: 1%;
  z-index: 5;
  width: 40%; }
#main_contents #menu_area {
  display: block;
  background: #ffffff;
  width: 100%;
  top: auto;
  bottom: 0;
  height: 300px;
  overflow-x: hidden;
  z-index: 5; 
  position:fixed}
#main_contents #menu_area #embroidery02_area {
  display: none; }
#main_contents #menu_area #menu-area {
  display: flex;
  overflow-x: hidden;
  height: 250px;
  width: 100%;
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: 0px 8px 10px -4px #ccc; }
  #main_contents #menu_area #menu-area dl dt span {
    left: 9%;}
#main_contents #menu_area.active {
  width: 100% !important;
  height: 50px; }
#main_contents #menu_area.active #sp_menu_height_btn::after {
  margin-top: -2px !important;
  -webkit-transform: rotate(-45deg) !important;
  transform: rotate(-45deg) !important; }
#main_contents #view_area #sub_btn_area {
  left: 15%;
  position: absolute;
  bottom: 0.5%; }
#main_contents #view_area #sub_btn_area button {
  /* background: none; */
  display: block;
  /* border: 0; */
  width: 40px;
  /* height: auto; */
  /* margin-bottom: 15px; */
  /* margin-left: 60px; */
  /* padding: 0;  */
}
#main_contents #menu_area #view_area button:first-child {
  margin-right: 10px; }
#main_contents #menu_area #view_area button img {
    display: block; }
#main_contents #menu_area .btn {
  display: none; }
#main_contents .btn {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 30%;
  height: 35px;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  margin: 5px 5px 0 auto; }
#main_contents .pw_mogadigi {
  display: none; } 
#main_contents #menu_area #menu-area .menu_btn {
  flex: 0 0 25%;
  /* padding: 85px 1%; */
  height: 100%;
  display: flex;
  align-items: center;
  border-right: 1px solid #ccc; }
#main_contents #menu_area #menu-area .menu_btn:last-child {
  border: none; }
#main_contents #menu_area #menu-area .menu_block {
  width: 100%;
  height: auto;
  display: block;
  align-items: center; }
#main_contents #menu_area #menu-area .menu_block .icon_area {
  width: 80%;
  margin: 0 auto; }
#main_contents #menu_area #menu-area .menu_block .icon_area img {
  width: 100%;
  height: auto; }
#main_contents #menu_area #menu-area .menu_block .menu_txt_area p {
  font-size: 13px;
  display: none; }
#main_contents #menu_area #menu-area .menu_block .menu_txt_area p span {
  font-size: 12px; }
#main_contents #menu_area #menu-area .menu_block .menu_txt_area .menu_text {
  display: block;
  color: #333;
  font-size: 12px;
  text-align: center; }
#main_contents #menu_area #menu-area .menu_block .menu_txt_area #em_detail_txt {
  display: flex;
  flex-wrap: wrap; }
#main_contents #menu_area #menu-area .menu_block .change_area {
  display: none; }
#main_contents #menu_area .price_box {
  display: flex;
  position: fixed;
  justify-content: space-between;
  bottom: 0;
  left: 0;
  align-items: center;
  background: #999;
  height: 50px;
  width: 100%;
  z-index: 10; }
#main_contents #menu_area .price_box .quantity {
  font-size: 15px;
  padding-left: 2%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 28%;
  color: #fff; }
#main_contents #menu_area .price_box .quantity input[type="number"] {
  border: 1px solid #999;
  border-radius: 5px;
  font-size: 16px;
  padding: 5px 2%;
  width: 60%;
  text-align: right;
  color: #333; }
#main_contents #menu_area .price_box .price {
  width: 58%;
  margin-left: 2%;
  color: #fff; }
#main_contents #menu_area .price_box .price .unit {
  display: none;
  text-align: right;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  padding-bottom: 3px;
  border-bottom: 1px solid #999; }
#main_contents #menu_area .price_box .price .unit span {
  font-size: 14px; }
#main_contents #menu_area .price_box .price .total {
  text-align: right;
  font-size: 16px;
  font-weight: bold; }
#main_contents #menu_area .price_box .price .total span {
  font-size: 13px; }
#main_contents nav {
  width: 100%;
  height: 250px;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
  position: fixed;
  background: #ffffff;
  bottom: -100%;
  left: 0;
  z-index: 10;
  transition: all .5s;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: none;
  box-shadow: 0px -10px 8px -5px #ccc inset; }
#main_contents nav.on {
  display: block; }
#main_contents nav.em_de {
  z-index: 10; }
#main_contents nav .side_menu_area {
  width: 100%;
  padding: 0 2% 30px; }
#main_contents nav .side_menu_area .gusset_description,
#main_contents nav .side_menu_area .pocket_description,
#main_contents nav .side_menu_area .embroidery_description {
  background: #fff;
  border-radius: 10px;
  border: none;
  margin-top: 10px;
  padding: 10px 5%; }
#main_contents nav .side_menu_area .gusset_description .sub_ttl,
#main_contents nav .side_menu_area .pocket_description .sub_ttl,
#main_contents nav .side_menu_area .embroidery_description .sub_ttl {
  text-align: center;
  margin-bottom: 20px;
  font-size: 16px; }
#main_contents nav .side_menu_area .gusset_description p,
#main_contents nav .side_menu_area .pocket_description p,
#main_contents nav .side_menu_area .embroidery_description p {
  font-size: 14px; }
#main_contents nav li {
  color: #fff;
  text-align: center;
  padding: 10px 0; }
#main_contents nav.em_de .side_menu_area .menu_ttl_area {
  display: flex;
  align-items: center;
  margin-bottom: 10px; }
#main_contents nav.em_de .side_menu_area .em_text_type {
  display: flex;
  align-items: center;
  flex-wrap: wrap; }
#main_contents nav.em_de .side_menu_area .em_text_type label {
  width: 15%;
  height: 55px;
  border: 1px solid #999;
  box-sizing: border-box;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 2%;
  margin-bottom: 10px;
  position: relative;
  font-size: 30px;
  font-family: "Midashi Go MB31"; }
#main_contents nav.em_de .side_menu_area .em_text_type label:nth-of-type(6n) {
  margin-right: 0; }
#main_contents nav.em_de .side_menu_area .em_text_type input[type="radio"]:checked + label::before {
  content: '';
  width: 100%;
  height: 100%;
  border: 3px solid #008385;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0; }
#main_contents nav.em_de .side_menu_area .em_text_type input[type="radio"]:checked + label::after {
  content: '';
  width: 25px;
  height: 25px;
  background: url("img/custom/icon_check.svg") no-repeat;
  position: absolute;
  top: -5px;
  right: -5px; }
#main_contents nav.em_de .side_menu_area #em_number_select {
  justify-content: center;
  margin-top: 20px; }
#main_contents nav.em_de .side_menu_area #em_number_select div:first-child {
  margin-right: 5%; }
#main_contents nav.em_de .side_menu_area #em_number_select div p {
  text-align: center; }
#main_contents nav.em_de .side_menu_area #em_number_select select::-ms-expand {
  display: none; }
#main_contents nav.em_de .side_menu_area #em_number_select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 20px;
  padding: 10px;
  font-size: 23px;
  line-height: 1.1em;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  width: 3.5em;
  text-align: center; }
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none; }
.menu_ttl_area {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: 104%;
  margin-left: -2%; }
.menu_ttl_area .sub_ttl {
  width: 100%;
  font-size: 14px;
  background: #333;
  color: #fff;
  padding: 2px;
  text-align: center; }
.back_btn,
.back_btn2 {
  position: fixed;
  margin-top: 12px;
  opacity: 0.8;
  right: 2%;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12; }
  .back_btn img,
  .back_btn2 img {
    width: 20px;
    height: 20px; }
.color_list .color_contents input[type="radio"]:checked + label dl dt::before {
  content: '';
  width: 130%;
  height: 160%;
  border: 3px solid #008385;
  box-sizing: border-box;
  position: absolute;
  top: -3px;
  left: -3px;}
.color_list .color_contents input[type="radio"]:checked + label dl dt::after {
  content: 'SELECT';
  width: 100%;
  font-size: 10px;
  color: #008385;
  text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, -1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
  text-align: center;
  font-weight: bold;
  position: absolute;
  top: 40%;
  left: 50%;
  margin-left: -50%; }
.color_list .color_contents label {
  margin-bottom: 5px; }
.color_list .color_contents dl {
  width: 60px;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; }
.color_list .color_contents dl dt {
  content: '';
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  position: relative;
  margin-bottom: 3px; }
.color_list .color_contents dl dt span {
  content: '';
  border-radius: 30px;
  display: block;
  width: 50px;
  height: 50px; }
.color_list .color_contents dl dd {
  text-align: center;
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  height: 2.2em; }
.color_list .select_contents {
  display: flex;
  justify-content: center; }
.color_list .select_contents input[type="radio"]:checked + label dl dt::before {
  content: '';
  width: 100%;
  height: 100%;
  border: 3px solid #008385;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0; }
.color_list .select_contents input[type="radio"]:checked + label dl dt::after {
  content: 'SELECT';
  width: 100%;
  font-size: 10px;
  color: #fff;
  background: #008385;
  text-align: center;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0; }
.color_list .select_contents label {
  width: 32%;
  height: auto;
  margin-right: 12%;
  text-align: center; }
.color_list .select_contents label:last-child {
  margin-right: 0; }
.color_list .select_contents label p {
  font-size: 14px; }
.color_list .select_contents dl {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; }
.color_list .select_contents dl dt {
  margin: 0 auto; }
.color_list .select_contents dl dt img {
  width: 100%;
  height: 100%;
  display: block; }
.color_list .select_contents dl dd {
  text-align: center;
  margin: 0;
  font-size: 13px; }
.color_list .select_contents_em {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px; }
.color_list .select_contents_em label {
  border: 1px solid #008385;
  padding: 5px 0;
  height: 40px;
  width: 40%;
  border-radius: 20px 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px; }
.color_list .select_contents_em label:last-child {
  border-radius: 0 20px 20px 0; }
.color_list .select_contents_em label div {
  text-align: center; }
.color_list .select_contents_em input[type="radio"]:checked + label {
  background: #008385;
  color: #fff; }
input[type="radio"] {
  display: none; }
input[type="radio"]:checked + label .thumb_img::before {
  content: '';
  width: 100%;
  height: 100%;
  border: 2px solid #008385;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0; }
input[type="radio"]:checked + label .thumb_img::after {
  content: 'VIEW';
  width: 100%;
  font-size: 12px;
  color: #fff;
  background: #008385;
  text-align: center;
  font-weight: bold;
  position: absolute;
  top: 0%;
  left: 0; }
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none; }
.cursor__inner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #008385;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  transition: background 0.2s linear, transform 0.4s ease-out; }
.cursor.is-hovering .cursor__inner {
  background: #999;
  transform: translate(-50%, -50%) scale(10); }
#message_sp{
  color: red;
  margin-left: 15%;
  position: absolute;
  margin-top: 12%;
  top: 0;
  right: 0;
  font-size: 10px;
}
#message_pc{
  display: none;
}
header #head_logo {
  width: 100px; }