@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.header-container{background-color:#FFEE00;}
.logo-image{padding:0;}
.site-name-text-link{padding:0;}

.container{background-color:#FFEE00;}
.wrap{width:1000px;}
.content {margin:0 auto;}
.no-sidebar .content .main{background-color:#fbf37c;padding:30px 10%;}
.footer{margin:0;background:#e96b43;}
.footer-bottom{margin:10px;}
.copyright{margin:0;font-weight:bold;}

#main_navi{position:fixed;opacity:0;right:calc(50vw + 550px);top:50px;transition-delay:.1s;transition-duration:1s;z-index:2;}
#main_navi ul{position:relative;list-style:none;}
#main_navi ul li{transition-duration:.5s;transition-timing-function: ease;margin-bottom:10px;}
#main_navi ul li a{text-decoration:none;color:#333333;font-weight:bold;font-size:1.2em;line-height:2em;}
#main_navi .logo{width:10vw;max-width:none;}
#main_navi .icon{width:50px;max-width:none;}
#main_navi.scroll{opacity:1;}
#main_navi.scroll li{transform:translateX(50px);}
#main_navi .-delay-1{transition-delay: .1s;}
#main_navi .-delay-2{transition-delay: .2s;}
#main_navi .-delay-3{transition-delay: .3s;}
#main_navi .-delay-4{transition-delay: .4s;}
#main_navi .-delay-5{transition-delay: .5s;}
.burger-menu{display:none;left:5px;top:5px;}
.sp_navi{display:none;}
.sp_insta{display:none;}

p{margin:20px auto;}
span.btn{padding:0;}
span.btn:hover{opacity:1;filter:brightness(1.3);}
section{padding:50px 0;}
section p{position:relative;}
section h2{position:relative;font-size:3em;display:inline;}
.lazy h2:before{box-sizing:inherit;content:"";position: absolute;top:0;left:0;z-index:1;background: #424242;animation:lazyloadAnimation 1s ease forwards;}
.lazy p:before{box-sizing:inherit;content:"";position: absolute;top:0;left:0;z-index:1;background: #424242;animation:lazyloadAnimation 1s ease forwards;}
iframe{width:100%;}


/*1.フェードインアニメーションの指定*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
    animation-name: fadeInDown;
    animation-delay: .4s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes fadeInDown {
    0% {opacity: 0;}
    100% {opacity: 1;transform: translate(0);}
}
.updown {transform: translateY(-100px);}
.downup {transform: translateY(100px);}

@keyframes lazyloadAnimation {
0% {top: 0;left: 0;width: 0;height: 100%;}
40% {top: 0;left: 0;width: 100%;height: 100%;}
60% {top: 0;left: 0;width: 100%;height: 100%;}
100% {top: 0;left: 100%;width: 0;height: 100%;}
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1255px以下*/
@media screen and (max-width: 1255px){
  /*必要ならばここにコードを書く*/
#main_navi{left:-50px;right:auto;}
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
.wrap{width:auto;}
.no-sidebar .content .main{padding:30px 20px;}
#main_navi .logo{width:200px;}
#main_navi.scroll{opacity:0;}
.burger-menu{display:none;width:50px;height:50px;top:50px;position:absolute;}
.burger-menu span{display: block;background:#333;width: 100%;height: 3px;position: absolute;
-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease}
.burger-menu span:first-child {top: 3px}
.burger-menu span:nth-child(2) {margin-top: -1px;top: 50%}
.burger-menu span:last-child {bottom: 2px}
.sp_navi{width:100%;height:100%;overflow:hidden;position:fixed;background:#ffd262;
top:0;left:0;z-index:2;display:none;justify-content:center;align-items:center;opacity:0;
-moz-transition:all .4s ease;-o-transition:all .4s ease;-webkit-transition:all .4s ease;transition:all .4s ease;}
.open-menu div.sp_navi{display:flex;opacity:1;}
.sp_navi ul{width:80%;margin:0 auto;padding:0;list-style:none;text-align:center;}
.sp_navi ul li a{font-size:2em;line-height:2em;font-weight:bold;color:#333333;text-decoration:none;}
.sp_navi .logo{width:50%;max-width:none;}
.sp_navi .icon{width:50px;max-width:none;}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
.sp_insta{display:block;position:absolute;right:20px;top:20px;width:30px;}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}