@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Noto+Serif+JP|Reenie+Beanie|Work+Sans|Barriecito&display=swap&subset=japanese');

/*
font-family: 'Reenie Beanie', cursive;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Noto Serif JP', serif;
font-family: 'Work Sans', sans-serif;
*/

/* --------------------------------------------------
 normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
--------------------------------------------------- */
button,hr,input{overflow:visible;padding:0;}progress,sub,sup{vertical-align:baseline;}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0;}html{line-height:1;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{margin:.67em 0;font-size:2em;}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-size:1em;font-family:monospace,monospace;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-size:100%;font-family:inherit;line-height:1;}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none;}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{display:table;max-width:100%;color:inherit;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px-webkit-appearance:textfield;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;}summary{display:list-item}[hidden],template{display:none}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;font-weight:normal;}ul{margin:0;padding:0;}ul li{margin:0;padding:0;list-style:none;}ol{margin:0;padding:0;}ol li{margin:0;padding:0;list-style:none;}
main,figure,figcaption,time,address,dl,dt,dd{display: block;margin:0;padding:0;}h1,h2,h3,h4,h5{margin:0;font-size:100%;}p{margin:0; padding:0;}address{font-style: normal;}*,*:after,*:before{outline:none;}*,*:after,*:before{box-sizing: border-box;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}h1,h2,h3,h4{font-weight:normal;}

/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ width: 100%; font-size: 62.5%;}
body{
    min-width: 960px;
    width: 100%;
    background: #e4e7e1;
    color: #000;
    font-size: 1.2rem;
    font-family: 'Josefin Sans', sans-serif;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
}

*::-webkit-scrollbar{ display: none; -webkit-appearance: none;}
img{ max-width: 100%; height: auto; vertical-align: bottom;}
.alignright img{ display: block; margin: 0 0 0 auto;}
.alignleft img{ display: block; margin: 0 auto 0 0;}
.aligncenter img{ display: block; margin: 0 auto;}

a{ color: #000; text-decoration: none;}
a:hover{ color: #000; text-decoration: none;}
.sp{ display: none;}

@media screen and (max-width: 768px){
    body{ min-width: 0;}
    img{ width: auto; height: auto;}
    .pc{ display: none;}
    .sp{ display: block;}
}

#wrap{ position: relative; overflow: hidden;}

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

/* --------------------------------------------------
 header
--------------------------------------------------- */
.header{ position: fixed; top: 0; left: 0; z-index: 999; width: 100%;}
.header h1{ position: absolute; top: 35px; left: 35px; width: 100px;}
.header .menu{ position: fixed; top: 35px; right: 35px; display: inline-block;}

@media screen and (max-width: 768px){
    .header h1{ top: 20px; left: 20px; width: 25%;}
    .header .menu{ top: 20px; right: 20px;}
}

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

/* common ----------------------------------------- */
main{ padding: 120px 0;}
article nav ul{ display: flex; margin: 0 -15px; justify-content: center;}
article nav li{ padding: 0 15px; cursor: pointer;}
article nav span{ display: block;}
article nav span:hover,
.mixitup-control-active span{ text-decoration: underline;}

@media screen and (max-width: 768px){
    main{ padding: 90px 0;}
    article nav ul{ margin: -20px 0 0; padding: 0 10px; flex-wrap: wrap;}
    article nav li{ padding: 20px 10px 0;}
}

.list-works{ display: flex; margin: 160px 0 0; flex-wrap: wrap;}
.list-works li{ width: calc(100% / 3); text-align: center;}
.list-works a{ position: relative; display: block; overflow: hidden; padding-top: 66.666%;}
.list-works a img{ position: absolute; top: 0; left: 0; width: 100%; transition: all .75s ease;}
.list-works a:hover img{ opacity: .3; filter: grayscale(100%);}
.list-works .detail-wrap{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.list-works .detail{ display: flex; width: 100%; height: 100%; line-height: 1.5; opacity: 0; transition: all .75s ease; align-items: center; flex-wrap: wrap; align-content: center;}
.list-works h2{ width: 100%; font-weight: 700; font-size: 1.6rem; font-family: 'Work Sans', sans-serif; opacity: 0; transition: all 1s ease; transform: translate3d(0%, -100%, 0);}
.list-works .cat{ width: 100%; font-size: 1.6rem; font-family: 'Reenie Beanie', cursive; opacity: 0; transition: all 1s ease; transform: translate3d(0%, 100%, 0);}
.list-works a:hover .detail,
.list-works a:hover h2,
.list-works a:hover .cat{ opacity: 1; transform: translate3d(0%, 0%, 0);}

@media screen and (max-width: 768px){
    .list-works{ margin: 40px 0 0;}
    .list-works li{ width: 50%;}
}

.fadein-up{ opacity:0;}
.fadein-up.appear{ opacity: 1; -webkit-animation: slide-in-up .75s ease-out both; animation: slide-in-up .75s ease-out both;}
@-webkit-keyframes slide-in-up{
    0%{ opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px);}
    100%{ opacity: 1; -webkit-transform: none; transform: none;}
}
@keyframes slide-in-up {
    0%{ opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px);}
    100%{ opacity: 1; -webkit-transform: none; transform: none;}
}

/* top -------------------------------------------- */
.lead{ padding: 60px 0 0; color: #fff; text-align: center; letter-spacing: .1rem; font-size: 5.5rem; font-family: 'Reenie Beanie', cursive;}
.more{ margin: 60px 0 0; text-align: center;}

@media screen and (max-width: 768px){
    .lead{ padding: 0 20px; font-size: 4rem; line-height: 1.2;}
    .more{ margin: 40px 0 0;}
}

/* about ------------------------------------------ */
.about{ position: relative;}
.about .mark{ position: absolute; top: -160px; left: 50%; z-index: 1; margin: 0 0 0 -148px; width: 296px;}
/*.about .mark:hover{ -webkit-transform: rotateY(180deg); transform: rotateY(180deg);}*/
.about header{ position: relative; z-index: 2; text-align: center;}
.about h1{ margin: 120px auto 0; width: 200px;}
.about .en{ margin: 20px 0 0; font-size: 3rem;}
.about .type{ margin: 20px 0 0; font-size: 2rem; font-family: 'Reenie Beanie', cursive;}
.list-about{ position: relative; z-index: 3; display: flex; flex-direction: row-reverse; margin: 80px -40px 0; font-size: 1rem; justify-content: center;}
.list-about li{ padding: 0 40px; width: 610px;}
.list-about li:first-child{ line-height: 1.8;}
.list-about li:last-child{ text-align: right; line-height: 1.5;}

@media screen and (max-width: 768px){
    .about .mark{top: -100px;  margin: 0 0 0 -25%; width: 50%;}
    .about h1{ margin: 100px auto 0; width: 40%;}
    .about .en{ margin: 10px 0 0; font-size: 2rem;}
    .about .type{ margin: 10px 0 0;}
    .list-about{ display: block; margin: 0; padding: 0 20px; font-size: 1.2rem;}
    .list-about li{ margin: 40px 0 0; padding: 0; width: 100%;}
    .list-about li:first-child{ line-height: 1.8;}
    .list-about li:last-child{ text-align: left; line-height: 1.8;}
    }

/* works ------------------------------------------ */
.works header h1{ overflow: hidden; height: 0; text-indent: 100%; white-space: nowrap;}
.works .list-works{ margin: 80px 0 0;}

@media screen and (max-width: 768px){
    .works .list-works{ margin: 40px 0 0;}
}

/* works-entry ------------------------------------ */
.works-entry{ margin: 0 auto; width: 600px; line-height: 1.8;}
.works-entry header{ padding: 0 0 40px; text-align: center;}
.works-entry header h1{ font-size: 1.8rem; font-family: 'Work Sans', sans-serif;}
.works-entry header .cat{ font-size: 1.6rem; font-family: 'Reenie Beanie', cursive;}
.works-entry .content{ padding: 0 0 80px;}
.works-entry .content figure{ margin: 0 -20px;}
.works-entry .content p{ margin: 40px 0 0;}
.works-entry .content p + figure{ margin: 40px -20px 0;}
.works-entry .content figure + figure{ margin: 20px -20px 0;}
.works-entry .content .credit{ margin: 40px 0 0; text-align: center;}
.works-entry .back{ text-align: center; font-size: 1.2rem;}

@media screen and (max-width: 768px){
    .works-entry{ margin: 0; width: 100%;}
    .works-entry header{ padding: 0 0 40px;}
    .works-entry header h1{ font-size: 1.6rem;}
    .works-entry .content{ padding: 0 20px;}
    .works-entry .content p{ margin: 20px 0 0;}
    .works-entry .content p + figure{ margin: 20px -20px 0;}
    .works-entry .content figure + figure{ margin: 20px -20px 0;}
    .works-entry .content .credit{ margin: 20px 0 0; text-align: left;}
    .works-entry .back{ margin: 40px 0 0;}
}

/* flow ------------------------------------------- */
.flow{ margin: 0 auto; width: 1040px;}
.flow header h1{ overflow: hidden; height: 0; text-indent: 100%; white-space: nowrap;}
.flow .content{ padding: 0 0 80px;}
.list-flow{ display: flex; flex-wrap: wrap; align-items: flex-start;}
.list-flow li{ display: flex; color: #fff; transition: all 1s ease; align-items: flex-end;}
.list-flow li:hover{ color: #000;}
.list-flow div{ font-family: 'Barriecito', cursive;}
.list-flow .s1{ font-size: 14rem;}
.list-flow .s2{ font-size: 13rem;}
.list-flow .s3{ font-size: 11rem;}
.list-flow .s4{ font-size: 10rem;}
.list-flow .s5{ font-size: 9rem;}
.list-flow h2{ padding: 0 0 10px 10px; font-weight: 500; font-size: 1.6rem; font-family: 'Noto Serif JP', serif; line-height: 1.5;}
.list-flow h2 span{ display: block;}

.list-flow li:first-child{ padding: 0 105px 0 0;}
.list-flow li:nth-child(2){ padding: 30px 90px 0 0;}
.list-flow li:nth-child(3){ padding: 55px 70px 0 0;}
.list-flow li:nth-child(4){}
.list-flow li:nth-child(5){ padding: 45px 85px 0 65px;}
.list-flow li:nth-child(6){ padding: 55px 75px 0 0;}
.list-flow li:nth-child(7){ padding: 60px 45px 0 0;}
.list-flow li:nth-child(8){}
.list-flow li:nth-child(9){ padding: 70px 0 0 40px;}
.list-flow li:nth-child(10){ padding: 25px 0 0;}
.list-flow li:nth-child(11){}
.list-flow li:nth-child(12){ padding: 40px 0 0;}

@media screen and (max-width: 768px){
    .flow{ width: 100%;}
    .flow .content{ padding: 0 20px;}
    .list-flow li:first-child,
    .list-flow li:nth-child(2),
    .list-flow li:nth-child(3),
    .list-flow li:nth-child(4),
    .list-flow li:nth-child(5),
    .list-flow li:nth-child(6),
    .list-flow li:nth-child(7),
    .list-flow li:nth-child(8),
    .list-flow li:nth-child(9),
    .list-flow li:nth-child(10),
    .list-flow li:nth-child(11),
    .list-flow li:nth-child(12){ padding: 0;}
    .list-flow li{ width: 100%;}
    .list-flow li:nth-child(even){ justify-content: flex-end;}
}

/* contact ---------------------------------------- */
.contact{ margin: 0 auto; width: 960px; text-align: center; font-size: 3.6rem; line-height: 1.5;}
.contact header{ padding: 0 0 120px;}
.contact .content{ padding: 0 0 80px;}
.contact .content a{ display: inline-block; border-bottom: 2px solid; color: #fff; font-size: 6.6rem; line-height: 1; transition: all .75s ease;}
.contact .content a:hover{ color: #000;}

@media screen and (max-width: 768px){
    .contact{ width: 100%; font-size: 2rem;}
    .contact header{ padding: 0 0 40px;}
    .contact .content{ padding: 0 20px;}
    .contact .content a{ font-size: 3.6rem;}
}

/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ position: fixed; bottom: 0; left: 0; padding: 0 40px 40px; width: 100%;}
.footer .inner{ position: relative;}
.footer aside ul{ position: absolute; bottom: 0; left: 0; display: flex; margin: 0 -5px;}
.footer aside li{ padding: 0 5px;}
.footer aside a{ display: block; width: 25px; height: 25px; border-radius: 100%; background: #181818; color: #fff; text-align: center; line-height: 29px;}
.footer .btn{ text-align: center;}
.footer .btn a{ display: inline-block; width: 20px;}

@media screen and (max-width: 768px){
    .footer{ padding: 0 20px 20px;}
    .footer aside a{ width: 30px; height: 30px; font-size: 1.4rem; line-height: 34px;}
}