@charset "utf-8";
/* Base style
---------------------------------------------------------*/
body {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
/*	line-height: 1.75; */
	color: #000;
}

a {
  	color: #000;
  	text-decoration: none;
}

a,
a:hover,
a i {
  	transition: all 0.3s;
}

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

ul {
  	list-style: none;
}

/* parts
---------------------------------------------------------*/
/* flexbox */
.flex {
  	display: flex;
  	align-items: center;
  	justify-content: center;
}

/* medium */
.medium {
  	font-weight: 500;
}

.bold {
	font-weight: 900;
}

.title-size {
	font-size: 1.25rem;
}

@media (width: 768px) {
	.title-size {
		font-size: 3rem;
	}
}

/* section title */
.section-title {
  	height: 3rem;
  	font-size: 1.5rem;
  	text-align: center;
	color: #1A335E;
	padding-top: 0.375rem;
}

@media (min-width: 768px) {
  	.section-title {
    	height: 5rem;
  		font-size: 2rem;
		padding-top: 1rem;
  	}
}

/* subsection title */
.subsection-title {
  	height: 2rem;
  	font-size: 1rem;
  	text-align: center;
	color: #1A335E;
	padding-top: 0.375rem;
}

@media (min-width: 768px) {
  	.subsection-title {
    	height: 3rem;
  		font-size: 1.5rem;
		padding-top: 1rem;
  	}
}


/* button */
.button {
  	text-align: center;
	padding: 1rem 0;
}

.button-box {
  	padding: 0.5rem 0.5rem;
	color: #ffffff;
	background-color: #1A335E;
}

@media (min-width: 768px) {
  	.button-box {
  		padding: 1rem 1rem;
		color: #ffffff;
		background-color: #1A335E;
	}
}

.button-box:hover {
  	background-color: #554b9c;
}


/* header
---------------------------------------------------------*/
.header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	height: 5rem;
	z-index: 1;
	display: flex; 
	justify-content: space-between;
	background-color: #1A335E;
	z-index: 10;
}

@media (min-width: 768px) {
  	.header {
  	margin: auto;
  	}
}

/* logo */
.header-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10rem;
	margin-left: 1.25rem;
  	line-height: 0;
}

@media (min-width: 768px) {
	.header-logo {
  		display: flex;
  		align-items: center;
  		justify-content: center;
  		width: 10rem;
		margin-left: 1.25rem;
  		line-height: 0;
	}
}

/* hamburger button */
.hamburger-button {
  	width: 4.6875rem;
  	height: 5.125rem;
  	font-size: 3.125rem;
  	display: flex;
	color: #ffffff;
  	align-items: center;
  	justify-content: center;
}

@media (min-width: 768px){
  	.hamburger-button {
    	display: none;
  	}
}

.hamburger-button i {
  	line-height: 0;
}

/* hamburger menu & header nav
---------------------------------------------------------*/
@media (max-width: 767.9px) {
  	.hamburger-menu {
    	position: fixed;
    	top: 5rem;
    	left: 0;
    	width: 100%;
    	height: calc(100vh - 5rem);
    	background-color: #fff;
    	transition: all 0.6s;
    	transform: translateX(100%);
  	}
}

/* active */
.hamburger-menu-active {
  	transform: translateX(0);
}

/* navigation */
@media (max-width: 767px) {
  	.hamburger-menu-list-group {
    	display: table;
    	width: 100vw;
    	font-size: 1.875rem;
    	border-top: 0.0625rem solid #000;
  	}
}

@media (min-width: 768px) {
  	.header-nav-list-group {
    	column-gap: 1.56rem;
    	height: 100%;
    	padding-right: 1.6rem;
    	line-height: 1;
  	}
	
	.header-nav-list-group a {
		color: #ffffff;
	}
}

@media (max-width: 767px) {
  	.hamburger-menu-list-group a {
    	display: flex;
    	align-items: center;
    	justify-content: space-between;
    	padding: 1.72rem 2rem;
    	line-height: 1;
    	border-bottom: 0.0625rem solid #000;
  	}

  	.hamburger-menu-list-group li:nth-child(4) a,
  	.hamburger-menu-list-group li:nth-child(5) a {
    	padding: 1.5rem 2rem 1.95rem;
  	}

  	.hamburger-menu-list-group li:nth-child(4) a::after,
  	.hamburger-menu-list-group li:nth-child(5) a::after {
    	padding-top: .25rem;
  	}

}

/* right arrow icon */
@media (max-width: 767px) {
  	.hamburger-menu-list-group a::after {
    	font-family: bootstrap-icons;
    	font-size: 1.5rem;
    	content: "\F285";
  	}
}

@media (min-width: 768px) {
  	.header-nav a:hover {
    	color: #ec6a00;
  	}

	.header-nav .orange {
		color: #ec6a00;
	}
}



/* cover
---------------------------------------------------------*/
.cover {
	margin-top: 5rem;
}

/* cover image */
.cover-top {
	background-position: center;
}

.cover-top img {
	width: 100%;
	margin: 0;
}

/* cover catch */
.cover-catch {
	position: absolute;
	display: inline-block;
	top: calc(160vw / 7.68);
	left: 0;
	text-align: center;
}

@media (min-width: 768px) {
  	.cover-catch {
		top: calc(320vw / 19.2);
	}
}

.cover-title1 {
	display: inline-block;
	font-size: 1.2rem;
	font-weight: 900;
	color: #ffffff;
	text-shadow: 2px 2px 2px #000000;
}	

.cover-title2 {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 900;
	color: #ffffff;
	text-shadow: 2px 2px 2px #000000;
}

@media (min-width: 768px) {
	.cover-title1 {
		font-size: calc(80vw / 19.2);
		font-weight: 900;
		color: #ffffff;
	}	

	.cover-title2 {
		font-size: calc(32vw / 19.2);
		font-weight: 900;
		color: #ffffff;
	}
}

/* problem
---------------------------------------------------------*/
.problem {
	background-color: #A5C0D6;
}

.problem .section-title {
	color: #ffffff;
	background-color: #1A335E;
	height: 4rem;
	font-size: 1rem;
}

@media (min-width: 768px){
	.problem .section-title{
		height: 8rem;
		font-size: 2rem;
	}
}

.problem-container {
	display: flex;
	justify-content: center;
	text-align: start;
	font-size: 0.8rem;
	color: #1A335E;
	column-gap: 0.75rem;
	margin: 0 1.25rem;
	padding: 2rem 0;
}

@media (min-width: 768px) {
	.problem-container {
		column-gap: 1.25rem;
		margin: 0 2.5rem;
		padding: 3rem 0;
		font-size: 2rem;
	}
}

.problem-content {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	
}

.problem-content img {
	aspect-ratio: 3 / 2;
}

/* cta
---------------------------------------------------------*/
.cta {
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	text-align: center;
}

/* strong
---------------------------------------------------------*/
.strong {
	background-color: #F5F5F5;
	padding-bottom: 2rem;
}

@media (min-width: 768px) {
	.strong {
		padding-bottom: 3rem;
	}
}

.strong .section-title {
	color: #1A335E;
	background-color: #F5F5F5;
}

.strong-container {
	display: flex;
	justify-content: space-between;
	column-gap: 0.75rem;
	margin: 0 1.25rem;
	padding: 2rem 0;
}

@media (min-width: 768px) {
	.strong-container {
		column-gap: 1.25rem;
		margin: 0 2.5rem;
		padding: 3rem 0;
	}
}


/* selection
---------------------------------------------------------*/
.selection {
	background-color: #F5F5F5;
	padding-bottom: 2rem;
}

@media (min-width: 768px) {
	.selection {
		padding-bottom: 3rem;
	}
}

.selection .section-title {
	background-color: #F5F5F5;
}

.selection-container {
	display: flex;
	justify-content: center;
	column-gap: 1em;
	margin: 0 1.25rem;
	padding: 2rem 0;
	font-size: 1rem;
}

@media (min-width: 768px) {
	.selection-container {
		column-gap: 8rem;
		margin: 0 5rem;
		padding: 3rem 0;
		font-size: 1.5rem;
	}
}

.selection-content {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	width: 20rem;
	text-align: center;
	padding: 1rem;
	border: 2px solid;
	border-radius: 10px;
}

.selection-content img {
	aspect-ratio: 3 / 2;
}


/* service
---------------------------------------------------------*/
.service {
	background-color: #F7F7F7;
	padding-bottom: 2rem;
}

@media (min-width: 768px) {
	.service {
		padding-bottom: 3rem;
	}
}

.service .section-title {
	background-color: #F7F7F7;
}

.service-container {
	display: flex;
	justify-content: space-between;
	column-gap: 0.75rem;
	margin: 0 1.25rem;
	padding: 2rem 0;
}

@media (min-width: 768px) {
	.service-container {
		column-gap: 1.25rem;
		margin: 0 2.5rem;
		padding: 3rem 0;
	}
}

.service-content {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	text-align: center;
}

.service-content img {
	aspect-ratio: 3 / 2;
}


/* service flow
---------------------------------------------------------*/
.flow {
	background-color: #E6F3F3;
	padding-bottom: 2rem;
}

@media (min-width: 768px) {
	.flow {
		padding-bottom: 5rem;
	}
}

.flow img {
	display: block;
	margin: 0 auto;
}



/* faq
---------------------------------------------------------*/
.faq {
	background-color: #F3F0F6;
	padding-bottom: 2rem;
}

@media (min-width: 768px) {
	.faq {
		padding-bottom: 5rem;
	}
}


.faq .section-title {
	color: #1A335E;	
}


@media (min-width: 768px) {
  .qa-section {
    width: auto;
    margin: 0 10rem;
  }
}

.question {
  	display: flex;
  	background-color: #f6f3dc;
  	width: auto;
  	height: auto;
  	box-shadow: 7.07px 7.07px 10px 0 rgba(32, 32, 32, 0.2);
  	margin-bottom: 0.3rem;
}

@media (min-width: 768px) {
  	.question {
    	width: auto;
    	height: auto;
		padding-bottom: 0.625rem;
    	margin-bottom: 1rem;
  	}
}

.q-text {
 	font-size: 1rem;
  	text-align: start;
	padding-top: 1rem;
	padding-left: 2rem;
  	flex: 1;
}

@media (min-width: 768px) {
	.q-text {
		font-size: 1.2rem;
	}
}

.circle-button {
  	display: block;
  	position: relative;
  	width: 2.75rem;
  	height: 2.75rem;
	margin-right: 1rem;
	top: calc(50% - 1.375rem);
	border: 0.1rem solid #222222;
  	border-radius: 50%;
}

.circle-button::before {
	position: absolute;
  	content: "";
  	width: 1.5rem;
  	height: 0.1rem;
  	background-color: #222222;
  	top: calc(50% - 0.1rem);
  	left: 0.525rem;
}

.circle-button::after {
  	position: absolute;
  	content: "";
  	width: 1.5rem;
  	height: 0.1rem;
  	background-color: #222222;
  	top: calc(50% - 0.1rem);
  	left: 0.525rem;
  	transform: rotate(90deg);
}	

@media (min-width: 768px) {
  	.circle-button {
		top: calc(50% - 1rem);
    	margin-right: 3rem;
  	}
}

.accordion-title .active::after {
  	display: none;
}

.answer {
  	font-size: 1rem;
	text-align: start;
  	background-color: #fff;
	margin-bottom: 1rem;
	padding: 0.625rem 2rem;
}

@media (min-width: 768px) {
  	.answer {
    	font-size: 1.2rem;
    	padding: 0.625rem 2rem;
  	}
}

.accordion-content {
  	display: none;
}

/* feedback
---------------------------------------------------------*/
.feedback {
	background-color: #E0E0E0;
	padding-bottom: 2rem;
}

@media (min-width: 768px) {
	.feedback {
		padding-bottom: 3rem;
	}
}

.feedback .section-title {
	color: #1A335E;
	background-color: #E0E0E0;
}

.feedback-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	row-gap: 1.5rem;
	margin: 0 1.25rem;
	padding: 2rem 0;
}

@media (min-width: 768px) {
	.feedback-container {
		flex-direction: row;
		column-gap: 2rem;
		margin: 0 2.5rem;
		padding: 3rem 0;
	}
}

.feedback-content {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	text-align: center;
}

@media (min-width: 768px) {
	.feedback-content {
		width: 30rem;
	}
}

.feedback-content p:first-child {
	font-size: 1.5rem;
}


@media (min-width: 768px) {
	.feedback-content p:first-child {
		font-size: 2rem;
	}
	
	.feedback-content p:last-child {
		font-size: 1.5rem;
	}
}

/* contact
---------------------------------------------------------*/
.contact {
	background-color: #F0F5F1;
	padding-bottom: 2rem;
}

.contact-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 2rem;
}

@media (min-width: 768px) {
	.contact-container {
		flex-direction: row;
			justify-content: center;
		column-gap: 1rem;
	}
}

.contact-content {
	display: flex;
	flex-direction: column;
	font-size: 1rem;
	color: #1A335E;
	align-items: center;
	text-align: center;
	justify-content: center;
	width: 22rem;
	height: 11rem;
	background-color: #ffffff;
}

@media (min-width: 768px) {
	.contact-content {
		font-size: 1.5rem;
		width: 40rem;
		height: 15rem;
	}
}

.contact-content .button .button-box {
	display: block;
	width: 20rem;
	margin: 0.5rem auto 0;
}

.tel {
	font-size: 2rem;
}

/* footer
---------------------------------------------------------*/
.footer {
	padding-bottom: 2rem;
	text-align: center;
}

.link {
	flex-direction: column;
	font-size: 1.2rem;
	row-gap: 0.5rem;
	padding: 2rem;
}

@media (min-width: 768px) {
	.link {
		flex-direction: row;
		column-gap: 1.5rem;
	}
}

.link a {
	display: flex;
    align-items: center;
    justify-content: space-between;
	color: #1A335E;
}

.footer-logo {
	width: 40rem;
	display: block;
	padding: 0 1rem;
	margin: auto;
}

.address {
	margin: 1rem auto;
	color: #1A335E;
}

.copyright {
	font-size: 0.5rem;
	margin: 0.3rem auto;
	color: #1A335E;
}

@media (min-width: 768px) {
	.copyright {
		font-size: 0.8rem;
		margin: 0.3rem auto;
	}
}


/* cover2
---------------------------------------------------------*/
.cover2 {
	margin-top: 5rem;
}

/* cover2 image */
.cover2-top {
	background-position: center;
}

/* cover2 catch */
.cover2-catch {
	position: absolute;
	top: calc(160vw / 7.68);
	text-align: center;
	width: 100vw;
}

@media (min-width: 768px) {
  	.cover2-catch {
		position: absolute;
		top: calc(320vw / 19.2);
	}
}

.cover2-title1 {
	font-size: 1.5rem;
	font-weight: 900;
	color: #ffffff;

}	

.cover2-title2 {
	font-size: 1rem;
	font-weight: 900;
	color: #ffffff;
}

@media (min-width: 768px) {
	.cover2-title1 {
		font-size: calc(80vw / 19.2);
		font-weight: 900;
		color: #ffffff;
	}	

	.cover2-title2 {
		font-size: calc(32vw / 19.2);
		font-weight: 900;
		color: #ffffff;
	}
}


/* rinen
---------------------------------------------------------*/
.rinen {
	background-color: #E0E0E0;
}

.rinen .section-title {
	background-color: #E0E0E0;
}

.rinen-container {
	display: flex;
	justify-content: space-between;
	column-gap: 0.75rem;
	margin: 0 1.25rem;
	padding: 2rem 0;
}

@media (min-width: 768px) {
	.rinen-container {
		column-gap: 0;
		margin: 0 2.5rem;
		padding: 3rem 0;
	}
}

.rinen-content img {
	aspect-ratio: 3 / 2;
}

/* cprogile
---------------------------------------------------------*/
.cprofile {
	background-color: #E6F3F3;
	padding-bottom: 3rem;
}

.cprofile .section-title {
	margin-bottom: 2rem;
}
.cprofile-container {
	display: flex;
	justify-content: center;
}

.cprofile-content {
	font-size: 2rem;
	border-collapse: collapse;
	color: #1A335E;
}

.cprofile-content tr th {
	text-align: start;
	border-bottom: 1px solid black;
	padding: 1rem;
}

.cprofile-content tr td {
	border-bottom: 1px solid black;
	padding: 1rem;
}

/* servicedetail
---------------------------------------------------------*/
.servicedetail {
	margin: 2rem 0;
}

.swiper-slide {
  width: auto;
  height: 15rem;
  text-align: center;
}

@media (min-width: 768px) {
  .swiper-slide {
    width: 54.714rem;
    height: 23.5rem;
  }
}

.swiper-slide img {
	height: 20rem;
}


.swiper-prev-pagination-next {
  display: flex;
  justify-content: space-between;
  position: relative;
  height: auto;
  width: 15rem;
  align-items: center;
  margin-left: calc((100vw - 15rem) / 2);
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .swiper-prev-pagination-next {
    width: 25.6rem;
    margin-left: calc(50vw - 12.8rem);
    margin-top: 2.8rem;
  }
}

.swiper-button-prev,
.swiper-button-next {
  position: static;
  width: 2rem;
  height: 2rem;
  margin: 0;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 1;
}

.swiper-button-prev::after {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f053';
  font-size: 1.5rem;
  color: #191970;
}

.swiper-pagination {
  display: flex;
  font-size: 1.5rem;
  font-weight: 700;
  width: calc(100% - 12rem);
  position: relative;
  align-items: center;
  justify-content: center;
  margin-top: 1.3rem;
  margin-right: 0.2rem;
}

@media (min-width: 768px) {
  .swiper-pagination {
    font-size: 2.8rem;
    margin-top: 1.4rem;
    margin-left: -0.5rem;
  }
}

.swiper-pagination-current {
  margin-right: 0.6rem;
}

.swiper-pagination-total {
  margin-left: 0.6rem;
}

@media (min-width: 768px) {
  .swiper-pagination-current {
    margin-right: 0.6rem;
  }

  .swiper-pagination-total {
    margin-left: 0.6rem;
  }
}

.swiper-button-next::after {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f054';
  font-size: 1.5rem;
  color: #191970;
}

.servicelist-title {
	font-size: 1.5rem;
	color: #1A335E;
}