/*----------------------------------------------------
** WEB COMBO / exsample.css *ページに合わせてファイル名を変更する
** Ver.1.0.0
** copyright 2020 GRANTEST Inc.
**----------------------------------------------------
** Common settings
**----------------------------------------------------*/

/*共通のスタイルをここに記載*/

@media only screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){
	
	/*レティーナディスプレイ用のスタイルをここに記載*/
	
}
@media screen and (max-width:767px){
	
	/*スマートフォン用のスタイルをここに記載*/
  	/*共通*/
	div.childinner{
		width:100%;
		padding:0 1em;
		box-sizing:border-box;
	}
  /*改行*/
  br.tb{
    display: none;
  }
  br.pc{
    display: none;
  }
  br.sp{
    display: block;
  }
	div.childinner.flow{
		width:100%;
		padding:50px 1em 0 1em;
		box-sizing:border-box;
	}
	div.flow dl{
		width:100%;
		margin:0 auto 0 auto;
		position:relative;
		z-index:1;
	}
	div.flow dl::after{
		content:"";
		position:absolute;
		width:2px;
		background-color:#e8599a;
		top:0;
		left:1.8em;
		z-index:-1;
		bottom:0;
		display:block;
	}
	div.flow dl:last-child::after{
		display:none;
	}
	div.flow dl dt{
		display:flex;
		align-items: center;
	}
	div.flow dl dt span{
		width:50px;
		height:50px;
		color:#fff;
		position:relative;
		z-index:1;
		font-size:24px;
		background-color:#e8599a;
		border-radius:50%;
		line-height:65px;
		text-align:center;
	}
	div.flow dl dt span::before{
		content:"STEP";
		position:absolute;
		top:5px;
		left:50%;
		transform:translateX(-50%);
		font-size:12px;
		line-height:initial;
	}
	div.flow.flow dl dt h3{
		width:calc(100% - 50px);
		color:#444;
		font-size:16px;
		font-weight:700;
		padding:0 0 0 10px;
		box-sizing:border-box;
	}
	div.flow.flow dl dd{
		padding:2em;
		width:100%;
		box-sizing:border-box;
		color:#444;
		font-size:14px;
		line-height:2em;
		padding-top:0;
		padding-left:4em;
	}
	div.flow.flow dl dd ul{
		list-style:none;
		list-style-position:outside;
		margin:5px 0;
	}
	div.flow.flow dl dd ul li{
		position:relative;
		z-index:1;
		padding:0 0 0 40px;
		margin-bottom:5px;
		box-sizing:border-box;
		line-height:30px;
	}
	div.flow.flow dl dd ul li span{
		width:30px;
		height:30px;
		background-color:#fff;
		position:absolute;
		left:0;
	}
	div.flow dl dd ul li span::before{
		content:"";
		width:15px;
		height:8px;
		border-left:3px solid #F00;
		border-bottom:3px solid #F00;
		position: absolute;
		transform:translate(-50%,-50%) rotate(-45deg);
		top:50%;
		left:50%;
	}
	div.service_link div.service_box{
		background-color:#fff;
		border-radius:20px;
		position:relative;
		z-index:1;
		padding-top:157px;
		padding-bottom:1em;
		margin-bottom:2em;
	}
	div.service_link div.service_box figure{
		position:absolute;
		top:0;
		left:0;
		width:100%;
	}
	div.service_link div.service_box figure img{
		width:100%;
		object-fit:cover;
		border-radius:20px 20px 0 0;
		height:157px;
	}
	div.service_link div.service_box dl{
		color:#444;
		text-align:center;
		padding:2em 0 1em 0;
	}
	div.service_link div.service_box dl dt{
		margin-bottom:1em;
		font-size:14px;
	}
	div.service_link div.service_box dl dd{
		font-size:18px;
	}
}
@media screen and (max-width:320px){
	
	/*小さいサイズのスマートフォン用のスタイルをここに記載*/
	
}
@media screen and (min-width:768px) and (max-width:1099px){
	
	/*タブレット用のスタイルをここに記載*/
  /*共通*/
	div.childinner{
		width:100%;
		padding:0 6vw;
		box-sizing:border-box;
	}
  /*ボタン*/
  div.service_link div.service_box{
    height: calc(190px + 2em);
  }
  div.service_link div.service_box div.btnarea{
    position: absolute;
    bottom: 2em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }
  div.service_link div.btnarea a{
    white-space: nowrap;
  }
  /*改行*/
  br.sp{
    display: none;
  }
  br.pc{
    display: none;
  }
  br.tb{
    display: block;
  }
	div.childinner.flow{
		width:100%;
		padding:70px 6vw 0 6vw;
		box-sizing:border-box;
	}
	div.flow dl{
		width:100%;
		margin:0 auto 0 auto;
		position:relative;
		z-index:1;
	}
	div.flow dl::after{
		content:"";
		position:absolute;
		width:2px;
		background-color:#e8599a;
		top:0;
		left:2.1em;
		z-index:-1;
		bottom:0;
		display:block;
	}
	div.flow dl:last-child::after{
		display:none;
	}
	div.flow dl dt{
		display:flex;
		align-items: center;
	}
	div.flow dl dt span{
		width:70px;
		height:70px;
		color:#fff;
		position:relative;
		z-index:1;
		font-size:30px;
		background-color:#e8599a;
		border-radius:50%;
		line-height:85px;
		text-align:center;
	}
	div.flow dl dt span::before{
		content:"STEP";
		position:absolute;
		top:10px;
		left:50%;
		transform:translateX(-50%);
		font-size:14px;
		line-height:initial;
	}
	div.flow.flow dl dt h3{
		width:calc(100% - 70px);
		color:#444;
		font-size:20px;
		font-weight:700;
		padding:0 0 0 20px;
		box-sizing:border-box;
	}
	div.flow.flow dl dd{
		padding:2em;
		width:100%;
		box-sizing:border-box;
		color:#444;
		font-size:14px;
		line-height:2em;
		padding-top:0;
		padding-left:6em;
	}
	div.flow.flow dl dd ul{
		list-style:none;
		list-style-position:outside;
		margin:5px 0;
	}
	div.flow.flow dl dd ul li{
		position:relative;
		z-index:1;
		padding:0 0 0 40px;
		margin-bottom:5px;
		box-sizing:border-box;
		line-height:30px;
	}
	div.flow.flow dl dd ul li span{
		width:30px;
		height:30px;
		background-color:#fff;
		position:absolute;
		left:0;
	}
	div.flow dl dd ul li span::before{
		content:"";
		width:15px;
		height:8px;
		border-left:3px solid #F00;
		border-bottom:3px solid #F00;
		position: absolute;
		transform:translate(-50%,-50%) rotate(-45deg);
		top:50%;
		left:50%;
	}
	div.service_link{
		display:flex;
	}
	div.service_link.childinner{
		padding:0 5px;
		width:100%;
		box-sizing:border-box;
	}
	div.service_link div.service_box{
		width:calc((100% / 3) - 10px);
		margin:0 5px;
		background-color:#fff;
		border-radius:20px;
		position:relative;
		z-index:1;
		padding-top:150px;
		padding-bottom:2em;
	}
	div.service_link div.service_box figure{
		position:absolute;
		top:0;
		left:0;
		width:100%;
	}
	div.service_link div.service_box figure img{
		width:100%;
		object-fit:cover;
		border-radius:20px 20px 0 0;
		height:150px;
	}
	div.service_link div.service_box dl{
		color:#444;
		text-align:center;
		padding:2em 0 1em 0;
	}
	div.service_link div.service_box dl dt{
		margin-bottom:1em;
	}
	div.service_link div.service_box dl dd{
		font-size:24px;
	}
	div.service_link div.service_box div.btnarea a{
		font-size:20px;
	}
}
@media (orientation: landscape) and (max-width:568px){
	
	/*小さいサイズのスマートフォン用横向きのスタイルをここに記載*/
	
}
@media (orientation: landscape) and (min-width:569px) and (max-width:724px){
	
	/*大きいサイズのスマートフォン用横向きのスタイルをここに記載*/
	
}
@media (orientation: landscape) and (min-width:725px) and (max-width:1099px){
	
	/*タブレット用横向きのスタイルをここに記載*/
	
}
@media screen and (min-width:1100px){
	
	/*PC用のスタイルをここに記載*/
  /*共通*/
	div.childinner{
		width:1100px;
		margin:0 auto;
	}
  /*ボタン*/
  div.service_link div.service_box{
    height: calc(190px + 2em);
  }
  div.service_link div.service_box div.btnarea{
    position: absolute;
    bottom: 2em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }
  div.service_link div.btnarea a{
    white-space: nowrap;
  }
  /*改行*/
  br.sp{
    display: none;
  }
  br.tb{
    display: none;
  }
  br.pc{
    display: block;
  }
	div.childinner{
		width:1100px;
		margin:0 auto;
	}
	div.flow{
		padding:100px 0 0 0;
	}
	div.flow dl{
		width:800px;
		margin:0 auto 0 auto;
		position:relative;
		z-index:1;
	}
	div.flow dl:last-child::after{
		display:none;
	}
	div.flow dl::after{
		content:"";
		position:absolute;
		width:2px;
		background-color:#e8599a;
		top:0;
		left:2.1em;
		z-index:-1;
		bottom:0;
		display:block;
	}
	div.flow dl dt{
		display:flex;
		align-items: center;
	}
	div.flow dl dt span{
		width:70px;
		height:70px;
		color:#fff;
		position:relative;
		z-index:1;
		font-size:30px;
		background-color:#e8599a;
		border-radius:50%;
		line-height:85px;
		text-align:center;
	}
	div.flow dl dt span::before{
		content:"STEP";
		position:absolute;
		top:10px;
		left:50%;
		transform:translateX(-50%);
		font-size:14px;
		line-height:initial;
	}
	div.flow.flow dl dt h3{
		width:calc(100% - 70px);
		color:#444;
		font-size:24px;
		padding:0 0 0 20px;
		box-sizing:border-box;
		font-weight:700;
	}
	div.flow.flow dl dd{
		padding:2em;
		width:100%;
		box-sizing:border-box;
		color:#444;
		font-size:14px;
		line-height:2em;
		padding-top:0;
		padding-left:6em;
	}
	div.flow.flow dl dd ul{
		list-style:none;
		list-style-position:outside;
		margin:5px 0;
	}
	div.flow.flow dl dd ul li{
		position:relative;
		z-index:1;
		padding:0 0 0 40px;
		margin-bottom:5px;
		box-sizing:border-box;
		line-height:30px;
	}
	div.flow.flow dl dd ul li span{
		width:30px;
		height:30px;
		background-color:#fff;
		position:absolute;
		left:0;
	}
	div.flow dl dd ul li span::before{
		content:"";
		width:15px;
		height:8px;
		border-left:3px solid #F00;
		border-bottom:3px solid #F00;
		position: absolute;
		transform:translate(-50%,-50%) rotate(-45deg);
		top:50%;
		left:50%;
	}
	div.service_link{
		display:flex;
	}
	div.service_link div.service_box{
		width:calc((100% / 3) - 30px);
		margin:0 15px;
		background-color:#fff;
		border-radius:20px;
		position:relative;
		z-index:1;
		padding-top:208px;
		padding-bottom:2em;
	}
	div.service_link div.service_box figure{
		position:absolute;
		top:0;
		left:0;
		width:100%;
	}
	div.service_link div.service_box figure img{
		width:100%;
		object-fit:cover;
		border-radius:20px 20px 0 0;
		height:208px;
	}
	div.service_link div.service_box dl{
		color:#444;
		text-align:center;
		padding:2em 0 1em 0;
	}
	div.service_link div.service_box dl dt{
		margin-bottom:1em;
	}
	div.service_link div.service_box dl dd{
		font-size:24px;
	}
}