@charset "utf-8";

/* 全体の設定 */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

section {
	width: 90%;
	padding-top: 20px;
	padding-bottom: 40px;
	margin: 40px auto 0;
	border: 1px dashed #ccc;
	text-align: justify-all;
}

/* bodyの初期スタイル調整 */

body {
	font-size: 16px;
	line-height: 1.5;
	font-family: 'Noto Sans JP', 'Open Sans', sans-serif;
	font-weight: 400;
	color: #333;
	background-color: #fff;
}

/* 初期スタイル調整 */

h1,
h2,
h3 {
	margin-top: 0;
	line-height: 1.5;
	letter-spacing: 0.2em;
	text-align: center;
}

h3 {
	color: #85a7cc;
	font-size: 14px;
	margin-bottom: 20px;
}

p {
	margin-top: 0;
	margin-bottom: 1.5em;
	text-align: justify;
}

address {
	font-style: normal;
}

a {
	color: #666;
	text-decoration: none;
}

a:hover, a:focus {
	color: #000;
	text-decoration: none;
}

ul {
	margin: 1em 0;
	padding: 0;
	list-style: none;
}

ol {
	list-style: upper-roman inside;
}

img {
	width: 100%;
	height: auto;
	margin-bottom: 0.5em;
}

/* h1への指定 */
.h1-title {
	font-size: 20px;
	text-align: left;
}

/* h2への指定 */
.h2-title {
	position: relative;
	text-transform: uppercase;
	z-index: 100;
}

/* 疑似要素を使った◆の指定 */
.h2-title::before {
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	background: #a5d1ff;
	position: absolute;
	left: 50%;
	margin-left: -20px;
	transform: rotate(45deg);
	z-index: -100;
}

/* text関連の指定 */
.text-center {
	text-align: center;
}

.text-lead {
	font-weight: 700;
}

/* ボタン共通(べ－ス)の設定 */
.btn {
	display: block;
	padding: 20px 35px;
	margin: 0 auto;
	color: #fff;
	background: #999;
	border-radius: 10px;
	border-bottom: 4px solid #ddd;
}

.btn:hover, .btn:focus {
	background: rgba(0,0,0,0.7);
	cursor: pointer;
}
.btn:active {
	border-bottom: none;
	transform: translateY(4px);
}

/* コンテンツを格納するスタイル */
.inner {
	padding: 0 15px;
	margin: 0 auto;
}
.inner2 {
	margin: 0 auto;
}

/* PC用のスタイル */
@media screen and (min-width:768px) {
	.inner {
		max-width: 1200px;
	}
	
}

/* PCとモバイルでの表示に関するスタイル */
.sp-only {
	display: block;
}

.pc-only {
	display: none;
}
#pc_only {
	display: none;
}

/* PC用のスタイル */
@media screen and (min-width:768px) {
	.sp-only {
		display: none;
	}
	.pc-only {
		display: block;
	}
	#pc_only {
		display: block;
	}
}

/* headerのスタイル */
.header {
	position: fixed;
	top: 0px;
	width: 100%;
	padding: 10px;
	background: rgba(255,255,255,0.9);
	z-index: 200;
}
.header-alt {
	position: relative;
	top: 0px;
	width: 100%;
	padding: 10px;
	background: rgba(255,255,255,0.9);
	z-index: 200;
}

/* サイトロゴとナビゲーションの並び */
.header-logo-menu {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.logo-area a {
	flex-basis: 80%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

@media screen and (min-width:768px) {
	.header-logo-menu .logo-area {
		display: inline-block;
		width: 40%;
		padding: 10px 10px 0;
	}
}
.logo-area img {
	width: 90%;
	height: auto;
}

.companyname {
	font-size: 14px;
	font-weight: 900;
	font-family: 'Noto Serif JP', "Roman", "arial unicode ms", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Lucida Grande", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", sans-serif;
	line-height:1.1;
	margin-left: 5px;
}

@media screen and (min-width:768px) and (max-width:959px) {
	.companyname {
		display: none;		
	}
}

/* ハンバーガーメニューのcss */
.gnav-toggle {
	position: relative;
	margin-top: 12px;
}

.gnav-hidden {
	display: none;
}

#gnav-open {
	display: inline-block;
	width: 40px; /* 30pxから変更 */
	height: 30px; /* 22pxから変更 */
	vertical-align: middle;
}

#gnav-open span,
#gnav-open span::before,
#gnav-open span::after {
	content: '';
	position: absolute;
	height: 4px; /* 3pxから変更 */
	width: 33px; /* 25pxから変更 */
	border-radius: 4px; /* 3pxから変更 */
	background: #191970;
	display: block;
	cursor: pointer;
}

#gnav-open span::before {
	bottom: -10px; /* -8pxから変更 */
}

#gnav-open span::after {
	bottom: -20px; /* -16pxから変更 */
}

#gnav-close {
	display: none;
	position: fixed;
	z-index: 90;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0;
	transition: 0.3s ease-in-out;
}

#gnav-input:checked ~ #gnav-close {
	display: block;
	opacity: 0.5;
}

#gnav-input:checked ~ #gnav-content {
	transform: translateX(0%);
	box-shadow: 6px 0 25px rgba(0,50,0,0.15);
}

#gnav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 300;
	width: 70%;
	max-width: 300px;
	height: 100%;
	background: rgba(0,50,0,0.8);
	transition: 0.3s ease-in-out;
	transform: translateX(-105%);
}

.gnav-menu {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 10px;
	text-transform: uppercase;
}

.gnav-item {
	border-bottom: 2px dotted #eee;
	margin: 4px;
	padding-bottom: 10px;
}
.gnav-item:last-of-type {
	border-bottom: none;
	margin: 0px;
	padding-bottom: 0;
}

.gnav-item a, .gnav-item .other-top {
	color: #fff;
	font-size: 12px;
	display: block;
	width: 200px;
	text-align: center;
}

.gnav-item > a::first-line, .other-top::first-line, .gnav-item > span {
	font-size: 16px;
	font-weight: bold;
}

/* ハンバーカーメニューのドロップダウン　*/

ul.sub-menu {
	display: inline-block;
	position: relative;
}
ul.sub-menu li {
	position: absolute;
	cursor: pointer;
	top: 0px;
	left: 0px;
	transition: top 0.7s;
	padding-bottom: 10px;
}
ul.sub-menu li:last-of-type {
	padding-bottom: 20px;
}
li.other a {
	color: rgba(255,255,0,0.8);
	text-align: right;
	border-bottom: 0.5px dotted rgba(255,255,0,0.8);
}
li.other a::first-line {
	font-size: 14px;
	font-weight: bold;
}
ul.sub-menu li.other-top {
	position: relative;
	z-index: 310;
}
ul.sub-menu li.other {
	visibility: hidden;
}
ul.sub-menu li.other1 {
	z-index: 305;
}
ul.sub-menu li.other2 {
	z-index: 304;
}
ul.sub-menu li.other3 {
	z-index: 303;
}
ul.sub-menu li.other4 {
	z-index: 302;
}
ul.sub-menu li.other5 {
	z-index: 301;
}
ul.sub-menu li.other6 {
	z-index: 300;
}
ul.sub-menu li.other7 {
	z-index: 299;
}
ul.sub-menu:hover li.other1 {
	top: 100%;
	visibility: visible;
}
ul.sub-menu:hover li.other2 {
	top: 200%;
	visibility: visible;
}
ul.sub-menu:hover li.other3 {
	top: 300%;
	visibility: visible;
}
ul.sub-menu:hover li.other4 {
	top: 400%;
	visibility: visible;
}
ul.sub-menu:hover li.other5 {
	top: 500%;
	visibility: visible;
}
ul.sub-menu:hover li.other6 {
	top: 600%;
	visibility: visible;
}
ul.sub-menu:hover li.other7 {
	top: 700%;
	visibility: visible;
}
li.other-top::after {
	content: '';
    width: 8px;
    height: 8px;
    margin-top: -5px;
    border-top: solid 3px rgba(255,255,0,0.8); 
    border-right: solid 3px rgba(255,255,0,0.7); 
    transform: rotate(135deg);
    position: absolute;
    top: 50%;
    right: 20px;
}

/* PCメニューの表示　css */
@media screen and (min-width:768px) {
	.header-logo-menu nav {
		width: 70%;
	}
	.gnav-menu {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		position: relative;
		color: #333;
		text-align: center;
		padding-right: 5%;
		margin: 0 40px 0 0;
	}
		
	.gnav-menu li.gnav-item {
		display: block;
		width: 20%;
		margin: 0;
		padding: 0;
		text-align: center;
		border-bottom: none;
	}
	
	.gnav-menu a {
		display: block;
		width: 100%;
		padding: 10px;
		color: #333;
	}
	
	.gnav-item > a {
		pointer-events: none;
	}
	.gnav-menu .gnav-item:last-child > a,
	.gnav-menu .gnav-item:first-child > a,
	.gnav-menu .gnav-item:nth-child(3) > a {
		pointer-events: auto;
	}
	.gnav-item:hover {
		background: rgba(255,182,193,0.6);
	}
	
	.gnav-child a {
		font-size: 0.9em;
		font-weight: 600;
		padding: 10px 20px;
		color: #fff;
		text-align: justify;
	}
	
	.gnav-child li {
		margin-bottom: 12px;
	}
	.gnav-grandchild  {
		margin-bottom: 0;
	}
	
	.gnav-child a:hover {
		color: #333;
	}
	
	.gnav-child {
		width: 0;
		position: absolute;
		*z-index: 9999;
		top: 76%;
		left: -25%;
		/*top: 100%;
		left: 0%;*/
		color: #333;
		background: rgba(255,182,193,1);
		overflow: hidden;
		transition: 0.5s;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	
	.child-2 li {
		width: 50%;
	}
	
	.child-3 li {
		width: 33%;
	}
	
	.gnav-menu .gnav-item:nth-child(4) li {
		margin-top: 2em;
		margin-bottom: 1em;
	}
	
	.gnav-child li {
		position: relative;
	}	
	.gnav-child a::after {
		content: '';
    	width: 80%;
		height: 8px;
		border-bottom: 2px solid;
		border-right: 20px solid;
		transform: skew(45deg);
		position: absolute;
		right: 15px;
		bottom: 5px;
  	}
	
	.gnav-item:hover .gnav-child {
		width: 120%;
	}
	
	.gnav-item:hover ul li a{
		white-space: nowrap;
	}
	
	.gnav-grandchild {
		width: 100%;
		display: flex;
		flex-direction: column;	
	}
	
	.gnav-grandchild li {
		width: 100%;
		display: block;
	}
	
	.gnav-grandchild h4 {
		color: #333;
		text-align: center;
	}
}

/* ---　回り込みのcss ---*/

.topic-content img {
	float: right;
}

figure.right {
	float: right;
	padding-bottom: 1em;
	margin-left: 1em;
	margin-bottom: 1em;
}

@media screen and (min-width:768px) {
	figure.right {
		padding-left: 1em;
	}
}

figure.left {
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}

figure.stop, .stop {
	clear: left;
}
figure.stop2, .stop2 {
	clear: both;
}
/* ---　回り込みのcss END ---*/

/* メインビジュアルsectionのスタイル */
.mv-area {
	width: 100vw;
	height: 90vh;
	margin-top: 110px;
	margin-bottom: 10px;
	background-size: contain;
	background-position: center center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;
}

/* --- 背景の指定 ------------------------------------------- */
.mv-area .bgImg {
	position   : absolute;
  	top        : 0;
  	left       : 0;
  	bottom     : 0;
  	right      : 0;
  	opacity    : 0;
  	animation  : bgAnime 45s infinite;   /* 9画像 × 各5s = 45s */
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.mv-area .src1 {
  	background-image : url(../photo/img7.jpg);
	background-size: cover;	/* 背景画像　提灯 */
}
.mv-area .src2 {
  	background-image : url(../photo/img1.jpg);
	background-size: cover;  /* 背景画像　川口 */
  	animation-delay  : 5s;
}
.mv-area .src3 {
  	background-image : url(../photo/img2.jpg);
	background-size: cover;  /* 背景画像　神姫クレーン */
  	animation-delay  : 10s;
}
.mv-area .src4 {
  	background-image : url(../photo/img3.jpg); 
	background-size: cover;  /* 背景画像　テック現場 */
  	animation-delay  : 15s;
}
.mv-area .src5 {
  	background-image : url(../photo/img4.jpg);
	background-size: cover;  /* 背景画像　安全大会 */
	animation-delay  : 20s;
}
.mv-area .src6 {
  	background-image : url(../photo/img5.jpg);
	background-size: cover;  /* 背景画像　タブレット */
	animation-delay  : 25s;
}
.mv-area .src7 {
  	background-image : url(../photo/img6.jpg);
	background-size: cover;  /* 背景画像　台車 */
	animation-delay  : 30s;
}
.mv-area .src8 {
  	background-image : url(../photo/img8.jpg);
	background-size: cover;  /* 背景画像　クレーン */
	animation-delay  : 35s;
}
.mv-area .src9 {
  	background-image : url(../photo/img9.jpg);
	background-size: cover;  /* 背景画像　マックス施工現場 */
	animation-delay  : 40s;
}
@keyframes bgAnime {
   	0% { opacity: 0; }
   	5% { opacity: 1; }
  	25% { opacity: 1; }
  	30% { opacity: 0; }
 	100% { opacity: 0; }
}

/* 	メインビジュアルタイトルのスタイル */
.mv-title {
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	text-shadow: 3px 3px 6px #333;
	margin-bottom: 20px;
	padding: 0 2em;
	max-width: 90%;
	z-index: 11;
}

@media screen and (min-width:768px) {
	.mv-area {
		width: 100%;
		height: 600px;
	}
	
	.mv-title {
		margin-top: 90px;
		text-align: center;
		font-size: 28px;
	}
}

/* sns sectionのレイアウト */
.sns-area {
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
	background-color: #fff;
	margin: 5px auto 0;
	padding: 5px 0 0;
	width: 90%;
}
.evessa-content {
	display: flex;
	flex-direction: row;
	width: 80%;
	margin-right: 2em;
	flex-wrap: nowrap;
	align-items: flex-end;
}
.evessa-content > img {
	width: 50%;
	/*height: 40%;*/
}

.recruit {
    margin: 0 2em 3em auto;
}

.recruit > img {
    margin: 0 auto;
    width: 30%;
}

.sns-content {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.sns {
	width: 50px;
	height: 50px;
	margin: 0 6px 0;
}
.sns img {
	width: 100%;
}
.rss {
	width: 100px;
	height: 40px;
	margin: 0 6px 0;	
}
.rss a {
	width: 100%;
	color: #ff9933;
}
@media screen and (min-width:481px) and (max-width:767px) {
	.evessa-content > img {
		width: 30%;
	}
    
	.evessa-content {
		margin-top: 1em;
	}
    
    .recruit {
        margin: 0 auto;
    }

    .recruit > img {
        margin: 0 auto;
        width: 30%;
    }
}
@media screen and (min-width:768px) {
	.sns-area {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: nowrap;
	}
	.evessa-content {
		flex-basis: 28%;
	}
	.evessa-content > img {
		width: 25%;
	}
    .recruit {
        margin: 0 auto;
    }

    .recruit > img {
        margin: 0 auto;
        width: 25%;
    }
    
	.sns-content {
		flex-basis: 82%;
		justify-content: flex-end;
	}
}


/* コンテンツsectionのスタイル */
.content-area {
	background-color: #fff;
}

/* コンテンツリスト(ul) */
.content-menu {
	display: flex;
	flex-wrap: wrap;
}

/* コンテンツアイテム(li) */
.content-item {
	flex: 40%;
	text-align: center;
	padding: 20px 20px 0;
	margin: 5px;
	background: #e3fef1;
	border: 3px solid #f5f5dc;
	border-radius: 10px;
}

.content-item:hover {
	border: 3px solid #527acc;
	background: #fff;
}

/* コンテンツアイコン画像 */
.content-item img {
	width: 120px;
	margin: 0 auto;
}
#big-picture {
	width: 180px;
	height: 120px;
}

@media screen and (min-width:768px) {
	/* コンテンツリスト(ul) */
	.content-menu {
	flex-wrap: nowrap;
	max-width: 1200px;
	margin: 0 auto;
	}
	/* コンテンツアイテム */
	.content-item {
		flex: 1;
	}
}

/* コンテンツリンク(a) */
.content-item a {
	display: block;
}

@media screen and (min-width:768px) {
	.h1-title {
		margin: 0 auto;
		width: 60%;
	}
		
}

/* サービスsectionのスタイル */
.service-area {
	background-color: #f0f0f0;
}

/* サービスメニュー(ul) */
.service-menu {
	display: flex;
	flex-direction: column;
}

/* サービスアイテム(li) */
.service-item {
	background-color: #ff9;
	margin-bottom: 30px;
	border: solid 4px #ccc;
	height: 70px;
	position: relative;
}

.service-item a {
	color: #000;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0.5em 4em 0.5em 0.5em;
}

.service-item:hover {
	border: solid 4px #32cd32;
}

#crane {
	background: #ff9 url(../img/crane.jpg) no-repeat;
	background-size: auto 100%;
	background-position: right;
}

#bi-ke {
	background: #ff9 url(../img/bk-rental.jpg) no-repeat;
	background-size: auto 100%;
	background-position: right;
}

#iron-plate {
	background: #ff9 url(../img/scaffold.jpg) no-repeat;
	background-size: auto 100%;
	background-position: right;
}

#traffic-guidance {
	background: #ff9 url(../img/traffic.jpg) no-repeat;
	background-size: auto 100%;
	background-position: right;
}

#permission-application {
	background: #ff9 url(../img/apply.jpg) no-repeat;
	background-size: auto 100%;
	background-position: right;
}

#sheet {
	background: #ff9 url(../img/sheet.png) no-repeat;
	background-size: auto 100%;
	background-position: right;
}

@media screen and (min-width:768px) {
	/* サービスメニュー(ul) */
	.service-menu {
		flex-direction: row;
	}
	/* サービスアイテム(li) */
	.service-item {
		height: 270px;
		flex: 1;
		margin-top: 0;
		margin-left: 1px;
		margin-right: 10px;
		padding: 0.5em;
	}
	#crane,#bi-ke,#iron-plate,#traffic-guidance,#permission-application,#sheet {
		background-size: 100% auto;
		background-position: bottom;
	}
	.service-item a {
		padding: 0.5em;
	}
}

/* アクセスのモバイル用sectionスタイル */
.access-area {
	padding-bottom: 0;
}

/* アクセス写真のスタイル */
.access-area img {
	display: block;
	max-width: 280px;
	max-height: 280px;
	border-radius: 50%;
	overflow: hidden;
	margin: 10px auto 30px;
}

/* マップの表示枠設定 */
.access-maparea {
	position: relative;
	padding-top: 100%;
}

/* Googleマップに追加 */
#access-map {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* マップの表示枠設定 */
.access-maparea {
	position: relative;
	padding-top: 100%;
	}
/* Google マップに追加 */
	.access-map {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

.park {
	font: italic normal bold 12px/150% "メイリオ",sans-serif;
	color: red;
}

/* アクセスのPC用sectionスタイル */
@media screen and (min-width:768px) {
	/* アクセス情報 */
	.access-content {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 150px;
	}
	/* マップの表示枠設定 */
	.access-maparea {
		position: relative;
		padding-top: 30%;
	}
}

/*営業所へのアクセス案内*/
.branch-menu ul {
	background: #37bd82;
	text-align: center;
	width: max-content;
	margin: 0 auto;
}

.branch-menu ul li {
	display: inline-block;
	position: relative;
}

.branch-menu ul li a {
	display: block;
	padding: 1em;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

.branch-menu ul li a:hover {
	background: #2c9869;
}

ul.sub-list {
	position: absolute;
	top: 100%;
	left: 0;
	/*display: none;*/
	visibility: hidden;
}

ul.sub-list a {
	padding: 0.5em;
}

ul.sub-list {
	width: 100%;
	height: 0%;
	transition: height 0.5s;
}

.branch-menu ul li:hover>ul.sub-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	visibility: visible;
	height: 600%;
	opacity: 0.9;
}

.sub-list a::first-line {
	font-size: 14px;
	font-weight: bold;
}

.branch-list > a {
	pointer-events: none;
}

@media screen and (min-width:768px) {
	.branch-list > a {
		pointer-events: auto;
	}
}

/* ページトップのスタイル */

.pagetop a {
	display: block;
	color: #fff;
	width: 200px;
	text-align: center;
	margin: 20px auto;
	padding: 0.5em;
	border-radius: 5px;
	background-color: #6c0;
	border: solid 4px #6c0;
}

.pagetop a:hover {
	border: dotted 4px #fff;
}

/* リストマーカーのスタイル */
.pagetop a::after {
	content: "";
	background: url(../img/list-marker2.svg) no-repeat;
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 3px 10px;
	transform: rotate(-90deg);
}

/* フッターのcss */
.footer-area {
	color: #fff;
	text-align: center;
	padding-top: 20px;
	background-color: #596680;
}

/* ロゴ画像のスタイル */
.footer-logo {
	margin: 0 auto 10px;
}

.footer-logo img {
	width: 10%;
}

@media screen and (min-width:768px) {
	.footer-logo img {
	width: 5%;
	}
}

.youtube {
	width: 70px;
	height: auto;
}

.twitter {
	width: 25px;
	height: auto;
}

.facebook {
	width: 25px;
	height: auto;
}
.instagram {
	width: 25px;
	height: auto;
}

/* 電話番号のスタイル */
.text-phone a {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 40px;
}

/* 著作権表示のスタイル */
.footer-area_copy {
	color: #ccc;
	font-size: 12px;
	display: inline-block;
	width: 100%;
	padding: 10px;
	background-color: #333;
}

/* PC用の電話番号スタイル */
@media screan and (min-width:768px) {
	a[href^="tel="] {
		pointer-events: none;
	}
}

.footer-list {
	margin-bottom: 24px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.footer-list li a {
	margin: 0 8px;
	color: #fff;
	font-size: 0.75rem;
}

/* topics TOP頁のレイアウト */

h1#topic-title {
	margin-top: 104px;
	color: rgb(4,111,135);
}

.topic-container {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.topic-item a{
	display: block;
	background: rgb(0,153,187);
	margin: 0 1px 1em;
	padding: 0 0 3em;
	width: 220px;
	height: 340px;
	position: relative;
}

.topic-container::after {
	display: block;
	content:"";
	width: 220px;
}

.topic-item h3 {
	padding: 0.5em;
	color: #fff;
	font-weight: bold;
	text-align: left;
	font-size: 1em;
}

.topic-item p {
	padding: 0 1em 0;
	text-align: center;
	color: #fff;
	font-size: 0.9em;
	position: absolute;
	bottom: 0.5em;
}

.topic-p {
	height: 169px;
}

.topic-item a:hover {
	background: rgb(4,176,214,0.5);
}


/* ---　TOPIC各ページのレイアウト(FIGUREは足場の摩訶不思議と共通)　---*/

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

.topic-content {
	width: 90%;
	margin: 2em auto;
	padding: 2em;
	background: #ffebfe;
}

figure {
	width: 100%;
	height: 100%;
	margin-bottom: 1em;
}

iframe {
	width: 100%;
	height: 100%;
}

.service-box iframe {
	height: 83%;
}

#center h2 {
	text-align: center;
}

.right-jus {
	margin-left: auto;
	text-align: left;
	max-width: 210px;
}

.pcsize-25 {
	width: 50%;
	height: auto;
}
.pcsize-20 {
	width: 50%;
	height: auto;
}
.semai {
	width: 43%;
	height: auto;
	margin: 0;
}
.pcsize-10 {
	width: 30%;
	height: auto;
}
figure.kizai-doga {
		height: 40vh;
}

.topic-left {
	float: left;
}

@media screen and (min-width:768px) {
	.topic-content {
		max-width: 900px;
	}
	.pcsize-67 {
		width: 67%;
		height: auto;
		padding: 5px;
	}
	.pcsize-55 {
		width: 55%;
		height: auto;
		padding-left: 1em;
		margin: 0 0 2em 2em;
	}

	.pcsize-50 {
		width: 50%;
		height: auto;
		padding: 5px;
	}
	.pcsize-40 {
		width: 40%;
		height: auto;
		margin: 0 0 1em 1em;
		padding-left: 10px;
	}
	.pcsize-33 {
		width: 33%;
		height: auto;
		padding: 5px;
	}
	.pcsize-30 {
		width: 30%;
		height: auto;
		padding: 1em;
	}
	.pcsize-25 {
		width: 25%;
		height: auto;
		padding-right: 1em;
		margin: 0 1em 1em 0;
	}	
	.pcsize-20 {
		width: 20%;
		height: auto;
		padding-right: 1em;
		margin: 0 1em 1em 0;
	}	
	.pcsize-10 {
		width: 10%;
		height: auto;
		margin: 0 1em 1em 0;
	}
	.topic-content figure {
		margin: 0;
		display: block;
	}
	.topic_p {
		display: block;
		width: 50%;
		float: left;
		padding: 1em 1em 0 0;
	}
	.topic_bp {
		display: block;
		width: 60%;
		float: left;
		padding: 1em 1em 0 0;
	}
	.topic_h {
		height: 450px;
	}

	figure.kizai-doga {
		height: 60vh;
	}

}


@media screen and (min-width:481px) and (max-width:767px) {
	.topic-content {
		max-width: 680px;
	}
	.pcsize-67 {
		width: 67%;
		height: auto;
		padding: 5px;
	}
	.pcsize-55 {
		width: 65%;
		height: auto;
		padding-left: 1em;
		margin: 0 0 2em 2em;
	}

	.pcsize-50 {
		width: 50%;
		height: auto;
		padding: 5px;
	}
	.pcsize-40 {
		width: 50%;
		height: auto;
		margin: 0 0 1em 1em;
		padding-left: 10px;
	}
	.pcsize-33 {
		width: 33%;
		height: auto;
		padding: 5px;
	}
	.pcsize-30 {
		width: 40%;
		height: auto;
		padding: 1em;
	}
	.pcsize-25 {
		width: 40%;
		height: auto;
		padding-right: 1em;
		margin: 0 1em 1em 0;
	}	
	.pcsize-20 {
		width: 40%;
		height: auto;
		padding-right: 1em;
		margin: 0 1em 1em 0;
	}	
	.topic-content figure {
		margin: 0;
		display: block;
	}
	.topic_p {
		display: block;
		width: 50%;
		float: left;
		padding: 1em 1em 0 0;
	}
	figure.kizai-doga {
		height: 40vh;
	}

}

.topic-content h2 {
	margin: 0 0 1em;
	text-align: justify;
}

.topic-content p {
	line-height: 1.8;
}

figcaption {
	font-weight: 510;
}

.blue {
	color: #000080;
	clear: both;
}

.charity {
	background-image: url(../img/topics/charity_ball_goal.gif);
	background-position: bottom left;
	background-size: contain;
	background-repeat: no-repeat;
}
.toumei {
	background-color: rgba(255,234,254,0.55);
}

@media screen and (min-width:768px) {
	.charity {
		background-size: 50%;
	}
}

/* 各ページ共通メインビジュアルsectionのスタイル */
#group-mv {
	background: #2f4f4f url(../img/group/group-mv.jpg) no-repeat 100%/auto;
}
#tec-mv {
	background: #2f4f4f url(../img/tec/tec_header.jpg) no-repeat 100%/auto;
}

#mx-mv {
	background: #2f4f4f url(../img/mx/mx_header1.jpg) no-repeat 100%/auto;
}

.icon {
	width: 25px;
	height: auto;
}

/* 	各ページ共通メインビジュアルタイトルのスタイル */
h1.common-mv-title {
	font-size: 28px;
	font-weight: bold;
	color: #cf0;
	text-shadow: 3px 3px 6px #333;
	margin: 10px 0 20px;
	padding: 0.5em;
	z-index: 11;
}

h2.common-mv-title {
	font-size: 18px;
	font-weight: bold;
	color: #cf0;
	text-shadow: 3px 3px 6px #333;
	margin: 20px 0;
	padding: 0 1em;
	text-align: left;
	z-index: 11;
}

@media screen and (min-width:768px) {
	#group-mv {
		height: 40vh;
	}
	h1.common-mv-title {
		font-size: 36px;
	}
	h2.common-mv-title {
		font-size: 24px;
	}
}


/* 各ページ共通 intro section のレイアウト */
.intro-area {
	width: 90%;
	margin: 20px auto;
	background-color: #fff;
}

.intro-content {
	padding: 1.5em;
}

.intro-content-item p {
	font-size: 1.4rem;
	font-weight: bold;
	color: #0000ff;
}

.intro-content h2 {
	font-size: 1.5rem;
	font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','Noto Serif JP', serif;
	font-size: bold;
	margin-bottom: 0.5em;
}

#hello {
	background-color: #ffffe0;
}

.intro-content {
	width: 100%;
	display: inline-block;
	}

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

.intro-txt span {
	display: block;
	width: 220px;
	margin: 1em 0 0 auto;
}

@media screen and (min-width:768px) {
	.intro-txt p {
	display: block;
	width: 58%;
	}
}

/* MESSAGE */

.message-area {
	width: 100vw;
	height: auto;
	margin-top: 128px;
	margin-bottom: 10px;
	background-color: #cf9;
	padding-bottom: 10px;
}

@media screen and (min-width:768px) {
	.message-area {
		margin-top: 108px;
	}
}


.message-area h1, .message-area h2 {
	margin-left: 60px;
	text-align: left;
} 

/* 各ページ共通コンテンツsectionのスタイル */
.common-mv-area {
	width: 100vw;
	height: 40vh;
	margin-top: 108px;
	margin-bottom: 10px;
	background-size: contain;
	background-position: center center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;
}

.common-content {
	background-color: #fff;
}

.common-content-menu {
	width: 100%;
	margin: 0 auto;
	padding: 2em;
}

.reason {
	font-family: "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif;
	font-size: 28px;
	font-weight: bold;
}

/* 各ページ共通コンテンツリスト(dt) */
.common-content-item {
	margin: 1em auto;
	background-image: repeating-radial-gradient(circle closest-side,#fff8dc 0px,#cf6 20px);
}

.common-content-item h3 {
	color: #008;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 0;
}

.common-content-item h2 {
	font-size: 24px;
	font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','Noto Serif JP', serif;
	font-size: bold;
	margin-bottom: 0.5em;
}

@media screen and (min-width:768px) {
	.common-content-item h3 {
		font-size: 28px;
	}
	.common-content-item h2 {
		font-size: 36px;
	}
}

.common-content-menu dd h2 {
	font-size: 36px;
	text-align: justify;
	font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','Noto Serif JP', serif;
	font-size: bold;
	margin-bottom: 0.5em;
}

/* 各ページ共通コンテンツリスト(dd) */
.common-content-menu dd::after {
	content: "";
	display: block;
	clear: both;
}

.common-content-menu dd {
	font-size: 1.1rem;
}

/* 会社概要にリンクするボタン */
.company-btn {
	display: block;
	padding: 20px 35px;
	margin: 0 auto;
	color: #fff;
	background: rgb(0,128,0);
	border-radius: 10px;
	border-bottom: 4px solid rgb(144,238,144);
}

.company-btn:hover, .company-btn:focus {
	background: rgba(34,139,34,0.7);
	color: #fff;
	cursor: pointer;
}
.company-btn:active {
	border-bottom: none;
	transform: translateY(4px);
}

.pdf-view {
	margin-top: 10px;
	width: 100%;
	height: 100vh;
}

.pdf-alt {
	margin-top: 107px;
	width: 100%;
	height: 100%;

}


/* MAP - ハマックスを知るのmap設定
---------------------------------------------------------------------*/

.map-canvas {
	width: 100%;
	height: auto;
	margin: 0 1em;
	padding: 0 0 56.25% ;
	overflow: hidden ;
	position: relative ;
}

@media screen and (min-width:481px) {
	.map-canvas {
		width: 40vw;
		height: auto;
		float: left;
	}
}

.map-canvas > div {
	position: absolute ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 100% ;
	margin: 0 ;
	padding: 0 ;
}

#branch-link a {
	color: #00f;
	text-decoration: underline solid #00f 1px;
}
#branch-link a:hover {
	color: rgba(0,0,255,0.5);
	text-decoration-color: rgba(0,0,255,0.5);
}

/*  Branch --*/

#branch-mv {
	background-image: url(../img/branch/branch.jpg), url(../img/branch/branch_2.jpg),url(../img/branch/branch_3.jpg),url(../img/branch/branch_4.jpg),url(../img/branch/branch_5.jpg);
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	background-position: top left -10px,top left 240px, top left 490px, top left 740px, top left 990px;
}

#branch-top {
	background-image: linear-gradient(60deg,rgba(124,252,0,0.3),rgba(255,218,185,0.8));
}

#branch-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: 0 1em;
}

#branch-nav li {
	flex-basis: 50%;
}

#branch-nav li:first-child {
	flex-basis: 100%;
}

@media screen and (min-width:768px) {
	#branch-nav li {
		flex-basis: 20%;
	}
	#branch-nav li:first-child {
		flex-basis: 40%;
	}
}

#branch-nav a {
	color: #b22222;
	font-weight: bold;
	font-size: 14px;
	margin: 0.3em;
	padding: 0.5em;
	display: block;
	background: #add8e6;
	text-align: center
}

#branch-nav a:hover {
	background: #90ee90;
}

#branch section {
	padding-top: 0;
	margin-bottom: 5px;
	text-align: left;
	position: relative;
	border: outset 10px #98fb98;
}
#branch section h3 {
	color: #fff;
	font-size: 20px;
	padding: 0.5em 2em 0.5em;
	background: #32cd32;
	text-align: left;
}
.maruka {
	font-size: 14px;
	margin: 5px 0 0 0;
	padding: 0;
}
p.b-icon::before {
	content: url(../img/icon_maruchan.png);
	margin: 0 10px 3px 0;
}

#branch p {
	width: 100%;
	margin: 0.5em 1em;
}

#branch p.b-icon, .maruka {
	padding: 0 2em 3em 1em;
}

#branch section::after {
	content: "";
	display: block;
	clear: both;
}

.map-back {
	position: absolute;
	bottom: 0;
	right: 0;
}
.map-back a {
	display: block;
	width: 160px;
	color: #4b0082;
	background: #ffffe0;
	border: 1px solid #d3d3d3;
	margin: 10px 0 0 auto;
	padding: 0 0.2em;
	text-align: center;
	float: right;
}


/* MAP - Branch 営業所案内のmap設定 ---------------------------------*/

.branch-map {
	width: 80vw;
	height: 50vh;
	float: right;
	margin-left: 1em;
	overflow: hidden;
	position: relative;
}

.branch-map > div {
	position: absolute;
	top: 0 ;
	left: 0 ;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.branch-map > button {
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: #ffffaa;
	z-index: 2;
	font-size: 12px;
	padding: 0.3em;
}

.branch-map2 {
	width: 80vw;
	height: 80vh;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}	

.branch-map2 > div {
	position: absolute;
	top: 0 ;
	left: 0 ;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.branch-map2 > button {
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: #aaffff;
	z-index: 2;
}

@media screen and (min-width:768px) {
	.branch-map {
		width: 30vw;
		height: 50vh;
	}
}

/* JobOffer ----*/

h1#job-title {
	margin-top: 104px;
	color: rgb(4,111,135);
}

.job-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 10px auto 20px;
}

.job-item {
	flex-basis: 50%;
	text-align: center;
	margin-bottom: 10px;
	padding: 0 10px 0;
}

@media screen and (min-width:768px) {
	.job-item {
		flex-basis: 25%;
	}
}

.job-item a{
	display: block;
	height: 210px;
	background: rgb(0,153,187);
	margin: 0;
	padding: 0;

}

.job-item h3 {
	padding: 0.5em;
	color: #fff;
	font-weight: bold;
	font-size: 1em;
}

.job-item a:hover {
	background: rgb(4,176,214,0.5);
}

.job-item img {
	height: 50%;
	width: auto;
	margin: 0 auto;
}

/* joboffer各ページのレイアウト */

table.saiyo {
	width: 90%;
	max-width: 800px;
	border-collapse: collapse; 
	margin: 40px auto 0;
	border: 1px solid #b78c5f;
}

table.saiyo td {
	width: 75%;
	padding: 8px;
	border: 1px solid #000;
	text-align: left;
	vertical-align: middle;
	background-color: #eeeeee;
}

table.saiyo th {
	width: 25%;
	padding: 8px 0;
	border: 1px solid #000;
	text-align: center;
	vertical-align: middle;
	background-color: #ffffaa;
	color: #442220;
}

@media screen and (min-width:768px) {
	table.saiyo td {
		width: 88%;
	}
	table.saiyo th {
		width: 12%;
	}
}

.job-inquiry a {
	display: block;
	width: 20em;
	margin: 20px auto;
	padding: 0.5em;
	color: #fff;
	background: #f36;
	border: solid 3px #f36;
	border-radius: 10px;
	text-align: center;
}

.job-inquiry a:hover {
	border: dotted 3px #fff;
}

/* service頁のレイアウト ----*/
h1#service-title {
	margin-top: 104px;
	color: rgb(4,111,135);
}

.service-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

div#service-top section h2 {
	font-size: 20px;
	width: 90%;
	margin: 5px auto 30px;
	padding: 0.4em 2em;
	background: linear-gradient(to right, #2dff57 0%, #cbffd3 100%);
	box-shadow: 18px 18px 12px 0px #bbbbbb;
}

div#service-top section h3 {
	font-size: 18px;
	text-align: left;
	margin: 0 3em 1em;
}

.service-box, .service-box2 {	
	flex-basis: 95%;
}
.service-box h4 {
	text-align: center;
	font-size: 1.1vw;
	font-weight: 400;
}
.service-box h4::first-line {
	font-size: 16px;
	font-weight: bold;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.service-box, .service-box2 {
		flex-basis: 47%;
	}
	
	div#service-top section h2 {
		width: 75%;
	}
}

@media screen and (min-width: 1025px) {
	.service-box {
		flex-basis: 32%;
	}
	.service-box2 {
		flex-basis: 47%;
	}
	div#service-top section h2 {
		width: 60%;		
	}
}

/* youtubeのオリジナルサムネイルのレイアウト */
.movie-content-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
    margin-bottom: 20%;
}

.movie-content-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (min-width: 768px) {
	.movie-content-wrap iframe {
		height: 133%;
	}
}

.movie-content-wrap img {
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
}
.sp-spacer {
	display: none;
	width: 1px;
	height: 1px;
}
@media screen and (max-width: 768px) {
	.sp-spacer {
		display: block;
	}
}
.get-youtube {
	position: absolute;
	width: 90%;
	top: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 1em auto;
	text-align: center;
	color: #ffff00;
	font-weight: 600;
	cursor: pointer;
}

.youtube-play {
    position: absolute;
	top: 80%;
	left: 50%;
	transform: translate(-50%,-50%);
    width: 1em;
    height: 1em;
    border: 0.05em solid #fff000;
    border-radius: 50%;
    color: #000;
    font-size: 70px;
	cursor: pointer;
}
.youtube-play::before {
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translateY(-50%);
    width: 0px;
    height: 0px;
    border: 0.3em solid transparent;
    border-left: 0.5em solid #fff000;
    box-sizing: border-box;
    content: "";
}
.goto-youtube:hover .youtube-play {
	border-color: rgba(255,255,0,0.3);
	transition-duration: 3s;
}
.goto-youtube:hover .youtube-play::before {
	border-left-color: rgba(255,0,0,0.5);
	transition-duration: 3s;
}

.service-container #yt {
    height: 100%;
    margin: 0 0 50px 0;
}
@media screen and (max-width: 768px) {
	.service-container #yt {
        height: 100%;
        margin: 70px 0 50px 0;
    }
}


/*formレイアウト*/

#form-title {
	font-size: 1.5em;
	color: #1b9aaa;
	text-align: center;
	margin: 108px 0 20px;
}

form {
	width: 90%;
	max-width: 800px;
	margin: 0 auto 40px;
	background: #fff;
	padding: 40px 0;	
}

.form-container {
	margin: 0 auto;
	width: 500px;
}

.form-item {
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}

.form-item dt {
	width: 200px;
}

.form-item dd {
	width: 300px;
}

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
	display: block;
	width: 100%;
	font-size: 14px;
}

input[type="postalcode"] {
	display: block;
	margin-bottom: 2px;
	width: 50%;
	font-size: 14px;
}

#title {
	text-align: center;
}

#explain {
	width: 100%;
	margin: 0 auto 30px;
}

.form-item dt,.form-item dd,select,input,textarea {
	color: #666;
}

.form-item dt::before {
	content: "◆";
	color: #1b9aaa;
	padding-right: 6px;
}

input[type="text"], input[type="email"], input[type="postalcode"],input[type="tel"], select, textarea {
	border: 1px solid #ccc;
	background: #fff;
	padding: 0.3em;
}

select {
	height: 2em;
}

.label-radio {
	margin-right: 1.2em;
}

input[type="radio"] {
	width: 16px;
	height: 16px;
	margin-right: 4px;
}

textarea {
	min-height: 100px;
}

input[type="submit"] {
	background: #1b9aaa;
	width: 200px;
	padding: 0.5em;
	color: #fff;
	font-size: 16px;
	border: none;
	border-radius: 4px;
}

/*PCのみformレイアウト*/

@media screen and (min-width:769px) {
	input[type="submit"]:hover {
		background: #147581;
	}
}

/*モバイル用formレイアウト*/

@media screen and (max-width:768px) {
	form {padding: 20px 0;}
	.form-container {width: 90%;}
	.form-item {display: block;}
	.form-item dt {
		width: 100%;
		margin-bottom: 10px;
	}
	.form-item dd {width: 100%;}
	input[type="submit"] {padding: 1em;}
	
}

/* 足場の摩訶不思議のMENU頁のレイアウト */

.m-topnav {
	width: 90%;
	margin: 10px auto;
}
.m-topnav h2 {
	font-size: 32px;
	color: #800080;
	text-shadow: 2px 2px 2px,3px 3px 3px;
}
.m-topnav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin:0px;
	padding:0px;
	list-style-type:none;
	-webkit-backface-visibility: hidden; 
	backface-visibility: hidden;  
}
.var_nav {
	display: block;
	position:relative;
	background:#ccc; 
	width:100%;
	height:6em;
	margin:5px;
}
.link_bg {
 	width:70px;
 	height:6em;
 	position:absolute;
 	background:#E01B6A;
 	color:#fff;
 	z-index:2;
}
.link_bg i {
 	position:relative;
}
.link_title {
	position:absolute;
	width:100%;
	z-index:3;
	color:#fff;
}
.link_title h3 {
	text-align: left;
	color: #e01b6a;
	font-weight: bold;
	margin: 0.5em 0;
}
.link_title p {
	color: #000;
}
.link_title:hover .m-icon {
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	transform:rotate(360deg);  
}
.var_nav:hover .link_bg {
	width:100%;
	background:#E01B6A;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;  
}
.var_nav:hover a {
	font-weight:bold;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out; 
	-o-transition:all .5s ease-in-out; 
	-ms-transition:all .5s ease-in-out;
 	transition:all .5s ease-in-out;
}
.var_nav:hover a h3 {
	color: #9f3;
}
.var_nav:hover a p {
	color: #fff;
}
.m-icon {
	position:relative;
	margin-top: 10px;
	width:70px;
	height:70px;
	text-align:center;
	color:#fff;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out; 
	-o-transition:all .5s ease-in-out; 
	-ms-transition:all .5s ease-in-out;   
	float:left;
	transition:all .5s ease-in-out;  
}
.m-icon i {
	top: 22px;
	position: relative;
}
.m-topnav a {
	display:block;
	position:absolute;
	padding-left: 80px;
	padding-right: 1em;
	float:left;
	font-family:arial;
	color:#fff;
	text-decoration:none;
	width:100%;
	height:100%;
	text-align:center;
	line-height: 1.3;
}
.m-topnav span {
	margin-top:25px;
	display:block;
} 
@media screen and (min-width:768px) {
	.var_nav {
		width: 40vw;
		height: 5em;
	}
	.link_bg {
 		height:5em;
	}
	.m-icon {
		margin-top: 5px;
	}
}

/* 足場の摩訶不思議のGRIDレイアウト */

.m-grid {
	display: -ms-grid;
	display: grid;
	-ms-grid-rows: auto 20px 100px 20px auto 20px auto;
	grid-template-rows: auto 100px auto auto;
	-ms-grid-columns: 100%;
	grid-template-columns: 100%;
	grid-gap: 20px;
	width: 90%;
	margin: 0 auto;
}
.m-grid section {
	width: 100%;
}
.m-main {
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	grid-row: 1 / 2;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1 / 2;
}
.m-next {
	-ms-grid-row: 2;
	-ms-grid-row-span: 1;
	grid-row: 2 / 3;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1 / 2;
}
.m-nav {
	-ms-grid-row: 3;
	-ms-grid-row-span: 1;
	grid-row: 3 / 4;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1 / 2;
}

.m-nav {
	display: none;
}

.m-white {
	grid-row: 4/5;
	grid-column: 1/2;
}

@media screen and (min-width:768px) {
	.m-grid {
		display: -ms-grid;
		display: grid;
		-ms-grid-rows: -webkit-max-content 20px 100px 20px auto;
		-ms-grid-rows: max-content 20px 100px 20px auto;
		grid-template-rows: -webkit-max-content 100px auto;
		grid-template-rows: max-content 100px auto;
		-ms-grid-columns: auto 20px 310px;
		grid-template-columns: auto 310px;
		grid-gap: 20px;
		width: 90%;
		margin: 0 auto;
	}
	
	.m-main {
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		grid-row: 1 / 2;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1 / 2;
	}

	.m-next {
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;
		grid-row: 2 / 3;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1 / 2;
	}

	.m-nav {
		-ms-grid-row: 1;
		-ms-grid-row-span: 5;
		grid-row: 1 / 4;
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2 / 3;
	}
	.m-nav {
		display: block;
	}
	
	.m-white {
		grid-row: 3 / 4;
		grid-column: 1 / 2;
	}
}


/* 摩訶不思議のタイトル部分 --------------------------------------------- */

.scaffold-title {
	margin: 20px auto 0;
	width: 90%;
}

.scaffold-title p {
	text-align: center;
	color: #200;
	font-size: 24px;
}

.scaffold-title h1 span:first-child {
	display: inline-block;
	color: #0f0;
	transform: rotate(30deg);
}

.scaffold-title p {
	transform: rotate3d(1,0,3,3deg);
	text-decoration: underline solid #fc9 8px;
}

.scaffold-title h1 span:last-child {
	display: inline-block;
	color: #4169e1;
	transform: rotate(-30deg);
}
#scaffold-menu {
	margin-top: 108px;
}

/* 摩訶不思議のmain部分 --------------------------------------------- */

.m-main section {
		width: 100%;
	}

.m-main section::after,
.m-main p::after {
	content: "";
	display: block;
	clear: both;
}

.pcsize-m50 {
	width: 100%;
	margin: 0 auto;
}

@media screen and (min-width:768px) {
	.pcsize-m50 {
		width: 50%;
		height: auto;
		margin: 0 0 1em 1em;
	}
}

.m-main figcaption {
	text-align: left;
	margin-top: 0.5em;
}
#cap-under figcaption {
	text-align: left;
	margin-top: 0;
	margin-bottom: 1em;
}

.small-caption {
	font-size: 0.9rem;
	font-weight: 300;
}
.close {
	margin-top: 2em;
}
.m-main section {
	padding: 1em;
}

.m-main article {
	display: block;
	background: #fafad2;
	font-size: 0.9rem;
	line-height: 1.6;
	padding: 0.5em 1em;
}

.m-main article cite {
	font-weight: 800;
	color: #000;
}

.m-main table {
	border-spacing: 0;
	border-collapse: collapse;
	margin: 0.5em 2em;
}

.m-main table {
	font-size: 0.9rem;
}

.m-main th, .m-main td {
	border: 1px solid #999;
	padding: 0.2em 1em;
}

.col-1 {width: 20%;}
.col-2 {width: 70%;}
.col-3 {width: 10%;}
.col-5c {width: 20%;}
.col-15 {width: 15%;}

.material {width: 23%;}
.thick {width: 25%;}
@media screen and (min-width:768px) {
	.material {width: 38%;}
	.thick {width: 20%;}
}
	

.rope td {
	text-align: center;
}
table.rope {
	float: left;
	margin: 0 1em 1em;
	padding: 0;
}
.rope caption {
	font-weight: 510;
	margin-bottom: 0.5em;
}

i.fa-user-edit {
	color: #cc0;
	padding-right: 5px;
	font-size: 150%;
	vertical-align: top;
}
i.fa-mobile-alt {
	color: #c30;
	padding-left: 5px;
	font-size: 160%;
	transform: rotate(30deg);
}

.m-question {
	margin: 10px 10px 0;
	text-align: left;
}

.m-question span {
	display: inline-block;
	color: #0000cd;
	max-width: 100%;
	font-size: 1.2rem;
	margin: 10px auto;	
	text-decoration: underline wavy #d3d3d3 3px; 
}

.m-clear {
	margin-top: 1em;
}

/* 摩訶不思議のnav部分 --------------------------------------------- */
.m-nav {
	padding-top: 40px;
}

.m-nav li {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}

.m-nav li a {
	display: block;
	padding: 0.4em;
	text-align: center;
	font-size: 16px;
	background: #09f;
	color: #fff;
	border: solid #09f 1px;
}

.m-nav li a:hover {
	background: #fff;
	color: #09f;
	border: solid #09f 1px;
	cursor: pointer;
}

/* 摩訶不思議の頁送り部分 --------------------------------------------- */

.m-next {
 	padding: 20px;
  	display: flex;
	justify-content: center;
	align-items: center;
	background: #c0c0c0;
	margin-bottom: 20px;
}
.m-next a.page-numbers, .m-next span {
	width: 50px;
	height: 50px;
	margin: 2px;
	line-height: 50px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	background: #fff;
	color: #222;
	transition: .3s;
}

.m-next a.to-menu {
	width: 50px;
	height: 50px;
	margin: 2px 22px 2px 2px;
	line-height: 50px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	background: #fff;
	color: #222;
	transition: .3s;
}

.m-next a:hover {
	background: gold;
	border-radius: 100%;
	transform: rotate(360deg);
}
.m-current {
	border-radius:100%;
}
.m-dots {
	background: none;
}

/*摩訶不思議のCITE引用部分その他---------------------*/

a cite {
	text-decoration: underline solid #000 1px;
}

a cite:hover {
	color: rgba(0,0,0,0.5);
	text-decoration-color: rgba(0,0,0,0.5)
}
.fa-laptop {
	font-size: 0.8rem;
	color: #3f00ff;
}
.blue-under {
	text-decoration: underline solid 1px rgba(0,0,255,1);
}
.blue-under:hover {
	text-decoration: rgba(0,0,255,0.3);
}

/*摩訶不思議の掲載日---------------------*/

p.date {
	text-align: right;
	font-size: 0.9rem;
	font-weight: bold;	
}

/*くさび緊結式足場の組立て及び使用に関する技術基準
---------------------*/

div.criteria {
	column-count: 2;
	column-gap: 2em;
	column-rule: 1px dotted #000;
}

.naka {
	text-align: center;
	margin-top: 2em;
}

.criteria-section {
	padding: 1em;
}
/*　scrolltopボタンの追加
-----------------------------------------------------------------------------------*/
#scrollTop {
	width: 60px;
	height: 60px;
	position: fixed;
    right: 15px;
	bottom: 10px;
	z-index: 10;
}

#scrollTop a {
	display: block;
	width: 100%;
	border: 1px solid #000080;
    border-radius: 50%;
	color: #000080;
	background: rgba(0,0,128,0.2);
	font-size: 40px;
	text-align: center;
}

#scrollTop svg {
    width: 60%;
}



/* 環境方針 --------------------------------------------*/

.eco-title {
	width: 90%;
	margin: 110px auto 10px;
	padding: 4px 10px;
	border-radius: 20px;
	background: #0c0;
	color: #fff;
}
.eco-intro {
	width: 90%;
	margin: 0 auto;
}

.eco-subtitle {
	width: 90%;
	margin: 10px auto;
	padding: 4px 0;
	border: solid 1px #080;
	border-radius: 20px;
}

#eco-standard {
	margin: 1em auto;
	padding: 1em;
	background: #cf9;
	width: 460px;
	max-width: 90%;
}

#eco-standard li::before {
	content: "◆";
	color: #006400;
	padding-right: 6px;
}

#eco section {
	padding: 1em;
	background: rgba(0,255,0,0.25);
}

#eco section h3 {
	color: rgb(0,100,0);
	font-size: 24px;
	text-align: left;
}

#eco section p::after {
	content: "";
	display: block;
	clear: both;
}

@media screen and (min-width:768px) {
	.eco-intro {
	width: 70vw;
	}
}
	
/* サイトマップ -----------------------------------------------*/
	
.sitemap-title {
	display: block;
	margin-top: 104px;
	width: 90%;
}

.sitemap-title p {
	font-size: 18px;
	text-align: center;
	text-decoration: underline solid #fc6 10px;
}

.sitemap-content a:hover {
	text-decoration: underline solid #099 4px;
}

.sitemap-content li::before {
	content: "▲";
	display: inline-block;
	color: #006400;
	font-size: 10px;
	margin-right: 10px;
	transform: rotate(90deg);
}

.fa-sitemap {
	margin-right: 10px;
}

.sitemap-content {
	display: -ms-grid;
	display: grid;
	-ms-grid-rows: auto 20px auto 20px auto 20px auto 20px auto 20px auto 20px auto 20px auto;
	grid-template-rows: auto auto auto auto auto auto auto auto;
	-ms-grid-columns: 100%;
	grid-template-columns: 100%;
	grid-gap: 20px;
	width: 90%;
	margin: 0 auto;
	line-height: 1.2;
}

.sitemap-main {
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	grid-row: 1/2;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
}
.sitemap-side {
	-ms-grid-row: 3;
	-ms-grid-row-span: 1;
	grid-row: 2/3;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
}
.sitemap-contest {
	-ms-grid-row: 7;
	-ms-grid-row-span: 1;
	grid-row: 4/5;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
}
.sitemap-service {
	-ms-grid-row: 5;
	-ms-grid-row-span: 1;
	grid-row: 3/4;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
}
.sitemap-other {
	-ms-grid-row: 9;
	-ms-grid-row-span: 1;
	grid-row: 5/6;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
}
.sitemap-out {
	-ms-grid-row: 11;
	-ms-grid-row-span: 1;
	grid-row: 6/7;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
}
.sitemap-scaffold {
	-ms-grid-row: 13;
	-ms-grid-row-span: 1;
	grid-row: 7/8;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
}
.sitemap-topics {
	-ms-grid-row: 15;
	-ms-grid-row-span: 1;
	grid-row: 8/9;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
}

@media screen and (min-width:768px) {
	.sitemap-content {
		display: -ms-grid;
		display: grid;
		-ms-grid-rows: auto 20px auto 20px auto 20px auto 20px auto 20px auto 20px auto;
		grid-template-rows: auto auto auto auto auto auto auto;
		-ms-grid-columns: 1fr 20px 1fr;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20px;
		width: 90%;
		margin: 0 auto;
		line-height: 1.2;
	}
	
	.sitemap-main {
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		grid-row: 1/2;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
	}
	.sitemap-side {
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;
		grid-row: 2/3;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
	}
	.sitemap-contest {
		-ms-grid-row: 7;
		-ms-grid-row-span: 1;
		grid-row: 4/5;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
	}
	.sitemap-service {
		-ms-grid-row: 5;
		-ms-grid-row-span: 1;
		grid-row: 3/4;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
	}
	.sitemap-other {
		-ms-grid-row: 9;
		-ms-grid-row-span: 1;
		grid-row: 5/6;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
	}
	.sitemap-out {
		-ms-grid-row: 11;
		-ms-grid-row-span: 1;
		grid-row: 6/7;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
	}
	.sitemap-scaffold {
		-ms-grid-row: 1;
		-ms-grid-row-span: 11;
		grid-row: 1/7;
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
	}
	.sitemap-topics {
		-ms-grid-row: 13;
		-ms-grid-row-span: 1;
		grid-row: 7/8;
		-ms-grid-column: 1;
		-ms-grid-column-span: 3;
		grid-column: 1/3;
	}
}
.sitemap-content dt,
.sitemap-content li {
	border-bottom: solid 1px #000;
	padding: 0.5em 1em;
}

.sitemap-content dt {
	background: #ff9;
	font-weight: bold;
}

.sitemap-topics li {
	font-size: 0.95rem;
}

/* プライバシーポリシー -----------------------------------------------*/

.privacypolicy-title {
	display: block;
	margin-top: 104px;
	width: 90%;
}
.privacypolicy-title h1 {
	text-align: center;
}


.privacypolicy-content {
	margin: 0 auto 2em;
	padding: 1em;
	width: 700px;
	max-width: 90%;
}

.privacypolicy-content h3 {
	margin-left: 1em;
	text-align: left;
	font-size: 24px;
}

/*OLD コンテスト 
----------------------------------------------------*/

#contest-title {
	margin: 104px auto 30px;
	width: 90%;
	
}

.oldcontest-container {
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.oldcontest {
	border-collapse: collapse; 
	flex-basis: 100%;
	margin: 5px 0 10px 0;
	border: 1px solid #b78c5f;
	font-size: 13px;
	order: 2;
}

.wrap {
	flex-basis: 100%;
	margin-top: 14px;
	order: 1;
}

.note {
	flex: 100%;
	border: 1px solid #000;
	margin: 5px 0;
	padding: 1em 1em 0;
	background-color: #CCFFCC;
	order: 3;
}

@media screen and (min-width:768px) {
	.oldcontest {
		flex-basis: 37%;
		order: 1;
	}
	.wrap {
		flex-basis: 62%;
		height: auto;
		order: 2;
	}
}

div#wide {
	position: relative;
	width: 100%;
	height: auto;
	border: 1px solid #333;
}

.note p {
	text-align: center;
	font-size: 15px;
}

div#wide img#photo {
	z-index: 1;
}

div#caption {
	position: absolute;
	top: -40px;
	left: 30px;
	z-index: 2;
}

.oldcontest img {
	width: 24px;
	height: 18px;
}

.oldcontest td {
	padding: 0.3em 1em;
	text-align: left;
	vertical-align: middle;
	background-color: #eeeeee;
}

.oldcontest th {
	padding: 0.3em 1em;
	text-align: center;
	vertical-align: middle;
	background-color: #ffffaa;
	color: #442220;
}

.oldcontest .case {
	margin-bottom: 0px;
}


/* New Contest の見出しとギャラリーのCSS*/

#contest-title p {
	font-size: 18px;
	font-weight: bold;
	color: #ff1a6f;
	text-align: center;
}
.fa-mouse {animation: mouse .8s ease 0s infinite normal;}
@keyframes mouse {
	0% {transform: scale(1);}
	8% {transform: scale(1.2);}
	15% {transform: scale(2);}
	100% {transform: scale(1);}
}
.contest-container {
	widows: 90%;
	border: none;
}
.works-folder figure {
	background: #cff;
}
.works-folder figcaption {
	text-align: left;
	padding-left: 1em;
	font-size: 18px;
}
.fa-trophy {
	color: #FFD700;
	margin: 0 0.5em;
}
.fa-champagne-glasses {
	color: #C0C0C0;
	margin: 0 0.5em;
}
.fa-thumbs-up {
	color: #C47222;
	margin: 0 0.5em;
}
.works-folder span {
	display: flex;
	flex-wrap: wrap;
}

.works-folder a {
	padding: 5px;
	flex-basis: 50%;
}
.works-special {
	border: none;
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
.works-special figure {
	flex-basis: 100%;
}
.works-special span {
	display: flex;
	flex-wrap: nowrap;
}
.works-special figure {
	background: #cff;
}
.works-special a {
	padding: 5px;
}
.works-special figcaption {
	text-align: left;
	padding-left: 1em;
	font-size: 18px;
}

@media screen and (min-width:768px) {
	.works-folder span {
		display: flex;
		flex-wrap: nowrap;
	}
		.works-folder a {
		padding: 5px;
		flex-basis: auto;
	}
	.works-special {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	.works-special figure {
		flex-basis: 49.5%;
	}
}

/* HISTORY のCSS ----------------------------------------*/

.history-title {
	margin: 140px auto 0;
	max-width: 380px;
	width: 90%;
	position: relative;
}
.history-title p {
	text-align: center;
	font-size: 20px;
	font-weight: 500;
}

.anniversary {
	display: block;
	position: absolute;
	width: 50px;
		height: auto;
		top: -30px;
		left: -10px;
	}

@media screen and (min-width:768px) {
	.anniversary {
		display: block;
		position: absolute;
		width: 110px;
		height: auto;
		top: -40px;
		left: -60px;
	}
} 

.history-main > h2 {
	margin: 0 1em 1em 1em;
	text-align: left;
	background:linear-gradient(transparent 70%, #FFFF00 0%);
}
.history-main > h2 > span {
	font-style: italic;
	font-size: 28px;
	color: #5507ff;
} 

.history-article figure {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}
.history-article figcaption {
	text-align: left;
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 0.5em 0.5em;
}
.history-article img {
	margin-bottom: 0;
}

.history-article {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 100%;
	grid-template-columns: 100%;
	padding: 0 0.5em;
	margin-bottom: 2em;
}
.p-01 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 8;
	-ms-grid-row-span: 1;
	grid-row: 8/9;
}
.p-02 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 18;
	-ms-grid-row-span: 1;
	grid-row: 18/19;
}
.f-01 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	grid-row: 1/2;
}
.f-02 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 2;
	-ms-grid-row-span: 1;
	grid-row: 2/3;
}
.f-03 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 3;
	-ms-grid-row-span: 1;
	grid-row: 3/4;
}
.f-04 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 4;
	-ms-grid-row-span: 1;
	grid-row: 4/5;
}
.f-09 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 5;
	-ms-grid-row-span: 1;
	grid-row: 5/6;
} 
.f-05 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 6;
	-ms-grid-row-span: 1;
	grid-row: 6/7;
}
.f-06 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 7;
	-ms-grid-row-span: 1;
	grid-row: 7/8;
}
.f-07 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 9;
	-ms-grid-row-span: 1;
	grid-row: 9/10;
}
.f-10 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 10;
	-ms-grid-row-span: 1;
	grid-row: 10/11;
}
.f-11 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 11;
	-ms-grid-row-span: 1;
	grid-row: 11/12;
}
.f-12 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 12;
	-ms-grid-row-span: 1;
	grid-row: 12/13;
}
.f-13 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 13;
	-ms-grid-row-span: 1;
	grid-row: 13/14;
}
.f-14 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 14;
	-ms-grid-row-span: 1;
	grid-row: 14/15;
}
.f-15 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 15;
	-ms-grid-row-span: 1;
	grid-row: 15/16;
}
.f-16 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 16;
	-ms-grid-row-span: 1;
	grid-row: 16/17;
}
.f-17 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 17;
	-ms-grid-row-span: 1;
	grid-row: 17/18;
}

.p-03 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 8;
	-ms-grid-row-span: 1;
	grid-row: 8/9;
}
.p-04 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 12;
	-ms-grid-row-span: 1;
	grid-row: 12/13;
}
.f-20 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 11;
	-ms-grid-row-span: 1;
	grid-row: 11/12;
}	
.f-21 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 9;
	-ms-grid-row-span: 1;
	grid-row: 9/10;
}
.f-22 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	grid-row: 1/2;
}
.f-23 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 4;
	-ms-grid-row-span: 1;
	grid-row: 4/5;
}
.f-24 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 3;
	-ms-grid-row-span: 1;
	grid-row: 3/4;
}
.f-25 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 2;
	-ms-grid-row-span: 1;
	grid-row: 2/3;
}
.f-26 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 5;
	-ms-grid-row-span: 1;
	grid-row: 5/6;
}
.f-27 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 7;
	-ms-grid-row-span: 1;
	grid-row: 7/8;
}
.f-29 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 10;
	-ms-grid-row-span: 1;
	grid-row: 10/11;
}
.f-30 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 6;
	-ms-grid-row-span: 1;
	grid-row: 6/7;
}

.p-05 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 7;
	-ms-grid-row-span: 1;
	grid-row: 7/8;
}
.p-06 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 13;
	-ms-grid-row-span: 1;
	grid-row: 13/14;
}
.f-50 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 2;
	-ms-grid-row-span: 1;
	grid-row: 2/3;
}
.f-51 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 3;
	-ms-grid-row-span: 1;
	grid-row: 3/4;
}
.f-52 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	grid-row: 1/2;
}
.f-53 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 4;
	-ms-grid-row-span: 1;
	grid-row: 4/5;
}
.f-54 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 5;
	-ms-grid-row-span: 1;
	grid-row: 5/6;
}
.f-55 {
	-ms-grid-column:1;
	-ms-grid-column-span:1;
	grid-column:1/2;
	-ms-grid-row: 8;
	-ms-grid-row-span: 1;
	grid-row: 8/9;
}
.f-56 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 6;
	-ms-grid-row-span: 1;
	grid-row: 6/7;
}
.f-57 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 9;
	-ms-grid-row-span: 1;
	grid-row: 9/10;
}
.f-58 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 10;
	-ms-grid-row-span: 1;
	grid-row: 10/11;
}
.f-59 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 12;
	-ms-grid-row-span: 1;
	grid-row: 12/13;
}
.f-60 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/2;
	-ms-grid-row: 11;
	-ms-grid-row-span: 1;
	grid-row: 11/12;
}


@media screen and (min-width:481px) and (max-width:959px) {
	.history-article {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 10px 1fr;
		grid-template-columns: 1fr 1fr;
		-webkit-column-gap: 10px;
		   -moz-column-gap: 10px;
		        column-gap: 10px;
	}
	.history-article > figure {
		-ms-flex-item-align: start;
		    -ms-grid-row-align: start;
		    align-self: start;
	}
	.p-01 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-column: 1/3;
		-ms-grid-row: 6;
		-ms-grid-row-span: 1;
		grid-row: 6/7;
	}
	.p-02 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-column: 1/3;
		-ms-grid-row: 12;
		-ms-grid-row-span: 1;
		grid-row: 12/13;
	}
	.f-01 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-column: 1/3;
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		grid-row: 1/2;
	}
	.f-02 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		grid-row: 2/3;
	}
	.f-03 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		grid-row: 2/3;
	}
	.f-04 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;
		grid-row: 3/4;
	}
	.f-09 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 3;
		-ms-grid-row-span: 3;
		grid-row: 3/6;
	} 
	.f-05 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 4;
		-ms-grid-row-span: 1;
		grid-row: 4/5;
	}
	.f-06 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 5;
		-ms-grid-row-span: 1;
		grid-row: 5/6;
	}
	.f-07 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 7;
		-ms-grid-row-span: 1;
		grid-row: 7/8;
	}
	.f-10 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 7;
		-ms-grid-row-span: 2;
		grid-row: 7/9;
	}
	.f-11 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 8;
		-ms-grid-row-span: 1;
		grid-row: 8/9;
	}
	.f-12 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 9;
		-ms-grid-row-span: 1;
		grid-row: 9/10;
	}
	.f-13 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 10;
		-ms-grid-row-span: 1;
		grid-row: 10/11;
	}
	.f-14 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 9;
		-ms-grid-row-span: 1;
		grid-row: 9/10;
	}
	.f-15 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 11;
		-ms-grid-row-span: 1;
		grid-row: 11/12;
	}
	.f-16 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 10;
		-ms-grid-row-span: 1;
		grid-row: 10/11;
	}
	.f-17 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 11;
		-ms-grid-row-span: 1;
		grid-row: 11/12;
	}

	.p-03 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-column: 1/3;
		-ms-grid-row: 5;
		-ms-grid-row-span: 1;
		grid-row: 5/6;
	}
	.p-04 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-column: 1/3;
		-ms-grid-row: 8;
		-ms-grid-row-span: 1;
		grid-row: 8/9;
	}
	.f-20 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-column: 1/3;
		-ms-grid-row: 7;
		-ms-grid-row-span: 1;
		grid-row: 7/8;
	}	
	.f-21 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 6;
		-ms-grid-row-span: 1;
		grid-row: 6/7;
	}
	.f-22 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-column: 1/3;
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		grid-row: 1/2;
	}
	.f-23 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;
		grid-row: 3/4;
	}
	.f-24 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		grid-row: 2/3;
	}
	.f-25 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		grid-row: 2/3;
	}
	.f-26 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;
		grid-row: 3/4;
	}
	.f-27 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 4;
		-ms-grid-row-span: 1;
		grid-row: 4/5;
	}
	.f-29 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 6;
		-ms-grid-row-span: 1;
		grid-row: 6/7;
	}
	.f-30 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 4;
		-ms-grid-row-span: 1;
		grid-row: 4/5;
	}

	.p-05 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-column: 1/3;
		-ms-grid-row: 5;
		-ms-grid-row-span: 1;
		grid-row: 5/6;
	}
	.p-06 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-column: 1/3;
		-ms-grid-row: 9;
		-ms-grid-row-span: 1;
		grid-row: 9/10;
	}
	.f-50 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		grid-row: 2/3;
	}
	.f-51 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;
		grid-row: 3/4;
	}
	.f-52 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-column: 1/3;
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		grid-row: 1/2;
	}
	.f-53 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 2;
		-ms-grid-row-span: 2;
		grid-row: 2/4;
	}
	.f-54 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;
		grid-row: 3/4;
	}
	.f-55 {
		-ms-grid-column:3;
		-ms-grid-column-span:1;
		grid-column:2/3;
		-ms-grid-row: 6;
		-ms-grid-row-span: 1;
		grid-row: 6/7;
	}
	.f-56 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-column: 1/3;
		-ms-grid-row: 4;
		-ms-grid-row-span: 1;
		grid-row: 4/5;
	}
	.f-57 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 6;
		-ms-grid-row-span: 2;
		grid-row: 6/8;
	}
	.f-58 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 7;
		-ms-grid-row-span: 1;
		grid-row: 7/8;
	}
	.f-59 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 8;
		-ms-grid-row-span: 1;
		grid-row: 8/9;
	}
	.f-60 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 8;
		-ms-grid-row-span: 1;
		grid-row: 8/9;
	}
}

@media screen and (min-width:960px) {
	.history-article {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		-webkit-column-gap: 10px;
		   -moz-column-gap: 10px;
		        column-gap: 10px;
	}
	.history-article > figure {
		-ms-flex-item-align: start;
		    -ms-grid-row-align: start;
		    align-self: start;
	}
	.p-01 {
		-ms-grid-column: 5;
		-ms-grid-column-span: 3;
		grid-column: 3/5;
		-ms-grid-row: 3;
		-ms-grid-row-span: 2;
		grid-row: 3/5;
	}
	.p-02 {
		-ms-grid-column: 5;
		-ms-grid-column-span: 3;
		grid-column: 3/5;
		-ms-grid-row: 7;
		-ms-grid-row-span: 1;
		grid-row: 7/8;
	}
	.f-01 {
		-ms-grid-column: 5;
		-ms-grid-column-span: 3;
		grid-column: 3/5;
		-ms-grid-row: 1;
		-ms-grid-row-span: 2;
		grid-row: 1/3;
	}
	.f-02 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		grid-row: 1/2;
	}
	.f-03 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		grid-row: 1/2;
	}
	.f-04 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		grid-row: 2/3;
	}
	.f-09 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 2;
		-ms-grid-row-span: 3;
		grid-row: 2/5;
	} 
	.f-05 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;
		grid-row: 3/4;
	}
	.f-06 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 4;
		-ms-grid-row-span: 1;
		grid-row: 4/5;
	}
	.f-07 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 5;
		-ms-grid-row-span: 1;
		grid-row: 5/6;
	}
	.f-10 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 5;
		-ms-grid-row-span: 2;
		grid-row: 5/7;
	}
	.f-11 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 6;
		-ms-grid-row-span: 1;
		grid-row: 6/7;
	}
	.f-12 {
		-ms-grid-column: 5;
		-ms-grid-column-span: 1;
		grid-column: 3/4;
		-ms-grid-row: 5;
		-ms-grid-row-span: 1;
		grid-row: 5/6;
	}
	.f-13 {
		-ms-grid-column: 5;
		-ms-grid-column-span: 1;
		grid-column: 3/4;
		-ms-grid-row: 6;
		-ms-grid-row-span: 1;
		grid-row: 6/7;
	}
	.f-14 {
		-ms-grid-column: 7;
		-ms-grid-column-span: 1;
		grid-column: 4/5;
		-ms-grid-row: 5;
		-ms-grid-row-span: 1;
		grid-row: 5/6;
	}
	.f-15 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 7;
		-ms-grid-row-span: 1;
		grid-row: 7/8;
	}
	.f-16 {
		-ms-grid-column: 7;
		-ms-grid-column-span: 1;
		grid-column: 4/5;
		-ms-grid-row: 6;
		-ms-grid-row-span: 1;
		grid-row: 6/7;
	}
	.f-17 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 7;
		-ms-grid-row-span: 1;
		grid-row: 7/8;
	}

	.p-03 {
		-ms-grid-column: 5;
		-ms-grid-column-span: 3;
		grid-column: 3/5;
		-ms-grid-row: 2;
		-ms-grid-row-span: 2;
		grid-row: 2/4;
	}
	.p-04 {
		-ms-grid-column: 5;
		-ms-grid-column-span: 3;
		grid-column: 3/5;
		-ms-grid-row: 4;
		-ms-grid-row-span: 4;
		grid-row: 4/8;
	}
	.f-20 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 3;
		grid-column: 1/3;
		-ms-grid-row: 6;
		-ms-grid-row-span: 2;
		grid-row: 6/8;
	}	
	.f-21 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 5;
		-ms-grid-row-span: 1;
		grid-row: 5/6;
	}
	.f-22 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 3;
		grid-column: 1/3;
		-ms-grid-row: 1;
		-ms-grid-row-span: 2;
		grid-row: 1/3;
	}
	.f-23 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;
		grid-row: 3/4;
	}
	.f-24 {
		-ms-grid-column: 7;
		-ms-grid-column-span: 1;
		grid-column: 4/5;
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		grid-row: 1/2;
	}
	.f-25 {
		-ms-grid-column: 5;
		-ms-grid-column-span: 1;
		grid-column: 3/4;
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		grid-row: 1/2;
	}
	.f-26 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;
		grid-row: 3/4;
	}
	.f-27 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 4;
		-ms-grid-row-span: 1;
		grid-row: 4/5;
	}
	.f-29 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 5;
		-ms-grid-row-span: 1;
		grid-row: 5/6;
	}
	.f-30 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 4;
		-ms-grid-row-span: 1;
		grid-row: 4/5;
	}

	.p-05 {
		-ms-grid-column: 5;
		-ms-grid-column-span: 3;
		grid-column: 3/5;
		-ms-grid-row: 3;
		-ms-grid-row-span: 2;
		grid-row: 3/5;
	}
	.p-06 {
		-ms-grid-column: 5;
		-ms-grid-column-span: 3;
		grid-column: 3/5;
		-ms-grid-row: 5;
		-ms-grid-row-span: 3;
		grid-row: 5/8;
	}
	.f-50 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		grid-row: 1/2;
	}
	.f-51 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		grid-row: 2/3;
	}
	.f-52 {
		-ms-grid-column: 5;
		-ms-grid-column-span: 3;
		grid-column: 3/5;
		-ms-grid-row: 1;
		-ms-grid-row-span: 2;
		grid-row: 1/3;
	}
	.f-53 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		grid-row: 1/2;
	}
	.f-54 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		grid-row: 2/3;
	}
	.f-55 {
		-ms-grid-column:3;
		-ms-grid-column-span:1;
		grid-column:2/3;
		-ms-grid-row: 5;
		-ms-grid-row-span: 1;
		grid-row: 5/6;
	}
	.f-56 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 3;
		grid-column: 1/3;
		-ms-grid-row: 3;
		-ms-grid-row-span: 2;
		grid-row: 3/5;
	}
	.f-57 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 5;
		-ms-grid-row-span: 2;
		grid-row: 5/7;
	}
	.f-58 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 6;
		-ms-grid-row-span: 1;
		grid-row: 6/7;
	}
	.f-59 {
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		grid-column: 2/3;
		-ms-grid-row: 7;
		-ms-grid-row-span: 1;
		grid-row: 7/8;
	}
	.f-60 {
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1/2;
		-ms-grid-row: 7;
		-ms-grid-row-span: 1;
		grid-row: 7/8;
	}
}

/* info sectionのレイアウト */

.info-area {
	display: block;
	position: relative;
	background-color: rgba(255,255,238,0.6);
	border-top: 6px solid #00f;
	border-bottom: 1px solid #00f;
	border-left-style: none;
	border-right-style: none;
	padding: 2.5em 3em 1.5em;
	width: 80%;
	margin-bottom: 20px;
    font-weight: bold;
}

.info-content {
	position: absolute;
	top: 0.5em;
	left: 3em;
	
}

.info-area #greet {
	position: absolute;
	bottom: 1em;
	right: 1em;
	padding: 0.3em 0.8em;	
	background-color: #0f9;
	border-radius: 10px;
}

.info-area #greet a {
	font-size: 13px;
	font-weight: bold;
	color: #fff;
	padding: 0;
	margin: 0;
}

/* 機材センター sectionのレイアウト */

h1#kizai-toptitle {
	margin-top: 104px;
    padding-top: 2em;
	color: rgb(255,255,255);
}

/* h2への指定 */
.kizai-title {
	position: relative;
	text-transform: uppercase;
	z-index: 100;
    text-align: left;
    padding-left: 3em;
    color: #935ef1;
}

/* 疑似要素を使った◆の指定 */
.kizai-title::before {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	background: #F0B9B9;
	position: absolute;
	left: 0%;
	margin-left: 3em;
	transform: rotate(45deg);
	z-index: -100;
}

.kizai-explain {
    color: #696969;
	font-size: 18px;
	margin: 0 1em 20px 1em;
    text-align: left;
}

.kizai-box {
    text-align: left;
    background-color: #fff0f5;
}

.kizai-box h4 {
    text-align: left;
    font-size: 14px;
	font-weight: 400;
    margin: 0.5em;
}

.kizai-box h4::first-line {
	font-size: 16px;
	font-weight: bold;
}

.oneword p {
    display: block;
    padding: 0 2em 0.5em 2em;
}
.oneword p a {
    color: deeppink;
}
.kizai-top {
    background-image: url(../img/kizai/kizai-top.jpg);
	background-position: top;
	background-size: 100%;
	background-repeat: no-repeat; 
}

.switch_image {
    position: relative;
}

.switch_image img {
    transition: opacity 3s;
}
.switch_image:hover img:first-of-type {
    opacity: 0;
}
.switch_image img:last-of-type {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
}
.switch_image:hover img:last-of-type {
    opacity: 1;
}