@charset "UTF-8";
/*----------------------------------------
法人・個人事業主のお客様ページは以下を挿入
----------------------------------------*/ 
/*下層ヘッダー背景グラデ*/
.pages_head { background: #41D6C5;
background: linear-gradient(90deg,rgba(65, 214, 197, 1) 0%, rgba(43, 198, 150, 1) 100%); }

/*サイドメニュー色変*/
.side_nav .side_nav_box { background: #C7F7EE; }
.side_nav a { color: #232323; }
.side_nav a:hover { color: #232323; background: #bae8df; }
.side_nav a.is-active { color: #232323; background: #a5e8db; font-weight: 700; }

/*----------------------------------------
END 法人・個人事業主のお客様ページは以下を挿入 END
----------------------------------------*/ 
/* 
-------------------------------------------------- */
h2.c_a { color: #003396;}
.sec--inner {
	display: flex; justify-content: center; gap: 40px;
	margin: 0 auto;
}
.sec--inner .photo img { border-radius: 16px;}

.sec--inner p + p { margin-top: 1.1em;}

@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
}
@media only screen and (max-width: 980px){
}
@media only screen and (max-width: 600px){
	.sec--inner { flex-direction: column; gap:0;}
	.sec--inner .photo { width:100%; margin-top: 20px;}
	.sec--inner .txt { width:100%;}
}


/* sec00
-------------------------------------------------- */
#sec00 .ttl--img { max-width:501px; margin:60px auto 54px;}
#sec00 .sec--inner { max-width:721px; margin: 0 auto 52px; justify-content: center; gap:12.7%;}
#sec00 .sec--inner p { margin-bottom: 1.2em; text-align: center; font-weight: bold;}
#sec00 .btn { text-align: center; margin:0 auto;}

@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
}
@media only screen and (max-width: 980px){
}
@media only screen and (max-width: 600px){
  #sec00 .sec--inner p { margin-bottom: .5em; }
  #sec00 .ttl--img { margin: 35px auto; }
  #sec00 .sec--inner .logo { width:80%; margin: 0 auto;}
  #sec00 .sec--inner > div { margin-bottom: 20px; }
}


/* sec01
-------------------------------------------------- */
#sec01 { padding: 67px 38px 54px; border-radius: 12px; background: #F6F9FF;}
#sec01 .sec--inner { align-items: center; }
#sec01 .photo { max-width:634px;}
#sec01 .photo img { border-radius: 16px;}
#sec01 .photo p {
	margin: 40px auto 0;
	font-size: clamp(16px, 2.2vw, 20px); font-weight: bold; color: #013396;
	text-align: center;
}

/*#sec01 .txt { padding-top: 56px;}*/
#sec01 .txt p {
    font-size: clamp(15px, 2vw, 18px); font-weight: bold; 
	line-height: 2.2; white-space: nowrap;	
}

#sec01 .point { margin: 30px 0 0;}
.ttl--blue span {
	display: inline-block;
	padding:.75em .6em .75em;
	font-size: clamp(15px, 2.4vw, 24px); font-weight: bold; color: #fff; line-height: 1.1;
	background: #013396;
}
.ul--point li {
	display: flex; align-items: center; flex-wrap: wrap;
	padding: 25px 0;
	border-bottom:1px solid #d4dae6;
}
.ul--point li .num {
	display: flex; justify-content: center; align-items: center;
	width:45px; height:45px; margin-right: 12px; 
	font-size: clamp(15px, 2vw, 18px); font-weight: bold; color: #fff; text-align: center;
	border-radius: 30px;
	background-image: linear-gradient(#00c8c8, #013396);
}
.ul--point li .none {
	width:calc(100% - 57px - 65%);
	color: #013396; font-weight: 500;
}
.ul--point li .ex { width:65%;}

#sec01 .btn { margin:44px auto 0; text-align: center;}

@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
}
@media only screen and (max-width: 980px){
}
@media only screen and (max-width: 600px){
	#sec01 { padding: 35px 20px 30px; border-radius: 12px; background: #F6F9FF;}
	
	#sec01 .sec--inner .photo { max-width:100%;}
	#sec01 .photo { margin: 25px 0 15px;}
	#sec01 .photo img { border-radius: 12px;}
  #sec01 .txt p { line-height: 1.6; }
	#sec01 .point { margin: 25px 0 0;}
	.ul--point { margin: 0;}
	.ul--point li .none { width:calc(100% - 57px);}
	.ul--point li .ex { width:100%; margin-top: 5px; line-height: 1.6;}
  .ul--point li { padding: 15px 0; }
  .ul--point li .num { width: 35px; height: 35px; }
}


/* sec02
-------------------------------------------------- */
#sec02 .sec--inner {}
#sec02 .sec--inner .photo { max-width:380px;}


@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
}
@media only screen and (max-width: 980px){
}
@media only screen and (max-width: 600px){
	#sec02 ul { flex-direction: column; gap:15px; }
	#sec02 ul li {}
	#sec02 ul li .icon img { max-width:100px;}
}



/* sec03
-------------------------------------------------- */
#sec03 .sec--inner { flex-direction: row-reverse}
#sec03 .sec--inner .photo { max-width:423px;}
#sec03 .sec--inner .txt_area { width:calc(100% - 463px);}

@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
}
@media only screen and (max-width: 980px){
}
@media only screen and (max-width: 600px){
	#sec03 .sec--inner { flex-direction: column; margin-top: 0;}
	#sec03 ul { }
	#sec03 .sec--inner .txt { width:100%; padding-top:0px;}
  #sec03 .sec--inner .txt_area { width: 100%; }
	
	#sec03 .sec--inner .photo { max-width:100%;}
	
	#sec03 .txt .att { margin:0 0 20px;}
}


/* sec04
-------------------------------------------------- */
#sec04 .sec--inner { margin: 40px 0;}
#sec04 .ttl--blue { margin-top: 47px;}
#sec04 .ttl--blue span { font-size: clamp(16px, 2.2vw, 20px);}

#sec04 .settei {
	padding: 40px; border: 2px solid #013396;
}

@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
}
@media only screen and (max-width: 980px){
}
@media only screen and (max-width: 600px){
	#sec04 .settei { padding: 15px;}
}



/* sec05
-------------------------------------------------- */
#sec05 .monitor {
	margin-top: 35px;
	padding: 30px 50px;
	background: #F6F9FF; border-radius: 12px;
	
	display: flex;
}
#sec05 .monitor img { width:50%;}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
}
@media only screen and (max-width: 980px){
}
@media only screen and (max-width: 600px){
	#sec05 .monitor { flex-direction: column; padding: 20px 15px;}
	#sec05 .monitor img { width:100%;}
	#sec05 .monitor img + img { margin-top: 20px;}
}


/* sec06
-------------------------------------------------- */
#sec06 {
	padding: 35px 50px; border-radius: 16px;
	background: #E5F9F9;
}
#sec06 .sec--inner { flex-direction: row-reverse;}
#sec06 .sec--inner .photo { max-width:312px;}
#sec06 .sec--inner .txt_area { width:calc(100% - 352px);}

@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
}
@media only screen and (max-width: 980px){
}
@media only screen and (max-width: 600px){
	#sec06 { padding: 20px 20px;}
	#sec06 .sec--inner { flex-direction: column; gap:0px; }
	#sec06 .sec--inner .photo,
  #sec06 .sec--inner .txt_area { width: 100%; }
}



/* sec07
-------------------------------------------------- */
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
}
@media only screen and (max-width: 980px){
}
@media only screen and (max-width: 600px){
}


/* sec08
-------------------------------------------------- */
#sec08 .sec--inner { margin: 40px 0;}
#sec08 p + p { margin-top: 0.8em;}

#sec08 .sec--inner .photo { max-width:480px;}
#sec08 .sec--inner .photo img { border-radius: 12px;}
#sec08 .sec--inner .txt { padding-top: 0;}
#sec08 .sec--inner .txt h3 {
	position: relative;
    font-family: var(--font-Mincho-B1);
    font-weight: 800;
    font-size: clamp(18px, 5vw, 32px);
    color: var(--blue-color);
    margin-bottom: 30px;
}
#sec08 .sec--inner .txt .att {
	margin: 20px 0 50px; padding: 20px;
	background: #F6F9FF; border-radius: 12px;
	color: #013396;
}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
}
@media only screen and (max-width: 980px){
}
@media only screen and (max-width: 600px){
  #sec08 .sec--inner .txt .att { margin-bottom: 20px; }
}



/* sec09
-------------------------------------------------- */
.ul--links {
	display: flex; justify-content: space-between; gap:20px;
	margin-top: 110px;
}
.ul--links li { width:33%;}
.ul--links li a { width:100%; box-sizing: border-box;}

/*
.c-button-more { position: relative; border-width: 1px !important;}
.c-button-more::after { 
	content:''; position: absolute; right:20px; top:50%; transform:translateY(-50%) rotate(45deg);
	width:7px; height:7px;
	border-top:1px solid #013396; border-right:1px solid #013396;
}
.c-button-more:hover::after { border-color: #fff;}
.c-button-more.bg_ylw { background: #FDD000; color: #000!important; border: 1px solid #FDD000; }
.c-button-more.bg_ylw:hover { color: #fff !important;}
.c-button-more.bg_bgr { background: #00C8C8; color: #fff!important;}
*/

.dl--faq {
	margin-bottom: 10px; padding:15px 24px;
	border: 2px solid #E5F9F9; border-radius: 6px;
}
.dl--faq dt { position: relative; padding:0 0 0 40px;}
.dl--faq dt::before { content:'Q'; font-size: 20px; font-weight: bold; color:#00B8B8;
	position: absolute; left: 0; top:0em;
}
.dl--faq dd { display: none; position: relative; padding: 15px 0 0 40px;
	/*opacity: 0; visibility: hidden; transition:.4s all; */
}
.dl--faq dd::before { content:'A'; font-size: 20px; font-weight: bold; color:#013396;
	position: absolute; left: 0; top:0.9em;
}
.dl--faq.is--open dd { /*display: block;*/ margin-top: 15px; border-top:1px dotted #B2B2B2; /*opacity: 1; visibility: visible; */}

/*#sec08 .contact-cta__inner { display: none;}*/

@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
}
@media only screen and (max-width: 980px){
}
@media only screen and (max-width: 600px){
	.ul--links { flex-direction: column;}
	.ul--links li { width:100%;}
}



/* 
-------------------------------------------------- */
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
}
@media only screen and (max-width: 980px){
}
@media only screen and (max-width: 600px){
}



/* 
-------------------------------------------------- */
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
}
@media only screen and (max-width: 980px){
}
@media only screen and (max-width: 600px){
}



/* 
-------------------------------------------------- */
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
}
@media only screen and (max-width: 980px){
}
@media only screen and (max-width: 600px){
}


/* 
-------------------------------------------------- */
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
}
@media only screen and (max-width: 980px){
}
@media only screen and (max-width: 600px){
}