@charset "utf-8";
/* -----------------------------------------------------------------------
use : /sevenmax/service/

style.css

----------------------------------------------------------------------- */

/*-----------------------------------------------------------------

	pageNav

-----------------------------------------------------------------*/
#pageNav {
	width:90%;
	max-width:980px;
	margin:0 auto;
	padding:15px 0;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-ms-flex-pack: wrap;
	flex-wrap: wrap;
}
#pageNav li {
	width:48%;
}
#pageNav li a{
	display:block;
	text-decoration:none;
	background:#ffffff;
	border-radius:6px;
	border:2px solid #45BC90;
	position: relative;
	transition: all 0.5s ease;
}
#pageNav li a span{
	display:block;
	width:100%;
	font-size:2.2rem;
	line-height:1.3;
	font-weight:700;
	color:#171717;
	text-align:center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	transition: all 0.5s ease;
}
#pageNav li a:hover{
	background:#45BC90;
}
#pageNav li a:hover span{
	color:#ffffff;
}

/*----------------------------------------------------------
	Display：← 559px → （ sp ）
----------------------------------------------------------*/

@media screen and (max-width:559px)  {

	#pageNav li {
		width:24%;
	}
	#pageNav li a{
		height:60px;
	}
	#pageNav li a span{
		font-size:1.3rem;
		letter-spacing:0;
	}
	#pageNav li a::after{
		width: 6px;
		height: 6px;
	}
}

/*----------------------------------------------------------
	Display：560px → （ tablet ）
----------------------------------------------------------*/

@media screen and (min-width:560px)  {

	#pageNav {
		padding:20px 0;
	}
	#pageNav li {
		width:24%;
	}
	#pageNav li a{
		height:76px;
	}
	#pageNav li a span{
		font-size:1.6rem;
	}
	#pageNav li a::after{
		width: 9px;
		height: 9px;
	}
	
}

/*----------------------------------------------------------
	Display：769px → （ pc ）
----------------------------------------------------------*/

@media print, screen and (min-width:769px)  {

	#pageNav {
		padding:25px 0;
	}
	#pageNav li a{
		height:84px;
	}
	#pageNav li a span{
		font-size:2.0rem;
	}
	
}

/*----------------------------------------------------------
	Display：980px → （ pc ）
----------------------------------------------------------*/

@media print, screen and (min-width:980px)  {

	#pageNav li a span{
		font-size:2.2rem;
	}

}



/*-----------------------------------------------------------------

	serviceBox

-----------------------------------------------------------------*/

.serviceBox {
	width:90%;
	max-width:980px;
	margin:40px auto;
	background:#F0FAF7;
	border-radius:10px;
	position:relative;
}
.serviceBox .ribonTTL {
	width:90%;
	max-width:642px;
	height:128px;
	margin:0 auto;
	padding-top:12px;
	font-size:4.2rem;
	line-height:1.2;
	font-weight:700;
	color:#ffffff;
	text-align:center;
	background:url(/sevenmax/service/img/title_bg.svg) no-repeat 50% 50%;
	background-size:100% auto;
	transition: all 0.5s ease;
	position:absolute;
	top:-72px;
	left:0;
	right:0;
}
.serviceBox .ribonTTL span {
	display:block;
	font-size:1.8rem;
}

.serviceBox .inner {
	width:100%;
	padding:20px;
	transition: all 0.5s ease;
}
.serviceBox .box2c {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-ms-flex-pack: wrap;
	flex-wrap: wrap;
}
.serviceBox .box2c.re {
  	-webkit-box-orient: horizontal;
  	-webkit-box-direction: reverse;
  	-ms-flex-direction: row-reverse;
  	flex-direction: row-reverse;
}
.serviceBox .box2c .priceBox {
	min-height:90px;
	background:#ffffff;
	border-radius:10px;
	position:relative;
}
.serviceBox .box2c .priceBox .price {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	transition: all 0.5s ease;
}
.serviceBox .box2c .priceBox .price .icon{
	margin-right:5px;
}
.serviceBox .box2c .priceBox .price .icon span{
	display:block;
	padding:5px 3px;
	font-size:1.8rem;
	line-height:1.1;
	font-weight:700;
	text-align:center;
	color:#45BC90;
	border:2px solid #45BC90;
	position:relative;
	bottom:-8px;
}
.serviceBox .box2c .priceBox .price .number{
	font-size:6.4rem;
	line-height:1.1;
	font-weight:900;
	letter-spacing:-0.05em;
	color:#45BC90;
	font-family: 'Poppins', sans-serif;
}
.serviceBox .box2c .priceBox .price .priceTxt{
	margin:0 0 0 3px;
	position:relative;
	bottom:-10px;
}
.serviceBox .box2c .priceBox .price .tax{
	font-size:1.1rem;
	letter-spacing:0.05em;
	color:#171717;
	position:relative;
	left:1px;
	bottom:-3px;
}
.serviceBox .box2c .priceBox .price .yen{
	font-size:2.8rem;
	line-height:1.1;
	font-weight:900;
	letter-spacing:-0.05em;
	color:#45BC90;
	font-family: 'Poppins', sans-serif;
	position:relative;
}

/*----------------------------------------------------------
	Display：←559px （ sp ）
----------------------------------------------------------*/

@media screen and (max-width:559px)  {

	.serviceBox {
		margin:80px auto;
	}
	
	.serviceBox .ribonTTL {
		max-width:300px;
		height:66px;
		padding-top:6px;
		font-size:2.2rem;
		top:-36px;
	}
	.serviceBox .ribonTTL span {
		font-size:1.3rem;
	}
	
	.serviceBox .inner {
		padding:40px 20px 20px;
	}
	
}

/*----------------------------------------------------------
	Display：560px → （ tablet ）
----------------------------------------------------------*/

@media screen and (min-width:560px)  {

	.serviceBox {
		margin:80px auto;
	}
	
	.serviceBox .ribonTTL {
		max-width:360px;
		height:72px;
		padding-top:5px;
		font-size:2.6rem;
		top:-44px;
	}
	.serviceBox .ribonTTL span {
		font-size:1.4rem;
	}
	
	.serviceBox .inner {
		padding:40px 25px 25px;
	}
	
}

/*----------------------------------------------------------
	Display：768px ← （ tablet + sp ）
----------------------------------------------------------*/

@media screen and (max-width:767px)  {
	.serviceBox .box2c .priceBox {
		width:100%;
		margin-top:20px;
	}
}

/*----------------------------------------------------------
	Display：768px → （ pc ）
----------------------------------------------------------*/

@media print, screen and (min-width:768px)  {

	.serviceBox {
		margin:100px auto;
	}
	
	.serviceBox .ribonTTL {
		max-width:520px;
		height:104px;
		padding-top:10px;
		font-size:3.6rem;
		top:-62px;
	}
	.serviceBox .ribonTTL span {
		font-size:1.6rem;
	}
	
	.serviceBox .inner {
		padding:60px 30px 30px;
	}
	
	.serviceBox .box2c > div{
		width:47.5%!important;
	}
	
	.serviceBox .box2c .priceBox .price .priceTxt{
		bottom:3px;
	}
	.serviceBox .box2c .priceBox .price .icon span{
		font-size:1.8rem;
		bottom:-12px;
	}
	.serviceBox .box2c .priceBox .price .number{
		font-size:7.2rem;
	}
	.serviceBox .box2c .priceBox .price .tax{
		font-size:1.4rem;
		left:3px;
		bottom:-5px;
	}
	.serviceBox .box2c .priceBox .price .yen{
		font-size:4.0rem;
	}
	
}

/*----------------------------------------------------------
	Display：1000px → （ pc ）
----------------------------------------------------------*/

@media print, screen and (min-width:1000px)  {

	.serviceBox {
		margin:120px auto;
	}
	.serviceBox .inner {
		padding:85px 75px 50px;
	}
	
	.serviceBox .ribonTTL {
		max-width:642px;
		height:128px;
		padding-top:15px;
		font-size:4.2rem;
		top:-72px;
	}
	.serviceBox .ribonTTL span {
		font-size:1.8rem;
	}
	
	.serviceBox .box2c .priceBox .price .priceTxt{
		bottom:-5px;
	}
	.serviceBox .box2c .priceBox .price .icon span{
		font-size:2.4rem;
	}
	.serviceBox .box2c .priceBox .price .number{
		font-size:8.4rem;
	}
	.serviceBox .box2c .priceBox .price .tax{
		font-size:1.4rem;
		left:3px;
		bottom:-5px;
	}
	.serviceBox .box2c .priceBox .price .yen{
		font-size:4.0rem;
	}
	
}


/*-----------------------------------------------------------------

	joycalhosho

-----------------------------------------------------------------*/

#joycalhosho .headLineF {
	border-radius:10px 10px 0 0;
	background:url(/sevenmax/service/img/hosho_head_img.jpg) no-repeat 50% 50%;
	background-size:cover;
	position:relative;
	transition:all 0.5s ease;
}
#joycalhosho .headLineF img{
	width:60%;
	max-width:465px;
	margin:auto 0;
	vertical-align:bottom;
	position:absolute;
	top:0;
	bottom:0;
	left:5%;
}

#joycalhosho .graphBox {
	margin-top:35px;
	text-align:center;
}
#joycalhosho .graphBox .midashi {
	width:100%;
	max-width:650px;
	line-height:1.3;
	font-weight:700;
	color:#ffffff;
	text-align:center;
	background:#45BC90;
	border-radius:10px;
	position:relative;
}
#joycalhosho .graphBox .midashi::after {
	display: block;
	content: '';
	width: 0;
	height: 0;
	border-right:10px solid transparent;
	border-left:10px solid transparent;
	border-top:18px solid #45BC90;
	position:absolute;
	bottom: -16px;
	right:10%;
	transition:all 0.5s ease;
}
#joycalhosho .graphBox img {
	max-width:740px;
}

/*----------------------------------------------------------
	Display：←559px （ sp ）
----------------------------------------------------------*/

@media screen and (max-width:559px)  {

	#joycalhosho .headLineF {
		height:160px;
	}
	#joycalhosho .graphBox {
		text-align:center;
	}
	#joycalhosho .graphBox .midashi {
		margin:0 auto 15px;
		padding:5px;
		font-size:2.0rem;
	}
	#joycalhosho .graphBox .midashi::after {
		margin:0 auto;
		bottom: -16px;
		right:0;
		left:0;
	}
	
}

/*----------------------------------------------------------
	Display：560px → （ tablet ）
----------------------------------------------------------*/

@media screen and (min-width:560px)  {

	#joycalhosho .headLineF {
		height:220px;
	}
	#joycalhosho .graphBox {
		padding:30px 20px 20px;
		text-align:center;
		background:#ffffff;
		border-radius:10px;
	}
	#joycalhosho .graphBox .midashi {
		width:90%;
		margin:0 auto 20px;
		padding:10px;
		font-size:2.8rem;
	}
	#joycalhosho .graphBox .midashi::after {
		bottom: -16px;
		right:12.5%;
	}

}

/*----------------------------------------------------------
	Display：769px → （ pc ）
----------------------------------------------------------*/

@media print, screen and (min-width:769px)  {

	#joycalhosho .headLineF {
		height:240px;
	}
	
	#joycalhosho .graphBox {
		padding:40px 30px 30px;
	}
	#joycalhosho .graphBox .midashi {
		font-size:3.2rem;
	}

}



/*-----------------------------------------------------------------

	magokoropack

-----------------------------------------------------------------*/

#magokoropack .imgList {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-pack: wrap;
	flex-wrap: wrap;
	border-radius:10px;
	overflow:hidden;
}
#magokoropack .imgList figure img {
	vertical-align:middle;
}
#magokoropack > div table{ 
	width: 100%;
	margin: 30px 0 0; 
	border: solid 2px #2e919e; 
	border-left: none;
}
#magokoropack > div table thead{ 
	display: none;
}
#magokoropack > div table tbody th{ 
	background: #2e919e; 
	padding: 12px; 
	border-top: solid 1px #fff; 
	font-weight: bold;
	vertical-align:middle;
	font-size: 12px;
	text-align:left;
	line-height: 1; 
	color: #fff;
}
#magokoropack > div table tbody th span > a{ 
	display: inline-block; 
	background: url(../img/icon_q.svg) no-repeat center right 5px;
	padding: 0 20px 0 0; 
	color: #fff;
	text-decoration:none;
}
#magokoropack > div table tbody th span div{ 
	display: none; 
	background: rgba(0,0,0,.5); 
	width: 100%; 
	height: 100%; 
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 2;
}
#magokoropack > div table tbody th span div p{ 
	background: #fff; width: 
	calc(100% - 50px); 
	padding: 20px; 
	position: fixed; 
	top: 50%; 
	left: 50%; 
	box-shadow: 0 0 10px 0px rgba(0,0,0,0.1);
	font-size: 13px; 
	line-height: 1.5; 
	color: #333; 
	font-weight: normal; 
	text-align: justify; 
	text-justify: inter-ideograph; 
	transform: translate(-50%,-50%);
	border-radius:8px;
}
#magokoropack > div table tbody th span div p a{ 
	display: block; 
	background: url(../img/nav_close.svg) no-repeat center/14px 14px; 
	width: 40px; 
	height: 40px; 
	position: absolute; 
	top: -40px; 
	right: -11px; 
	overflow: hidden; 
	text-indent: 100%; 
	white-space: nowrap;
}
#magokoropack > div table tbody td{ 
	background: #fff; 
	width: 90px; 
	padding: 12px; 
	border-top: solid 1px #2e919e; 
	font-weight: bold; 
	font-size: 12px; 
	line-height: 1; 
	color: #de4545; 
	text-align: center;
	vertical-align:middle;
}
#magokoropack > div table tbody td:nth-of-type(n+2){ 
	display: none;
}

/*----------------------------------------------------------
	Display：← 767px → （ sp + tablet ）
----------------------------------------------------------*/

@media print, screen and (max-width:767px){ 

	#magokoropack .imgList {
		margin-bottom:20px;
	}
	#magokoropack .imgList figure {
		width:50%;
	}
	#magokoropack .imgList figure:nth-child(3) {
		display:none;
	}

}

/*----------------------------------------------------------
	Display：768px → （ pc ）
----------------------------------------------------------*/

@media print, screen and (min-width:768px){ 

	#magokoropack .imgList {
		margin-bottom:40px;
	}
	#magokoropack .imgList figure {
		width:33.33%;
	}

}

/*----------------------------------------------------------
	Display：840px → （ pc ）
----------------------------------------------------------*/

@media print, screen and (min-width:840px){

	#magokoropack > div table {
		margin-top:40px; 
		border-top: none;
	}
	#magokoropack > div table thead{
		display: table-header-group;
	}
	#magokoropack > div table thead th{ 
		background: #2e919e; 
		height: 39px; 
		padding: 12px 0; 
		border-left: solid 1px #fff; 
		font: 900 12px/1 "heisei-kaku-gothic-std"; 
		color: #fff; 
		text-align: center; 
		letter-spacing: -.05rem;
	}
	#magokoropack > div table thead th:first-of-type{ 
		border: none;
	}
	#magokoropack > div table thead th:nth-of-type(2){ 
		background: #ffe100; 
		color: #2e919e;
	}
	#magokoropack > div table thead th span{ 
		display: block; 
		font-size:1.1rem;
		letter-spacing:-0.08em;
		transform: scaleX(.9);
	}
	#magokoropack > div table tbody th span{ 
		display: block; 
		position: relative;
	}
	#magokoropack > div table tbody th span div{ 
		background: none; 
		width: 10px; 
		height: 10px; 
		position: absolute; 
		top: 50%; 
		transform: 
		translate(0,-50%);
	}
	#magokoropack > div table tbody th span div p{ 
		background: #fff; 
		width: 430px; 
		padding: 12px 12px; 
		position: absolute; 
		top: 50%; 
		transform: 
		translate(0,-50%);
	}
	#magokoropack > div table tbody th span div p::before{ 
		content: ""; 
		background: url(../img/arrow.svg) no-repeat 0 0/contain; 
		width: 18px; 
		height: 25px; 
		position: absolute; 
		top: 50%; 
		left: -12px; 
		transform: translateY(-50%);
	}
	#magokoropack > div table tbody th span div p a{ 
		display: none;
	}
  
	#magokoropack > div table tbody td{ 
		width: 36px; 
		height: 36px; 
		border-left: solid 1px #2e919e;
	}
	#magokoropack > div table tbody td:first-of-type{ 
		background: #ffe100; 
		padding: 12px 0; 
		border-top-color: #fff; 
		border-left-color: #fff; 
		color: #2e919e;
	}
	#magokoropack > div table tbody td:nth-of-type(2){ 
		border-left-color: #fff;
	}
	#magokoropack > div table tbody td:nth-of-type(n+2){ 
		display: table-cell;
	}
	#magokoropack > div table tbody tr:first-of-type td:nth-of-type(n+2){ 
		border-top-color: transparent;
	}
	#magokoropack > div table tbody td[colspan]{ 
		width: auto;
	}

}

/*----------------------------------------------------------
	Display：960px → （ pc ）
----------------------------------------------------------*/

@media print, screen and (min-width:960px){

	#magokoropack > div table tbody td{ 
		width: 42px; 
		height: 42px; 
	}
	
}


/*-----------------------------------------------------------------

	enjoypack

-----------------------------------------------------------------*/

#enjoypack .imgList {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-flex-wrap: wrap;
	-ms-flex-pack: wrap;
	flex-wrap: wrap;
	margin-bottom:25px;
}
#enjoypack .imgList li {
	width:48%;
}
#enjoypack .imgList li:nth-child(1) {
	margin:0 26%;
}
#enjoypack .imgList li:nth-child(2) {
	margin:0 4% 0 0;
}
#enjoypack .imgList li figure {
	width:100%;
	padding-top:100%;
	text-align:center;
	background:#ffffff;
	border-radius:100%;
	position:relative;
}
#enjoypack .imgList li figure img {
	width:80%;
	margin:0 auto;
	position:absolute;
	top:21%;
	left:0;
	right:0;
}
#enjoypack .imgList li figure figcaption {
	width:100%;
	font-weight:700;
	text-align:center;
	position:absolute;
	top:70%;
	left:0;
	right:0;
}


/*----------------------------------------------------------
	Display：560px → （ tablet ）
----------------------------------------------------------*/

@media screen and (min-width:560px){

	#enjoypack .imgList {
		margin-bottom:30px;
	}
	#enjoypack .imgList li {
		width:31.33%;
	}
	#enjoypack .imgList li:nth-child(1) {
		margin:0;
	}
	#enjoypack .imgList li:nth-child(2) {
		margin:0 3%;
	}
	
}

/*----------------------------------------------------------
	Display：768px → （ pc ）
----------------------------------------------------------*/

@media screen and (min-width:769px){

	#enjoypack .imgList {
		margin-bottom:40px;
	}
}



/*-----------------------------------------------------------------

	option

-----------------------------------------------------------------*/