@charset "utf-8";

/*********************************
*
* PC
*
*********************************/

@media screen and (min-width:751px){/* -------------------------PC */

#c1 { width: 1080px; margin: 50px auto 0 auto;}
#c1 .inner { position: relative; width: 1080px; height: 230px; margin: 0 auto 0 auto; background: url("../images/c5_bg_pc.jpg") right top no-repeat; background-size: cover; border: 2px solid #cae5fb; border-radius: 20px; overflow: hidden; }
#c1 .inner .child2 { position: absolute; width: 980px; left: 30px; top: 30px; }
#c1 .inner .subt { display: block; margin: 0 0 0 0; font-size: 28px; font-weight: 700; color: #3d4654; letter-spacing: 0.125em; text-shadow: 0 0 3px #fff,0 0 3px #fff,0 0 3px #fff; line-height: 1.35em; }
#c1 .inner .subt span { color: #41a9a5; }
#c1 .inner .lead { margin: 0.5em 0 0 0; font-size: 0.85em; line-height: 1.85em; }

#c2 { width: 1080px; margin: 100px auto 0 auto;}
#c2 .inner { width: 1080px; margin: 70px auto 0 auto; padding: 50px; background: rgba(255,255,255,0.8); backdrop-filter: blur(5px); box-shadow: 0 0 15px rgba(188,206,220,0.7); border-radius: 20px; font-size: 18px; line-height: 1.75em; font-weight: 700; color: #154b78; }

.details { margin: 100px 0 0 0;  padding: 50px 0 100px 0; background:  #efefef; border-radius: 0 0 0 0; }
#c3 { width: 100%; margin: 0; }
#c3 .inner { display: flex; flex-wrap: wrap; justify-content: space-between; width: 1080px; margin: 0 auto; padding: 50px; background: #fff; border-radius: 40px; font-size: 20px; line-height: 1.85em; }
#c3 .inner h3 { font-size: 40px; line-height: 1.25em; font-weight: 700; color: #3d4654; }
#c3 .inner p { padding: 30px 0 0 0; }
#c3 .inner p.annotation { font-size: 16px; line-height: 1.75em; padding: 1.25em 0 0 16px; text-indent: -16px; }
#c3 .inner .i { width: 168px; }
#c3 .inner .i img { width: 168px; }
#c3 .inner .t { position: relative; width: 760px; }
#c3 .inner .t span { color: #f26b55; }
#c3 .inner .t em { color: #80cd6b; }
#c3 .child1 { position: relative; width: 100%; margin: 50px 0 0 0; background: linear-gradient(to right, #fff 50%, transparent 50%);  }
#c3 .child2 { position: relative; width: 100%; margin: 50px 0 0 0; background: linear-gradient(to right, transparent 50%, #fff 50%);  }

#c4 { width: 1080px; margin: 100px auto 0 auto;}
#c4 .graph { margin: 50px 0 0 0; text-align: center; }
#c4 p { margin: 50px 0 0 0; text-align: center; }

#c5 { width: 1080px; margin: 100px auto 0 auto;}
#c5 .inner { display: flex; flex-wrap: wrap; width: 960px; margin: 50px auto 0 auto;}
#c5 .inner strong { width: 320px; padding: 0.75em 1.5em; background: #275aa6; border-bottom: 1px solid #fff; color: #fff; font-weight: 400; }
#c5 .inner div { position: relative; width: 640px; padding: 0.75em 1.5em; background: #f6fbfe; border-bottom: 1px solid #275aa6; color: #666; }
#c5 .inner div ul { list-style: disc; padding: 0 0 0 1.5em; }
#c5 .inner div ul li+li { margin: 0.25em 0 0 0; }

#c6 { position: relative; width: 980px; margin: 100px auto 0 auto; color: #3d4654;}
#c6 .inner { width: 100%; margin: 70px 0 0 0; padding: 20px; background: rgba(255,255,255,0.8); backdrop-filter: blur(5px); box-shadow: 0 0 15px rgba(188,206,220,0.7); border-radius: 20px; }
#c6 .inner2 { width: 100%; margin: 70px 0 0 0; padding: 20px; background: #efefef;  border-radius: 20px; }
#c6 .inner strong,
#c6 .inner2 strong { display: block; padding: 0 0 20px 0; text-align: center; color: #154b78; border-bottom: 1px solid #154b78; font-size: 24px; line-height: 1.75em;  }
#c6 .inner strong em,
#c6 .inner2 strong em { display: block; font-size: 0.7em; line-height: 1; padding: 0.75em 0 0 0; font-weight: 700; color: #acb4bf; }
#c6 .inner p,
#c6 .inner2 p { padding: 20px; }
#c6 > p { margin: 50px 0 0 0; text-align: center; }
#c6 > p strong { display: block; padding: 0; text-align: center; color: #333; font-size: 24px; line-height: 1.75em; }


}/* /@media */


/*********************************
*
* SP
*
*********************************/

@media screen and (max-width:750px){/* -------------------------SP */

#c1 { width: 100%; margin: 0 auto 0 auto;}
#c1 .inner { position: relative; width: 86.66vw; padding: 4vw 0; margin: 0 auto 0 auto; background: url("../images/c5_bg_sp.jpg") center 50% no-repeat; background-size: cover; border: 2px solid #cae5fb; border-radius: 2.66vw; overflow: hidden; }
#c1 .inner .child2 { width: 76.33vw; margin: 0 auto; }
#c1 .inner .subt { display: block; margin: 0 0 0 0; font-size: 3.6vw; font-weight: 700; color: #3d4654; letter-spacing: 0.125em; text-shadow: 0 0 0.4vw #fff,0 0 0.4vw #fff,0 0 0.4vw #fff; line-height: 1.35em; }
#c1 .inner .subt span { color: #41a9a5; }
#c1 .inner .lead { margin: 0.5em 0 0 0; padding: 0 0 0 0; font-size: 0.85em; line-height: 1.85em; }

#c2 { width: 100%; margin: 13.33vw auto 0 auto;}
#c2 .inner { width: 86.66vw; margin: 6.66vw auto 0 auto; padding: 5.33vw; background: rgba(255,255,255,0.8); backdrop-filter: blur(5px); box-shadow: 0 0 2vw rgba(188,206,220,0.7); border-radius: 2.66vw; font-size: 3.2vw; line-height: 1.75em; font-weight: 700; color: #154b78; }

.details { margin: 13.33vw 0 0 0;  padding: 6.66vw 0 13.33vw 0; background:  #efefef; border-radius: 0 0 0 0; }
#c3 { width: 100%; margin: 0; }
#c3 .inner { display: flex; flex-wrap: wrap; justify-content: space-between; width: 86.66vw; margin: 0 auto; padding: 6.66vw; background: #fff; border-radius: 5.33vw; font-size: 3.6vw; line-height: 1.85em; }
#c3 .inner h3 { font-size: 4.6vw; font-weight: 700; color: #3d4654; }
#c3 .inner p { padding: 3.2vw 0 0 0; }
#c3 .inner p.annotation { font-size: 2.66vw; line-height: 1.75em; padding: 1.25em 0 0 16px; text-indent: -2.66vw; }
#c3 .inner .i { width: 100%; text-align: center; }
#c3 .inner .i img { width: 30vw; }
#c3 .inner .t { position: relative; width: 760px; }
#c3 .inner .t span { color: #f26b55; }
#c3 .inner .t em { color: #80cd6b; }
#c3 .inner div+div { margin: 5.33vw 0 0 0; }
#c3 .child1 { position: relative; width: 100%; margin: 6.66vw 0 0 0; background: linear-gradient(to right, #fff 50%, transparent 50%);  }
#c3 .child2 { position: relative; width: 100%; margin: 6.66vw 0 0 0; background: linear-gradient(to right, transparent 50%, #fff 50%);  }

#c4 { width: 100%; margin: 13.33vw auto 0 auto;}
#c4 .graph { width: 86.66vw; margin: 6.66vw auto 0 auto; text-align: center; }
#c4 p { margin: 6.66vw 0 0 0; text-align: center; }

#c5 { width: 100%; margin: 13.33vw auto 0 auto;}
#c5 .inner {display: flex; flex-wrap: wrap;  width: 86.66vw; margin: 6.66vw auto 0 auto;}
#c5 .inner strong { width: 100%; padding: 0.5em 1em; background: #275aa6; border-bottom: 1px solid #fff; color: #fff; font-weight: 400; }
#c5 .inner div { width: 100%; padding: 0.5em 1em; background: #f6fbfe; border-bottom: 1px solid #275aa6; color: #666; }
#c5 .inner div ul { list-style: disc; padding: 0 0 0 1.5em; }
#c5 .inner div ul li+li { margin: 0.25em 0 0 0; }


#c6 { width: 100%; margin: 13.33vw auto 0 auto; color: #3d4654;}
#c6 .inner { width: 86.66%; margin: 6.66vw auto 0 auto; padding: 5.33vw; background: rgba(255,255,255,0.8); backdrop-filter: blur(0.666vw); box-shadow: 0 0 2vw rgba(188,206,220,0.7); border-radius: 2.66vw; }
#c6 .inner2 { width: 86.66%; margin: 6.66vw auto 0 auto; padding: 5.33vw; background: #efefef; border-radius: 2.66vw; }
#c6 .inner strong,
#c6 .inner2 strong { display: block; padding: 0 0 2.66vw 0; text-align: center; color: #154b78; border-bottom: 1px solid #154b78; font-size: 3.6vw; line-height: 1.75em;  }
#c6 .inner strong em,
#c6 .inner2 strong em { display: block; font-size: 0.8em; line-height: 1; padding: 0; font-weight: 700; color: #acb4bf; }
#c6 .inner p,
#c6 .inner2 p { padding: 2.66vw; }
#c6 > p { width: 86.66%; margin: 6.66vw auto 0 auto; text-align: center; }
#c6 > p strong { display: block; padding: 0; text-align: center; color: #333; font-size: 3.6vw; line-height: 1.75em; }




}/* /@media */