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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*==================================================
Vapor Trails Original Theme Ver.5
Cocoon Edition
Version 5.0
==================================================*/


/*--------------------------------------------------
01 Design System
--------------------------------------------------*/

:root{

  /* Background */

  --vt-bg-main:#ffffff;
  --vt-bg-card:#fcfdff;
  --vt-bg-sidebar:#fbfcfe;
  --vt-bg-footer:#f7fbff;

  /* Brand */

  --vt-main:#2b90df;
  --vt-main-dark:#163a63;
  --vt-main-light:#dff4ff;

  /* Text */

  --vt-text:#333333;
  --vt-text-light:#666666;

  /* Border */

  --vt-border:#d8e5ef;

  /* Radius */

  --vt-radius-s:6px;
  --vt-radius:10px;
  --vt-radius-l:16px;

  /* Shadow */

  --vt-shadow:0 8px 20px rgba(0,0,0,.08);

  /* Animation */

  --vt-speed:.25s;

}

/*--------------------------------------------------
02 Layout
--------------------------------------------------*/

/* Site Background */

body{

    background:var(--vt-bg-main);

    color:var(--vt-text);

    line-height:1.8;

}

/* Main Container */

#main{

    margin-top:40px;
    margin-bottom:60px;

}

/* Main Content */

.content{

    padding:0 12px;

}

/* Sidebar */

.sidebar{

    padding-left:24px;

}

/*======================================================
03 Header Final 1.0
Vapor Trails Original Theme
--------------------------------------------------------
Header専用CSS
・ブランド表示
・サイトタイトル
・余白
・レスポンシブ
======================================================*/


/*------------------------------------------------------
Header Container
------------------------------------------------------*/

.header-container{

    background:#ffffff;

    border-bottom:1px solid #e9edf2;

}


/*------------------------------------------------------
Header
------------------------------------------------------*/

#header{

    background:#ffffff;

    position:relative;

    z-index:20;

    padding:50px 0 30px;

}


.header{

    margin:0;

    padding:0;

}


.header-in{

    max-width:1200px;

    margin:0 auto;

    padding:0 30px;

}


/*------------------------------------------------------
Branding
------------------------------------------------------*/

.vapor-branding{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}


/*------------------------------------------------------
VAPOR TRAILS
------------------------------------------------------*/

.logo-text{

    margin:0;

    padding:0;

    font-size:72px;

    font-weight:300;

    line-height:1;

    letter-spacing:.30em;

    text-transform:uppercase;

}


.logo-text a{

    color:#163a63;

    text-decoration:none;

    transition:.25s;

}


.logo-text a:hover{

    color:#2ea7ff;

}


/*------------------------------------------------------
Site Title
------------------------------------------------------*/

.site-name-text{

    margin-top:22px;

    margin-bottom:0;

    font-size:28px;

    font-weight:300;

    line-height:1.5;

    letter-spacing:.04em;

    color:#444;

}


/*------------------------------------------------------
Responsive
------------------------------------------------------*/

@media (max-width:991px){

    #header{

        padding:40px 0 25px;

    }

    .logo-text{

        font-size:52px;

        letter-spacing:.18em;

    }

    .site-name-text{

        font-size:22px;

    }

}


@media (max-width:767px){

    #header{

        padding:30px 0 20px;

    }

    .header-in{

        padding:0 20px;

    }

    .logo-text{

        font-size:38px;

        letter-spacing:.12em;

    }

    .site-name-text{

        font-size:18px;

        margin-top:16px;

    }

}

/*==================================================
04 Navigation Final 1.0
Vapor Trails Original Theme
----------------------------------------------------
Navigation専用
==================================================*/


/*--------------------------------------
Navigation
--------------------------------------*/

#navi{

    background:#ffffff;

    border-top:1px solid #e8edf3;

    border-bottom:2px solid var(--vt-main-dark);

}


/*--------------------------------------
Navigation Inner
--------------------------------------*/

#navi-in{

    max-width:1200px;

    margin:0 auto;

}


/*--------------------------------------
Menu
--------------------------------------*/

#menu-navigation > li{

    margin:0 18px;

}

#menu-navigation > li > a{

    padding:22px 18px;

    font-size:1.2rem;

    font-weight:500;

    transition:.25s;

}


/*--------------------------------------
Hover
--------------------------------------*/

#menu-navigation > li > a:hover{

    color:var(--vt-main);

}

/*==================================================
05 Hero
Vapor Trails Original Theme
Final Version
----------------------------------------------------
・header-container.php Final専用
・ブランド中央配置
・Hero画像
・Overlay
・Scroll
==================================================*/


/*--------------------------------------
Hero
--------------------------------------*/

.vapor-hero{

    position:relative;

    width:100%;

    height:620px;

    overflow:hidden;

}


/*--------------------------------------
Background Image
--------------------------------------*/

.vapor-hero-image{

    position:absolute;

    inset:0;

    background-image:url("/wp-content/uploads/2025/03/IMG_6226.jpg");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

}


/*--------------------------------------
Dark Overlay
--------------------------------------*/

.vapor-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(10,20,35,.28),
        rgba(10,20,35,.45)
    );

}


/*--------------------------------------
Tagline
--------------------------------------*/

.vapor-tagline{

    position:absolute;

    top:70px;

    left:50%;

    transform:translateX(-50%);

    width:100%;

    text-align:center;

}


.vapor-tagline-text{

    color:#ffffff;

    font-size:26px;

    font-weight:300;

    letter-spacing:.12em;

    text-shadow:
        0 2px 10px rgba(0,0,0,.45);

}


/*--------------------------------------
Brand
--------------------------------------*/

.vapor-branding{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:100%;

    text-align:center;

}


/*--------------------------------------
Logo
--------------------------------------*/

.logo-text{

    margin:0;

    font-size:92px;

    font-weight:300;

    letter-spacing:.34em;

    line-height:1;

    color:#ffffff;

    text-transform:uppercase;

    text-shadow:
        0 8px 24px rgba(0,0,0,.35);

}


/*--------------------------------------
Site Name
--------------------------------------*/

.site-name-text{

    margin-top:45px;

    color:#ffffff;

    font-size:32px;

    font-weight:300;

    letter-spacing:.08em;

    text-shadow:
        0 2px 12px rgba(0,0,0,.45);

}


/*--------------------------------------
Scroll
--------------------------------------*/

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    color:#ffffff;

    font-size:12px;

    letter-spacing:.35em;

    text-transform:uppercase;

    opacity:.9;

}

/*--------------------------------------------------
06 Article Card
--------------------------------------------------*/


/*--------------------------------------------------
07 Sidebar
--------------------------------------------------*/


/*--------------------------------------------------
08 Post
--------------------------------------------------*/


/*--------------------------------------------------
09 Footer
--------------------------------------------------*/


/*--------------------------------------------------
10 Responsive
--------------------------------------------------*/


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

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

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