@charset "utf-8";
@media print, screen and (max-width:768px){
/*=========================================================================
STYLE BASIC
=========================================================================*/
.for_pc {display: none !important;}

/* ---------------------------------------------------------------- */
#contactArea {display: none; }


body.open {overflow: hidden;}

/*=========================================================================
HEADER
=========================================================================*/
#Header {
width: 100%;
z-index:999;
position:sticky;
left:0;
height: 60px;
-moz-transition:.3s;
-webkit-transition: .3s;
-o-transition:.3s;
-ms-transition:.3s;
transition:.3s;
}
#Header.is-hide {
position:fixed;
bottom: 0;
left: 0;
height: 60px;
}

/*------------------------------------------------------------------- */
#headContainer, #site_nameBloc, #headerLink {
height: 50px;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
align-items: center;
}

#Header.is-hide #headContainer,
#Header.is-hide #site_nameBloc,
#Header.is-hide #headerLink {height: 60px;}

/*------------------------------------------------------------------- */
#headContainer {justify-content: space-between;}
#Header.is-hide #headContainer {background: #014646; border-bottom: 0; z-index: 999;}


/*------------------------------------------------------------------- */
#site_nameBloc, #headerLink {
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

#site_nameBloc {width: 30%;max-width: 100px;left: 5%;}

/*------------------------------------------------------------------- */
#Header.is-hide #site_nameBloc {display: none;}

/*------------------------------------------------------------------- */
#siteCatch {display: none;}
#siteName {width: 100%;}

/*------------------------------------------------------------------- */
#headerLink {width: 65%;right: 0%;}

#Header.is-hide #headerLink {width: 80%; left: 0; right:auto;}

/*------------------------------------------------------------------- */
ul#head_linkList {align-items: center; width: calc(100% - 55px);  justify-content: flex-end; }
ul#head_linkList li {margin-left:5%; font-size: 12px; }

@media print, screen and (max-width:480px){
ul#head_linkList li {font-size: 2.6vw;}
}

/*------------------------------------------------------------------- */
ul#head_linkList li#Mn01,ul#head_linkList li#Mn02,
#spIcon,.sp_bottom {display: none;}
ul#head_linkList li#Mn04 {display: block;}


ul#head_linkList {justify-content: flex-end; align-items: center;}

#Header.is-hide ul#head_linkList li#Mn01,
#Header.is-hide ul#head_linkList li#Mn02,
#Header.is-hide #spIcon,
#Header.is-hide .sp_bottom {display: block;}
#Header.is-hide ul#head_linkList li#Mn04 {display: none;}

/*------------------------------------------------------------------- */
#Header.is-hide ul#head_linkList {width: 100%; margin: 0 auto; justify-content: flex-start; }
#Header.is-hide ul#head_linkList li {width: 20%; font-size: 9px; }
#Header.is-hide ul#head_linkList li:last-of-type {margin-right: 0;}

@media print, screen and (max-width:480px){
#Header.is-hide ul#head_linkList li {font-size: 2.2vw;}
}

/*------------------------------------------------------------------- */
#Header.is-hide ul#head_linkList li,
#Header.is-hide ul#head_linkList li a {color: #fffaea; text-align: center;}
#Header.is-hide ul#head_linkList li a:hover {color: #FF7900; filter: alpha(opacity=80); -moz-opacity:.8; opacity:.8;}


/*------------------------------------------------------------------- */
#Header.is-hide ul#head_linkList li #spIcon {width: 56%; margin: 0 auto 5%; max-width: 30px;}
#Header.is-hide ul#head_linkList li a,
#Header.is-hide ul#head_linkList li #spIcon img {width: 100%; height: auto; display: block; }


@media print, screen and (max-width:320px){
#Header.is-hide ul#head_linkList li #spIcon {width: 56%;}
}



/*------------------------------------------------------------------- */
ul#head_linkList li#mnCart {width: 2.2em; padding-top: .5em;}

#Header.is-hide ul#head_linkList li#mnCart {width: 20%; padding: 0;}
#Header.is-hide ul#head_linkList li#mnCart img {width: 66%; margin:0% auto 5%; max-width: 34px;}

#Header.is-hide .bottom_hide {display: none;}

@media print, screen and (max-width:320px){
#Header.is-hide ul#head_linkList li#mnCart img {width: 56%;}
}

/*------------------------------------------------------------------- */
#cartNum {font-size: 9px; width: 2em; padding: .3em 0 .35em; top:-6px; }

#Header.is-hide #cartNum {top: 0;left: 54%;}

@media print, screen and (max-width:480px){
#cartNum {font-size: 2vw;}
}


@media print, screen and (max-width:480px){
#Header.is-hide #cartNum {font-size: 2vw; }
}


/*=========================================================================
HEADER：ドロワーナビ①
=========================================================================*/
#header_mainNavi {display: none;}

/* ---------------------------------------------------------------- */
#menu-trigger {width: 55px;height: 50px; right: 0%;}

/* ---------------------------------------------------------------- */
#Header.is-hide #menu-trigger {top: auto; bottom: 0; }


/* ---------------------------------------------------------------- */
#menu-trigger span {height: 4px;}
#menu-trigger span:nth-child(1) {top: 18%;}
#menu-trigger span:nth-child(2) {top: 33%;}
#menu-trigger span:nth-child(3) {top: 50%;}

#Header.is-hide #menu-trigger span:nth-child(1) {top: 18%;}
#Header.is-hide #menu-trigger span:nth-child(2) {top: 33%;}
#Header.is-hide #menu-trigger span:nth-child(3) {top: 50%;}

#menu-trigger.active span:nth-child(1) , #menu-trigger.active span:nth-child(3),
#Header.is-hide #menu-trigger.active span:nth-child(1) , #Header.is-hide #menu-trigger.active span:nth-child(3) {top: 30%; left:25%;}



/* ---------------------------------------------------------------- */
#menu-trigger p {font-size: 9px; bottom: 10px; font-weight: 600;}

#Header.is-hide #menu-trigger span {background: #fffaea;}
#Header.is-hide #menu-trigger p {color: #fffaea; bottom: 10px;}
#Header.is-hide #menu-trigger:hover p {color: #FF7900;}

@media print, screen and (max-width:480px){
#menu-trigger p {font-size: 2vw;}
}
@media print, screen and (max-width:414px){
#menu-trigger p {font-size: 2.4vw;}
}


/*=========================================================================
ヘッダー：カテゴリーナビ
=========================================================================*/
html.hide, body.hide {overflow-y: hidden;}

/* ---------------------------------------------------------------- */
#top_categoryNavi {top: 50px; min-height: 30px;}
#top_categoryNavi.is-fixed {top: 0px;}

@media print, screen and (max-width:1200px){
#top_categoryNavi {overflow-x: scroll; }
#top_categoryNavi.active {overflow: visible;position: static;}
}

/* ---------------------------------------------------------------- */
.cat_navi_inner {padding: 0 5%; min-width: 680px; height: 25px;}


/* ---------------------------------------------------------------- */
ul#cat_naviList {width: 100%; margin-right: 1%;}

#top_categoryNavi.active ul#cat_naviList,
#top_categoryNavi.active ul#cat_naviList li{ position:static;}

ul#cat_naviList li {position:static;}
ul#cat_naviList li.top_layer {font-size: 10px; margin-right: .2em;}
ul#cat_naviList li.top_layer a {padding: 2px 1em;}

ul#cat_naviList li.top_layer:first-of-type {margin-right: 1em;}
ul#cat_naviList li.top_layer:last-of-type {margin-left: 1em;}


/* ---------------------------------------------------------------- */
.cat_subnavi {
left: 0;
top: 0px;
position: fixed;
background: #01b4be;
width: 100vw;
height: 100vh;
z-index:10009;
display: none;
opacity: 1;
 overflow-y: scroll;
}
.cat_subnavi.sp_open {
z-index: 10009;
opacity: 1; /* 非表示を解除 */
visibility: visible; /* 非表示を解除 */
}

.cat_subnavi p {font-size: 12px; padding:2% 0; display: block; width: 100%; white-space: nowrap;}
.cat_subnavi p:first-of-type {padding-top: 0%;}

.cat_subnavi p a {padding-left:1em !important;}
.cat_subnavi p a:before {top: .4em;width: .6em;height: .6em;}

.cat_subnavi p.other_link {padding: 3% 0 0; margin-top:3%;}
.cat_subnavi p.other_link:last-of-type {padding-bottom: 0;}
.cat_subnavi p.other_link a:before {
top: .5em;
border-top:.3em solid transparent;
border-right:.6em solid transparent;
border-bottom:.3em solid transparent;
border-left:.6em solid #fffaea;
}

/* ---------------------------------------------------------------- */
@media print, screen and (max-width:480px){
.cat_subnavi p {font-size: 11px;}
}

@media print, screen and (max-width:414px){
.cat_subnavi p {font-size: 3.3vw; padding: 4% 0 0; margin-top:4%;}
.cat_subnavi p.other_link {padding: 4% 0 0; margin-top:4%;}
}
/* ---------------------------------------------------------------- */
.subnavi_inner {padding: 9%;　min-height: 100%;}

/* ---------------------------------------------------------------- */
.sp_navilogo {margin: 0 auto 6%; height: auto; width: 25%; max-width: 100px;}
.sp_navilogo a, .sp_navilogo img {width: 100%; height: auto; display: block;}
.sp_navilogo a:hover {filter: alpha(opacity=80); -moz-opacity:.8; opacity:.8;}

@media print, screen and (max-width:414px){
.sp_navilogo {margin-bottom: 18%;}
}


/* ---------------------------------------------------------------- */
.btn_close {
max-width: 120px;
width: 40%;
height: auto;
margin: 9% auto 0;
}
.btn_close img, .btn_close a{width: 100%; height: auto;display: block;}
.btn_close a {-webkit-box-shadow:2px 2px 1px 2px rgba(0,130,137,.8) ;box-shadow:2px 2px 1px 2px rgba(0,130,137,.8);}
.btn_close a:hover {-webkit-box-shadow:0; box-shadow:none ;}

@media print, screen and (max-width:414px){
.btn_close {margin-top: 18%;}
}

/* ---------------------------------------------------------------- */
.cat_subnavi.guide,
.cat_subnavi.guide .subnavi_inner {background: #014646;}
.cat_subnavi.guide .navi_one_box {display: flex; flex-wrap: wrap; align-items: flex-start;}

.cat_subnavi.guide .sp_navilogo {width: 100% !important; max-width: inherit;}
.cat_subnavi.guide .sp_navilogo img {width: 25%; margin: 0 auto; max-width: 100px;}

.cat_subnavi.guide p {
line-height: 100%;
width: 49%;
font-size: 15px;
max-width: inherit;
display: block;
padding: 0;
margin: 0 2% 2% 0;
}
.cat_subnavi.guide p:nth-of-type(even) {margin-right: 0;}

.cat_subnavi.guide p a {border: 1px solid #fffaea; color: #fffaea; padding: 10px 1em; display: block; text-align: center;}
.cat_subnavi.guide p a:hover {border-color:#ff7900; color: #ff7900 !important;}
.cat_subnavi.guide p a:before {content: none;}

@media print, screen and (max-width:480px){
.cat_subnavi.guide p {font-size: 14px;}
}
@media print, screen and (max-width:414px){
.cat_subnavi.guide p {font-size: 3.3vw;}
}


/* ---------------------------------------------------------------- */
.cat_subnavi.guide .btn_close a {-webkit-box-shadow:2px 2px 1px 2px rgba(0,39,39,.8); box-shadow:2px 2px 1px 2px rgba(0,39,39,.8);}
.cat_subnavi.guide .btn_close a:hover {-webkit-box-shadow:0; box-shadow:none ;}

/* ---------------------------------------------------------------- */
.navi_one_box {margin-bottom: 6%;}
.navi_one_box:last-of-type {margin-bottom: 0;}


.navi_cap, #menuTitle {color: #fffaea; line-height: 140%; font-weight: 600; text-align: center; width: 100%; margin: 0 auto;}
.navi_cap {font-size: 13px; margin-bottom: 6%;}
#menuTitle {font-size: 16px; margin-bottom: 3%;}

@media print, screen and (max-width:480px){
.navi_cap  {font-size: 12px;}
}
@media print, screen and (max-width:414px){
.navi_cap {font-size: 3vw;}
}

/* ---------------------------------------------------------------- */
#navi_contactArea {text-align: center; }

#navi_contactArea div,
#navi_contactArea a{ position: relative; z-index: 1; color: #fffaea; line-height: 100%; font-weight: 600; font-size: 22px;}
#navi_contactArea div{
text-decoration: none;
display: inline-block;
margin-bottom: 3%;
-ms-transition: .2s;
-moz-transition: .2s;
-webkit-transition: .2s;

transition: .2s;
}
#navi_contactArea div:last-of-type {margin-bottom: 0;}

#navi_contactArea div {padding-left: 1.2em;}
#navi_contactArea a {padding-left: .2em;}

@media print, screen and (max-width:768px){
#navi_contactArea div, #navi_contactArea a{font-size: 5.3vw;}
}
@media print, screen and (max-width:414px){
#navi_contactArea div, #navi_contactArea a{font-size: 6vw;}
}
/* ---------------------------------------------------------------- */
#navi_contactArea a {text-decoration: none;}
#navi_contactArea a:hover {color: #ff7900;}


/* ---------------------------------------------------------------- */
#navi_contactArea span {font-size: 18px; display: block;}

@media print, screen and (max-width:768px){
#navi_contactArea span {font-size: 3.2vw;}
}


/* ---------------------------------------------------------------- */
#navi_contactArea div:before {
content: "";
position: absolute;
z-index: 1;
left: 0;
top: 0em;
width: 1.01em;
height: 1em;
background-position: left top;
background-repeat: no-repeat;
background-size: cover;
}

#navi_contactArea .tel_num:before {background-image: url('../img/icon_tel.png');}
#navi_contactArea .mail_trigger:before {background-image: url('../img/icon_mail.png');}


/*=========================================================================
パンクズリスト
=========================================================================*/
ul#breadCrumb {padding: 10px 0;}
ul#breadCrumb li {font-size: 11px;}

@media print, screen and (max-width:480px){
ul#breadCrumb li{font-size:10px;}
}

@media print, screen and (max-width:414px){
ul#breadCrumb li{font-size:2.8vw;}
}


/*=========================================================================
#Footer
=========================================================================*/
.fooer_onebloc {width: 90%; margin: 0 auto; max-width: 1600px; padding: 6% 0; border-bottom: 0;}


/*=========================================================================
#Footer：会社情報
=========================================================================*/
#campany_nameBox {width: 100%; max-width: 400px;margin: 0 auto;}

/* ---------------------------------------------------------------- */
#bottomLogo {width: 14%; margin-right: 3%;}
#companyNanme {width: 83%; margin-top: -8%;}

/* ---------------------------------------------------------------- */
#companyAdd { width: 83%; margin:-5% 0 0 auto; font-size: 15px; display: block;}
#companyAdd span {font-size: 11px;}
#companyAdd a {padding: 1px .5em 2px; margin-left: 1em; font-size: 12px; vertical-align: 1px;}


@media print, screen and (max-width:480px){
#companyAdd {font-size: 12px;}
#companyAdd a {font-size: 11px;}
}

@media print, screen and (max-width:414px){
#companyAdd {font-size: 3vw;}
#companyAdd a {font-size: 2.8vw;}
}

/*=========================================================================
#Footer：インフォメーションリンク
=========================================================================*/
ul#bottom_infoLink {display: none;}

/*=========================================================================
#Footer：ガイドリンク
=========================================================================*/
#bottomContact,#bottomCategory {display: none;}

/*=========================================================================
#Footer：コピーライト、他
=========================================================================*/
#footerBottom {padding: 5% 0 80px; display: block;}

#Copy {text-align: center; font-size: 13px; width: 100%; display: block;}

@media print, screen and (max-width:480px){
#Copy {font-size: 12px;}
}
@media print, screen and (max-width:414px){
#Copy {font-size: 2.9vw;}
}


/* ---------------------------------------------------------------- */
ul#store_cautionLink {margin: 0 auto 5%; justify-content:center; width: 100%;}
ul#store_cautionLink li {font-size: 13px; margin-right: 2em;}
ul#store_cautionLink li:last-of-type {margin-right: 0;}
ul#store_cautionLink li:after {right: -1em;}


@media print, screen and (max-width:480px){
ul#store_cautionLink li {font-size: 11px;}
}
@media print, screen and (max-width:414px){
ul#store_cautionLink li {font-size: 2.8vw;}
}
/* ---------------------------------------------------------------- */
ul#bottom_snsLink {justify-content: center; width: 36%; margin: 0 auto 5%;}
ul#bottom_snsLink li {width: 12%; margin-right: 5%;}
ul#bottom_snsLink li:last-of-type {margin-right: 0;}
ul#bottom_snsLink li#linkLine {width: 47%; }

@media print, screen and (max-width:414px){
ul#bottom_snsLink {width: 56%;}
}



/*=========================================================================
TABNAVI
=========================================================================*/
#tabnaviBody {overflow: hidden; overflow-x: scroll; -webkit-overflow-scrolling: touch;}
#tabnaviBody::-webkit-scrollbar {background: #f8efd1; height: 4px;}
#tabnaviBody::-webkit-scrollbar-thumb {background:#01b4be;}

ul#tabNavi {padding-bottom: 3px;}

ul#tabNavi li {margin-right: 1%; text-align: center;}
ul#tabNavi li a {font-size: 12px;padding: 6px .5em; display: block;}

@media print, screen and (max-width:480px){
ul#tabNavi li a {font-size: 3vw;}
}


/* ---------------------------------------------------------------- */
#informationContainer {padding: 6% 0;}


/*=========================================================================
バルーン
=========================================================================*/
.baloon {
position: fixed;
z-index: 10000;
width: 100%;
height: 100vh;
padding-bottom: 6%;
display: none;
overflow-y: scroll;
left: 0%;
top: 0;
background: #f8efd1;
}

/* ---------------------------------------------------------------- */
.baloon_body {padding:9% 6%; min-height: 100vh; font-size: 13px; }

/* ---------------------------------------------------------------- */
.baloon_body .sp_navilogo {width: 26% !important; margin-bottom: 6%; max-width: 130px;}

/* ---------------------------------------------------------------- */
.baloon_pic {margin-bottom: 4%; margin-top: 12%; position: relative; z-index: 1; overflow: visible;}
.baloon_pic img {
-ms-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
overflow: hidden;
}

/* ---------------------------------------------------------------- */
.baloon_pic:before {
content: "";
position: absolute;
z-index: 2;
top: -2.2em;
right: .5em;
width: 6em;
height: 3em;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url('../img/chara02.png');
}

/* ---------------------------------------------------------------- */
.baloon_title {font-size: 18px; margin-bottom: 3%;}

@media print, screen and (max-width:480px){
.baloon_title {font-size: 3.6vw; }
}

/* ---------------------------------------------------------------- */
.btn_pagelink {margin-top: 4%; font-size: 13px; max-width: 320px;}
.btn_pagelink a {display: block;padding: 10px 1em;}

/* ---------------------------------------------------------------- */
.baloon .btn_close {
max-width: 140px;
width: 30%;
background: #fffaea;
-ms-box-shadow: 3px 3px 1px 1px #002727;
-moz-box-shadow: 3px 3px 1px 1px #002727;
-webkit-box-shadow: 3px 3px 1px 1px #002727;
box-shadow: 3px 3px 1px 1px #002727;
-ms-transition: .2s;
-moz-transition: .2s;
-webkit-transition: .2s;
transition: .2s;
cursor: pointer;
}
.baloon .btn_close:hover {
-ms-box-shadow: 0;
-moz-box-shadow: 0;
-webkit-box-shadow: 0;
box-shadow: none;
}



}