@charset "UTF-8";
/*基本設定？*/

* {　　　　/*イメージ画像が大きすぎてわかりずらくならないように画面に収まるようにするらしい*/　　
	margin: 0;
  padding: 0;
}

img {　　　　/*imgそのものの大きさを設定*/
	width: 100%;
	height: auto;
}


/*MOBILE ページの設定*/

.body{
  font-size: 16px;
  line-height: 1.5em;
  display: grid;
  grid-template-column: 20px 1fr 20px;
  grid-templet-rows:
            [head] auto
            [nav] auto
            [kiji] auto
            [foot] 200px;
}

/* パーツの配置*/
body > * {
	/*margin-top: 50px;*/
	grid-column: -1 / 2;
}


#header{
    position:fixed;
    top:0;
    margin:0;
    padding:4px;
    width:100%;
    background-color:#ccc;
    z-index:9999;
    height:50px;
    grid-row: head;
    color: red;
    font-size: 30px;
  }

	#modify{
			font-size: 0.5em;
			color: black;
			/*text-align: right;*/
			position: absolute;
			right: 3em;
			bottom: 0px;
	}

  nav {
    top:70px;
    position:fixed;
  	justify-self: stretch;
  	/*align-self: end;*/
  	/*font-size: 20px;*/
    grid-row: nav;
    background-color: lightyellow;
		width: 100%;
		text-align: center;
		font-size: 1.8em;
	  z-index: 10000;
  }

  nav ul {
  	list-style-type: none;
  	padding: 0;
  	display: grid;
		text-align: center;
  	grid-auto-flow: column;
		/*grid-auto-flow: row;*/
  	grid-column-gap: 20px;
  	column-gap: 5px;

  }

  nav a {
  	color: #666666;
  	text-decoration: none;
  	font-size: 12px;
  	font-weight: bold;
  }

  nav a:hover {
  	color: #ef9504;
  }

	.navFake_a{
		color: #666666;
		text-decoration: none;
		font-size: 12px;
		font-weight: bold;
	}

h1 {
  margin-top: 200px;
  grid-row:kiji;
  color:red;
}

h2 {
  grid-row: kiji ;
  color:green;
}
article.dtp {
  margin-top:150px;
  grid-row: kiji;
  grid-column: 2 / 3;
}
article meisi {
  grid-row: kiji;

}
.product article .meisi p span.hilight　{
  background-color: yellow;
}
article img {
  width:300px;
  height:auto;
}
.product article mokuji {
  grid-row: kiji;
}

.product aside prof {
  grid-row:kiji;
}

aside {
	border:solid 1px #dddddd;
	padding: 20px;
	margin-top: 30px;
	margin-bottom: 30px;
	text-align: center;
}
aside ul {
	list-style-type: none;
	padding: 0;
}

.product div meisi {
  grid-row:kiji;
}

.product aside pickup {
  grid-row:kiji;
	background-color: red;
}

.product div order {
  grid-row:kiji;
}

.product aside .menu {
  grid-row:kiji;
}

.prouct flexbox .box-order {
  width:50px;
}

.product figure img {
  width:100px;
  height:100px;
}

.product div.mokuji {
  grid-row:kiji;
  color:blue;
}
article .data1 {
  grid-row: kiji ;
  grid-column: 2 / 3;
}
article .data2 {
  grid-row: kiji ;
  grid-column: 2 / 3;
}

/*パソコン教室*/
article.school1 {

  margin-top:150px;
  grid-row: kiji;
  grid-column: 2 / 3;
}



article .school2 {
  font-size: 30px;
  color:orange;
  grid-row: kiji;
  grid-column: 2 / 3;
}

.product article .school2 h2 {
  font-size: 40px;
  color:orange;
}

.product article .school2 p {
  font-size: 35px;
  color:orange;
}

footer {
  grid-row:foot;
  background-color: rgba(84, 81, 81 ,1);
  color:white;
}


/*blogページの設定*/
.post {
  display: grid;
  grid-template-columns: 20px 1fr 20px;
  grid-template-rows:
            [head] auto
            [nav] auto
            [kiji] auto
						[submenu] auto
            [foot] 150px;

}

.post ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 20px;
  column-gap:  20px;
}



.post article  {
	grid-column: 2 / 3;
	grid-row: kiji;
}

.post div {
	grid-column: 2 / 3;
	grid-row: submenu;
	margin-top:200px;
	height:auto;
}

.post div.aside1 figure img {
	width:100px;
	height:100px;
}

.post aside:first-child img {
	width:120px;
	height:120px;
  border-radius: 50%;
}
/*reku*/



article.reku p{
  margin:20px;
  font-size: 20px;
  border:solid 1px #dddddd;
	padding: 10px;
	margin-top: 30px;
	margin-bottom: 30px;
}


/*　　実装できなかったスライド
#slide {
	position:relative;
}
#slide img {
	position:absolute;
	left:0;
	top:0;
}			いつか使うかも		*/

.Emassege{
	font-size: 0.8em;
	text-align: left;
}

/*フッター*/
.post footer {
  grid-row: foot;
  grid-column: 1 / 4;
	background-color: lightgray;
}




















/* ===== PC版の設定 ===== */
@media (min-width: 768px) {

/* PC版：PRODUCTページの設定*/
*{
    margin:0;
    padding:0;
}

/*body > * {
	margin-top: 3em;
}*/

div{
    height:100px; /* スクロールで挙動を確認するため高さを指定しています。 */
}
.product {
  display: grid;
  grid-template-columns: 20px 1fr 1fr 1fr 20px ;
  grid-column-gap:5%;
  column-gap: 5%;
  grid-template-rows:
            [head] auto
            [nav] auto
            [dtp] auto
            [meisi] auto
            [yobi] auto
            [price] auto
            [panf] 400px
            [order] 500px
            [introduction] 350px
            [foot] 100px;

}

/* PC版：ヘッダー */
#header{
    position:fixed;
    top:0;
    margin:0;
    padding:4px;
    width:100%;
    background-color:#ccc;
    z-index:9999;
    height:50px;
    grid-row: head;
    grid-column: 1 / 6;
}

#modify{
		font-size: 0.5em;
		color: black;
		/*text-align: right;*/
		position: absolute;
		right: 3em;
		bottom: 0px;
}

/* PC版：ナビゲーションメニュー */
nav {

	align-self: center;
	font-size: 25px;
  display: grid;
  grid-row: nav;
  grid-column: 1 / 6;

}

ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 20px;
  column-gap:  20px;
}

/*DTPページの設定*/


.product article.dtp h2 {
  font-size:30px;
  text-align: center;
  margin-bottom: 2em;
  color:black;
}
.product article.dtp {
	margin-top:0;
  display: grid;
  grid-column:  2/ 4;
  grid-row:dtp;
}
.product article.dtp img {
  width: 200px;
  height: 100px;
}

article.dtp p{
  margin:20px;
  font-size: 20px;
  border:solid 1px #dddddd;
	padding: 10px;
	margin-top: 30px;
	margin-bottom: 30px;
}

article.meisi h2 {
	font-size:30px;
  text-align: center;
  margin-bottom: 2em;
  color:black;
}
article.meisi {
  grid-row:meisi;
  grid-column: 2 / 4;

}

article.meisi img{
  text-align: center;
  height: 200px;
  width: 400px;
}

article.meisi p span .zukei {
  background-color: yellow;
}

article.price {
  display: grid;
  grid-column: 2 / 4;
  grid-row:price;
}

article.price h2 {
  font-size:25px;
  text-align: center;
  color:#41c161;
}

article.price p {
font-size:20px;
margin:20px;

}

article.panf {
  display: grid;
  grid-column: 2 / 4;
  grid-row:panf;

}

article.panf h2 {
  text-align:center;
  font-size: 25px;
  color:#41c161;
}

article.panf p{
  margin:20px;
  font-size: 20px;
  border:solid 1px #dddddd;
	padding: 10px;
	margin-top: 30px;
	margin-bottom: 30px;

}

article.panf img{
  text-align: center;
  height: 500px;
  width: 400px;
}

.order {
  grid-row: order ;
  grid-column: 2 / 5;
}
.introduction {
  grid-row: 9  ;
  grid-column: 2 / 5;
}
/*音声起こしページ*/

article.sound2 {
  grid-row: 4;
  grid-column:2/ 4;
  font-size: 20px;
  margin: 20px;
}

article.sound2 h2 {
  font-size:30px;
  text-align: center;
  margin:30px;
  color: black;
}

article.sound2 p {
  margin-bottom: 2em;
}

article.sound2 img{
  text-align: center;
  height: 200px;
  width: 400px;
}

article.mojiokosi {
  grid-column: 2 / 4;
  grid-row :  5;

}

article.mojiokosi h2 {
  font-size: 30px;
  text-align: center;
  color : black;
  margin: 30px;
}

/*データ入力のページ*/
article.data1 {
  grid-row: 3;
  grid-column: 2 / 4;
}
article.data1 h1{
  grid-row: 3;
  grid-column: 2 / 4;
	margin-top:20px;
	color:black;
	text-align: center;
}

article.data2 {
  grid-row: 4;
  grid-column: 2 / 4;
}

/*サイド（目次）の設定*/
/*サイドメニュー*/
aside {
	border:solid 1px #dddddd;
	padding: 20px;
	margin-top: 30px;
	margin-bottom: 30px;
	text-align: center;
}


.product aside.menu {
  grid-column: 4 / 5;
  grid-row: 3 / 4;
}

.mokuji {  /*asideの中の箱*/
  grid-column: 4 / 5;
  grid-row:　3;
  text-align: left;
  background-color: white;
  color: gray;
}

aside.menu p{
  text-align: left;
  margin: 10px;
  color : blue;
}

aside.prof {
  grid-column: 4/ 5;
  grid-row: 4 / 5;
}

aside.pickup {
  grid-column:4 / 5;
  grid-row:  5 / 6;
  font-size: 12px;
}

.order {
  grid-column: 1/ 6;
  grid-row: 6;
  height: 100px;
  text-align: center;
}

/*  パソコン教室ページ */
article.school1 {
grid-column: 2 / 4;
grid-row : 3;
height:　auto;
font-size: 20px;
}

article.school1 h2 {
font-size: 30px;
color:black;
text-align: center;
margin-top:150px;
}
article.school1 p{
font-size: 20px;
margin-top: 100px;
}


article.school2 {
  font-size: 30px;
  grid-row: 4;
  grid-column: 2 / 4;
  line-height: 1.5em;
}

article.school2 h2 {
  text-align: center;
  font-size: 30px;
  color: orange;
margin-top:30px;
margin-bottom: 30px;
}

article.school2 p {
  font-size: 20px;
  color:orange;

}
article.school3 {
grid-column: 2 / 4;
grid-row : 5;
height: auto;
line-height: 2em;
font-size:20px;
}

article.school3 h2{
color:black;
margin:30px;
text-align:center;
font-size:30px;
}

article.school4 {
grid-column: 2 / 4;
grid-row : 6;
height: auto;
line-height: 2em;
font-size:20px;
margin-top:50px;
}


footer {
  grid-row:foot;
  background-color: rgba(84, 81, 81 ,1);
  color:white;
}

.Emessege{
	font-size: 0.8em;
	text-align: left;
}

/*装飾ボックス*/

.introduction {
	grid-column: 1 / 6;
	grid-row: introduction ;

}


.flexbox.box-item h3{
	border: none;
	font-size: 18px;
	color: blue;
	text-align: center;
	margin-bottom: 0;
	margin-top:0;
	background-color: skyblue;
}

.flexbox.box-introduction {
  display: flex;
	display: -webkit-box;
	padding: 5px;
	justify-content: center;
  border-radius: 20px;
  width: 80%;
  height: 250px;

}

.flexbox.box-item {
	padding: 10px;
	color: white;
	border-radius: 5px;
	width: 24%;
  height: 150px;
	position:relative;
	justify-content: center;
}

/*ご注文の流れ*/
.flexbox.box-item img{
	width: 35%;
	height: 35%;
}

/* 写真title */
.flexbox.box-item span  {
	top:70%; ,left: 5px;
	text-align: left;
	font-size: 1.2em;
	font-family:;
	font-weight : bold;
	margin: 0; 0;
	padding: 5px 10px;
	width : 5em;
	background: #ffff00;
	background:-webkit-gradient(linear ,left top ,right top ,from(yellow),to(rgba(255,255,255,0)));
	position: absolute;
}

.flexbox.box-item:nth-child(1) {
	background-color: blue;
	background-blend-mode: lighten;
	margin: 2%;
}

.flexbox.box-item:nth-child(1) p {
	background-color: black;
	margin: 1%;
}

.flexbox.box-item:nth-child(2) {
	background-color: blue;
	background-blend-mode: lighten;
	margin: 2%;
}

.flexbox.box-item:nth-child(2) p {
	background-color: black;
	margin: 1%;
}

.flexbox.box-item:nth-child(3) {
	background-color: blue;
	background-blend-mode: lighten;
	margin: 2%;
}

.flexbox.box-item:nth-child(3) p {
	background-color: black;
	margin: 1%;
}

.flexbox.box-item:nth-child(4) {
	background-color: blue;

	margin: 2%;
}

.flexbox.box-item:nth-child(4) p {
	background-color: black;
	margin: 1%;
}


.introduction h2{
	text-align: center;
	font-size: 30px;
	color: black;
	line-height: 1.5em;
}

/*フッター*/
footer {
  grid-row: 10;
  grid-column:1 / 6 ;
  height: 100px;
}

/*blog ぺーじ*/

.post {
  display: grid;
  grid-template-columns: 20px 1fr 1fr 1fr 20px ;
  grid-column-gap:5%;
  column-gap: 5%;
  grid-template-rows:
            [head] auto
            [nav] auto
            [kiji] auto
						[submenu] auto
            [foot] 150px;

}

/* PC版：ヘッダー */
#header{
    position:fixed;
    top:0;
    margin:0;
    padding:4px;
    width:100%;
    background-color:#ccc;
    z-index:9999;
    height:50px;
    grid-row: head;
    grid-column: 1 / 6;
}

/* PC版：ナビゲーションメニュー */
.post nav {
	align-self: center;
	font-size: 25px;
  display: grid;
  grid-row: nav;
  grid-column: 1 / 6;
}

.post ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 20px;
  column-gap:  20px;
}



.post article  {
	grid-column: 2 / 4;
	grid-row: kiji;
}

.post div {
	grid-column: 4 / 5;
	grid-row: kiji;
	margin-top:200px;
	height:1000px;
}

.post aside1 figure img {
	width:100px;
	height:100px;
}

.post aside:first-child img {
	width:120px;
	height:120px;
  border-radius: 50%;
}

/*レクレーションページの設定*/
article reku img {
	width:100px;
	height:100px;
}

/*こぴぺおｋのスライド*/
.slideshow {
　width: 50%; /* スライドショー幅（PC）*/
　list-style-type: none;
　position: relative;
}

.slideshow > li {
　opacity: 0;
　position: absolute;
　transition: opacity 3s ease-in-out; /*フェード時間・イージング*/
}

.slideshow > li.showSlide{
　opacity: 1;
}

.slideshow > li > img {
　width : 100%;
　height: auto;
}

/*スライド消すならここまで*/



/*フッター*/
.post footer {
  grid-row: foot;
  grid-column:1 / 6 ;
	background-color: lightgray;
}

}