@charset "euc-jp";

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  base
--------------------------------
------------------------------*/

/*  01.  base
------------------------------*/
/*  base  */
html,body {width: 100%; height: 100%; margin: 0; padding: 0;}
body {font-family: Helvetica Neue,Helvetica,Arial,YuGothic,Yu Gothic,Þ⥴¥·¥Ã¥¯ÂÎ,Þ⥴¥·¥Ã¥¯,¥Ò¥é¥®¥Î³Ñ¥´ ProN W3,Hiragino Kaku Gothic ProN,¥Ò¥é¥®¥Î³Ñ¥´ Pro W3,Hiragino Kaku Gothic Pro,¥á¥¤¥ê¥ª,Meiryo,MS ¥´¥·¥Ã¥¯,MS Gothic,sans-serif; font-variant-ligatures: no-common-ligatures;}
h1,h2,h3,h4,h5,h6,h7,dl,dt,dd,ol,ul,li,p,a {margin: 0; padding: 0; word-break: break-all;}
ol,ul,li {list-style: none;}
a {display: block; text-decoration: none;}

/*  text style  */
.en {font-family: 'Vollkorn', serif;}
.en_hand {font-family: 'Tangerine', cursive;}

/*  clearfix  */
.clearfix::after {display: block; clear: both; content: "";}

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  header
/*  02.  header - logo
/*  03.  header - menu
--------------------------------
------------------------------*/

/*  01.  header
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  header  */
#head_wrap {position: fixed; float: left; width: 100%; height: auto; top: 0; left: 0; background-color: #FFF; box-shadow: 0px 0px 20px #AAA; z-index: 999;}
#head {width: 100%; max-width: 1200px; margin: auto;}
}

/*  sp  */
@media screen and (max-width: 979px) {
#head_wrap {position: fixed; width: 100%; height: 40px; top: 0; left: 0; background-color: #FFF; box-shadow: 0px 0px 20px #AAA; z-index: 999;}
#head {position: relative; float: left; width: 100%; height: auto;}
}

/*  02.  header - logo
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  header  *//*  logo  */
#head h1 {float: left; width: auto; height: auto; font-size: 0px; margin: 30px 20px 30px 20px;}
#head h1 a {display: block; width: 260px; height: 20px; line-height: 20px; background-size: 100%; background-position: center; background-repeat: no-repeat;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  header  *//*  logo  */
#head h1 {position: relative; width: 160px; height: 10px; margin: 15px auto; font-size: 0px;}
#head h1 a {display: block; width: 160px; height: 10px; background-size: 100%; background-position: center; background-repeat: no-repeat;}
}

/*  03.  header - cart
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  header  *//*  cart  */
#head_cart {clear: both; float: right; width: auto; height: auto; margin: -30px 20px 10px 0px;}
#head_cart a {position: relative; display: block; width: auto; height: 20px; line-height: 20px; font-size: 12px; font-weight: normal; text-align: center; color: #333;}
#head_cart a:hover {color: #777;}
#head_cart a span.en::after {content: ":"; margin-left: 5px; margin-right: 5px;}
#head_cart a span.num::after {content: "-"; margin-left: 5px; margin-right: 5px;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  header  *//*  cart  */
#head_cart {position: absolute; width: auto; height: auto; top: 10px; right: 10px;}
#head_cart a {position: relative; display: block; width: auto; height: 20px; line-height: 20px; font-size: 10px; font-weight: normal; text-align: center; letter-spacing: 1px; color: #333;}
#head_cart a:hover {color: #777;}
#head_cart a span.en::after {content: ":"; margin-left: 2px; margin-right: 2px;}
#head_cart a span.price {display: none;}
}

/*  03.  header - menu
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  header  *//*  menu  *//*  search  */
#menu_search {float: right; width: auto; height: auto; margin: 10px 20px 0px 0px;}
#menu_search .body {float: left; width: 240px; height: auto; border: 1px solid #EEE; box-sizing: border-box;}
#menu_search .body p {display: none;}
#menu_search .body input[type="text"],
#menu_search .body input[type="text"]:focus {float: left; width: calc(100% - 30px); height: 30px; line-height: 30px; padding: 5px; font-size: 12px; letter-spacing: 1px; background-color: #FFF; font-weight: normal; color: #333; box-sizing: border-box; outline: none; border: 0px; border-radius: 0px; -webkit-appearance: none;}
#menu_search .body input[type="submit"],
#menu_search .body input[type="submit"]:focus {float: left; width: 30px; height: 30px; line-height: 30px; font-size: 0px; background-color: #FFF; background-image: url("https://signal-garments.com/image_ec/icon_search.png"); background-size: 16px; background-position: center; background-repeat: no-repeat; outline: none; border: 0px; border-left: 1px solid #EEE; border-radius: 0px; box-sizing: border-box; -webkit-appearance: none;}

/*  header  *//*  menu  *//*  main  */
#menu_main {float: left; width: auto; height: auto;}
#menu_main ul.parent {float: left; width: auto; height: auto;}
#menu_main ul.parent li.parent {float: left; width: auto; height: auto;}
#menu_main ul.parent li.parent p.name {position: relative; line-height: 20px; padding: 30px 20px 30px 20px; font-size: 12px; font-weight: normal; text-align: center; letter-spacing: 2px; color: #000; cursor: pointer;}
#menu_main ul.parent li.parent:hover p.name {background-color: #EEE;}

#menu_main ul.parent li.parent .dropdown {visibility: hidden; opacity: 0;}
#menu_main ul.parent li.parent:hover .dropdown {visibility: visible; opacity: 1;}
#menu_main ul.parent li.parent .dropdown {position: fixed; width: 100%; height: auto; top: 80px; left: 0; background-color: #FFF; border-top: 1px solid #EEE; border-bottom: 1px solid #EEE; box-sizing: border-box;}
#menu_main ul.parent li.parent .dropdown_body {width: 100%; max-width: 1200px; margin: auto; padding: 40px 40px 20px 40px; box-sizing: border-box;}  

#menu_main ul.parent li.parent ul.child {float: left; width: 100%; height: auto;}
#menu_main ul.parent li.parent ul.child {display: flex; flex-wrap: wrap;}
#menu_main ul.parent li.parent ul.child li.child {position: relative; width: calc(100% / 4 - 20px); height: auto; line-height: 20px; margin: 0px 10px 20px 10px; font-size: 14px; font-weight: normal; border-bottom: 1px solid #DDD;}
#menu_main ul.parent li.parent ul.child li.child a {padding: 10px; color: #333;}
#menu_main ul.parent li.parent ul.child li.child a::after {position: absolute; content: ""; width: 16px; height: 16px; top: 50%; right: 10px; background-color: #777; background-image: url("https://signal-garments.com/image_ec/icon_next-white.png"); background-size: 10px; background-position: center; background-repeat: no-repeat; border-radius: 50%; transform: translateY(-50%);}
#menu_main ul.parent li.parent ul.child li.child a:hover {opacity: 0.6;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  header  *//*  menu  *//*  button  */
#menu_button {position: fixed; width: 20px; height: 20px; top: 10px; left: 10px; z-index: 999;}
#menu_button span {position: absolute; background-color: #333; border-radius: 2px;}
#menu_button span:first-child {width: 10px; height: 1px; top: 3px; left: 0px;}
#menu_button span:nth-child(2) {width: 15px; height: 1px; top: 50%; left: 0px;}
#menu_button span:last-child {width: 20px; height: 1px; left: 0px; bottom: 3px;}
#menu_button.active span:first-child {width: 20px; transform: translateY(6px) rotate(135deg); -webkit-transform: translateY(6px) rotate(135deg); -moz-transform: translateY(6px) rotate(135deg); -ms-transform: translateY(6px) rotate(135deg); -o-transform: translateY(6px) rotate(135deg);}
#menu_button.active span:nth-child(2) {transform: translateX(15px); -webkit-transform: translateX(15px); -moz-transform: translateX(15px); -ms-transform: translateX(15px); -o-transform: translateX(15px); opacity: 0;}
#menu_button.active span:last-child {transform: translateY(-6px) rotate(-135deg); -webkit-transform: translateY(-6px) rotate(-135deg); -moz-transform: translateY(-6px) rotate(-135deg); -ms-transform: translateY(-6px) rotate(-135deg); -o-transform: translateY(-6px) rotate(-135deg);}

/*  header  *//*  menu  */
#menu {visibility: hidden; opacity: 0;}
#menu.open {visibility: visible; opacity: 1;}
#menu {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.8); box-sizing: border-box; z-index: 886;}

/*  header  *//*  menu  *//*  body  */
#menu #menu_body {visibility: hidden; opacity: 0; transform: translateX(50px);}
#menu.open #menu_body {visibility: visible; opacity: 1; transform: translateX(0px);}
#menu #menu_body {position: fixed; width: calc(100% - 40px); max-width: 400px; top: 0; right: 0; bottom: 0; background-color: #EEE; box-sizing: border-box; overflow-y: scroll;}

/*  header  *//*  menu  *//*  search  */
#menu_search {float: left; width: 100%; height: auto; padding: 20px; background-color: #AAA; box-sizing: border-box;}
#menu_search .body {float: left; width: 100%; height: auto;}
#menu_search .body p {line-height: 15px; margin-bottom: 10px; font-size: 10px; font-weight: normal; text-align: center; letter-spacing: 2px; color: #FFF;}
#menu_search .body p span {font-size: 12px;}
#menu_search .body input[type="text"],
#menu_search .body input[type="text"]:focus {float: left; width: calc(100% - 40px); height: 40px; line-height: 40px; padding: 5px; font-size: 12px; letter-spacing: 1px; background-color: #FFF; font-weight: normal; color: #333; box-sizing: border-box; outline: none; border: 0px; border-radius: 0px; -webkit-appearance: none;}
#menu_search .body input[type="submit"],
#menu_search .body input[type="submit"]:focus {float: left; width: 40px; height: 40px; line-height: 40px; font-size: 0px; background-color: #FFF; background-image: url("https://signal-garments.com/image_ec/icon_search.png"); background-size: 16px; background-position: center; background-repeat: no-repeat; outline: none; border: 0px; border-left: 1px solid #EEE; border-radius: 0px; box-sizing: border-box; -webkit-appearance: none;}

/*  header  *//*  menu  *//*  main  */
#menu_main {float: left; width: 100%; height: auto;}
#menu_main ul.parent {float: left; width: 100%; height: auto;}
#menu_main ul.parent li.parent {float: left; width: 100%; height: auto;}
#menu_main ul.parent li.parent p.name {position: relative; line-height: 20px; padding: 10px; font-size: 12px; font-weight: normal; letter-spacing: 2px; color: #FFF; background-color: #777; border-bottom: 1px solid #EEE;}
#menu_main ul.parent li.parent a p.name::after {position: absolute; content: ""; width: 10px; height: 10px; top: 50%; right: 20px; background-image: url("https://signal-garments.com/image_ec/icon_next-white.png"); background-size: 10px; background-position: center; background-repeat: no-repeat; transform: translateY(-50%);}
     
#menu_main ul.parent li.parent .dropdown {float: left; width: 100%; height: auto;}
#menu_main ul.parent li.parent .dropdown_body {float: left; width: 100%; height: auto;}  

#menu_main ul.parent li.parent ul.child {float: left; width: 100%; height: auto;}
#menu_main ul.parent li.parent ul.child {display: flex; flex-wrap: wrap;}
#menu_main ul.parent li.parent ul.child li.child {position: relative; width: 100%; height: auto; line-height: 20px; font-size: 12px; font-weight: normal; letter-spacing: 2px; border-bottom: 1px solid #DDD;}
#menu_main ul.parent li.parent ul.child li.child a {padding: 10px; color: #333;}
#menu_main ul.parent li.parent ul.child li.child a::after {position: absolute; content: ""; width: 14px; height: 14px; top: 50%; right: 20px; background-color: #777; background-image: url("https://signal-garments.com/image_ec/icon_next-white.png"); background-size: 8px; background-position: center; background-repeat: no-repeat; border-radius: 50%; transform: translateY(-50%);}
}

/*  ex.  animation
------------------------------*/
/*  animation  */
#menu_button,
#menu_button span {transition-duration: 0.4s; transition-timing-function: ease-in;}

#menu {transition-duration: 0.8s; transition-delay: 0.4s;}
#menu.open {transition-duration: 0.4s; transition-delay: 0s;}

#menu #menu_body {transition-duration: 0.4s; transition-delay: 0s; transition-timing-function: ease;}
#menu.open #menu_body {transition-duration: 0.8s; transition-delay: 0.4s; transition-timing-function: ease;}

#menu_main ul.parent li.parent .dropdown {transition: all 0.2s;}

#menu ul li p,
#menu ul li p::after,
#menu ul li a,
#menu ul li a::before,
#menu ul li a span {transition: all 0.4s;}

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  content
/*  02.  content - title
/*  03.  content - margin
--------------------------------
------------------------------*/

/*  01.  content
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  content  */
#content {float: left; width: 100%; height: auto;}

.content_wrap {float: left; width: 100%; height: auto;}
.content {width: 100%; max-width: 1200px; margin: auto;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  content  */
#content {float: left; width: 100%; height: auto;}

.content_wrap {float: left; width: 100%; height: auto;}
.content {width: 100%; max-width: 600px; margin: auto;}
}

/*  02.  content - title
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  content  *//*  title  */
.content_title {position: relative; float: left; width: 100%; height: auto; padding-bottom: 10px;}
.content_title::after {position: absolute; content: ""; width: 50px; height: 1px; left: 50%; bottom: 0%; margin-left: -25px; background-color: #333;}
.content_title h2,
.content_title h3 {line-height: 30px; font-size: 30px; font-weight: normal; text-align: center; letter-spacing: 4px; color: #333;}
.content_title p {line-height: 20px; font-size: 12px; font-weight: normal; text-align: center; letter-spacing: 2px; color: #333;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  content  *//*  title  */
.content_title {position: relative; float: left; width: 100%; height: auto; padding-bottom: 10px;}
.content_title::after {position: absolute; content: ""; width: 50px; height: 1px; left: 50%; bottom: 0%; margin-left: -25px; background-color: #333;}
.content_title h2,
.content_title h3 {line-height: 20px; font-size: 20px; font-weight: normal; text-align: center; letter-spacing: 4px; color: #333;}
.content_title p {line-height: 20px; font-size: 10px; font-weight: normal; text-align: center; letter-spacing: 2px; color: #333;}
}

/*  03.  content - margin
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  content  *//*  margin  */
.mg-t8 {margin-top: 80px;}
.mg-t4 {margin-top: 40px;}
.mg-t2 {margin-top: 20px;}

.mg-r8 {margin-right: 80px;}
.mg-r4 {margin-right: 40px;}
.mg-r2 {margin-right: 20px;}

.mg-b8 {margin-bottom: 80px;}
.mg-b4 {margin-bottom: 40px;}
.mg-b2 {margin-bottom: 20px;}

.mg-l8 {margin-left: 80px;}
.mg-l4 {margin-left: 40px;}
.mg-l2 {margin-left: 20px;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  content  *//*  margin  */
.mg-t8 {margin-top: 40px;}
.mg-t4 {margin-top: 20px;}
.mg-t2 {margin-top: 10px;}

.mg-r8 {margin-right: 40px;}
.mg-r4 {margin-right: 20px;}
.mg-r2 {margin-right: 10px;}

.mg-b8 {margin-bottom: 40px;}
.mg-b4 {margin-bottom: 20px;}
.mg-b2 {margin-bottom: 10px;}

.mg-l8 {margin-left: 40px;}
.mg-l4 {margin-left: 20px;}
.mg-l2 {margin-left: 10px;}
}

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  pankuzu
/*  02.  item list
--------------------------------
------------------------------*/

/*  01.  pankuzu
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  pankuzu  */
#pankuzu {float: left; width: 100%; height: auto; padding: 10px 20px 10px 20px; box-sizing: border-box;}
#pankuzu ul {float: left; width: 100%; height: auto;}
#pankuzu ul li {display: inline; width: auto; height: auto; line-height: 20px; font-size: 12px; font-weight: normal;}
#pankuzu ul li::before {display: inline-block; content: ""; width: 30px; height: 20px; background-image: url("https://signal-garments.com/image_ec/icon_next.png"); background-size: 12px; background-position: center top 10px; background-repeat: no-repeat;}
#pankuzu ul li:first-of-type::before {display: none;}
#pankuzu ul li a {display: inline; line-height: 20px; font-size: 12px; font-weight: normal; letter-spacing: 2px; color: #777;}
#pankuzu ul li a:hover {color: #AAA;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  pankuzu  */
#pankuzu {float: left; width: 100%; height: auto; padding: 0px 10px 10px 10px; box-sizing: border-box;}
#pankuzu ul {float: left; width: 100%; height: auto;}
#pankuzu ul li {display: inline; width: auto; height: auto; line-height: 20px; font-size: 10px;¡¡font-weight: normal;}
#pankuzu ul li::before {display: inline-block; content: ""; width: 16px; height: 20px; background-image: url("https://signal-garments.com/image_ec/icon_next.png"); background-size: 10px; background-position: center top 12px; background-repeat: no-repeat;}
#pankuzu ul li:first-of-type::before {display: none;}
#pankuzu ul li a {display: inline; line-height: 20px; font-size: 10px; font-weight: normal; letter-spacing: 1px; color: #777;}
}

/*  02.  item list
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  item list  */
.item-list {float: left; width: 100%; height: auto;}
.item-list ul {float: left; width: 100%; height: auto; padding: 10px; box-sizing: border-box;}
.item-list ul {display: flex; flex-wrap: wrap;}
.item-list ul li {position: relative; width: calc(100% / 4 - 20px); margin: 10px;}
.item-list ul li:hover {opacity: 0.7;}
.item-list ul li .image {float: left; width: 100%; height: auto; padding-top: 100%; background-size: cover; background-position: center;}
.item-list ul li .detail {float: left; width: 100%; height: auto; margin-top: 10px; padding-bottom: 30px;}
.item-list ul li .detail p.name {line-height: 20px; font-size: 12px; font-weight: normal; letter-spacing: 2px; color: #000;}
.item-list ul li .detail .box {position: absolute; width: 100%; height: auto; left: 0; bottom: 0;}
.item-list ul li .detail .box p.price {line-height: 20px; font-size: 12px; font-weight: normal; letter-spacing: 1px; color: #333;}
.item-list ul li .detail .box p.soldout {line-height: 20px; font-size: 12px; font-weight: normal; letter-spacing: 1px; color: #777;}
.item-list ul li .detail .box p.sale {line-height: 20px; font-size: 12px; font-weight: normal; letter-spacing: 1px; color: #7D0305;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  item list  */
.item-list {float: left; width: 100%; height: auto;}
.item-list ul {float: left; width: 100%; height: auto; padding: 10px; box-sizing: border-box;}
.item-list ul {display: flex; flex-wrap: wrap;}
.item-list ul li {position: relative; width: calc(100% / 2 - 20px); margin: 10px;}
.item-list ul li .image {float: left; width: 100%; height: auto; padding-top: 100%; background-size: cover; background-position: center;}
.item-list ul li .detail {position: relative; float: left; width: 100%; height: auto; margin-top: 10px; padding-bottom: 20px;}
.item-list ul li .detail p.name {line-height: 15px; font-size: 12px; font-weight: normal; letter-spacing: 1px; color: #000;}
.item-list ul li .detail .box {position: absolute; width: 100%; height: auto; left: 0; bottom: 0;}
.item-list ul li .detail .box p.price {line-height: 10px; font-size: 10px; font-weight: normal; letter-spacing: 1px; color: #333;}
.item-list ul li .detail .box p.soldout {line-height: 10px; font-size: 10px; font-weight: normal; letter-spacing: 1px; color: #777;}
.item-list ul li .detail .box p.sale {line-height: 10px; font-size: 10px; font-weight: normal; letter-spacing: 1px; color: #7D0305;}
}

/*  ex. animation
----------------------------*/
/*  animation  */
#pankuzu ul li a {transition: all .2s;}

.item-list ul li,
.item-list ul li a {transition: all .2s;}

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  footer
/*  02.  footer - guide
/*  03.  footer - menu
/*  04.  footer - copyright
--------------------------------
------------------------------*/

/*  01.  footer
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  footer  */
#foot_wrap {float: left; width: 100%; height: auto; padding: 40px; background-color: #EEE; box-sizing: border-box;}
#foot {display: flex; flex-wrap: wrap;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  footer  */
#foot_wrap {float: left; width: 100%; height: auto; padding: 20px; background-color: #EEE; box-sizing: border-box;}
#foot {display: flex; flex-wrap: wrap;}
}

/*  02.  footer - guide
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  footer  *//*  guide  */
#foot_guide {width: 300px;}

#foot_guide .shop {float: left; width: 100%; height: auto;}
#foot_guide .shop img {width: 100%; height: auto; vertical-align: top;}
#foot_guide .shop p.address {line-height: 20px; margin-top: 20px; font-size: 12px; font-weight: normal; letter-spacing: 1px;}
#foot_guide .shop p.tel {line-height: 20px; font-size: 12px; font-weight: normal; letter-spacing: 1px;}
#foot_guide .shop p.map {line-height: 20px; margin-top: 10px; font-size: 10px; font-weight: bold; letter-spacing: 2px;}
#foot_guide .shop p.map a {display: inline-block; padding: 2px 10px 2px 10px; color: #FFF; background-color: #777;}

#foot_guide ul.sns {float: left; width: 100%; height: auto; margin-top: 20px;}
#foot_guide ul.sns {display: flex; flex-wrap: nowrap;}
#foot_guide ul.sns li {width: 16px; height: 16px; margin-right: 20px;}
#foot_guide ul.sns li img {width: 100%; height: auto; vertical-align: top;}

#foot_guide ul.guide {float: left; width: 100%; height: auto; margin-top: 20px;}
#foot_guide ul.guide {display: flex; flex-wrap: wrap;}
#foot_guide ul.guide li {width: 100%; height: auto; line-height: 20px; font-size: 12px; font-weight: normal; letter-spacing: 1px;}
#foot_guide ul.guide li a {display: inline; color: #333;}
#foot_guide ul.guide li a:hover {text-decoration: underline;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  footer  *//*  guide  */
#foot_guide {width: 100%; margin-top: 20px;}

#foot_guide .shop {float: left; width: 100%; height: auto;}
#foot_guide .shop img {width: 100%; max-width: 300px; height: auto; vertical-align: top;}
#foot_guide .shop p.address {line-height: 20px; margin-top: 20px; font-size: 10px; font-weight: normal; letter-spacing: 1px;}
#foot_guide .shop p.tel {line-height: 20px; font-size: 10px; font-weight: normal; letter-spacing: 1px;}
#foot_guide .shop p.map {line-height: 20px; margin-top: 10px; font-size: 10px; font-weight: bold; letter-spacing: 2px;}
#foot_guide .shop p.map a {display: inline-block; padding: 2px 10px 2px 10px; color: #FFF; background-color: #777;}

#foot_guide ul.sns {float: left; width: 100%; height: auto; margin-top: 20px;}
#foot_guide ul.sns {display: flex; flex-wrap: nowrap;}
#foot_guide ul.sns li {width: 16px; height: 16px; margin-right: 20px;}
#foot_guide ul.sns li img {width: 100%; height: auto; vertical-align: top;}

#foot_guide ul.guide {float: left; width: 100%; height: auto; margin-top: 20px;}
#foot_guide ul.guide {display: flex; flex-wrap: wrap;}
#foot_guide ul.guide li {width: 100%; height: auto; line-height: 20px; font-size: 12px; font-weight: normal; letter-spacing: 1px;}
#foot_guide ul.guide li a {display: inline; color: #333;}
}

/*  03.  footer - menu
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  footer  *//*  menu  */
#foot_menu {width: calc(100% - 340px); margin-left: 40px;}
#foot_menu {display: flex; flex-wrap: nowrap;}
#foot_menu ul {width: calc(100% / 4 - 20px); margin-right: 20px;}
#foot_menu ul:first-of-type {width: calc(100% / 2 - 20px);}
#foot_menu ul p {line-height: 20px; padding-bottom: 5px; margin-bottom: 5px; font-size: 14px; font-weight: normal; border-bottom: 1px solid #AAA;}
#foot_menu ul li {float: left; width: 100%; height: auto; line-height: 20px; margin-top: 5px; font-size: 12px; font-weight: normal; letter-spacing: 1px;}
#foot_menu ul:first-of-type li {width: calc(50% - 10px); margin-right: 10px;}
#foot_menu ul:first-of-type li:nth-of-type(2n) {margin-right: 0px;}
#foot_menu ul li a {display: inline; position: relative; color: #333;}
#foot_menu ul li a:hover {text-decoration: underline;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  footer  *//*  menu  */
#foot_menu {width: 100%; margin-top: 20px;}
#foot_menu {display: flex; flex-wrap: wrap;}
#foot_menu ul {width: 100%; margin-top: 20px;}
#foot_menu ul {display: flex; flex-wrap: wrap;}
#foot_menu ul p {width: 100%; line-height: 20px; padding-bottom: 10px; margin-bottom: 5px; font-size: 14px; font-weight: normal; border-bottom: 1px solid #AAA;}
#foot_menu ul li {width: 50%; height: auto; line-height: 15px; margin-top: 10px; font-size: 10px; font-weight: normal; letter-spacing: 1px;}
#foot_menu ul li:nth-of-type(2n) {width: calc(50% - 10px); margin-left: 10px;}
#foot_menu ul li a {display: inline; position: relative; color: #333;}
}

/*  04.  footer - copyright
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  footer  *//*  copyright  */
#copyright {width: 100%; height: auto; margin-top: 40px;}
#copyright p {line-height: 20px; font-size: 16px; font-weight: normal; letter-spacing: 1px;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  footer  *//*  copyright  */
#copyright {width: 100%; height: auto; margin-top: 40px;}
#copyright p {line-height: 20px; font-size: 14px; font-weight: normal; text-align: center; letter-spacing: 1px;}
}

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  pop up
--------------------------------
------------------------------*/

/*  01.  pop up
------------------------------*/
/*  pc  */
@media screen and (min-width: 1000px) {
/*  pop up  */
#popup_wrap {display:none; position: fixed; width: 500px; height: auto; right: 10px; bottom: 20px; padding: 10px; background-color: #FFF; box-shadow: 0px 0px 40px #777; box-sizing: border-box; z-index: 777;}
.popup_body {float: left; width: 100%; height: auto; padding: 20px; border: 2px solid #000; box-sizing: border-box;}
.popup_body p.title {line-height: 20px; margin-bottom: 10px; font-size: 20px; font-weight: bold; text-align: center;}
.popup_body p.catch {line-height: 15px; margin-bottom: 5px; font-size: 12px; font-weight: bold;}
.popup_body p.text {line-height: 15px; font-size: 10px; font-weight: normal;}

.popup_body ul {float: left; width: 100%; height: auto; margin-top: 10px; padding: 10px; background-color: #EEE; border-radius: 10px; box-sizing: border-box;}
.popup_body ul p {line-height: 20px; margin-bottom: 5px; font-size: 12px; font-weight: normal; text-align: center;}
.popup_body ul p span {font-size: 24px;}
.popup_body ul li {float: left; width: 100%; height: auto; line-height: 20px; margin-top: 5px; font-size: 12px; font-weight: normal;}

.content_button {float: left; width: 100%; height: auto; box-sizing: border-box;}
.content_button a {width: 100%; height: 40px; margin: auto; line-height: 40px; font-size: 14px; font-weight: bold; text-align: center; color: #FFF; background-color: #333; border-radius: 10px; box-sizing: border-box;}
.popup_body .content_button {margin-top: 20px; padding-left: 20px; padding-right: 20px;}

.button_area{position: absolute; width: 40px; height: 40px; top: -20px; left: -20px; z-index: 2;}
.button_area button{display:block; width: 40px; height: 40px; background-color: #FFF; border: 2px solid #000; border-radius: 20px; box-sizing: border-box;}
.button_area button span {position: absolute; width: 20px; height: 2px; left: 10px; background-color: #000;}
.button_area button span:first-child {top: 19px; transform: rotate(-45deg);}
.button_area button span:last-child {bottom: 19px; transform: rotate(45deg);}
}

/*  sp  */
@media screen and (max-width: 999px) {
/*  pop up  */
#popup_wrap {display:none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.4); z-index: 777;}
.popup_body {position: absolute; width: calc(100% - 40px); height: auto; margin-top: 20px; top: 50%; left: 50%; padding: 20px; background-color: #FFF; box-sizing: border-box; transform: translate(-50%,-50%);}
.popup_body p.title {line-height: 20px; margin-bottom: 10px; font-size: 20px; font-weight: bold; text-align: center;}
.popup_body p.catch {line-height: 20px; margin-bottom: 10px; font-size: 14px; font-weight: bold;}
.popup_body p.text {line-height: 15px; font-size: 10px; font-weight: normal;}

.popup_body ul {float: left; width: 100%; height: auto; margin-top: 10px; padding: 10px; background-color: #EEE; border-radius: 10px; box-sizing: border-box;}
.popup_body ul p {line-height: 20px; margin-bottom: 5px; font-size: 10px; font-weight: normal; text-align: center;}
.popup_body ul p span {font-size: 20px;}
.popup_body ul li {float: left; width: 100%; height: auto; line-height: 15px; margin-top: 5px; font-size: 10px; font-weight: normal;}

.content_button {float: left; width: 100%; height: auto; box-sizing: border-box;}
.content_button a {width: 100%; height: 40px; margin: auto; line-height: 40px; font-size: 14px; font-weight: bold; text-align: center; color: #FFF; background-color: #333; border-radius: 10px; box-sizing: border-box;}
.popup_body .content_button {margin-top: 20px;}
  
.button_area{position: absolute; width: 40px; height: 40px; top: -10px; left: -10px; z-index: 2;}
.button_area button{display:block; width: 40px; height: 40px; background-color: #FFF; border: 2px solid #000; border-radius: 20px; box-sizing: border-box;}
.button_area button span {position: absolute; width: 20px; height: 2px; left: 10px; background-color: #000;}
.button_area button span:first-child {top: 19px; transform: rotate(-45deg);}
.button_area button span:last-child {bottom: 19px; transform: rotate(45deg);}
}