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

html {
    scroll-behavior:smooth;
}

body {
    margin: 0 auto;
    padding: 0;
    font-size: 16px;
    font-family: 'Noto Sans JP', "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    letter-spacing: 0.04em;
}


.pc_only { }
.sp_only { display: none;}

@media screen and (max-width: 1000px) {
body {
    font-size: 16px;
}

.pc_only { display: none; }
.sp_only { display: inherit;}

}


.tC { text-align: center; }
.img100 {
    width: 100%;
    vertical-align: bottom;}
.img90 {
    width: 90%;
    margin: 0 auto;
    display: block;}

.marker_y {
    background: #fde839;
    padding: 2px 10px;
    margin: 0 5px;
}


.lv3 {
    color:#235ca2;
    font-weight: bold;
    font-size: 120%;
}

/* Header ------------------------------------- */
header {
    background: #6bc8f2;
    padding: 10px 40px;
    position: relative;
    color: #fff;
}

header h1 { margin: 0;}



/* 動画全体の横幅を指定するためのdiv */
.video-wrap {
  max-width: 70%; /* ここに動画の横幅を指定 */
  margin: 0 auto;
  display: block;
}

/* 動画を囲うdiv */
.video {
  position: relative;
  width:100%; /* 横幅は100%で固定 */
  height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
  padding-top: 56.25%; /* 高さを指定(16:9) */
}

/* YouTube埋め込み用のiframe */
.video iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* Key ------------------------------------- */

#key { margin: 0; padding:0;}
#key  img { width: 100%;}


/* Block01 ------------------------------------- */
#bl01 {
   background: #6bc8f2 url("img/bg02_human.png") no-repeat 50% 100%;
   padding: 0 0 250px;
   text-align: center;
}

#bl01 article {
    width: 90%;
    margin: 0 auto;
}


#bl01 article img {
    width: 45%;
    vertical-align: middle;
}

#bl01 article img:nth-child(1){ margin-right: 30px; }


#bl01 p {
    width: 60%;
    margin: 40px auto;
    background: #fff;
    padding:40px 0;
    text-align: center;
    border-radius: 15px;
}

#bl01 p img { width: 60%;}


/* Block02 ------------------------------------- */
#bl02 {
   background: #f4d05e;
   padding: 70px 0;
   text-align: center;
}

#bl02 img { width: 40%;}




/* Block03 ------------------------------------- */
#bl03 {
   background: url("img/bg03_dot.jpg") no-repeat;
   background-size: 100%;
   padding: 70px 0;
}

#bl03 h2,
#bl03 h3 { text-align: center;}

#bl03 article {
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
    width: 65%;
    margin: 50px auto;
}

#bl03 article div:nth-child(1){ 
    width: 58%;
}

#bl03 article div:nth-child(2){ 
    width: 35%;
}

#bl03 ul { margin-left: -20px;}
#bl03 ul li {
    list-style: none;
    margin-bottom: 10px;
}

#bl03 ul li:before {
    content: "●";
    color: #235ca2;
    text-indent: 1em;
    margin-left: -1em;
}

/* Block04 ------------------------------------- */
#bl04 {
    background: linear-gradient(90deg, rgba(210,238,251,1) 0%, rgba(210,238,251,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    padding: 80px 0;
}

#bl04 h2,
#bl04 h3 { text-align: center;}


#bl04 article {
    width: 60%;
    margin: 50px auto 60px;
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

#bl04 article img {
    height: 750px;
    vertical-align: top;
}

#bl04 p {
    width: 60%;
    margin: 20px auto 0;
}


/* Block05 ------------------------------------- */

#bl05 {
    padding: 80px 0 50px;
}

#bl05 h2,
#bl05 h3{ text-align: center;}

#bl05 article {
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
    width: 60%;
    margin: 50px auto 60px;
}

#bl05 article div {
    width: 55%;
    margin: 0;
}

#bl05 article img { width: 40%; }

#bl05 ul { margin-left: -20px;}
#bl05 ul li {
    list-style: none;
    margin-bottom: 10px;
}

#bl05 ul li:before {
    content: "●";
    color: #235ca2;
    text-indent: 1em;
    margin-left: -1em;
}


/* Block06 ------------------------------------- */

#bl06 {
    background: #f4d05e;
    padding: 80px 0;
}

#bl06 h2 { text-align: center;}

#bl06 article {
    width: 60%;
    margin: 50px auto 60px;
    background: #fff;
    padding: 50px 100px;
    border-radius: 10px;
    box-sizing: border-box;
}

#bl06 article div {
    text-align: center;
    margin-bottom: 10px;
}

/* Block07 ------------------------------------- */

#bl07 {
    background: url("img/bg_dot.gif");
    padding: 80px 0;
}

#bl07 h2 { text-align: center;}

#bl07 article {
    width: 60%;
    margin: 50px auto 20px;
}

#bl07 article div {
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

#bl07 article img { width: 48%; }
#bl07 p {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 15px;
    color: #235ca2;
    font-weight: bold;
}

#bl07 article video { width: 48%; }



/* Block08 ------------------------------------- */

#bl08 {
    padding: 80px 0;
}

#bl08 h2 { text-align: center;}
#bl08 table {
    width: 450px;
    margin: 0 auto;
}

#bl08 table th { 
    color: #235ca2;
    text-align: left;
    display: block;
}

#bl08 table th,
#bl08 table td { padding-bottom: 20px;}



/* Block09 ------------------------------------- */

#bl09 {
    background: #d2eefb;
    padding: 80px 0 40px;
}

#bl09 h2 { text-align: center;}
#bl09 article { 
    margin: 50px auto;
    width: 50%;
    background: #fff;
    padding: 50px;
    text-align: center;
    border-radius: 15px;
}

#bl09 article a { transition : all 0.5s ease 0s; }
#bl09 article a:hover { opacity: 0.8; }

footer p {
    text-align: center;
    font-size: 80%;
}


/* Block10 ------------------------------------- */

#bl10 {
   margin: 50px auto;
   width: 40%;
}

#bl10 a {
    width: 45%;
    border:1px rgba(182,182,182,1.00) solid;
    display: inline-block;
    margin: 0 2%;
    transition : all 0.5s ease 0s;
}
#bl10 a img { width: 100%; vertical-align: bottom; }
#bl10 a:hover { opacity: 0.7;}




@media screen and (max-width: 1000px) {
header { padding-bottom: 30px; }

.lv3 {
    color:#235ca2;
    font-weight: bold;
    font-size: 105%;
}



#bl01 {
    background: #6bc8f2 url(img/bg02_human.png) no-repeat 50% 100%;
    background-size: 100%;
    padding: 0 0 100px;
    text-align: center;
}

#bl01 article {
    width: 80%;
}

#bl01 article img {
    width: 100%;
    margin-bottom: 20px;
}

#bl01 p {
    width: 90%;
    margin: 20px auto;
    background: #fff;
    padding: 40px 0;
}

#bl02 img { width: 80%; }

#bl03 article {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 90%;
    margin: 20px auto 50px;
}

#bl03 article div:nth-child(1),
#bl03 article div:nth-child(2){ width: 100%}

#bl03 article div:nth-child(2) img {
    margin: 30px  auto 0;
    display: block;
}

#bl03 h2 img { width: 80%; }


#bl04 article {
    width: 90%;
    margin: 50px auto 60px;
    text-align: center;
}

#bl04 article img {
    width: 70%;
    height: auto;
    vertical-align: top;
    margin: 0 auto;
    display: block;
}

#bl04 article img:nth-child(1) { margin-bottom: 100px; }
#bl04 p { width: 80%;}
#bl04 h2 img {
    width: 80%;
}

#bl05 h2 img { width: 90%;}
#bl05 article {  width: 80%;}

#bl05 article div {
    width: 100%;
    margin: 0;
}

#bl05 article img { width: 100%;}

#bl06 {
    background: #f4d05e;
    padding: 40px 0 20px;
}

#bl06 article {
    width: 90%;
    margin: 50px auto 60px;
    background: #fff;
    padding: 50px 25px 30px;
    border-radius: 10px;
    box-sizing: border-box;
}

#bl06 article div img { 
    width: 80%;
}

#bl07 article {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 90%;
    margin: 50px auto 20px;
}

#bl07 article img { width: 100%; margin-bottom: 10px; }
#bl07 article img:nth-child(1){margin-bottom: 20px;}
#bl07 p { width: 100%;}
#bl07 article video { width: 100%; }

#bl08 table {
    width: 90%;
    margin: 0 auto;
}

#bl08 table th,
#bl08 table td { display: block;}

#bl08 table th {
    background: #e5f7ff;
    padding: 10px;
    margin-bottom: 8px;
}


#bl09 {
    background: #d2eefb;
    padding: 40px 0 20px;
}
#bl09 h2 img { width: 90%;}
#bl09 article {
    margin: 50px auto;
    width: 90%;
    padding: 30px 25px;
    box-sizing: border-box;
}

#bl09 article img { width: 90%;}

#bl10 {
   margin: 50px auto;
   width: 90%;
}

#bl10 a {
    width: 44%;
    border:1px rgba(182,182,182,1.00) solid;
    display: inline-block;
    margin: 0 2%;
    transition : all 0.5s ease 0s;
}


.video-wrap {
  max-width: 90%; /* ここに動画の横幅を指定 */
  margin: 0 auto;
  display: block;
}

}