@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
:root {
    --light-green: #d5edeb;
    --green: #63dbd0;
    --brown: #403632;
    --light-grey: #eee;
    --white: #fff;
    --oswald-font: 'Oswald', sans-serif;
}

.hero {
    height: 80vh;
    position: relative;
}
.hero::after {
    content: '';
    width: 100%;
	margin-top: -3em;
	z-index: 10;
    background: url('http://schritt-production.info/wp-content/uploads/2025/02/63ca2268c1b2fc98917c2396fc3e7d4f.png') no-repeat center / cover;
    position: absolute;
    inset: 0;
}
.hero .title {
    position: absolute;
    top: -200%;
    left: 50%;
    translate: -200% -50%;
    z-index: 100;
    width: 100%;
    
}
#loading {
    background-color: var(--light-grey);
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
}
#loading-screen {
    background-color: var(--light-green);
    position: fixed;
	width: 80%;
    z-index: 9998;
    translate: 0 200vh;
}
#loading p {
    font-size: 2rem;
    font-family: font-family: "Kaisei Opti", serif;
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
.hero {
    height: 40vh;
    position: relative;
}
.hero::after {
    content: '';
    width: 100%;
	margin-top: -3.5em;
	z-index: 10;
    background: url('http://schritt-production.info/wp-content/uploads/2025/02/63ca2268c1b2fc98917c2396fc3e7d4f.png') no-repeat center / cover;
    position: absolute;
    inset: 0;
}
.hero .title {
    position: absolute;
    top: -200%;
    left: 50%;
    translate: -200% -50%;
    z-index: 100;
    width: 80%;
}	
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
}
.container {
    display: grid;
    place-items: center;
	width: 100vw;
    height: 10vh;
    background: linear-gradient(200deg, #ffffff, #ffffff);
    }
    
    .sns-box {
    display: flex;
    gap: 2rem;
    }
    
    .btn-sns {
    display: grid;
    place-content: center;
    width: 3.5rem;
    height: 3.5rem;
    box-sizing: border-box;
    border-radius: 0.2rem;
    color: #9FA9B4;
    font-size: 1.5rem;
    text-align: center;
    text-decoration: none;
    transition: 1s;
    }
    
    .btn-sns svg {
    fill: #212325;
    }
    
    .btn-sns:hover {
    box-shadow: 20px 20px 60px #8b93a0,
        -20px -20px 60px #ffffff;
    }