@charset "UTF-8";
input[type="radio"]:disabled + label {
  background: #ccc; }
.no-view {
  display: none !important; }
* {
  box-sizing: border-box; }
html {
  overflow: hidden;
  height: 100vh; 
  font-size: 14px; }
header {
  padding-bottom: 0; }
#navi_box {
  background: #fff; }
body {
  margin: 0;
  background: #f1f1f1;
  line-height: 1.5; }
#main_contents {
  width: 100%;
  display: flex;}
#main_contents #view_area #sub_btn_area button {
  width: 70px;
  cursor: pointer;
  position: absolute;
  right: 1%;
  top: 3%;}

#main_contents #menu_area h1 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px; }
#main_contents #menu_area h2 {
  font-size: 23px;
  color: #999;
  margin-bottom: 20px;
  font-family: "見出ゴMB31";
  line-height: 1; }
#main_contents #menu_area #embroidery02_area {
  display: none; 
  margin-top: 20px;}
#main_contents #menu_area #menu-area {
  /* height: 620px; */
  width: 100%;
  position: relative; }
#main_contents #menu_area #menu-area .menu_block {
  width: 100%;
  height: 100px;
  padding: 0 2%;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-top: none;
  background: #fff;
  display: flex;
  align-items: center; }
#main_contents #menu_area #menu-area .menu_block:hover {
  cursor: pointer;
  background: #fafafa; }
#main_contents #menu_area #menu-area .menu_block .icon_area {
  width: 20%;
  text-align: center;
  margin-right: 2%; }
#main_contents #menu_area #menu-area .menu_block .icon_area img {
  width: 50px;
  height: 50px; }
#main_contents #menu_area #menu-area .menu_block .menu_txt_area {
  width: 55%;
  height: auto; }
#main_contents #menu_area #menu-area .menu_block .menu_txt_area p {
  font-size: 13px; }
#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 {
  color: #999;
  font-size: 12px; }
#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 {
  font-size: 13px;
  text-align: center;
  width: 25%;
  height: 50px;
  line-height: 50px;
  padding-top: 10px;
  border-left: 1px solid #ccc;
  position: relative; }
#main_contents #menu_area #menu-area .menu_block .change_area::before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0px;
  border-top: solid 2px #999;
  border-right: solid 2px #999;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -16px; }
#main_contents #menu_area #menu-area dl dt span {
  left: 5%;}
#main_contents #menu_area .price_box {
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0 30px;
  width: 100%; 
  padding-right: 5px;
  height: 130px;}
#main_contents #menu_area .price_box .quantity {
  font-size: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 35%;
  margin: 10px 0px 10px auto; }
#main_contents #menu_area .price_box .quantity input[type="number"] {
  border: 1px solid #999;
  border-radius: 5px;
  font-size: 16px;
  padding: 10px 5px;
  width: 60%;
  text-align: right; }
#main_contents #menu_area .price_box .price {
  width: 60%;
  min-width: 250px;
  margin-left: auto;
  margin-top: 5px; }
#main_contents #menu_area .price_box .price .unit {
  text-align: right;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
  padding-bottom: 3px;
  border-bottom: 1px solid #ccc; }
#main_contents #menu_area .price_box .price .unit span {
  font-size: 13px; }
#main_contents #menu_area .price_box .price .total {
  text-align: right;
  font-size: 20px;
  font-weight: bold; }
#main_contents #menu_area .price_box .price .total span {
  font-size: 14px; }
#main_contents #view_area .help_menu {
  position: absolute;
  left: 1%;
  bottom: 3%;
  width: 50px;
  height: 50px;}
#main_contents #view_area #popup-on:checked + .popup {
  display: block; }
nav {
  width: 100%;
  height: calc(100% + 1px);
  border: 1px solid #ccc;
  box-sizing: border-box;
  position: absolute;
  background: #f1f1f1;
  /* left: -100%; */
  right: -100%;
  top: -1px;
  z-index: 10;
  transition: all .5s;
  overflow-y: auto;
  overflow-x: clip;
  display: none; }
nav.on {
  display: block; }
nav.em_de {
  z-index: 10; }
nav .side_menu_area {
  width: 100%;
  padding: 20px 5%; 
  padding-bottom: 0px;}
nav .side_menu_area .gusset_description,
nav .side_menu_area .pocket_description,
nav .side_menu_area .embroidery_description {
  background: #fff;
  border-radius: 10px;
  border: none;
  margin-top: 50px;
  padding: 10px 5%; }
nav .side_menu_area .gusset_description .sub_ttl,
nav .side_menu_area .pocket_description .sub_ttl,
nav .side_menu_area .embroidery_description .sub_ttl {
  text-align: center;
  margin-bottom: 20px;
  font-size: 16px; }
nav .side_menu_area .gusset_description p,
nav .side_menu_area .pocket_description p,
nav .side_menu_area .embroidery_description p {
  font-size: 14px; }
nav li {
  color: #fff;
  text-align: center;
  padding: 10px 0; }
nav.em_de .side_menu_area .menu_ttl_area {
  display: flex;
  align-items: center;
  margin-bottom: 10px; }
nav.em_de .side_menu_area .em_text_type {
  display: flex;
  align-items: center;
  flex-wrap: wrap; }
nav.em_de .side_menu_area .em_text_type label {
  width: 15%;
  height: 70px;
  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"; }
nav.em_de .side_menu_area .em_text_type label:nth-of-type(6n) {
  margin-right: 0; }
nav.em_de .side_menu_area .em_text_type input[type="radio"]:checked + label::before {
  content: '';
  width: 140%;
  height: 140%;
  border: 3px solid #008385;
  box-sizing: border-box;
  position: absolute;
  top: -7px;
  left: -6px; }
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; }
nav.em_de .side_menu_area .em_text_type input[type="radio"]:disabled + label {
  background: #ccc; }
nav.em_de .side_menu_area #em_number_select {
  justify-content: center;
  margin-top: 20px; }
nav.em_de .side_menu_area #em_number_select div:first-child {
  margin-right: 5%; }
nav.em_de .side_menu_area #em_number_select div p {
  text-align: center; }
nav.em_de .side_menu_area #em_number_select select::-ms-expand {
  display: none; }
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; }
.menu_ttl_area .sub_ttl {
  width: 80%;
  text-align: center;
  font-size: 16px; }
.back_btn,
.back_btn2 {
  width: 10%;
  min-width: 2em;
  height: auto; }
  .back_btn img,
  .back_btn2 img {
    width: 80%;
    height: auto; }
.color_list .color_contents input[type="radio"]:checked + label dl dt::before {
  content: '';
  width: 155%;
  height: 170%;
  border: 3px solid #008385;
  box-sizing: border-box;
  position: absolute;
  top: -7px;
  left: -9px; }
.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: 34%; 
  left: -7%; }
.color_list .color_contents label {
  margin: 6px; }
.color_list .color_contents dl {
  width: 45px;
  height: 50px;
  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;}
.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: 140%;
  height: 140%;
  border: 3px solid #008385;
  box-sizing: border-box;
  position: absolute;
  top: -7px;
  left: -6px; }
.color_list .select_contents input[type="radio"]:checked + label dl dt::after {
  content: 'SELECT';
  font-size: 10px;
  color: #fff;
  background: #008385;
  text-align: center;
  font-weight: bold;
  position: absolute;
  top: 34%; 
  left: -7%; }
.color_list .select_contents label {
  width: 32%;
  min-width: 95px;
  height: auto;
  margin-right: 12%;
  text-align: center;
  display: inline-block; }
.color_list .select_contents label:last-child {
  margin-right: 0; }
.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;
  pointer-events: none; }
.color_list .select_contents dl dd {
  text-align: center;
  margin: 0;
  font-size: 13px; }
.color_list .select_contents p {
  font-size: 15px; }
.color_list .select_contents_em {
  display: flex;
  align-items: center;
  justify-content: center; 
  margin-bottom: 10px;}
.color_list .select_contents_em label {
  border: 1px solid #008385;
  padding: 5px 7%;
  width: 34%;
  height: 40px;
  border-radius: 20px 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em; }
.color_list .select_contents_em label:last-child {
  border-radius: 0 20px 20px 0; }
.color_list .select_contents_em input[type="radio"]:checked + label {
  background: #008385;
  color: #fff; }
input[type="radio"] {
  display: none; }
label:hover {
  cursor: pointer; }
input[type="radio"]:checked + label .thumb_img::before {
  content: '';
  width: 140%;
  height: 140%;
  border: 2px solid #008385;
  box-sizing: border-box;
  position: absolute;
  top: -7px;
  left: -6px; }
input[type="radio"]:checked + label .thumb_img::after {
  content: 'VIEW';
  width: 100%;
  font-size: 14px;
  color: #fff;
  background: #008385;
  text-align: center;
  font-weight: bold;
  position: absolute;
  top: 34%; 
  left: -7%; }
.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); }
.sp {
  display: none; }
.sp_pw_mogadigi {
  display: none;
}
#cartBtn_sp{
  display: none;
}
#message_sp{
  display: none;
}
#message_pc{
  color: red;
  margin-left: 20px;
}
header #head_logo {
  width: 200px; }