@charset "utf-8";

/*common*/

.mainarea {
  font-family: "Noto Sans JP", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.15em;
  background: #FAFAFA;
  font-feature-settings: "palt";
  font-size: 100%;/*62.5から100%に修正%*/
  padding-bottom: 100px;text-align: left;
}

/* 子要素のリセット */
.mainarea abbr, .mainarea address, .mainarea article, .mainarea aside, .mainarea audio, .mainarea b, .mainarea blockquote, .mainarea canvas, .mainarea caption, .mainarea cite, .mainarea code, .mainarea dd, .mainarea del, .mainarea details, .mainarea dfn, .mainarea div, .mainarea dl, .mainarea dt, .mainarea em, .mainarea fieldset, .mainarea figcaption, .mainarea figure, .mainarea footer, .mainarea form, .mainarea h1, .mainarea h2, .mainarea h3, .mainarea h4, .mainarea h5, .mainarea h6, .mainarea header, .mainarea hgroup, .mainarea i, .mainarea iframe, .mainarea img, .mainarea ins, .mainarea kbd, .mainarea label, .mainarea legend, .mainarea li, .mainarea mark, .mainarea menu, .mainarea nav, .mainarea object, .mainarea ol, .mainarea p, .mainarea pre, .mainarea q, .mainarea samp, .mainarea section, .mainarea small, .mainarea span, .mainarea strong, .mainarea sub, .mainarea summary, .mainarea sup, .mainarea table, .mainarea tbody, .mainarea td, .mainarea tfoot, .mainarea th, .mainarea thead, .mainarea time, .mainarea tr, .mainarea ul, .mainarea var, .mainarea video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

.mainarea article, .mainarea aside, .mainarea details, .mainarea figcaption, .mainarea figure, .mainarea footer, .mainarea header, .mainarea hgroup, .mainarea menu, .mainarea nav, .mainarea section {
  display: block;
}

.mainarea nav ul {
  list-style: none;
}

.mainarea blockquote, .mainarea q {
  quotes: none;
}

.mainarea blockquote:after, .mainarea blockquote:before, .mainarea q:after, .mainarea q:before {
  content: '';
  content: none;
}

/* リンク */
.mainarea a {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}

.mainarea a:link, .mainarea a:visited, .mainarea a:active, .mainarea a:hover {
  text-decoration: none;
}

/* その他パーツリセット */
.mainarea ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

.mainarea mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: 700;
}

.mainarea del {
  text-decoration: line-through;
}

.mainarea abbr[title], .mainarea dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

.mainarea table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
}

.mainarea th {
  text-align: left;
  font-weight: bold;
  margin: 0;
}

.mainarea td {
  margin: 0;
}

.mainarea hr {
  display: none;
}

.mainarea input, .mainarea select, .mainarea textarea {
  vertical-align: middle;
  font-family: inherit;
  font-weight: 400;
}

/* 文字色を黒に限定 */
.mainarea, .mainarea :before, .mainarea :after, .mainarea * {
  color: #000;
}

.mainarea *:focus {
  outline: none;
}

.mainarea h1, .mainarea h2, .mainarea h3, .mainarea h4, .mainarea h5 {
  font-weight: 400;
}

.mainarea li {
  list-style-type: none;
}

.mainarea dl, .mainarea dt, .mainarea dd {
  margin: 0;
  padding: 0;
}

.mainarea p {
  margin: 0;
  padding: 0;
  line-height: 1.75;
  font-size: 1.6em;
}

.mainarea img {
  border: 0;
  line-height: 0;
  vertical-align: bottom;
}

.mainarea svg {
  vertical-align: bottom;
}

.mainarea em {
  font-weight: bold;
  font-style: normal;
}

.mainarea form {
  margin: 0;
  padding: 0;
}

.mainarea label {
  margin: 0;
  padding: 0;
}

.mainarea address {
  font-style: normal;
}

.mainarea span, .mainarea u, .mainarea b {
  color: inherit;
}

.mainarea .font_en {
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
}

/* メディアクエリ */
@media screen and (max-width: 900px) {
  .mainarea p {
    margin: 0;
    padding: 0;
    line-height: 1.75;
    font-size: 1.6em;
  }
}

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

section, main { position: relative; display: block; }
img { max-width: 100%; }

@media screen and (max-width: 900px) {
	.pc-only { display: none!important; }
	.sp-only { display: block!important; }
}

/*fade*/
.js-scroll-fade:not(.top_about_ph):not(.hd_anime) { opacity: 0; }
.isActive:not(.top_about_ph):not(.hd_anime) {
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-animation-duration: 2.4s;
    animation-duration: 2.4s;
    -webkit-animation-name: fadeUp;
    animation-name: fadeUp;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@-webkit-keyframes fadeUp{
	0%{opacity:0;-webkit-transform:translateY(30px);transform:translateY(30px)}
    10%{opacity:0; }
	to{opacity:1;-webkit-transform:none;trfooter_logo_setansform:none}
}
@keyframes fadeUp{
	0%{opacity:0;-webkit-transform:translateY(30px);transform:translateY(30px)}
    10%{opacity:0; }
	to{opacity:1;-webkit-transform:none;transform:none}
}

/*demo*/
header.demo { background: #ccc; text-align: center; padding: 20px 0; }
footer.demo { background: #ccc; text-align: center; padding: 20px 0; }

/*top*/
.top_products { background: #F2F2F2; padding: 120px 0 90px; text-align: center; }
.top_products > .inner { width: 80%; margin: 0 auto; }
.top_products_list { display: flex; justify-content: space-between; margin-top: 64px; }
.top_products_item > .inner { background: #fff; padding: 15px 0 12px; }
.top_products_item .font_en { font-size: 2.4em; line-height: 1.2; }
.top_products_item .plan { font-size: 1.2em; }
.top_products_item .ph { margin-top: 10px; }
.top_products_item .ph img { width: 100%; }
.top_products_item  .lineup { font-size: 1.2em; margin-top: 12px; }
.top_products_item  .lineup .num { font-size: 2.4em; display: inline-block; padding-right: 10px;}

.top_works { padding: 190px 0 0; }
.top_works > .inner { width: 80%; margin: 0 auto; }
.archive_works_list { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 62px 0 20px; }
.archive_products_item .ttl { font-size: 1.6em; margin-top: 16px; }
.archive_products_item .type { font-size: 1.2em; margin-top: 8px; }
.archive_products_item .cat { margin-top: 8px; }
.archive_products_item .cat span { display: inline-block; font-size: 1.2em; border: 1px solid #6F6E6C; margin: 0 6px 6px 0; padding: 2px 11px; }
.archive_products_item .link_more { margin-top: 20px; }
.archive_products_item .ph { padding-bottom: 66.66%; position: relative; overflow: hidden; }
.archive_products_item._movie .ph { padding-bottom: 54.33%; }
.archive_products_item .ph > div > img,
.archive_products_item .ph > img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); object-fit: cover; }
.archive_products_item._movie .ico { display: block; width: 46px; height: 46px; position: absolute; top: 50%; left: 50%;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.archive_products_item._movie .ico img { position: relative; }
.top_works .btn_more > * { max-width: 340px; margin: 0 auto; }

.btn_more { }
.btn_more a { display: block; background: #000; border: 1px solid #888; text-align: center; font-size: 1.6em; color: #fff; max-width: 500px; width: 100%;  padding: 24px 0; margin: 84px auto 0; }

@media screen and (max-width: 1400px) {
    .top_main_data * { color: #fff; font-size: 1.2em; font-weight: 500; }
    .top_main_data strong { font-size: 2.1em; font-weight: 700; }
}

@media screen and (max-width: 1100px) {
    .top_main_data * { color: #fff; font-size: 1.0em; font-weight: 500; }
    .top_main_data strong { font-size: 1.7em; font-weight: 700; }
    
    .top_banner a .font_en { font-size: 3.0em; color: #fff; line-height: 1.2; }
}

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

.top_common_hd { font-size: 4.0em; text-align: center; position: relative; padding-top: 0; }
.top_common_hd:before { content: ""; display: block; width: 1px; height: 50px; background: #36383A; position: absolute; top: 0; left: 50%; -webkit-transform:translateY(-100%); transform:translateY(-100%); }
.top_common_ttl { font-size: 1.4em; text-align: center; }
.top_common_read { font-size: 1.2em; color: #6F6E6C; text-align: center; max-width: 550px; margin: 30px auto 0; }

    .top_products { background: #F2F2F2; padding: 86px 0 70px; text-align: center; }
    .top_products > .inner { width: 89.74%; margin: 0 auto; }
    .top_products_list { display: block; justify-content: space-between; margin-top: 0; }
    .top_products_item { display: block; width: auto; margin-top: 45px; }
.top_products_item .font_en { font-size: 2.4em; }
.top_products_item .plan { font-size: 1.2em; }
.top_products_item .ph { margin-top: 10px; }

    .top_works { padding: 111px 0 0; }
    .top_works > .inner { width: 89.74%; margin: 0 auto; }
    .archive_works_list { display: block; flex-wrap: wrap; justify-content: space-between; margin: 45px 0 20px; }
    .archive_products_item { display: block; width: 100%; margin-bottom: 65px; }
.archive_products_item .ttl { font-size: 1.6em; margin-top: 16px; }
.archive_products_item .type { font-size: 1.2em; margin-top: 8px; }
.archive_products_item .cat { margin-top: 8px; }
.archive_products_item .cat span { display: inline-block; font-size: 1.2em; border: 1px solid #6F6E6C; margin-right: 6px; padding: 3px 11px; }
.archive_products_item .link_more { margin-top: 20px; }
    .top_works .btn_more a { max-width: 100%; margin: 0 auto; }
}

/*common*/
.page_head > .inner { width: 80%; margin: 0 auto; padding: 180px 0 18px; }
.page_head .hd { font-size: 6.0em; font-weight: 600; line-height: 1.2; }
.page_head .ttl { font-size: 1.8em; position: relative; padding-left: 36px; }
.page_head .ttl:before { content: ""; display: block; width: 32px; height: 1px; background: #000; position: absolute; left: 0; top: 50%; }

@media screen and (max-width: 900px) {
    .page_head > .inner { width: 89.74%; margin: 0 auto; padding: 142px 0 0; }
    .page_head .hd { font-size: 4.8em; }
    .page_head .ttl { font-size: 1.6em; position: relative; padding-left: 36px; }
    .page_head .ttl:before { content: ""; display: block; width: 32px; height: 1px; background: #000; position: absolute; left: 0; top: 50%; }
}

/*products*/
.archive_products_list { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 80px 4.61%; margin: 62px 0 35px; }

.page_body > .inner { width: 80%; margin: 0 auto; padding: 60px 0 18px; }

.archive_cat_list { display: flex; flex-wrap: wrap; }
.archive_cat_list a { font-size: 1.4em; border: 1px solid #6F6E6C; padding: 7px 26px; margin: 0 10px 10px 0; }
.archive_cat_list .active { background: #6F6E6C; color: #fff; }

@media screen and (max-width: 900px) {
    .archive_products_list { display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 48px 5%; margin: 94px 0 35px; }
    
    .select_cat_wrap { margin-left: 0; position: relative; }
    .select_cat_wrap + .select_cat_wrap { margin-left: 10px; }

    .page_body > .inner { width: 89.74%; margin: 0 auto; padding: 60px 0 18px; }

.archive_cat_list { display: flex; flex-wrap: wrap; }
    .archive_cat_list a { font-size: 1.4em; border: 1px solid #6F6E6C; padding: 4px 8px; margin-right: 10px; }
.archive_cat_list .active { background: #6F6E6C; color: #fff; }
}

@media screen and (max-width: 600px) {
    .archive_products_list { display: grid; grid-template-columns: repeat(1,1fr); grid-gap: 48px 0; }
}
    
/*link*/
.news_single_body .edit a,
*.link_txt { text-decoration: underline!important; }

@media screen and (min-width: 900px) {   
    .news_single_body .edit a:hover,
    *.link_txt:hover { text-decoration: none!important; }
        
    .archive_products_item .ph > div > img,
    .archive_products_item .ph > img,
    .top_movie_item .ph > img { -webkit-transition: transform 1.0s cubic-bezier(.16,1,.3,1); transition: transform 1.0s cubic-bezier(.16,1,.3,1); -webkit-transform-origin: left top; transform-origin: left top; }
    .archive_products_item:hover .ph > div > img,
    .archive_products_item:hover .ph > img,
    .top_movie_item:hover .ph > div > img,
    .top_movie_item:hover .ph > img { -webkit-transform: scale(1.07) translate(-50%, -50%); transform: scale(1.07) translate(-50%, -50%); }
    
    .link_more > * .ico { -webkit-transition: transform 1.0s cubic-bezier(.16,1,.3,1); transition: transform 1.0s cubic-bezier(.16,1,.3,1); -webkit-transform-origin: left top; transform-origin: left top; }
    .link_more > *:hover .ico { -webkit-transform: translateX(6px); transform: translateX(6px); }
    
    .btn_more > *,
    .page_nav .prev, .page_nav .next { -webkit-transition: all 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: all 0.5s cubic-bezier(0.36, 0.14, 0, 1); }
    .btn_more > *:hover,
    .page_nav .prev:hover, .page_nav .next:hover { background: #fff; color: #000; border: 1px solid #888; }
    
    .page_head .btn a:not(.prev):not(.next) { -webkit-transition: opacity 0.5s cubic-bezier(0.36, 0.14, 0, 1); transition: opacity 0.5s cubic-bezier(0.36, 0.14, 0, 1); }
    .page_head .btn a:not(.prev):not(.next):hover { opacity: 0.7; }
    
}


/*E-LIFE 追加ここから*/
#header .com_logo{filter:invert(24%) sepia(22%) saturate(1237%) hue-rotate(308deg) brightness(105%) contrast(100%);}
#header #toggle_btn span {background-color: #000;}
#header .header_right .contact_btn a{color: #000;}
#header .header_right .contact_btn a::before{filter: invert(0%) sepia(8%) saturate(7500%) hue-rotate(300deg) brightness(103%) contrast(110%);}
/*-------------------------
__topic_path_style
-------------------------*/
/*
.page_body >.topic_path{clear:both;z-index:99; width: 80%; margin: 0 auto; padding: 30px 0 ; max-width: 1200px;}
.page_body >.topic_path li,
.page_body >.topic_path li a{color: #000;}
.page_body >.topic_path li{ vertical-align: top; padding-right: 1.5em; font-size: 1.4em;}
.page_body >.topic_path li a{ text-decoration: underline;}
.page_body >.topic_path li a:hover{ text-decoration: none;}

@media screen and (max-width: 900px) {
.page_body >.topic_path{ width: 90%; padding: 30px 0 0;}
}
*/
/*E-LIFE 追加ここまで*/