@charset "UTF-8";

/*
-----------------------------------------------------------------------------------------------------------------------------------------
new Design FACT***
-----------------------------------------------------------------------------------------------------------------------------------------
*/
:root {
--view-height-min: 768px;
--gnavi-width: 275px;
--gnavi-li-height: calc(100vh / 9);
--gnavi-li-height-min: calc(768px / 9);
--color1: #ea5a8d;
--color2: #e9d52c;
--color3: #0aa649;
--color4: #45a2e4;
--color5: #a55ae0;
--color6: #89d718;
--color7: #d0720d;
--color8: #bfbfbf;
--color9: #ded8d4;
}

body#newFormat{}
body#newFormat #container{ }

.leftContents{ width: calc(100vw - var(--gnavi-width)); padding: 0; margin: 0; }
section#typography{ height: 100vh; min-height: var(--view-height-min); max-width: 100%; }
#typography img{ width: 100%; height: 100%; object-fit:fill; }

#dummycontent{ padding: 50px; padding-top: 100px; padding-left: 80px; line-height: 30px; }

#newFormat #navi{ display: none; }

#newFormat .gnavi{ z-index: 10000; position: fixed; width: var(--gnavi-width); right: 0; padding: 0; height: 100vh; background: transparent; overflow-y: hidden; } /**scroll**/

#newFormat .gnavi .gnavi_menu9{ margin-bottom: 0;height: 100%; font-size: 1.0rem; font-family: "MFW-PMidashiGoMB31Pr6N-Bold"!important; }
#newFormat .gnavi .gnavi_menu9 > li{ width: 100%; overflow: hidden; }
#newFormat .gnavi .gnavi_menu9 li{ list-style: none; }
#newFormat .gnavi .gnavi_menu9 > li > a,
#newFormat .gnavi .gnavi_menu9 > li > div{ display: flex; justify-content: center; align-items: center; height: var(--gnavi-li-height); min-height: var(--gnavi-li-height-min); position: relative; }
  #newFormat .gnavi .gnavi_menu9 .sns_icons a{ padding: 10px 12px; }
  
#newFormat .gnavi .gnavi_menu9 .sub_cate_menu{ padding-bottom: 20px; display: none; overflow: hidden; }
	  
#newFormat .gnavi .gnavi_menu9 .sub_cate_menu > li > a { display: flex; justify-content: center; align-items: center; border-top: 1px solid rgba(0,0,0,0.5); padding: 10px 12px; margin: 0 0 -1px; position: relative; /**font-size: 1.4rem;:**/ }

#newFormat .gnavi .gnavi_menu9 .sub_cate_menu > li { padding: 0 15px; }

/* category color : background */
.cc_1{ background-color: var(--color1); }
.cc_2{ background-color: var(--color2); }
.cc_3{ background-color: var(--color3); }
.cc_4{ background-color: var(--color4); }
.cc_5{ background-color: var(--color5); }
.cc_6{ background-color: var(--color6); }
.cc_7{ background-color: var(--color7); }
.cc_8{ background-color: var(--color8); }
.cc_9{ background-color: var(--color9); }

/*
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
MEDIA QUERIES
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

/* 768↑ 
--------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {

#newFormat .gnavi .gnavi_menu9 li a::before{ content: ''; display: block; position: absolute; top: calc(50% - 3px); left: 15px; border-style: solid; border-color: transparent transparent transparent #000; border-width: 3px 0 3px 8px; -webkit-transition: all 0.2s cubic-bezier(.7,0,.39,1); opacity: 0; }
#newFormat .gnavi .gnavi_menu9 li:hover > a::before,
#newFormat .gnavi .gnavi_menu9 li.active---- > a::before{ left: 30px; opacity: 1; }


/* fact */

.category-4#newFormat .gnavi .gnavi_menu9 li.cc_3 > a::before,

.category-120#newFormat .gnavi .gnavi_menu9 li.cc_4 > a::before,
.category-8#newFormat .gnavi .gnavi_menu9 li.cc_4 > a::before,
.category-7#newFormat .gnavi .gnavi_menu9 li.cc_4 > a::before,
.category-8#newFormat .gnavi .gnavi_menu9 li.cc_41 > a::before,
.category-7#newFormat .gnavi .gnavi_menu9 li.cc_42 > a::before,

.category-9#newFormat .gnavi .gnavi_menu9 li.cc_8 > a::before,
.category-5#newFormat .gnavi .gnavi_menu9 li.cc_5 > a::before,
.category-133#newFormat .gnavi .gnavi_menu9 li.cc_6 > a::before


{ left: 30px; opacity: 1; }

#newFormat .gnavi .gnavi_menu9 li.cc_4.nonactive { display: block; }
#newFormat .gnavi .gnavi_menu9 li.cc_4.active { display: none; }

.category-120#newFormat .gnavi .gnavi_menu9 li.cc_4.active ,
.category-8#newFormat .gnavi .gnavi_menu9 li.cc_4.active ,
.category-7#newFormat .gnavi .gnavi_menu9 li.cc_4.active 
{ display: block; }
.category-120#newFormat .gnavi .gnavi_menu9 li.cc_4.nonactive ,
.category-8#newFormat .gnavi .gnavi_menu9 li.cc_4.nonactive ,
.category-7#newFormat .gnavi .gnavi_menu9 li.cc_4.nonactive 
{ display: none; }



}/* end @media */

/* 767 ↓ 
--------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1200px) {

body#newFormat{ min-height: calc(var(--vHeight)*100); }

body.top#newFormat header{ display: none; }

.leftContents{ width: 100%; padding: 0; margin: 0; }
#typography{ height: calc(var(--vHeight)*60); min-height: auto; width: 100%; z-index: 100; }

#dummycontent{ padding: 80px 20px; }

#newFormat #header{ height: 60px; background: #fff; }
#header h1 { position: absolute; top: 0; left: 0; width: 60px; height: 60px; padding: 11px 10px 10px 10px; }
#newFormat #navi{ display: block; }
#navi .navbar_9{ position: absolute; top: 0; right: 0; width: 60px; height: 60px; z-index: 20; cursor: pointer; }
.navbar_9 ul{ width: 100%; display: flex; flex-wrap:wrap; }
  .navbar_9 ul li{ width: 20px; height: 20px; list-style: none; }

#newFormat .gnavi{ width: 100%; height: auto; min-height: auto; padding-top: 60px; background: #eee; top: -50%; overflow: hidden; -webkit-transition: all 0.6s cubic-bezier(.81,.02,.23,.99); }
#newFormat .gnavi.nav_on{ top: 0; }
.top#newFormat .gnavi{ position: absolute; padding-top: calc(var(--vHeight)*60); top: 0; }
#newFormat .gnavi .gnavi_menu9{ height: auto; display: flex; flex-wrap:wrap; transition: all 0.5s cubic-bezier(.81,.02,.23,.99); }
#newFormat .gnavi .gnavi_menu9 > li{ width: 50%; }
#newFormat .gnavi .gnavi_menu9 > li.sns_icons{ width: 100%; }
#newFormat .gnavi .gnavi_menu9 > li > a,
#newFormat .gnavi .gnavi_menu9 > li > div{ height: calc(var(--vHeight)*10); min-height: auto; width: 100%; }

#newFormat .gnavi .gnavi_menu9.menu_slide_l{ transform: translateX(-50%); }
#newFormat .gnavi .gnavi_menu9 li.sub_open > a::before{ content: '←'; }
#newFormat .gnavi .gnavi_menu9 li.sub_open > a > span{ display: none; }
#newFormat .gnavi .gnavi_menu9 .sub_cate_menu{ display: block; position: absolute; top: 0; left: 100%; width: 50%; height: 100%; }
#newFormat .gnavi .gnavi_menu9 .sub_cate_menu > li > a { padding: 16px 0; }
#newFormat .gnavi .gnavi_menu9 .sub_cate_menu li:first-of-type a{ border: none; margin-top: 10px; padding: 24px 0; }



}/* end @media */