/* IMPORT CSS 6495ed */
@import url("grid.css");

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:block;
    color: #333;
    text-decoration-line: none;
}
/*a:hover { 
    color: #0000ff;
}*/
a img:hover {
	opacity: 0.8;
}
.blueback {
	background-color: #6495ed;
	color: #fff;
	padding: 1rem;
}

.greenback {
	background-color: #1e90ff;
	color: #fff;
	padding: 1rem;
}

.sgreenback {
	background-color: #6495ed;
	color: #fff;
	padding: 0.1rem;
}




.redback {
	background-color: #ff6347;
	color: #fff;
	padding: 1rem;

}

.yellowback {
    background-color: #F2DC7D;
    color: #fff;
    padding: 1rem;
}

.syellowback {
    background-color: #F2DC7D;
    color: #fff;
    padding: 0.1rem;
}


.underline {
	border-bottom: 3px solid #6495ed;
	padding-bottom: 0.5rem;
}
.center {
	text-align: center;
}

/*ヘッダー
-------------------------------------*/
.head {
	display: flex;
    flex-direction: row;
    padding: 0rem 0 0 0;
}

.head h1 { 
    padding: 1rem 0;
}
.telbox {
	margin-left: auto;
	font-size: 2.0rem;
	padding: 1rem 0 0 0;
}
.orifont {
	margin-left: auto;
	font-size: 1.2rem;
	padding: 1rem 0 0 0;
}
.menu {
	background-color: #6495ed;
}
nav ul {
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
	margin-bottom: 0;
}
nav li {
    flex: 1 0 auto;
	margin-bottom: 0;
}
nav li a {
    text-decoration: none;
    text-align: center;
	color: #fff;
}
nav a:hover {
    background-color: #3366FF;    
	color: #fff;
}
/*ここはメニューの帯の高さ*/
nav a {
    padding: 1rem 1rem;
	display: block;
}


/* <!--１個目-->################# Box ############################### */

.boxA:after {content:"";
display: block;
clear: both}

.box1 {float: left;
width :33%}


.box2 {float: left;
width :33%}


.box3 {float: left;
width :33%}
/* ########################## Box ############################### */

/*<!--2個目-->レイアウト見本縦並び############################*/
.box11, .box12, .box13, .box14{
  border: solid 8px red;
  box-sizing: border-box;

  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-size: 60px;
}



/*#############################################*/

/*<!--3個目-->レイアウト見本縦並び############################*/
.box21, .box22, .box23, .box24{
  border: solid 8px red;
  box-sizing: border-box;

  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-size: 60px;
}

.box22, .box23 {
  float: left;
  border-color: yellow; }

/*#############################################*/

/*<!--4個目-->レイアウト見本縦並び############################*/
.box31, .box32, .box33, .box34{
  border: solid 8px red;
  box-sizing: border-box;

  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-size: 60px;
}

.box32, .box33 {
  float: left;
  border-color: yellow;
  width: 25% }

/*#############################################*/

/*<!--5個目-->レイアウト見本縦並び############################*/
.box41, .box42, .box43, .box44{
  border: solid 8px red;
  box-sizing: border-box;

  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-size: 60px;
}

.box42, .box43 {
  float: left;
  border-color: yellow;
  width: 25% }

.box44 {
  float: left;
  width: 50% }
/*#############################################*/

/*<!--6個目-->レイアウト見本縦並び############################*/
.box51,.box52,.box53, .box54{
  border: solid 8px red;
  box-sizing: border-box;

  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-size: 60px;
}

.box52, .box53 {
  float: left;
  border-color: yellow;
  width: 50%;  /** 横幅50% **/
  }
/*#############################################*/

/*<!--7個目-->レイアウト見本縦並び############################*/
.box61,.box62,.box63,.box64,.box65,.box66,.box67,.box68,.box69,.box70,.box71{
  border: solid 8px red;
  box-sizing: border-box;

  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-size: 60px;
}

.box61, .box62, .box63, .box64 {
  float: left;
  border-color: yellow;
  width: 50%;
}

.box65, .box66, .box67 {
  float: left;
  border-color: blue;
  width: 33.3333%; // 3分割
}

.box68, .box69, .box70, .box71 {
  float: left;
  border-color: green;
  width: 25%; // 4分割
  font-size: 30px;
}

// boxAのスタイルは前と同じ
.boxA {
  border: none;
  &:after {
    content: "";
    display: block;
    clear: both;
  }
}
/*#############################################*/

/*<!--8個目-->レイアウト見本縦並び############################*/
.box81,.box82,.box83, .box84{
  border: solid 8px red;
  box-sizing: border-box;

  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-size: 60px;
}

.box82 {
  float: left;
  border-color: yellow;
  width: 300px;
}

.box83 {
  float: none;
  border-color: yellow;
  width: auto;
}

/*<!--9個目-->レイアウト見本縦並び############################*/
.box91,.box92{
  border: solid 8px red;
  box-sizing: border-box;

  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-size: 60px;
}

.box91 {
  float: left;
  border-color: yellow;
  width: 300px;
}

.box92 {
  float: none;
  border-color: yellow;
  width: auto;
}


/*<!--10個目-->レイアウト見本縦並び############################*/
.boxa1,.boxa2{
  border: solid 8px red;
  box-sizing: border-box;

  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-size: 60px;
}

.boxa1 {
  float:left;
  border-color: yellow;
  width: 70%;
}

.boxa2 {
  float: non;
  border-color: yellow;
  width: 30%;
}






/*#############################################*/

@media screen and (min-width: 768px){
/* PC時はMENUボタンを非表示 */
#open,#close {
    display: none !important;
}

#navi {
    display: block !important;
}
}

@media screen and (max-width: 768px){
.head {
	flex-direction: column;
    text-align: left;
    margin-bottom: 20px;
}
.telbox {
	margin-left: 0;
	text-align: center;
}
.head #open,#close  {
    position: absolute;
    top: 20px;
    right: 12px;
    }
nav ul {
	flex-direction: column;
}

nav li {
	padding-top: 0;
	border-bottom: 1px solid #ccc;
	margin-bottom: 0;
}
/* スマホ時はMENUボタンを表示 */
#open,#close  {
    display: block;
    width: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
}
}

/*メイン画像
-------------------------------------*/
.mainimg img {
	width: 100vw;
}

/*メインコンテンツ
-------------------------------------*/
main {
    margin: 5rem 0 5rem 0;
}

/*新着情報
-------------------------------------*/
.news h2 {
    background-color: #6495ed;
	color: #fff;
	padding: 1rem;
}
.news li {
    list-style-type: none;
	border-bottom: 1px solid #ccc;
	padding: 0.5rem 0;
}

/*フッター
-------------------------------------*/
footer {
    background-color: #6495ed;
    padding: 5rem 0;
	color: #fff;
}
footer h5 {
    border-bottom: 2px solid #fff;
}

/*コピーライト
-------------------------------------*/
.copyright {
    text-align: center;
    padding: 1rem 0;
    background-color: #fff;
}
.copyright a {
    color: #000;
    text-decoration: none;
	display: inline-block;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}
#pagetop a {
    display: block;
    background: #6495ed;
    color: #fff;
    width: 50px;
    padding: 10px 5px;
    text-align: center;
}
#pagetop a:hover {
    background: #3366FF;
}
/*パンくずリスト
-----------------------------------*/
.breadcrumb {
    margin: 0 0 1em 0;
    padding: 0;	
}
.breadcrumb li {
    list-style-type: none;
}
.breadcrumb li a {
    display: inline-block;
    color: #959fa5;
}