/*
Theme Name:original child
Theme URI:
Template:original
Author URI:https://design-plus1.com/tcd-w/
Version:0.0.8
*/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

html{
	margin-top: 0 !important;
}

/* h1,h2,h3,h4,h5,h6{
	font-family: 'Raleway', sans-serif;
} */


*{
	font-family: 'Noto Sans JP', sans-serif;
	box-sizing: border-box;
}

p{
    letter-spacing: 0.08em;
    line-height: 1.8;
}

img{
    vertical-align: bottom;
}

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

[data-trigger].animation-scroll__vol1{
	position: relative;
    top: 60px;
    -webkit-transition: top 1s,opacity 1s;
    transition: top 1s,opacity 1s;
    opacity: 0;
}

[data-trigger].animation-scroll__vol1.invisible{
	top: 60px;
    -webkit-transition: top 1s,opacity 1s;
    transition: top 1s,opacity 1s;
    opacity: 0;
}

[data-trigger].animation-scroll__vol1.visible{
	top: 0;
    opacity: 1;
}

[data-trigger].animation-scroll__vol2{
	position: relative;
    left: 60px;
    -webkit-transition: left 1s,opacity 1s;
    transition: left 1s,opacity 1s;
    opacity: 0;
}

[data-trigger].animation-scroll__vol2.invisible{
	left: 60px;
    -webkit-transition: left 1s,opacity 1s;
    transition: left 1s,opacity 1s;
    opacity: 0;
}

[data-trigger].animation-scroll__vol2.visible{
	left: 0;
    opacity: 1;
}


[data-trigger].animation-scroll__vol3{
    display: inline-block;
    color: transparent;
	overflow: hidden;
    position: relative;
    transition: color 0ms 450ms;
}

[data-trigger].animation-scroll__vol3 img{
    opacity: 0;
    transition:  0ms 450ms;
}

[data-trigger].animation-scroll__vol3.visible img{
    opacity: 1;
}

[data-trigger].animation-scroll__vol3:after{
    bottom: 0;
    content: '';
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(-101%, 0);
}

[data-trigger].animation-scroll__vol3.visible:after{
	animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}

@keyframes mask-bg {
    0% {
        transform: translate(-101%, 0)
    }
    40%, 60% {
        transform: translate(0, 0%)
    }
    100% {
        transform: translate(100%, 0)
    }
}


p{
    font-size: 16px;
}

@media screen and (max-width: 568px) {
    p{
        font-size: 12px;
    }
}


/* ---------------------------------------------
	ハンバーガーmenu
----------------------------------------------- */

.hamburger-menu{
    display: none !important;
}

@media screen and (max-width: 880px) {
    .hamburger-menu{
        display: block !important;
    }

    .menu-btn {
        position: fixed;
        top: 0em;
        right: 5px;
        display: flex;
        height: 60px;
        width: 60px;
        justify-content: center;
        align-items: center;
        z-index: 90;
        cursor: pointer;
    }
    
    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #000;
        position: absolute;
        transition: 0.5s;
    }
    .menu-btn span:before {
        bottom: 8px;
    }
    .menu-btn span:after {
        top: 8px;
    }
    
    #menu-btn-check {
        display: none;
    }
    
    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
        background: #fff;
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
        background: #fff;
    }
    
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 80;
        background-color: #333333;
    }
    .menu-content ul {
        padding: 70px 10px 0;
    }
    .menu-content ul li {
        border-bottom: solid 1px #ffffff;
        list-style: none;
    }
    .menu-content ul li a {
        display: block;
        width: 100%;
        font-size: 15px;
        box-sizing: border-box;
        color:#ffffff;
        text-decoration: none;
        padding: 9px 15px 10px 0;
        position: relative;
    }
    .menu-content ul li a::before {
        content: "";
        width: 7px;
        height: 7px;
        border-top: solid 2px #ffffff;
        border-right: solid 2px #ffffff;
        transform: rotate(45deg);
        position: absolute;
        right: 11px;
        top: 16px;
    }
    
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 100%;/*leftの値を変更してメニューを画面外へ*/
        z-index: 80;
        background-color: #333333;
        transition: all 0.5s;/*アニメーション設定*/
    }
    
    #menu-btn-check:checked ~ .menu-content {
        left: 50vw;/*メニューを画面内へ*/
    }
}