@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Open+Sans:ital,wght@0,300..600;1,300..600&display=swap');


/* =================== */
/*       pubulic       */
/* =================== */
html {
	font-size:clamp(5px, 0.6944vw, 25px); /* デザインベース2880pxの時の20px */
	scroll-padding-top:150px;
	overflow-x:hidden;
}
/*
@font-face
{
font-family: SourceHanCodeJP;
src: url('SourceHanCodeJP-Light.otf')
     format("opentype");
font-weight: 100;
}
@font-face
{
font-family: SourceHanCodeJP;
src: url('SourceHanCodeJP-Medium.otf')
     format("opentype");
font-weight: 600;
}
@font-face
{
font-family: SourceHanCodeJP;
src: url('SourceHanCodeJP-Bold.otf')
     format("opentype");
font-weight: 600;
}
@font-face
{
font-family: SourceHanCodeJP;
src: url('SourceHanCodeJP-RegularIt.otf')
     format("opentype");
font-weight: 400;
}*/
body {
	position:relative;
	-webkit-text-size-adjust:100%;
	font-family: "Open Sans", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style:normal;
	letter-spacing:.05em;
	font-feature-settings: "palt";
	overflow-x:hidden;
}



main {
	position:relative;
	margin-top:9.1rem;
}



img {
  width:100%;
  height:auto;
  max-width:100%;
}

a { transition:0.5s ease all; }


.sp-on { display:none; }

.flex-box {
	display:-webkit-box;
	display:flex;
	-webkit-box-pack:justify;
	justify-content:space-between;
	align-items:center;
}



.inner-box {
	width:129rem;
	margin:0 auto;
	position:relative;
}
body.index main .inner-box { width:110rem; }
body.lower #main-cont-box .inner-box { width:110rem; }
.max-w-box {
	max-width:2500px;
	margin:0 auto;
	position:relative;
}


h2,h3,h4 { font-weight:100; }







/* =================== */
/*       #header       */
/* =================== */
#header {
	background:#fff;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	overflow:hidden;
	z-index:100;
}
#header .inner-box { padding:1.5rem 0; }
#header #site-logo { width:11.1rem; }
#header #site-logo a:hover { opacity:.5; }
#header #main-nav li {
	/*font-size:1.4rem;*/
	font-size:1.5rem;
	font-weight:600;
	margin-right:3rem;
}
#header #main-nav li a:hover { opacity:.5; }
#header .tel-box { margin-top:-2rem; }
#header .tel-box .icon { display:none; }
#header .tel-box .tel-num a {
	font-size:2.25rem;
	color:#0088db;
	font-weight:600;
}
#header .tel-box .tel-num a:hover { opacity:.5; }
#header .tel-box .tel-time {
	font-size:1.2rem;
	margin-left:.7rem;
}
#header .sub-menu-box {
	position:absolute;
	right:1.5rem;
	bottom:0;
}
#header .sub-menu-box .txt { display:none; }
#header .sub-menu-box .txt::before {
	content:"\\";
	margin-right:.5rem;
}
#header .sub-menu-box .txt::after {
	content:"/";
	margin-left:.5rem;
}
#header .sub-menu .tab a {
	line-height:3rem;
	width:16.25rem;
	text-align:center;
	color:#fff;
	border-radius:1.5rem 1.5rem 0 0;
	font-size:1.5rem;
	font-weight:600;
	display:block;
}
#header .sub-menu .tab a:hover { margin-bottom:-.3rem; }
#header .sub-menu .tab1 { margin-right:1.5rem; }
#header .sub-menu .tab1 a { background:#0088db; }
#header .sub-menu .tab2 a { background:#2c3edd; }
#header #hamburger { display:none; }







/* =================== */
/*       #footer       */
/* =================== */
#footer { margin-top:12rem; }
#footer .security-box {
	background:#eee;
	padding:3rem 0;
}
#footer .security-box .title {
	font-size:2.5rem;
	font-weight:600;
	padding-left:2rem;
}
#footer .security-box .mark {
	width:18.7rem;
	margin-right:4rem;
}
#footer .security-box .txt {
	font-size:1.5rem;
	line-height:1.73;
	width:57rem;
}
#footer .contact-box {
	margin:3rem auto 12rem;
	padding:3rem 0;
	background:#0088db;
}
#footer .contact-box .inner-box { padding:0 2rem; }
#footer .contact-box .title {
	font-size:2.5rem;
	color:#fff;
	font-weight:500;
	line-height:1.4;
	margin-right:2rem;
}
#footer .contact-box .txt-box {
	padding-left:2rem;
	text-align:center;
}
#footer .contact-box .txt-box .tel-num {
	font-size:2.75rem;
	color:#fff;
	font-weight:500;
	margin:1rem 0 .5rem;
}
#footer .contact-box .txt-box .tel-num .line {
	display:flex;
	margin-bottom:1rem;
}
#footer .contact-box .txt-box .tel-num dt {
	font-size:2.25rem;
	margin-right:2.5rem;
}
#footer .contact-box .txt-box .tel-num dd a {
	display:flex;
	align-items:center;
}
#footer .contact-box .txt-box .tel-num dd a:hover { opacity:.5; }
#footer .contact-box .txt-box .tel-num dd i { font-size:75%; }
#footer .contact-box .txt-box .tel-time {
	font-size:1.35rem;
	color:#fff;
}
#footer .contact-box .btn-box .btn { width:30rem; }
#footer .contact-box .btn-box .btn a {
	width:100%;
	line-height:10.25rem;
	text-align:center;
	font-size:2rem;
  color:#fff;
  display:block;
  border-radius:1.5rem;
  font-weight:600;
}
#footer .contact-box .btn-box .btn1 a { background:#fff; color:#0088db; }
#footer .contact-box .btn-box .btn2 a { background:#2c3edd; color:#fff; }
#footer .contact-box .btn-box .btn1 { margin-right:2.5rem; }
#footer .contact-box .btn-box .btn a:hover { opacity:.5; }
#footer .footer-box {
	padding-bottom:9rem;
	position:relative;
	overflow:hidden;
}
#footer .footer-box::before {
	content:"";
	width:146rem;
	height:22.55rem;
	background:url(../img/deco2.png) no-repeat;
	background-size:cover;
	display:block;
	position:absolute;
	bottom:-13rem;
	left:-1rem;
}
#footer .footer-box .inner-box { align-items:flex-end; }
#footer .footer-box .l-box { justify-content:flex-start; }
#footer .footer-box .ypg-logo {
	width:16.4rem;
	margin-right:3.5rem;
}
#footer .footer-box .foot-link { margin-bottom:1.5rem; }
#footer .footer-box .foot-link li {
	font-size:1.5rem;
	font-weight:600;
	margin-right:3rem;
}
#footer .footer-box .foot-link li a:hover { opacity:.5; }
#footer .footer-box .name-list li {
	font-size:1.5rem;
	font-weight:600;
	margin-bottom:.5rem;
}
#footer .footer-box small { font-size:1.3rem; }








/* =================== */
/*       body.index       */
/* =================== */
body.index #kv {
	background:#0088db;
	padding:5rem 0 4.5rem;
	position:relative;
	height:60rem;
	width:100%;
}
body.index #kv::before {
	content:"";
	width:146.3rem;
	height:29.95rem;
	background:url(../img/deco.png) no-repeat;
	background-size:cover;
	display:block;
	position:absolute;
	top:11rem;
	left:-1rem;
}
body.index #kv .copy {
	font-size:7.8rem;
	color:#fff;
	position:absolute;
	left:10rem;
	bottom:5rem;
	line-height:1.25;
	font-weight:100;
}
body.index #kv .contact-box {
	width:42rem;
	position:absolute;
	right:10rem;
	bottom:5rem;
}
body.index #kv .contact-box .txt {
	font-size:2.25rem;
	font-weight:600;
	color:#fff;
	margin-bottom:2rem;
	text-align:center;
}
body.index #kv .contact-box .txt::before {
	content:"\\";
	margin-right:.5rem;
}
body.index #kv .contact-box .txt::after {
	content:"/";
	margin-left:.5rem;
}
body.index #kv .contact-box .btn-box { justify-content:center; }
body.index #kv .contact-box .btn1 { margin-right:2rem; }
body.index #kv .contact-box .btn a {
	font-size:1.95rem;
	font-weight:600;
	text-align:center;
	width:20rem;
	line-height:8rem;
	border-radius:1.5rem;
	display:block;
}
body.index #kv .contact-box .btn1 a { background:#fff; color:#0088db; }
body.index #kv .contact-box .btn2 a { background:#2c3edd; color:#fff; }
body.index #kv .contact-box .btn a:hover { opacity:.5; }

body.index #kv .slider-box .slider-container { width: 100%; overflow: visible; position: relative; }
body.index #kv .slider-box .slider-track { display: flex; }
body.index #kv .slider-box .card {
  min-width:26rem;
  height:30rem;
  margin:0 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transform: scale(.9);
  /* トランジション設定（縮むときもこの速度で戻ります） */
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.index #kv .slider-box .card.is-active {
  transform: scale(1.4);
  opacity: 1;
  margin-top:2rem;
}
body.index #kv .slider-box .card img { border-radius:1.5rem; }

body.index .client-logo-box {
	padding:4rem 0;
	border-bottom:1px solid #ccc;
}
body.index .client-logo-box img {
	margin:0 3rem;
	width:auto;
	max-height:3.85rem;
}

body.index main h2 {
	/*font-size:2.5rem;*/
	font-size:2.6rem;
	text-align:center;
	font-weight:600;
}
body.index main h2::after {
	content:"";
	width:5.5rem;
	height:.2rem;
	display:block;
	margin:1rem auto 3rem;
}
body.index main #scene-sec h2::after { background:#a9269b; }
body.index main #features-sec h2::after { background:#6cb8c4; }
body.index main #function-sec h2::after { background:#69c438; }
body.index main #support-sec h2::after { background:#2553a7; }
body.index main #blog-sec h2::after { background:#ea8742; }

body.index #scene-sec { margin:6rem auto 7.5rem; }
body.index #scene-sec .inner-box > ul { align-items:initial; }
body.index #scene-sec .inner-box > ul > li {
	border-radius:1.5rem;
	background:#eee;
	width:calc((100% - 4rem) / 3);
	padding:3rem;
}
body.index #scene-sec li h3 {
	font-size:2rem;
	text-align:center;
	font-weight:600;
}
body.index #scene-sec li:first-child h3 { padding:1rem 0; }
body.index #scene-sec li h3 span {
	font-size:1.5rem;
	display:block;
	margin-top:.5rem;
}
body.index #scene-sec li .icon {
	width:13.2rem;
	margin:1.5rem auto;
}
body.index #scene-sec li li {
	display:flex;
	/*font-size:1.1rem;*/
	font-size:1.2rem;
	line-height:1.6;
}
body.index #scene-sec li li::before {
	content:"●";
	color:#a9269b;
}

body.index #features-sec .copy {
	font-size:3rem;
	line-height:1.66;
	color:#3e929f;
	text-align:center;
}
body.index #features-sec .copy2 {
	/*font-size:1.3rem;*/
	font-size:1.4rem;
	line-height:1.73;
	text-align:center;
	margin:1rem auto 3rem;
}
body.index #features-sec ul {
	flex-wrap:wrap;
	align-items:initial;
}
body.index #features-sec li {
	border-radius:1.5rem;
	border:1px solid #d8d8d8;
	width:calc((100% - 2rem) / 2);
	padding:4rem;
	display:flex;
	justify-content:space-between;
	margin-bottom:2rem;
}
body.index #features-sec li .icon { width:9.3rem; }
body.index #features-sec li .txt-box { width:calc(100% - 9.3rem - 2rem); }
body.index #features-sec li h3 {
	font-size:2rem;
	font-weight:600;
	margin-bottom:2rem;
}
body.index #features-sec li .txt-box .txt {
	/*font-size:1.3rem;*/
	font-size:1.4rem;
	line-height:1.73;
}

body.index aside.contact-link-box {
	justify-content:center;
	padding:3.5rem 0;
	background:#ddebf3;
	margin:7rem auto;
}
body.index aside.contact-link-box .link a {
	width:40rem;
	line-height:10.25rem;
	text-align:center;
	font-size:2rem;
	color:#fff;
	display:block;
	border-radius:1.5rem;
	font-weight:600;
}
body.index aside.contact-link-box .link1 a { background:#0088db; }
body.index aside.contact-link-box .link2 a { background:#2c3edd; }
body.index aside.contact-link-box .link1 { margin-right:2rem; }
body.index aside.contact-link-box .link a:hover { opacity:.5; }

body.index #function-sec ul { align-items:initial; }
body.index #function-sec li {
	width:calc((100% - 6rem) / 4);
	border-radius:1.5rem;
	background:#f4f4f4;
	padding:4rem 0;
}
body.index #function-sec li .txt {
	font-size:2rem;
	font-weight:600;
	text-align:center;
	margin-bottom:2rem;
}
body.index #function-sec li .icon {
	width:8.6rem;
	margin:0 auto;
}
body.index #function-sec .btn {
	position:absolute;
	top:0;
	right:0;
}
body.index #function-sec .btn a {
	font-size:1.6rem;
	font-weight:600;
	width:22.5rem;
	line-height:3.5rem;
	border-radius:100vmax;
	color:#fff;
	background:#69c438;
	font-weight:600;
	display:block;
	text-align:center;
}
body.index #function-sec .btn a:hover { opacity:.5; }

body.index #support-sec { margin:8.5rem auto; }
body.index #support-sec ul { align-items:initial; }
body.index #support-sec li {
	width:calc((100% - 2rem) / 2);
	border-radius:1.5rem;
	background:#eee;
	padding:4rem;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
body.index #support-sec li .icon { width:9.3rem; }
body.index #support-sec li .txt-box { width:calc(100% - 9.3rem - 2rem); }
body.index #support-sec li h3 {
	font-size:2rem;
  font-weight:600;
  margin-bottom:2rem;
}
body.index #support-sec li .txt-box .txt {
	/*font-size:1.3rem;*/
	font-size:1.4rem;
  line-height:1.73;
}

body.index #blog-sec .btn {
	position:absolute;
	top:0;
	right:0;
}
body.index #blog-sec .btn a {
	font-size:1.6rem;
	font-weight:600;
	width:22.5rem;
	line-height:3.5rem;
	border-radius:100vmax;
	color:#fff;
	background:#ea8742;
	font-weight:600;
	display:block;
	text-align:center;
}
body.index #blog-sec .btn a:hover { opacity:.5; }
body.index #blog-sec ul {
	align-items:initial;
	justify-content:flex-start;
}
body.index #blog-sec li {
	width:calc((100% - 4rem) / 3);
	border:1px solid #ccc;
	border-radius:1.5rem;
	padding:4rem 2.5rem;
	margin-right:2rem;
}
body.index #blog-sec li:last-child { margin-right:0; }
body.index #blog-sec li .title {
	font-size:1.8rem;
	font-weight:600;
	line-height:1.47;
	overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
body.index #blog-sec li .thumb {
	aspect-ratio:7.3 / 4.1;
	overflow:hidden;
	margin:2.5rem 0 1rem;
}
body.index #blog-sec li .thumb img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:0.5s ease all;
}
body.index #blog-sec li a:hover .thumb img { transform:scale(1.05); }
body.index #blog-sec li .txt {
	/*font-size:1.3rem;*/
	font-size:1.4rem;
	text-align:center;
}




@media screen and (max-width: 1440px) {
	.inner-box { width:90%; }
}
@media screen and (max-width: 768px) {
	html { font-size:clamp(10px, 0.6944vw, 25px); }
	main { margin-top:90px; }

	.inner-box { width:93%; }
	body.index main .inner-box { width:93%; }
	body.lower #main-cont-box .inner-box { width:93%; }

	.sp-on { display:initial; }
	.pc-on { display:none; }

	html.open { overflow:hidden; }
	body.open { overflow:hidden; }
	#header { height:90px; }
	#header .inner-box { padding:15px 5px 15px 10px; }
	#header #main-nav { display:none; }
	#header .tel-box { margin-top:0; margin-right:10px; }
	#header .tel-box .icon { display:block; font-size:45px; color:#0088db; }
	#header .tel-box .tel-num { display:none; }
	#header .tel-box .tel-time { display:none; }
	#header .r-box { display:flex; }
	#header #hamburger { display:block; font-size:45px; color:#0088db; }
	#header.open #main-nav { display:block; position:fixed; top:90px; left:0; width:100%; background:rgba(0,136,219,.9); height:calc(100svh - 90px); }
	#header #main-nav .nav-box { overflow-y:scroll; height:calc(100svh - 90px); }
	#header #main-nav ul { display:block; width:93%; margin:0 auto; }
	#header #main-nav li { font-size:25px; color:#fff; margin-right:0; border-bottom:1px solid #fff; }
	#header #main-nav li a { padding:40px 25px; display:block; }
	#header .sub-menu-box { position:initial; width:93%; margin:50px auto; }
	#header .sub-menu-box .txt { display:block; font-size:1.75rem; text-align:center; font-weight:600; margin-bottom:15px; color:#fff; }
	#header .sub-menu .tab { width:calc((100% - 15px) / 2); }
	#header .sub-menu .tab a { width:100%; line-height:80px; border-radius:15px; font-size:1.75rem; }
	#header .sub-menu .tab1 a { background:#fff; color:#0088db; }

	body.index #kv { padding:85px 0 65px; height:auto; }
	body.index #kv::before { width:131vw; height:15.45%; left:-50px; top:200px; }
	body.index #kv .copy { font-size:35px; position:initial; margin:0 0 0 20px; line-height:1.625; }
	body.index #kv .contact-box { position:initial; width:93%; margin:65px auto 0; }
	body.index #kv .contact-box .txt { font-size:20px; }
	body.index #kv .contact-box .btn { width:calc((100% - 15px) / 2); }
	body.index #kv .contact-box .btn1 { margin-right:15px; }
	body.index #kv .contact-box .btn a { width:100%; font-size:1.75rem; }
	body.index #kv .slider-box .slider-container { height:20rem; margin-top:70px; }
	body.index #kv .slider-box .card { min-width:20rem; margin:0 2rem; height:16rem; transform-origin:center center; }
	body.index #kv .slider-box .card.is-active { transform:scale(1.3); }

	body.index .client-logo-box { padding:25px 0; }
	body.index .client-logo-box img { margin:0 20px; max-height:25px; }

	body.index main h2 { line-height:1.2; }

	body.index #scene-sec { margin:50px auto 55px; }
	body.index #scene-sec .inner-box > ul { display:block; }
	body.index #scene-sec .inner-box > ul > li { width:100%; margin-bottom:15px; padding:30px 20px; }
	body.index #scene-sec li li { font-size:15px; }

	body.index #features-sec .copy2 { font-size:15px; }
	body.index #features-sec ul { display:block; }
	body.index #features-sec li { width:100%; margin-bottom:15px; padding:40px 20px; flex-wrap:wrap; align-items:center; }
	body.index #features-sec li h3.sp-on { display:block; text-align:center; width:100%; margin-bottom:30px; }
	body.index #features-sec li .icon { width:85px; }
	body.index #features-sec li .txt-box { width:calc(100% - 85px - 15px); }
	body.index #features-sec li .txt-box .txt { font-size:15px; }
	body.index #features-sec li .txt-box .txt br { display:none; }

	body.index aside.contact-link-box { display:block; margin:50px auto; }
	body.index aside.contact-link-box .link { width:93%; margin:0 auto; }
	body.index aside.contact-link-box .link1 { margin-bottom:20px; }
	body.index aside.contact-link-box .link a { width:100%; }

	body.index #function-sec .btn.sp-on { position:initial; margin:15px auto 0; display:block; }
	body.index #function-sec .btn a { margin:0 auto; }
	body.index #function-sec ul { flex-wrap:wrap; }
	body.index #function-sec li { width:calc((100% - 15px) / 2); margin-bottom:15px; padding:30px 0; }
	body.index #function-sec li .txt { font-size:16px; }
	body.index #function-sec li .icon { width:73px; }

	body.index #support-sec { margin:55px auto; }
	body.index #support-sec ul { display:block; }
	body.index #support-sec li { width:100%; margin-bottom:15px; flex-wrap:wrap; padding:40px 20px; }
	body.index #support-sec li h3.sp-on { width:100%; display:block; margin-bottom:30px; text-align:center; }
	body.index #support-sec li .icon { width:90px; }
	body.index #support-sec li .txt-box { width:calc(100% - 90px - 15px); }
	body.index #support-sec li .txt-box .txt { font-size:15px; }

	body.index #blog-sec .inner-box { width:100%; }
	body.index #blog-sec .btn.sp-on { position:initial; margin:25px auto 0; display:block; }
	body.index #blog-sec .btn a { margin:0 auto; }
	body.index #blog-sec li { margin:0 8px; padding:30px 15px; }
	body.index #blog-sec li .title { -webkit-line-clamp:3; }
	body.index #blog-sec li .txt { font-size:15px; }

	#footer { margin-top:100px; }
	#footer .security-box { padding:60px 0 50px; }
	#footer .security-box .inner-box { display:block; }
	#footer .security-box .title { padding-left:0; text-align:center; }
	#footer .security-box .r-box { display:block; }
	#footer .security-box .mark { margin:40px auto; }
	#footer .security-box .txt { width:100%; }
	#footer .contact-box { padding:50px 0; margin-bottom:55px; }
	#footer .contact-box .inner-box { display:block; padding:0; }
	#footer .contact-box .txt-box { padding-left:0; margin-top:35px; }
	#footer .contact-box .title { font-size:23px; margin-right:0; text-align:center; }
	#footer .contact-box .txt-box .tel-num { font-size:32px; }
	#footer .contact-box .txt-box .tel-num .line { display:block; margin-bottom:20px; }
	#footer .contact-box .txt-box .tel-num dt { font-size:23px; margin-right:0; margin-bottom:7px; }
	#footer .contact-box .txt-box .tel-num dd a { justify-content:center; }
	#footer .contact-box .btn-box { margin-top:30px; display:block; }
	#footer .contact-box .btn-box .btn { width:100%; }
	#footer .contact-box .btn-box .btn1 { margin-bottom:20px; }
	#footer .footer-box { padding-bottom:60px; }
	#footer .footer-box .inner-box { display:block; }
	#footer .footer-box .l-box { display:block; }
	#footer .footer-box .ypg-logo { margin:0 auto 60px; }
	#footer .footer-box .foot-link { flex-wrap:wrap; margin-bottom:20px; }
	#footer .footer-box .foot-link li { width:calc((100% - 15px) / 2); margin-right:0; margin-bottom:10px; }
	#footer .footer-box .foot-link li:nth-child(odd) { text-align:right; }
	#footer .footer-box .name-list { display:block; text-align:center; }
	#footer .footer-box .name-list li { margin-right:0; margin-bottom:10px; font-size:14px; }
	#footer .footer-box small { text-align:center; margin-top:70px; display:block; }
	#footer .footer-box::before { width:131vw; height:15.45%; left:-50px; bottom:0; }

}