@charset "UTF-8";

/*--------------------------------
reset
--------------------------------*/
html,body,div,p,img,iframe,a,span,blockquote,q,address,cite,
pre,code,em,small,strong,b,i,
header,article,section,nav,figure,figcaption,hgroup,menu,aside,footer,time,
h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dt,dd,
table,tbody,thead,tfoot,th,tr,td,
form,fieldset,legend,label,select,input,textarea,button{
    margin: 0;
    padding: 0;
    border: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: baseline;
}
header,article,section,nav,figure,figcaption,hgroup,menu,aside,footer{
    display: block;
}
ul li{
    list-style-type: none;
}
h1,h2,h3,h4,h5,h6{
    font-weight: 500;
}
body{
    line-height: 1;
}
a{
    text-decoration: none;
}
img{
    vertical-align: middle;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}
select,option,input:not([type=checkbox]):not([type=radio]),textarea,button{
    font: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}
blockquote::before,blockquote::after,q::before,q::after{
    content: '';
    content: none;
}
[type=submit],[type=button],[type=reset],[type=file],button{
    cursor: pointer;
}
:focus{
    outline: none;
}

/*--------------------------------
base
--------------------------------*/
body{
    margin: auto;
    max-width: 768px;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #323232;
}
h2,h3,h4,h5,h6{
    line-height: 1.3;
}
a{
    color: #29bbff;
}
img{
    max-width: 100%;
    height: auto;
}
.h2{
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
}
.h3{
	font-size: 18px;
	font-weight: bold;
}
.h4{
	font-size: 16px;
	font-weight: bold;
}
.tbr{
	display: none;
}
.btn{
    width: 100%;
	display: block;
    border: solid 30px;
    border-image: url(../images/btn-white.webp) 59 round;
    position: relative;
}
.btn::after{
	width: 40px;
	height: 40px;
	background: url(../images/arrow-white.webp) no-repeat right center / contain;
	top: -4px;
	right: -16px;
	bottom: 0;
}
.btn .inner{
	margin: -14px;
	padding: 0 40px 0 8px;
	display: block;
	background: white;
	text-align: center;
	font-size: 20px;
	line-height: 1.3;
	font-weight: bold;
	font-style: italic;
	color: #323232;
}
.ani{
	opacity: 0;
	transition: .5s;
	position: relative;
	top: 16px;
}
.ani-active{
	opacity: 1;
	top: 0;
}
.hero .scroll-down .arrow:before,
.hero .scroll-down .arrow:after,
.search-box::before,
.search-box::after,
.service .balloon::before,
.service .balloon::after,
.btn::after,
.search .item::after{
    margin: auto;
    content: "";
    position: absolute;
}
strong{
    background: linear-gradient(transparent 60%, #ffff3b 60%);
}

/*--------------------------------
contents
--------------------------------*/
.hero{
	background: url(../images/hero-bg-left.webp) no-repeat left center / contain, url(../images/hero-bg-right.webp) no-repeat right center / contain;
	overflow: hidden;
	position: relative;
	line-height: 0;
}
.hero .pr{
    display: inline-block;
    position: absolute;
    top: 16px;
    left: 8px;
    font-size: 14px;
    color: #323232;
}
.hero .woman{
    padding: 8px 0 0 16px;
}
.hero .hero-text-box{
	padding: 0 8px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 46px;
	z-index: 1;
}
.hero .scroll-down{
	margin: auto;
	width: 29px;
	position:absolute;
	left: 0;
	right: 0;
	bottom: 100px;
	animation: arrowmove 1s ease-in-out infinite;
	filter: drop-shadow(0 0 2px rgba(0,0,0,0.75)) drop-shadow(0 0 2px rgba(0,0,0,0.75));
	transform: translateZ(0);
}
.hero .scroll-down .arrow-box{
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 14px;
	color: #fff;
}
.hero .scroll-down .text{
	margin-top: 70px;
	margin-left: -20px;
	display: block;
	text-transform: uppercase;
	white-space: nowrap;
	letter-spacing: 2px;
	font-size: 12px;
	color: #fff;
}
.hero .scroll-down .arrow{
	width: 28px;
	height: 5px;
	position: absolute;
	transform: scale3d(0.5, 0.5, 0.5);
	animation: move 3s ease-out infinite;
	opacity: 0;
}
.hero .scroll-down .arrow:first-child{
	animation: move 3s ease-out 1s infinite;
}
.hero .scroll-down .arrow:nth-child(2){
	animation: move 3s ease-out 2s infinite;
}
.hero .scroll-down .arrow:before,
.hero .scroll-down .arrow:after{
	width: 51%;
	height: 100%;
	background: #fff;
	top: 0;
}
.hero .scroll-down .arrow:before{
	left: 0;
	transform: skew(0deg, 30deg);
}
.hero .scroll-down .arrow:after{
	width: 50%;
	right: 0;
	transform: skew(0deg, -30deg);
}
@keyframes move{
	25%{
		opacity: 1;
	}
	33%{
		opacity: 1;
		transform: translateY(30px);
	}
	67%{
		opacity: 1;
		transform: translateY(40px);
	}
	100%{
		opacity: 0;
		transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
	}
}
.search-box{
	margin-bottom: 74px;
	padding: 8px 8px 16px;
	background: #0099f3;
	position: relative;
}
.search-box::before,
.search-box::after{
	width: 100%;
	height: 74px;
	z-index: 1;
}
.search-box::before{
	background: url(../images/bg-top-blue.webp) no-repeat center bottom / 100% 100%;
	top: -73px;
	left: 0;
}
.search-box::after{
	background: url(../images/bg-btm-blue.webp) no-repeat top center / 100% 100%;
	left: 0;
	bottom: -73px;
}
.search-wrap.top .search-box.toppage-false{
	padding: 16px 8px;
}
.search-wrap.top .search-box.toppage-false::before{
    display: none;
}
.search-wrap.toppage-false + .service-wrap{
    margin-bottom: -74px;
    padding: 16px 8px 106px;
}
.search-wrap.btm .search-box{
    margin-top: 74px;
    margin-bottom: 0;
}
.search-wrap.btm .search-box.toppage-false::after{
    display: none;
}
.search-box .h2{
    padding: 32px 16px 32px 64px;
    background: url(../images/search-icon.webp) no-repeat left 24px center / 32px , url(../images/h2-bg-white.webp) no-repeat left center / 100% 100%;
    text-shadow: -4px -4px 0px #fff,-4px -3px 0px #fff,-4px -2px 0px #fff,-4px -1px 0px #fff,-4px 0px 0px #fff,-4px 1px 0px #fff,-4px 2px 0px #fff,-4px 3px 0px #fff,-4px 4px 0px #fff,-3px -4px 0px #fff,-3px 4px 0px #fff,-2px -4px 0px #fff,-2px 4px 0px #fff,-1px -4px 0px #fff,-1px 4px 0px #fff,0px -4px 0px #fff,0px 4px 0px #fff,1px -4px 0px #fff,1px 4px 0px #fff,2px -4px 0px #fff,2px 4px 0px #fff,3px -4px 0px #fff,3px 4px 0px #fff,4px -4px 0px #fff,4px -3px 0px #fff,4px -2px 0px #fff,4px -1px 0px #fff,4px 0px 0px #fff,4px 1px 0px #fff,4px 2px 0px #fff,4px 3px 0px #fff,4px 4px 0px #fff;
}
.search-box .h2 .count{
	padding: 0 3px;
}
.service-wrap{
	padding: 16px 8px 32px;
	background: url(../images/bg.webp) top center / contain;
}
.service-wrap .h2{
    padding: 32px 16px 32px 64px;
    background: url(../images/lights-icon.webp) no-repeat left 24px center / 32px , url(../images/h2-bg-blue.webp) no-repeat left center / 100% 100%;
	text-shadow:-2px -2px 0px #00a1ff,-2px -1px 0px #00a1ff,-2px 0px 0px #00a1ff,-2px 1px 0px #00a1ff,-2px 2px 0px #00a1ff,-1px -2px 0px #00a1ff,-1px 2px 0px #00a1ff,0px -2px 0px #00a1ff,0px 2px 0px #00a1ff,1px -2px 0px #00a1ff,1px 2px 0px #00a1ff,2px -2px 0px #00a1ff,2px -1px 0px #00a1ff,2px 0px 0px #00a1ff,2px 1px 0px #00a1ff,2px 2px 0px #00a1ff;
    color: white;
}
.search-box .search-result .item{
    padding: 0 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.search-box .item .result{
    width: calc(50% - 4px);
    background: white;
    text-align: center;
}
.search-box .item .result:nth-child(1),
.search-box .item .result:nth-child(2){
    margin-bottom: 8px;
}
.search-box .result .h3,
.search-box .result .text{
	padding: 2px;
}
.search-box .result .text{
	line-height: 1.4;
}
.search .item{
	position: relative;
}
.search .item::after{
	height: 0;
	border: solid 8px transparent;
	border-top: solid 12px #323232;
	top: -2px;
	right: 8px;
	bottom: 0;
}
.search .item:last-child::after{
	display: none;
}
.search form{
    padding: 0 8px;
}
.search select,
.search input{
    margin-bottom: 12px;
    padding: 8px;
    width: 100%;
    background: white;
    font-size: 16px!important;
    color: #323232;
}
.search .box.form-btn-box{
	margin-top: 0px;
}
.service .box{
	margin: 0 8px 24px;
	padding: 0 4px 4px 0;
	flex: 1;
}
.service .item{
    padding: 0 16px 16px;
    background: url(../images/genre-bg.webp) no-repeat top right / 120px, #ffffff;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
    overflow: hidden;
}
.service .h3{
	padding: 16px 0;
	min-height: 76px;
	display: flex;
	justify-content: space-between;
	line-height: 1.2;
}
.service .h3 .title,
.service .h3 .genre{
	display: flex;
	align-items: center;
}
.service .h3 .title{
	margin-right: 36px;
	padding-left: 52px;
	flex: 1;
	text-shadow: -2px -2px 0px #fff, -2px -1px 0px #fff, -2px 0px 0px #fff, -2px 1px 0px #fff, -2px 2px 0px #fff, -1px -2px 0px #fff, -1px 2px 0px #fff, 0px -2px 0px #fff, 0px 2px 0px #fff, 1px -2px 0px #fff, 1px 2px 0px #fff, 2px -2px 0px #fff, 2px -1px 0px #fff, 2px 0px 0px #fff, 2px 1px 0px #fff, 2px 2px 0px #fff;
	color: #004166;
}
.service .h3 .title{
	background: url(../images/app-icon.webp) no-repeat left center / 40px;
}
.service .h3 .title.web{
	background: url(../images/web-icon.webp) no-repeat left center / 40px;
}
.service .h3 .title.line{
	background: url(../images/line-icon.webp) no-repeat left center / 40px;
}
.service .h3 .genre{
	width: 60px;
	text-align: center;
	text-shadow:-2px -2px 0px #00517e,-2px -1px 0px #00517e,-2px 0px 0px #00517e,-2px 1px 0px #00517e,-2px 2px 0px #00517e,-1px -2px 0px #00517e,-1px 2px 0px #00517e,0px -2px 0px #00517e,0px 2px 0px #00517e,1px -2px 0px #00517e,1px 2px 0px #00517e,2px -2px 0px #00517e,2px -1px 0px #00517e,2px 0px 0px #00517e,2px 1px 0px #00517e,2px 2px 0px #00517e;
	color: white;
}
.service .banner{
	margin-bottom: 16px;
}
.service .banner img{
	width: 100%;
}
.service .icon-table{
	margin-bottom: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.service .icon-table .icon{
	margin-right: 8px;
	width: 82px;
}
.service .icon-table .table{
	flex: 1;
}
.service .table .th,
.service .table .td{
	padding: 2px 4px;
	width: 50%;
	border: solid 1px #00517e;
	font-size: 14px;
	line-height: 1.4;
	color: #00517e;
}
.service .table .th{
	vertical-align: middle;
}
.service .table .td{
	color: #323232;
}
.service .item > .text{
	margin-bottom: 16px;
}
.service .h4{
	margin-bottom: 16px;
	padding: 0 8px 16px;
	background: url(../images/h3-bg.webp) no-repeat bottom / 100% 8px;
	color: #004166;
}
.service .chart-box{
	margin-bottom: 16px;
	display: flex;
	align-items: center;
}
.service .chart-box .graph{
	margin-right: 6px;
	width: 62%;
}
.service .chart-box .data{
	margin-left: 6px;
	flex: 1;
	font-size: 14px;
}
.service .data .h5{
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: bold;
}
.service .data .h5.man{
	color: #295acc;
}
.service .data .h5.woman{
	margin-top: 8px;
	color: #cc2929;
}
.service .data .text{
	margin-bottom: 4px;
	padding-left: 8px;
	border-left: solid 24px;
	line-height: 1;
}
.service .data .text.man20{
	border-color: #295acc;
}
.service .data .text.man30{
	border-color: #244fb3;
}
.service .data .text.man40{
	border-color: #1f4399;
}
.service .data .text.man50{
	border-color: #1a3880;
}
.service .data .text.woman20{
	border-color: #cc2929;
}
.service .data .text.woman30{
	border-color: #b32424;
}
.service .data .text.woman40{
	border-color: #991f1f;
}
.service .data .text.woman50{
	border-color: #801a1a;
}
.contents .review .item-box{
	margin-bottom: 16px;
	display: flex;
	overflow-x: scroll;
}
.contents .review .item{
	margin: 0 16px 0 0;
	padding: 0;
	flex: 0 0 90%;
	background: none;
	box-shadow: none;
	overflow: inherit;
}
.contents .review .item:last-child{
	margin: 0;
}
.contents .review .info{
    margin-bottom: 18px;
    padding: 6px 0 6px 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.contents .review .name,
.contents .review .star{
	line-height: 1.3;
}
.contents .review .item:nth-child(7n+1) .info{
    background: url(../images/review-icon1.webp) no-repeat left center / contain;
}
.contents .review .item:nth-child(7n+2) .info{
    background: url(../images/review-icon5.webp) no-repeat left center / contain;
}
.contents .review .item:nth-child(7n+3) .info{
    background: url(../images/review-icon6.webp) no-repeat left center / contain;
}
.contents .review .item:nth-child(7n+4) .info{
    background: url(../images/review-icon2.webp) no-repeat left center / contain;
}
.contents .review .item:nth-child(7n+5) .info{
    background: url(../images/review-icon3.webp) no-repeat left center / contain;
}
.contents .review .item:nth-child(7n+6) .info{
    background: url(../images/review-icon4.webp) no-repeat left center / contain;
}
.contents .review .item:nth-child(7n+7) .info{
    background: url(../images/review-icon7.webp) no-repeat left center / contain;
}
.contents .review .star{
	color: #ffaa00;
}
.contents .review .balloon{
	margin: 0;
	padding: 8px;
	border: solid 2px #014167;
	border-radius: 16px;
}
.contents .review .balloon::before,
.contents .review .balloon::after{
	left: 16px;
	right: inherit;
}
.contents .review .balloon::before{
	border-top: none;
	border-bottom: solid 12px #014167;
	top: -12px;
	bottom: inherit;
}
.contents .review .balloon::after{
	border-top: none;
	border-bottom: solid 12px #fff;
	top: -9px;
	bottom: inherit;
}
.contents .review .h5{
	margin-bottom: 2px;
	text-align: left;
	font-size: 16px;
	font-weight: bold;
}
.contents .review .text{
	text-align: left;
	line-height: 1.4;
}
.service .balloon{
	margin: 0 0 16px;
	padding: 6px;
	background: white;
	border: solid 2px #fd66e6;
	border-radius: 24px;
	position: relative;
	text-align: center;
	line-height: 1.2;
}
.service .balloon::before,
.service .balloon::after{
	width: 0;
	border: solid 8px transparent;
	left: 0;
	right: 0;
}
.service .balloon::before{
	border-top: solid 12px #fd66e6;
	bottom: -20px;
}
.service .balloon::after{
	border-top: solid 12px white;
	bottom: -17px;
}
.service .btn{
    border-image: url(../images/btn-pink.webp) 59 round;
}
.service .btn::after{
	background: url(../images/arrow-pink.webp) no-repeat right center / contain;
}
.service .btn .inner{
    background: #fd66e6;
    color: white;
}
.pagination{
    display: flex;
    justify-content: space-between;
}
.pagination .box{
	margin-bottom: 0;
}
.pagination .item{
    padding: 12px 16px;
    background: #ffffff;
}
.pagination .btn{
    border-image: url(../images/btn-blue.webp) 44 round;
}
.pagination .btn::after{
	top: -5px;
}
.pagination .btn.prev::after{
	background: url(../images/arrow-left-blue.webp) no-repeat right center / contain;
	left: -16px;
	right: inherit;
}
.pagination .btn.next::after{
	background: url(../images/arrow-right-blue.webp) no-repeat right center / contain;
}
.pagination .btn .inner{
	background: #00a1ff;
}
.pagination .btn.prev .inner{
	padding: 0 0 0 40px;
}
.pagination .btn.next .inner{
	padding: 0 40px 0 0;
}
.pagination .btn.not{
    border-image: url(../images/btn-blue-active.webp) 44 round;
}
.pagination .btn.not::after{
	top: -1px;
}
.pagination .btn.not.prev::after{
	background: url(../images/arrow-left-blue-active.webp) no-repeat right center / contain;
	left: -14px;
	right: inherit;
}
.pagination .btn.not.next::after{
	background: url(../images/arrow-right-blue-active.webp) no-repeat right center / contain;
	right: -18px;
}
.pagination .btn.not .inner{
	background: #7e7e7e;
}
.pagination .btn.not.prev .inner,
.pagination .btn.not.next .inner{
	position: relative;
	top: 2px;
	left: 2px;
	color: #ececec;
}
.hero.small{
    height: 39vw;
    position: relative;
}
.hero.small .woman{
    width: 44%;
    position: absolute;
    right: -4%;
}
.hero.small .hero-text-box{
    padding-left: 1%;
    padding-right: 27%;
    bottom: 0;
}
.search-box.first-btm{
    margin-top: 74px;
    margin-bottom: 0;
}
.search-box.first-btm::after{
	display: none;
}
.service.info .item{
    padding: 16px 16px 0;
    background: #ffffff;
    overflow: hidden;
}
.info .h2{
    margin: 8px 0 24px;
}
.info .box{
    margin-bottom: 0;
    padding-top: 0;
}
.info .inner{
    padding-top: 0;
}
.info .inner .h3{
    margin-bottom: 8px;
    padding: 0 8px 16px 8px;
    min-height: inherit;
    background: url(../images/h3-bg.webp) no-repeat bottom / 100% 8px;
    color: #004166;
}
.info .inner .text{
	margin-bottom: 16px;
}
.contents.qr{
    margin-bottom: 16px;
    overflow: hidden;
}
.contents.qr .h2{
    background: url(../images/memo-icon-black.webp) no-repeat left 24px top 36px / 32px , url(../images/h2-bg-white.webp) no-repeat left center / 100% 100%;
}
.contents.qr .qr-box{
	margin: 0 16px;
	position: relative;
}
.contents.qr .qr-box > img{
	width: 100%;
}
.contents .qr-box .qr{
	width: 16%;
	position: absolute;
	right: 8%;
	bottom: 6%;
}
.contents .qr-box .qr canvas{
	border: solid 4px white;
}
.contents .qr canvas{
	width: 100%;
}
.footer{
    padding: 16px;
    background: #000;
    font-size: 12px;
}
.footer .ul{
	margin-bottom: 8px;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
.footer .li a{
    text-decoration: underline;
    color: white;
}
.footer .text{
    text-align: center;
    line-height: 1.4;
    color: white;
}
.footer.info{
    position: sticky;
    top: 100vh;
    width: 100%;
}

/*--------------------------------
tablet
--------------------------------*/
@media (min-width: 600px){
	body{
        font-size: 24px;
	}
	.h2{
		margin-bottom: 16px;
		font-size: 30px;
	}
	.h3{
		font-size: 26px;
	}
	.h4{
		font-size: 24px;
	}
	.tbr{
		display: block;
	}
	.btn{
		border: solid 50px;
		border-image: url(../images/btn-white.webp) 59 round;
	}
	.btn::after{
		width: 60px;
		height: 60px;
		background: url(../images/arrow-white.webp) no-repeat right center / contain;
		top: -8px;
		right: -24px;
	}
	.btn .inner{
		margin: -22px;
		padding: 0 60px 0 16px;
		font-size: 30px;
	}
	.hero .pr{
		top: 32px;
		left: 24px;
		font-size: 20px;
	}
	.hero .woman{
		padding: 16px 0 0 32px;
	}
	.hero .hero-text-box{
		padding: 0 16px;
		bottom: 84px;
	}
	.hero .scroll-down{
		width: 58px;
		bottom: 178px;
		filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.75));
	}
	.hero .scroll-down .arrow-box{
		font-size: 20px;
	}
	.hero .scroll-down .arrow{
		width: 56px;
		height: 10px;
	}
	@keyframes move{
		25%{
			opacity: 1;
		}
		33%{
			opacity: 1;
			transform: translateY(60px);
		}
		67%{
			opacity: 1;
			transform: translateY(80px);
		}
		100%{
			opacity: 0;
			transform: translateY(110px) scale3d(0.5, 0.5, 0.5);
		}
	}
	.hero .scroll-down .text{
		margin-top: 138px;
		margin-left: -26px;
		font-size: 20px;
	}
	.search-box{
		margin-bottom: 142px;
		padding: 16px 16px 32px;
	}
	.search-box::before,
	.search-box::after{
		height: 140px;
	}
	.search-box::before{
		top: -140px;
	}
	.search-box::after{
		bottom: -140px;
	}
	.search-box .h2{
		padding: 64px 32px 64px 128px;
		background: url(../images/search-icon.webp) no-repeat left 48px center / 64px, url(../images/h2-bg-white.webp) no-repeat left center / 100% 100%;
	}
	.search-wrap.toppage-false + .service-wrap{
		margin-bottom: -106px;
		padding: 32px 16px 212px;
	}
	.search form{
		padding: 0 16px;
	}
	.search select,
	.search input{
		margin-bottom: 24px;
		padding: 16px;
		font-size: 24px !important;
	}
	.search .item::after{
		border: solid 16px transparent;
		border-top: solid 24px #323232;
		top: -4px;
		right: 16px;
	}
	.search-wrap.top .search-box.toppage-false{
		padding: 32px 16px;
	}
	.service-wrap{
		padding: 32px 16px 64px;
	}
	.service-wrap .h2{
		padding: 64px 32px 64px 128px;
		background: url(../images/lights-icon.webp) no-repeat left 48px center / 64px, url(../images/h2-bg-blue.webp) no-repeat left center / 100% 100%;
		text-shadow: -4px -4px 0px #00a1ff,-4px -3px 0px #00a1ff,-4px -2px 0px #00a1ff,-4px -1px 0px #00a1ff,-4px 0px 0px #00a1ff,-4px 1px 0px #00a1ff,-4px 2px 0px #00a1ff,-4px 3px 0px #00a1ff,-4px 4px 0px #00a1ff,-3px -4px 0px #00a1ff,-3px 4px 0px #00a1ff,-2px -4px 0px #00a1ff,-2px 4px 0px #00a1ff,-1px -4px 0px #00a1ff,-1px 4px 0px #00a1ff,0px -4px 0px #00a1ff,0px 4px 0px #00a1ff,1px -4px 0px #00a1ff,1px 4px 0px #00a1ff,2px -4px 0px #00a1ff,2px 4px 0px #00a1ff,3px -4px 0px #00a1ff,3px 4px 0px #00a1ff,4px -4px 0px #00a1ff,4px -3px 0px #00a1ff,4px -2px 0px #00a1ff,4px -1px 0px #00a1ff,4px 0px 0px #00a1ff,4px 1px 0px #00a1ff,4px 2px 0px #00a1ff,4px 3px 0px #00a1ff,4px 4px 0px #00a1ff;
	}
	.service .item{
		padding: 0 32px 32px;
		background: url(../images/genre-bg.webp) no-repeat top right / 220px, #ffffff;
		box-shadow: 8px 8px 8px rgba(0,0,0,0.5);
	}
	.service .h3{
		padding: 32px 0;
		min-height: 126px;
	}
	.service .h3 .title{
		padding-left: 76px;
		background: url(../images/app-icon.webp) no-repeat left center / 60px;
		text-shadow: -4px -4px 0px #fff, -4px -3px 0px #fff, -4px -2px 0px #fff, -4px -1px 0px #fff, -4px 0px 0px #fff, -4px 1px 0px #fff, -4px 2px 0px #fff, -4px 3px 0px #fff, -4px 4px 0px #fff, -3px -4px 0px #fff, -3px 4px 0px #fff, -2px -4px 0px #fff, -2px 4px 0px #fff, -1px -4px 0px #fff, -1px 4px 0px #fff, 0px -4px 0px #fff, 0px 4px 0px #fff, 1px -4px 0px #fff, 1px 4px 0px #fff, 2px -4px 0px #fff, 2px 4px 0px #fff, 3px -4px 0px #fff, 3px 4px 0px #fff, 4px -4px 0px #fff, 4px -3px 0px #fff, 4px -2px 0px #fff, 4px -1px 0px #fff, 4px 0px 0px #fff, 4px 1px 0px #fff, 4px 2px 0px #fff, 4px 3px 0px #fff, 4px 4px 0px #fff;
	}
	.service .h3 .title.web{
		background: url(../images/web-icon.webp) no-repeat left center / 60px;
	}
	.service .h3 .title.line{
		background: url(../images/line-icon.webp) no-repeat left center / 60px;
	}
	.service .h3 .genre{
		width: 90px;
		text-shadow: -4px -4px 0px #00517e,-4px -3px 0px #00517e,-4px -2px 0px #00517e,-4px -1px 0px #00517e,-4px 0px 0px #00517e,-4px 1px 0px #00517e,-4px 2px 0px #00517e,-4px 3px 0px #00517e,-4px 4px 0px #00517e,-3px -4px 0px #00517e,-3px 4px 0px #00517e,-2px -4px 0px #00517e,-2px 4px 0px #00517e,-1px -4px 0px #00517e,-1px 4px 0px #00517e,0px -4px 0px #00517e,0px 4px 0px #00517e,1px -4px 0px #00517e,1px 4px 0px #00517e,2px -4px 0px #00517e,2px 4px 0px #00517e,3px -4px 0px #00517e,3px 4px 0px #00517e,4px -4px 0px #00517e,4px -3px 0px #00517e,4px -2px 0px #00517e,4px -1px 0px #00517e,4px 0px 0px #00517e,4px 1px 0px #00517e,4px 2px 0px #00517e,4px 3px 0px #00517e,4px 4px 0px #00517e;
	}
	.service .banner{
		margin-bottom: 32px;
	}
	.service .balloon{
		margin: 0 0 32px;
		padding: 8px;
		border: solid 4px #fd66e6;
		border-radius: 200px;
	}
	.service .balloon::before,
	.service .balloon::after{
		border: solid 16px transparent;
	}
	.service .balloon::before{
		border-top: solid 24px #fd66e6;
		bottom: -40px;
	}
	.service .balloon::after{
		border-top: solid 24px white;
		bottom: -32px;
	}
	.service .box{
		margin: 0 16px 48px;
		padding: 0 8px 8px 0;
	}
	.pagination .box{
		margin-bottom: 0;
	}
	.pagination .item{
		padding: 24px;
		background: #ffffff;
	}
	.pagination .btn.prev .inner{
		padding: 0 0 0 54px;
	}
	.pagination .btn.next .inner{
		padding: 0 68px 0 0;
	}
	.pagination .btn::after{
		top: -7px;
	}
	.pagination .btn.prev::after{
		left: -32px;
	}
	.pagination .btn.not::after{
		top: -2px;
	}
	.pagination .btn.not.prev::after{
		left: -28px;
	}
	.pagination .btn.not.next::after{
		right: -26px;
	}
	.pagination .btn.not.prev .inner,
	.pagination .btn.not.next .inner{
		top: 4px;
		left: 4px;
	}
	.hero.small{
		height: 240px;
	}
	.hero.small .woman{
		top: -16%;
	}
	.service .icon-table .icon{
		margin-right: 16px;
		width: 114px;
	}
	.service .table .th,
	.service .table .td{
		border: solid 2px #00517e;
		font-size: 20px;
	}
	.service .icon-table{
		margin-bottom: 32px;
	}
	.service .item > .text{
		margin-bottom: 32px;
	}
	.service .h4{
		margin-bottom: 32px;
		padding: 0 16px 16px;
	}
	.service .chart-box{
		margin-bottom: 32px;
	}
	.service .chart-box .graph{
		margin-right: 12px;
	}
	.service .chart-box .data{
		margin-left: 12px;
		font-size: 18px;
	}
	.service .data .h5{
		margin-bottom: 8px;
		font-size: 22px;
	}
	.service .data .text{
		margin-bottom: 8px;
		padding-left: 12px;
		border-left: solid 32px;
	}
	.service .data .h5.woman{
		margin-top: 12px;
	}
	.contents .review .item-box{
		margin-bottom: 32px;
	}
	.contents .review .item{
		margin: 0 32px 0 0;
	}
	.contents .review .info{
		margin-bottom: 36px;
		padding: 12px 0 12px 110px;
	}
	.contents .review .balloon{
		padding: 16px;
		border: solid 4px #014167;
		border-radius: 32px;
	}
	.contents .review .balloon::before,
	.contents .review .balloon::after{
		left: 24px;
	}
	.contents .review .balloon::before{
		border-bottom: solid 24px #014167;
		top: -24px;
	}
	.contents .review .balloon::after{
		border-bottom: solid 24px #fff;
		top: -16px;
	}
	.contents .review .h5{
		margin-bottom: 4px;
		font-size: 24px;
	}
	.service.info .item{
		padding: 32px 32px 0;
	}
	.info .box{
		margin-bottom: 0;
		padding-top: 0;
	}
	.info .inner .h3{
		margin-bottom: 16px;
	}
	.info .inner .text{
		margin-bottom: 32px;
	}
	.contents.qr .h2{
		background: url(../images/memo-icon-black.webp) no-repeat left 48px top 68px / 64px, url(../images/h2-bg-white.webp) no-repeat left center / 100% 100%;
	}
	.footer{
		padding: 32px;
		font-size: 20px;
	}
	.footer .ul{
		margin-bottom: 16px;
	}
}
@media (min-width: 768px){
	body{
		font-size: 28px;
	}
	.h2{
		font-size: 40px;
	}
	.h3{
		font-size: 32px;
	}
	.h4{
		font-size: 28px;
	}
	.btn::after{
		width: 70px;
		height: 70px;
	}
	.btn .inner{
		font-size: 40px;
	}
	.hero .pr{
		font-size: 24px;
	}
	.hero .scroll-down{
		bottom: 208px;
	}
	.search select,
	.search input{
		font-size: 28px !important;
	}
	.service .h3 .genre{
		width: 100px;
	}
	.service .h3 .title{
		padding-left: 94px;
	}
	.service .h3 .title.app{
		background: url(../images/app-icon.webp) no-repeat left center / 70px;
	}
	.service .icon-table .icon{
		margin-right: 24px;
		width: 145px;
	}
	.service .chart-box .data{
		font-size: 28px;
	}
	.service .h4{
		padding-bottom: 24px;
	}
	.service .data .h5{
		font-size: 30px;
	}
	.service .table .th,
	.service .table .td{
		padding: 4px 8px;
		font-size: 24px;
	}
	.contents .review .h5{
		font-size: 28px;
	}
	.contents .review .info{
		padding: 12px 0 12px 118px;
	}
	.contents.qr .h2{
		background: url(../images/memo-icon-black.webp) no-repeat left 48px top 72px / 64px, url(../images/h2-bg-white.webp) no-repeat left center / 100% 100%;
	}
	.footer{
		font-size: 24px;
	}
}

.icon_001{
    border-radius: 15px;
}

.banner_001{
}