@charset "UTF-8";

/*Copyright 2018 Hyuga Kouzai.*/
/* CSS Document */
/* ------------------------------------------------ */
/* 作業の流れ用(description.html)
/* ------------------------------------------------ */
h2:nth-child(2) {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-align-items: center; 	
	align-items: center; 	
	-webkit-justify-content: center; 	
	justify-content: center;
    width: 90%;
	margin:1rem auto;
	color: #003366;
	text-align:center;
	line-height:1.1rem;
	font-size: 1.5vw;
	letter-spacing:4px;
	padding: 0.5rem;
	border-top:4px double #006699;
	border-bottom:4px double #006699;
	background-color: #fff;
	background-image: none;
	background-repeat: no-repeat;
	background-position:center top;
	height:100%;
}
#business_contents{
	width:80%;
	display: -webkit-grid;
	display: -moz-grid;
	display: -ms-grid;
	display: -o-grid;
	display: grid;
    grid-template-columns: repeat(2, 1fr);
	gap:2rem;
	margin:1rem auto;
	text-align:center;
	& > div{
		& > p{
			display: -webkit-flex;
			display: flex;
			-webkit-align-items: center;
			align-items: center;
			-webkit-justify-content: center;
			justify-content: center;
			color:#444;
			border-radius:5px;
			/*margin:1rem 1rem 0;**/
			padding:0.5rem;
			text-align:left;
			font-size:1.8vw;
			}
		& > img{
			width:100%;
			display:block;
			margin:1rem auto;
			border: none;
			border-radius:2%;
		}
	}
}
	.scroll-space {
		box-sizing: border-box;
		color: #fff;
		overflow: hidden;
		margin:4rem auto;
	}
	.fadein {
		opacity: 0.3;
		transform: translate(0, 0);
		transition: all 1.5s;
	}
	.scroll-space .fadein a img{
		transition: transform .6s ease; /* hover後、ゆっくり拡大 */
		&:hover{
			transform: scale(1.05); /* 拡大 */
		}
	}
	.fadein.fadein-top {
		transform: translate(0, -100px);
	}
	.fadein.fadein-bottom {
		transform: translate(0, 100px);
	}
	.fadein.scrollin {
		opacity: 1 !important;
		transform: translate(0, 0) !important;
	}
	@keyframes scroll {
		0% { transform: translateX(0); }
		100% { transform: translateX(-50%); }
	}


/* ------------------------------------------------ */
/* タブレット 縦向き*/
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (min-width: 760px) and (max-width:1300px) {
    h2:nth-child(2) {
        font-size: 1.5vw;
    }
}

/* ------------------------------------------------ */
/* レスポンシブ（780px以下）
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (max-width:780px) {
    h2 {
        letter-spacing: 0.2em;
        margin-bottom:0;
        font-size: 1.1rem;
	}
    h2:nth-child(2) {
        text-align:center;
        letter-spacing: 0.1em;
        font-size: 0.8rem;
	}
    #business_contents{
        width:90%;
		grid-template-columns: 1fr;
		gap:0.5rem;
		margin:1rem auto;
		& > .item1{order:2;}
		& > .item2{order:1;}
		& > .item3{order:3;}
		& > .item4{order:4;}
		& > .item5{order:6;}
		& > .item6{order:5;}
		& > .item7{order:7;}
		& > .item8{order:8;}
		& > .item9{order:10;}
		& > .item10{order:9;}
		& > .item11{order:11;}
		& > .item12{order:12;}
		& > .item13{order:14;}
		& > .item14{order:13;}
		& > .item15{order:15;}
		& > .item16{order:16;}
		& > .item17{order:18;}
		& > .item18{order:17;}
        & > div{
            margin:0 auto;
			& > p{
				margin:1rem auto 0;
				padding:0;
				text-align:left;
				font-size:1.2rem;
				}
			& > img{
				width:100%;
				margin:0 auto;
				border:none;
				border-radius:3%;
			}
		}
		& div:nth-child(n+3){
			& > p{
				margin:2rem auto 0;
			}
        }
    }
	.fadein.fadein-top {
		transform: translate(0, 0);
	}
	.fadein.fadein-bottom {
		transform: translate(0, 50px);
	}
}

/* ------------------------------------------------ */
/* 380px以下に対応
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (max-width:380px)  and (max-height: 890px){
    h2:nth-child(2) {
        text-align:center;
        font-size: 0.8rem;
    }
    #business_contents{
        width:90%;
		grid-template-columns: 1fr;
		gap:0.5rem;
		margin:1rem auto;
		& > .item1{order:2;}
		& > .item2{order:1;}
		& > .item3{order:3;}
		& > .item4{order:4;}
		& > .item5{order:6;}
		& > .item6{order:5;}
		& > .item7{order:7;}
		& > .item8{order:8;}
		& > .item9{order:10;}
		& > .item10{order:9;}
		& > .item11{order:11;}
		& > .item12{order:12;}
		& > .item13{order:14;}
		& > .item14{order:13;}
		& > .item15{order:15;}
		& > .item16{order:16;}
		& > .item17{order:18;}
		& > .item18{order:17;}
        & > div{
            margin:0 auto;
			& > p{
				margin:1rem auto 0;
				padding:0;
				text-align:left;
				font-size:1.2rem;
				}
			& > img{
				width:95%;
				margin:0 auto;
				border:none;
			}
		}
		& div:nth-child(n+3){
			& > p{
				margin:2rem auto 0;
			}
        }
    }
	.fadein.fadein-top {
		transform: translate(0, 0);
	}
	.fadein.fadein-bottom {
		transform: translate(0, 50px);
	}
}

/* ------------------------------------------------ */
/* スマホ横向き時 450px以下 */
/* ------------------------------------------------ */
@media screen and (orientation: landscape) and (max-height: 450px) {
    h2 {
        letter-spacing: 0.2em;
        margin-bottom:0;
        font-size: 1.1rem;
    }
	h2:nth-of-type(2){
		text-align:left;
		font-size: 0.8rem;
	}
}
/* ------------------------------------------------ */
/* /* 画面が2つの領域に分割（開いた状態） */
/* ------------------------------------------------ */
@media (horizontal-viewport-segments: 2){
    #business_contents{
        width:90%;
		grid-template-columns: 1fr;
		gap:0.5rem;
		margin:1rem auto;
		& > .item1{order:2;}
		& > .item2{order:1;}
		& > .item3{order:3;}
		& > .item4{order:4;}
		& > .item5{order:6;}
		& > .item6{order:5;}
		& > .item7{order:7;}
		& > .item8{order:8;}
		& > .item9{order:10;}
		& > .item10{order:9;}
		& > .item11{order:11;}
		& > .item12{order:12;}
		& > .item13{order:14;}
		& > .item14{order:13;}
		& > .item15{order:15;}
		& > .item16{order:16;}
		& > .item17{order:18;}
		& > .item18{order:17;}
        & > div{
            margin:0 auto;
			& > p{
				margin:1rem auto 0;
				padding:0;
				text-align:left;
				font-size:1.2rem;
				}
			& > img{
				width:100%;
				margin:0 auto;
				border:none;
			}
		}
		& div:nth-child(n+3){
			& > p{
				margin:2rem auto 0;
			}
        }
    }
	.fadein.fadein-top {
		transform: translate(0, 0);
	}
	.fadein.fadein-bottom {
		transform: translate(0, 50px);
	}
}