@charset "UTF-8";
/* ---------------------------------------------------------------------------------
 = Reset default browser CSS. 
--------------------------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;box-sizing:border-box;}:focus{outline:0}body{background:#fff;line-height:1}ol,ul,li{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{font-weight:300;text-align:left}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:"" ""}a img{border:0}article,aside,details,figcaption,figure,footer,main,header,hgroup,menu,nav,section{display:block}

/* -----------------------------------------------
 = Global 
----------------------------------------------- */
*,
*:before,
*:after {-webkit-box-sizing:border-box; box-sizing:border-box; background-repeat:no-repeat; flex-wrap:wrap; -webkit-tap-highlight-color:transparent;}
*:focus {outline:none;}
html {}
body {position:relative;}
body,
input,
textarea {
font-family:"Noto Sans JP", sans-serif;
-webkit-font-smoothing:subpixel-antialiased;
color:#000; font-size:62.5%; font-weight:300; line-height:1.8;}

/* Headings */
h1, h2, h3, h4, h5, h6 {}
hr {}
/* Text elements */
p {}
ul, ol {list-style-type:none;}
dl {}
dt {}
dd {}
strong, b {}
cite, em, i {}
blockquote {}
pre {}
code, kbd, samp, var {}
abbr, acronym, dfn {}
address {}
ins {}
sup {vertical-align:super;}
sub {}
small {}
/* Table */
table {border-collapse:collapse;}
/* image */
img {width:auto; max-width:100%; height:auto;
/*-webkit-touch-callout:none;*/
/*-webkit-user-select:none;*/
/*-moz-touch-callout:none;*/
/*-moz-user-select:none;*/
/*touch-callout:none;*/
/*user-select:none;*/
}
/* Before After */
a,
span,
strong,
:before,
:after {position:relative; background-repeat:no-repeat; transition:all .3s ease-out;}
/* Links */
a {color:#000; text-decoration:none;}
a,
a:before,
a:after {position:relative; transition:all .3s ease-in; will-change:transform;}
/* select area */
::selection {background-color:#ccc; color:#000; -webkit-text-stroke:none;}
::-moz-selection {background-color:#ccc; color:#000; -webkit-text-stroke:none;}

/* -----------------------------------------------
 = Font
----------------------------------------------- */
h1, h2, h3, h4, h5, h6,
strong, b {font-weight:300; font-style:normal;}
.bold {font-weight:500;}
.en {font-family:"Inter", sans-serif; font-weight:300; font-style:normal;}

/* ------------------------------------------------
 = Structuer 
------------------------------------------------ */
.structuer {display:flex; flex-wrap:wrap; justify-content:space-between; width:90%; max-width:1366px; margin:auto;}
.header {z-index:100; width:200px;}
.main {width:calc(100% - 230px);}
.footer {width:100%;}
/*2nd Layer*/
.page {position:relative; width:100%; padding-top:100px;}
.page__title {position:absolute; top:0; left:0; opacity:0!important;}


/* -----------------------------------------------
 = Header 
----------------------------------------------- */
[class*='header__logo'] {position:fixed; width:100px; padding-top:30px;}
.header__fix {position:fixed; top:0;}
.header__logo a {display:block;}
/* index logo
----------------------------------------------- */
.header__logo--index {filter:invert(100%) brightness(150%); transition:all .3s ease-in;}
.header__logo--index.hide {opacity:0;}
.header__logo--index a {pointer-events:none;}
.header.single .header__logo {position:relative;}

/* -----------------------------------------------
 = Nav SP
----------------------------------------------- */
.header__botton {display:none; z-index:500; position:fixed; top:25px; right:25px; font-size:150%; text-transform:uppercase; cursor:pointer; transition:all .3s ease-in;}

/* -----------------------------------------------
 = Nav menu
----------------------------------------------- */
.nav {position:absolute; bottom:60px;}
[class*='menu__link'] {color:#aaa;}
[class*='menu__link'].active,
[class*='menu__link']:hover {color:#000;}
/*.nav a.active {pointer-events:none;}*/
.menu {font-family:"Inter", "Noto Sans JP", sans-serif; font-weight:300; font-style:normal;}
[class*='menu__item'] {text-transform:uppercase;}
/*main manu*/
.menu__item--main {padding-top:7px; font-size:140%;}
/*language*/
.menu__item--lang {padding-top:40px;}
.menu__item--lang ol {display:flex; font-size:100%;}
.menu__item--lang ol li {position:relative; text-transform:capitalize;}
.menu__item--lang ol li:nth-of-type(2):before {content:"/"; padding:0 5px;}
span.menu__link--lang {color:#000;}
/*sub menu*/
[class*='menu__cat'] {display:none;}
.menu__cat--active {position:fixed; top:100px; display:block; line-height:1; padding-left:1em; border-left:1px solid #aaa;}
.menu__item--sub {padding-bottom:15px; font-size:12px;}
.menu__item--sub:last-of-type {padding-bottom:0;}
.menu__link--sub {transition:none;}
.menu__link--sub.transition {transition:all .3s ease-out;}
/* index menu
----------------------------------------------- */
.nav.index {color:#fff;}
.nav.index a {color:#fff}
.nav.index a.active,
.nav.index a:hover {color:#aaa;}
.nav.index span {color:#aaa;}
/* single menu
----------------------------------------------- */
.nav.single {display:none;}


/* -----------------------------------------------
 = Footer 
----------------------------------------------- */
.footer {position:relative; margin-top:160px;}
.footer.index {display:none;}
.footer__botton {overflow:hidden; position:relative; width:30px; height:30px; margin:auto 0 auto auto; border-bottom:1px solid #000; cursor:pointer; transition:opacity .2s ease-in;}
.footer__botton:before {content:""; position:absolute; top:6px; right:2px; width:25px; height:25px; border:1px solid; border-color:#000 #000 transparent transparent; transform:rotate(-45deg);}
.footer__botton:hover {opacity:0.5;}
.footer__text {display:none;}
.footer__company {padding-bottom:25px; font-size:140%; font-weight:400; letter-spacing:2px;}
.footer__title {padding-bottom:2px; font-size:130%; font-weight:400; letter-spacing:1px; text-transform:uppercase;}
.footer__summary {padding-bottom:25px; font-size:120%; letter-spacing:2px;}
.footer__email {border-bottom:1px solid #222;}
.footer__copyright {text-align:right; padding:160px 0 35px; font-size:90%;}


/* ------------------------------------------------
 = Index 
------------------------------------------------ */
.structuer.index {max-width:none;}
.index__background {z-index:1; position:fixed; top:0; left:0; width:100%; height:100vh;}
/*logo area*/
.index {}
.index__logo {z-index:1; position:absolute; top:0; left:0; display:flex; justify-content:center; align-items:center; width:100%; height:95%; transition:all .3s ease-in; pointer-events:none;}
.index__logo img {width:200px; height:200px;}
.index__logo.hide {opacity:0;}
/*photo*/
[class*='index__photo'] {z-index:-10; position:absolute; top:0; left:0; width:100%; height:100%; background-position:50%; background-size:cover; opacity:0; transition:opacity 1.2s ease-out;}
[class*='index__photo'].active {z-index:-2; opacity:1;}
/*number*/
[class*='index__num'] {position:absolute; right:0; bottom:55px; font-size:100%; color:#fff;}
[class*='index__num'] span {display:inline-block; padding:5px; cursor:pointer;}
[class*='index__num'] span.active {color:#aaa; pointer-events:none; cursor:default;}

/* = Mobile index Photo
------------------------------------------------ */
.index__photo--sp {display:none;}
.index__num--sp {display:none;}

/* = Mobile bar&post
------------------------------------------------ */
.index__bar {display:none; overflow:hidden; z-index:200; position:absolute; right:5%; bottom:0; width:1px; height:150px; background-color:#aaa;}
.index__bar:before {content:""; z-index:10; position:absolute; top:-50px; left:0; width:1px; height:50px; background-color:#fff;}
.index__bar.animating:before {animation: barMoveDown 3s cubic-bezier(.71,.17,.95,.39) infinite;}
@keyframes barMoveDown {
  0% {top:-50px}
	100% {top:150px;}
}
/*post*/
.index__include {display:none; justify-content:space-between; flex-wrap:wrap;}
.more__botton {display:block; width:100%; padding:30px 0; margin:auto; text-align:center;}
.more__next {position:relative; display:inline-block; padding-left:20px; padding-right:50px; font-size:140%; text-transform:uppercase;}
.more__next:before,
.more__next:after {content:""; position:absolute;}
.more__next:before {top:50%; right:0; width:20px; height:1px; background:#000;}
.more__next:after {top:3px; right:3px; width:20px; height:20px; border:1px solid; border-color:#000 #000 transparent transparent; transform:rotate(45deg);}


/* -----------------------------------------------
 = About
----------------------------------------------- */
.about {}
.about__head {position:relative; width:100%; aspect-ratio:16/7;}
.about__image {display:none; position:absolute; top:0; left:0; width:100%; height:100%;}
.about__section {margin-top:100px;}
.about__title {font-size:180%; letter-spacing:.2em; text-transform:uppercase;}
/*message*/
.message {padding-top:40px; margin-top:0;}
.message__caption {font-size:150%; padding-bottom:40px;}
.message__text {line-height:2; font-size:130%;}
/*director*/
.director {display:flex; justify-content:space-between; flex-wrap:wrap;}
.director__photo {width:230px; height:240px;}
.director__profile {width:calc(100% - 260px);}
.director__position {padding-bottom:10px; font-size:130%;}
.director__name {font-size:180%;}
.director__kana {line-height:1.4; font-size:110%; letter-spacing:1px;}
.director__text {padding-top:20px; font-size:130%;}
/*staff*/
.staff {}
.staff__list {display:flex; justify-content:flex-start; flex-wrap:wrap;}
.staff__item {width:25%; padding:40px 20px 0 0;}
.staff__profile {max-width:190px;}
.staff__name {padding-top:7px; font-size:140%;}
.staff__kana {font-size:80%;}
/*award*/
.award {padding:70px 50px; background-color:#f7f7f7;}
.award__list {margin-top:50px;}
.award__item {position:relative; padding-bottom:20px;}
.award__year {position:absolute; top:0; left:0; width:80px; font-size:120%;}
.award__title {display:block; padding:0 0 15px 80px; font-size:130%;}
.award__link {border-bottom:1px solid #a6a6a6;}
.award__link:hover {border-color:transparent;}
.award__link[target="_blank"] {padding-right:20px;}
.award__link[target="_blank"]:after {content: ""; position:absolute; bottom:2px; right:4px; width:11px; height:11px; background-image: url("/img/icon_exlink.png"); background-size:contain; background-position:center; opacity:.5;}
/*award same*/
.award__item.same {margin-top:-25px;}
.award__item.same .award__year {visibility:hidden;}
/*contact*/
.contact__title--about {letter-spacing:.15em;}

/* -----------------------------------------------
 = Contact
----------------------------------------------- */
.contact {display:flex; justify-content:space-between;}
/*left*/
.contact__summary {width:35%;}
[class*='contact__title'] {line-height:1; padding-bottom:40px;}
[class*='contact__title'] strong {display:block; padding-bottom:10px; font-size:180%; letter-spacing:.2em;}
[class*='contact__title'] span {display:block; font-size:130%; letter-spacing:0;}
.contact__address {font-size:130%; padding-bottom:40px;}
.contact__email {font-size:130%;}
.contact__email a {border-bottom:1px solid #222;}
.contact__email a:hover {}
/*right*/
.contact__map {width:60%;}
.contact__map iframe {width:100%; aspect-ratio:2/1;}

/* -----------------------------------------------
 = News 
----------------------------------------------- */
.news {}
.news__section {display:flex; justify-content:space-between; flex-wrap:wrap; padding-bottom:50px;}
.news__head {width:175px; padding-top:2px; display:flex; justify-content:space-between; flex-wrap:wrap;}
.news__head.hide {visibility:hidden; opacity:0;}
.news__contents {width:calc(100% - 210px);}
/*en page*/
.en .news__head {width:195px;}
.en .news__contents {width:calc(100% - 225px);}

/* = News head
----------------------------------------------- */
.news__cat a,
.news__cat span {display:block; width:95px; line-height:1; text-align:center; padding:6px 3px 4px; font-size:90%; letter-spacing:0; text-transform:uppercase; border:1px solid #a6a6a6;}
.news__date {font-size:120%;}

/* = News contents
----------------------------------------------- */
.news__contents a {position:relative; border-bottom:1px solid #a6a6a6;}
.news__contents a[target="_blank"]:after {content: ""; position:absolute; opacity:.5;
background-image: url("/img/icon_exlink.png"); background-size:contain; background-position:center;}
/*main title*/
.news__contents h2 {font-size:130%; padding-bottom:.8em;}
.news__contents h2 a[target="_blank"] {padding-right:18px;}
.news__contents h2 a[target="_blank"]:after {bottom:2px; right:4px; width:11px; height:14px;}
/*sub title*/
.news__contents h3 {font-size:110%; padding-bottom:.8em;}
.news__contents h3 a[target="_blank"] {padding-right:17px;}
.news__contents h3 a[target="_blank"]:after {top:3px; right:2px; width:10px; height:12px;}
/*text*/
.news__contents p {font-size:110%; line-height:1.9; padding-bottom:1.5em}
/*image*/
.news__contents p:has(img) {line-height:1; margin-top:5px; padding:5px 20px; border-left:1px solid #a6a6a6;}
.news__contents p:has(img) + p:has(img) {margin-top:0; padding-top:10px;}
.news__contents p:has(img) + p:not(:has(img)) {margin-top:1.5em;}
.news__contents img {width:auto; height:auto; max-height:300px;}
/*list*/
.news__contents ul {margin-top:5px; margin-bottom:25px; border-left:1px solid #a6a6a6;}
.news__contents li {padding:5px 20px; font-size:130%;}
.news__contents li a[target="_blank"] {padding-right:18px;}
.news__contents li a[target="_blank"]:after {top:4px; right:2px; width:11px; height:12px;}


/* -----------------------------------------------
 = Products List 
----------------------------------------------- */
.projects {display:flex; flex-wrap:wrap; justify-content:flex-start;}
.projects__section {width:calc(33.33% - 40px); margin-right:60px;}
.projects__section:nth-of-type(3n) {margin-right:0;}
.projects__title {text-align:center; padding:5px 0 30px; font-size:110%;}
.projects__link {display:block; line-height:1;}
.projects__link:hover {opacity:.5;}


/* -----------------------------------------------
 = Brand List 
----------------------------------------------- */
[class*='brand__list'] {display:flex; flex-direction:column; width:100%;}
.brand__list--pc {display:block;}
.brand__list--sp {display:none;}
.brand__group {display:flex; justify-content:center;}
/*list-block*/
[class*='brand__item'] {display:flex; justify-content:center;}
/*link-block*/
[class*='brand__link'] {display:flex; justify-content:center; align-items:center; height:150px;}
[class*='brand__link']:hover {opacity:.5;}
/*1st line*/
.brand__group:nth-of-type(1) .brand__item:nth-of-type(2) {padding:0 110px;}
.brand__group:nth-of-type(1) .brand__link {width:120px;}
/*2st line*/
.brand__group:nth-of-type(2) .brand__item:nth-of-type(2) {padding:0 120px;}
.brand__group:nth-of-type(2) .brand__link {width:150px;}
.brand__group:nth-of-type(2) .brand__item:nth-of-type(3) .brand__link {width:300px;}
/*3rd line*/
.brand__group:nth-of-type(3) .brand__item:nth-of-type(1) {padding:15px 60px 0 0;}
.brand__group:nth-of-type(3) .brand__item:nth-of-type(2) {padding-left:60px; padding-right:120px;}
.brand__group:nth-of-type(3) .brand__item:nth-of-type(1) .brand__link {width:300px;}
.brand__group:nth-of-type(3) .brand__item:nth-of-type(2) .brand__link {width:150px;}

/* = mobile list
----------------------------------------------- */
[class*='brand__include'] {display:flex; justify-content:flex-start; flex-wrap:wrap; padding-top:100px;}
.brand__include--all {display:none;}

/* -----------------------------------------------
 = Brand Category 
----------------------------------------------- */
/*loading*/
.logo_image.hide {opacity:0; height:200px;}
/*head*/
.brand__head {text-align:center;}
.brand__logo {display:flex; justify-content:center; align-items:center; min-height:200px; padding:0 30px;}
.brand_description {padding:70px 0 55px; font-size:130%;}
.brand_count {padding-bottom:60px; font-size:150%;}


/* -----------------------------------------------
 = Single
----------------------------------------------- */

/* = REwright Single Structuer
----------------------------------------------- */
.structuer.single {display:block; width:100%; max-width:100%;}
.header.single {width:90%; max-width:1366px; margin:auto;}
.header__fix.single {position:static;}
.main.single {width:100%; padding-top:40px;}
.footer.single {width:90%; max-width:1366px; margin:auto;}

/* = Single main photo
----------------------------------------------- */
.post {}
/*head*/
.post__head {display:flex; align-content:flex-end; width:90%; max-width:1366px; height:auto; margin-left:auto; margin-right:auto;
background-size:cover; background-position:50%;}
.post__title,
.post__term {position:relative; display:block; width:100%; text-align:center; background-color:#fff;}
.post__title {padding:20px 0 16px; font-size:160%;}
.post__term {padding-bottom:20px; font-size:120%;}
.post__term span {display:inline-block; position:relative;}
.post__term span:before {content:""; position:absolute; top:50%; left:-30px; width:20px; height:1px; background-color:#000;}
/*main*/
.post__main {width:90%; max-width:1366px; margin:auto;}
.post__summary {text-align:center; padding-top:30px; font-size:100%;}
.post__photo {padding-top:60px;}
.post__photo p {padding-bottom:60px;}
.post__photo :has(img) {text-align:center;}
.post__photo :not(.two-images) img {max-height:900px;}
.post__photo .two-images {display:flex; justify-content:space-between;}
.post__photo .two-images img {width:48%;}

/* = Single control
----------------------------------------------- */
.control {display:flex; justify-content:space-between; align-items:center; width:380px; padding-top:200px; margin:auto;}
[class*='control__'] {display:block;}
.control__index {font-size:180%; text-transform:uppercase;}
[class*='control__arrow--'] {overflow:hidden; position:relative; width:35px; height:39px;}
[class*='control__arrow--']:before {content:""; position:absolute; top:50%; left:0; width:100%; height:1px; background:#000;}
[class*='control__arrow--']:after {content:""; position:absolute; width:40px; height:40px; border:1px solid; transform:rotate(45deg);}
.control__arrow--prev:after {left:8px; border-color:transparent transparent #000 #000;}
.control__arrow--next:after {right:8px; border-color:#000 #000 transparent transparent;}
[class*='control__arrow--'].hide {opacity:0; pointer-events:none;}