@charset "UTF-8";

/* 共通部分
------------------------------- */
html {
    font-size: 100%;          /* ブラウザのフォントサイズ指定（小、中、大など）に従う。 */
}
body{
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;         /* 行高 */
    color: #432;
}
a {
    text-decoration: none;    /* 文字の装飾：無し（上戦、下線、取り消し線のこと） */
}
img {
    max-width: 100%;          /* 幅の最大値：100%　親要素と同じ幅（PCサイトとスマホ画面により変化） */
}
.wrapper {
    max-width: 1100px;        /* 幅の最大値：1100px　画面が大きくなってもこれ以上にはならない。 */
    margin: 0 auto;           /* ボーダーの外側余白：上下０，左右auto　　autoは要素が中央に配置されるように自動計算される。 */
    padding: 0 4%;            /* ボーダーの内側余白：上下０、左右4% */
}

/* 大きな背景画像 */
.big-bg {
    background-size: cover;
    background-position: center top;
}

/* 見出し */
.page-title {
    font-size: 5rem;                      /* 文字サイズ：ルートの5倍 */
    font-family: 'Philosopher', serif;    /* Google font */
    text-transform: uppercase;            /* テキストの大文字・小文字設定：すべての文字を大文字に変換する */
    font-weight: normal;                  /* 文字の太さ */
}
.sub-title {
    font-size: 1.375rem;                 　/* 文字サイズ：ルートの1.375売 */
    padding: 0 8px 8px;                    /* ボーダーの内側余白：上０、左右8px、下8px */
    border-bottom: 2px #FF934C solid;
    font-weight: normal;
}

/* ボタン */
.button {
    font-size: 1.375rem;
    background: #FFD3B5;
    color: #fff;
    border: 2px solid #FFD3B5;    /* 枠線：線太さ2px、実線、薄いオレンジ */
    height: 60px;
    border-radius: 30px;          /* 角の丸みの半径：高さの半分 */
    padding: 18px 32px;
    transition: background-color 0.5s,color 0.5s,border 0.5s;     /*hoverへの変化時間：背景0.5秒、文字色0.5秒、枠線0.5秒*/
}
.button:hover {
    background: #FFC199;
    color: #FFEFE5;
    border: 2px solid #FFC199;    /* 枠線：線太さ2px、実線、オレンジ */
}
#gallery .contents-blk .button2 {
  margin: 20px auto;
  text-align: center;
  vertical-align: middle;
  font-size: 1rem;
  background: none;
  color: #fff;
  border: 2px solid #fff;
  width: 170px;
  height: 30px;
  border-radius: 15px;          /* 角の丸みの半径：高さの半分 */
  transition: background-color 0.5s,color 0.5s,border 0.5s;     /*hoverへの変化時間：背景0.5秒、文字色0.5秒、枠線0.5秒*/
}
#gallery .contents-blk .button2:hover {
  background: #fff;
  color: #432;
  border: 2px solid #fff;
}

/* iframe */
iframe {
    width: 100%;
}

/* HEADER
------------------------------- */
.page-header {
    display: flex;
    justify-content: space-between;   /* 最初と最後の要素を両端へ配置、その間の要素は均等に配置。 */
}
.logo {
    width: 120px;
    margin-top: 5px;
}
.main-nav {
    display: flex;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-top: 34px;
    list-style: none;
}
.main-nav li {
    margin-left: 36px;
}
.main-nav a {
    color: #432;
}
.main-nav a:hover {
    color: #FF934C;
}

/* FOOTER
------------------------------- */
footer {
    background: #432;
    text-align: center;
    padding: 26px 0;
}
footer p {
    color: #fff;
    font-size: 0.875rem;
}

/* HOME
------------------------------- */
#home {
    background-image: url(./images/main-bg.jpg);
    min-height: 100vh;                            /* 高さの最小値：ビューポートの100% */
}
#home .page-title {
    text-transform: none;                         /* テキストの大文字・小文字設定：そのまま（=変換無し） */
}
.home-content {
    text-align: center;
    margin-top: 10%;
}
.home-content p {
    font-size: 1.125rem;
    margin: 10px 0 42px;
}

/* GALLERY
------------------------------- */
/* 最初テキスト一式の親コンテナ */
#gallery .big-bg {
    background: url(./gallery/images/gallery-bg.jpg) no-repeat center center/cover;    /* 背景画像：gallery-bg.jpg、繰り返し：無し、配置：上下左右中央、配置方法：ボックス全体 */
    position: fixed;          /* 配置方法：固定で最背面 */
    top: 0px;                 /* 上から0px */
    width: 100vw;             /* 幅：ビューポートの100% */
    min-height: 100vh;        /* 高さの最小値：ビューポートの100% */
}
/* 「GALLERY」を含む最初テキスト一式の親コンテナ　の　上面の半透明の白塗り */
#gallery .big-bg:after {
    display: block;
    position: absolute;               /* "#about #page-title"を親要素とした配置方法 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, .7),20%,rgba(255, 255, 255, 0));    /* 白塗りのグラデーション　TOP：70%の白塗り、上から20%まで適用、BOTTOM：0%の白塗り */
    content: "";
}
/* ロゴ＆ナビ */
#gallery .page-header {
  position: relative;       /* 相対位置 */
  z-index: 2;               /* 重ね順：基準面より２個上の層 */
}
/* タイトル */
#gallery .page-title {
    position: relative;       /* 相対位置 */
    z-index: 2;               /* 重ね順：基準面より２個上の層 */
    font-size: 1.25rem;
    text-align: center;
    margin: 0 0 65px;
    text-transform: none;     /* テキストの大文字・小文字設定：そのまま（=変換無し） */
}
#gallery .page-title p {
    font-size: 1.125rem;
    margin: 10px 0 42px;      /* 上10、左右0、下42px */
}
#gallery main {
    margin: 510px 0 0;        /* 上510px、左右０、下０ */
    position: relative;       /* 通常の相対位置で配置 */
    padding: 65px 0 120px;        /* 上65px、左右０、下０ */
    background: #FAF7F0;      /* 背景色：白茶 */
}
/* Photoの親セクション */
#gallery section#photo .wrap-blk {
    display: flex;            /* flexの初期値：row 横並び（左から右）、nowrap 折り返し無し、flex-start 左揃え、stretch 親要素または一番多い子要素の高さに合わせる。 */
    flex-wrap: wrap;          /* 折り返し：内容を折り返して表示 */
}
/* アイコン */
#gallery section#photo .page-title h2:before {
    display: block;
    content: url(./images/camera.svg);
}
/* １つ１つの写真を入れるためのコンテナ */
#gallery section#photo .contents-blk {
  position: relative;         /* 親要素より前面に配置。 */
  width: 33.3333%;            /* 親要素の1/3 */
  height: 300px;              /* 高さ：300px */
}
/* 写真と写真題名を配下とする親コンテナ */
#gallery .text {
  display: flex;                      /* flexの初期値：row 横並び（左から右）、nowrap 折り返し無し、flex-start 左揃え、stretch 親要素または一番多い子要素の高さに合わせる。 */
  flex-direction: column;             /* 配置方向：縦並び */
  box-sizing: border-box;             /* paddingとborderの幅を含める */
  position: absolute;                 /* 親要素を基準とする絶対配置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
  background: rgba(0, 0, 0, 0.7);     /* 70%透明度の黒塗り */
  color: #fff;                        /* 文字色：白 */
  text-align: center;                 /* 文字揃え：中央 */
  justify-content: center;            /* コンテンツの配置：上下中央 */
  opacity: 0;                         /* 要素の透明度０（＝完全な透明） */
}
/* 写真と写真題名を配下とする親コンテナ　マウスオーバー時 */
#gallery .text:hover {
  opacity: 1;                         /* 要素の透明度１（＝内容を完全に表示） */   /* opacityは０～１までの間しか設定できない。 */
  font-size: 1rem;                    /* 文字のサイズ：ルートの1倍 */
  transition: all 0.6s;               /* all：変化する全てのプロパティへ適用 */
}
#gallery .text h2 {
  color: #fff;
}
/* ---------------------------------------写真部分--------------------------------------- */
/* #photo内の"contents-blk"の最初の要素 */
#photo .contents-blk:first-child {
  background: url(./gallery/images/sea.jpg) no-repeat center center / cover;
}

/* #photo内の"contents-blk"の２番目の要素 */
#photo .contents-blk:nth-child(2) {
  background: url(./gallery/images/city.jpg) no-repeat center center / cover;
}

/* #photo内の"contents-blk"の３番目の要素 */
#photo .contents-blk:nth-child(3) {
  background: url(./gallery/images/forest.jpg) no-repeat center center / cover;
}

/* #photo内の"contents-blk"の４番目の要素 */
#photo .contents-blk:nth-child(4) {
  background: url(./gallery/images/mt.jpg) no-repeat center center / cover;
}

/* #photo内の"contents-blk"の５番目の要素 */
#photo .contents-blk:nth-child(5) {
  background: url(./gallery/images/water.jpg) no-repeat center center / cover;
}

/* #photo内の"contents-blk"の最後の要素 */
#photo .contents-blk:last-child {
  background: url(./gallery/images/various.jpg) no-repeat center center / cover;
}
/* ------------------------------------------------------------------------------------- */
/* Footer */
#gallery footer {
  position: relative;       /* 相対位置。fixedの"kv"より上層になる。 */
}

/* MENU
------------------------------- */
#menu {
    background-image: url(../images/menu-bg.jpg);
    min-height: 100vh;
}
.menu-content {
    max-width: 560px;
    margin-top: 10%;
}
.menu-content .page-title {
    text-align: center;
}
.menu-content p {
    font-size: 1.125rem;
    margin: 10px 0 0;
}

.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 6%;
  margin-bottom: 50px;
}

/* PROFILE
------------------------------- */
#profile {
  background: #FAF7F0;
  min-height: 100vh;
}
/* 親コンテナ（navとfooter以外） */
#profile .main-blk {
  width: 50vw;
  margin: 0 auto;           /* main-blkを中央に配置 */
}
#profile .page-title {
  text-align: center;
  margin-top: 70px;
}
#profile .page-title h2 {
  font-size: 2.5rem;
  margin-bottom: 30px;
}
#profile .page-title .profile-photo {
  background: url(./images/profile.jpg) no-repeat center center / cover;
  width: auto;
  height: 50vh;
  margin-bottom: 20px;
}
#profile table.main {
  margin-bottom: 25vh;
}
#profile table.main tr {
  height: 30vh;
}
#profile table.main td.header {
  text-align: left;
  font-size: 1.7rem;
  width: 15vw;
}
#profile table.main td {
  text-align: left;
  font-size: 1.125rem;
  width: 35vw;
}
#profile table.main tr.line,td.line {
  border-bottom: 1px solid #432;
  height: 1vh;
}
#profile table.sub tr {
  height: 4vh;
}
#profile table.sub th p {
  border-bottom: 1px solid #432;
  display: inline-block;
}

/* CONTACT
------------------------------- */
#contact {
    background-image: url(./images/contact-bg.jpg);
    min-height: 100vh;
}
/* 「CONTACT」　の　上面の半透明の白塗り */
#contact:after {
    display: block;
    position: absolute;               /* "#about #page-title"を親要素とした配置方法 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, .7),20%,rgba(255, 255, 255, 0));    /* 白塗りのグラデーション　TOP：70%の白塗り、上から20%まで適用、BOTTOM：0%の白塗り */
    content: "";
}
/* ロゴ＆ナビ */
#contact .page-header {
  position: relative;       /* 相対位置 */
  z-index: 2;               /* 重ね順：基準面より２個上の層 */
}
/* タイトル */
#contact .page-title {
    position: relative;       /* 相対位置 */
    z-index: 2;               /* 重ね順：基準面より２個上の層 */
    text-transform: none;     /* テキストの大文字・小文字設定：そのまま（=変換無し） */
}

/* フォーム */
#contact #form1 {
    position: relative;       /* 相対位置 */
    z-index: 2;               /* 重ね順：基準面より２個上の層 */
}
#form1 div {
    margin-bottom: 14px;
}
label {
    font-size: 1.125rem;
    margin-bottom: 10px;
    display: block;
}
input[type="text"],
input[type="email"],
textarea {
    background: rgba(255,255,255,.5);
    border: 1px #fff solid;
    border-radius: 5px;
    padding: 10px;
    font-size: 1rem;
}
input[type="text"],
input[type="email"] {
    width: 100%;
    max-width: 240px;
}
textarea {
    width: 100%;
    max-width: 480px;
    height: 6rem;
}
input[type="submit"] {
    cursor: pointer;
    line-height: 1;
}

/* SNS */
#sns {
    background: #FAF7F0;
    padding: 4% 0;
}
#sns .wrapper {
    display: flex;
    justify-content: space-between;
}
#sns .sub-title {
    margin-bottom: 30px;
}
#sns .in-the-making {
  width: 280px;
  height: 315px;
  line-height: 315px;
  text-align: center;
  background: rgba(67,32,0,.1)    /* 10%の透明度の茶塗り */
}
.sns-box {
    width: 30%;
}

/* モバイル版
------------------------------- */
@media (max-width: 600px) {
    .page-title {
        font-size: 2.5rem;
    }
    .page-header {
        flex-direction: column;
        align-items: center;
    }

    /* HEADER */
    .main-nav {
        font-size: 1rem;
        margin-top: 10px;
    }
    .main-nav li {
        margin: 0 20px;
    }

    /* HOME */
    .home-content {
        margin-top: 20%;
    }

    /* GALLERY */
    #gallery .page-title {
        margin-top: 10%;
    }
    /* 各写真を含んだコンテナ */
    #gallery section {
        padding: 30px 0 0;
    }
    #gallery section#photo .contents-blk {
      width: 50%;
      height: 200px;
      margin: 0;
    }
    #gallery section#photo .contents-blk .text {
      padding: 15px;
    }
    #gallery section#photo .contents-blk .text h2 {
      font-size: 1.2rem;
    }
    #gallery section#photo .contents-blk .text p {
      font-size: 1.0rem;
    }
    #gallery .contents-blk .button2 {
      width: 130px;
    }


    /* MENU */
    .menu-content {
        margin-top: 20%;
    }

    /* PROFILE */
    /* 親コンテナ（navとfooter以外） */
    #profile .main-blk {
      width: 90vw;
    }
    #profile .page-title .profile-photo {
      height: 30vh;
    }
    #profile table.main td.header {
      width: 30vw;
    }
    #profile table.main td {
      width: 60vw;
    }

    /* CONTACT */
    #contact .page-title {
        margin-top: 40px;
    }

    /* フォーム */
    input[type="text"],
    input[type="email"],
    textarea {
        max-width: 100%;
    }

    /* SNS */
    #sns .wrapper {
        flex-direction: column;
    }
    .sns-box {
        width: 100%;
    }
    .sns-box {
        margin-bottom: 30px;
    }
}