@charset "utf-8";

/* style-pepup.css
 * おまかせプラン ver.7 - v1.0.0
 * 2022-09-01
 * **************************************************
 * Protection
 * **************************************************
 */

/* Protection
------------------------------------------------------------------- */

.pepup-logo{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	width:100%;
	justify-content:center;
	padding:0;
}
.pepup-logo li{
	font-size:1.2em;
}
.pepup-logo li:nth-child(1){
	width:60%;
}

.pepup-logo li:nth-child(2){
	width:25%;
}

.pepup-logo li img{
	max-width:100%;
}

.pepup-logo li:nth-child(2) img{
	width:100%;

}

/* Content */
.box-blue{
	border: 2px solid #0066FF;
	padding:20px;
}
.box-blue h3{
	color:#0066FF;
	font-weight:bold;
}


.riyo{
	margin-top:50px;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

.riyo li{
	width:45%;
	padding:20px 10px;
	margin:0 auto;
	background:#b2e7fa;
	border-radius:1vw;
	position:relative;
}
.riyo li + li{
	margin-top: 0;
}

.riyo h4 {
	position:relative;
	font-size:1.7em;
}

.riyo h4 {
	display:block;
	position:absolute;
	top:-20px;
  left: 50%;
  transform:translateX(-50%); 
	background:#fff;
	width:80%;
	text-align:center;
	padding:10px 5px;
	border:2px solid #0070c0;
	color:#0070c0;
	font-weight:bold;
	text-decoration:none;
  -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
	border-radius:0.5vw;
}
.riyo h4 a:hover{
  -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
  transform: scale(1.01);}


.riyo h4 a{
}

.riyo li{
	padding-top:60px;
}
.riyo li:nth-child(1) p img{
	width:100%;
	max-width:560px;
}


.riyo li p img{
	width:80%;
}


.security img{
	display:inline-block!important;
}

.btn{
	margin:0 auto;
	width:95%;
	background:#00b0f0;
	border-radius:0.5vw;
  -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
}
.btn a{
	display:block;
	padding:10px;
	color:#fff;
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	transition: 0.3s;
	border-radius:0.5vw;
	font-size:1.2em;
	line-height:1.5;
}
.btn._round {
	border-radius:100vw!important;
	
}
.btn._round a{
	display:flex;
	justify-content:center;
	align-items:center;
	min-height:70px;}

.pc-top{
	margin-top:20px!important;
}
.pc-top02{
	margin-top:40px!important;
}


.riyo li a img:hover,
.btn:hover{
  -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
  transform: scale(1.01);}

.riyo li a img:hover{
	border-radius:12px;
}

.red-box{
	border:3px solid red;
	padding:10px 20px;
	margin:0 20px;
}

.pink{
	color:#ff339b;
}

h5 a{
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.app-dl{
	display:flex;
	justify-content:center;
	align-items:center;
}
.app-dl li + li{
	margin-left:5%;
}

.contact-list{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin:0 auto;
}

.contact-list li{
	width:49%;
}

.line3{
	padding:0;
	display:flex;
	justify-content:space-between;
	align-items:start;	
	flex-wrap:wrap;
}
.line3 li{
	width:calc((100% - 8%) /3);
	text-align:center;
	margin-bottom:30px;
}

.line3 li img{
	max-width:100%;
	border:1px solid #00b0f0;
	border-radius:0.5vw;
}

.line3 li h6{
	font-weight:bold;
	color:#00b0f0;
	text-align:center;
	margin-top:10px!important;
}


.pepup-s{
	margin-top:20px;
}
.pepup-s td{
	padding:0!important;
	font-size:1.6em;
	vertical-align:middle;
	width:260px;
}
.img-s{
	width:110px!important;
}


.code p img{
	max-width:100%;
}
.box-blue02{
	margin:0 auto;
}
h6{
	font-size:1.8em!important;
}
.number_list2 li .nm{
	top:0;
	bottom:0;
	padding:9px 0;
}
.pepup h3.blue-t{
	display:inline-block;
	font-size:1.8em!important;
	margin:10px 0 20px!important;
	background:#00b0f0;	
	padding:10px 20px!important;
	color:#fff;
	font-weight:bold;
	border-radius:0.5vw;
  -webkit-box-shadow: 4px 4px 3px 0px rgba(0,0,0,0.2);
  box-shadow: 4px 4px 3px 0px rgba(0,0,0,0.2);
	margin:10px 10px 20px!important;
}
.box-blue02{
	background:#e0f0ff;
	border-radius:0.5vw;
	padding:20px;
}

h6{font-weight:bold;
	color:#00b0f0;
	font-size:1.1em;
	margin-top:30px!important;
}

.url{
	display:flex;
	padding:0;
	align-items:end;
	word-break: break-all;
}

.url li:nth-child(2){
	margin-left:5%;
}

.h6-m{display:block;
	font-weight:bold;
	color:#00b0f0;
	margin-bottom:10px;
}

.urlb{
	display:inline-block;
	margin-right:10px;;
	border:1px solid #00b0f0;
	color:#00b0f0;
	font-weight:bold;
	padding:5px 10px;
	
}

.number_list2{
	margin-top:30px;
	padding:0;
	display:flex;
	flex-wrap:wrap;
}

.number_list2 li{
	width:100%;
	position:relative;
	display:block;
	margin-bottom:30px;
	padding-left:50px;
	font-size:1.6em;
}

.number_list2 li .nm{
	position:absolute;
	top:5px;
	margin:auto;
	left:0px;
	background:#00b0f0;
	color:#fff;
	font-weight:bold;
	width:40px;
	text-align:center;
	height:50px;
	padding:10px 0 10px;
}
.marker-blue{
	background:#bbedff;
}


@media screen and (max-width: 767px) {
  /* Protection
  ------------------------------------------------------------------- */
  /* Content */

.riyo h4 {
	font-size:1.6em;
	padding:10px;
	width:90%;
}

.riyo li{
	width:100%;
	padding:60px 20px 20px;
	margin:0 0;
}
	
.riyo li + li{
	margin-top: 50px;
}

.btn a{
	font-size:1em;
}
	
.riyo li p img{
	width:100%;
}
.pc-top{
	margin-top:10px!important;
}
.pc-top02{
	margin-top:20px!important;
}
.red-box{
	padding:10px 20px;
	margin:0;
}
.app-dl{
	padding:0;
	display:block;
	margin:0 10px;
}
.app-dl li + li{
	margin-left:0;
	margin-top:10px;
}

.contact-list{
	padding:0;
	display:block;
	margin:0 10px;
}

.contact-list li{
	width:100%;
	margin-top:20px;
}

.line3{
	padding:0;
	margin:0 10px;
}
.line3 li{
	width:calc((100% - 4%) /2);
}

.pepup-s{
	margin:20px auto;
}
	
.pepup-s td{
	width:100%;
	display:block;
	padding:5px!important;
	text-align:center!important;
}
}
.img-s{
	text-align:center;
	margin:0 auto;
}

	
}