@charset "utf-8";

/*全般ここから*/

html {
    font-size: calc(1 / 375 * 100vw);
    /*font-size: calc(.8 / 375 * 100vw);*/
    overflow-x: hidden;
    /*background: url(/assets/img/bg_danboru.jpg) repeat center /cover;*/
}

html.lock {
    overflow-y: hidden;
}

body {
    font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif !important;
    font-family: "ワープロ明朝full" !important;
    line-height: 1.6;
    /*letter-spacing: 1rem;*/
    max-width: 100vw;
    min-height: 100vh;
    color: #3E201B;
    font-size: 13rem;
    overflow: hidden;
}

body::after {
    content: "";
    background: url(/assets/img/bg_danboru_pattern.jpg);
    background-position: center top;
    background-repeat: repeat;
    background-size: 200%;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: -2;
} 

select,
input,
textarea,
button {
    font: inherit;
}

img {
    backface-visibility: hidden;
}

img,
svg {
    max-width: 100%;
    vertical-align: bottom;
}

img.object-fit,
svg.object-fit {
    object-fit: cover;
    font-family: "object-fit: cover;";
}

* {
    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    color: #3E201B;
    transition: .2s linear;
}

@media (hover: hover) and (pointer: fine) {
    
    a:hover {
        opacity: .7;
        transform: scale(1.05);
    }
    
}

.inner,
.l_inner {
    /*width: 343rem;*/
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.drop-shadow {
    /*filter: drop-shadow(0 0 5rem #291512);*/
    filter: drop-shadow(3rem 3rem rgba(0,0,0,0.3));
    will-change: filter; /*GPUレイヤーを作成（iOS崩れ対策）*/
}

.box-shadow {
    box-shadow: 3rem 3rem rgba(0,0,0,0.3);
}

.italic {
    font-style: italic;
}

p,
h2 {
    text-shadow: none
}

/*pc-spの表示-非表示*/
.pc {
    display: block !important;
}

.sp {
    display: none !important;
}

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

    .sp {
        display: block !important;
    }
}

/*画像ぼかしフィルターここから*/
img {
    max-width: 100%;
    /*transition: all .3s;*/
}

/*.image {
    filter: brightness(100%);
    transition-duration: .3s;
}

.image:hover {
    filter: brightness(130%);
}*/

.subtitle {
    font-size: 16rem;
    letter-spacing: 5rem;
    font-weight: normal;
    color: #FFF;
    background-color: #3E201B;
    width: 60%;
    margin: 0 auto;
    box-shadow: 3rem 3rem rgba(0,0,0,0.3);
}

.tag {
    color: #FFF;
    background-color: #3E201B;
    padding: 5rem;
    /*box-shadow: 3rem 3rem rgba(0,0,0,0.3);*/
    position: relative;
}

.tag::after {
    content: "";
    position: absolute;
    bottom: -5rem;
    right: -5rem;
    width: 100%;
    height: 100%;
    background: radial-gradient(rgba(0, 0, 0, 0.7) 30%, transparent 0),radial-gradient(rgba(0, 0, 0, 0.7) 30%, transparent 0);
    background-size: 2rem 2rem;
    background-position: 0 0, 1rem 1rem;
    /*border-radius: 10rem;*/
    z-index: -1;
}

/*ヘッダーここから*/
/*SNSここから*/
#sns {
    list-style-type: none;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    /*margin: 3%;*/
}

#sns li {
    /*padding: 0 0 0 3%;*/
}

#sns li + li {
    margin-left: 20rem;
}

#sns li img {
    /*height: 20rem;*/
    /*height: 35rem;*/
}

#sns li a i {
    font-size: 40rem;
}

/*SNSここまで*/
#title_logo {
    /*width: 70%;
    max-width: 300rem;*/
    width: 200rem;
    /*margin: 50rem auto 0;*/
    margin: 15rem auto 0;
}

/*i{color: #3E201B;}*/
#nav {
    font-weight: bold;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* margin: 2% 10%; */
    margin: 30rem auto;
    width: 640rem;
}

#nav li {
    /*width: 50%;*/
    padding: 5rem;
    text-align: center;
}

#nav li a {
    font-size: 16rem;
}

#nav li a i,
header .menu a i {
    margin-right: 3rem;
}

/*#nav li:nth-child(1) {
    letter-spacing: 0.3rem;
}

#nav li:nth-child(2) {
    letter-spacing: 0.2rem;
}*/

#nav a:link {
    color: #3E201B;
    text-decoration: none;
    padding: 10rem;
}

#nav a:visited {
    color: #3E201B;
    padding: 10rem;
}

#nav a:hover {
    /*color: #FFFFFF;
    background: #3E201B;
    padding: 10rem;
    box-shadow: 3rem 3rem rgba(0,0,0,0.3);*/
}

#nav a:active {
    color: #3E201B;
    padding: 10rem;
}

#nav a {
    /*transition-duration: 1s;*/
    transition: .2s linear;
}

/*グロナビactiveここから*/
/*#nav li a.active {
    color: #fff;
    background: #3E201B;
}*/

/*グロナビのカレント表示*/
#page_home #nav li a[href="/"],
/*#page_about #nav li a[href="/about/"],*/
/*#page_works #nav li a[href="/works/"],*/
#page_gallery #nav li a[href="/gallery/"],
#page_enikki #nav li a[href="/enikki/"],
#page_archive-blog #nav li a[href="/blog/"],
#page_single-blog #nav li a[href="/blog/"] {
    color: #fff;
    background: #3E201B;
    /*box-shadow: 3rem 3rem rgba(0,0,0,0.3);*/
    position: relative;
}

#page_home #nav li a[href="/"]::after,
/*#page_about #nav li a[href="/about/"]::after,*/
/*#page_works #nav li a[href="/works/"]::after,*/
#page_gallery #nav li a[href="/gallery/"]::after,
#page_enikki #nav li a[href="/enikki/"]::after,
#page_archive-blog #nav li a[href="/blog/"]::after,
#page_single-blog #nav li a[href="/blog/"]::after {
    content: "";
    position: absolute;
    bottom: -5rem;
    right: -5rem;
    width: 100%;
    height: 100%;
    background: radial-gradient(rgba(0, 0, 0, 0.7) 30%, transparent 0),radial-gradient(rgba(0, 0, 0, 0.7) 30%, transparent 0);
    background-size: 2rem 2rem;
    background-position: 0 0, 1rem 1rem;
    /*border-radius: 10rem;*/
    z-index: -1;
}

/*サイドバーのカレント表示*/
li.current_page_item a {
    color: #fff;
    background: #3E201B;
    box-shadow: 3rem 3rem rgba(0,0,0,0.3);
    padding: 5rem;
    text-decoration: none;
}

/*Lightbox with PhotoSwipe*/
.pswp__bg {
    background: rgba(0,0,0,0.5) !important;
}

/*----------------------------
* メニュー開閉ボタン
*----------------------------*/
header .menu-btn{
    position: fixed;
    top: 10rem;
    right: 10rem;
    z-index: 4;
    width: 50rem;
    height: 50rem;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background: #3E201B;*/
    color: #eaeaea;
    /*color: #fff;*/
    font-size: 25rem;
}

/*----------------------------
* メニュー本体
*----------------------------*/
header .menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 3;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
}

header .menu a {
    /*color: #fff;*/
}

header .menu__item {
    width: 100%;
    height: auto;
    /*padding: .5em 1em;*/
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    font-size: 18rem;
}

header .menu__item +.menu__item  {
    margin-top: 25rem;
}

/*----------------------------
* アニメーション部分
*----------------------------*/

/* アニメーション前のメニューの状態 */
header .menu {
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s linear;
}

/* アニメーション後のメニューの状態 */
header .menu.is-active {
    pointer-events: auto;
    opacity: 1;
}

/*==================================================
5-2-1 3本線が×に
===================================*/
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
    /*ボタン内側の基点となるためrelativeを指定。
    追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
    position: relative;
    background:#57a2c7;
    cursor: pointer;
    width: 50rem;
    height: 50rem;
    border-radius: 5rem;
    background: #3E201B !important;
}

/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14rem;
    height: 3rem;
    border-radius: 2rem;
    background: #fff;
    width: 45%;
}

.openbtn span:nth-of-type(1) {
    top:15rem;	
    width: 45%;
}

.openbtn span:nth-of-type(2) {
    top:23rem;
    width: 35%;
}

.openbtn span:nth-of-type(3) {
    top:31rem;
    width: 20%;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn.active span:nth-of-type(1) {
    top: 18rem;
    /*left: 18rem;*/
    left: 12.5rem;
    /*transform: translateY(6rem) rotate(-45deg);*/
    transform: translateY(5rem) rotate(-45deg);
    /*width: 30%;*/
    width: 50%;
}

.openbtn.active span:nth-of-type(2) {
    opacity: 0;/*真ん中の線は透過*/
}

.openbtn.active span:nth-of-type(3){
    top: 30rem;
    /*left: 18rem;*/
    left: 12.5rem;
    /*transform: translateY(-6rem) rotate(45deg);*/
    transform: translateY(-7rem) rotate(45deg);
    /*width: 30%;*/
    width: 50%;
}

/*フッターここから*/
footer {
    margin-top: 50rem;
    margin-bottom: 20rem;
    text-align: center;
}

/*pagetopここから*/
#pagetop {
    position: fixed;
    right: 10rem;
    bottom: 10rem;
    cursor: pointer;
    /*z-index: 10;*/
    z-index: 2;
    width: 30rem;
}

/*photoswipeのテキスト・リンクここから*/

.pswp__caption .pswp__caption__center {
/*text-align: center;*/
    max-width: 100%;
}

.txt_wrap_outer {
    text-align: center;
}

.txt_wrap_inner {
    display: inline-block;
    text-align: left;
}

.pswp__caption__center p {
    font-size: 3vw;
}

.pswp__caption .pswp__caption__center h3 {
    margin: 10rem 0;
    line-height: 1.5em;
    text-align: center;
}

.pswp__caption__center a {
    font-size: 5vw;
    color: #fff;
}

/*----- ワープロ明朝 -----*/
@font-face {
    font-family: "ワープロ明朝";
    src: url("wapuro-mincho/wapuro-mincho.subset.woff") format("woff");
}

@font-face {
    font-family: "ワープロ明朝full";
    src: url("wapuro-mincho/wapuro-mincho.woff2") format("woff2"),
        url("wapuro-mincho/wapuro-mincho.woff") format("woff");
}

@font-face {
    font-family: "ワープロ明朝横倍角";
    src: url("wapuro-mincho/wapuro-mincho-yoko2x.woff2") format("woff2"),
        url("wapuro-mincho/wapuro-mincho-yoko2x.woff") format("woff");
}

@font-face {
    font-family: "ワープロ明朝縦倍角";
    src: url("wapuro-mincho/wapuro-mincho-tate2x.woff2") format("woff2"),
        url("wapuro-mincho/wapuro-mincho-tate2x.woff") format("woff");
}

/*----- 枠をwin95風に -----*/

.window95 {
    background: #eaeaea;
    border-radius: 1rem;
    position: relative;
    z-index: 1;
    border-top: 1px solid #a0a0a0;
    border-left: 1px solid #a0a0a0;
    border-right: 1px solid #4c4c4c;
    border-bottom: 1px solid #4c4c4c;
    /*margin: 0 10rem 10rem 0;*/
    padding: 20rem;
}

.window95:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    display: block;
    background: transparent;
    /*z-index: 9;*/
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #858585;
    border-bottom: 2px solid #858585;
}

.window95 * {
    position: relative;
    z-index: 1;
}

.window95 ul {
    list-style: none;
}

/*----- 枠にワープロ風装飾 -----*/

.wapuro_dots {
    padding: 5rem 10rem;
    border-left: 5rem solid #522b26;
    /*background-image: radial-gradient(#ccc 30%, transparent 0);*/
    background: radial-gradient(#ccc 30%, transparent 0);
    background-size: 4rem 4rem;
}

/*タブレット対応ここから*/
@media screen and (min-width:768px) {

    /*全般ここから*/
    html {
        font-size: calc(1 / 1280 * 100vw);
    }
    
    body::after {
        background-size: 100%;
    }
    
    .inner {
        width: 960rem;
    }

    .l_inner {
        /*width: 1200rem;*/
        width: 1280rem;
    }
    
    /*ヘッダーここから*/
    /*SNSここから*/
    /*#sns {
        justify-content: flex-end;
        margin: 2% 2% 0;
    }*/

    #sns li img {
        height: 35rem;
    }

    /*#title_logo {
        width: 40%;
        max-width: 400rem;
        margin: 0 auto;
    }*/

    #nav li {
        /*width: 13%;*/
    }
    
    /*フッターここから*/
    footer {
        margin-top: 100rem;
    }

    /*pagetopここから*/
    #pagetop {
        right: 20rem;
        bottom: 20rem;
        width: 50rem;
    }

    /*photoswipeのテキスト・リンクここから*/

    .pswp__caption__center a {
        font-size: 25rem;
    }

    .pswp__caption__center p {
        font-size: 13rem;
    }

}

/*PC対応ここから*/
@media screen and (min-width:769px) {

    #sns {
        justify-content: flex-end;
        margin: 2% 2% 0;
    }
    
    #title_logo {
        /*width: 40%;
        max-width: 400rem;*/
        width: 300rem;
        margin: -30rem auto 0;
    }
    
}


/*PC対応ここから*/
@media screen and (min-width:1280px) {

    /*全般ここから*/
    html {
        font-size: 1px;
    }
    
    body {
        font-size: 16rem;
    }
    
}


/*----- 動き -----*/
.R-L {
    opacity: 0;
    transform: translateX(10%);
    transition: all 2s;
}

.B-T {
    opacity: 0;
    transform: translateY(10%);
    transition: all 1s;
}

.B-T1 {
    opacity: 0;
    transform: translateY(10%);
    transition: all 1s;
}

.B-T2 {
    opacity: 0;
    transform: translateY(10%);
    transition: all 1s;
    transition-delay: .3s;
}

.B-T3 {
    opacity: 0;
    transform: translateY(10%);
    transition: all 1s;
    transition-delay: .6s;
}

.T-B {
    opacity: 0;
    transform: translateY(-10%);
    transition: all 2s;
}

.R-L.effect-scroll,
.B-T.effect-scroll,
.B-T1.effect-scroll,
.B-T2.effect-scroll,
.B-T3.effect-scroll,
.T-B.effect-scroll {
    opacity: 1;
    transform: translate(0);
}

/*----- animation -----*/

.fuwa {
    -webkit-animation: example 2s ease 0s 1 forwards;
    animation: example 2s ease 0s 1 forwards;
    opacity: 0;
    transform: translateY(8px);
}

@-webkit-keyframes example {
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes example3 {
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

body {
    -webkit-animation: example2 1s ease 0s 1 forwards;
    animation: example2 1s ease 0s 1 forwards;
    opacity: 0;
}

@-webkit-keyframes example2 {
    100% {
        opacity: 1;
    }
}

@keyframes example3 {
    100% {
        opacity: 1;
    }
}

/*==================================================
ふわっ
===================================*/


/* fadeUp */

.fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes fadeUpAnime{
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeUpTrigger{
    opacity: 0;
}