@charset "UTF-8";

/*ポップアップ */ 

.popup { 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    opacity: 0; 
    visibility: hidden; 
    transition: .6s; 
  } 
  
  .popup.is-show { 
    opacity: 1; 
    visibility: visible; 
  } 
  
  .popup-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 600px;
    padding: 50px;
    background-color: #fff;
    z-index: 2;
    margin-top: 50px;  /* 上部に余白を追加 */
    /* `top` の位置を調整することで、中央配置を保つ */
    top: calc(50% + 50px); /* 50pxの余白を中央位置に反映 */
  }
  
  .popup-inner a:hover { 
  text-decoration: none; 
  } 
  
  .popup-txt { 
  color: #333; 
  line-height: 2.0; 
  } 
  
  .close-btn { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 50px; 
    height: 50px; 
    line-height: 50px; 
    text-align: center; 
    cursor: pointer; 
  font-size: 40px; 
  } 
  
  .black-background { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,.8); 
    z-index: 1; 
    cursor: pointer; 
  } 
  
  /*ポップアップここまで */ 





/*----------------------------  
common style
-----------------------------*/
html {
  scroll-behavior: auto !important;
}

body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  word-wrap: break-word;
  text-size-adjust: 100%;
  font-kerning: normal;
  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
  font-weight: 400;
  color: #333;
  font-feature-settings: "pwid";
}

img {
  max-width: 100%;
  height: auto;
}


/* flex */
.f-flex {
  display: flex;
}
.f-bottom {
  align-items: flex-end;
}
.f-middle {
  align-items: center;
}
.f-center {
  justify-content: center;
}
.f-between {
  justify-content: space-between;
}
.f-end {
  justify-content: flex-end;
}
.f-column {
  flex-direction: column;
}

/* margin */
.mt0 {
  margin-top: 0 !important;
}

/* color */
:root {
 --color-yellow: #DADF19;
 --color-blue: #446581;
}


/*----------------------------  
header
-----------------------------*/
.ec-cartNavi {
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  min-width: auto;
}
.ec-cartNavi .ec-cartNavi__icon {
  background: url(../img/common/cart.svg) no-repeat center/100% auto;
  width: 31px;
  height: 41px;
}
.ec-cartNavi .ec-cartNavi__icon::before {
  content: none;
}
.ec-cartNavi__label {
  display: none;
}

/*----------------------------  
main
-----------------------------*/
/* セクションタイトル */
.ec-secHeading span {
  display: block;
}




/*----------------------------  
footer
-----------------------------*/
.ec-footerRole {
  border-top: none;
  background: #333;
}
#page_homepage .ec-footerRole {
  margin-top: 0;
}
.flogo {
  margin-bottom: 30px;
}
.flogo img {
  width: 180px;
  height: 42px;
}
.fsns img {
  width: 40px;
  height: 40px;
}
.fmenu li {
  list-style: none;
  position: relative;
}
.fmenu a {
  color: #fff;
  font-size: 14px;
}

.ec-footer_copyright {
  text-align: center;
  color: #fefefe;
  padding-bottom: 20px;
}
.ec-footer_copyright a {
  color: #fff;
}


/* ページトップボタン */
.ec-blockTopBtn {
  width: 50px;
  height: 50px;
  background: none;
  opacity: 0.9;
  right: 10px;
  bottom: 10px;
}




/*----------------------------  
TOPページ
-----------------------------*/
#page_homepage  .ec-layoutRole .ec-layoutRole__contents {
  max-width: none;
  width: 100%;
}

#page_homepage .ec-sliderRole {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
}



/* TOPカテゴリー */
.ec-categoryRole {
  background: url(../img/top/bg_top_product2.jpg) no-repeat center top/cover;
}
.ec-categoryRole .ec-secHeading {
  text-align: center;
  color: #fff;
  margin-bottom: 25px;
}
.ec-categoryRole .ec-categoryRole__list {
  flex-wrap: wrap;
  justify-content: space-around;
}
.ec-categoryRole .ec-categoryRole__listItem {
  width: 48%;
  display: flex;
  justify-content: center;
  margin-right: 0;
  position: relative;
  margin-bottom: 50px;
}
.ec-categoryRole .ec-categoryRole__listItem::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.ec-categoryRole .ec-categoryRole__listItem::after {
  content: "";
  position: absolute;
  bottom: 25px;
  left: 50%;
  z-index: 1;
  background: url(../img/top/top_product_mat.png) no-repeat center/cover;
  width: 120%;
  aspect-ratio: 436/209;
  margin-left: -60%;
}
.ec-categoryRole .ec-categoryRole__listItem a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  z-index: 2;
  position: relative;
  transition: 0.5s;
}
.ec-categoryRole .ec-categoryRole__listItem a:hover {
  text-decoration: none;
}
.ec-categoryRole .ec-categoryRole__listItem a img {
  margin-bottom: 30px;
  width: 100%;
}
.ec-categoryRole .ec-categoryRole__listItem a span {
  font-weight: bold;
  color: var(--color-yellow);
}
.ec-categoryRole .ec-categoryRole__listItem:not(:last-of-type) {
  margin-right: 0;
}
/*.ec-categoryRole .ec-categoryRole__listItem:nth-child(1)::before {
  background: url(../img/top/01.svg) no-repeat center/100% auto;
}
.ec-categoryRole .ec-categoryRole__listItem:nth-child(2)::before {
  background: url(../img/top/02.svg) no-repeat center/100% auto;
}
.ec-categoryRole .ec-categoryRole__listItem:nth-child(3)::before {
  background: url(../img/top/03.svg) no-repeat center/100% auto;
}
.ec-categoryRole .ec-categoryRole__listItem:nth-child(4)::before {
  background: url(../img/top/04.svg) no-repeat center/100% auto;
}
.ec-categoryRole .ec-categoryRole__listItem:nth-child(5)::before {
  background: url(../img/top/05.svg) no-repeat center/100% auto;
}*/


/* moreボタン */
.btn_more_wrap {
  display: flex;
  justify-content: center;
}
.btn_more {
  width: 286px;
  height: 56px;
  border: 3px solid;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  position: relative;
  background-repeat: no-repeat;
  background-position: right 25px center;
  background-size: 23px 14px;
}
.btn_more::after {
  content: none;
}
.btn_more_w {
  border-color: #fff;
  background-image: url(../img/common/enter.png);
}
.btn_more img {
  width: 106px;
  height: 34px;
  transition: 1s;
}

/* TOP ABOUT */
#ec-aboutRole {
  background: #A2B3C1;
  overflow: hidden;
}
#ec-aboutRole .ec-role {
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
}
#ec-aboutRole .left_block {
  position: relative;
  display: flex;
  justify-content: flex-end;
}
#ec-aboutRole .left_block img {
  max-width: none;
}
#ec-aboutRole .right_block .ec-secHeading {
  margin-bottom: 40px;
}
#ec-aboutRole .right_block .section_title {
  text-align: center;
  margin-top: 60px;
}
#ec-aboutRole .right_block .section_title_en {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 36px;
  margin-left: auto;
  margin-right: auto;
}
#ec-aboutRole .right_block .section_title_jp {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}
#ec-aboutRole .right_block .txt_wrap {
  color: #fff;
  font-size: 18px;
  display: flex;
  justify-content: center;
}
/* TOP WORKS */
#ec-worksRole {
  background: url(../img/top/bg_top_works.jpg) no-repeat center/cover;
}
#ec-worksRole .ec-role {
  display: flex;
  position: relative;
  flex-direction: column;
  overflow: hidden;
}
#ec-worksRole .left_block {
  margin-left: 0;
  order: 2;
}
#ec-worksRole .left_block .section_title {
  text-align: center;
  margin-top: 100px;
}
#ec-worksRole .left_block .section_title_en img  {
  width: 230px;
  height: 54px;
}
#ec-worksRole .left_block .section_title_jp {
  font-size: 20px;
  color: var(--color-yellow);
  font-weight: bold;
}
#ec-worksRole .left_block .txt_wrap {
  color: #fff;
  font-size: 18px;
  display: flex;
  justify-content: center;
}
.btn_more_y {
  border-color: var(--color-yellow);
  background-image: url(../img/common/enter_y.png);
}
#ec-worksRole .right_block {
  order: 1;
  display: flex;
  justify-content: center;
}
#ec-worksRole .right_block img {
  position: relative;
  z-index: 2;
}
#ec-worksRole .right_block::before {
  content: "";
  position: absolute;
  background: url(../img/top/top_works_image2.webp) no-repeat center/100% auto;
  top: 30px;
  z-index: 1;
  margin-top: 0;
}

/* TOP PAGELINK */
#ec-pagelinkRole {
  background: url(../img/top/bg_top_product2.jpg) no-repeat center/cover;
}
#ec-pagelinkRole .ec-role {
  display: block;
}

#ec-pagelinkRole a:hover {
  text-decoration: none;
}

#ec-pagelinkRole .left_top {
  margin-bottom: 25px;
}
#ec-pagelinkRole .left_top a {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100px;
  background-color: rgba(217,222,25,.77);
  background-image: url(../img/common/enter_b.png);
  background-repeat: no-repeat;
  background-position: top 48px right 30px;
  text-align: center;
  transition: 0.5s;
}
#ec-pagelinkRole .left_top a:hover {
  background-color: rgba(255,255,255,.77);
}
#ec-pagelinkRole .left_top a span:last-child {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}
#ec-pagelinkRole #btn_flow img {
  width: 181px;
  height: 54px;
}
#ec-pagelinkRole #btn_faq img {
  width: 138px;
  height: 54px;
}
#ec-pagelinkRole .left_middle {
  margin-bottom: 25px;
}
#ec-pagelinkRole .left_middle a {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100px;
  background-color: rgba(70,103,130,.85);
  background-repeat: no-repeat;
  background-position: top 48px right 30px;
  border: 3px solid var(--color-yellow);
  text-align: center;
  transition: 0.5s;
}
#ec-pagelinkRole .left_middle a:hover {
  background-color: rgba(255,255,255,.77);
  border-color: #fff;
}
#ec-pagelinkRole .left_middle a img {
  width: 303px;
  height: 44px;
}
#ec-pagelinkRole .left_middle a span:last-child {
  font-size: 20px;
  color: var(--color-yellow);
  font-weight: bold;
}
#ec-pagelinkRole .left_bottom #info_wrap {
  width: 100%;
  min-height: 0;
  padding: 20px 22px;
  background-color: rgba(255,255,255,.85);
  margin-bottom: 30px;
}
#ec-pagelinkRole .left_bottom #info_wrap p {
  text-align: center;
}
#ec-pagelinkRole .left_bottom #info_wrap p img {
  width: 321px;
  height: 44px;
}

.ec-newsRole .ec-newsRole__news {
  border: none;
  padding: 0;
}
.ec-newsRole .ec-newsRole__newsItem {
  padding: 15px 0;
}
.ec-newsRole .btn_more_wrap {
  padding-top: 10px;
}
.ec-newsRole .btn_more_wrap  .ec-inlineBtn--top {
  padding-left: 60px;
  padding-right: 60px;
  border-radius: 30px;
  transition: 0.5s;
}
.ec-newsRole .btn_more_wrap  .ec-inlineBtn--top:hover {
  background-color: var(--color-yellow);
  border-color: var(--color-yellow);
  color: #333;
}

#ec-pagelinkRole .right_block {
  width: 100%;
  background-color: rgba(217,222,25,.77);
  padding: 15px;
}
#ec-pagelinkRole .right_block p {
  text-align: center;
}
#ec-pagelinkRole .right_block p img {
  width: 282px;
  height: 54px;
}
#ec-pagelinkRole .right_block #tw_wrap > div {
  overflow: scroll;
}



/*----------------------------  
other page common style
-----------------------------*/


/* ページタイトル */
.other_page .ec-pageHeader  {
  text-align: center;
  margin-bottom: 60px;
}
.other_page .ec-pageHeader span {
  display: block;
  color: #333;
}


/* ページコンテンツ */
.ec-borderedDefs.top_cont {
  margin-bottom: 100px;
  border-top: none;
}
.ec-borderedDefs.bottom_cont {
  border-top: none;
  position: relative;
}

/* ページポジション */
.position {
  display: block;
  position: absolute;
  top: -100px;
}

/*----------------------------  
zeRoについて
-----------------------------*/
#page_about_title .page_title_en img {
  width: 216px;
}
#page_works_title .page_title_en img {
  width: 230px;
}
#page_help_about dl dt {
  padding: 1em 0 1em 14px;
}
#page_help_about dl dd {
  line-height: 1.6;
  padding: 1em 0;
}
.works_cont {
  margin-bottom: 50px;
  padding: 50px 0 0;
}
.works_cont:first-child {
  border-top: none;
  padding-top: 0;
}
.works_cont:last-child {
  margin-bottom: 0;
}
.works_cont .works_img {
  text-align: center;
}
.works_cont .works_img img {
  width: auto;
}
.works_cont .works_comment dt {
  padding-top: 0;
}
.works_cont .works_comment dt span {
  display: inline-block;
  background: #DADF19;
  padding: 5px 0;
  text-align: center;
  width: 8em;
  font-weight: bold;
}

/*----------------------------  
ご購入の流れ
-----------------------------*/
#page_flow_title .page_title_en img {
  width: 189px;
}
#page_faq_title .page_title_en img {
  width: 132px;
}
.flow_cont {
  margin-bottom: 60px;
}
.flow_title {
  display: flex;
  align-items: flex-end;
  color: #333;
  border-bottom: 1px solid #bbb;
  padding: 0 15px 15px;
  margin-bottom: 35px;
}
.flow_title .flow_num {
  margin-right: 30px;
}
.flow_title .flow_en {
  margin-right: 15px;
}

#flow_01 .flow_en img {
  width: 148px;
}
#flow_02 .flow_en img {
  width: 214px;
}
#flow_03 .flow_en img {
  width: 78px;
}
#flow_04 .flow_en img {
  width: 155px;
}

.flow_title .flow_jp {
  font-size: 16px;
}
.flow_txt {
  padding: 0 35px;
}
.flow_cont h3 {
  display: inline-block;
  background: #DADF19;
  padding: 5px 0;
  text-align: center;
  width: 8em;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 15px;
  font-size: 16px;
}
.flow_cont .flow_payment {
  display: block;
  border-bottom: none;
  margin-bottom: 30px;
}
.flow_cont .flow_payment dt {
  font-weight: bold;
  position: relative;
  padding-top: 0;
  padding-left: 1.5em;
  margin-bottom: 10px;
  width: 100%;
}
.flow_cont .flow_payment dt::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: #333;
  left: 0;
  top: 50%;
  margin-top: -8px;
}
.flow_cont .flow_payment dd {
  line-height: 1.6;
  padding-left: 40px;
  width: 100%;
}
.flow_cont .flow_payment dd img {
  width: auto;
}

.faq_cont {
  margin-bottom: 60px;
}
.faq_q {
  display: flex;
  align-items: center;
  padding: 0 15px 15px;
  border-bottom: 1px solid #bbb;
}
.faq_q .q_en {
  margin-right: 10px;
}
.faq_q .q_en img {
  width: 75px;
}
.faq_q .q_jp {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

/*----------------------------  
プライバシーポリシー
-----------------------------*/
#page_help_privacy {
  font-size: 15px;
}
#page_help_privacy h2 {
  font-size: 20px;
  font-weight: bold;
  padding: 15px 0 15px 0;
  margin-top: 0;
  margin-bottom: 35px;
  border-bottom: 1px solid #333;
}
#page_help_privacy h3 {
  font-size: 18px;
  font-weight: bold;
  padding: 0 0 5px 0;
  margin-bottom: 1em;
  border-bottom: 1px dotted #ccc;
}
.privacyul {
  padding-left: 1.5em;
}
.privacyul ol {
  padding-left: 1.5em;
}
.privacyul ol li {
  margin-bottom: 1em;
}


/*----------------------------  
商品一覧
-----------------------------*/
#page_product_list .ec-select {
  display: none;
}

/*----------------------------  
商品詳細
-----------------------------*/
#option_total {
  display: flex;
  padding: 15px 0;
  color: #DE5D50;
}
#option_total p {
  font-weight: bold;
}
#option_total .ec-price__tax {
  margin-left: 15px;
  font-size: 14px;
}
/*----------------------------  
購入
-----------------------------*/
.ec-select__delivery {
  display: none;
}


/*----------------------------  
sp only style START
-----------------------------*/
@media screen and (max-width:767px) {

.sp {
  display: block !important;
}
.pc {
  display: none !important;
}


/*----------------------------  
header sp
-----------------------------*/
.ec-headerNaviRole {
  padding-top: 0;
}
#scroll_ht {
  display: block !important;
  border-bottom: 1px solid #446581;
}
.ec-headerTitle__title h1 {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* ログインボタン */
#h_favorite {
  display: none;
}
.ec-headerNav .ec-headerNav__item {
  margin-left: 10px;
}
/* カート */
.ec-headerRole__cart {
  margin-left: 10px;
}
.ec-headerNaviRole .ec-headerNaviRole__right {
  padding-right: 50px;
}
.ec-cartNavi {
  padding-top: 7px;
}

/* heder hamberger menu defalt */
.ec-headerNavSP {
  left: auto;
  right: 10px;
}
.ec-drawerRoleClose {
  left: auto;
  right: 10px;
  z-index: 100001;
}

.ec-drawerRole {
  transform: translateX(100vw);
}
.ec-drawerRole.is_active {
  transform: translateX( calc(100vw - 260px) );
}

/* 検索アイコン */
.ec-headerSearch .ec-headerSearch__category .ec-select select {
  background: #446581;
}
.ec-headerSearch .ec-headerSearch__keywordBtn img {
  width: 22px;
  height: 22px;
}

.ec-drawerRole .ec-headerCategoryArea .ec-headerCategoryArea__heading {
  color: #fff;
  background: #446581;
}


/*----------------------------  
main sp
-----------------------------*/



/*----------------------------  
footer sp
-----------------------------*/
.ec-footerRole {
  padding-top: 50px;
}
.fcontents {
  margin-bottom: 40px;
}
.flogo_wrap {
  margin-bottom: 40px;
}
.flogo {
  display: flex;
  justify-content: center;
}
.fsns {
  display: flex;
  justify-content: center;
}
.fmenu {
  margin-left: 0;
  margin-bottom: 0;
  padding-left: 0;
}
.fmenu li {
  list-style: none;
  position: relative;
  list-style: none;
  border-top: 1px solid #bbb;
}

.fmenu03 li:last-child {
  border-bottom: 1px solid #bbb;
}

.fmenu li a {
  color: #fff;
  font-size: 14px;
  display: block;
  padding: 3.125%;
  position: relative;
}
.fmenu li a::after {
  border-right: 2px solid #bbb;
  border-top: 2px solid #bbb;
  border-radius: 1px;
  content: "";
  height: 0.7em;
  width: 0.7em;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  position: absolute;
  right: 1em;
  top: 0;
  bottom: 0;
  margin: auto;
}
.ec-footer_copyright {
  font-size: 10px;
}


/*----------------------------  
TOPページ sp
-----------------------------*/
.ec-categoryRole .ec-categoryRole__listItem a span {
  font-size: 18px;
}
.ec-categoryRole .ec-categoryRole__listItem:nth-child(1)::before {
  width: 73.5px;
  height: 51.5px;
}
.ec-categoryRole .ec-categoryRole__listItem:nth-child(2)::before {
  width: 86px;
  height: 51.5px;
}
.ec-categoryRole .ec-categoryRole__listItem:nth-child(3)::before {
  width: 88px;
  height: 51.5px;
}
.ec-categoryRole .ec-categoryRole__listItem:nth-child(4)::before {
  width: 88px;
  height: 51.5px;
}
.ec-categoryRole .ec-categoryRole__listItem:nth-child(5)::before {
  width: 88px;
  height: 51.5px;
}
#ec-aboutRole .left_block {
  margin-right: 10%;
}
#ec-aboutRole .left_block img {
  width: 120vw;
  height: auto;
}
#ec-aboutRole .right_block {
  margin-right: 0;
}
#ec-aboutRole .right_block .section_title_en:nth-child(1) {
  width: 144px;
  height: 36px; 
} 
#ec-aboutRole .right_block .section_title_en:nth-child(2) {
  width: 200px;
  height: 48px; 
}
#ec-aboutRole .right_block .txt_wrap {
  margin-bottom: 50px;
}

/* TOP WORKS */
#ec-worksRole .ec-role {
  padding-top: 50px;
  padding-bottom: 50px;
}
#ec-worksRole .left_block .txt_wrap {
  margin-bottom: 50px;
}
#ec-worksRole .left_block .section_title {
  margin-bottom: 35px;
}
#ec-worksRole .left_block .section_title_en {
  margin-bottom: 25px;
}
#ec-worksRole .right_block img {
  width: 290px;
  height: auto;
}
#ec-worksRole .right_block::before {
  width: 255px;
  height: 424px;
}
#ec-worksRole .right_block::before {
  left: 40%;
}
/* TOP PAGELINK */
#ec-pagelinkRole {
  padding-top: 50px;
  padding-bottom: 50px;
}
#ec-pagelinkRole .left_top a {
  width: 100%;
  margin-bottom: 25px;
}
#ec-pagelinkRole .left_top a:last-child {
  margin-bottom: 0;
}
#ec-pagelinkRole .right_block #tw_wrap > div {
  height: 400px;
}

/*----------------------------  
other page common style
-----------------------------*/

/* ページタイトル */
.ec-pageHeader h1 {
  border-top: none;
  border-bottom: none;
  margin-top: 50px;
}

.other_page .ec-pageHeader  {
  margin-bottom: 30px;
}
.other_page .page_title_en  {
  margin-bottom: 20px;
}
.other_page .page_title_jp  {
  font-size: 20px;
}



/* ページコンテンツ */
.ec-borderedDefs.top_cont {
  margin-bottom: 50px;
}

/* ページポジション */
.position {
  top: -20px;
}

/*----------------------------  
sp zeRoについて
-----------------------------*/
#page_help_about dl dt {
  padding-left: 0;
  padding-bottom: 0;
}

.works_cont .works_img img {
  width: 80%;
}

/*----------------------------  
sp ご購入の流れ
-----------------------------*/
.flow_title {
  flex-wrap: wrap;
  padding-left: 0;
  padding-right: 0;
}
.flow_num {
  width: 100%;
}
.flow_num img {
  width: 25%;
}
.flow_txt {
  padding: 0
}
.flow_cont .flow_payment dd {
  padding-left: 0;
  padding-right: 0;
}
.faq_q {
  padding-left: 0;
  padding-right: 0;
}
.faq_q .q_en img {
  width: 50px;
}


}
/*---------------------------- 
sp only style END 
-----------------------------*/

/*----------------------------  
tablet style START
-----------------------------*/
@media screen and (min-width:768px) {


.sp {
  display: none !important;
}
.pc {
  display: block !important;
}


/*----------------------------  
header tablet
-----------------------------*/
.ec-layoutRole__header {
  background: rgba(255,255,255,0.9);
  position: fixed;
  z-index: 100001;
  top:0;
  width: 100%;
}
.ec-headerNaviRole {
  max-width: none;
  padding-top: 5px;
  padding-bottom: 5px;
  align-items: flex-start;
}

.ec-headerNaviRole .ec-headerNaviRole__left {
  width: auto;
}


/* h1 タイトル */
.ec-headerTitle__title h1 {
  margin-top: 0;
  margin-bottom: 0;
}
.ec-headerTitle__title img {
  width: 120px;
}

/* 検索ボタン */
.ec-headerNaviRole .ec-headerNaviRole__search {
  margin-top: 0;
  width: 340px;
}
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
  background: #446581;
}

/* ログインボタン */
#h_favorite {
  display: none;
}

.ec-headerNav .ec-headerNav__item {
  margin-left: min(1.2vw, 50px);
}

/* カート */
.ec-headerRole__cart {
  margin-left: min(1.2vw, 50px)
}

/*----------------------------  
main tablet
-----------------------------*/
/* section title */
.ec-categoryRole .ec-secHeading .section_title_en {
  margin-bottom: 13px;
}
.ec-categoryRole .ec-secHeading .section_title_jp {
  font-size: 20px;
  font-weight: bold;
}



/*----------------------------  
footer tablet
-----------------------------*/
.ec-footerRole {
  padding-top: 60px;
}

.fcontents {
  display: flex;
  justify-content: space-between;
  margin-bottom: 150px;
}
.flogo_wrap {
  margin-left: 30px;
}
.flogo_wrap a:hover {
  opacity: 0.7;
}
.fmenu_wrap {
  margin-right: 50px;
}
.fmenu {
  display: flex;
}
.fmenu li {
  padding-left: 20px;
  margin-right: 12px;
}
.fmenu li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: var(--color-yellow);
  transform: rotate(15deg);
}
.fmenu a:hover {
  text-decoration: underline;
}

.ec-footer_copyright {
  font-size: 14px;
}
.ec-footer_copyright a:hover {
  opacity: 0.7;
}


/* ページトップボタン */
.ec-blockTopBtn {
  width: 80px;
  height: 80px;
}



/*----------------------------  
TOPページ tablet
-----------------------------*/


/* TOPカテゴリー */
.ec-categoryRole .section_title_en img {
  width: 657px;
}
.ec-categoryRole .ec-categoryRole__listItem {
  width: 30%;
}
.ec-categoryRole .ec-categoryRole__listItem a:hover {
  filter: brightness(1.5);
}
.ec-categoryRole .ec-categoryRole__listItem a span {
  font-size: 24px;
}

.ec-categoryRole .ec-categoryRole__listItem:nth-child(1)::before {
  width: 147px;
  height: 103px;
}

.ec-categoryRole .ec-categoryRole__listItem:nth-child(2)::before {
  width: 172px;
  height: 103px;
}

.ec-categoryRole .ec-categoryRole__listItem:nth-child(3)::before {
  width: 176px;
  height: 103px;
}

.ec-categoryRole .ec-categoryRole__listItem:nth-child(4) {
  transform: translateX(65px);
}
.ec-categoryRole .ec-categoryRole__listItem:nth-child(4)::before {
  width: 176px;
  height: 103px;
}

.ec-categoryRole .ec-categoryRole__listItem:nth-child(5) {
  transform: translateX(-65px);
}
.ec-categoryRole .ec-categoryRole__listItem:nth-child(5)::before {
  width: 176px;
  height: 103px;
}


/* moreボタン */
.btn_more::after {
  content: "";
  position: absolute;
  opacity: 0;
  width: 106px;
  height: 34px;
  top: 50%;
  left: 50%;
  margin-top: -17px;
  margin-left: -53px;
  z-index: 2;
  transition: 1s;
}
.btn_more:hover::after {
  opacity: 1;
}
.btn_more_w:hover {
  background-image: url(../img/common/enter_y.png);
}
.btn_more_w::after {
  background: url(../img/common/more_y.svg) no-repeat center/106px 34px;
}
.btn_more_w:hover {
  border-color: var(--color-yellow);
}
.btn_more_w:hover::after {
  opacity: 1;
}
.btn_more:hover img {
  opacity: 0;
}


/* TOP ABOUT */
#ec-aboutRole .left_block {
  margin-right: 15%;
}
#ec-aboutRole .left_block img {
  width: 1052px;
  height: 554px;
}
#ec-aboutRole .right_block {
  margin-right: 58px;
}
#ec-aboutRole .right_block .section_title_en:nth-child(1) {
  width: 216px;
  height: 54px; 
} 
#ec-aboutRole .right_block .section_title_en:nth-child(2) {
  width: 300px;
  height: 72px; 
}
#ec-aboutRole .right_block .section_title_jp {
  font-size: 20px;
}
#ec-aboutRole .right_block .txt_wrap {
  font-size: 18px;
  margin-bottom: 90px;
}
/* TOP WORKS */
#ec-worksRole .ec-role {
  padding-top: 105px;
  padding-bottom: 60px;
}
#ec-worksRole .left_block .txt_wrap {
  margin-bottom: 75px;
}
#ec-worksRole .left_block .section_title {
  margin-bottom: 50px;
}
#ec-worksRole .left_block .section_title_en {
  margin-bottom: 35px;
}
.btn_more_y:hover {
  background-image: url(../img/common/enter.png);
}
.btn_more_y::after {
  background: url(../img/common/more.svg) no-repeat center/106px 34px;
}
.btn_more_y:hover {
  border-color: #fff;
}
#ec-worksRole .right_block img {
  width: 435px;
  height: 484px;
}
#ec-worksRole .right_block::before {
  width: 383px;
  height: 636px;
  top: 30px;
  left: 50%;
}

/* TOP PAGELINK */
#ec-pagelinkRole {
  padding-top: 77px;
  padding-bottom: 77px;
}
#ec-pagelinkRole .left_top {
  display: flex;
  justify-content: space-between;
}
#ec-pagelinkRole .left_top a {
  width: 48%;
}
#ec-pagelinkRole .left_middle a {
  background-image: url(../img/common/enter_y.png);
}
#ec-pagelinkRole .right_block #tw_wrap > div {
  height: 580px;
}





/*----------------------------  
tablet other page common style
-----------------------------*/
/* global menu */

.other_page .ec-layoutRole .ec-layoutRole__contentTop {
  padding-top: 55px;
}
.global_menuRole {
  background: #446581;
}
.global_menuRole .ec-itemNav {
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
}
#global_menu {
  padding-left: 0;
  list-style: none;
  display: flex;
  justify-content: center;
}
#global_menu > li {
  width: 15%;
  padding: 23px 0;
  text-align: center;
  position: relative;
}
#global_menu > li::before {
  content: "";
  position: absolute;
  background:  rgba(216,223,26,.6);
  width: 1px;
  height: 60%;
  left: 0;
  top: 20%;
}
#global_menu > li:last-child::after {
  content: "";
  position: absolute;
  background:  rgba(216,223,26,.6);
  width: 1px;
  height: 60%;
  right: 0;
  top: 20%;
}
#global_menu > li > a {
  color: #DADF19;
  font-size: 16px;
  font-weight: bold;
  display: block;
  width: 100%;
  height: 100%;
}
#global_menu > li > a:hover {
  text-decoration: none;
  opacity: 0.7;
}

.gnavi__list {
  position: relative;
}

.dropdown__lists {
  display: none;/*デフォルトでは非表示の状態にしておく*/
  width: 100%;
  position: absolute;
  top: 68px;
  left: 0;
  list-style: none;
  padding-left: 0;
  z-index: 100;
}
.gnavi__list:hover .dropdown__lists {
  display: block;/*Gナビメニューにホバーしたら表示*/
}
.dropdown__list {
  background-color: #333;
  height: 60px;
  transition: all .3s;
  position: relative;
}
.dropdown__list:not(:first-child)::before{
  content: "";
  width: 100%;
  height: 1px;
  background-color: #333;
  position: absolute;
  top: 0;
  left: 0;
}
.dropdown__list:hover {
  background-color: #DADF19;
}
.dropdown__list a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-decoration: none;
  position: relative;
  height: 100%;
}
.dropdown__list a::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(135deg);
  position: absolute;
  right: 15px;
  top: calc(50% - 5px);
}


/* ページタイトル */
.other_page .ec-pageHeader h1 {
  border-bottom: none;
}
.other_page .ec-pageHeader .page_title_en {
  margin-bottom: 20px;
}
.other_page .ec-pageHeader .page_title_jp {
  font-size: 20px;
  font-weight: bold;
}

/* ページコンテンツ */
.ec-borderedDefs.top_cont {
  margin-bottom: 100px;
}


/*----------------------------  
tablet zeRoについて
-----------------------------*/

.works_cont .works_img img {
  width: auto;
  max-width: 500px;
}
.works_cont .works_comment dd {
  padding-top: calc( 1em + 5px) !important;
}

/*----------------------------  
tablet ご購入の流れ
-----------------------------*/

#flow_01 .flow_num img {
  width: 118px;
}

#flow_02 .flow_num img {
  width: 133px;
}

#flow_03 .flow_num img {
  width: 138px;
}

#flow_04 .flow_num img {
  width: 138px;
}



/*----------------------------  
tablet 商品ページ
-----------------------------*/
.product_page .ec-layoutRole .ec-layoutRole__contentTop {
  padding-top: 55px;
}

/* 詳細ページ */
#page_product_detail .ec-layoutRole .ec-layoutRole__contents {
  padding-top: 50px;
}

/*----------------------------  
tablet カート
-----------------------------*/
.cart_page .ec-layoutRole .ec-layoutRole__contentTop {
  padding-top: 55px;
}

/*----------------------------  
tablet 会員登録
-----------------------------*/
.registration_page .ec-layoutRole .ec-layoutRole__contentTop {
  padding-top: 55px;
}

/*----------------------------  
tablet マイページ
-----------------------------*/
.mypage .ec-layoutRole .ec-layoutRole__contentTop {
  padding-top: 55px;
}


}
/*----------------------------  
tablet style END
-----------------------------*/


/*----------------------------  
PC style START
-----------------------------*/
@media screen and (min-width:1280px) {



/*----------------------------  
header pc
-----------------------------*/

.ec-layoutRole__header {
  background: rgba(255,255,255,0.9);
  position: fixed;
  z-index: 100001;
  top:0;
  width: 100%;
}
.ec-headerNaviRole {
  padding-top: 0;
}
.ec-headerNaviRole .ec-headerNaviRole__left {
  width: 33.333%;
}
/* ログインボタン */
.ec-headerNav .ec-headerNav__item {
  margin-left: 50px;
}

/* カート */
.ec-headerRole__cart {
  margin-left: 50px;
}

/*----------------------------  
main pc
-----------------------------*/
.ec-role {
  max-width: 1280px;
}


/*----------------------------  
footer pc
-----------------------------*/
.flogo_wrap {
  margin-left: 50px;
}
.fmenu_wrap {
  margin-right: 100px;
}



/*----------------------------  
TOPページ pc
-----------------------------*/

/* TOPカテゴリー */
.ec-categoryRole .ec-categoryRole__listItem img {
  width: 320px;
}


.ec-categoryRole .ec-categoryRole__listItem::after {
  width: 436px;
  height: 209px;
  margin-left: -218px;
}

/* TOP ABOUT */
#ec-aboutRole .ec-role {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding-top: 150px;
  padding-bottom: 125px;
}
#ec-aboutRole .left_block {
  display: block;
  margin-right: 0;
  position: absolute;
  top: 50%;
  right: 50%;
  margin-top: -277px;
}
#ec-aboutRole .right_block .section_title { 
  margin-top: 0;
}
#ec-aboutRole .right_block .section_title_en {
  align-items: flex-end;
  justify-content: flex-start;
  margin-left: 0;
  margin-right: 0;
}
#ec-aboutRole .right_block .txt_wrap {
  display: block;
}

/* TOP WORKS */
#ec-worksRole .ec-role {
  flex-direction: row;
  padding-bottom: 165px;
}
#ec-worksRole .left_block {
  margin-left: 90px;
  order: 1;
}
#ec-worksRole .left_block .section_title {
  margin-top: 0;
  margin-bottom: 80px;
}
#ec-worksRole .left_block .txt_wrap {
  display: block;
}
#ec-worksRole .right_block {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -242px;
  margin-left: -100px;
  order: 2;
}
#ec-worksRole .right_block::before {
  top: 50%;
  right: -200px;
  left: auto;
  z-index: 1;
  margin-top: -318px;
}



/* TOP PAGELINK */
#ec-pagelinkRole .ec-role {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

#ec-pagelinkRole .ec-role .left_block {
  width: 800px;
}
#ec-pagelinkRole .left_top a {
  width: 380px;
}
#ec-pagelinkRole .left_bottom #info_wrap {
  min-height: 414px;
  margin-bottom: 0;
}



#ec-pagelinkRole .ec-role .right_block {
  width: 350px;
}


/*----------------------------  
下層ページ pc
-----------------------------*/
.other_page .ec-layoutRole .ec-layoutRole__main {
  margin-top: 30px;
}



}
/*----------------------------  
PC style END
-----------------------------*/