@charset "UTF-8";

/* りせっとCSS */
* {
    margin: 0;
    padding: 0;
}

/* ↓フォント定義　ここから */

/* Playwrite IN ガイド: CSS クラス 　筆記体に。*/
.playwrite-in-guides-regular {
  font-family: "Playwrite IN Guides", cursive;
  font-weight: 400;
  font-style: normal;
}
/* RocknRoll One: CSS クラス 　たいとるに。*/
.rocknroll-one-regular {
  font-family: "RocknRoll One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* 禅角ゴシックアンティーク 　ほんぶんに。*/
.zen-kaku-gothic-antique-regular {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* 帝国文字　ロゴの文字に。*/
.imperial-script-regular {
  font-family: "Imperial Script", cursive;
  font-weight: 400;
  font-style: normal;
}
/* LXGWマーカーゴシック　とっぷへもどる */
.lxgw-marker-gothic-regular {
  font-family: "LXGW Marker Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* ↑フォント定義ここまで */

/* へったー　ここから */
header {
    display: flex;/* 会社名+なび　よこならび */
    height: 18vh;
    margin-left: auto;
    margin-right: auto;
    font-size: 100%;
}

.haikei_image {
    height: 22vh;/* へったーの高さ　ここで変えれる。 */
    background-image: url(../images/menuPhoto.png);
    background-size: cover;/* coverはmain領域に当てはめてね */
    background-position: center;
    /* ↓画像を半透明にするの　ここから */
    /* 半透明の白をブレンドしてかぶせる */
    background-color: rgba(255,255,255,0.6);
    background-blend-mode: lighten;
    /* ↑画像を半透明にするの　ここまで */
}

.haikei_image nav {
    margin-top: 2%;/* ナビゲーションが垂直に会社名と並ぶ */ 
}

/* 会社ろご+会社おなまえ　まーじ */
.rogo_marge {
    display: flex;
    width: 30%;
    height: 10%;
    margin-top: 0.8%;
    margin-right: auto;
    margin-left: auto;
}

/* 会社ろご（写真） */
.rogoPh {
    width: 32%;
    height: 30%;
    background-repeat: no-repeat;
}

/* 会社もじ */
h1 {
    width: 90%;
    margin-top: 7%;
    margin-bottom: 35%;
    margin-right: 12%;
    font-family: "Imperial Script";
    font-weight: 600;
    font-style: italic;
    font-size: 270%;
    color: green;
}

nav {
    width: 60%;
    margin-right: auto;
    margin-left: auto;
}

nav ul {
    display: flex;/* 項目のよこならび（about contact など） */
    align-items: center;
    list-style-type: none;/* マーカの打ち消し */
    margin-left: -1%;
    margin-top: auto;
    margin-bottom: auto;
    /* background: radial-gradient(rgba(247, 153, 46, 0.534),rgb(244, 222, 184));ぐらでかけれる */
}

nav ul li {
    width: 55%;
    text-align: center;
}

nav ul li a {
    height: 5.9vw;
    text-align: center;
    line-height: 2;
    text-decoration: none;/* 下線の打ち消し */
    color: #202020;
    font-size: 1.6vw;
    font-family: "RocknRoll One";
    /* background-color: blue; */
}

/* ナビとマウスポインタを重ねたらホバーする　ここから */
nav ul li a:hover {
    background-color: rgb(248, 140, 17);
    transition: 0.5s;
}
/* ナビとマウスポインタを重ねたらホバーする　ここまで */

.akari a {
    background-color: rgb(248, 140, 17);
}

/* ↓なびあいこんのへんこう　ここまで */
/* なびの各項目に対してアイコンを入れ、表示を繰り返さないようにした。 */
nav ul li:nth-child(1) {
    background-image: url(../images/top.png);
    background-repeat: no-repeat;
}

nav ul li:nth-child(2) {
    background-image: url(../images/about.png);
    background-repeat: no-repeat;
}

nav ul li:nth-child(3) {
    background-image: url(../images/access.png);
    background-repeat: no-repeat;
}

nav ul li:nth-child(4) {
    background-image: url(../images/contact.png);
    background-repeat: no-repeat;
}
/* ↑なびあいこんのへんこう　ここまで */
/* へったー　ここまで */

/* めいん　ここから */
main {
    padding: 2%;
    font-size: 100%;
    background-image: url(../images/menuPhoto.png);
    background-size: cover;/* coverはmain領域に当てはめてね */
    background-position: center;
    /* ↓画像を半透明にするの　ここから */
    /* 半透明の白をブレンドしてかぶせる */
    background-color: rgba(255,255,255,0.6);
    background-blend-mode: lighten;
    /* ↑画像を半透明にするの　ここまで */
}

h2 {
    text-align: center;
    margin-top: 6%;
    margin-bottom: 2%;
    color: blue;
    font-family: "RocknRoll One";
}

main p {
    width: 37%;
    font-size: 100%;
    letter-spacing: 0.1em;/* 文字間をあける。LaTeXでいうところのzwっぽい */
    margin-right: auto;
    margin-left: auto;
    margin-top: 1%;
    line-height: 2;
    font-family: "Zen Kaku Gothic Antique";
}

/* カフェ外観ふぉと */
.Dogcafe_sotoPh {
    text-align: center;
}
/* カフェ想いふぉと */
.Dogcafe_omoiPh {
    text-align: center;
}

.modoru {
    width: 20%;
    padding: 2%;
    text-align: center;
    margin-top: 5%;
    margin-right: auto;
    margin-left: auto;
    border: 2px solid rgb(62, 181, 62);
    background-color: rgb(62, 181, 62);
    border-radius: 20px;
}


.modoru a {
    display: block;/* リンククリックの親切心　aたぐ */
    text-decoration: none;/* 下線部の打ち消し　aたぐ */
    font-family: "LXGW Marker Gothic";
}
/* めいん　ここまで */

/* ふったー　ここから */
footer {
    background-color: burlywood;
}

footer ul {
    display: flex;
    justify-content: center;
    list-style-type: none;/* マーカー打ち消し */
    background-color: pink;
    gap: 3%; /* ふったーの項目間をあける */
}

footer ul li a {
    text-decoration: none;/* 下線打ち消し */
}

footer address {
    width: 25%;
    margin-top: 1%;
    margin-right: auto;
    margin-left: auto;
}

footer address p {
    line-height: 1;
}

footer small {
    display: block;/* インラインからブロックに変更することで動ける */
    text-align: right;/* 文字の右寄せ */
    width: 100%;/* 動ける範囲を最大にする */
}
/* ふったー　ここまで */