@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 1.0
----------------------------------------------------
・Hero Image
・Overlay
・Tagline
・Brand
・Scroll
==================================================*/


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

.vapor-hero{

    position:relative;

    width:100%;

    height:620px;

    overflow:hidden;

}


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

.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;

}


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

.vapor-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(8,18,32,.18),
            rgba(8,18,32,.42)
        );

}


/*--------------------------------------
Catch Copy
--------------------------------------*/

.vapor-tagline{

    position:absolute;

    top:65px;

    left:50%;

    transform:translateX(-50%);

    width:100%;

    text-align:center;

}


.vapor-tagline-text{

    margin:0;

    color:#ffffff;

    font-size:26px;

    font-weight:300;

    letter-spacing:.12em;

    line-height:1.8;

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

}


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

.vapor-branding{

    position:absolute;

    left:50%;

    top:50%;

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

    width:100%;

    text-align:center;

}


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

.hero-logo{

    margin:0;

    font-size:84px;

    font-weight:300;

    line-height:1;

    letter-spacing:.34em;

    color:#ffffff;

    text-transform:uppercase;

    text-shadow:
        0 6px 24px rgba(0,0,0,.40);

}


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

.hero-title{

    margin:42px 0 0;

    font-size:30px;

    font-weight:300;

    color:#ffffff;

    letter-spacing:.08em;

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

}


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

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:36px;

    transform:translateX(-50%);

}


.hero-scroll span{

    display:inline-block;

    color:#ffffff;

    font-size:12px;

    font-weight:400;

    letter-spacing:.35em;

    text-transform:uppercase;

    opacity:.9;

}


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

@media(max-width:768px){

    .vapor-hero{

        height:460px;

    }

    .vapor-tagline{

        top:45px;

    }

    .vapor-tagline-text{

        font-size:18px;

        padding:0 20px;

    }

    .hero-logo{

        font-size:52px;

        letter-spacing:.20em;

    }

    .hero-title{

        font-size:22px;

        margin-top:28px;

    }

}

/*==================================================
06 Content Layout
Vapor Trails Original Theme
Final Version 1.0
----------------------------------------------------
・Main Container
・Two Column Layout
・Content Width
・Sidebar Width
・Responsive
==================================================*/


/*--------------------------------------
Main Container
--------------------------------------*/

.site-content{

    max-width:1200px;

    margin:70px auto;

    padding:0 24px;

}


/*--------------------------------------
Content Layout
--------------------------------------*/

.content-wrap{

    display:flex;

    align-items:flex-start;

    gap:40px;

}


/*--------------------------------------
Main Content
--------------------------------------*/

.main-content{

    flex:1;

    min-width:0;

}


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

.sidebar{

    width:320px;

    flex-shrink:0;

}


/*--------------------------------------
Content Spacing
--------------------------------------*/

.main-content>*{

    margin-bottom:40px;

}


/*--------------------------------------
Sidebar Spacing
--------------------------------------*/

.sidebar>*{

    margin-bottom:32px;

}


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

@media (max-width:991px){

    .content-wrap{

        flex-direction:column;

    }

    .sidebar{

        width:100%;

    }

}


/*==================================================
07 Post List
Vapor Trails Original Theme
Final Version 1.0
----------------------------------------------------
・Section Title
・Article Card
・Thumbnail
・Title
・Excerpt
・Meta
・Hover Effect
==================================================*/


/*--------------------------------------
Section Title
--------------------------------------*/

.new-entry-title,
.archive-title{

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

    color:#ffffff;

    font-size:22px;

    font-weight:600;

    text-align:center;

    padding:16px 24px;

    border-radius:8px;

    margin:0 0 30px;

}


/*--------------------------------------
Article List
--------------------------------------*/

.post-list{

    display:flex;

    flex-direction:column;

    gap:28px;

}


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

.post-list article{

    display:flex;

    gap:28px;

    align-items:flex-start;

    background:#ffffff;

    border:1px solid #edf2f7;

    border-radius:10px;

    padding:18px;

    transition:.25s ease;

    box-shadow:
        0 6px 20px rgba(0,0,0,.05);

}


.post-list article:hover{

    transform:translateY(-4px);

    box-shadow:
        0 12px 28px rgba(0,0,0,.10);

}


/*--------------------------------------
Thumbnail
--------------------------------------*/

.post-list img{

    width:320px;

    height:200px;

    object-fit:cover;

    border-radius:8px;

    display:block;

}


/*--------------------------------------
Article Body
--------------------------------------*/

.post-list article .entry-body{

    flex:1;

    display:flex;

    flex-direction:column;

}


/*--------------------------------------
Article Title
--------------------------------------*/

.post-list h2,
.post-list .entry-title{

    margin:0 0 16px;

    font-size:34px;

    line-height:1.45;

    font-weight:700;

    color:var(--vt-main-dark);

}


.post-list h2 a,
.post-list .entry-title a{

    color:inherit;

    text-decoration:none;

}


.post-list h2 a:hover{

    color:var(--vt-main);

}


/*--------------------------------------
Excerpt
--------------------------------------*/

.post-list .entry-summary,
.post-list .entry-content{

    font-size:16px;

    line-height:1.9;

    color:#555;

    margin-bottom:22px;

}


/*--------------------------------------
Meta
--------------------------------------*/

.post-list .entry-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:14px;

    color:#777;

    margin-top:auto;

}


/*--------------------------------------
Category Label
--------------------------------------*/

.post-list .cat-label{

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

    color:#fff;

    font-size:12px;

    padding:4px 10px;

    border-radius:4px;

}


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

@media (max-width:991px){

    .post-list article{

        flex-direction:column;

    }

    .post-list img{

        width:100%;

        height:auto;

    }

    .post-list h2,
    .post-list .entry-title{

        font-size:28px;

    }

}


/*==================================================
08 Sidebar
Vapor Trails Original Theme
Final Version 1.0
----------------------------------------------------
・Sidebar Layout
・Widget
・Profile Card
・Author
・SNS
==================================================*/


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

#sidebar{

    width:320px;

}

#sidebar .widget{

    background:#ffffff;

    border:1px solid var(--vt-border);

    border-radius:10px;

    padding:28px;

    margin-bottom:32px;

    box-shadow:
        0 8px 24px rgba(0,0,0,.05);

}


/*--------------------------------------
Widget Title
--------------------------------------*/

#sidebar .widget-title{

    margin:0 0 22px;

    padding-bottom:12px;

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

    font-size:20px;

    font-weight:600;

    color:var(--vt-main-dark);

}


/*--------------------------------------
Profile Card
--------------------------------------*/

#sidebar .author-box{

    text-align:center;

    border:2px solid #2ea7ff;

    border-radius:6px;

    padding:32px 24px;

}


/*--------------------------------------
Profile Image
--------------------------------------*/

#sidebar .author-box img{

    display:block;

    width:120px;

    height:auto;

    margin:0 auto 24px;

    border:4px solid #2ea7ff;

}


/*--------------------------------------
Author Name
--------------------------------------*/

#sidebar .author-box-name,
#sidebar .author-box h3{

    margin:0 0 18px;

    font-size:22px;

    font-weight:600;

    color:#1565c0;

}

#sidebar .author-box-name a,
#sidebar .author-box h3 a{

    color:#1565c0;

    text-decoration:none;

}

#sidebar .author-box-name a:hover,
#sidebar .author-box h3 a:hover{

    color:var(--vt-main);

}


/*--------------------------------------
Profile Text
--------------------------------------*/

#sidebar .author-box-description,
#sidebar .author-box p{

    font-size:16px;

    line-height:1.9;

    color:#444;

    margin-bottom:24px;

}


/*--------------------------------------
SNS Icons
--------------------------------------*/

#sidebar .sns-follow{

    display:flex;

    justify-content:center;

    gap:14px;

    margin-top:20px;

}

#sidebar .sns-follow a{

    transition:.25s ease;

}

#sidebar .sns-follow a:hover{

    transform:translateY(-3px);

}


/*--------------------------------------
Widget List
--------------------------------------*/

#sidebar ul{

    list-style:none;

    margin:0;

    padding:0;

}

#sidebar li{

    padding:12px 0;

    border-bottom:1px solid #edf2f7;

}

#sidebar li:last-child{

    border-bottom:none;

}

#sidebar li a{

    color:#333;

    text-decoration:none;

    transition:.25s;

}

#sidebar li a:hover{

    color:var(--vt-main);

}


/*--------------------------------------
Search
--------------------------------------*/

#sidebar input[type="search"]{

    width:100%;

    padding:12px;

    border:1px solid #ccd6e2;

    border-radius:6px;

}

#sidebar input[type="submit"]{

    width:100%;

    margin-top:12px;

}


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

@media (max-width:991px){

    #sidebar{

        width:100%;

        margin-top:40px;

    }

}

/*==================================================
09 Footer
Vapor Trails Original Theme
Final Version 1.0
----------------------------------------------------
・Footer Layout
・Copyright
・Footer Navigation
・Responsive
==================================================*/


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

#footer{

    margin-top:80px;

    background:#ffffff;

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

}


/*--------------------------------------
Footer Inner
--------------------------------------*/

.footer-in{

    max-width:1200px;

    margin:0 auto;

    padding:50px 20px 30px;

}


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

.footer-navigation{

    margin-bottom:30px;

    text-align:center;

}

.footer-navigation ul{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:30px;

    margin:0;

    padding:0;

    list-style:none;

}

.footer-navigation a{

    color:#444;

    font-size:15px;

    text-decoration:none;

    transition:.25s;

}

.footer-navigation a:hover{

    color:var(--vt-main);

}


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

.footer-logo{

    margin-bottom:16px;

    text-align:center;

    font-size:34px;

    font-weight:300;

    letter-spacing:.18em;

    color:var(--vt-main-dark);

}


/*--------------------------------------
Footer Description
--------------------------------------*/

.footer-description{

    margin-bottom:30px;

    text-align:center;

    font-size:15px;

    line-height:1.9;

    color:#666;

}


/*--------------------------------------
Copyright
--------------------------------------*/

.site-footer-copyright,
.copyright{

    text-align:center;

    font-size:13px;

    color:#888;

    letter-spacing:.08em;

    line-height:1.8;

}

.site-footer-copyright a,
.copyright a{

    color:#666;

    text-decoration:none;

}

.site-footer-copyright a:hover,
.copyright a:hover{

    color:var(--vt-main);

}


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

@media (max-width:991px){

    .footer-navigation ul{

        flex-direction:column;

        gap:14px;

    }

    .footer-logo{

        font-size:28px;

        letter-spacing:.12em;

    }

}


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


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

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

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