@charset "UTF-8";
/* CSS Document */

body, html {
	font-size: 6.25%;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
	scroll-behavior: smooth;
}
.bgvideo{ position: fixed; z-index: -1; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; overflow: hidden; pointer-events: none}
.bgvideo video{ min-height: 100vh; min-width: 100vw; width: auto; height: auto; object-fit: cover}

div.container {width: 96%; max-width: 1260px; margin: 0 auto;}
a {text-decoration: none; transition: 0.3s}
a:hover {opacity: 0.5}
p {line-height: 1.6; font-size: 15rem;}
img {max-width: 100%}
hr {display: block; border-bottom: 1px solid #ccc; margin: 60px auto}
sup {font-size: 80%; vertical-align: super}

h2.section-title {font-weight: normal; font-size: 20rem; position: relative; line-height: 1.6; padding-bottom: 20px}
h2.section-title strong {font-size: 30rem;}
h2.section-title::after {content: ''; width: 60px; height: 1px; background-color: #00a0e9; position: absolute; bottom: 0; left: 0;}

a.btn-blue { display: inline-block; padding: 15px 35px; margin-right: 5px; border: 1px solid #fff; box-sizing: border-box; font-size: 14rem; color: #fff; border-radius: 50px; background: linear-gradient(90deg, rgb(0 110 162) 0%, rgb(0 225 232) 100%); transition: 0.5s;}
a.btn-blue:hover { padding: 15px 25px 15px 45px;}

a.btn-white { display: inline-block; padding: 15px 35px; margin-right: 5px; border: 1px solid #005bac; box-sizing: border-box; font-size: 14rem; color: #005bac; border-radius: 50px; background: #fff; transition: 0.5s;}
a.btn-white:hover { padding: 15px 25px 15px 45px;}

a.btn-text { display: inline-block; color: #00a0e9; padding: 2px 0; border-bottom: 2px solid #00a0e9; font-weight: bold; font-size: 14rem; transition: 0.5s;}
a.btn-text:hover { padding: 2px 15px 2px 0; }

@media screen and (max-width: 1024px) {
	div.container {width: 90%;}
	h2.section-title {font-size: 17rem; line-height: 1.5;}
	h2.section-title strong {font-size: 22rem;}
	h2.section-title::after { width: 60px;}
	p { font-size: 14rem; line-height: 1.8;}
	a.btn-blue { display: block; max-width: 240px; margin: 0 auto 20px auto; text-align: center}
	a.btn-white{ display: block; max-width: 240px; margin: 0 auto 20px auto; text-align: center}
}

.pc_show{display: inline}
.sp_show{display: none}

@media screen and (max-width: 1024px) {
	.pc_show{display: none}
	.sp_show{display: inline}
}

/* Header NAVI */
.header {position: fixed; width: 100%; display: flex; justify-content: space-between; 
	background: linear-gradient(90deg,rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0.7) 80%);
	padding: 0 10rem; box-sizing: border-box; height: 64px; z-index: 999999; }
.header::before {content: ''; display: block; width: 100%; height: 100%; z-index: -1; 
	position: absolute; top: 0; left: 0; background: rgba(255,255,255,1); opacity: 0; transition: 0.5s;}
.header:hover::before {opacity: 1;}
.head-active {background: rgba(255,255,255,0.6); opacity: 1;}

.header a {font-size: 13rem; color: #333; display: flex; align-items: center; height: 46px; margin-top: 10px; padding: 0 10px; }
.header a img {display: block; height: 70%; width: auto;}

.header-logo {display: block; opacity: 0; transition: 0.5s}
.head-active .header-logo {opacity: 1}

.nav { display: flex; justify-content: space-between; flex-wrap: wrap;}
.nav ul { list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; height: 100%}
.nav ul li { display: block; height: 100%}
.nav ul li a { padding: 0 10px;}
.nav ul li a:hover { color: #00a0e9}
.nav ul li.link-contact a {display: inline-block; padding: 12px 25px; box-sizing: border-box; font-size: 13rem; color: #fff; border-radius: 50px; background: linear-gradient(90deg, rgb(0 110 162) 0%, rgb(0 225 232) 100%); transition: 0.5s;}
.nav ul li.link-contact a:hover { padding: 12px 20px 12px 30px;}

@media screen and (max-width: 1024px) {
     .header {height: 42px; padding: 0 6px; background: rgba(255,255,255,0.8);}
	.header a {font-size: 10.5rem; height: 36px; margin-top: 4px; padding: 0 4px; }
	.header a img { height:50%;}
	.nav ul { justify-content: flex-end; gap:5px; }
	.nav ul li {  }
	.nav ul li a{ padding: 0 4px }
	.nav ul li.link-contact a {padding: 10px 4px; font-size: 11rem; border-radius: 6px}
	.nav ul li.link-contact a:hover {padding: 10px 2px 10px 6px;}
	.header-logo {opacity: 1;}
}

/* Main */
.hero {background: #fff; padding-top: 0px; height: 86vh; max-height: 60vw; min-height: 520px;}
.hero .container{ display: flex; align-items: center; position: relative; height: 86vh; max-height: 60vw; max-width: 92vw;}

.hero-content { width: 45vw; position: relative; z-index: 2}
.hero-content h1{ }
.hero-content h1 img{ display: block; max-width: 65%; margin-bottom: 4vw;}
.hero-content h2{ color: #005bac; font-size: 40rem; font-weight: normal; font-family: serif; line-height: 1.5; letter-spacing: 3px; margin-bottom: 2vw}
.hero-content p{color: #005bac; font-size: 15rem; line-height: 2; margin-bottom: 30px}

/*animation*/
.hero-image-container {position: absolute; right: 0; bottom: 0; width: 63vw; max-width: 96vh; height: 100%;  z-index: 1;}
ul.slideshow { position: relative; width: 100%; height: 100%;}
.slideshow li { display: flex; align-items: center; position: absolute; top: 0; left: 0; height: 100%; width: auto; opacity: 0; animation: fade 16s infinite; }
.slideshow li img {display: block; max-height: 100%; width: auto;}
.slideshow li::after { content: ''; position: absolute; width: 95%; height: 100%; top: 0; left: 0; background: linear-gradient(90deg,rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.6) 25%, rgba(255, 255, 255, 0) 35%);}

.slideshow li:nth-child(1) {
  animation-delay: 0s;
}
.slideshow li:nth-child(2) {
  animation-delay: 4s;
}
.slideshow li:nth-child(3) {
  animation-delay: 8s;
}
.slideshow li:nth-child(4) {
  animation-delay: 12s;
}

@keyframes fade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  25% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}



@media screen and (max-width: 1024px) {
	.hero { padding-top: 46px; height: auto; max-height: 999999px}
	.hero .container{ display: block; position: relative; height: auto; max-height: none; width: 100vw }
	.hero-image-container {position: relative; width: 100vw; height: 83vw; max-width: 100%}
	.hero-image-container img{ display: block; height: 100%; max-width: 100%;}
	
	.hero-content { position: static; width: 90vw; margin: 20px auto 60px auto}
	.hero-content h1{ }
	.hero-content h1 img{ max-width: 100%; margin: 0 auto 8vw auto;}
	.hero-content h2{ font-size: 26rem; margin-bottom: 2vw}
	.hero-content p{ }

	.slideshow li::after { content:none; }
}

/* Core */
#core{padding-top: 120px; padding-bottom: 100px; background: #002b6b url("../img/core_bg.png") no-repeat center center; background-size: cover;}
#core .container { color: #fff; min-height: 60vh}

.core-2clumn {display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 80px;}
.core-2clumn div.core-title {display: block; width: 50%;}
.core-2clumn div.core-title p {}
.core-2clumn div.core-infogra {width: 45%;}
.core-2clumn div img {display: block; width: 100%;}

.core-3clumn { display: flex; justify-content: space-around; flex-wrap: wrap; margin-bottom: 80px; }

.core-3clumn div { width: 30%; background-size: cover; background-position: center; padding: 160px 20px 20px 20px; box-sizing: border-box; position: relative; isolation: isolate; }

.core-3clumn div::after { content: ''; display: block; width: 104%; height: 104%; border: 1px solid #fff; position: absolute; top: -2%; left: -2%; opacity: 0.4; pointer-events: none; z-index: 1; box-sizing: border-box; }

.core-3clumn div::before { content: ''; display: block; width: 104%; height: 104%; position: absolute; top: -2%; left: -2%; pointer-events: none; z-index: 2; box-sizing: border-box; background-repeat: no-repeat; background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 100%), linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 100%), linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 100%), linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 100%); background-size: 24% 1px, 1px 24%, 24% 1px, 1px 24%; background-position: -30% 0, 100% -30%, 130% 100%, 0 130%; animation: borderFlow 6s linear infinite; }

@keyframes borderFlow { 0% { background-position: -30% 0, 100% -30%, 130% 100%, 0 130%; } 24.99% { background-position: 130% 0, 100% -30%, 130% 100%, 0 130%; } 25% { background-position: -30% 0, 100% -30%, 130% 100%, 0 130%; } 49.99% { background-position: -30% 0, 100% 130%, 130% 100%, 0 130%; } 50% { background-position: -30% 0, 100% -30%, 130% 100%, 0 130%; } 74.99% { background-position: -30% 0, 100% -30%, -30% 100%, 0 130%; } 75% { background-position: -30% 0, 100% -30%, 130% 100%, 0 130%; } 100% { background-position: -30% 0, 100% -30%, 130% 100%, 0 -30%; } }


.core-3clumn div:nth-child(1) {background-image: url("../img/core01.png"); transform: translate(0, -30px)}
.core-3clumn div:nth-child(2) {background-image: url("../img/core04.png")}
.core-3clumn div:nth-child(3) {background-image: url("../img/core03.png"); transform: translate(0, 30px)}
.core-3clumn div h3 { background: linear-gradient(90deg,rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%); color: #333; display: inline-block; font-size: 14rem; padding: 5px 30px 5px 15px; margin-left: -35px; margin-bottom: 10px;}
.core-3clumn div h2 { font-size: 26rem; font-weight: normal; font-family: serif; line-height: 1.2;; margin-bottom: 5px; text-shadow: 0 0 4px rgba(0,0,0,0.9)}
.core-3clumn div p {font-size: 13rem; line-height: 1.2; text-shadow: 0 0 0.9 rgba(0,0,0,0.9)}

.core-sub {display: block; width: 80%; margin:0 auto 0 auto; text-align: center}
.core-sub h4 { font-size: 26rem; font-weight: normal; margin-bottom: 15px;}
.core-sub p { font-size: 16rem; line-height: 1.8}

#core h2.section-title {margin-bottom: 40px;}


@media screen and (max-width: 1024px) {
	#core{padding-top: 60px; padding-bottom: 60px; background: #002b6b url("../img/core_bg.png") no-repeat center top; background-size: contain;}
	
	.core-2clumn {display: block; margin-bottom: 60px;}
	.core-2clumn div.core-title {display: block; width: 100%;}
	.core-2clumn div.core-title p { margin-bottom: 20px}
	.core-2clumn div.core-infogra {width: 100%;}
	.core-2clumn div img {display: block; width: 100%;}
	
	.core-3clumn {display: block; margin-bottom: 0px;}
	.core-3clumn div {width: 100%; padding: 130px 10px 20px 10px; margin-bottom: 40px}
	.core-3clumn div:nth-child(1), .core-3clumn div:nth-child(3) {transform: none}
	.core-3clumn div h3 { padding: 5px 30px 5px 15px;}
	.core-3clumn div h2 { font-size: 24rem; }
	
	.core-sub {width: 98%; margin: 20px auto; }
	.core-sub h4 { font-size: 18rem; position: relative;}
	.core-sub h4::before { content: ''; width: 1px; height: 50px; display: block; position: absolute; top: -60px; left: 50%; 
		background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%); 
		background-size: 100% 200%; background-position: 0 100%;
		animation: lineFlowDown 1.8s linear infinite; }
	.core-sub p { font-size: 14rem; line-height: 1.8; text-align: left; margin-bottom: 20px}
	
	/* 上下入れ替え用 */
	.core-wrap {display: flex; flex-direction: column}
	.core-3clumn {order: 2;}
	.core-sub {order: 1;}
}
@keyframes lineFlowDown { 
	0% { background-position: 0 100%} 
	90% { background-position: 0 -100%} 
	100% { background-position: 0 -100%} 
}


/* 2clumn */
.content-2clumn { display: flex; flex-wrap: wrap; justify-content: space-between;}
.content-2clumn div { width: 48%}
.content-2clumn div p { margin-bottom: 20px}
.content-2clumn div img { width: 100%}

/* 無料診断 */
#shindan {padding: 60px 0 0px 0; }
#shindan .container {padding: 60px 40px 10px 40px; width: 98%; max-width: 1260px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); box-sizing: border-box;}
.shindan-box01 {text-align: center;}
.shindan-box01 h3 { display: inline-block; font-size: 30rem; color: #38bac9; text-align: center; margin: 0 auto 35px auto; position: relative; padding: 0 20px 5px 90px}
.shindan-box01 h3 strong { font-size: 30rem; color: #fff; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; height: 100px; width: 100px; border-radius: 50px; background-color: #38bac9; position: absolute; top: -30px; left: -30px;}
.shindan-box01 h3 span {color: #333;}
.shindan-box01 h3::before { content: ''; display: block; width: 100%; height: 3px; background-color: #38bac9; position: absolute; bottom: 0; left: 0}
.shindan-box01 h4 { font-size: 20rem; text-align: center; margin-bottom: 15px;}
.shindan-box01 p { margin-bottom: 20px;}

.shindan-box02 {text-align: center; margin: 40px auto; position: relative; width: 86%; height: 15vw; max-height: 200px}
.shindan-box02 img.shindanimg01 { display: inline-block; position: absolute; top: 30px; left: 0; width: 42%; z-index: 3; }
.shindan-box02 div.shindan-arrow { display: inline-block; position: absolute; top: 5px; left: 38%; width: 35%; height: 85%; z-index: 2; }
.shindan-box02 div.shindan-arrow img { display: inline-block; width: auto; height: 70%; max-height: 115px; position: relative; z-index: 2;}
.shindan-box02 div.shindan-arrow::before { content: ''; display: block; width: 100%; height: 5vw; position: absolute; bottom: 0; left: 0; z-index: 1; 
	background: linear-gradient(90deg, rgb(194 189 0) 0%, rgb(0 185 202) 60%); 
	clip-path: polygon(0 10%, 88% 10%, 88% 0%, 100% 50%, 88% 100%, 88% 90%, 0 90%);}
.shindan-box02 div.shindan-arrow::after { content: '無料診断を依頼'; display: block; width: 100%; height: 2.75vw; color: #fff; font-weight: bold; font-size: 1.25vw; position: absolute; bottom: 0; left: 0; line-height: 100%; z-index: 2; }
.shindan-box02 img.shindanimg02 { display: inline-block; position: absolute; top: 0; right: 0; width: 28%; z-index: 1; }

@media screen and (max-width: 1024px) {
	#shindan {margin-bottom: 40px;}
	#shindan .container {padding: 20px 20px 10px 20px; width: 94%; }
	.shindan-box01 h3 { font-size: 22rem; padding: 0 20px 5px 75px}
	.shindan-box01 h3 strong { font-size: 26rem; top: -40px; left: -30px;}
	.shindan-box01 p { text-align: left}
	
	.shindan-box02 {width: 90%; margin: 20px auto; height: auto; max-height: 999999px}
	.shindan-box02 img.shindanimg01 { display: block; position: relative; top: 0; left: 0; width: 100%; }
	.shindan-box02 div.shindan-arrow { display: block; position: relative; top: 5px; left: 0; width: 100%; height: auto; padding-bottom: 50px }
	.shindan-box02 div.shindan-arrow img { display: block; width: 60%; height: auto; margin: 0 auto; max-height: 999999px; position: relative;}
	.shindan-box02 div.shindan-arrow::before { height: 60px; background: linear-gradient(180deg, rgb(194 189 0) 0%, rgb(0 185 202) 60%); 
		clip-path: polygon(0% 0%, 100% 0, 100% 60%, 50% 100%, 0 60%);}
	.shindan-box02 div.shindan-arrow::after { height: 30px; bottom: 10px; }
	.shindan-box02 img.shindanimg02 { display: block; position: relative; top: -20px; right: 0; width: 90%; margin: 0 auto; }
}

/* contact01 */
#contact-intro {padding-top: 80px; padding-bottom: 60px;}
#contact-intro h2.section-title {color: #00a0e9; margin-bottom: 30px;} 
.content-contact { background: url("../img/contact_img01.png") no-repeat right top; background-size: 54% auto;}
.content-contact div.contact-box01 { width: 42%}
.content-contact div.contact-box01 p { margin-bottom: 20px}
.content-contact div.contact-box01 p strong { display: block; font-size: 24rem; margin-bottom: 20px}

#flow{}
.flow-list{padding: 0 0 80px 0; max-width: 98%; margin: 40px auto 20px auto}
.flow-list h3 {color: #00a0e9; display: block; font-size: 20rem; margin-bottom: 20px; }
.flow-list ol{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.flow-list ol li{ display: block; position: relative; width: calc(17% + 15px); background-color: rgba(255,255,255,0.7); box-sizing: border-box; border-top: 1px solid #00a0e9; border-bottom: 1px solid #00a0e9; padding: 20px 10px 15px 0; }
.flow-list ol li div{ display: block; height: 5vw; max-height: 110px;}
.flow-list ol li div img{ display: block; max-width: 100%; height: 86%; margin: 0 auto }
.flow-list ol li p { display: block; font-size: 14rem; font-weight: bold; text-align: center; line-height: 1.3}

.flow-list ol li::after{ content: ''; display: block; clip-path: polygon(0 0, 4% 0%, 100% 50%, 4% 100%, 0 100%, 96% 50%); background-color: #00a0e9; position: absolute; left: -20px; top: 0; width: 30px; height: 100%;}
.flow-list ol li:first-child{ border-left: 1px solid #00a0e9 }
.flow-list ol li:first-child::after{ content: none; }
.flow-list ol li:last-child{ border-right: 1px solid #00a0e9; border-radius: 0 40px 40px 0 }

@media screen and (max-width: 1024px) {
	#contact-intro {padding: 0;}
	#contact-intro div.container {width: 95%; margin: 0 0 0 5%; padding-right: 5%; box-sizing: border-box;}
	#contact-intro h2.section-title {width: 50%; height: 50px}
	.content-2clumn { display: block;}
	.content-2clumn div { width: 100%}
	.content-2clumn div p { }
	.content-2clumn div img { }
	
	.content-contact { padding-top: 50px; background-size: auto 120px;}
	.content-contact div.contact-box01 { width: 100%}
	.content-contact div.contact-box01 p { }
	.content-contact div.contact-box01 p strong { font-size: 18rem; margin-bottom: 10px}
	
	.flow-list{padding: 0 0 20px 0;}
	.flow-list h3 {font-size: 18rem; text-align: center}
	.flow-list ol{ display: block; }
	.flow-list ol li{ width: 100%; display: flex; padding: 15px 0 15px 0; border-top: none; border-bottom: none;}
	.flow-list ol li div{ height: auto; max-height: auto; width: 30%}
	.flow-list ol li div img{ max-width: 40%; height: auto; margin: 0 auto }
	.flow-list ol li p { text-align: left;}
	.flow-list ol li{ border-left: 1px solid #00a0e9; border-right: 1px solid #00a0e9;}
	.flow-list ol li::after{ clip-path: polygon(0 0, 50% 94%, 100% 0, 100% 6%, 50% 100%, 0 6%); left: 0; top: -10px; width: 100%; height: 15px;}
	.flow-list ol li:first-child{ border-top: 1px solid #00a0e9 }
	.flow-list ol li:first-child::after{ content: none; }
	.flow-list ol li:last-child{ border-bottom: 1px solid #00a0e9; border-radius: 0 0 20px 20px }
}

/* about */
#about { background: #e6eaea url("../img/about_bg.png") no-repeat left top; background-size: auto 120%; padding-top: 100px; padding-bottom: 100px;}
#about .container{}
#about .container div{ width: 50%; margin: 0 0 0 auto; text-shadow: 0 0 3px rgba(255,255,255,1)}
#about .container div h2{ color: #00a0e9; margin-bottom: 20px;}
#about .container div h3{ font-size: 24rem; margin-bottom: 20px;}
#about .container div p{ margin-bottom: 20px;}

#future {padding-top: 40px; padding-bottom: 60px;}

.content-4clumn{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.content-4clumn li { width: 24%}
.content-4clumn li img { width: 100%}
.content-4clumn li p strong { display: block; font-size: 16rem; line-height: 1.4; padding: 15px 0 10px 0}
.content-4clumn li p { font-size: 14rem; color: #333;}

@media screen and (max-width: 1024px) {
	#about { background-size: 150% auto; padding-top: 75vw; padding-bottom: 20vw }
	#about .container div{ width: 100%; }
	#about .container div h2{ }
	#about .container div h3{ font-size: 20rem; margin-bottom: 20px;}
	#about .container div p{ }
	.content-4clumn li { width: 48%}
	.content-4clumn li img { }
	.content-4clumn li p strong { font-size: 14rem; padding: 10px 0 8px 0}
	.content-4clumn li p { font-size: 13rem;  line-height: 1.5; margin-bottom: 20px}

}

/* documents */
#documents { background-color: #e7e7e7; padding-top: 100px; padding-bottom: 60px;}
#documents .container h2.section-title {color: #00a0e9; margin-bottom: 30px;} 
#documents .container div h3{ font-size: 18rem; margin-bottom: 20px;}
ul.list-square { margin-bottom: 20px}
ul.list-square li { display: block; font-size: 14rem; margin-bottom: 6px;}
ul.list-square li::before { content:'■'; color: #00a0e9; display: inline-block; margin-right: 5px; font-size: 13rem;}

@media screen and (max-width: 1024px) {
	#documents { padding-top: 60px;}
}

/* contact-footer */
#contact-footer { background: linear-gradient(90deg,rgba(0, 46, 111, 1) 0%, rgba(0, 175, 255, 1) 100%); padding-top: 80px; padding-bottom: 60px; color: #fff;}
#contact-footer .container h2.section-title {color: #00a0e9; margin-bottom: 30px;} 

/* faq */
.faq { padding-top: 60px; padding-bottom: 60px;}
.faq h4 {color: #fff; display: block; font-size: 22rem; margin-bottom: 30px;}
.faq h4::after { content: ''; display: inline-block;; width: 50px; height: 1px; background-color: #fff; vertical-align: middle; margin-left: 10px}
.faq ol {}
.faq ol li { display: block; background-color: rgba(255,255,255,0); border: 1px solid rgba(255,255,255,0.5); box-sizing: border-box; margin: 0 auto 10px auto; color: #fff; cursor: pointer; position: relative; transition: 0.5s}
.faq ol li::before{ content: 'Q'; font-weight: bold; font-size: 46rem; position: absolute; top: 2px; left: 10px; color:#00a7f678; font-family: serif; z-index: 1 }
.faq ol li strong{ display: block; padding: 25px 25px 20px 35px; font-size: 18rem; font-family: serif; position: relative; z-index: 2}
.faq ol li div{ max-height: 1px; overflow: hidden; transition: 0.5s;}
.faq ol li div p{ display: block; padding: 5px 25px 30px 35px; color: #333; font-size: 14rem; line-height: 1.8; transition: 0.5s;}
.faq ol li div p span{ display: block; font-weight: bold; color: #111; font-size: 16rem;}

.faq ol li.a-open { background-color: rgba(255,255,255,1); border: 1px solid rgba(255,255,255,1); color: #005bac;}
.faq ol li.a-open div { max-height: 1000px}

@media screen and (max-width: 1024px) {
	.faq { padding-bottom: 20px;}
	.faq h4 { font-size: 18rem; }
	.faq ol li::before{ font-size: 36rem; top: 2px; left: 10px; }
	.faq ol li strong{ padding: 20px 15px 15px 30px; font-size: 16rem;}
	.faq ol li div p{ padding: 10px 15px 30px 30px; font-size: 15rem; line-height: 1.6;}
}

#foot {}
.footer {background: #111; padding: 60px 0;}

.footer .container {display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%}
.foot_logo {width: 35%; color: #fff; font-weight: bold; font-size: 13rem}
.foot_logo img{display: block; width: 100%; margin-bottom: 5px}

.foot-navs {display: flex; justify-content: flex-end; flex-wrap: wrap}
.foot-navs li{display: inline-block; border: 1px solid #fff; margin-left: 10px; position: relative;}
.foot-navs li::before{ content: ''; display: block; background: #fff; width: 0px; height: 100%; position: absolute; transition: width 0.5s }
.foot-navs li:hover::before{ width: 100%;}
.foot-navs li a{display: block; color: #fff; font-size: 12rem; padding: 14px 30px 10px 30px; font-weight: bold; position: relative;z-index: 2}
.foot-navs li a:hover{ color: #111; opacity: 1 }

.copyright { display: block; width: 100%; color: #fff; font-size: 11rem; text-align: center; margin-top: 40px}

@media screen and (max-width: 1024px) {
	.footer .container {display: block; width: 90%}
	.foot_logo {display: block; width: 100%; font-size: 11rem; text-align: center; margin-bottom: 20px}
	
	.foot-navs {display: block;}
	.foot-navs li{display: block; margin-bottom: 10px;}
	.foot-navs li a{ padding: 10px 30px 10px 30px; }
}

/* PAGE */
.page {padding-top: 100px;}
.pagetitle {}
.pagetitle  h2{ position: relative; color: #005bac; font-size: 22rem; font-weight: normal; line-height: 1.5; letter-spacing: 3px; margin-bottom: 4vw; padding-bottom: 1vw}
.pagetitle  h2::after {content: ''; width: 60px; height: 1px; background-color: #00a0e9; position: absolute; bottom: 0; left: 0;}

.page-contact {margin-top: 100px; padding-top: 140px; border-top: 1px solid #ccc; background-position: center right; position: relative; }
.page-contact::before {content: ''; display: block; width: 50px; height: 50px; background-color: #fff; 
	border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; transform: rotate(45deg);
	position: absolute; top: -25px;; left: calc(50% - 25px); transform-origin: center}
.page-contact-active::before {animation: arrowDown 1s ease infinite;}
@keyframes arrowDown { 
	0% { transform: scale(1) rotate(45deg)} 
	30% { transform: scale(1.5) rotate(45deg)} 
	100% { transform: scale(1) rotate(45deg)} 
}

@media screen and (max-width: 1024px) {
	.page-contact { padding-top: 88vw; background-position: top 60px center; background-size: contain;}
}
#page-contents {}
#page-contents .container{ margin-bottom: 4vw}
#page-contents h2{font-size: 26rem; line-height: 1.5; letter-spacing: 1px; margin-bottom: 2vw; }
#page-contents h2.kaizen-catch{font-size: 36rem; font-family: serif; font-weight: normal; margin: 40px 0 20px 0}
#page-contents h3{font-size: 20rem; line-height: 1.5; margin-bottom: 2vw; }
#page-contents h4{font-size: 18rem; line-height: 1.5; margin-bottom: 2vw; color: #005bac}
#page-contents p { line-height: 1.8; margin-bottom: 4vw;}

@media screen and (max-width: 1024px) {
	#page-contents h2{font-size: 20rem; margin-bottom: 6vw;}
	#page-contents h2.kaizen-catch{font-size: 26rem; }
	#page-contents h3{font-size: 18rem; line-height: 1.5; margin-bottom: 4vw; }
	#page-contents h4{font-size: 16rem; line-height: 1.5; margin-bottom: 4vw; }
	#page-contents p { line-height: 1.8; margin-bottom: 8vw;}
	
	ol.list-fuan{display: flex; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 50px}
	ol.list-fuan li{width: 100%; padding: 10px 10px 8px 10px; margin: 0 auto 10px auto; font-size: 14rem}
}

#page-contents h4.h4-fuan{ text-align: center;}
ol.list-fuan{display: flex; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 80px}
ol.list-fuan li{display: block; position: relative; width: 19%; background: linear-gradient(0deg, rgb(54 105 177) 0%, rgb(32 78 143) 100%); box-sizing: border-box; border-radius: 0px 20px 20px 20px; padding: 20px 10px 18px 10px; margin-right: 1%; font-size: 14rem; color: #fff; cursor: pointer}
ol.list-fuan li strong {display: block; font-size: 15rem; padding-left: 24px; position: relative}
ol.list-fuan li strong::before { content: ''; display: block; position: absolute; left: 2px; top:6px; width: 12px; height: 12px; background-color: #001C4B; border-radius: 20%; border-bottom: 1px solid rgba(255,255,255,0.5); }
ol.list-fuan li strong::after { content: ''; display: block; position: absolute; left: 2px; top: 0px; width: 16px; height: 16px; background-color: #fff100; clip-path: polygon(0 20%, 20% 20%, 40% 60%, 80% 0, 100% 0, 40% 100%); opacity: 0; transition: 0.3s}

ol.list-fuan li.fuan-check strong { color: #fff993}
ol.list-fuan li.fuan-check strong::after { opacity: 1}

@media screen and (max-width: 1024px) {
	ol.list-fuan{ margin-bottom: 60px}
	ol.list-fuan li{width: 100%; padding: 12px 10px 10px 10px; margin-right: 0; margin-bottom: 5px; font-size: 13rem; border-radius: 0px 10px 10px 10px;}
}

#kaizen-wrap {background: linear-gradient(180deg,rgba(0, 46, 111, 1) 20%, rgba(0, 175, 255, 1) 80%, rgba(0, 175, 255, 0) 100%); padding: 80px 0 100px 0; margin-top: 100px;}
#kaizen-wrap h2 {color: #fff; text-align: center}
#kaizen-wrap p {color: #fff; margin-bottom: 4vw}
.box-kaizen { background-color: #fff; padding: 40px 5vw; box-shadow: 0 10px 40px rgba(0,0,0,0.5); box-sizing: border-box; margin-bottom: 4vw; position: relative;}
#kaizen-wrap .box-kaizen h2{ position: absolute; top: -10px; width: 140px; height: 140px; border-radius: 50%; padding-top: 10px; box-sizing: border-box;
	font-family: serif; font-size: 46px; 
	background: linear-gradient(0deg,rgba(0, 46, 111, 1) 0%, rgba(0, 175, 255, 1) 100%);}
#kaizen-wrap .box-kaizen h2 strong{ position: absolute; top: 55%; left: -10px; width: 160px; text-align: center; font-size: 16rem; font-family: sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,0.9);}
#kaizen-wrap .box-kaizen h3 { font-size: 26rem; margin: 15px 0 80px 160px;}
#kaizen-wrap .box-kaizen p{}
#kaizen-wrap .box-kaizen p.kaizen-wabun{font-size: 20rem; font-family: serif; color: #111; border-bottom: 1px solid #999;}
#kaizen-wrap .box-kaizen p.kaizen-wabun::before{ content: '日本語原文'; display: inline-block; background-color: #333; padding: 6px 10px; font-family: sans-serif; color: #fff; font-size: 14rem; line-height: 1; vertical-align: middle; margin: 0 10px 5px 0}

#kaizen-wrap .box-kaizen p.kaizen-before{font-size: 20rem; font-family: serif; color: #111; margin-bottom: 0; border-bottom: 1px solid #999; padding-bottom: 5px;}
#kaizen-wrap .box-kaizen p.kaizen-before::before{ content: '既存英文'; display: block; background-color: #bd0c96; padding: 6px 10px; font-family: sans-serif; color: #fff; font-size: 14rem; line-height: 1; vertical-align: middle; margin: 0 10px 5px 0; width: 60px; text-align: center}
#kaizen-wrap .box-kaizen p.kaizen-before strong{display: inline; padding: 0 3px; border-bottom: 2px solid #bd0c96 }

#kaizen-wrap .box-kaizen p.kaizen-after{font-size: 20rem; font-family: serif; color: #111; border-bottom: 1px solid #999; position: relative; padding: 40px 0 5px 0;}
#kaizen-wrap .box-kaizen p.kaizen-after::before{ content: '診断結果'; display: block; background-color: #1ea8ca; padding: 6px 10px; font-family: sans-serif; color: #fff; font-size: 14rem; line-height: 1; vertical-align: middle; margin: 0 10px 5px 0; width: 60px; text-align: center}
#kaizen-wrap .box-kaizen p.kaizen-after strong{display: inline; padding: 0 3px; border-bottom: 2px solid #1ea8ca; color: #0088aa }

#kaizen-wrap .box-kaizen p.kaizen-after::after{ content: ''; position: absolute; top: 0; right: 50%; display: block; width: 120px; height: 30px; background-color: #aaa; margin: 20px auto 0px auto; clip-path: polygon(20% 0, 80% 0, 80% 30%, 100% 30%, 50% 100%, 0 30%, 20% 30%);}

.box-kaizen div.kaizen-point{border: 4px solid #1ea8ca; padding: 30px 170px 40px 40px; position: relative; min-height: 120px}
.box-kaizen div.kaizen-point h5{ font-size: 20rem; color: #0088aa}
#kaizen-wrap .box-kaizen div.kaizen-point p{ font-size: 16rem; color: #111; margin-bottom: 0}
.box-kaizen div.kaizen-point::after {content: 'IRプロリンガル\A Colin氏'; white-space: pre-line; 
	position: absolute; top:25px; right: 40px; display: block; width: 110px; height: auto; padding-top: 120px; 
	color: #333; font-size: 13rem; line-height: 1.2; text-align: center;
	background: #fff url("../img/icon-prof01.png") no-repeat top center; background-size: contain;}

@media screen and (max-width: 1024px) {
	#kaizen-wrap { margin-top: 50px; padding: 40px 0 40px 0;}
	.box-kaizen {margin-top: 40px}
	#kaizen-wrap .box-kaizen h2{ left: -10px; width: auto; height: 70px; border-radius: 35px; padding: 0 20px 10px 20px; line-height: 70px}
	#kaizen-wrap .box-kaizen h2 strong{ position: static; width: auto; text-align: left; font-size: 16rem; display: inline-block; margin-left: 10px}
	#kaizen-wrap .box-kaizen h3 { font-size: 20rem; margin: 40px 0 30px 0;}
	
	#kaizen-wrap .box-kaizen p.kaizen-wabun{font-size: 16rem; }
	#kaizen-wrap .box-kaizen p.kaizen-wabun::before{ display: block; width: 80px; text-align: center}
	#kaizen-wrap .box-kaizen p.kaizen-before, #kaizen-wrap .box-kaizen p.kaizen-after {font-size: 15rem}
	#kaizen-wrap .box-kaizen p.kaizen-after::after{ content: ''; position: absolute; top: 0; right: calc(50% - 40px); display: block; width: 80px; height: 20px; }
	.box-kaizen div.kaizen-point{ padding: 20px 10px 10px 10px; }
	.box-kaizen div.kaizen-point h5{ font-size: 18rem; margin-bottom: 5px;}
	#kaizen-wrap .box-kaizen div.kaizen-point p{ font-size: 15rem; }
	.box-kaizen div.kaizen-point::after { position: static; width: 110px; height: auto; padding-top: 120px; margin: 10px auto}	
}

#dlc-wrap {background: linear-gradient(180deg,rgba(0, 46, 111, 1) 20%, rgba(0, 175, 255, 1) 80%, rgba(0, 175, 255, 0) 100%); padding: 80px 0 100px 0; margin-top: 100px;}
#dlc-wrap h2 {color: #fff; text-align: center}
#dlc-wrap p {color: #fff; margin-bottom: 4vw}
.box-kaizen { background-color: #fff; padding: 40px 5vw; box-shadow: 0 10px 40px rgba(0,0,0,0.5); box-sizing: border-box; margin-bottom: 4vw; position: relative;}

.box-dlc {display: flex; justify-content: space-between; flex-wrap: wrap;}
.box-dlc a { display: block; width: 24%; padding: 20px; box-sizing: border-box; background-color: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.5); border-radius:0 0 20px 0;}
.box-dlc figure { display: block; border-bottom: 1px solid #ccc; margin-bottom: 10px;}
.box-dlc figure img { display: block;}
#dlc-wrap .box-dlc article h3 {color: #111; font-size: 16rem; margin-bottom: 10px;}
#dlc-wrap .box-dlc article p {color: #666; font-size: 13rem; margin-bottom: 5px;}
#dlc-wrap .box-dlc article p::after {content: 'Download'; display: block; padding: 2px 0; color: #fff; background: #ccc; text-align: center; border-radius: 20px; margin: 10px auto}
@media screen and (max-width: 1024px) {
	.box-dlc {display: block;}
	.box-dlc a { display: block; width: 90%; margin: 0 auto 20px auto}
	.box-dlc figure img { max-width: 60%; margin: 0 auto}
}