@charset "UTF-8";
section h3 {
  background: none;
  color: inherit;
  padding: 0;
  font-weight: normal;
  font-size: inherit;
  margin: 0;
}



.title_wrapper{
  background-repeat:no-repeat;
  background-image: url(../img/main.png),url(../img/main2.png);
  background-size:contain,cover;
  background-position:center center;
  width:100%;
  height:680px;
  padding-top: 42px;
  box-sizing: border-box;
}
.title_wrapper h1.title{
  text-align:center;
  margin-bottom: 100px;
}
.title_wrapper h1.title img{
  max-width:800px;
  width:90%;
}
.title_wrapper .copy img{
  max-width:560px;
  width:80%;
}

@media screen and (max-width: 1020px){
  .title_wrapper{
    background-image: url(../img/main.png);
    background-size:cover;
  }
}
@media screen and (max-width: 840px){
  .title_wrapper{
    max-width:810px;
    width:100%;
    height:0;
    padding-top:66.66%;
    position:relative;
    background-image: url(../img/main.png);
    background-size:cover;
  }
  .title_wrapper h1.title{
    position: absolute;
    top:6%;
    left:50%;
    transform:translate(-50%,0);
    width: 92%;
  }
}


.br520{
  display:none;
}
@media screen and (max-width: 520px){
  .br520{
    display:inline;
  }
}


.intro .copy{
  text-align:center;
  padding-top:50px;
}
.intro .copy img{
  width:70%;
  max-width:780px;
}
.intro .lead{
  text-align:center;
  font-size:132%;
  line-height:1.7;
  padding:5% 0;
}
.intro ul{
  list-style:none;
  display:flex;
  justify-content:space-between;
  max-width:920px;
  width:92%;
  margin:0 auto 7%;
  padding:0;
}
.intro ul li{
  width:47%;
  padding:0;
}
.intro ul li img{
  width:100%;
}
.intro .jikken{
  max-width: 920px;
  width: 92%;
  margin:0 auto;
}
.intro .jikken img{
  width:100%;
  margin-bottom:6px;
}
.intro .jikken p{
  text-align:center;
  font-size:132%;
  line-height:1.7;
  padding:5% 0;
}


.sect{
  width:96%;
  max-width:956px;
  margin:0 auto 100px;
  box-sizing:border-box;
}
@media screen and (max-width: 520px){
  .intro .copy{
    padding-top:9vw;
  }
  .sect{
    margin:0 auto 60px;
  }
}
.sect p{
  padding:0;
  margin:0;
}
.sect h2{
  text-align:center;
  color:#fff;
  font-size:150%;
  font-weight:bold;
}
.sect .mainpic{
  width:100%;
}


.sect h2{
  padding:18px 0;
  margin:0 0 0 0;
}
.sect .catch{
  text-align: center;
  font-size:28px;
  line-height:1.6;
  max-width:700px;
  width:100%;
  padding:20px 10px;
  margin:16px auto;
  box-sizing: border-box;
}
.sect .pt_wrapper{
  display:block;
  overflow: hidden;
  max-width:700px;
  width:100%;
  margin:0 auto 16px;
  box-sizing: border-box;
}
.sect .pt_wrapper p.pic{
  width:50%;
  float:left;
  margin:0 1em 1em 0;
}
.sect .pt_wrapper p.pic img{
  width:100%;
}
.sect .pt_wrapper p.txt{
  line-height:1.7;
  display:inline;
}

@media screen and (max-width: 800px){
  .sect .pt_wrapper p.pic,
  .sect .pt_wrapper p.txt{
    width:50%;
  }
}

@media screen and (max-width: 834px){
  .sect .catch{
    font-size:24px;
    padding:14px 6px;
  }
}

@media screen and (max-width: 520px){
  .sect .catch{
    font-size:18px;
    padding:10px 3px;
  }
  .sect .pt_wrapper{
    display:block;
    overflow: hidden;
  }
  .sect .pt_wrapper p.pic{
    width:40%;
    float:left;
    margin:0 1em 1em 0;
  }
  .sect .pt_wrapper p.txt{
    display:inline;
    padding:0;
    margin:0;
  }
}




.sect.sect1{
  border: #65222a;
}
.sect.sect1 h2{
  background: #65222a;
}
.sect.sect1 .catch{
  color: #65222a;
  background: #ecd3cc;
}




.sect.sect2{
  border: #223265;
}
.sect.sect2 h2{
  background: #223265;
}
.sect.sect2 .catch{
  color: #223265;
  background: #a8b5e0;
}




.sect.sect3{
  border: #184911;
}
.sect.sect3 h2{
  background: #184911;
}
.sect.sect3 .catch{
  color: #184911;
  background: #b7dfb1;
}




.matome{
  width:100%;
  max-width:100%;
  /*
  background:url(../img/matome.png);
  background-size:cover;
  background-position:top center;
  padding:50px 0;
  */
}
.matome h2{
  color:#223265;
  text-align:center;
  padding: 0.4em;
  margin: 0 auto 32px;
  font-size:150%;
  font-weight: bold;
  line-height:1.6;
  max-width:960px;
  width:96%;
  border: solid 1px #aaa;
  background:#fff;
  box-shadow:0 0 0.3em 0.1em rgb(0 0 0 / 24%);
  box-sizing: border-box;
}
.matome .msg{
  width:90%;
  max-width:720px;
  margin:0 auto 30px;
  font-size:116%;
  line-height:1.6;
  /*color:#fff;*/
}
.matome .btn{
  width:80%;
  max-width:420px;
  margin:0 auto;
  border-radius:6px;
  background:rgba(255,255,255,0.6);
  box-sizing:border-box
}
.matome .btn a{
  padding:10px;
  text-decoration:none;
  display:flex;
  align-items: center;
  color:rgb(24, 61, 224);
}
.matome .btn .pic{
  width:80px;
  padding:0;
  margin:0;
}
.matome .btn .pic img{
  width:100%;
  vertical-align: bottom;
}
.matome .btn .txt{
  flex:1;
  margin:0;
  padding:0 0 0 10px;
  line-height:1.7;
}


@media screen and (max-width: 834px){
  .matome .btn .txt br{
    display:none;
  }
}

.b_keikaku{
  text-align: center;
  padding:30px 0 40px;
  max-width:960px;
  width:96%;
  margin:50px auto 40px;
  border-top:solid 1px #ddd;
}
.b_keikaku img{
  width:80%;
  max-width:360px;
  mix-blend-mode: multiply;
}