@charset "UTF-8";
/* ------------------------------------------------
                    共通css
--------------------------------------------------- */
/*---------- header ----------*/
header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
header.is-fixed {
    position: fixed;
    z-index: 998;
}
header .header-in {
    width: 94%;
    margin: 0 auto;
    padding: 25px 0 0;
    display: block;
    position: relative;
}

/*ロゴ*/
header .header-logo {
    width: 120px;
    display: block;
    position: relative;
    z-index: 999;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
header.is-fixed .header-logo {
    width: 90px;
}

/* lang switcher */
header .header-lang-switcher {
	width: auto;
	margin-top: 15px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
    position: relative;
    z-index: 999;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
header .header-lang-switcher li {
	margin-right: 5px;
	position: relative;
	line-height: 1;
}
header .header-lang-switcher li::after {
	content: ' | ';
	width: 1px;
	height: 100%;
}
header .header-lang-switcher li:last-child {
	margin-right: 0;
}
header .header-lang-switcher li:last-child::after {
	content: none;
}
header .header-lang-switcher li a {
	font-size: 12px;
	line-height: 1;
}

header .gnav-wrap {
    width: 100%;
    height: 100vh;
    display: none;
    background: #F7F7F7;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
}
header .gnav-wrap ul#gnav {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    position: fixed;
    top: 30%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
header .gnav-wrap ul#gnav li {
    margin: 0 28px;
}
header .gnav-wrap ul#gnav li.nav-second {
    margin: 0 26px;
}
header .gnav-wrap ul#gnav li.link02, 
header .gnav-wrap ul#gnav li.link03 {
    margin: 0 22px;
}
header .gnav-wrap ul#gnav li a {
    padding: 0;
    display: block;
}
header .gnav-wrap ul#gnav li.link01 a {
    font-size: 16px;
}
header .gnav-wrap ul#gnav li.link02 a {
    font-size: 12px;
}
header .gnav-wrap ul#gnav li.link03 a {
    font-size: 11px;
}
header .gnav-wrap ul#gnav li.nav-second a {
    padding: 38px 0 0;
    display: block;
    position: relative;
    font-size: 14px;
}
header .gnav-wrap ul#gnav li.nav-second a::before {
    content: "";
    width: 1px;
    height: 30px;
    display: block;
    background: #666666;
    position: absolute;
    top: 0;
    left: calc(50% - 0.5px);
}
header .gnav-wrap ul#gnav li.link-whitebox a {
    padding: 20px 10px;
    display: inline-block;
    background: #fff;
}



header .gnav-wrap ul#gnav .link-blank::after {
    content: "";
    width: 11px;
    height: 11px;
    margin-top: 8px;
    margin-left: 0;
    display: inline-block;
    background: url(../img/common/icon_newwindow.svg) center center no-repeat;
    background-size: 100%;
}


header .btn-menu-wrap {
    width: 38px;
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 999;
}
header #menu-trigger{
    width: 38px;
    height: 40px;
    display: inline-block;
    position: relative;
    cursor: pointer;
}
header #menu-trigger span {
    width: 1px;
    height: 100%;
    background: #666666;
    position: absolute;
    top: 0;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    
    transform: scale(1, 0);
    transform-origin: 0 100%;
    animation: hum 3.6s cubic-bezier(0, 0, 1, 1) infinite;
}
header #menu-trigger span:nth-of-type(1) {
    left: 0;
}
header #menu-trigger span:nth-of-type(2) {
    left: calc(50% - 0.5px);
    animation-delay: 0.1s;
}
header #menu-trigger span:nth-of-type(3) {
    right: 0;
    animation-delay: 0.2s;
}
@keyframes hum {
    0% {
        transform: scale(1, 0);
        transform-origin: 0 0;
        opacity: 0;
    }
    10% {
        transform: scale(1, 1);
        transform-origin: 0 0;
        opacity: 0.2;
    }
    10.1% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
        opacity: 1;
    }
    80% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
        opacity: 1;
    }
    90% {
        transform: scale(1, 0);
        transform-origin: 0 100%;
        opacity: 0;
    }
    100% {
        transform: scale(1, 0);
        transform-origin: 0 100%;
        opacity: 0;
    }
}

header #menu-trigger.is-active span {
    animation: none;
    transform: none;
    transform-origin: 0;
}
header #menu-trigger.is-active span:nth-of-type(1) {
    height: calc(100% + 12px);
    -webkit-transform: translate(18px, 5px) rotate(-45deg);
    transform: translate(18px, -5px) rotate(-45deg);
}
header #menu-trigger.is-active span:nth-of-type(2) {
    opacity: 0;
}
header #menu-trigger.is-active span:nth-of-type(3) {
    height: calc(100% + 12px);
    -webkit-transform: translate(-18px, -5px) rotate(45deg);
    transform: translate(-18px, -5px) rotate(45deg);
}

header .sns-area {
    display: inline-block;
    position: absolute;
    bottom: 50px;
    left: 20px;
}
header .sns-area ul.sns-list {
    display: flex;
    align-items: center;
}
header .sns-area ul.sns-list li {
    width: 18px;
    margin-right: 40px;
    display: inline-block;
}
header .sns-area ul.sns-list li a { display: block;}

@media (min-width: 769px) {
    header #menu-trigger:hover span {
        width: 1px;
        height: 100%;
        background: #666666;
        position: absolute;
        top: 0;
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
        
        transform: scale(1, 1);
        transform-origin: 0;
        animation: none;
    }
    header #menu-trigger:hover span:nth-of-type(2) {
        height: 80%;
    }
}
@media (max-width: 768px) {
    header {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 998;
    }
    header .header-in {
        width: 90%;
        margin: 0 auto;
        padding: 4vw 0 0 1vw;
        display: block;
        flex-wrap: wrap;
        position: relative;
    }

    /*ロゴ*/
    header .header-logo {
        width: 40%;
        display: block;
        position: relative;
        z-index: 999;
    }
    header.is-fixed .header-logo {
        width: 30%;
    }
	
/* lang switcher */
	header .header-lang-switcher {
		width: auto;
		margin-top: 15px;
	}
	header .header-lang-switcher li {
		position: relative;
		line-height: 1;
	}
	header .header-lang-switcher li a {
		font-size: 3.2vw;
	}
	
    header .gnav-wrap {
        width: 100%;
        height: 100vh;
        display: none;
        background: #F7F7F7;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 998;
    }
    header .gnav-wrap ul#gnav {
        width: 75%;
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    header .gnav-wrap ul#gnav li {
        width: 100%;
        margin: 0 0 7vw;
        line-height: 1;
    }
    header .gnav-wrap ul#gnav li.nav-second {
        margin: 0 0 6.5vw;
    }
    header .gnav-wrap ul#gnav li.link02, 
    header .gnav-wrap ul#gnav li.link03 {
        margin: 0 0 6vw;
    }
    header .gnav-wrap ul#gnav li a {
        padding: 0;
        display: block;
        font-size: 3.6vw;
    }
    header .gnav-wrap ul#gnav li.link01 a {
        font-size: 3.6vw;
    }
    header .gnav-wrap ul#gnav li.link02 a {
        font-size: 3.0vw;
    }
    header .gnav-wrap ul#gnav li.link03 a {
        font-size: 2.8vw;
    }
    header .gnav-wrap ul#gnav li a.txt-vertical {
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
    }
    header .gnav-wrap ul#gnav li.nav-second a {
        padding: 0 0 0 38px;
        display: block;
        position: relative;
        font-size: 3.2vw;
    }
    header .gnav-wrap ul#gnav li.nav-second a::before {
        content: "";
        width: 30px;
        height: 1px;
        display: block;
        background: #666666;
        position: absolute;
        top: calc(50% - 0.5px);
        left: 0;
    }
    header .gnav-wrap ul#gnav li.link-whitebox a {
        padding: 3vw 2vw;
        display: block;
        background: #fff;
        text-align: center;
    }
    header .gnav-wrap ul#gnav .link-blank::after {
        content: "";
        width: 2vw;
        height: 2vw;
        margin-top: 0;
        margin-left: 1.8vw;
        display: inline-block;
        background: url("../img/common/icon_newwindow.svg") center center no-repeat;
        background-size: 100%;
    }
    header .gnav-wrap ul#gnav li:nth-of-type(8) { order: 10;}
    header .gnav-wrap ul#gnav li:nth-of-type(9) { order: 9;}
    header .gnav-wrap ul#gnav li:nth-of-type(10) { order: 8;}
    header .gnav-wrap ul#gnav li:nth-of-type(11) { order: 11;}
    /*
    header .gnav-wrap ul#gnav li:nth-of-type(1) { order: 0;}
    header .gnav-wrap ul#gnav li:nth-of-type(2) { order: 1;}
    header .gnav-wrap ul#gnav li:nth-of-type(3) { order: 5;}
    header .gnav-wrap ul#gnav li:nth-of-type(4) { order: 6;}
    header .gnav-wrap ul#gnav li:nth-of-type(5) { order: 7;}
    header .gnav-wrap ul#gnav li:nth-of-type(6) { order: 8;}
    header .gnav-wrap ul#gnav li:nth-of-type(7) { order: 9;}
    header .gnav-wrap ul#gnav li:nth-of-type(8) { order: 2;}
    header .gnav-wrap ul#gnav li:nth-of-type(9) { order: 3;}
    header .gnav-wrap ul#gnav li:nth-of-type(10) { order: 4;}*/


    header .btn-menu-wrap {
        width: 38px;
        position: absolute;
        top: 4vw;
        right: 0;
        z-index: 999;
    }
    
    header .sns-area {
        width: 100%;
        display: block;
        position: fixed;
        bottom: 10vw;
        left: 0;
    }
    header .sns-area ul.sns-list {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header .sns-area ul.sns-list li {
        width: 4vw;
        margin: 0 4vw;
        display: inline-block;
    }
    header .sns-area ul.sns-list li a { display: block;}

}


/*---------- フローティングバナー ----------*/
.floating-bnr {
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    background: #fff;
    position: fixed;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 997;
    line-height: 1;
}
.floating-bnr a {
    font-size: 12px;
}
.floating-bnr a.bnr-bunshitsu {
    width: 16px;
    padding: 24px 0 0;
    position: relative;
}
.floating-bnr a.bnr-bunshitsu::before {
    content: "";
    width: 12px;
    height: 14px;
    background: url("../img/common/icon_note.svg") center center no-repeat;
    background-size: 11px 13px;
    position: absolute;
    top: 0;
    left: calc(50% - 5px);
}
.floating-bnr a.bnr-bunshitsu::after {
    content: "";
    width: 12px;
    height: 1px;
    background: #CCCCCC;
    position: absolute;
    bottom: -20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.floating-bnr a.bnr-onlinestore {
    width: 16px;
    margin-top: 40px;
    padding: 24px 0 0;
    position: relative;
}
.floating-bnr a.bnr-onlinestore::before {
    content: "";
    width: 16px;
    height: 16px;
    background: url("../img/common/icon_cart.svg") center center no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: calc(50% - 8px);
}

@media (max-width: 768px) {
    .floating-bnr {
        display: none;
    }
}

/*---------- コンテンツ レイアウト ----------*/
.cont-in {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
}

.box-wrap { display: flex;}
.box-reverse { flex-direction: row-reverse;}

.cont-404 {
    padding: 100px 0 50px;
    text-align: center;
}
.cont-404 h2 {
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .cont-in {
        width: 90%;
        max-width: initial;
        margin: 0 auto;
        position: relative;
    }
    
    .cont-404 {
        padding: 20vw 0 8vw;
        text-align: center;
    }
    .cont-404 h2 {
        margin-bottom: 30px;
    }
}






/*---------- テキスト ----------*/
.txt-vertical {
    display: inline-block;
    text-align: left;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.normal-txt {
    font-size: 14px;
}
.caption-txt {
    font-size: 12px;
}
.txt-bold { font-weight: 700;}
.txt-crimson { font-family: 'Crimson Text', serif;}


@media (max-width: 768px) {
    .normal-txt {
        font-size: 3.2vw;
    }
    .caption-txt {
        font-size: 2.8vw;
    }
}

/*---------- ボタン ----------*/
.btn-line {
    margin-top: 50px;
    padding: 0 0 0 75px;
    display: inline-block;
    position: relative;
    line-height: 1;
}
.btn-line::before {
    content: "";
    width: 55px;
    height: 1px;
    display: block;
    background: #666666;
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
@media (min-width: 769px) {
    .btn-line:hover::before {
        content: "";
        width: 65px;
    }
}

.link-blank::after {
    content: "";
    width: 11px;
    height: 11px;
    margin-left: 8px;
    display: inline-block;
    background: url("../img/common/icon_newwindow.svg") center center no-repeat;
    background-size: 100%;
}

@media (max-width: 768px) {
    .btn-line {
        margin-top: 8vw;
        padding: 0 0 0 13vw;
        display: inline-block;
        position: relative;
        line-height: 1;
    }
    .btn-line::before {
        content: "";
        width: 10vw;
        height: 1px;
        display: block;
        background: #666666;
        position: absolute;
        top: calc(50% - 1px);
        left: 0;
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }

    .link-blank::after {
        content: "";
        width: 2vw;
        height: 2vw;
        margin-left: 1.8vw;
        display: inline-block;
        background: url("../img/common/icon_newwindow.svg") center center no-repeat;
        background-size: 100%;
    }
}



/*---------- 手紙寺の活動一覧 ----------*/
.cont-bottom {
    width: 100%;
    padding: 115px 0;
}
.cont-bottom h2 {
    margin-bottom: 50px;
    padding-bottom: 20px;
    display: block;
    border-bottom: 1px solid #CCCCCC;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.2em;
}

.cont-bottom ul.bottom-cont-list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.cont-bottom ul.bottom-cont-list li {
    width: 18%;
    text-align: center;
}
.cont-bottom ul.bottom-cont-list li .list-ttl {
    margin: 24px auto 15px;
    font-size: 18px;
    line-height: 1;
}
.cont-bottom ul.bottom-cont-list li .list-txt {
    font-size: 14px;
}

@media (max-width: 768px) {
    .cont-bottom {
        width: 100%;
        padding: 20vw 0;
    }
    .cont-bottom h2 {
        margin-bottom: 10vw;
        padding-bottom: 4vw;
        display: block;
        border-bottom: 1px solid #CCCCCC;
        font-size: 4.6vw;
        font-weight: 300;
        line-height: 1;
    }

    .cont-bottom ul.bottom-cont-list {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .cont-bottom ul.bottom-cont-list li {
        width: 47.5%;
        margin-bottom: 8vw;
        text-align: center;
    }
    .cont-bottom ul.bottom-cont-list li:last-child {
        margin-right: auto;
        margin-bottom: 0;
    }
    .cont-bottom ul.bottom-cont-list li .list-ttl {
        margin: 3vw auto 2vw;
        font-size: 3.8vw;
        line-height: 1;
    }
    .cont-bottom ul.bottom-cont-list li .list-txt {
        font-size: 3vw;
    }
}



/*---------- footer ----------*/
footer {
    width: 100%;
    padding: 65px 0 55px;
    background: #F7F7F7;
}

footer .cont-in {
    max-width: 1080px;
}

footer .footer-links01 {
    margin-bottom: 50px;
    justify-content: space-between;
}
footer .footer-links01 .box-left {
    width: 200px;
    display: flex;
    flex-direction: column;
    font-family: 'Crimson Text', serif;
}
footer .footer-links01 .footer-tel {
    margin-top: 35px;
    padding-left: 55px;
    position: relative;
    font-size: 20px;
}
footer .footer-links01 .footer-tel::before {
    content: "TEL";
    font-size: 16px;
    position: absolute;
    top: 4px;
    left: 0;
}
footer .footer-links01 .footer-tel span {
    display: block;
    font-size: 16px;
}
footer .sns-area {
    margin-top: auto;
}
footer .sns-area ul.sns-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
footer .sns-area ul.sns-list li {
    width: 18px;
    display: inline-block;
}
footer .sns-area ul.sns-list li a { display: block;}


footer .footer-links01 .box-right {
    width: calc(92% - 200px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    
}
footer ul.footer-nav {
    display: block;
    line-height: 1;
    font-size: 16px;
}
footer ul.footer-nav > li {
    margin-bottom: 30px;
}
footer ul.footer-nav > li > ul.footer-nav-sec {
    margin-top: 30px;
    display: block;
}
footer ul.footer-nav > li > ul.footer-nav-sec li {
    margin-bottom: 30px;
    display: block;
}
footer ul.footer-nav > li > ul.footer-nav-sec li a {
    display: block;
    font-size: 14px;
}
footer ul.footer-nav > li > ul.footer-nav-sec li a::before {
    content: "−";
    margin-right: 5px;
    display: inline-block;
}

footer ul.footer-nav li.link01 a {
    font-size: 16px;
}
footer ul.footer-nav li.link02 {
    margin-bottom: 32px;
}
footer ul.footer-nav li.link02 a {
    font-size: 12px;
}
footer ul.footer-nav li.link03 a {
    font-size: 11px;
}
footer ul.footer-nav li.link-whitebox {
    margin-bottom: 0;
}
footer ul.footer-nav li.link-whitebox a {
    padding: 10px 20px;
    display: inline-block;
    background: #fff;
}

footer .p-copyright {
    margin: 0 auto;
    text-align: center;
    font-size: 11px;
}


@media (max-width: 768px) {
    footer {
        width: 100%;
        padding: 20vw 0 10vw;
        background: #F7F7F7;
    }

    footer .cont-in {
        max-width: 1080px;
    }

    footer .footer-links01 {
        margin-bottom: 0;
        display: block;
    }
    footer .footer-links01 .box-left {
        width: 60%;
        margin: 0 auto 12vw;
        text-align: center;
    }
    footer .footer-links01 .box-left .footer-logo {
        width: 90%;
        max-width: 200px;
        margin: 0 auto;
    }
    footer .footer-links01 .footer-tel {
        margin-top: 6vw;
        padding-left: 11vw;
        display: inline-block;
        position: relative;
        text-align: left;
        font-size: 5vw;
        letter-spacing: 0.1em;
    }
    footer .footer-links01 .footer-tel::before {
        content: "TEL";
        font-size: 3.2vw;
        position: absolute;
        top: 1.5vw;
        left: 0;
    }
    footer .footer-links01 .footer-tel span {
        display: block;
        font-size: 3.2vw;
    }
    footer .sns-area {
        margin: 0 auto 5vw;
        order: 0;
    }
    footer .sns-area ul.sns-list {
        display: flex;
        align-items: center;
    }
    footer .sns-area ul.sns-list li {
        width: 4vw;
        margin: 0 4vw;
        display: inline-block;
    }
    footer .sns-area ul.sns-list li a { display: block;}

    
    footer .footer-links01 .box-right {
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;

    }
    footer ul.footer-nav {
        width: 100%;
        display: block;
        line-height: 1;
        font-size: 3.6vw;
    }
    footer ul.footer-nav > li {
        margin-bottom: 7vw;
    }
    footer ul.footer-nav > li > ul.footer-nav-sec {
        margin-top: 7vw;
        display: block;
    }
    footer ul.footer-nav > li > ul.footer-nav-sec li {
        margin-bottom: 7vw;
        display: block;
    }
    footer ul.footer-nav > li > ul.footer-nav-sec li a {
        display: block;
        font-size: 3.2vw;
    }
    footer ul.footer-nav > li > ul.footer-nav-sec li a::before {
        content: "−";
        margin-right: 5px;
        display: inline-block;
    }

    footer ul.footer-nav li.link01 a {
        font-size: 3.6vw;
    }
    footer ul.footer-nav li.link02 {
        margin-bottom: 7vw;
    }
    footer ul.footer-nav li.link02 a {
        font-size: 3.0vw;
    }
    footer ul.footer-nav li.link03 a {
        font-size: 2.8vw;
    }
    footer ul.footer-nav li.link-whitebox {
        margin-bottom: 7vw;
    }
    footer ul.footer-nav li.link-whitebox a {
        padding: 3vw;
        display: block;
        background: #fff;
        text-align: center;
    }

    footer .sp .sns-area {
        width: 65%;
        margin: 8vw auto 6vw;
    }
    footer .p-copyright {
        margin: 0 auto;
        font-size: 2.4vw;
        order: 2;
    }

}


/* スクロールエフェクト
---------------------------------------------------------------------------- */
.is-effect {
    opacity: 0;
    -webkit-transition: 1.2s ease-in-out;
    -moz-transition: 1.2s ease-in-out;
    -o-transition: 1.2s ease-in-out;
    transition: 1.2s ease-in-out;
}
.is-effect-delay {
    opacity: 0;
    -webkit-transition: 1.2s ease-in-out;
    -moz-transition: 1.2s ease-in-out;
    -o-transition: 1.2s ease-in-out;
    transition: 1.2s ease-in-out;
    transition-delay: 0.6s;
}
@media (max-width: 768px) {
    .is-effect-delay {
        opacity: 0;
        -webkit-transition: 1.2s ease-in-out;
        -moz-transition: 1.2s ease-in-out;
        -o-transition: 1.2s ease-in-out;
        transition: 1.2s ease-in-out;
        transition-delay: 0s;
    }
}
.is-effect.is-effect-on {
    opacity: 1;
}
.is-effect-delay.is-effect-on {
    opacity: 1;
}


/* ロードフェードイン
---------------------------------------------------------------------------- */
.load-fadein {
    opacity: 0;
    animation: fadein 3s ease forwards;
}

.fadein-03-left {
    opacity: 0;
    left: -44px;
    animation: load-left 1s ease forwards;
}
.fadein-02-left {
    opacity: 0;
    left: -44px;
    animation: load-left 1s ease forwards;
}
@media (min-width: 769px) {
    .fadein-03-bottom {
        opacity: 0;
        bottom: -100px;
        animation: load-bottom 1s ease forwards;;
    }
}
@media (max-width: 768px) {
    .fadein-03-bottom {
        opacity: 0;
        bottom: -24vw;
        animation: load-bottom-sp 1s ease forwards;;
    }
}
@keyframes fadein {
    100% { opacity: 1;}
}
@keyframes load-left {
    100% { opacity: 1; left: 0;}
}
@keyframes load-bottom {
    100% { opacity: 1; bottom: -80px;}
}
@keyframes load-bottom-sp {
    100% { opacity: 1; bottom: -20vw;}
}
.fadein-01 { animation-delay: 0.5s;}
.fadein-02, 
.fadein-02-left { animation-delay: 1.8s;}
.fadein-03, 
.fadein-03-left, 
.fadein-03-bottom { animation-delay: 3s;}
.fadein-04 { animation-delay: 7s;}
.fadein-05 { animation-delay: 9s;}
.fadein-06 { animation-delay: 11s;}


.load-fadein.is-scroll-on {
    opacity: 0;
    animation: fadein 0.8s ease forwards;
}
.load-fadein.is-scroll-on.fadein-02-left, 
.load-fadein.is-scroll-on.fadein-03-left {
    opacity: 1;
    left: 0;
    animation: fadein 1.2s ease forwards;
}