@charset "utf-8";
/* ここから body 部の display grid*/
body {
    /* font-size: 1rem; */
    margin: 0 auto;
    min-height: 100vh;
    display: grid;
    grid-template:
        /* grid 内で、同じ area 名は連続した四角形になっている事 */
        /* L字型や、離れた所のあるとダメ */
        /* 右の値 auto 1fr px は高さ */
        "logo-1    title-1   title-1   title-1  " auto
        "main-menu main-menu main-menu main-menu" auto
        "pan-kuzu  pan-kuzu  pan-kuzu  company  " auto
        "imo-5     imo-5     imo-5     imo-5    " auto
        "sub-menu  sub-menu  main      main     " 1fr
        "ichiran   ichiran   ichiran   ichiran  " auto
        "footer    footer    footer    footer   " 80px
        /* 下の / より先の値 px 1fr は幅 */
       / 70px      120px     1fr        1fr ;
       /*　gap は area と area の間を指定した量だけ開ける */
       /* gap: 3px; */
}
logo-1 {
    grid-area: logo-1;
    /* background-color: pink; */
    margin: 0 0 0 10px;
}
.logo {
    display: grid;
    /* logo 画像を中央に寄せる */
    place-content: center;
}

title-1 {
    grid-area: title-1;
    /* background-color:  rgb(208, 255, 0); */
    padding: 0 0 0 10px;
}
title-1 h1{
    font-size: 3.5vw;
    margin: 0 0 0 3px;
}

main-menu {
    grid-area: main-menu;
    /* background-color: aqua; */
    text-align: center;
}
pan-kuzu {
    grid-area: pan-kuzu;
    background-color: rgb(193, 215, 249);
    text-align: left;
    margin: 0 0 5px 10px;
    padding: 0 0 0 10px;
}
company {
    grid-area: company;
    background-color: rgb(193, 215, 249);
    text-align: right;	
    margin: 0 10px 5px 0;
    padding: 0 10px 0 0;
}
imo-5 {
    grid-area: imo-5;
    width: 98%;
    /* background-color: rgb(129, 241, 55); */
    margin: 0 auto;
}
sub-menu {
    grid-area: sub-menu;
    /* background-color: rgb(248, 165, 57); */
    text-align: center;	
}
main {
    grid-area: main;
    /* background-color: rgb(129, 241, 55); */
    margin: 0 10px 0 5px;
}
ichiran-hyo {
    grid-area: ichiran;
    margin: 0 10px 0 10px;
}
footer {
    grid-area: footer;
    background-color: rgb(170, 200, 244);
    text-align: center;
    margin: 5px 0px 0px 0px;
    padding: 20px 0px 0px 0px;
    /* width: 90%; */
}
/* ここまで body 部の display grid*/

/* ここから .m-menu 部の記述 */
.m-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, 125px);
    grid-template-rows: auto;
    justify-content: center;
}

.m-menu li {
    background-color: rgba(1, 51, 252);
    display: inline-block;
    width: 118px;
    height: 52px;
    margin: 5px 5px 0px 5px;
    text-align: center;
    /* 四隅の角を丸くする */
    border-radius: 7px;
}

.m-menu a {
    display: block;
    font-size: 14px;
    color: #fff;
    margin: 0px 5px 0px 5px;
    padding: 3px 0px 3px 0px;
    /* 下線を消す */
    text-decoration: none;
}

.m-menu a:hover {
    color: yellow;
    font-weight: bold;
}
/* ここまで .m-menu 部の記述 */

/* ここから会社名と住所 */
.c-name {	
	font-family : courier new,courier;	/* フォントの種類を明朝系にする */
    font-size: 1.9vw;
	font-weight : bold; 
}
.c-adress {
	font-family : courier new,courier;	/* フォントの種類を明朝系にする */
    font-size: 1.8vw;
}
.lang_menu {
    display: grid;
    /* background-color: rgb(129, 241, 55); */
    grid-template-columns: repeat(8, 130px);
    grid-template-rows: auto;
    justify-content: center;
    margin: 0 5px 0 5px;
}
.lang_menu a {
    display: block;
    font-size: 15px;
    background-color: rgb(170, 244, 221);
    color: #000;
    text-align: center;
    /* margin: 5px 5px 5px 5px; */
    /* padding: 3px 0px 3px 0px; */
    border-radius: 5px;
    /* 下線を消す */
    text-decoration: none;
}
.lang_menu a:hover {
    color: red;
    font-weight: bold;
}
/* ここから sub-menu 部の記述 */
sub-title {
    background-color: rgb(55, 247, 227);
    display: block;
    font-size: 15px;
    font-weight: bold;
    color: #000;
    border-radius: 5px;
    margin: 3px 3px 3px 3px;
}
.sub-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, 200px);
    grid-template-rows: auto;
    justify-content: center;
}

.sub-menu p {
    background-color: rgba(1, 51, 252);
    display: block;
    margin: 5px 5px 0px 15px;
    /* 角の丸め */
    border-radius: 5px;
}

.sub-menu a {
    display: block;
    font-size: 14px;
    color: #fff;
    margin: 5px 5px 5px 5px;
    /* 下線を消す */
    text-decoration: none;
}
.sub-menu a:hover {
    color: yellow;
    font-weight: bold;
}
/* ここまで sub-menu 部の記述 */

h2.hyodai {
	font-size : 25px;
/*	margin : 10px ;  */
	text-align : center ;
}
h3 {
	font-size : 22px;
	width : 99%;
	height : auto ;
	padding : 3px 0px 3px 10px;
	background-color : #0033aa;
	color : #ffffff;
    /* 角丸にする */
	border-radius : 3px;
    /* margin を、左右の高さを合わせて為に、あえて付ける */
    margin:  3px 0 0 0;			
}
h4 {
/*	background-color : #00ff00 ; 	/*リンクにマウスが乗ったら背景色を変更する*/
	font-size : 16px;				/*文字サイズ*/
	margin : 0px 0px 0px 10px; 		/*左マージンを-*/
}

p {
/*	width : 660px;		/*幅の指定*/
	margin : 10px;		/*上下左右に10pxのマージン（ここに背景色は付かない）*/
	text-indent : 1em;	/*最初の1文字を字下げするインデント幅*/
	background-color : #ffffff;		/*内容全体の背景色*/
}

ul {
  padding-left:0;
}

ul li {
  list-style:none;
  margin: 0 0 0 10px;
}

.all_cel {
    margin: 0 0 0 5px;
}
button {
    background-color: rgb(1, 51, 252);
    border: none;
    font-size: 25px;
    color: white;
    margin: 20px 2px;
    padding: 8px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    border-radius: 20px;
}
button:hover {
    color: yellow;
    font-weight: bold;
}

/* ここから表示メディア幅が狭くなった時の表示 */
 @media screen and (max-width: 700px) {
    body {
        grid-template:
        "logo-1    title-1   title-1  " auto
        "main-menu main-menu main-menu" auto
        "imo-5     imo-5     imo-5    " auto
        "sub-menu  sub-menu  sub-menu " auto
        "main      main      main     " 1fr
        "...       ...       ...      " 3px   
        "pan-kuzu  pan-kuzu  company  " auto
        "ichiran   ichiran   ichiran  " auto
        "footer    footer    footer   " 120px
        / 70px    1fr         1fr ;
        gap : 0;
    }
    .logo {
        display: grid;
        /* logo 画像を中央に寄せる */
        place-content: left;
        /* background-color: rgb(170, 200, 244); */
    }
    title-1 {
        /* background-color:  rgb(208, 255, 0); */
        padding: 0 0 0 10px;
    }
    title-1 h1 {
        font-size: 5.5vw;
        padding: 0 0 0 5px;
    }
    
    /* ここから会社名と住所 */
    pan-kuzu {
        grid-area: pan-kuzu;
        /* background-color: rgb(248, 165, 57); */
        text-align: left;
        margin: 0 0 5px 0;
        padding: 0 0 0 10px;
        background-color: rgb(193, 215, 249);
    }
    company {
        grid-area: company;
        /* background-color: rgb(248, 165, 57); */
        text-align: right;	
        margin: 0 0 5px 0;
        background-color: rgb(193, 215, 249);
    }
    .c-name {	
        font-family : courier new,courier;	/* フォントの種類を明朝系にする */
        font-weight : bold; 
        font-size : 15px;
    }
    .c-adress {
        font-family : courier new,courier;	/* フォントの種類を明朝系にする */
        font-size : 13px;
    }
    
    footer {
        margin: 10px 0px 0px 0px;
        padding: 20px 0px 0px 0px;
        text-align: center;
        background-color: rgb(193, 215, 249);
    }

}