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

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

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

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

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

/* ========================================
   DiscoverRoutes custom header
   ======================================== */

/* Cocoon標準ロゴを非表示 */
#header .logo-header {
    display: none;
}

/* Cocoon標準キャッチフレーズを非表示 */
#header .tagline {
    display: none;
}

/* PCグローバルナビを非表示 */
#navi {
    display: none;
}

/* ---------- HEADER ---------- */

#header,
#header-in {
    background: #fff;
}

#header-in {
    min-height: 0;
}

.dr-brand {
    width: 100%;
    box-sizing: border-box;
    padding: 45px 20px 25px;
    text-align: center;
    overflow: hidden;
}

.dr-brand-link {
    display: inline-block;
    color: inherit;
    text-decoration: none;
}

/* ---------- ART LOGO ---------- */

.dr-logo {
    display: inline-block;
    font-family: "Times New Roman", Times, serif;
    font-size: clamp(60px, 8.5vw, 125px);
    font-style: italic;
    font-weight: normal;
    line-height: 1;
    color: transparent;
    white-space: nowrap;
    transform: scaleY(1.45);
    transform-origin: center center;
    margin-bottom: 60px;
}

.dr-logo .dr-red {
    -webkit-text-stroke: 28px #f008;
}

.dr-logo .dr-blue {
    -webkit-text-stroke: 28px #08f8;
}

.dr-logo .dr-green {
    -webkit-text-stroke: 28px #0c08;
}

.dr-logo .dr-gray {
    -webkit-text-stroke: 28px #3338;
}

.dr-logo .dr-pink {
    -webkit-text-stroke: 28px #f0f8;
}

/* ---------- TAGLINE ---------- */

.dr-tagline {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .32em;
    color: #555;
}

/* ---------- MOBILE ---------- */

@media screen and (max-width: 768px) {

    .dr-brand {
        padding: 20px 10px 18px !important;
    }

    .dr-logo {
        font-size: 11vw;
        margin-bottom: 28px !important;
        transform: scaleY(1.4);
    }

    .dr-logo .dr-red,
    .dr-logo .dr-blue,
    .dr-logo .dr-green,
    .dr-logo .dr-gray,
    .dr-logo .dr-pink {
        -webkit-text-stroke-width: 16px;
    }

    .dr-tagline {
        position: relative;
        top: 25px;
        margin-bottom: 25px;
    }
}