@charset 'UTF-8';

/*
COLORS（ヘッダー　ナビゲーション　フッターの色）
================================================ */
:root {
    --light-blue: #4db1ec;
    --blue: #1665cc;
    --purple: #b473bf;
    --pink: #ffb2c1;
    --orange: #ff9f67;
    --yellow: #ffd673;
    --light-green: #a2e29b;
    --green: #00a2af;
    --grey: #333;
    --white: #fff;
}

/*
GENERAL STYLING
================================================ */
html {
    font-size: 100%;
    /* スムーズスクロール */
    scroll-behavior: smooth;
}
body {
    /* 文章のフォント */
	color: var(--grey);
	font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ　Pro W3","Hiragino Kaku Gothic Pro",sans-serif;   
}

/*
COMMON
================================================ */
p {
    line-height: 1.7;
}
img {
    max-width: 100%;
}
h2 {
    font-size: 3rem;
    margin-bottom: 2rem;
}
h1,
h2 {
    width: 100%;
    text-align: center;
}
header,
h1,
h2,
.hero-date {
    /* タイトルフォント */
    font-size: 2.5rem;
}


/* Layout */
.wrapper {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

/*
HEADER
================================================ */
header {
    background: var(--grey);
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    z-index: 2;
}
header .wrapper {
    display: flex;
    justify-content: space-between;
}
header a {
    color: var(--white);
    font-size: 1.25rem; /* ロゴ（Enjoy the Outdoors）のサイズ変更 */
}
.btn-menu { /* メニューボタンの設定 */
    position: absolute;
    top: -4px; /* メニューボタンの垂直位置 */
    right: 12px; /* メニューボタンの水平位置 */
    border: 1px solid rgba(255,255,255,.5);
    color: var(--white);
    padding: .25rem .5rem; /* メニューボタン枠の大きさ */
    font-size: 1.25rem; /* メニューボタンの大きさ */
}
.main-nav { /* ナビゲーション設定 */
    background: var(--grey);
    width: 0;
    position: absolute;
    z-index: 2;
    top: 50px;
    right: 0;
    overflow: hidden;
    transition: .5s;
}
.main-nav li {
    text-align: center;
    margin: 2rem 0;
}
.main-nav a {
    display: block;
    font-size: 1.25rem; /* ナビゲーション設定 */
}
.main-nav.open-menu {
    width: 100%; /* メニュー（旅の記録　旅の道具　趣味の部屋　ぷーの記録）幅の変更 */
}

/*
ぷーの記録（ページトップ画像）
================================================ */
#slide1 {
    /* ↓ 省略形だとブラウザーによってうまく表示されない
    background: var(--light-blue) url('../coll/img_0643.jpeg') no-repeat center / cover; */
    background-image: url('../poo-slide/IMG_9094.JPG');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 30vh; /* 画像の高さ */
    display: flex;
    align-items: center;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
#slide1 h1 { /* ぷーの記録（ページトップタイトル） */
    font-size: 2rem;
    color: #fff;
    margin-bottom: 1.5rem;
    padding-top: 3rem;
}

/*
スライダーのためのcss
==========================================================*/
.slider {
    position:relative;
    margin-top: 3rem; /* ページトップとスライド画像の間隔 */
    z-index: 1;
    /* ↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す */
    height: 42vh;/* スライダーの背景画面の縦幅 */
}

/*　背景画像設定　*/
.slider-item01 {background:url('../poo-slide/img_001.jpg');}
.slider-item02 {background:url('../poo-slide/img_002.jpg');}
.slider-item03 {background:url('../poo-slide/img_003.jpg');}
.slider-item04 {background:url('../poo-slide/img_004.jpg');}
.slider-item05 {background:url('../poo-slide/img_005.jpg');}
.slider-item06 {background:url('../poo-slide/img_006.jpg');}
.slider-item07 {background:url('../poo-slide/img_007.jpg');}
.slider-item08 {background:url('../poo-slide/img_008.jpg');}
.slider-item09 {background:url('../poo-slide/img_009.jpg');}
.slider-item10 {background:url('../poo-slide/img_010.jpg');}
.slider-item11 {background:url('../poo-slide/img_011.jpg');}
.slider-item12 {background:url('../poo-slide/img_012.jpg');}
.slider-item13 {background:url('../poo-slide/img_013.jpg');}
.slider-item14 {background:url('../poo-slide/img_014.jpg');}
.slider-item15 {background:url('../poo-slide/img_015.jpg');}
.slider-item16 {background:url('../poo-slide/img_016.jpg');}
.slider-item17 {background:url('../poo-slide/img_017.jpg');}
.slider-item18 {background:url('../poo-slide/img_018.jpg');}
.slider-item19 {background:url('../poo-slide/img_019.jpg');}
.slider-item20 {background:url('../poo-slide/img_020.jpg');}

.slider-item {
    width: 100%; /* 各スライダー全体の横幅を画面の幅いっぱい（100%）にする */
    height:40vh; /* 各スライダー全体の縦幅を画面の高さ */
    background-repeat: no-repeat; /* 背景画像をリピートしない */
    background-position: center; /* 背景画像の位置を中央に */
    background-size: cover; /* 背景画像が.slider-item全体を覆い表示 */
}

/*矢印の設定*/

.slick-prev, 
.slick-next {
    position: absolute;
    z-index: 3;
    top: 25%; /* 矢印の高さ位置 */
    cursor: pointer; /* マウスカーソルを指マークに */
    outline: none; /* クリックをしたら出てくる枠線を消す */
    border-top: 2px solid #fff; /*矢印の色 */
    border-right: 2px solid #fff; /*矢印の色 */
    height: 25px;
    width: 25px;
}

.slick-prev { /* 戻る矢印の位置と形状 */
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next { /* 次へ矢印の位置と形状 */
    right:2.5%;
    transform: rotate(45deg);
}

/* ドットナビゲーションの設定 */

.slick-dots {
    position: relative;
    z-index: 3;
    text-align:center;
    margin:-50px 0 0 0; /* ドットの位置 */
}

.slick-dots li {
    display:inline-block;
    margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px; /* ドットボタンのサイズ */
    height:8px; /* ドットボタンのサイズ */
    display:block;
    border-radius:50%;
    background:#fff; /* ドットボタンの色 */
}

.slick-dots .slick-active button{
    background:orangered; /* ドットボタンの現在地表示の色 */
}

/*========= レイアウトのためのCSS ===============*/
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

a{
  color: #000; /* ページネーションのフォント色 */
}

a:hover,
a:active{
  text-decoration: none;
}

h1{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size:6vw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.wrapper{
  position: relative;
}

/* レスポンシブ画像 */
img {
    width: 90%; /* レスポンシブ画像の幅 */
    height: 240px; /* 各画像の高さ */
    object-fit: cover;
    margin: 0px 20px; /* 画像の位置 */
}

/* 記事一覧 */
.post-home {
    margin-bottom: 3rem; /* 文章とページングの間隔 */
}
.post-title-sub {
    padding-bottom: 10px;
    background-size: 6px 6px;
    margin-bottom: 1.5rem;
}
.post-title-sub h2 {
    background: #fff; /* 白色 */
    padding: 0 0 .5rem;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 2.875rem; /* メイン画像と小見出しの間隔 */
    margin-bottom: 0rem;
    text-align: center;
}
.post-title-sub a {
    color: #949087; /* やや灰色い黄系の色 */
    text-decoration: none;
}
.post-title-sub a:hover {
    color: #605c55;
}
        
/* 記事内部 */
article h3,
article h4,
article h5,
article h6 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 500;
    margin: 3rem 0 1rem;
}
article h3 {
    font-size: 1.5rem;
    border-top: #ccc dotted 2px;
    border-bottom: #ccc dotted 2px;
    padding: .75rem;
    line-height: 1.4;
}
article h4 {
    font-size: 1.5rem;
}
article h5 {
    font-size: 1.375rem;
}
article h6 {
    font-size: 1.25rem;
}
article p {
    margin-bottom: 1rem;
}
article a {
    color: #93d8d0; /* ライトグリーン */
    text-decoration: underline;
}
article a:hover {
    color: #7ac69f; /* 淡いグリーン */
}
article img {
    max-width: 100%;
}

/*
ページ送り　ジャンプ
================================================　*/
.pagination {
    display: flex;
    justify-content: center;
    font-size: 1rem;
    text-align: center;
    margin: 2rem 2.5rem 3rem 3rem; /* ページネーションの余白（上下左右） */
}

.pagination a:hover {
    background: green; /* グリーン色 */
    color: #fff;
}
.pagination a,
.pagination .current {
    border-radius: 50%;
    padding-top: 11px;
    display: inline-block;
    width: 60px;
    height: 40px;
    margin: 0 6px;
}
.pagination .current {
    background: orange; /* オレンジ色 */
    color: #fff; /* 白色 */
}

/*
TICKET（お問い合わせ）
================================================ */
#ticket {
    background-image: linear-gradient(#f5bc2d, #e6551e);
    padding: 6rem 1rem 2rem;
    margin-top: 0rem; /* レスポンシブのメイン画像とフッターの間隔 */
    -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
}

/*
FOOTER（コピーライト）
================================================ */
.footer {
    border-top: 1px solid rgba(255,255,255,0.5);
    padding-top: 2rem;
    text-align: center;
    font-size: 1.25rem;
    color: var(--white);
}
.footer a {
    text-decoration: underline;
}

/*
DESKTOP SIZE
================================================ */
@media (min-width: 600px) {
/* Common */
    h2 {
        font-size: 5rem;
    }
    a:hover {
        color: var(--blue);
    }

/* Header */
    .btn-menu {
        display: none;
    }
    .main-nav {
        width: 100%;
        position: static;
        display: flex;
    }
    .main-nav li {
        margin: 0 0 0 1.5rem;
    }

/*
ぷーの記録（ページトップ画像）
================================================ */
#slide1 {
    height: 50vh; /* 画像の高さ */
}
#slide1 h1 { /* ぷーの記録（ページトップタイトル） */
    font-size: 3.5rem; /* タイトルのフォントサイズ */
}

/* メイン画像の調整 */
img {
    width: 100%;
    height: 240px; /* 各画像の高さ */
    object-fit: cover;
    margin: 0px; /* 画像の位置 */
}

/*
スライダーのためのcss
==========================================================*/
.slider {
    position:relative;
    margin-top: 3rem; /* ページトップとスライド画像の間隔 */
    z-index: 1;
    /* ↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す */
    height: 72vh;/* スライダーの背景画面の縦幅 */
}

/* 矢印の調整 */
.slick-prev, 
.slick-next {
    top: 42%; /* 矢印の高さ位置 */
}
  
/*
ページ送り　ジャンプ
================================================　*/
.pagination {
    display: flex;
    justify-content: center;
    font-size: 1rem;
    text-align: center;
    margin: 1.5rem 3rem 3rem 3rem;
}

#ticket {
    margin-top: 0; /* パソコンのメイン画像とフッターの間隔 */
}
/* Main */
    main {
        width: 68%;
        margin-bottom: 0;
    }

    .main-grid {
        width: 100%;
        margin-bottom: 0;
    }

    .grid {
        gap: 0.75rem .5rem; /* 画像の上下左右間隔 */
        grid-template-columns: repeat(5,1fr);
    }
    .slider-item {
        height:70vh; /* 各スライダー全体の縦幅を画面の高さ */
    }        
}