@charset "euc-jp";
/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  base
--------------------------------
------------------------------*/

/*  01.  base
------------------------------*/
/*  base  */
html,body {width: 100%; height: 100%; margin: 0; padding: 0;}
h1,h2,h3,h4,h5,h6,h7,dl,dt,dd,ul,li,p,a {margin: 0; padding: 0; word-break: break-all;}
ol,ul,li {list-style: none;}
a {display: block; text-decoration: none;}

/*  font style  */
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;
	font-kerning:normal; -webkit-font-kerning:normal; -moz-font-kerning:normal; -ms-font-kerning:normal; -o-font-kerning:normal;
	font-feature-settings: "kern" 1,"kern"; -webkit-font-feature-settings: "kern" 1,"kern"; -moz-font-feature-settings: "kern" 1,"kern"; -ms-font-feature-settings: "kern" 1,"kern"; -o-font-feature-settings: "kern" 1,"kern";
	font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased;
	text-rendering: optimizeLegibility; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility;
}

/*  text style  */
.en {font-family: 'Oswald', sans-serif;}
.en_bold {font-family: 'Hind', sans-serif;}

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

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  header
/*  02.  header - lead
/*  03.  header - logo
/*  04.  header - cart&search
/*  05.  header - menu
--------------------------------
------------------------------*/

/*  01.  header
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  header  */
#head {position: relative; float: left; width: 100%; height: 100px; padding-left: 20px; padding-right: 20px; background-color: #FFF; box-sizing: border-box; z-index: 888;}
#head::after {position: absolute; content: ""; width: calc(100% - 40px); height: 1px; left: 20px; bottom: -1px; background-color: #121A27; z-index: -1;}
}

/*  sp  */
@media screen and (max-width: 979px) {
#head {position: fixed; float: left; width: 100%; height: 60px; background-color: #FFF; border-bottom: 1px solid #121A27; z-index: 888;}
}

/*  02.  header - lead
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  header  *//*  lead  */
#head_lead {position: absolute; width: 100%; height: auto; padding: 5px; left: 0; box-sizing: border-box; background-color: #121A27;}
#head_lead p {line-height: 20px; font-size: 12px; font-weight: bold; text-align: center; color: #FFF; letter-spacing: 2px;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  header  *//*  lead  */
#head_lead {position: absolute; width: 100%; height: auto; padding: 5px; left: 0; box-sizing: border-box; background-color: #121A27;}
#head_lead p {line-height: 10px; font-size: 10px; font-weight: bold; text-align: center; color: #FFF; letter-spacing: 1px;}
}

/*  03.  header - logo
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  header  *//*  logo  */
#head h1 {position: absolute; width: auto; height: auto; top: 50px; left: 50%; transform: translateX(-50%);}
#head h1 a {width: 150px; height: 30px; font-size: 0px; background-size: 100%; background-position: center; background-repeat: no-repeat;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  header  *//*  logo  */
#head h1 {position: absolute; width: auto; height: auto; top: 30px; left: 50%; transform: translateX(-50%);}
#head h1 a {width: 100px; height: 20px; font-size: 0px; background-size: 100%; background-position: center; background-repeat: no-repeat;}
}

/*  04.  header - cart&search
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  header  *//*  search  */
#head_search {float: right; width: auto; height: auto; margin-top: 50px;}
#head_search .head_search-button {width: 30px; height: 30px;}
#head_search .head_search-button button {width: 30px; height: 30px; background-size: 16px; background-color: #FFF; background-position: center; background-repeat: no-repeat; outline: 0px; border: 1px solid #DDD; border-radius: 5px; cursor: pointer; -webkit-appearance: none;}
#head_search .head_search-button button:hover {opacity: 0.4;}
#head_search .head_search-body {display: none; position: absolute; width: 100%; height: auto; padding: 40px; top: 100px; left: 0; right: 0; background-color: #DDD; box-sizing: border-box; z-index: 666;}
#head_search .head_search-body .head_search-box {float: left; width: 100%; height: auto; text-align: center;}
#head_search .head_search-body .head_search-box input[type="text"],
#head_search .head_search-body .head_search-box input[type="text"]:focus {float: left; width: 100%; height: 60px; line-height: 40px; padding: 10px; font-size: 16px; font-weight: normal; text-align: center; color: #333; background-color: #FFF; box-sizing: border-box; outline: none; border: 0px; border-radius: 0px; -webkit-appearance: none;}
#head_search .head_search-body .head_search-box input[type="submit"],
#head_search .head_search-body .head_search-box input[type="submit"]:focus {clear: both; width: 200px; height: 40px; line-height: 38px; margin: 20px auto; font-size: 12px; font-weight: bold; text-align: center; color: #FFF; background-color: #121A27; border: 0px;; border-radius: 0px; box-sizing: border-box; cursor: pointer; -webkit-appearance: none;}
#head_search .head_search-body button {width: 80px; height: 20px; line-height: 18px; font-size: 10px; font-weight: normal; color: #000; background-color: #DDD; outline: 0; border: 1px solid #AAA; background-color: #FFF; border-radius: 20px; -webkit-appearance: none;}

/*  header  *//*  cart  */
#head_cart {float: right; width: auto; height: 30px; margin-top: 50px; margin-right: 10px;}
#head_cart a {line-height: 30px; font-size: 12px; font-weight: bold; color: #121A27;}
#head_cart a:hover {color: #FF6600;}
#head_cart a span.en_bold {color: #777;}
#head_cart a span.dot {margin-left: 0px; margin-right: 5px; color: #777;}
#head_cart a span.sep {margin-left: 5px; margin-right: 2px;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  header  *//*  search  */
#head_search {float: right; width: auto; height: auto; margin-top: 25px; margin-right: 50px;}
#head_search .head_search-button {width: 30px; height: 30px;}
#head_search .head_search-button button {width: 30px; height: 30px; background-size: 16px; background-color: #FFF; background-position: center; background-repeat: no-repeat; outline: 0px; border: 1px solid #DDD; border-radius: 5px; cursor: pointer; -webkit-appearance: none;}
#head_search .head_search-body {display: none; position: absolute; width: 100%; height: auto; padding: 20px; top: 60px; left: 0px; background-color: #DDD; box-sizing: border-box; z-index: 666;}
#head_search .head_search-body .head_search-box {float: left; width: 100%; height: auto; text-align: center;}
#head_search .head_search-body .head_search-box input[type="text"],
#head_search .head_search-body .head_search-box input[type="text"]:focus {float: left; width: 100%; height: 40px; line-height: 30px; padding: 5px; font-size: 14px; font-weight: normal; text-align: center; color: #333; background-color: #FFF; box-sizing: border-box; outline: none; border: 0px; border-radius: 0px; -webkit-appearance: none;}
#head_search .head_search-body .head_search-box input[type="submit"],
#head_search .head_search-body .head_search-box input[type="submit"]:focus {clear: both; width: 150px; height: 30px; line-height: 30px; margin: auto; margin-top: 10px; font-size: 12px; font-weight: bold; text-align: center; color: #FFF; background-color: #121A27; border: 0px;; border-radius: 0px; box-sizing: border-box; cursor: pointer; -webkit-appearance: none;}
#head_search .head_search-body button {width: 60px; height: 20px; line-height: 18px; margin-top: 10px; font-size: 10px; font-weight: normal; color: #000; background-color: #DDD; outline: 0; border: 1px solid #AAA; background-color: #FFF; border-radius: 20px; -webkit-appearance: none;}

/*  header  *//*  cart  */
#head_cart {float: left; width: auto; height: 30px; margin-top: 30px; margin-left: 5px;}
#head_cart a {line-height: 20px; font-size: 10px; font-weight: bold; color: #121A27;}
#head_cart a span.en_bold {color: #777;}
#head_cart a span.dot {margin-left: 0px; margin-right: 2px; color: #777;}
#head_cart a span.sep {margin-left: 2px; margin-right: 1px;}
}

/*  05.  header - menu
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  header  *//*  menu  *//*  button  */
#menu_button {display: none;}
	
/*  header  *//*  menu  */
/*  header  *//*  menu  *//*  body  */
.menu_body_sub {float: right; width: auto; height: auto; margin-top: 51px;}
.menu_body_sub ul {width: auto; height: 30px;}
.menu_body_sub ul li {display: inline-block; width: auto; height: 30px; line-height: 30px; margin-right: 20px; font-size: 12px; font-weight: bold; vertical-align: bottom;}
.menu_body_sub ul li a {color: #121A27;}
.menu_body_sub ul li a:hover {color: #FF6600;}
     
.menu_body {float: left; width: auto; height: auto; margin-top: 30px;}
.menu_body ul.parent {float: left; width: 400px; height: auto;}
.menu_body ul.parent {display: flex; flex-wrap: nowrap;}
.menu_body ul.parent li.parent {position: relative; width: calc(100% / 4); height: auto;}

.menu_body ul.parent li.parent p {position: relative; line-height: 70px; padding-right: 15px; font-size: 12px; font-weight: bold; text-align: center; color: #121A27; cursor: pointer;}
.menu_body ul.parent li.parent:hover p {background-color: #EEE;}
.menu_body ul.parent li.parent p::after {position: absolute; content: ""; width: 12px; height: 12px; top: 50%; right: 10px; margin-top: -1px; background-image: url("https://turnmeon.jp/image/ec/icon_down-navy.png"); background-size: 12px; background-repeat: no-repeat; transform: translateY(-50%);}
.menu_body ul.parent li.parent:hover p::after {transform: translateY(-6px) rotate(180deg);}
.menu_body ul.parent li.parent a p {padding: 0px;}
.menu_body ul.parent li.parent:hover a p {color: #FF6600; background-color: #EEE;}
.menu_body ul.parent li.parent a p::after {display: none;}
     
.menu_body ul.parent li.parent ul.child {visibility: hidden; opacity: 0;}
.menu_body ul.parent li.parent:hover ul.child {visibility: visible; opacity: 1;}
.menu_body ul.parent li.parent ul.child {position: absolute; width: 300%; height: auto; padding: 10px 20px 20px 20px; top: 70px; left: 0; background-color: #EEE; border-top: 1px solid #DDD; box-sizing: border-box; z-index: 777;}
.menu_body ul.parent li.parent ul.child li {width: 100%; line-height: 20px; margin-top: 10px; font-size: 12px; font-weight: bold;}
.menu_body ul.parent li.parent ul.child li a {display: inline; color: #121A27;}
.menu_body ul.parent li.parent ul.child li a:hover {color: #FF6600;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  header  *//*  menu  *//*  button  */
#menu_button {position: fixed; width: 20px; height: 20px; top: 30px; right: 15px; z-index: 887;}
#menu_button span {position: absolute; width: 20px; height: 2px; background-color: #121A27; border-radius: 2px;}
#menu_button span:first-of-type {top: 2px;}
#menu_button span:nth-of-type(2) {top: 9px;}
#menu_button span:last-of-type {bottom: 2px;}
#menu_button.active span:first-of-type {background-color: #FFF!important; transform: translateY(7px) rotate(225deg);}
#menu_button.active span:nth-of-type(2) {background-color: #FFF!important; transform: translateX(100%); opacity: 0;}
#menu_button.active span:last-of-type {background-color: #FFF!important; transform: translateY(-7px) rotate(-225deg);}
	
/*  header  *//*  menu  */
#menu {visibility: hidden; opacity: 0;}
#menu.open {visibility: visible; opacity: 1;}
#menu {position: fixed; top: 0; left: 0; right: 0; bottom: 0; padding: 10px; background-color: rgba(0,0,0,0.8); box-sizing: border-box; z-index: 886;}

/*  header  *//*  menu  *//*  body  */
#menu #menu_body {visibility: hidden; opacity: 0; transform: translateX(-250px);}
#menu.open #menu_body {visibility: visible; opacity: 1; transform: translateX(0px);}
#menu #menu_body {position: fixed; width: calc(100% - 50px); max-width: 400px; top: 0; left: 0; bottom: 0; background-color: #FFF; overflow-y: scroll;}
     
.menu_body_sub {float: left; width: 100%; height: auto; background-color: #EEE; border: 1px solid #777; box-sizing: border-box;}
.menu_body_sub ul {float: left; width: 100%; height: auto;}
.menu_body_sub ul {display: flex; flex-wrap: nowrap;}
.menu_body_sub ul li {width: 50%; height: auto; line-height: 20px; font-size: 14px; font-weight: bold; text-align: center; box-sizing: border-box;}
.menu_body_sub ul li:last-of-type {border-left: 1px solid #777;}
.menu_body_sub ul li a {padding: 20px 10px 20px 10px; color: #000;}


.menu_body {float: left; width: 100%; height: auto;}
.menu_body ul.parent {float: left; width: 100%; height: auto;}
.menu_body ul.parent li.parent {float: left; width: 100%; height: auto; line-height: 20px; font-size: 12px; font-weight: bold; border-bottom: 1px solid #121A27;}
.menu_body ul.parent li.parent p {padding: 5px 10px 5px 10px; font-size: 12px; color: #FFF; background-color: #333;}
.menu_body ul.parent li.parent a p {position: relative; padding: 0px; font-size: 14px; color: #121A27; background-color: #EEE;}
.menu_body ul.parent li.parent a p::after {position: absolute; content: ""; width: 15px; height: 15px; top: 50%; right: 0px; background-image: url("https://turnmeon.jp/image/ec/icon_next-navy.png"); background-size: 12px; background-position: center; background-repeat: no-repeat; transform: translateY(-50%);}
.menu_body ul.parent li.parent a {position: relative; padding: 15px 10px 15px 10px; color: #121A27; background-color: #EEE;}
.menu_body ul.parent li.parent ul.child {float: left; width: 100%; height: auto;}
.menu_body ul.parent li.parent ul.child li {float: left; width: 100%; height: auto; line-height: 20px; font-size: 12px; font-weight: bold; border-bottom: 1px solid #DDD;}
.menu_body ul.parent li.parent ul.child li a {padding: 15px 10px 15px 20px; background-color: #FFF;}
.menu_body ul.parent li.parent ul.child li a::after {position: absolute; content: ""; width: 15px; height: 15px; top: 50%; right: 10px; background-image: url("https://turnmeon.jp/image/ec/icon_next-navy.png"); background-size: 12px; background-position: center; background-repeat: no-repeat; transform: translateY(-50%);}
     
#menu .menu_sns {position: absolute; float: left; width: auto; height: auto; left: 20px; bottom: 20px;}
#menu .menu_sns ul {float: left; width: 100%; height: auto;}
#menu .menu_sns ul li {float: left; width: auto; height: auto; font-size: 0px; margin-right: 20px;}
#menu .menu_sns ul li a {position: relative; width: 30px; height: 30px; background-size: 100%; background-position: center; background-repeat: no-repeat; border: 2px solid #121A27; border-radius: 20px; box-sizing: border-box;}
#menu .menu_sns ul li a::after {position: absolute; content: ""; width: 34px; height: 34px; top: -4px; left: -4px; border: 2px solid #FFF; border-radius: 20px; box-sizing: border-box; z-index: -2;}

/*  header  *//*  shop  */
#head_shop {position: absolute; width: auto; height: auto; top: 10px; left: 10px; z-index: 885;}
#head_shop a {width: 30px; height: 30px; font-size: 0px; background-image: url("https://turnmeon.jp/image/ec/icon_cart-white.png"); background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 20px;}
}

/*  ex.  animation
------------------------------*/
/*  animation  */
#head_cart a,
#head_search button {transition: all 0.4s;}

#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 ul.child {transition: all 0.2s;}

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

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  footer
/*  02.  footer - menu
/*  03.  footer - company
--------------------------------
------------------------------*/

/*  01.  footer
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  footer  */
#foot {float: left; width: 100%; height: auto; background-color: #121A27;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  footer  */
#foot {float: left; width: 100%; height: auto; background-color: #121A27;}
}

/*  02.  footer - menu
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  footer  *//*  menu  */
#foot_menu {float: right; width: calc(100% - 300px); height: auto; padding: 20px; margin-top: 20px; margin-bottom: 20px; border-left: 1px solid #FFF; box-sizing: border-box;}
#foot_menu ul {float: left; width: 100%; height: auto; margin-left: 20px; margin-bottom: 10px;}
#foot_menu ul p {line-height: 20px; margin-bottom: 5px; font-size: 16px; font-weight: bold; color: #FFF;}
#foot_menu ul li {float: left; width: auto; height: auto; line-height: 15px; margin-right: 20px; margin-bottom: 5px; font-size: 12px; font-weight: normal;}
#foot_menu ul li a {display: inline; color: #FFF;}
#foot_menu ul li a:hover {text-decoration: underline;}

#foot_mail {float: left; width: 300px; height: auto; padding: 40px; text-align: center; box-sizing: border-box;}
#foot_mail p {line-height: 20px; font-size: 10px; font-weight: normal; color: #FFF;}
#foot_mail img {width: 160px; height: auto; margin-top: 10px; vertical-align: top;}
#foot_mail a:hover {opacity: 0.6;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  footer  *//*  menu  */
#foot_menu {float: left; width: 100%; height: auto; padding: 40px 40px 0px 40px; box-sizing: border-box;}
#foot_menu ul {float: left; width: 100%; height: auto; margin-bottom: 20px;}
#foot_menu ul p {line-height: 20px; margin-bottom: 10px; font-size: 20px; font-weight: bold; letter-spacing: 2px; color: #FFF;}
#foot_menu ul li {float: left; width: 100%; height: auto; line-height: 15px; padding-right: 10px; margin-bottom: 10px; font-size: 12px; font-weight: normal; box-sizing: border-box;}
#foot_menu ul li a {display: inline; color: #FFF;}

#foot_mail {float: left; width: 100%; height: auto; padding: 0px 20px 20px 20px; text-align: center; box-sizing: border-box;}
#foot_mail p {line-height: 20px; font-size: 10px; font-weight: normal; color: #FFF;}
#foot_mail img {width: 140px; height: auto; margin-top: 10px; vertical-align: top;}
}

/*  03.  footer - company
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  footer  *//*  company  */
#foot_company {position: relative; float: left; width: 100%; height: auto; padding: 40px 20px 40px 40px; background-color: #333; box-sizing: border-box;}
#foot_company p.name {float: left; line-height: 20px; font-size: 20px; font-weight: normal; letter-spacing: 4px; color: #FFF;}
#foot_company p.address {clear: both; float: left; line-height: 20px; margin-top: 20px; font-size: 12px; font-weight: normal; letter-spacing: 2px; color: #FFF;}
#foot_company p.address br {display: none;}
#foot_company p.tel {clear: both; float: left; line-height: 20px; font-size: 12px; font-weight: normal; letter-spacing: 2px; color: #FFF;}

#foot_company #foot_sns {position: absolute; width: auto; height: auto; top: 40px; right: 40px;}
#foot_company #foot_sns ul {float: left; width: auto; height: auto;}
#foot_company #foot_sns ul li {float: left; width: 30px; height: 30px; margin-left: 20px;}
#foot_company #foot_sns ul li img {width: 100%; height: auto; vertical-align: top;}
#foot_company #foot_sns ul li a:hover {opacity: 0.6;}

#foot_company #copyright {float: left; width: 100%; height: auto; margin-top: 20px;}
#foot_company #copyright p {line-height: 20px; font-size: 12px; font-weight: normal; color: #FFF;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  footer  *//*  company  */
#foot_company {position: relative; float: left; width: 100%; height: auto; padding: 40px; background-color: #333; box-sizing: border-box;}
#foot_company p.name {float: left; line-height: 20px; font-size: 16px; font-weight: normal; letter-spacing: 2px; color: #FFF;}
#foot_company p.address {clear: both; float: left; line-height: 20px; margin-top: 10px; font-size: 10px; font-weight: normal; letter-spacing: 2px; color: #FFF;}
#foot_company p.address br {display: none;}
#foot_company p.tel {clear: both; float: left; line-height: 20px; font-size: 10px; font-weight: normal; letter-spacing: 1px; color: #FFF;}

#foot_company #foot_sns {float: left; width: 100%; height: auto; margin-top: 20px;}
#foot_company #foot_sns ul {float: left; width: auto; height: auto;}
#foot_company #foot_sns ul li {float: left; width: 20px; height: 20px; margin-right: 20px;}
#foot_company #foot_sns ul li img {width: 100%; height: auto; vertical-align: top;}

#foot_company #copyright {float: left; width: 100%; height: auto; margin-top: 20px;}
#foot_company #copyright p {line-height: 10px; font-size: 10px; font-weight: normal; color: #FFF;}
}

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

/*  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: 1400px; margin: auto;}
}

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

/*  02.  content - title
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  content  *//*  title  */
.content_title {float: left; width: 100%; height: auto;}
.content_title h2,
.content_title h3 {line-height: 30px; font-size: 30px; font-weight: normal; text-align: center;}
.content_title p {line-height: 20px; margin-top: 10px; font-size: 14px; font-weight: normal; text-align: center;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  content  *//*  title  */
.content_title {float: left; width: 100%; height: auto;}
.content_title h2,
.content_title h3 {line-height: 20px; font-size: 20px; font-weight: normal; text-align: center;}
.content_title p {line-height: 15px; margin-top: 5px; font-size: 12px; font-weight: normal; text-align: center;}
}

/*  03.  content - pankuzu
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  content  *//*  pankuzu  */
#pankuzu {float: left; width: 100%; height: auto;}
#pankuzu ul {float: left; width: 100%; height: auto; padding: 10px 20px 10px 20px; box-sizing: border-box;}
#pankuzu ul li {float: left; width: auto; height: auto; line-height: 20px; font-size: 12px; font-weight: normal; color: #000;}
#pankuzu ul li span {float: left; margin: 0px 10px 0px 10px;}
#pankuzu ul li a {display: inline-block; color: #000;}
#pankuzu ul li a:hover {color: #777;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  content  *//*  pankuzu  */
#pankuzu {float: left; width: 100%; height: auto;}
#pankuzu ul {float: left; width: 100%; height: auto; padding-left: 5px; padding-right: 5px; box-sizing: border-box;}
#pankuzu ul li {float: left; width: auto; height: auto; line-height: 20px; font-size: 10px; font-weight: normal; color: #000;}
#pankuzu ul li span {float: left;  margin-left: 5px; margin-right: 5px;}
#pankuzu ul li a {display: inline-block; color: #000;}
}

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

/*  01.  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% / 5 - 20px); height: auto; margin: 10px; padding-bottom: 30px;}
.item-list ul li a {width: 100%; height: 100%;}

.item-list ul li .image {position: relative; float: left; width: 100%; height: auto; padding-top: 100%; background-size: cover; background-position: center; z-index: 2;}
.item-list ul li:hover .image {opacity: 0;}
.item-list ul li .image-sub {position: absolute; width: 100%; height: auto; padding-top: 100%; left: 0; background-size: cover; background-position: center; z-index: 1;}

.item-list ul li .name {float: left; width: 100%; height: auto; margin-top: 10px;}
.item-list ul li .name p.name {line-height: 20px; font-size: 14px; font-weight: normal; color: #333;}
.item-list ul li:hover .name p.name {color: #FF6600;}
.item-list ul li .name p.name img {margin-right: 5px!important;}

.item-list ul li .price {position: absolute; width: 100%; height: auto; left: 0; bottom: 0px;}
.item-list ul li .price p.regular {line-height: 20px; font-size: 12px; font-weight: bold; text-align: right; color: #333;}
.item-list ul li .price p.sale {line-height: 20px; font-size: 12px; font-weight: bold; text-align: right; color: #B00000;}
.item-list ul li .price p.soldout {line-height: 20px; font-size: 12px; font-weight: bold; text-align: right; color: #AAA;}
.item-list ul li .price p span {margin-right: 10px;}
.item-list ul li .price p br {display: none;}
}

/*  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: 1px; box-sizing: border-box;}
.item-list ul {display: flex; flex-wrap: wrap;}
.item-list ul li {position: relative; width: calc(100% / 3 - 2px); height: auto; margin: 1px; padding-bottom: 30px;}
.item-list ul li a {width: 100%; height: 100%;}

.item-list ul li .image {position: relative; float: left; width: 100%; height: auto; padding-top: 100%; background-size: cover; background-position: center; z-index: 2;}
.item-list ul li .image-sub {display: none;}

.item-list ul li .name {float: left; width: 100%; height: auto; margin-top: 2px;}
.item-list ul li .name p.name {line-height: 15px; font-size: 10px; font-weight: normal; color: #333;}
.item-list ul li .name p.name img {margin-right: 2px!important;}

.item-list ul li .price {position: absolute; width: 100%; height: auto; left: 0; bottom: 0;}
.item-list ul li .price p.regular {line-height: 12px; font-size: 10px; font-weight: bold; text-align: left; color: #333;}
.item-list ul li .price p.sale {line-height: 12px; font-size: 10px; font-weight: bold; text-align: left; color: #B00000;}
.item-list ul li .price p.soldout {line-height: 12px; font-size: 10px; font-weight: bold; text-align: left; color: #AAA;}
.item-list ul li .price p span {margin-right: 2px;}
}

/*  ex.  animation
------------------------------*/
/*  animation  */
.item-list ul li,
.item-list ul li p,
.item-list ul li .image {transition: all 0.2s;}

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  flicker
--------------------------------
------------------------------*/

/*  01.  flicker
------------------------------*/
/*  flicker  */
.flickity-enabled {position: relative;}
.flickity-enabled:focus {outline: none;}
.flickity-viewport {overflow: hidden; position: relative; height: 100%;}
.flickity-slider {position: absolute; width: 100%; height: 100%;}

/* draggable */
.flickity-enabled.is-draggable {tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
.flickity-enabled.is-draggable .flickity-viewport {cursor: move; cursor: -webkit-grab; cursor: grab;}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {cursor: -webkit-grabbing;cursor: grabbing;}

/* ---- flickity-button ---- */
.flickity-button {position: absolute; background-color: #121A27; border: 0px; outline: none; z-index: 998;}
.flickity-button:hover {cursor: pointer;}

/* ---- previous/next buttons ---- */
/*  pc  */
@media screen and (min-width: 980px) {
.flickity-prev-next-button {top: 50%; width: 40px; height: 40px; border-radius: 50%; transform: translateY(-50%);}
.flickity-prev-next-button.previous {left: 0px; background-image: url("https://turnmeon.jp/image/ec/icon_prev-white.png"); background-size: 20px; background-position: center; background-repeat: no-repeat;}
.flickity-prev-next-button.next {right: 0px; background-image: url("https://turnmeon.jp/image/ec/icon_next-white.png"); background-size: 20px; background-position: center; background-repeat: no-repeat;}
.flickity-prev-next-button .flickity-button-icon {display: none;}
}

/*  sp  */
@media screen and (max-width: 979px) {
.flickity-prev-next-button {top: 50%; width: 30px; height: 40px; border-radius: 5px; transform: translateY(-50%);}
.flickity-prev-next-button.previous {left: -10px; background-image: url("https://turnmeon.jp/image/ec/icon_prev-white.png"); background-size: 14px; background-position: center; background-repeat: no-repeat;}
.flickity-prev-next-button.next {right: -10px; background-image: url("https://turnmeon.jp/image/ec/icon_next-white.png"); background-size: 14px; background-position: center; background-repeat: no-repeat;}
.flickity-prev-next-button .flickity-button-icon {display: none;}
}