﻿/******************************************************/
/*                                                    */
/* メインと再度メニューの編集                         */
/*                                                    */
/******************************************************/
/* 全体(デスクトップPCとスマホ)に適用するCSS */
.wrapper
{
	width: 980px ;
	margin: 0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
	padding: 5px ;		/* 上下左右の余白を0にしておく */
}
.container
{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr auto;
	grid-template-rows:  781px;
/*	background: #f7f5ff; */
/*	background: url("../images/h/h2-back.jpg");*/
}
.colam
{
	grid-column: 1 / 13;
	grid-row: 1 / 2;
	margin: 0;
	padding: 5px 0 5px 0;
	margin: 0;
}
.colam-box1
{
	display: inline;
}
.colam-box2
{
	display: none;
}

@media screen and ( max-width:769px )
{
	.wrapper
	{
		width: 97%;
		margin: 0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
		padding: 5px ;		/* 上下左右の余白を0にしておく */
	}
	.container
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		background: #f7f5ff;
	}
	.colam
	{
		grid-column: 1;
		grid-row: 1;
		margin: 0;
		padding: 2px 0 2px 0;
	}
	.colam-box1
	{
		display: none;
	}
	.colam-box2
	{
		display: inline;
	}
	.colam-box2 img
	{
		width: 100%;
		height: auto;
	}
}
