@charset "UTF-8";

html {margin-top: 0!important; scroll-behavior: smooth;}
body {
  margin:0;
  color:#0b0b0b;
}

.hidden{display:none;}

a {text-decoration: none; color:#0b0b0b;}
a:visited {text-decoration: none; color:#0b0b0b;}

ul {list-style-type:none;}

/* テキストカラー */
.txt-white {color:#fff;}
.txt-blue {color:#00A0E9;}
.txt-dark {color:#1F3037;}
.txt-black {color:#000;}

/* 背景色 */
.bg-white {background-color:#fff;}
.bg-blue {background-color:#00A0E9;}
.bg-lightblue {background-color: #d6edfb;}

/* 各ページのコンテンツ大枠の共通スタイル */
.page-content-container {
  /* padding-top:180px;
  padding-bottom:180px; */
}
@media (max-width:599px){ 
  .page-content-container {
    padding-top: 40px;
    padding-bottom: 40px;
  } 
}

/*** ボタン ***/
/* 青ボタン */
.blue-link-btn-box a{   
   width:fit-content;
   display: block;
   margin: 0 auto;
}
.blue-link-btn {
  color:#fff;
  font-family: YuGothic;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border: 1px solid #FFF;
  background: #00A0E9;
  border-radius: 100px;
  width: 250px;
  height: 75px;
  flex-shrink: 0;
  border:none;
  cursor: pointer;
  text-align: left;
  padding: 0 40px;
  position:relative;
}

.blue-link-btn::after {
  content:"";
  position:absolute;
  display: inline-block;
  top:37px;
  right:40px;
  transform: translate(0, -9px);
  width:15px;
  height: 15px;
  margin:0;
  z-index: 2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath  d='M7.5 0L6.17813 1.32187L11.4094 6.5625H0V8.4375H11.4094L6.17813 13.6781L7.5 15L15 7.5L7.5 0Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* ボタン ホバー時 */
.blue-link-btn:hover {   
  border: 1px solid #00A0E9;
  color:#00A0E9;
  font-family: YuGothic;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  background: #fff;
  border-radius: 100px;
  width: 250px;
  height: 75px;
  flex-shrink: 0;
  /* border:none; */
  cursor: pointer;
  text-align: left;
  padding: 0 40px;
  position:relative;
}
.blue-link-btn:hover::after {
  content:"";
  position:absolute;
  display: inline-block;
  top:37px;
  right:40px;
  transform: translate(0, -9px);
  width:15px;
  height: 15px;
  margin:0;
  z-index: 2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath  d='M7.5 0L6.17813 1.32187L11.4094 6.5625H0V8.4375H11.4094L6.17813 13.6781L7.5 15L15 7.5L7.5 0Z' fill='%2300A0E9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

/* 白ボタン */
.white-link-btn-box a{   
  width:fit-content;
  display: block;
  margin: 0 auto;
}
.white-link-btn {
 color:#00A0E9;
 font-family: YuGothic;
 font-size: 15px;
 font-style: normal;
 font-weight: 500;
 line-height: normal;
 border: 1px solid #00A0E9;
 background: #fff;
 border-radius: 100px;
 width: 250px;
 height: 75px;
 flex-shrink: 0;
 border:none;
 cursor: pointer;
 text-align: left;
 padding: 0 40px;
 position:relative;
}

.white-link-btn::after {
 content:"";
 position:absolute;
 display: inline-block;
 top:37px;
 right:40px;
 transform: translate(0, -9px);
 width:15px;
 height: 15px;
 margin:0;
 z-index: 2;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath  d='M7.5 0L6.17813 1.32187L11.4094 6.5625H0V8.4375H11.4094L6.17813 13.6781L7.5 15L15 7.5L7.5 0Z' fill='%2300A0E9'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* ボタン ホバー時 */
.white-link-btn:hover {   
 border: 1px solid #fff;
 color:#fff;
 font-family: YuGothic;
 font-size: 15px;
 font-style: normal;
 font-weight: 500;
 line-height: normal;
 background: #00A0E9;
 border-radius: 100px;
 width: 250px;
 height: 75px;
 flex-shrink: 0;
 /* border:none; */
 cursor: pointer;
 text-align: left;
 padding: 0 40px;
 position:relative;
}
.white-link-btn:hover::after {
 content:"";
 position:absolute;
 display: inline-block;
 top:37px;
 right:40px;
 transform: translate(0, -9px);
 width:15px;
 height: 15px;
 margin:0;
 z-index: 2;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath  d='M7.5 0L6.17813 1.32187L11.4094 6.5625H0V8.4375H11.4094L6.17813 13.6781L7.5 15L15 7.5L7.5 0Z' fill='white'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}



@media (max-width:599px){ .pc-only {display:none;} }
.responsive-only, .sp-only {display:none;}
@media (max-width:599px){ .responsive-only, .sp-only {display:block;} }

/* 斜めのクロップ */
.crop-top-left-up {
  /* clip-path: polygon(0 0,100% 0, 100% 82%,0 100%); */
}
.crop-bottom-right-up {
  /* clip-path: polygon(0 0,100% 0, 100% 82%,0 100%); */
}
.crop-bottom-left-up {
  /* clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 175px)); */
}
.clip-top-up {
  clip-path: polygon(
    0 10.5vw, /* left top */
    100% 0, /* right top */ 
    100% 100%, /* right bottom */
    0 100% /* left bottom */
  );
}
.clip-top-down {
  clip-path: polygon(
    0 0, /* left top */
    100% calc(100% - 10.5vw), /* right top */ 
    100% 100%, /* right bottom */
    0 100% /* left bottom */
  );
}
.clip-bottom-up {
  clip-path: polygon(
    0 0, /* left top */
    100% 0, /* right top */ 
    100% calc(100% - 10.5vw), /* right bottom */
    0 100% /* left bottom */
  );
}
.clip-bottom-down {
  clip-path: polygon(
    0px 0px, /* left top */
    100% 0px, /* right top */ 
    100% 100%, /* right bottom */
    0px calc(100% - 10.5vw) /* left bottom */
  );
}
.clip-top-up-bottom-up {
  clip-path: polygon(
    0 10.5vw, /* left top */
    100% 0, /* right top */ 
    100% calc(100% - 10.5vw), /* right bottom */
    0 100% /* left bottom */
  );
}
.clip-top-up-bottom-down {
  clip-path: polygon(
    0 10.5vw, /* left top */
    100% 0, /* right top */ 
    100% 100%, /* right bottom */
    0 calc(100% - 10.5vw) /* left bottom */
  );
}
.clip-top-down-bottom-up {
  clip-path: polygon(
    0 0, /* left top */
    100% 10.5vw, /* right top */ 
    100% calc(100% - 10.5vw), /* right bottom */
    0 100% /* left bottom */
  );
}

/* 各ページタイトルPC */
.page-title-box {
  background: #FFF;
}
.page-title-inner {
  padding: 80px 120px 80px;
  text-align: center;
}
.page-title-box.crop-bottom::after {
  background: #00A0E9;
  height:200px;
}
.page-title-box h1 {
  color: #0b0b0b;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 3.5px;
  margin:0;
  white-space: nowrap;
}
.page-title-box p {
  color: #0b0b0b;
  font-family: YuGothic;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin:0 0 0 40px;
}

/* 各ページタイトルSP */
@media (max-width:599px){ 

  .page-title-inner {
    margin: 0 auto;
    padding:60px 34px 50px;
  }

}



/******* フェードインアニメーション *******/
/*-------------- 下から -------------*/
.fade-in-bottom {
	-webkit-animation: fade-in-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/* タイミングがズレる場合 */
/* 0.3秒 */
.fade-in-bottom-03 {
	-webkit-animation: fade-in-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.3s both;
	        animation: fade-in-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.3s both;
}
/* 0.6秒 */
.fade-in-bottom-06 {
	-webkit-animation: fade-in-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.6s both;
	        animation: fade-in-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.6s both;
}
/* 0.9秒 */
.fade-in-bottom-09 {
	-webkit-animation: fade-in-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.9s both;
	        animation: fade-in-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.9s both;
}

@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(80px);
            transform: translateY(80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(80px);
            transform: translateY(80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
/*------------- 左から ------------*/
.fade-in-left {
	-webkit-animation: fade-in-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-80px);
            transform: translateX(-80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-80px);
            transform: translateX(-80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
/*------------- 右から ------------*/
.fade-in-right {
	-webkit-animation: fade-in-right 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-right 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(80px);
            transform: translateX(80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(80px);
            transform: translateX(80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}