/*--------------------
guideline.css
--------------------*/


.l-block{
  padding:16.5rem 5.0rem 18.5rem;
}
.l-block-inner{
  max-width:1200px;
  width:100%;
  margin:0 auto;
}
.l-block-table{
  width:100%;
  display:table;
}
.l-block-table > div{
  display:table-cell;
  vertical-align: top;
  text-align: left;
}
.l-block-table-left{
  width:30.5rem;
  padding-right:5.5rem;
}
.l-block-table-left ul{
  width:25.0rem;
  position: sticky;
  top: 9.0rem;
}
.l-block-table-left ul li{
  display:block;
}
.l-block-table-left ul li a{
  display:block;
  border-bottom:1px solid #FFFFFF;
  background:#eaf7f5;
  padding:1.7rem 2.2rem;
  text-align: left;
  color:#303838;
  
  font-size:clamp(14px, 1.6rem, 16px);
  font-weight:700;
  line-height:1.5;
  letter-spacing: 0.05em;
}
.l-block-table-left ul li a:hover{
  background:#64beb4;
  color:#FFFFFF;
}
.l-block-table-left ul li:last-of-type a{
  border-bottom:none;
}
.l-block-table-right{
  width:89.5rem;
}
.l-block-table-right > span{
  display:block;
  font-family: 'satoshi-Bold';
  text-align: left;
  color:#64beb4;
  
  font-size:clamp(14px, 2.1rem, 21px);
  font-weight:700;
  line-height:1.71;
  letter-spacing: 0.05em;
}
.l-block-table-right > h2{
  display:block;
  text-align: left;
  color:#303838;
  
  font-size: clamp(27px, 3.6rem, 36px);
  font-weight:700;
  line-height:1;
  letter-spacing: 0.05em;
}


@media all and (max-width: 767.5px) {
  .l-block{
    padding:16.5rem 3.0rem 18.5rem;
  }
  .l-block-inner{
    max-width:100%;
    width:100%;
    margin:0 auto;
  }
  .l-block-table{
    width:100%;
    display:block;
  }
  .l-block-table > div{
    width:100%;
    display:block;
    vertical-align: top;
    text-align: left;
  }
  .l-block-table-left{
    width:100%;
    display:block;
    padding-right:0;
  }
  .l-block-table-left ul{
    width:100%;
    display:block;
    position: static;
    top: 9.0rem;
    text-align: left;
    font-size:0;
  }
  .l-block-table-left ul li{
    width:50%;
    display:inline-block;
    vertical-align: top;
    padding-top:0.4rem;
  }
  .l-block-table-left ul li:nth-of-type(odd){
    padding-right:0.3rem;
  }
  .l-block-table-left ul li:nth-of-type(even){
    padding-left:0.3rem;
  }
  .l-block-table-left ul li a{
    display:block;
    border-bottom:1px solid #FFFFFF;
    background:#eaf7f5;
    padding:1.7rem 2.2rem;
    text-align: left;
    color:#303838;

    font-size:2.6rem;
    font-weight:700;
    line-height:1.5;
    letter-spacing: 0.05em;
  }
  .l-block-table-left ul li a:hover{
    background:#64beb4;
    color:#FFFFFF;
  }
  .l-block-table-left ul li:last-of-type a{
    border-bottom:none;
  }
  .l-block-table-right{
    width:100%;
    display:block;
    padding-top:6.0rem;
  }
  .l-block-table-right > span{
    display:block;
    font-family: 'satoshi-Bold';
    text-align: left;
    color:#64beb4;

    font-size:3.2rem;
    font-weight:700;
    line-height:1.71;
    letter-spacing: 0.05em;
  }
  .l-block-table-right > h2{
    display:block;
    text-align: left;
    color:#303838;

    font-size: 4.6rem;
    font-weight:700;
    line-height:1;
    letter-spacing: 0.05em;
  }
}


.l-block01{
  margin-top:4.0rem;
  text-align: center;
}
.l-block01-title{
  background:#64beb4;
  padding:2.0rem 3.6rem 2.0rem 2.8rem;
  margin-bottom:2.5rem;
}
.l-block01-title:hover{
  cursor:pointer;
}
.l-block01-title p{
  text-align: left;
  color:#FFFFFF;
  
  font-size:clamp(16px, 2.4rem, 24px);
  font-weight:700;
  line-height:1.5;
  letter-spacing: 0.05em;
  
  background: url("../images/guideline/block01-icon01_pc.png") right center no-repeat transparent;
  background-size: 4.1rem auto;
  min-height:4.1rem;
}
.l-block01-title.open p{  
  background: url("../images/guideline/block01-icon02_pc.png") right center no-repeat transparent;
  background-size: 4.1rem auto;
  min-height:4.1rem;
}
.l-block01 table{
  margin:0 auto 0;
  transition: 0.3s;
  width:100%;
}
.l-block01 table tr{
  
}
.l-block01 table tr th{
  width:18.5rem;
  vertical-align: top;
  padding:3.5rem 0.5rem 3.5rem 0;
  border-bottom:2px solid #64beb4;
  text-align: left;
  color:#303838;
  
  font-size:clamp(14px, 1.8rem, 18px);
  font-weight:700;
  line-height:1.5;
  letter-spacing: 0.05em;
}
.l-block01 table tr td{
  width:auto;
  vertical-align: top;
  padding:3.5rem 0.5rem 3.5rem 0.5rem;
  border-bottom:2px solid #f2f2f2;
  text-align: left;
  color:#303838;
  
  font-size:clamp(14px, 1.8rem, 18px);
  font-weight:400;
  line-height:1.5;
  letter-spacing: 0em;
}
.l-block01 > a{
  margin-top:6.0rem;
  display:inline-block;
  background-image:
    url("../images/guideline/block02-bg01_pc.png");
  background-position:
    center center;
  background-repeat:
    no-repeat;
  background-color:
    transparent;
  background-size:
    cover;
  min-height:8.0rem;
  width:50.0rem;
  padding:2.0rem 2.0rem;
  text-align: center;
  overflow: hidden;
  
  position: relative;
}
.l-block01 > a:before{
  content: "";
  width: 0;
  aspect-ratio: 1 / 1;
  opacity: 0.3;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #fff;
}
.l-block01 > a:hover:before{
  animation: ripple 1.0s forwards;
}
.l-block01 > a span{
  display:block;
  background-image:url("../images/common/common-icon08_pc.png");
  background-position:right 2.5rem center;
  background-repeat:no-repeat;
  background-color:transparent;
  background-size:0.7rem auto;
  text-align: center;
  color:#FFFFFF;
  
  font-size:clamp(14px, 2.1rem, 21px);
  font-weight:700;
  line-height:1.75;
  letter-spacing: 0em;
}


@media all and (max-width: 767.5px) {
  .l-block01{
    margin-top:4.0rem;
    text-align: center;
  }
  .l-block01-title{
    background:#64beb4;
    padding:2.0rem 3.6rem 2.0rem 2.8rem;
    margin-bottom:2.5rem;
  }
  .l-block01-title:hover{
    cursor:pointer;
  }
  .l-block01-title p{
    text-align: left;
    color:#FFFFFF;

    font-size:3.4rem;
    font-weight:700;
    line-height:1.5;
    letter-spacing: 0.05em;

    background: url("../images/guideline/block01-icon01_pc.png") right center no-repeat transparent;
    background-size: 4.1rem auto;
    min-height:4.1rem;
  }
  .l-block01-title.open p{  
    background: url("../images/guideline/block01-icon02_pc.png") right center no-repeat transparent;
    background-size: 4.1rem auto;
    min-height:4.1rem;
  }
  .l-block01 table{
    margin:0 auto 0;
    transition: 0.3s;
    width:100%;
  }
  .l-block01 table tr{

  }
  .l-block01 table tr th{
    width:22.0rem;
    vertical-align: top;
    padding:3.5rem 0.5rem 3.5rem 0;
    border-bottom:2px solid #64beb4;
    text-align: left;
    color:#303838;

    font-size:2.8rem;
    font-weight:700;
    line-height:1.5;
    letter-spacing: 0.05em;
  }
  .l-block01 table tr td{
    width:auto;
    vertical-align: top;
    padding:3.5rem 0.5rem 3.5rem 0.5rem;
    border-bottom:2px solid #f2f2f2;
    text-align: left;
    color:#303838;

    font-size:2.6rem;
    font-weight:400;
    line-height:1.5;
    letter-spacing: 0em;
  }
  .l-block01 > a{
    margin-top:6.0rem;
    display:inline-block;
    background-image:
      url("../images/guideline/block02-bg01_pc.png");
    background-position:
      center center;
    background-repeat:
      no-repeat;
    background-color:
      transparent;
    background-size:
      cover;
    min-height:8.0rem;
    width:50.0rem;
    padding:2.0rem 2.0rem;
    text-align: center;
    overflow: hidden;

    position: relative;
  }
  .l-block01 > a:before{
    content: "";
    width: 0;
    aspect-ratio: 1 / 1;
    opacity: 0.3;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #fff;
  }
  .l-block01 > a:hover:before{
    animation: ripple 1.0s forwards;
  }
  .l-block01 > a span{
    display:block;
    background-image:url("../images/common/common-icon08_pc.png");
    background-position:right 2.5rem center;
    background-repeat:no-repeat;
    background-color:transparent;
    background-size:0.7rem auto;
    text-align: center;
    color:#FFFFFF;

    font-size:3.2rem;
    font-weight:700;
    line-height:1.75;
    letter-spacing: 0em;
  }
}


.l-block02{
  padding-top:9.0rem;
}
.l-block02 > span{
  display:block;
  font-family: 'satoshi-Bold';
  text-align: left;
  color:#64beb4;
  
  font-size:clamp(14px, 2.1rem, 21px);
  font-weight:700;
  line-height:1.71;
  letter-spacing: 0.05em;
}
.l-block02 > h2{
  display:block;
  text-align: left;
  color:#303838;
  
  font-size: clamp(27px, 3.6rem, 36px);
  font-weight:700;
  line-height:1;
  letter-spacing: 0.05em;
}
.l-block02-flow01{
  margin-top:4.5rem;
  background:#64beb4;
  padding:1.0rem 1.0rem;
  text-align: center;
  color:#FFFFFF;
  
  font-size:clamp(14px, 1.8rem, 18px);
  font-weight:700;
  line-height:1.5;
  letter-spacing: 0.05em;
  
  position:relative;
}
.l-block02-flow01:after{
  content: "";
  display: inline-block;
  left: 0;
  right: 0;
  bottom: -3.5rem;
  width:5.9rem;
  height: 2.0rem;
  position: absolute;
  z-index: 2;
  background: url("../images/guideline/block03-icon01_pc.png") bottom center no-repeat transparent;
  background-size: 5.9rem auto;
  min-height:2.0rem;
  margin:0 auto;
}
.l-block02-flow02{
  margin-top:4.5rem;
  background:#519393;
  padding:1.0rem 1.0rem;
  text-align: center;
  color:#FFFFFF;
  
  font-size:clamp(14px, 1.8rem, 18px);
  font-weight:700;
  line-height:1.5;
  letter-spacing: 0.05em;
  
  position:relative;
}
.l-block02-flow02:after{
  content: "";
  display: inline-block;
  left: 0;
  right: 0;
  bottom: -3.5rem;
  width:5.9rem;
  height: 2.0rem;
  position: absolute;
  z-index: 2;
  background: url("../images/guideline/block03-icon01_pc.png") bottom center no-repeat transparent;
  background-size: 5.9rem auto;
  min-height:2.0rem;
  margin:0 auto;
}
.l-block02-flow03{
  margin-top:4.5rem;
  background:#3f6971;
  padding:1.0rem 1.0rem;
  text-align: center;
  color:#FFFFFF;
  
  font-size:clamp(14px, 1.8rem, 18px);
  font-weight:700;
  line-height:1.5;
  letter-spacing: 0.05em;
  
  position:relative;
}
.l-block02-flow03:after{
  content: "";
  display: inline-block;
  left: 0;
  right: 0;
  bottom: -3.5rem;
  width:5.9rem;
  height: 2.0rem;
  position: absolute;
  z-index: 2;
  background: url("../images/guideline/block03-icon01_pc.png") bottom center no-repeat transparent;
  background-size: 5.9rem auto;
  min-height:2.0rem;
  margin:0 auto;
}
.l-block02-flow04{
  margin-top:4.5rem;
  background:#2c3e50;
  padding:1.0rem 1.0rem;
  text-align: center;
  color:#FFFFFF;
  
  font-size:clamp(14px, 1.8rem, 18px);
  font-weight:700;
  line-height:1.5;
  letter-spacing: 0.05em;
  
  position:relative;
}
.l-block02-block{
  padding-top:4.0rem;
}
.l-block02-block dl{
  display:block;
}
.l-block02-block dl dt{
  text-align: center;
  color:#303838;
  
  font-size:clamp(14px, 1.8rem, 18px);
  font-weight:700;
  line-height:1.5;
  letter-spacing: 0.05em;
}
.l-block02-block dl dd{
  padding-top:1.0rem;
  text-align: center;
  color:#303838;
  
  font-size:clamp(14px, 1.6rem, 16px);
  font-weight:400;
  line-height:1.875;
  letter-spacing: 0em;
}


@media all and (max-width: 767.5px) {
  .l-block02{
    padding-top:9.0rem;
  }
  .l-block02 > span{
    display:block;
    font-family: 'satoshi-Bold';
    text-align: left;
    color:#64beb4;

    font-size:3.2rem;
    font-weight:700;
    line-height:1.71;
    letter-spacing: 0.05em;
  }
  .l-block02 > h2{
    display:block;
    text-align: left;
    color:#303838;

    font-size: 4.6rem;
    font-weight:700;
    line-height:1;
    letter-spacing: 0.05em;
  }
  .l-block02-flow01{
    margin-top:4.5rem;
    background:#64beb4;
    padding:1.0rem 1.0rem;
    text-align: center;
    color:#FFFFFF;

    font-size:2.8rem;
    font-weight:700;
    line-height:1.5;
    letter-spacing: 0.05em;

    position:relative;
  }
  .l-block02-flow01:after{
    content: "";
    display: inline-block;
    left: 0;
    right: 0;
    bottom: -3.5rem;
    width:5.9rem;
    height: 2.0rem;
    position: absolute;
    z-index: 2;
    background: url("../images/guideline/block03-icon01_pc.png") bottom center no-repeat transparent;
    background-size: 5.9rem auto;
    min-height:2.0rem;
    margin:0 auto;
  }
  .l-block02-flow02{
    margin-top:4.5rem;
    background:#519393;
    padding:1.0rem 1.0rem;
    text-align: center;
    color:#FFFFFF;

    font-size:2.8rem;
    font-weight:700;
    line-height:1.5;
    letter-spacing: 0.05em;

    position:relative;
  }
  .l-block02-flow02:after{
    content: "";
    display: inline-block;
    left: 0;
    right: 0;
    bottom: -3.5rem;
    width:5.9rem;
    height: 2.0rem;
    position: absolute;
    z-index: 2;
    background: url("../images/guideline/block03-icon01_pc.png") bottom center no-repeat transparent;
    background-size: 5.9rem auto;
    min-height:2.0rem;
    margin:0 auto;
  }
  .l-block02-flow03{
    margin-top:4.5rem;
    background:#3f6971;
    padding:1.0rem 1.0rem;
    text-align: center;
    color:#FFFFFF;

    font-size:2.8rem;
    font-weight:700;
    line-height:1.5;
    letter-spacing: 0.05em;

    position:relative;
  }
  .l-block02-flow03:after{
    content: "";
    display: inline-block;
    left: 0;
    right: 0;
    bottom: -3.5rem;
    width:5.9rem;
    height: 2.0rem;
    position: absolute;
    z-index: 2;
    background: url("../images/guideline/block03-icon01_pc.png") bottom center no-repeat transparent;
    background-size: 5.9rem auto;
    min-height:2.0rem;
    margin:0 auto;
  }
  .l-block02-flow04{
    margin-top:4.5rem;
    background:#2c3e50;
    padding:1.0rem 1.0rem;
    text-align: center;
    color:#FFFFFF;

    font-size:2.8rem;
    font-weight:700;
    line-height:1.5;
    letter-spacing: 0.05em;

    position:relative;
  }
  .l-block02-block{
    padding-top:4.0rem;
  }
  .l-block02-block dl{
    display:block;
  }
  .l-block02-block dl dt{
    text-align: center;
    color:#303838;

    font-size:2.8rem;
    font-weight:700;
    line-height:1.5;
    letter-spacing: 0.05em;
  }
  .l-block02-block dl dd{
    padding-top:1.0rem;
    text-align: center;
    color:#303838;

    font-size:2.6rem;
    font-weight:400;
    line-height:1.875;
    letter-spacing: 0em;
  }
}


.l-block03{
  padding-top:8.5rem;
}
.l-block03 > span{
  display:block;
  font-family: 'satoshi-Bold';
  text-align: left;
  color:#64beb4;
  
  font-size:clamp(14px, 2.1rem, 21px);
  font-weight:700;
  line-height:1.71;
  letter-spacing: 0.05em;
}
.l-block03 > h2{
  display:block;
  text-align: left;
  color:#303838;
  
  font-size: clamp(27px, 3.6rem, 36px);
  font-weight:700;
  line-height:1;
  letter-spacing: 0.05em;
}
.l-block03 > h3{
  padding-top:3.5rem;
  text-align: left;
  color:#303838;
  
  font-size:clamp(16px, 2.4rem, 24px);
  font-weight:700;
  line-height:1.5;
  letter-spacing: 0.05em;
}
.l-block03 > picture{
  display:block;
  padding-top:2.0rem;
  padding-bottom:0.5rem;
}
.l-block03 > picture img{
  width:100%;
}
.l-block03 > p{
  padding-bottom:3.5rem;
  text-align: left;
  color:#303838;
  
  font-size:clamp(14px, 1.6rem, 16px);
  font-weight:400;
  line-height:1.875;
  letter-spacing: 0em;
}


@media all and (max-width: 767.5px) {
  .l-block03{
    padding-top:8.5rem;
  }
  .l-block03 > span{
    display:block;
    font-family: 'satoshi-Bold';
    text-align: left;
    color:#64beb4;

    font-size:3.2rem;
    font-weight:700;
    line-height:1.71;
    letter-spacing: 0.05em;
  }
  .l-block03 > h2{
    display:block;
    text-align: left;
    color:#303838;

    font-size: 4.6rem;
    font-weight:700;
    line-height:1;
    letter-spacing: 0.05em;
  }
  .l-block03 > h3{
    padding-top:3.5rem;
    text-align: left;
    color:#303838;

    font-size:3.4rem;
    font-weight:700;
    line-height:1.5;
    letter-spacing: 0.05em;
  }
  .l-block03 > picture{
    display:block;
    padding-top:2.0rem;
    padding-bottom:0.5rem;
  }
  .l-block03 > picture img{
    width:100%;
  }
  .l-block03 > p{
    padding-bottom:3.5rem;
    text-align: left;
    color:#303838;

    font-size:2.6rem;
    font-weight:400;
    line-height:1.875;
    letter-spacing: 0em;
  }
}



@media all and (max-width: 767.5px) {
  
}



@media all and (max-width: 767.5px) {
  
}