@charset "utf-8";

/* =======================================
　　PC
======================================= */

/*--------------------  container --------------------*/

body,div,p,h1,h2,h3,h4,h5,h6{
margin: 0;
padding: 0;
}

html{
font-size: 62.5%; /*=10px*/
letter-spacing: .005rem;
}

#container {
background: #FFF;
}

#frame {
max-width: 100%;
width: 100%;
margin: 0 auto;
padding: 0;
}



/*-------------------- Header --------------------*/

header {
display: flex !important;
flex-direction: column;
position: relative;
width:100%;
margin: 0;
padding: 0;
background: #FFF;
}
#header-top ul, #header-bottom ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
#header-top ul li, #header-bottom ul li {
padding: 0 !important;
margin: 0 !important;
right: 0 !important;
}
#header-top ul li a, #header-bottom ul li a {
text-decoration: none !important;
}



/*---------- Header top area ----------*/
#header-top {
background: #2e4569;
display: flex;
justify-content: flex-end;
align-items: center;
}

/*Top Link*/
#top-link ul {
flex-wrap: wrap;
}
#top-link ul li {
border-left: 1px solid #CCC;
}
#top-link ul li:first-child {
border: none;
}
#top-link ul li a {
color: #FFF;
font-size: 1.4rem;
padding: .5rem 2rem;
}
#top-link ul li a:hover {
color: #999;
}


/*Top Button*/
#top-btn ul {
justify-content: flex-end;
}
li.top-btn a {
display: inline-block;
color: #FFF;
font-size: 1.4rem;
padding: .5rem 1.5rem;
}
li.top-btn a:hover {
background: #2e4569 !important;
}

li#top-btn01 a {
background: #a589a5;
}
li#top-btn01 a:before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
background: url(https://u.jimcdn.com/cms/o/s6f841ea967969eec/userlayout/img/top-icon01.png?t=1547613184) no-repeat 0 center;
background-size: contain;
vertical-align: middle;
padding-right: 1rem;
}

li#top-btn02 a {
background: #4a6ea8;
}
li#top-btn02 a:before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
background: url(https://u.jimcdn.com/cms/o/s6f841ea967969eec/userlayout/img/top-icon02.png?t=1547613190) no-repeat 0 center;
background-size: contain;
vertical-align: middle;
padding-right: 1rem;
}

li#top-btn03 a {
background: #1d2b41;
}
li#top-btn03 a:before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
background: url(https://u.jimcdn.com/cms/o/s6f841ea967969eec/userlayout/img/top-icon03.png?t=1547613196) no-repeat 0 center;
background-size: contain;
vertical-align: middle;
padding-right: 1rem;
}


/*---------- Header bottm area ----------*/
#header-bottom {
display: flex;
justify-content: space-evenly;
align-items: center;
background: #FFF;
}


/*Logo*/
#logo {
max-width: 450px;
width: 100%;
margin: 1rem !important;
padding: 0;
}
#logo img {
width: 100%;
}


/*Top Menu Link*/
#top-menu-link {
padding: 1rem !important;
}
#top-menu-link ul {
justify-content: flex-end;
}
#top-menu-link ul li {
border-left: 1px solid #CCC;
}
#top-menu-link ul li:first-child {
border: none;
}
#top-menu-link ul li a {
color: #222;
font-size: 1.4rem !important;
padding: .5rem 2rem;
}
#top-menu-link ul li a:hover {
color: #888;
}


/*Top Class Btn*/
#top-class-link ul {
justify-content: flex-end;
}
#top-class-link ul li {
margin: 0 1rem 1rem !important;
}
li.top-class-btn img {
width: 100%;
}
li#top-class-btn01, li#top-class-btn02 {
max-width: 190px;
}
li#top-class-btn03 {
max-width: 220px;
}





/*-------------------- Main Visual --------------------*/

.cc-indexpage #main-visual-area {
display: block;
margin-bottom: 0;
padding: 0;
}
#main-visual-area {
display: none;
}
#main-visual {
display: block;
width: 100%;
height: auto;
}
#main-visual img{
width:100%;
}


/*Title Area*/
.cc-indexpage .main-title-box.box-ratio {
display: block;
}
.main-title-box.box-ratio {
display: none;
}
.main-title-box {
position: absolute;
z-index: 100;
width: 100%;
height: auto;
margin: 0 auto;
}
.box-ratio:before {
content: "";
display: block;
padding-top: 33.5%;
}
.main-title-box-inner {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0; left: 0;
width: calc(100% - 4rem);
height: 100%;
padding: 0 2rem;
}

/*Site Title*/
#main-title-area img {
max-width: 930px;
width: 100%;
}



/*-------------------- Nav --------------------*/

/*PC nav*/
#pc-main {
background: #2e4569;
}
#pc-main ul {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
list-style: none;
max-width: 1280px;
margin: 0 auto;
padding: 1rem 2rem;
}
#pc-main ul>li {
padding: 0 1rem;
}
#pc-main ul li a {
text-decoration: none;
color: #FFF;
}
#pc-main ul li a:hover {
opacity: .7;
}

/*Home icon*/
#pc-main ul li:first-child img {
width: 30px;
}

/*#pc-main ul li {
border-left: 1px solid #CCC;
padding: 0;
margin: 0;
}
#pc-main ul li:first-child {
border: none;
}*/






/*-------------------- Content Area --------------------*/
#content{
position: relative;
z-index: 100;
display: flex;
justify-content: space-between;
max-width: 1110px;
min-height: 200px;
margin: 2rem auto 0;
padding: 0 2rem 2rem;
background: #FFF;
}



/*-------------------- main area --------------------*/
.cc-indexpage article#main {
float: none;
max-width: 100%;
width: 100%;
margin: 0 auto;
padding: 2rem 0;
}


article#main {
position: relative;
z-index: 100;
float: left;
width: calc(100% - 350px);
margin: 0;
padding: 2rem 0;
}


/*---------- Breadcrumb ----------*/
.cc-indexpage .j-nav-variant-breadcrumb {
display: none;
}
.j-nav-variant-breadcrumb {
max-width: 1110px;
margin: 0 auto 1rem;
}
.j-nav-variant-breadcrumb ol {
list-style: none;
display: flex;
flex-wrap: wrap;
padding: 0 0 0 1.5rem;
}
.j-nav-variant-breadcrumb ol li {
padding: 0 .5em 0 0;
}
.j-nav-variant-breadcrumb ol li a {
font-size: 1.1rem;
text-decoration: none !important;
color: #666 !important;
transition: all .5s !important;
}
.j-nav-variant-breadcrumb ol li a:hover {
color: #ccc !important;
opacity: 1 !important;
}
.j-nav-variant-breadcrumb li a:before {
font-family: FontAwesome;
content: "\f054";
padding-right: .5rem;
font-size: 1rem;
}



/*---------- Headline ----------*/
article#main h1, article#main h2, article#main h3,
#footer-content h1, #footer-content h2, #footer-content h3 {
font-family: "Mplus 1p" ,sans-serif !important;
}
.cc-indexpage article#main h1 {
text-align: center;
}
article#main h1 {
color: #2e4569;
font-size: 3.3rem;
font-weight: bold;
margin: 0 0 5rem;
padding: 0 0 1.2rem;
text-align: center;
border-bottom: 2px solid #2e4569;
letter-spacing: .2rem;
font-feature-settings: "palt";
}
article#main h2 {
color: #222;
font-size: 2.4rem;
font-weight: bold;
margin: 0 0 2rem;
padding: 1rem 1.5rem;
border-left: 4px solid #2e4569;
letter-spacing: .05rem;
font-feature-settings: "palt";
}
.cc-indexpage article#main h2 {
text-align: center;
border-left: none;
margin-bottom: 1rem;
}
article#main h3 {
color: #222;
font-size: 1.8rem;
font-weight: bold;
margin: 1rem 0 .4rem;
padding: 0;
}



/*---------- Font ----------*/
body, p, table, td, li {
font-size: 1.5rem !important;
line-height: 1.6 !important;
color: #222 !important;
font-family: "Mplus 1p" ,sans-serif !important;
-webkit-text-size-adjust: 100%;/*iPhone*/
}
article#main a:link, article#main a:visited,
aside#side a:link, aside#side a:visited {
text-decoration: underline;
color: #2e4569;
transition: opacity 0.5s ease 0s;
}
article#main a:active, aside#side a:active {
text-decoration: none;
}
article#main ul, article#main ol, aside#side ul, aside#side ol {
margin: 0;
padding: 0 .5rem;
}



/*---------- Image ----------*/
.j-module.n.j-imageSubtitle {
margin-bottom: .5rem;
}
a img {
transition: opacity 0.5s ease 0s;
backface-visibility: hidden; 
}
a img:hover {
opacity: .7 !important;
}



/*---------- Horizon ----------*/
div.hr {
margin: 5px 0 !important;
border-bottom: 2px solid #2e4569 !important;
}



/*---------- Table ----------*/
table{
border-collapse: collapse !important;
}


/*---------- scroll area ----------*/
.scroll {
background-color: #ffffff;
overflow:auto;
height: 300px;
margin: 8px;
padding: 15px;

border: 1px solid #ccc;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}



/*---------- Button ----------*/
a.j-calltoaction-link:after {
font-family: FontAwesome;
content: "\f054";
font-size: 1rem;
vertical-align: 2px;
padding-left: .3rem;
}
.j-calltoaction-link-style-1, .j-calltoaction-link-style-2, .j-calltoaction-link-style-3 {
border-radius: 0 !important;
transition:all .5s !important;
}

/*Style-1*/
a.j-calltoaction-link.j-calltoaction-link-style-1 {
background: #2e4569;
border: 2px solid #2e4569;
font-size: 1.8rem;
padding: .5rem 2rem;
}
a.j-calltoaction-link.j-calltoaction-link-style-1:hover {
background: transparent;
color: #2e4569 !important;
opacity: 1 !important;
}

/*Style-2*/
a.j-calltoaction-link.j-calltoaction-link-style-2 {
background: transparent;
border: 2px solid #2e4569;
color: #2e4569 !important;
font-size: 1.6rem;
}
a.j-calltoaction-link.j-calltoaction-link-style-2:hover {
background: #2e4569;
color: #FFF !important;
opacity: 1 !important;
}

/*Style-3*/
a.j-calltoaction-link.j-calltoaction-link-style-3 {
background: none;
border: none;
color: #2e4569 !important;
font-size: 1.4rem;
}
a.j-calltoaction-link.j-calltoaction-link-style-3:hover {
color: #CCC !important;
}



/*---------- Form ----------*/
.cc-m-form-view-input-wrapper input {
line-height: 2 !important;
}
.j-module.n.j-formnew input,textarea {
font-size: 1.6rem !important;
}
form input[type="submit"] {
background: #2e4569;
color: #FFF;
border: 2px solid #2e4569;
margin: 2rem 0;
transition:all .5s !important;
}
form input[type="submit"]:hover {
background: #FFF;
color: #2e4569;
border: 2px solid #2e4569;
}




/*-------------------- Sidebar --------------------*/

aside#side p, aside#side  table, aside#side td, aside#side li {
font-size: 1.4rem !important;
letter-spacing:.01rem;
line-height: 1.4 !important;
color: #444 !important;
}
.cc-indexpage aside#side {
display: none;
}
aside#side {
position: relative;
z-index: 100000;
float: right;
width: 310px;
margin: 0;
padding: 0;
}



/*---------- Side Title ----------*/
#side-title img {
max-width: 300px;
width: 100%;
margin: 0 auto;
}


/*Fixed Content*/
#fix-side {
position: sticky;
top: 1rem;
width: 100%;
height: auto;
color: #fff;
background: #f2f2f2;
}




/*---------- Side Navi ----------*/
nav#side-nav {
margin: 2rem .5rem;
}
nav#side-nav ul {
list-style: none;
}
nav#side-nav ul li {
border-bottom: 1px solid #2e4569;
}
nav#side-nav ul li:last-child {
border: none;
}
nav#side-nav ul li a {
display: block;
padding: 1rem;
text-decoration: none !important;
color: #222 !important;
}
nav#side-nav ul li a:hover, nav#side-nav ul li a.current{
background: #2e4569;
color: #FFF !important;
}




/*-------------------- Footer Area --------------------*/

#footer-wrapper {
background: #2e4569;
}
#footer {
width: calc(100% - 6rem);
margin: 0;
padding: 2rem 3rem;
}
#footer #footer-content {
max-width: 1200px;
width: 100%;
min-height: 10px;
margin: 0 auto;
}



/*---------- Font ----------*/
#footer-content p, #footer-content table, #footer-content td, #footer-content li {
font-size: 1.4rem !important;
letter-spacing:.01rem;
line-height: 1.5 !important;
color: #ddd !important;
}
#footer a:link, #footer a:visited {
text-decoration: underline;
color: #2e4569;
}
#footer a:active {
text-decoration: none;
}
#footer a:hover {
opacity: .7;
}
#footer ul, #footer ol {
margin: 0;
padding: 0 .5em;
}
#footer #footer-content .j-hgrid a {
text-decoration: none !important;
color: #ddd;
}


/*---------- Headline ----------*/
#footer-content h1 {
color: #ddd !important;
font-size: 2.2rem;
font-weight: normal;
margin: 0 0 .5rem;
padding: 0; 
letter-spacing: .05rem;
font-feature-settings: "palt";
}
#footer-content h2 {
color: #ddd !important;
font-size: 1.8rem;
font-weight: bold;
margin: 0 0 .5rem;
padding: .5rem .8rem;
border-left: 2px solid #ccc;
letter-spacing: .05rem;
font-feature-settings: "palt";
}
#footer-content h3 {
color: #ddd !important;
font-size: 1.5rem;
font-weight: bold;
margin: 0 0 .3rem;
padding: 0;
letter-spacing: .05rem;
font-feature-settings: "palt";
}
#footer-content h3::before {
content: "―";
color: #999;
padding-right: .5rem;
}




/*-------------------- Footer Link --------------------*/
#footer-menu {
clear: both;
width: calc(100% - 6rem);
margin: 0;
padding: 2rem 3rem;
background: #000;
}
#footer-menu-inner {
max-width: 100%;
min-height:10px;
margin: 0 auto;
color: #999;
}
#footer-menu-inner a {
text-decoration: none;
color: #999;
}
#footer-menu-inner a:hover {
color: #777;
}

/*Jimdo PR　Area*/
.jimdo-free-footer-ad.jimdo-kddi-footer p {
font-size: 1.2rem !important;
color: #888 !important;
}
.jimdo-free-footer-ad.jimdo-kddi-footer a {
color: #4285f4 !important;
}





/*-------------------- Floating Up Button --------------------*/

ul.cc-FloatingButtonBarContainer.cc-FloatingButtonBarContainer-right {
background: transparent;
}
ul.cc-FloatingButtonBarContainer.cc-FloatingButtonBarContainer-right li a {
background: transparent;
}
li.cc-FloatingButtonBarContainer-button-scroll.cc-FloatingButtonBarContainer-button-scroll-show a {
border: none !important;
}
.cc-FloatingButtonBarContainer .cc-FloatingButtonBarContainer-button-scroll span {
display: block;
width: 75px;
height: 75px;
background: url(https://u.jimcdn.com/cms/o/s6f841ea967969eec/userlayout/img/up-icon.png?t=1547613254)no-repeat center top !important;
background-size: 75px !important;
border-radius: 50%;
opacity: 1;
}
.cc-FloatingButtonBarContainer {
bottom: 5rem !important;
right: 2rem !important;
}
.cc-FloatingButtonBarContainer li a {
border-radius: 0 !important;
}




/*-------------------- Login Password Input --------------------*/

input#password {
line-height: 2;
font-size: 2rem;
}
input.submitUser {
font-size: 1.8rem;
line-height: 1.8;
}
aside#side form.cc-protected-area {/*オリジナルサイドバーがある場合*/
display: none;
}



/*-------------------- Blog --------------------*/

/*---------- Blog Page ----------*/
#content_area .j-blog.n.clearover.j-blogarticle .cc-m-hgrid-column {
width: 200px !important;
}
#content_area .j-blog.n.clearover.j-blogarticle .cc-m-hgrid-column.last {
width: calc(100% - 240px) !important;
}

#content_area .j-blog .j-blog-meta h2 {
padding: 10px 0 15px !important;
margin: 0 !important;
border: none !important;
background: none !important;
}
#content_area  .j-blog .j-blog-meta h2 {
font-size: 1.7rem;
font-weight: bold;
font-family: "Mplus 1p" ,sans-serif !important;
padding: 1rem 0 1.5rem !important;
}
#content_area  .j-blog-meta a:link, article#main .j-blog-meta a:visited,
aside#side .j-blog-meta a:link, aside#side .j-blog-meta a:visited {
text-decoration: none;
}
#content_area  .j-blog.n.clearover.j-blogarticle #cc-m-1 {
padding: 0;
font-size: 1.4rem;
line-height: 1.4;
}
#content_area  .j-blog.n.clearover.j-blogarticle #cc-m-1:first-child {
font-size: 1.2rem;
color:#999;
}
#content_area  .j-blog.n.clearover.j-blogarticle #cc-m-1:first-child a:link,
#content_area  .j-blog.n.clearover.j-blogarticle #cc-m-1:first-child a:visited {
text-decoration: none;
}
#content_area .j-blog.n.clearover.j-blogarticle #cc-m-1{
color: #333;
}
#content_area .j-blog.n.clearover.j-blogarticle #cc-m-1:nth-of-type(3) {
color: #666;
}
#content_area .j-blog.n.clearover.j-blogarticle .cc-m-spacer {
min-height: 0 !important;
max-height: 0 !important;
height: 0 !important;
}
#content_area .j-blog.n.clearover.j-blogarticle #cc-matrix- {
border-bottom: 1px dotted #ccc;
padding-bottom: 1rem;
margin-bottom: 2rem;
}
#content_area .j-blog.n.clearover.j-blogarticle #cc-m-1.j-text p a {
color:#2e4569;
font-size: 1.1rem !important;
text-decoration: none;
}
#content_area .j-blog.n.clearover.j-blogarticle #cc-m-1.j-text p a:before {
font-family: FontAwesome;
content: "\f054";
padding-right: 5px;
}
#content_area #cc-m-1.j-hr {
display: none;
}

/*Image Trimming*/
#content_area .j-blog.n.clearover.j-blogarticle figure.cc-imagewrapper.cc-m-image-align-1.cc-m-width-maxed {
position: relative;
width: 200px;
height: 200px !important;
overflow: hidden;
}
#content_area .j-blog.n.clearover.j-blogarticle figure.cc-imagewrapper.cc-m-image-align-1.cc-m-width-maxed img {
position: absolute;
top: 50% !important;
left: 50% !important;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 160%;
max-height: 160%;
}



/*---------- Blog Post ----------*/
.n.j-blog-meta.j-blog-post--header {
margin-top: -20px;
}
h1.j-blog-header.j-blog-headline.j-blog-post--headline {
border: none !important;
font-size: 3rem !important;
text-align: left !important;
margin: 0 !important;
}
a.j-blog-post--category {
font-size: 1.1rem !important;
}
span.j-text.j-blog-post--date {
font-size: 1.1rem;
color: #999;
}
#content_area article.j-blog .n.j-blog-meta.j-blog-post--header h1 {
padding: 0 !important;
margin: .4rem 0 .2rem;
border: none !important;
background: none !important;
letter-spacing: .2rem !important;
}
span.j-blog-post--tags-list a {
font-size: 1.4rem;
padding: 2rem 0 2.5rem;
}
span.j-blog-post--tags-list a:link {
text-decoration: none !important;
}
.j-module.n.j-text.j-blog-post--tags-wrapper {
margin-top: 30px;
}
.j-module.n.j-text.j-blog-post--tags-wrapper a {
color: #999 !important;
}
.j-module.n.j-text.j-blog-post--tags-wrapper a:hover {
color: #2e4569 !important;
opacity: 1 !important;
}
.j-blog-comment-counter, label.required {
font-size: 1.4rem;
}
.com-list-noava input, .com-list-noava textarea {
border: 1px solid #CCC;
}
.com-list-noava li {
width: calc(100% - 4rem);
padding: 2rem !important;
border-top: none !important;
}
.com-list-noava li:nth-child(even) {
background: #f4f4f4;;
}
dl.zend_form input {
line-height: 2 !important;
font-size: 1.6rem !important;
}
dl.zend_form input[type="submit"] {
background: #2e4569;
color: #FFF;
border: 2px solid #2e4569;
transition:all .5s !important;
}
dl.zend_form  input[type="submit"]:hover {
background: #FFF;
color: #2e4569;
border: 2px solid #2e4569;
}




/*-------------------- ShopCart --------------------*/

.product-price.cc-shop-product-price.clearover {
display: flex;
align-items: center;
padding-bottom: 1rem !important;
}
.j-product .description p {
line-height: 1.7 !important;
letter-spacing: 0;
}
.cc-shop-price {
color: #222 !important;
font-weight: bold;
font-size: 2.2rem !important;
}
a.cc-shop-addtocard, a.cc-shop-addtocard:visited, input.cc-checkout-btn {
font-size: 1.4rem !important;
line-height: 1.5  !important;
background: #2e4569 !important;
display: inline-block;
margin: 0 0 0 2rem !important;
padding: .5rem 1rem;
color: #FFF !important;
text-decoration: none !important;
border-radius: 0;
box-shadow: none !important;
text-shadow: none !important;
border-bottom: none !important;
cursor: pointer;
border: 1px solid #2e4569 !important;
transition:all .5s !important;
}
a.cc-shop-addtocard:hover, input.cc-checkout-btn:hover {
background: transparent !important;
color: #222 !important;
border: 1px solid #222 !important;
opacity:1 !important;
}
a.cc-shop-addtocard:before {
font-family: FontAwesome;
content: "\f054";
font-size: 1rem;
padding-right: .5rem;
vertical-align: 2px;
}
.cc-product-infolink.j-product__info__link a {
font-size: 1.2rem;
}
ul.cc-shop-product-availability.j-product-details li {
font-size: 1.2rem !important;
}
.cc-catalog-galleryview .cc-webview-product-price strong,
.cc-catalog-listview .cc-webview-product-price strong,
.cc-catalog-sliderview .cc-webview-product-price strong {
color: #ce0000 !important;
}
.j-cart {
top: 170px !important;
right: 0 !important;
}
.j-cart--hover-popup, .j-cart-icon {
background-color: #333 !important;
color: #ddd !important;
}
.j-cart--hover-popup::after, .j-cart--hover-popup:after {*/
border-bottom-color: #000 !important;
}
.j-cart-icon::before, .j-cart-icon:before {
font-size: 3.5rem !important;
}
.j-cart-icon {
padding: 0 12px !important;
}
#footer-content .j-cart--hover-popup--empty-message p {
color: #ddd !important;
}
.j-cart.is-empty {
display: none;
}



/*-------------------- More Contents --------------------*/

#more-contents {
padding: 2rem;
}
#more-contents h2 {
font-size: 2.4rem !important;
text-align: center;
margin-bottom: 1.5rem;
}
#more-contents h3 {
font-size: 2rem;
text-align: center;
margin: 1rem 0 .8rem;
}







/* =======================================
　　mobile
======================================= */

@media screen and ( max-width:1189px ) {
/*---------- Header bottm area ----------*/
#header-bottom {
flex-direction: column;
}

/*Top Menu Link*/
#top-menu-link ul {
flex-wrap: wrap;
}

/*Logo*/
#logo {
max-width: 600px;
}
}



@media screen and (max-width: 1029px) {

/*-------------------- Content Area --------------------*/

.cc-indexpage #content {
max-width: 100%;
margin: 0 2rem;
padding: 0;
}
#content {
max-width: 100%;
padding: 0;
flex-direction: column-reverse;
}



/*-------------------- main area --------------------*/
article#main, .cc-page-blog article#main {/*Sub Page & Blog Post Page*/ 
float: none;
max-width: 770px;
width: calc(100% - 6rem);
margin: 0 auto;
padding: 2rem 3rem;
}



/*-------------------- Sidebar --------------------*/
aside#side {
max-width: 100%;
width: calc(100% - 6rem);
margin: 0;
padding: 2rem 3rem;
}
#side-content {
max-width: 770px;
width: calc(100% - 4rem);
margin: 0 auto;
padding: 2rem;
background: gray;
}



/*---------- Side Title ----------*/
#side-title {
margin-bottom: 1rem;
}



/*---------- Side Navi ----------*/
nav#side-nav {
display: none;
}


/*---------- FlowSide area ----------*/
#flow-side .j-hgrid>div>div {
display: flex;
flex-wrap: wrap;
}


/*---------- FixSide area ----------*/
#fix-side {
margin: 0 -200rem;
padding: 1rem 200rem;
background: #2e4569;
}


/*-------------------- Footer Area --------------------*/
#footer, #footer-menu {
float: none;
max-width: 100%;
width: calc(100% - 6rem);
margin: 0 auto;
padding: 2rem 3rem;
}
#footer #footer-content {
max-width: 770px;
margin: 0 auto;
}
}


@media screen and ( min-width:1000px ) {

/*-------------------- Nav --------------------*/
/*Mobile nav*/
#mobile-main {
display: none;
}

/*Nav-Edit Control*/
#cc-nav {
margin: 0;
}
}



@media screen and ( max-width:999px ) {

/*-------------------- Header --------------------*/
header {
flex-direction: column-reverse;
}



/*---------- Header top area ----------*/
#header-top {
flex-direction: column;
justify-content: space-evenly;
}

/*Top Link*/
#top-link {
width: 100%;
padding: .8rem;
}
#top-link ul {
justify-content: space-evenly;
}
#top-link ul li {
border: none;
}

/*Top Button*/
#top-btn {
width: 100%;
}
#top-btn ul {
justify-content: stretch;
}
#top-btn ul li {
width: 33.33333%;
}
#top-btn ul li a {
width: 100%;
text-align: center;
padding: 2rem 0;
}


/*---------- Header bottm area ----------*/
#header-bottom {
margin-top: 7rem;
}




/*-------------------- Nav --------------------*/

/*---------- PC Navi ----------*/
#pc-main {
display: none;
}

/*---------- Mobile Navi ----------*/
nav #mobile-main  {
width: 100%;
}
nav #mobile-main a.menu-toggle.full {
padding: 1.5rem 2rem !important;
background: #2e4569 !important;
}
nav #mobile-main ul li a {
font-size: 1.6rem !important;
color: #222 !important;
}
nav #mobile-main .j-nav-variant-nested .menu-toggle {
color: #FFF !important;
font-size: 1.8rem !important;
}
nav #mobile-main .j-nav-variant-nested>ul>li>a {
padding: 1.5rem 1.5rem !important;
font-size: 1.5rem !important;
}
nav #mobile-main ul li ul li {
background: #eee !important;
}
nav #mobile-main ul li ul li ul li {
background: #FFF !important;
}
nav #mobile-main .j-nav-variant-nested .dd-toggle {
width: 60px !important;
height: 60px !important;
}
nav #mobile-main ul.cc-nav-level-0.j-nav-level-0>li:last-child {
background: #000 !important;
}
nav #mobile-main .j-nav-variant-nested.mobile.light li:last-child a {
color: #333 !important;
}
nav #mobile-main .j-nav-variant-nested.mobile>ul>li:last-child a.close-menu {
color: #FFF !important;
}



/*-------------------- ShopCart --------------------*/
.j-cart {
text-align: left !important;
top: 0 !important;
right: 0 !important;
}
.j-cart-icon::before, .j-cart-icon:before {
font-size: 2rem !important;
}
.j-cart--hover-popup::after, .j-cart--hover-popup:after {
position: absolute;
top: 37px !important;
}



/*-------------------- Floating Up Button --------------------*/
.cc-FloatingButtonBarContainer {
bottom: 0 !important;
right: -.2rem !important;
}
.cc-FloatingButtonBarContainer .cc-FloatingButtonBarContainer-button-scroll span {
width: 50px;
height: 50px;
background-size: 50px !important;
border-radius: 0;
}
}


@media screen and ( max-width:989px ) {

/*---------- Side Area ----------*/
/*Flow Content*/
#flow-side>.j-hgrid>div>div {
display: flex;
justify-content: center;
}
}



@media screen and (min-width: 768px) {

/*--------------------  Nav --------------------*/

.j-nav-variant-nested.desktop ul li ul li {
background: #f4f4f4;
border-bottom: 1px solid #ddd !important;
}
.j-nav-variant-nested.desktop ul li a:hover{
color: #222 !important;
}
.j-nav-variant-nested.desktop ul li ul li a:hover{
color: #999 !important;
background: #FFF !important;
}
ul.cc-nav-level-1.j-nav-level-1 {
margin-top: 2rem !important;
}



/*---------- Nav Action ----------*/
#top-nav .j-nav-variant-nested  ul.cc-nav-level-0.j-nav-level-0>li.has-sub>a:after {
content: '' !important;
margin-left: 0;
}
#top-nav  ul.cc-nav-level-0.j-nav-level-0>li>a::after {
display: block;
content: '';
width: 0;
left: 0;
bottom: 0;
border-bottom: 1px solid #222;
}
#top-nav  ul.cc-nav-level-0.j-nav-level-0>li>a:hover::after {
width: 100%;
}
#top-nav  ul.cc-nav-level-0.j-nav-level-0>li>a::after {
transition: width .3s ease-out;
}
}



@media screen and (max-width: 767px) {

/*--------------------  container --------------------*/
#container {
overflow: hidden;
}


/*---------- Logo ----------*/
#logo {
margin: 1rem auto 0;
}


/*---------- Header bottm area ----------*/
/*Top Menu Link*/
#top-menu-link  {
display: none;
}




/*-------------------- Main Visual --------------------*/

/*---------- Top Page ----------*/
#main-visual img {
width: 200vw;
margin-left: 100vw !important;
transform: translateX(-150vw);
}
.box-ratio:before {
padding-top: 68.3%;
}




/*-------------------- Content Area --------------------*/

/*---------- Font ----------*/
body, p, table, td, li {
font-size: 1.6rem !important;
line-height: 1.8 !important;
}
article#main h1 {
font-size: 2.6rem !important;
text-align: left !important;
}
article#main h2 {
font-size: 2.2rem !important;
}
article#main h3 {
font-size: 1.9rem !important;
}


/*---------- Column ----------*/
.cc-m-hgrid-column {
width:100% !important;
}



/*-------------------- Blog --------------------*/

/*---------- Blog Page ----------*/
#content_area .j-blog.n.clearover.j-blogarticle .cc-m-hgrid-column {
width: 100% !important;
}
#content_area .j-blog.n.clearover.j-blogarticle .cc-m-hgrid-column.last {
width: 100% !important;
margin-top: 1rem;
}
#content_area .j-blog.n.clearover.j-blogarticle figure.cc-imagewrapper.cc-m-image-align-1.cc-m-width-maxed {
margin: 0 auto;
}
#content_area .j-blog.n.clearover.j-blogarticle figure.cc-imagewrapper.cc-m-image-align-1.cc-m-width-maxed img {
position: static;
transform: none;
max-width: 100%;
max-height: 100%;
width:100%;
}
#content_area .j-blog.n.clearover.j-blogarticle figure.cc-imagewrapper.cc-m-image-align-1.cc-m-width-maxed {
width: 100%;
height: 100% !important;
}
}





@media screen and (max-width: 549px) {

/*-------------------- Sidebar --------------------*/

/*---------- Blog Area ----------*/
#side-blog-area01 .cc-m-hgrid-column {
width: 100% !important;
}
#side-blog-area01 .cc-m-hgrid-column.last {
width: 100% !important;
}
}


@media screen and (max-width: 499px) {
/*---------- Header bottm area ----------*/
/*Logo*/
#logo {
width: calc(100% - 4rem);
padding: 0 2rem;
}

/*Top Class Btn*/
#top-class-link ul {
flex-direction: column;
}



/*---------- Header top area ----------*/

/*Top Link*/
#top-link {
display: none;
}

/*Top Button*/
#top-btn ul {
flex-direction: column;
}
#top-btn ul li {
width: 100% !important;
}
}



@media screen and (max-width: 399px) {

/*-------------------- main area --------------------*/

.cc-indexpage article#main, article#main {
width: calc(100% - 4rem);
padding: 1rem 2rem;
}


/*-------------------- Sidebar --------------------*/

.cc-indexpage aside#side,  aside#side {
width: calc(100% - 4rem);
padding: 2rem;
}
#side-content {
width: calc(100% - 4rem);
padding: 2rem;
}



/*-------------------- Footer Area --------------------*/
#footer, #footer-menu {
width: calc(100% - 4rem);
padding: 2rem;
}
}