#flame1 ,#flame3{
		color: #262626;
        width: 100%;
        height: 100vh;
		/* max-height: 100vw; */
        background-color: #FFCF07;
		display:flex; 
			-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
		align-items: center; /* 縦方向中央揃え */
        /*?????????
        background: linear-gradient(to right, hsla(0,100%,50%,1) 0%,hsla(340,100%,50%,1) 30%,hsla(260,100%,50%,1) 100%);
        */    
        overflow: hidden;
    }
    #flame2 ,#flame4{
		color: #fff;
        width: 100%;
        height: 100vh;
		/* max-height: 100vw; */
        background-color: #1F95CC;
        overflow: hidden;/* */
		display:flex; 
			-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
		align-items: center; /* 縦方向中央揃え */
    } 
    #flame5{
		color: #262626;
        width: 100%;
        height: 100vh;
		/* max-height: 100vw; */
        background-color: #F5F5F5;
        overflow: hidden;/*  */
		/* display:flex;	一時的に消している、最終的にも消す可能性高い */
			-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
		/* align-items: center; /* 縦方向中央揃え */
		position: relative;
    }

    #flame1 .inner ,#flame2 .inner ,#flame3 .inner ,#flame4 .inner{
        width: calc(100% - 80px);
        height: calc(100vh - 80px);
        margin: 40px;
	/* ???????(flex box) */
        display: flex;
        justify-content: center;
        align-items: center;/*  */
    }


/* Head Text */

	h1{
		width: 181px;
        padding: 20px;
        position: fixed;
            top: 40px;
            left: 40px;
        z-index: 10;
	}
		
		
    /* ????????? */
		
    h1 {
        animation: float_271 3s linear infinite;
        transform-origin: 50% 50%;
    }
    @keyframes float_271 {
        0% { transform: translateY(0) }
        33.33333% { transform: translateY(-6px) }
        66.66667% { transform: translateY(0) }
        100% { transform: translateY(0) }
    }

	h1 img{
		width:100%;
	}
    #flame1 h2{
		max-width: 50%
    }
	h3{
        font-family: "mono45-headline","Arial", sans-serif;
        font-size: 6rem;
    }
    h4{
        font-family: "a-otf-ud-shin-go-pr6n", sans-serif;
        font-size: 1.6rem;
		letter-spacing: 0.1rem;
		margin-bottom: 1rem;
    }
    p{
        font-family: "a-otf-ud-shin-go-pr6n", sans-serif;
        font-size: 0.9rem;
		line-height: 1.8em;
		letter-spacing: 0.05rem;
    }
	hr{
		display: none;
	}

 /* Navigation */
    #gNav{
        /* safari-error 
        width: auto;
		*/
		/* safari-solution */
		width: auto;
        display: block;
        position: fixed;
            /* "top position"("vew height"-(margin&padding+border×5÷2)-(margin÷2)) 
			https://www.granfairs.com/blog/staff/centering-by-css */
            /* ??????????????
            top:calc(50vh - 4.2rem - 2px);
            */
            top:50%;
            left:0px;
        transform: /* ボタンアニメーション */
			translateY(-50%) translateX(0%);
			-webkit- transform: translateY(-50%) translateX(0%);
			z-index: 10;
			content: "";
    }
    #gNav ul{
        list-style-type: none;
    }
	#gNav li a{
		height:65px;
		width:auto;
		color: hsla(0,0%,100%,1);
        font-family: "Arial",sans-serif;
        font-size: 0.5rem;
        text-align: center;
		text-decoration: none;
		margin: 0 0 1px 0;
		padding: 0 0.35rem 0 0.25rem;
		display: block;
		background: #262626;
		
		/* 縦回転 */
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
		/* 光彩 */
        -webkit-text-shadow: 6px 6px 12px 0 #777; /* Safari, Chrome用 */
  		-moz-text-shadow: 6px 6px 12px 0 #777; /* Firefox用 */
 		text-shadow: 6px 6px 12px 0 #000; /* CSS3 */
	}

	#gNav li a:hover{
		width:20px;
		color: hsla(0,0%,100%,1);
		background-color: hsla(0,0%,15%,1) /* #262626 */;
	}
/* TopPage */
	#flame1 .imageBox{
		width: 477px; /* */
		max-width: 50%;
	}
	.img_logo{
		background-image: url(../img/logo01.png);
		background-size: cover;
		background-repeat: no-repeat;
		/* width: 100%; */
		padding-top: calc(411 / 477 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	}


/* Main */
	section .contents{	/* footer にも .contents がある */
		width:90%;
		text-align: center;
		display: -webkit-flex;
		display: flex;
			-webkit-align-items: center;	 /* 縦方向中央揃え（Safari用） */
		align-items: center;	 /* 縦方向中央揃え */
			 -webkit-justify-content: space-evenly;	 /* 横方向中央揃え（Safari用） */
		justify-content: space-evenly;	 /* 横方向中央揃え */	
	}


/* flame5 #contact */

	#contact{
		width: 100%;
		height: calc(100vh - 146px);
		color: #262626;
		position: absolute;
			top: 0;
			left: 0;
	}
	#contact .inner{
		width: calc(100% - 80px);
		height: calc(100vh - 186px);
		position: absolute;
			top: 40px;
			left: 40px;
	/* ???????(flex box) */
        display: flex;
        justify-content: center;
        align-items: center;
	}
	#contact .btn {		/* https://saruwakakun.com/html-css/reference/buttons */
		font-size: 1.6rem;
		margin-top: 2rem;
		display: inline-block;
		padding: 0.6rem 2.4rem;
		text-decoration: none;
		color: #1F95CC;
		border: solid 2px #1F95CC;
		border-radius: 6px;
		transition: .4s;
		font-family: "a-otf-ud-shin-go-pr6n", sans-serif;
	}
	#contact .btn:hover {
		background: #1F95CC;
		color: white;
	}


/* text 要素 */

	.textBox{
		width: 45%;
		text-align: center;
	/*	float:left; 
	
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	*/
	}
	#flame2 .imageBox ,#flame3 .imageBox ,#flame4 .imageBox ,#flame5 .imageBox{
		width:50%;
	/*	float: right; */
	}


/* image要素 */

	#flame2 .imageBox{
		max-width: 891px;
		/*margin-left: 5%;*/
	}
	.img_graphicDesign{
		background-image: url(../img/graphicDesign_1.png);
		background-size: cover;
		background-repeat: no-repeat;
		/* width: 100%; */
		padding-top: calc(880 / 891 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
		/*max-width:100%;
		max-height: calc(100vh - 80px)*/
	}
	#flame3 .imageBox{
		max-width: 958px;
		/*margin-right: 5%;*/
	}
	.img_webService{
		background-image: url(../img/webService_1.png);
		background-size: cover;
		background-repeat: no-repeat;
		/* width: 100%; */
		padding-top: calc(846 / 958 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	}
	#flame4 .imageBox{
		max-width: 549px;
		/*margin-right: 5%;*/
	}
	.img_manWoman{
		background-image: url(../img/manwoman.png);
		background-size: cover;
		background-repeat: no-repeat;
		/* width: 100%; */
		padding-top: calc(414 / 549 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	}
	#flame5 .imageBox{
		width: 100%;
		max-width: 555px;
	}
	.img_woman{
		background-image: url(../img/woman02B.png);
		background-size: cover;
		background-repeat: no-repeat;
		padding-top: calc(416 / 555 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	}


/* footer */

	#footer h2{
		width: 181px;
		padding: 20px;
	}
	.footerBox{ /* 2つあってOK！ */
		text-align: left;
		/* max-width: calc(100% - 180px);	フレーム枠左右計80px + マージン左右計80px */
	}
	#footerNav ul{
        list-style-type: none;
    }
	#footerNav li{  
		/* margin-left: 0.9rem; */
		padding: 0 0.9rem;
		margin:0.4rem 0; 
		border-left: solid 1px #262626;
		float: left;
	}
	#footerNav li:last-child{  
		border-right: solid 1px #262626;
	}
	/* #footerNav li:after {
		content: " | ";
		vertical-align:text-bottom;
	} */
	#footerNav li a{
		color: #262626;
		font-family: "a-otf-ud-shin-go-pr6n", sans-serif;
		font-size: 0.9rem;
		text-decoration: none;
		/* border-right: 1px solid #262626; */
	}
	#footerNav li a:hover{
		border-bottom: 1px solid #262626; 
	}
	#copyright{
		color: #262626;
		font-family: "a-otf-ud-shin-go-pr6n", sans-serif;
		font-size: 0.7rem;
		text-align: center;
		/* margin: 0 0 0.7rem 0; */
	}
	#footer{	/* なぜかこの場所（フッターの一番下）に記述しないと適用されない */
		width: 100%;
		color: #262626;
		background-color: #fff;
		position: absolute;
			bottom: 0;
			left: 0;
		display: block;
	}
	#footer .inner{
		width: calc(100% - 80px);
		background-color: #fff;
		/* margin: 0 40px 40px 40px; */
		position: absolute;
			bottom: 40px;
			left: 40px;
	}
	#footer .contents{
		/* height: calc(20vh - 40px - 2.7rem); */
		text-align: center;
		display: -webkit-flex;
		display: flex; */
			-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */ 
		align-items: center; /* 縦方向中央揃え */
			-webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
		justify-content: center; /* 横方向中央揃え */
	}


/* ???????????? css    */

	.effect i {
		height: 120px;
		padding: 20px;
		font-size: 100px;
		transition: .8s;
	} 
	.effect div {
		margin: auto;
		transition: .8s;
		transition-delay: .8s;
	}

@media screen and (max-width:1024px){
	#flame1 ,#flame2 ,#flame3 ,#flame4{
		/* max-height: 100vh;	グローバル打消し */
		min-height: 100vw;
	}
	#flame5{
		/* max-height: 100vh;	グローバル打消し */
		min-height: 100vw;
	}
	#flame2 .textBox , #flame4 .textBox{
		order: 2;
	}
	#flame2 .imageBox ,#flame3 .imageBox ,#flame4 .imageBox ,#flame5 .imageBox{
		width:75%;
		margin-bottom: 20px;
	}
	#contact{
		min-height: calc(100vw - 146px);
	}
	#contact .inner{
		min-height: calc(100vw - 186px);
	}
	.textBox{
		width:80%;
	}
	section .contents{	/* footer にも .contents がある */
		flex-wrap: wrap;
	}
	#footer .contents{
		-webkit-justify-content: center;
		justify-content: center;
	}
	h3{
		font-size: 4rem;
	}
	h4{
		font-size: 1.6rem;
	}
}


@media screen and (max-width:640px){
	#flame2 .imageBox ,#flame3 .imageBox ,#flame4 .imageBox ,#flame5 .imageBox{
		width:85%;
		margin-bottom: 20px;
	}
	#flame1 .imageBox{
		max-width: 55%;
	}
    #flame1 .inner ,#flame2 .inner ,#flame3 .inner ,#flame4 .inner{ 	/* 天地左右マージン調整 */
        width: calc(100% - 40px);
        height: calc(100vh - 40px);
        margin: 20px;
    }
	.textBox{
		width:85%;
	}
	h1{
		width: 25%;
		padding: 10px;
		top: 20px;
		left: 20px;
	}
	h3{
		font-size: 2.8rem;
	}
	h4{
		font-size: 1.2rem;
		margin-bottom: 0.6rem;
	}
	#flame2 hr ,#flame4 hr{
		display: block;
		border: none;
		border-top: solid 1px #fff;
		margin-bottom: 0.6rem;
	}
	#flame3 hr ,#flame5 hr{
		display: block;
		border: none;
		border-top: solid 1px #262626;
		margin-bottom: 0.6rem;
	}
	#footer .inner{
		width: calc(100% - 40px);
		bottom: 20px;
		left: 20px;
	} 
	.footerBox:first-child{
		display: none;
	}
	.footerBox{
		text-align: center;
		width: 100%;
		max-width: 100%;
	}
	#footerNav{
		width: auto;
		display: -webkit-flex;
		display: flex;
			-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
		align-items: center; /* 縦方向中央揃え */
			 -webkit-justify-content: space-around;
		justify-content: space-around;
		margin-top:0.7rem;
	}
	/* #footerNav li{
		display: inline;
		margin-left: 0;
		margin: 0 0.2rem;
		float: none;
	} */
	#footerNav li{  
		/* margin-left: 0.9rem;
		height: 0.7rem;
		padding: 0 0.7rem;
		margin:0.2rem 0; */
		padding: 0;
		/* display: inline; */
		border-left: none;
		/* float: none; */
	}
	#footerNav li:last-child{
		border-right: none;
	}
	#footerNav li a{
		font-size: 0.7rem;
	}

	#footerNav li:before{
		content: "|";
		margin: 0 0.2rem;
	}
	#footerNav li:last-child:after{
		content: "|";
		margin: 0 0.2rem;
	}
	#footer .contents{
		width: 100%;
		text-align: center;
		display: -webkit-flex;
		display: flex;
			-webkit-align-items: center;	 /* 縦方向中央揃え（Safari用） */
		align-items: center; /* 縦方向中央揃え */
			 -webkit-justify-content: flex-end;	 /* 横方向右揃え（Safari用） */
		justify-content: flex-end;	/* 横方向右揃え */
		flex-wrap: wrap;
	}
	#contact{
		height: calc(100vh - 84.97px);
		min-height: calc(100vw - 84.97px)
	}
	#contact .inner{
		width: calc(100% - 40px);
		height: calc(100vh - 104.97px);
		min-height: calc(100vw - 104.97px);
		top: 20px;
		left: 20px;
	}
	#contact .btn {	 /* https://saruwakakun.com/html-css/reference/buttons */
		font-size: 0.9rem;
		margin-top: 0.9rem;
		padding: 0.3rem 1.6rem;
		border: solid 1px #1F95CC;
	}
}
	
@media screen and (max-width:320px){
	h4{
		font-size: 1rem;
	}
    p{
        font-family: "a-otf-ud-shin-go-pr6n", sans-serif;
        font-size: 0.8rem;
		line-height: 1.6em;
    }
	/* #footerNav li{
		margin-left: 0.8rem;
	} */
	#footerNav{
		margin-top:0.4rem;
	}
	#footerNav li a{
		font-size: 0.6rem;
	}
	#contact{
		height: calc(100vh - 79.17px);
		min-height: calc(100vw - 79.17px)
	}
	#contact .inner{
		/* height: calc(100vh - 99.17px); 記述ありだと高さがずれる、外すと合う */
		min-height: calc(100vw - 99.17px)
	}
	#copyright{
		font-size: 0.4rem;
		margin: 0.2rem 0;
	}
}

/* @media screen and (max-width:302px){	footerNav が 2段になる

} */

/* image フェードイン js  https://www.yuuu-nii.com/entry/css-js-fadein */
	.fadein {
		opacity : 0;
		transform : translate(0, 50px);
		transition : all 400ms ease-in-out;
	}
	.fadein.scrollin {
		opacity : 1;
		transform : translate(0, 0);
	}