@charset 'UTF-8';

/*
COLORS
================================================ */
:root {
    --text: #fff;
    --bg: #fff;
    --video-opacity: .95;
}
@media (prefers-color-scheme: dark) {
    :root {
        --text: #fff;
        --bg: #000;
        --video-opacity: .7;
    }
}

/*
GENERAL STYLING
================================================ */
html {
    font-size: 100%;
}
body {
	color: var(--text);
    background: var(--bg);
    /* font-family: 'Bree Serif', sans-serif; */
    transition: .5s;
}

/*
COMMON
================================================ */
p {
    line-height: 1.7;
    font-size: 1.125rem;
}
img {
    max-width: 100%;
}
a:hover {
    color: #0bd;
}

/* .container { */
    /* overflow: auto; */
    /* scroll-snap-type: y proximity;
    height: 100vh;
}

/*
HEADER
================================================ */
header {
    position: relative;
    margin-bottom: .5rem;
}
.header-text {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    text-align: center;
}
.header-catchcopy {
    position: absolute;
    top: 1.3rem;
    /* font-size: 1.3rem; */
    margin-top: 1vh;
}
.header-title {
    font-size: 3rem;
}
.header-subtitle {
    font-size: 1.5rem;
    /* margin: 0 auto 2rem; */
}
.header-name {
    font-size: 3rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
/* .header-link {
    font-size: 1.25rem;
} */
.header-pattern {
    position: absolute;
    z-index: 1;

    background-size: 3.2px 3.2px;  /* ドットの間隔を小さくして密度を上げる */
    background-image: radial-gradient(circle, var(--bg) 17%, transparent 17%); /* ドットのサイズを小さく */


    /*background-size: 10px 10px;   ドットの間隔 */
    /*background-image: radial-gradient(circle, var(--bg) 20%, transparent 20%);  ドットのサイズ */

    /*background-size: 10px 10px;  ドットのサイズを調整 */
    /*background-image: repeating-radial-gradient(circle, var(--bg) 10%, transparent 10%);  ドットを作成 */

    /* background-size: 4px 4px;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 1px, var(--bg) 1px, var(--bg) 2px ); */
}

header video {
    object-fit: cover;
    object-position: center top;
    /* opacity: var(--video-opacity); */
}
.header-text,
.header-pattern,
header video {
    width: 100vw;
    height: 100vh;
}

/* ChatGPTに教えてもらったやつ */

.video-container {
    position: relative;
    height: 100vh; /* 動画の高さ */
}

.video-background {
    position: fixed;
    top: 0;
    left: 0;

/* 右余白の修正 */
    min-width: 100vw; /* ビューポート幅にフィット */
    min-height: 100vh; /* ビューポート高さにフィット */

    /* width: 100%;
    height: 100%; */
    z-index: -1;
    overflow: hidden;
}


/*
concept
================================================ */
.concept {
    width: 100vw;
    margin: 0 auto 0;
    background-image: url(../images/camping-kemuri-good.jpg);
    opacity: .96;
    /* background-color: #71656599; */
    border-radius: 34% 66% 27% 73% / 67% 43% 57% 33%;

    text-align: center;
    padding-top: 10vh;
    height: 80vh;
    scroll-snap-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    
    /* width: 100%;
    height: 150vh; */
    
} 

.concept h1 {
    font-size: 2.1rem;
    text-align: center;
    margin: 4rem auto 2rem;

    background-color: #1b1a1a87;
    padding:  3px 3px 3px 3px;
    /* margin-bottom: 5px; */
    border-radius: 7px;
    display: inline-block; /* 行ごとにブロック化 */
}

.concept h2 {
    font-size: 1.5rem;
    text-align: center;
    margin: 1rem auto 3rem ;

    background-color: #1b1a1a87;
    padding: 3px 3px 3px 3px ;
    margin: 10px;
    border-radius: 7px;
    /* display: inline-block; 行ごとにブロック化 */
}

.concept p {
text-align: center; /* テキストを中央揃え */
line-height: 2; /* 行間を広げる */
}
  
p span {
display: inline-block; /* 行ごとにブロック化 */
background-color: #1b1a1a87; /* 背景色 */
padding: 0 5px; /* 左右の余白を追加（任意） */
margin-bottom: 5px; /* 行間に隙間を作る */
border-radius: 7px; /* 角を丸くする */
font-size: .8rem;
}
  
p br {
line-height: 0; /* brタグで不要な行間を抑制 */
}

/*
GRID
================================================ */
.grid {
    position: relative;
    z-index: 1;
    background: white;
    margin: 20px auto 20px;
    /* padding: 50px 0 50px; */
    width: 94vw;
    margin: 0 auto 3vw;
    display: grid;
    gap: 2vw;
    grid-template-columns: repeat(2, 46vw); /* (94 - 2) / 2 */
    grid-template-rows: repeat(8, 46vw);
    box-sizing: border-box; /* 余白の影響を排除 */
    /* 修正部分 */
    /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 均等配置 */

}
.grid-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(100%);
}
.grid-big-top {
    grid-column: 1/3;
    grid-row: 2/3;
}
.grid-big-bottom {
    grid-column: 1/3;
    grid-row: 6/7;
}

/*
FOOTER
================================================ */
footer {
    color: #ffffff;
    text-align: center;
    padding-bottom: 3rem;
    /*display: inline-block;  行ごとにブロック化 */
    background-color: #b5afaf63; /* 背景色 */
    /* padding: 0 5px; 左右の余白を追加（任意） */
    /* margin-bottom: 5px; 行間に隙間を作る */
    border-radius: 7px; /* 角を丸くする */
    font-size: .8rem;
}
.footer-link {
    color: #ffffff;
    margin-bottom: .5rem;
}

/*
LIGHTBOX LUMINOUS
================================================ */
.lum-lightbox.lum-open {
    z-index: 4;
}
.lum-lightbox-inner img {
    max-width: 120vw;
    max-height: 80vh;
}

/*
DESKTOP SIZE
================================================ */
@media (min-width: 600px) {
/* Header */
.header-catchcopy {
position: absolute;
top: 1.3rem;
left: 2rem;
}
.header-name {
    font-size: 3.5rem;
}

.header-pattern {
    background-size: 4px 4px;  /* ドットの間隔を小さくして密度を上げる */
    background-image: radial-gradient(circle, var(--bg) 11%, transparent 11%); /* ドットのサイズを小さく */
}

.concept {
    height: 130vh;
}

.concept h1 {
    font-size: 3rem;
    text-align: center;
    margin: 2rem auto 3rem;
    padding:  5px 5px 5px 5px;
}

.concept h2 {
    font-size: 1.8rem;
    text-align: center;
    margin: 1rem auto 3rem ;
    padding: 5px 5px 5px 5px ;
}

/* Grid */
    .grid {
        width: 80vw;
        gap: 1vw;
        grid-template-columns: repeat(3, 26vw); /* (80 - 2) / 3 */
        grid-template-rows: repeat(5, 26vw);
    }
    .grid-big-bottom {
        grid-column: 2/4;
        grid-row: 4/5;
    }
    .grid-item {
        transition: .3s;
    }
    .grid-item:hover {
        filter: grayscale(0);
        box-shadow: 0 0 2rem rgba(0, 0, 0, .5);
        transform: scale(1.1);
        z-index: 3;
        position: relative;
    }
}