@charset "UTF-8";

/*------------- Main -------------*/
.page_ttl_wrap{
  background: #d8f4ed;
}
.main_img{
  position: relative;
  width: 100%;
  max-width: 1160px;
  height: 0;
  margin: 0 auto;
  padding: 2.25em 60px 48%;
  box-sizing: border-box;
}
.page_nav{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 18% 80px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.page_nav li{
  width: 49.5%;
  margin-bottom: 1.25%;
}
.page_nav li:nth-child(1){
  margin: 0 25.5% 1.6%;
}
.page_nav li:nth-child(3),
.page_nav li:nth-child(5),
.page_nav li:nth-child(7){
  margin-left: 1%;
}
.page_nav li a{
  position: relative;
  display: block;
  width: 100%;
  padding: .35em 0;
  background: #fff;
  text-align: center;
  border-radius: 50px;
  border: 4px solid #471615;
  opacity: 1;
  transition: .3s;
}
.page_nav li a:hover{
  opacity: .55;
  transition: .3s;
}
.page_nav li a img{
  width: 50%;
}
.page_nav li a::before{
  position: absolute;
  translate: 0 -50%;
  top: 52%;
  right: 25px;
  content: '';
  width: 28px;
  height: 20px;
  background: #471615;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

@media screen and (min-width: 1080px){
  .main_img{
    padding: 2.5em 60px 520px;
  }
  .page_nav{
    padding: 18.4% 80px 0;
  }
  .page_nav li{
    margin-bottom: 1.5%;
  }
  .page_nav li:nth-child(1){
    margin: 0 25.5% 1.5%;
  }
}
@media screen and (max-width: 767px){
  .page_ttl_wrap{
    padding: 0 0 1em;
  }
  .main_img{
    max-width: 100%;
    height: auto;
    padding: 0 0 0;
  }
  .page_nav{
    position: inherit;
    top: inherit;
    left: inherit;
    flex-direction: column;
    padding: 0 10px;
  }
  .page_nav li{
    width: 100%;
    padding: 0 0;
    margin-bottom: 1%;
  }
  .page_nav li:nth-child(1){
    margin: 0 0 1%;
  }
  .page_nav li:nth-child(3),
  .page_nav li:nth-child(5),
  .page_nav li:nth-child(7){
    margin-left: 0;
  }
  .page_nav li a{
    position: relative;
    display: block;
    width: 100%;
    padding: 0 0;
    background: #fff;
    text-align: center;
    border-radius: 50px;
    border: 3px solid #471615;
    opacity: 1;
    transition: .3s;
  }
  .page_nav li a::before{
    width: 20px;
    height: 14px;
    right: 15px;
  }
}

.all_wrap{
  background: #ebfaf6;
}
.sec_wrap .inner{
/*  max-width: 1160px;*/
  max-width: 1040px;
  margin: 0 auto;
  background: #fff;
  padding: 50px 40px 0;
  box-sizing: border-box;
}
.sec_wrap section{
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (max-width: 767px){
  .sec_wrap .inner{
    max-width: 100%;
    margin: 0 0;
    padding: 25px 20px 80px;
  }
  .sec_wrap section{
    max-width: 1000px;
    margin: 0 auto;
  }
}

/*------------- section 01 -------------*/
.sec01_ttl{
  border: 4px solid #471615;
  border-radius: 50px;
  display: flex;
  align-items: center;
  padding: .15em 0;
  margin-bottom: 1.6em;
}
.sec01_ttl .ttl_logo{
  width: 35%;
  margin: 0 1.35em;
}
.sec01_ttl .txt{
  width: auto;
  line-height: 1.25;
  font-size: clamp(10px, 2.48vw, 25.8px);
  font-weight: bold;
}
.sec01 .wrap01{
  background: #c8d9f0;
  padding: 1em 2em;
  border-radius: 18px;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.sec01 .wrap01::after{
  content: '';
  width: 80px;
  height: 30px;
  background: #4694d1;
  position: absolute;
  translate: -50% 0;
  left: 50%;
  bottom: -20px;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.sec01 .wrap01 .image_wrap{
  width: 46%;
  margin-left: 2.5%;
}
.sec01 .wrap01 .txt_wrap{
  width: 48%;
}
.sec01 .wrap01 .txt_wrap .lead{
  font-weight: initial;
  font-size: clamp(10px, 2.56vw, 26.6px);
}
.sec01 .wrap01 .txt_wrap .list_wrap{
  font-size: clamp(14px,1.5vw,18px);
  margin-top: .45em;
}
.sec01 .wrap01 .txt_wrap .list_wrap li{
  display: flex;
  line-height: 1.45;
  padding-bottom: .4em;
}
.sec01 .wrap01 .txt_wrap .list_wrap li::before{
  content: '・';
}
.sec01 .wrap02 .lead{
  text-align: center;
  font-size: clamp(10px, 2.21vw, 23px);
  margin: 1.35em 0 .85em;
}
.sec01 .wrap02 .lead .point{
  color: #e8374a;
}
.sec01 .wrap02 .box_wrap{
  display: flex;
  justify-content: space-between;
}
.sec01 .wrap02 .box_wrap .box{
  width: calc(95% / 3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .25em 0;
  border: 4px solid #f3a69d;
  border-radius: 18px;
}
.sec01 .wrap02 .box_wrap .box .image{
  width: 48%;
}
.sec01 .wrap02 .box_wrap .box .txt{
  width: 48%;
  margin: 0 auto;
  font-size: clamp(10px, 1.44vw, 15px);
}
.sec01 .wrap02 .box_wrap .box03 .image{
  width: 40%;
  margin: 0 auto;
}
.sec01 .wrap03{
  background: #fbdfd8;
  padding: 20px 0;
  border-radius: 20px;
  margin-top: 1.75em;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sec01 .wrap03 .lead{
  background: #e8374a;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
  margin: 0 40px 40px 0;
}
.sec01 .wrap03 .lead span{
  font-weight: bold;
  color: #fff;
  display: block;
  line-height: 1.45;
  padding: .75em .7em;
  font-size: clamp(10px, 2.64vw, 27.5px);
}
.sec01 .wrap03 .box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 .5em;
}
.sec01 .wrap03 .box .txt_wrap{
  width: 58%;
  margin-top: 0;
}
.sec01 .wrap03 .box_ttl{
  font-size: clamp(16px, 1.7vw, 18px);
  color: #e8374a;
  font-weight: bold;
}
.sec01 .wrap03 .box_ttl .no{
  color: #fff;
  background: #e8374a;
  padding: .4em 1em .2em;
  letter-spacing: .1em;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
}
.sec01 .wrap03 .box_txt{
  text-align: justify;
  font-size: clamp(10px, 1.4vw, 15px);
  padding: .5em 0 0 1em;
}
.sec01 .wrap03 .box .image_wrap{
  width: 42%;
  padding-right: 15px;
}
.sec01 .wrap03 .box_left{
  grid-column: 1;
}
.sec01 .wrap03 .box04{
  grid-column: 2;
  grid-row: 1;
  border-left: 1px solid #e8374a;
}
.sec01 .wrap03 .box05{
  grid-column: 2;
  grid-row: 2;
  border-left: 1px solid #e8374a;
}
.sec01 .wrap03 .box06{
  grid-column: 2;
  grid-row: 3;
  border-left: 1px solid #e8374a;
}
.sec01 .wrap03 .box07{
  grid-column: 2;
  grid-row: 4;
  border-left: 1px solid #e8374a;
}

@media screen and (max-width:767px){
  .sec01_ttl{
    flex-direction: column;
    border: 3px solid #471615;
    border-radius: 20px;
    padding: .15em 0;
    margin-bottom: 1em;
  }
  .sec01_ttl .ttl_logo{
    width: 67%;
    margin: 0 auto;
  }
  .sec01_ttl .txt{
    width: 100%;
    text-align: center;
    padding-bottom: .25em;
    font-size: clamp(1.125rem, -0.317rem + 6.15vw, 1.375rem);/*18-22*/
  }
  .sec01 .wrap01{
    flex-direction: column;
    padding: 1em 1.25em;
    gap: 20px 0;
  }
  .sec01 .wrap01 .image_wrap{
    width: 100%;
    margin-left: 0;
    margin-bottom: .5em;
  }
  .sec01 .wrap01 .txt_wrap{
    width: 100%;
    order: -1;
  }
  .sec01 .wrap01 .txt_wrap .lead{
    font-size: clamp(1.25rem, -0.192rem + 6.15vw, 1.5rem);/*20-24*/
  }
  .sec01 .wrap01 .txt_wrap .list_wrap{
    gap: 5px 0;
    font-size: clamp(10px, 3.32vw, 25.5px);
  }
  .sec01 .wrap02 .lead{
    margin: 2em 0 1em;
    line-height: 1.4;
    font-size: clamp(0.938rem, 0.216rem + 3.08vw, 1.063rem);/*15-17*/
  }
  .sec01 .wrap02 .box_wrap{
    flex-direction: column;
    gap: 15px 0;
  }
  .sec01 .wrap02 .box_wrap .box{
    width: 100%;
    padding: .35em 0;
    border: 3px solid #f3a69d;
    line-height: 1.6;
  }
  .sec01 .wrap02 .box_wrap .box .txt{
    font-size: clamp(0.938rem, 0.216rem + 3.08vw, 1.063rem);/*15-17*/
  }
  .sec01 .wrap03{
    padding: 25px 0 0;
    display: flex;
    flex-direction: column;
  }
  .sec01 .wrap03 .box{
    padding-bottom: 30px;
  }
  .sec01 .wrap03 .box04,
  .sec01 .wrap03 .box05,
  .sec01 .wrap03 .box06,
  .sec01 .wrap03 .box07{
    border: none;
  }
  .sec01 .wrap03 .lead{
    margin: 0 30px 20px 0;
  }
  .sec01 .wrap03 .lead span{
    font-size: clamp(20px, 2.5vw, 28px);
  }
  .sec01 .wrap03 .box{
    padding: 0 0 1.2em;
  }
  .sec01 .wrap03 .box_txt{
    line-height: 1.4;
    font-size: clamp(10px, 2.8vw, 21.5px);
  }
  .sec01 .wrap03 .box .image_wrap{
    padding-right: 0;
  }
  .sec01 .wrap03 .box04{
    border-left: none;
  }
  .sec01 .wrap03 .box05{
    border-left: none;
  }
  .sec01 .wrap03 .box06{
    border-left: none;
  }
  .sec01 .wrap03 .box07{
    border-left: none;
  }
}

/*------------- section 02 -------------*/
.sec02 .sec_lead{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  color: #004097;
  font-size: clamp(10px, 2.88vw, 30px);
  font-weight: bolder;
  margin: 2em 0 .6em;
}
.sec02 .sec_lead span{
  font-weight: normal;
  background: #004097;
  color: #fff;
  font-size: clamp(10px, 2.8vw, 29.1px);
  padding: 3px 25px;
  border-radius: 30px;
  margin-right: .5em;
}
.sec02 .contents{
  display: flex;
  flex-direction: column;
  gap: 25px 0;
}
.sec02 .contents area{
  cursor: pointer;
}

@media screen and (max-width:767px){
  .sec02 .sec_lead{
    text-align: center;
    justify-content: center;
    margin-bottom: .75em;
    line-height: 1.4;
    font-size: clamp(10px, 4.8vw, 36.8px);
  }
  .sec02 .sec_lead span{
    font-size: clamp(10px, 4.8vw, 36.8px);
    border-radius: 30px;
    margin: 0 0 .5em 0;
  }
  .sec02 .contents{
    display: flex;
    flex-direction: column;
    gap: 25px 0;
  }
  .sec02 .contents area{
    cursor: pointer;
  }
}