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

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


/* カバーブロック用：インナーブロックの中央寄せを追加 */
.fullwide-inner {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
/*     padding: 0 calc(50vw - 50%); */
}

.cstm-skin-font-set {
font-family: var(--skin-grayish-style-font);
    font-weight: 400;
    letter-spacing: .1rem;
}

/* 英字Font Montserrat　+ 日本語は　Cocoon設定のサイトフォント選択Font　*/
.cstm-font-montserrat {
  font-family: "Montserrat", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* 英字Font Lato　+ 日本語は　Cocoon設定のサイトフォント選択Font　*/
.cstm-font-lato {
  font-family: "Lato", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* 英字Font Inknut Antiqua　+ 日本語は　Cocoon設定のサイトフォント選択Font　*/
.cstm-font-inknut-antiqua {
  font-family: "Inknut Antiqua", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* 英字Font Spectral　+ 日本語は　Cocoon設定のサイトフォント選択Font　*/
.cstm-font-spectral {
  font-family: "Spectral", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* 英字Font Lora　+ 日本語は　Cocoon設定のサイトフォント選択Font　*/
.cstm-font-lora {
  font-family: "Lora", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* 英字Font Jost　+ 日本語は　Cocoon設定のサイトフォント選択Font　*/
.cstm-font-jost {
  font-family: "Jost", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* 英字Font Roboto Slab　+ 日本語は　Cocoon設定のサイトフォント選択Font　*/
.cstm-font-roboto-slab {
  font-family: "Roboto Slab", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}


/* スプラッシュスクリーン */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: black;
    z-index: 1000;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.splash-image {
    animation: fadeOut 2.5s;
}

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

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

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