@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;
}
/* カイセイデコル　メニュー品目 */
.kaisei-decol-regular {
  font-family: "Kaisei Decol", serif;
  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: 46.5%;
    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";
}

span {
    color: red;
    font-weight: 600;
}
/* めにゅーひょう　ここから */
/* きょうつう 　ここから*/
/* メニュー品目*/
.hinmoku {
    font-family: "Kaisei Decol";
    font-weight: 700;
    text-align: center;
    font-size: 120%;
}
/* 価格と円のまーじ */
.kakakuen {
    display: flex;
    width: 90%;
    align-items: flex-end;/* 価格と円を下ぞろえする */
}
/* 価格 */
.kakaku {
    font-family: "Kaisei Decol";
    font-style: italic;
    margin-right: auto;
    color: red;
    font-size: 250%;
    font-weight: 700;
    text-align: right;
    width: 70%;
}
/* 円 */
.en {
    width: 30%;
    font-family: "Kaisei Decol";
    font-weight: 700;
    margin-left: auto;
}
.boxPh {
    width: 61%;
}
/* きょうつう 　ここまで*/
/* 複数のメニューのまーじ */
.menu_marge1 {
    display: flex;
    align-items: stretch;/* たくさんある子要素の垂直方向の配置 */
    justify-content: space-around;/* spacearoundは、均等配置 */
    flex-wrap: wrap;/* たくさんある子要素の改行 */
}

.menu_marge2 {
    display: flex;
    align-items: stretch;/* たくさんある子要素の垂直方向の配置 */
    justify-content: space-around;/* spacearoundは、均等配置 */
    flex-wrap: wrap;/* たくさんある子要素の改行 */
}

.menu_marge3 {
    display: flex;
    align-items: stretch;/* たくさんある子要素の垂直方向の配置 */
    justify-content: space-around;/* spacearoundは、均等配置 */
    flex-wrap: wrap;/* たくさんある子要素の改行 */
}
.box {
    width: 19.7%;
    margin-top: 4%;
    /* 半透明の白をブレンドしてかぶせる */
    background-color: rgba(255,255,255,0.6);
    background-blend-mode: lighten;
    /* ↑画像を半透明にするの　ここまで */
}
/* めにゅーひょう　ここまで */

.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%;/* 動ける範囲を最大にする */
}
/* ふったー　ここまで */