body{
		font-family: 'Kiwi Maru', serif;
	}
	#gl_footer{
		font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	}
	.header .inner, .header .inner-840, .header .inner-980, .header .inner-1008, .header .inner-1108, .header .inner-1200{
		width: auto;
	}
	.list-btn li a{
		text-decoration: none;
	}
	.cp-PageTop .ver{
		display: none;
	}
	.main-mv img, .flex_test-item img, .bottom-img img, .box-item img, .btn-img img, .modal-content img{
		width: 100%;
	}
	
/* top-flex	 */
	.flex_top-box{
		display: flex;
/* 		padding: 0 9px; */
	}
	.main-mv{
/* 		flex: 2; */
		width: 66.5%;
		position: relative;
	}
	.mv-txt{
		position: absolute;
	    top: 0%;
	    font-size: 70px;
	}
	.mv-txt span{
		font-size: 50px;
	}
	@media only screen and (max-width: 950px){
		.main-mv{
			width: 66.25%;
		}
		.mv-txt{
		    font-size: 55px;
		    left: 5%;
		}
		.mv-txt span{
			font-size: 35px;
		}
	}
	@media only screen and (max-width: 768px){
		.main-mv{
			width: 66.35%;
		}
		.mv-txt{
			left: 1%;
			top: -14%;
		}
	}
	@media only screen and (max-width: 640px){
		.main-mv{
			width: 100%;
		}		
		.flex_top-box{
			display: block;
		}
		.mv-txt{
			position: static;
			font-size: 17.7vw;
			margin: 0 3%;
		}
		.mv-txt span{
			font-size: 12.2vw;
		}
	}
	
/* secoud-flex	 */
	.flex_test-box{
		display: flex;
		flex-wrap: wrap;
	}
	.flex_test-item {
		width: 33.04%;
/* 		width: 33.03%; */
		position: relative;
	}	
	.txt-position{
		position: absolute;
		top: 25%;
		left: 11%;
		font-size: 20px;
	}
	@media only screen and (max-width: 950px){
		.txt-position{
			font-size: 15px;
		    left: 7%;
		    top: 21%;
		}
		.flex_test-item {
			width: 32.9%;
		}
	}
	@media only screen and (max-width: 640px){
		.flex_test-box{
			display: block;
		}
		.flex_test-item {
			width: 100%;
			margin-bottom: 60px;
			border: 2px solid;
		}
		.txt-position{
			top: 24%;
			left: 5%;
			font-size: 6.6vw;
		}
	}

/* lest-flex */
	.bottom-flex{
		display: flex;
		align-items: flex-end;
	}
	.bottom-img{
		flex: 2;
	}
	.bottom-txt{
		font-size: 39px;
		margin: 0 50px 5%;
	}
	.bottom-txt span{
		font-size: 56px;
	}
	.digital{
		font-size: 14px;
		margin: -10px 0 0 120px;
	}
	.img-width{
		width: 80%;
		margin: 0 auto;
	}
	@media only screen and (max-width: 950px){
		.bottom-txt{
			font-size: 29px;
		}
		.bottom-txt span{
			font-size: 50px;
		}
		.digital{
			margin: -10px 0 0 85px;
		}
	}
	@media only screen and (max-width: 768px){
		.bottom-txt{
			margin: 5% 0 5% 15px;
		}		
	}
	@media only screen and (max-width: 640px){
		.bottom-flex{
			display: block;
		}
		.img-width{
			width: 100%;
		}
		.bottom-txt{
			font-size: 6.6vw;
			margin: 11% 3% 10px;
		}
		.bottom-txt span{
			font-size: 9.5vw;
		}
		.digital{
			font-size: 2.3vw;
			margin: -6px 0 0 20vw;
		}
	}
	
/* 4つのボタン＆お問い合わせbtn */
	.box{
		display: flex;
		justify-content: space-between;
	}
	.box-item{
		width: 24%;
		position: relative;
	}
	.box-item-txt{
		position: absolute;
		font-size: 17px;
		top: 30%;
	    left: 7%;
	    color: #fff;
	    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	}
	.btn-img{
		width: 60%;
		margin: 70px auto 100px;
	}
	.btn-style:hover, .modal-contact a:hover{
		opacity: 0.6;
	}
	@media only screen and (max-width: 950px){
		.box-item-txt{
			font-size: 12px;
		}
	}
	@media only screen and (max-width: 640px){
		.box{
			display: block;
		}
		.box-item{
			width: 100%;
			margin-bottom: 30px;
		}
		.box-item-txt{
			left: 5%;
			font-size: 6vw;
		}
		.btn-img{
			width: 95%;
			margin: 10px auto 100px;
		}
	}
		
/* hover時の文字の変化	 */
	.bg-blue a, .bg-orange a, .bg-green a, .bg-pink a{
		color: #333;
	}
	.bg-blue a:hover, .bg-orange a:hover, .bg-green a:hover, .bg-pink a:hover{
		color: #fff;
	}
	
/* hover時の背景の変化 */
	.bg-blue, .bg-orange, .bg-green, .bg-pink {
		background-color: #fff;
	}
	.bg-blue:hover{
		background-color: #37B1C6;
	}
	.bg-orange:hover{
		background-color: #E0A700;
	}
	.bg-green:hover{
		background-color: #7BC03A;
	}
	.bg-pink:hover{
		background-color: #E17DBD;
	}
	
/* hoverした時の子要素の背景・文字色の変化 */
	.bg-blue .bg-blue-ttl, .bg-orange .bg-orange-ttl, .bg-green .bg-green-ttl, .bg-pink .bg-pink-ttl{
		color: #fff;
		position: absolute;
	    top: 5%;
	    left: 0;
		font-size: 16px;
	    padding: 2px 0 2px 15px;
	    text-align: left;
	    font-weight: 300;
	    border-bottom-right-radius: 50px;
		border-top-right-radius: 50px;
	}
	.bg-blue:hover .bg-blue-ttl, .bg-orange:hover .bg-orange-ttl, .bg-green:hover .bg-green-ttl, .bg-pink:hover .bg-pink-ttl{
		background-color: #fff;
	}
	.bg-orange .bg-orange-ttl, .bg-green .bg-green-ttl, .bg-pink .bg-pink-ttl{
		width: 90%;
	}
	
	.bg-blue:hover .bg-blue-ttl {
		color: #37B1C6;
	}
	.bg-blue .bg-blue-ttl{
		background-color: #37B1C6;
		width: 165px;
	}
	
	.bg-orange:hover .bg-orange-ttl {
		color: #E0A700;
	}
	.bg-orange .bg-orange-ttl{
		background-color: #E0A700;
	}
	.bg-orange-ttl small{
		font-size: 12px;
	}
	
	.bg-green:hover .bg-green-ttl {
		color: #7BC03A;
	}
	.bg-green .bg-green-ttl{
		background-color: #7BC03A;
	}

	.bg-pink:hover .bg-pink-ttl {
		color: #E17DBD;
	}
	.bg-pink .bg-pink-ttl{
		background-color: #E17DBD;
	}
	@media only screen and (max-width: 1020px){
		.bg-blue .bg-blue-ttl, .bg-orange .bg-orange-ttl, .bg-green .bg-green-ttl, .bg-pink .bg-pink-ttl{
			font-size: 1.55vw;
		}
		.bg-orange-ttl small{
			font-size: 0.9vw;
		}
	}
/*
	@media only screen and (min-width: 640px){
		.br-sp{
			display: none;
		}
	}
*/
	@media only screen and (max-width: 640px){
		.bg-blue .bg-blue-ttl, .bg-orange .bg-orange-ttl, .bg-green .bg-green-ttl, .bg-pink .bg-pink-ttl{
			top: 7%;
			font-size: 5.3vw;
			width: 90%;
		}
		.bg-orange-ttl small{
			font-size: 2.9vw;
		}
		.br-sp{
			display: none;
		}
	}
	
/* modal部分 */
	*{
		margin: 0;
		padding: 0;
	}
	.modal{
		display: none;
		position: fixed;
		top: 0;
		height: 100vh;
		width: 100%;
	}
	.modal-bg{
		position: absolute;
		height: 100vh;
		width: 100%;
		background: rgba(0, 0, 0, 0.8);
	}
	.modal-content{
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 68%;
	}
	.js-modal-close img{
		width: 10%;
		position: absolute;
		top: 3%;
		right: 2%;
	}
	.modal-ttl{
		position: absolute;
		top: 21%;
		left: 4.5%;
	    font-size: 2.86vw;
	}
	.modal-txt{
		margin-top: 5%;
		display: block;
		font-size: 1.17vw;
	}
	.modal-contact{
		display: flex;
		justify-content: center;
		position: absolute;
		bottom: 2%;
		width: 100%;
	}
	.btn-left, .btn-right{
		width: 38%;
	}
	.underline{
		background: linear-gradient(transparent 70%, #ECFF3A 70%);
	}
	body.fixed {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
	}
	@media only screen and (max-width: 950px){
		.modal-content{
			width: 75%;
		}
	}
	@media only screen and (max-width: 768px){
		.modal-content{
			width: 85%;
		}		
	}
	@media only screen and (max-width: 640px){
		.modal-content{
			width: 100%;
		    height: 100%;
		    overflow: scroll;
		}
		.js-modal-close img{
			width: 18%;
			right: 4%;
		}
		.modal-ttl{
/* 			top: 38vw; */
			top: 31vw;
			font-size: 7vw;
			left: 0;
			margin: 0px 10px;
/* 			margin: 0 16px; */
		}
		.modal-txt{
			font-size: 4vw;
			margin-top: 3.5%;
		}
		.modal-contact{
			display: block;
			top: 178vw;
			bottom: 0;
		}
		.btn-left, .btn-right{
			width: 95%;
			margin: 0 auto;
		}
		.close-btn img{
			position: absolute;
			width: 50%;
		    right: 25%;
		    top: auto;
		    margin-top: 2%;
		}
		.btn-187{
			top: 187vw;
		}
		.btn-166{
			top: 166vw;
		}
	}