@charset "UTF-8";
#wrapper { overflow-x: hidden; }

#mv .mvCover { overflow: hidden; }
#mv .video { min-width: 100%; min-height: 100%; position: absolute; top: 0; left: 0; z-index: 1; border: none; background: none; }
/*画面サイズが変わっても常に動画の中央が表示されるようにする*/
/*動画よりも画面が横に長くなるとき用*/
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
	#mv .video { width: 100%; top: 50%; transform: translateY(-50%); }
	#mv .swiper-slide-mv .video { width: 100%; top: 50%; transform: translateY(-50%); }
}
/*動画よりも画面が縦に長くなるとき用*/
@media (max-aspect-ratio: 16/9) {
	#mv .video { height: 100%; left: 50%; transform: translateX(-50%); }
	#mv .swiper-slide-mv .video { height: 100%; left: 50%; transform: translateX(-50%); }
}

@media screen and (max-width: 899px) {
	#mv { position: fixed; width: 100vw; height: 100vh; z-index: 2; transition: opacity 0.2s linear;}
	.mainCopy { position: absolute; top: 50%; left: 10vw; transform: translateY(-50%); z-index: 10; }

	#mv .mv-ttl01 { font-weight:700; font-size: 2.0rem; line-height: 1.2; margin-bottom: 2vh; color: #fff; letter-spacing: 0.05em; }	
	#mv .mv-ttl02 { font-weight:700; font-size: 2.0rem; line-height: 1.2; margin-bottom: 0vh; color: #fff; }
	
	#mv .mv-ttl0102 { margin-bottom: 0px; }
	#mv .mv-ttl0102 span { font-size: 2.4rem; }
	
	.mvCover { position: absolute; top: 0; width: 100vw; margin: 0 0; height: 100%; /*border-radius: 50px 50px 0 0;*/ overflow: hidden; }
	.mvCover .swiper-mv { height: 100%;}
	.mvCover .swiper-wrapper-mv { height: inherit; }
	.mvCover .swiper-slide-mv { height: inherit; }
	.mvCover .swiper-slide-img { height: inherit; }
	
	.swiper-slide-mv-img01 { position: relative; overflow: hidden; }
	.swiper-slide-mv-img04 { position: relative; overflow: hidden; width: 100%; height: 100vh; }
	
	.mainCopy03.mainCopy { position: relative; top: 0; left: 0; transform: none; width: 100%; height: 100%; }
	.mainCopy03.mainCopy:before { content: ""; position: absolute; top: 0; left: 0; background: rgba(0,178,219,0.5); width: 100%; height: 100vh; z-index: 3; clip-path: polygon(0 0, 50% 0, 15% 100%, 0 100%); }
	.mainCopy03.mainCopy:after { content: ""; position: absolute; top: 0; left: 0; background: rgba(0,178,219,0.5); width: 100%; height: 100vh; z-index: 4; clip-path: polygon(0 0, 10% 0, 70% 100%, 0 100%); }
	
	.mainCopy03 .inMainCopy { position: absolute; top: 0; left: 0; /*background: rgba(0,178,219,0.5);*/ width: 100%; height: 100vh; z-index: 5; transform: none; /*clip-path: polygon(0 0, 50% 0, 0 100%, 0 100%);*/ }
	.mainCopy03 .coreMainCopy { position: absolute; top: 50%; left: 5vw; transform: translateY(-50%); }
	.mainCopy03 .mv-ttl01 { color: #fff; padding: 10px; mix-blend-mode: overlay; font-size: 4.0rem; }
	.mainCopy03 .mv-ttl0102 { font-size: 2.0rem; }
	
	.mainCopy03 h3.mv-ttl03 { font-family:'Roboto Condensed', sans-serif; font-weight:bold; font-size: 2.5em; color: rgba(255,255,255,0.25);}
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	.mainCopy { position: absolute; top: 50%; left: 5vw; transform: translateY(-50%); }
	#mv .mv-ttl01 { font-weight:700; font-size: 3.0rem; line-height: 1.2; margin-bottom: 2vh; color: #fff; letter-spacing: 0.05em; }	
	#mv .mv-ttl02 { font-weight:700; font-size: 3.0rem; line-height: 1.2; margin-bottom: 0vh; color: #fff; }
}
@media screen and (min-width: 900px) {
	#mv { position: fixed; width: 100vw; height: 100vh; z-index: 2; transition: opacity 0.2s linear;}
	.mainCopy { position: absolute; top: 50%; left: 10vw; transform: translateY(-50%); z-index: 10; }
	
	/*.inMainCopy { display: flex; justify-content: flex-start; align-items:center; }*/
	#mv .mv-ttl01 { font-weight:700; font-size: 4.5rem; line-height: 1.2; margin-bottom: 1vh; color: #fff; letter-spacing: 0.05em; }	
	#mv .mv-ttl02 { font-weight:700; font-size: 4.5rem; line-height: 1.2; margin-bottom: 0vh; color: #fff; }
	
	/*.mv-ttl01 span { background: rgba(0,178,219,0.9); color: #fff; padding: 0 10px; mix-blend-mode: overlay; font-size: 4.8rem; }*/
	#mv .mv-ttl0102 { margin-bottom: 0px; }
	#mv .mv-ttl0102 span { font-size: 2.4rem; }
	
	.mvCover { position: absolute; top: 0; width: 100vw; margin: 0 0; height: 100%; /*border-radius: 50px 50px 0 0;*/ overflow: hidden; }
	.mvCover .swiper-mv { height: 100%;}
	.mvCover .swiper-wrapper-mv { height: inherit; }
	.mvCover .swiper-slide-mv { height: inherit; }
	.mvCover .swiper-slide-img { height: inherit; }
	
	.swiper-slide-mv-img01 { position: relative; overflow: hidden; }
	.swiper-slide-mv-img04 { position: relative; overflow: hidden; width: 100%; height: 100vh; }
	
	.mainCopy03.mainCopy { position: relative; top: 0; left: 0; transform: none; width: 100%; height: 100%; }
	.mainCopy03.mainCopy:before { content: ""; position: absolute; top: 0; left: 0; background: rgba(0,178,219,0.5); width: 100%; height: 100vh; z-index: 3; clip-path: polygon(0 0, 50% 0, 15% 100%, 0 100%); }
	.mainCopy03.mainCopy:after { content: ""; position: absolute; top: 0; left: 0; background: rgba(0,178,219,0.5); width: 100%; height: 100vh; z-index: 4; clip-path: polygon(0 0, 10% 0, 70% 100%, 0 100%); }
	
	.mainCopy03 .inMainCopy { position: absolute; top: 0; left: 0; /*background: rgba(0,178,219,0.5);*/ width: 100%; height: 100vh; z-index: 5; transform: none; /*clip-path: polygon(0 0, 50% 0, 0 100%, 0 100%);*/ }
	.mainCopy03 .coreMainCopy { position: absolute; top: 50%; left: 5vw; transform: translateY(-50%); }
	.mainCopy03 .mv-ttl01 { color: #fff; padding: 10px; mix-blend-mode: overlay; font-size: 4.0rem; }
	.mainCopy03 .mv-ttl0102 { font-size: 2.0rem; }
	
	.mainCopy03 h3.mv-ttl03 { font-family:'Roboto Condensed', sans-serif; font-weight:bold; font-size: 2.5em; color: rgba(255,255,255,0.25);}
	/*.mvCover-clip { position: absolute; top: 0; right: 0; width: 65vw; height: 100vh;  }
	#mv .mvCover-clip .swiper-slide-mv .video { position: absolute; left: 50%; transform: translateX(-50%); top: 0; height: 100vh; width: auto; }*/
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	#mv .mv-ttl01 { font-size: 4.0em; }
	#mv .mv-ttl02 { font-size: 4.0em; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	#mv .mv-ttl01 { font-size: 4.1rem; }
	#mv .mv-ttl02 { font-size: 4.1rem; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	#mv .mv-ttl01 { font-size: 4.2rem; }
	#mv .mv-ttl02 { font-size: 4.2rem; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	#mv .mv-ttl01 { font-size: 4.3rem; }
	#mv .mv-ttl02 { font-size: 4.3rem; }
}
@media screen and (min-width: 1390px) and (max-width: 1489px) {
	#mv .mv-ttl01 { font-size: 4.4rem; }
	#mv .mv-ttl02 { font-size: 4.4rem; }
}

/* メインコピー　ロード時アニメーション --*/
.fadeIN { opacity: 0; white-space:nowrap; overflow:hidden;}
.fadeIN.add-show {
	animation-name: fadeINAnime;/*アニメーションの定義名*/
	animation-duration:.8s;/*アニメーション変化時間 ※デフォルト*/
	animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
	animation-delay: 0s;
}
.fadeIN-h2.add-show {
	animation-duration:.8s;/*アニメーション変化時間 ※デフォルト*/
}
/*アニメーションの開始から終了までを指定する*/
@keyframes fadeINAnime{
  from {
	  opacity: 0;
	  width: 0;
  }
  to {
	  opacity: 1;
	  width: 100%;
  }
}

.mvCover.hide {
  animation: sc-fadeOut 1.0s ease forwards;
}
@keyframes sc-fadeOut {
  from {
	  opacity: 1.0;
	  transform: scale(1.0) ;
  }
  to {
	  opacity: 0;
	  transform: scale(1.2) ;
  }
}
.mvCover.show {
  animation: sc-fadeIn 1.0s ease forwards;
}
@keyframes sc-fadeIn {
  from {
	  opacity: 0;
  }
  to {
	  opacity: 1.0;
  }
}



.swiper-slide-mv-img01 .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; }
.swiper-slide-mv-img04 .bg { position: absolute; top: 0; left: 0; width: 100%; height: 200%; background: url("../img/common/mv04.jpg") center top no-repeat; background-size: cover; }
/* 背景画像指定 */
.swiper-slide-mv-img01 .bg {
  background-image: url("../img/common/mv01.jpg");
}
.swiper-slide-mv-img04 .bg {
  background-image: url("../img/common/mv04.jpg");
}

/* activeでアニメーション */
.swiper-slide-mv-img01 .bg {
  animation: zoomRotate 16s linear infinite;
}
.swiper-slide-mv-img04 .bg {
  animation: moveVertical 16s linear infinite;
}
/* アニメーション */
@keyframes zoomRotate {
  0% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(1.2) rotate(5deg); /* ズーム & 回転 */
  }
}

/* 上から下へ移動するアニメーション */
@keyframes moveVertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%); /* 下へ移動 */
  }
}

.scrollbar-place { position: absolute; bottom: 5vh; left: 2%; z-index: 10;}
.scrollbar-txt { display: inline-block; position: absolute; bottom: 0; padding: 10px 10px 110px; color: #fff; font-size: 12px; font-family: serif; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; writing-mode: vertical-lr; left: 50%; transform: translateX(-50%); font-family:'Roboto Condensed', sans-serif; font-weight:bold; }
.scrollbar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 1px;}
.scrollbar::after { content: ""; position: absolute; bottom: 0; left: 0; width: 1px; height: 100px; background: #fff; animation: liner 2.5s cubic-bezier(1, 0, 0, 1) infinite;}
@keyframes liner {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  30% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  70% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/*-- #anch01 -------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.scrollbar-place { position: absolute; bottom: 5vh; left: 4%; z-index: 10;}
}
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 600px) and (max-width: 899px) {
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
}

#wrapper { }
.contentWrapper { position: relative; z-index: 10;}
/*-- #anch01 -------------------------------------------------------------*/

/* anch01 初期状態 */
/* anch01 本体 */
#anch01 {
  position: relative;
  overflow: hidden;
  opacity: 0; /* 最初は非表示 */
  transition: opacity 0.8s ease; /* フェード用 */
}

/* 背景を白で覆うレイヤー（上から下に広がる） */
#anch01::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: translateY(-100%); /* 上に隠しておく */
  transition: transform 1.2s ease; /* 背景が下に降りてくる */
  z-index: -1;
}

/* 表示状態 */
#anch01.visible {
  opacity: 1;
}
#anch01.visible::before {
  transform: translateY(0); /* 背景が下まで広がる */
}

/* テキストの初期状態 */
.ttl01-01,
.lead p {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.ttl01-01.show-ttl,
.lead p.show-ttl {
  opacity: 1;
  transform: translateY(0);
}



@media screen and (max-width: 899px) {
	#anch01 { position: relative; padding: 10vh 5vh; z-index: 10; margin-bottom: 0vh; background: #fff; margin-top: 100vh;
		/*background-image: linear-gradient(135deg, rgba(255, 242, 214, 1), rgba(228, 254, 255, 1));*/}
	#anch01 .in { margin-bottom: 0px; }
	#anch01 h2.ttl01-01 { text-align: center; font-size: 2.0rem; font-weight: bold; color: var(--opa-color); margin-bottom: 20px; }
	#anch01 .lead { text-align: center; margin-bottom: 40px; }
	#anch01 ul { display: flex; justify-content: center; }
	#anch01 ul li { width: 30%; margin: 0 2%; }
	#anch01 ul li h3 { text-align: center; font-weight: bold; font-size: 1.5rem; margin-bottom: 10px; }
	#anch01 ul li h4 { text-align: center; font-weight: bold; font-size: 1.2rem; margin-bottom: 5px; }
	#anch01 ul li .fHigh { margin-bottom: 10px; }
	#anch01 ul li .fHigh img { border-radius: 8px; }
	.group h3 { color: var(--base-color); }
	.business h3 { color: var(--sub-color); }
	#anch01 ul li p { margin-bottom: 0px; }
	
	.ttl01-01,.lead p {
	  opacity: 0;
	  transform: translateY(30px);
	  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	}

	.ttl01-01.show-ttl,.lead p.show-ttl {
	  opacity: 1;
	  transform: translateY(0);
	}
	/* 段落に順番ディレイを追加 */
	.lead p:nth-child(1) {
	  transition-delay: 0.2s;
	}
	.lead p:nth-child(2) {
	  transition-delay: 0.4s;
	}
	.lead p:nth-child(3) {
	  transition-delay: 0.6s;
	}
	.lead p:nth-child(4) {
	  transition-delay: 0.8s;
	}
}
@media screen and (max-width: 599px) {
	#anch01 h2.ttl01-01 { font-size: 1.5rem; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
}

@media screen and (min-width: 900px) {
	#anch01 { position: relative; padding: 10vh 5vh; z-index: 10; margin-bottom: 0vh; background: #fff; margin-top: 100vh;
		/*background-image: linear-gradient(135deg, rgba(255, 242, 214, 1), rgba(228, 254, 255, 1));*/}
	#anch01 .in { margin-bottom: 0px; }
	#anch01 h2.ttl01-01 { text-align: center; font-size: 2.0rem; font-weight: bold; color: var(--opa-color); margin-bottom: 20px; }
	#anch01 .lead { text-align: center; margin-bottom: 40px; }
	#anch01 ul { display: flex; justify-content: center; }
	#anch01 ul li { width: 30%; margin: 0 2%; }
	#anch01 ul li h3 { text-align: center; font-weight: bold; font-size: 1.5rem; margin-bottom: 10px; }
	#anch01 ul li h4 { text-align: center; font-weight: bold; font-size: 1.2rem; margin-bottom: 5px; }
	#anch01 ul li .fHigh { margin-bottom: 10px; }
	#anch01 ul li .fHigh img { border-radius: 8px; }
	.group h3 { color: var(--base-color); }
	.business h3 { color: var(--sub-color); }
	#anch01 ul li p { margin-bottom: 0px; }
	
	.ttl01-01,.lead p {
	  opacity: 0;
	  transform: translateY(30px);
	  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	}

	.ttl01-01.show-ttl,.lead p.show-ttl {
	  opacity: 1;
	  transform: translateY(0);
	}
	/* 段落に順番ディレイを追加 */
	.lead p:nth-child(1) {
	  transition-delay: 0.2s;
	}
	.lead p:nth-child(2) {
	  transition-delay: 0.4s;
	}
	.lead p:nth-child(3) {
	  transition-delay: 0.6s;
	}
	.lead p:nth-child(4) {
	  transition-delay: 0.8s;
	}
}

@media screen and (min-width: 900px) and (max-width: 1089px) {
	#anch01 ul li { width: 38%; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	#anch01 ul li { width: 36%; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	#anch01 ul li { width: 34%; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	#anch01 h2.ttl01-01 { font-size: 1.95rem; }
	#anch01 ul li { width: 32%; }
}
.fade-focal { opacity: 0; transition: opacity 0.6s ease; will-change: opacity; }

/*-- #anch02 -------------------------------------------------------------*/
@media screen and (max-width: 599px) {
}
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 600px) and (max-width: 899px) {
}

@media screen and (min-width: 900px) {
	#anch02 { position: relative; padding: 7.5vh 0vh; background: var(--base-color); overflow: hidden; margin: 0 0 5vh 5vw; border-radius: 50px 0 0 50px; color: #fff; }
	#anch02 .in-flex { display: flex; justify-content: space-between; align-items: center; }
	#anch02 .in-flex-Img { width: 50%; background: url("../img/common/bill.png") center center no-repeat; border-radius: 50px 0 0 50px; position: relative; z-index: 2; order: 2; }
	
	#anch02 .in-flex-Txt { width: 42%; padding: 5vh 4%; position: relative; z-index: 2; order: 1; }
	#anch02 .mv-ttl01 { color: #fff; font-size: 3.0rem; margin-bottom: 10px; }
	#anch02 .mv-ttl06 { color: #fff; font-family:'Roboto Condensed', sans-serif; font-weight:bold; font-size: 1.1em; margin-bottom: 10px; }
	#anch02 .mv-ttl02 { color: #fff; margin-bottom: 10px; font-size: 1.1em; font-weight: bold; }
	.numList { display: flex; justify-content: flex-start; margin-bottom: 20px; }
	.numList li { width: 31%; margin-right: 3.5%; }
	.numList li:last-child { margin-right: 0px; }
	.numList li h4 { text-align: center; margin-bottom: 10px; background: #144425; padding: 5px 0; font-size: 0.9rem; color: #fff; }
	.numList li h5 { text-align: center; font-size: 3.6rem; line-height: 1.0; color: #fff; }
	.numList li h5 .xsmall { font-size: 0.5em; margin-left: 0.25em; }
	
	#anch02 .border-grid { position: absolute; top: 0; left: 0; display: flex; justify-content: space-between; width: 100%; height: 100%; z-index: 0; }
	#anch02 .border-grid span { width: 1px; height: 100%; background: #1b522f; margin: 0 5%;}
	#anch02 .nice-icon { width: 30%; margin: 0 auto; opacity: 0.7; }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	#anch02 .in-flex-Img { width: 48%; }
	#anch02 .in-flex-Txt { width: 46%; }
	#anch02 .mv-ttl01 { font-size: 2.2rem; }
	.numList li h4 { font-size: 0.7rem; }
	.numList li h5 { font-size: 2.8rem; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	#anch02 .in-flex-Img { width: 47%; }
	#anch02 .in-flex-Txt { width: 45%; }
	#anch02 .mv-ttl01 { font-size: 2.4rem; }
	.numList li h4 { font-size: 0.75rem; }
	.numList li h5 { font-size: 3.0rem; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	#anch02 .in-flex-Img { width: 48%; }
	#anch02 .in-flex-Txt { width: 44%; }
	#anch02 .mv-ttl01 { font-size: 2.6rem; }
	.numList li h4 { font-size: 0.8rem; }
	.numList li h5 { font-size: 3.2rem; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	#anch02 .in-flex-Img { width: 49%; }
	#anch02 .in-flex-Txt { width: 43%; }
	#anch02 .mv-ttl01 { font-size: 2.8rem; }
	.numList li h4 { font-size: 0.85rem; }
	.numList li h5 { font-size: 3.4rem; }
}

.view-anch02.view { position: relative; overflow: hidden; }
.view-anch02.view:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 10; pointer-events: none; transform-origin: right; animation: slideIn03 1s ease forwards; }
.view-anch02.view.in-view::after { animation: slideOut03 1s ease forwards; }
@keyframes slideOut03 {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

@keyframes slideIn03 {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

#anch02 .box_link_btn a { color:var(--opa-color); border:#fff 1px solid; margin: 0 0; }
#anch02 .box_link_btn a:link    { color:#fff; }
#anch02 .box_link_btn a:visited { color:#fff; }
#anch02 .box_link_btn a:hover   { color:var(--base-color); background:#fff; }
#anch02 .box_link_btn a:active  { color:#fff; }
#anch02 .box_link_btn a:after { background: #fff; }
#anch02 .box_link_btn a:hover:after { background: var(--base-color); }
#anch02 .box_link_btn a::before { background-color: #fff; }

/*-- #anch03 -------------------------------------------------------------*/
@media screen and (max-width: 899px) {
	#anch03 { position: relative; padding: 7.5vh 0vh; background: var(--sub-color); color: #fff; margin: 0 5vw 5vh 0; border-radius: 0 50px 50px 0; }
	#anch03 .in-flex { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
	#anch03 .in-flex-Img { width: 50%; background: url("../img/common/b-it.png") left center no-repeat; background-size: cover; border-radius: 0 50px 50px 0; }
	
	#anch03 .in-flex-Txt { width: 42%; padding: 5vh 4%; }
	
	#anch03 .mv-ttl01 { color: #fff; font-size: 3.0rem; margin-bottom: 10px; }
	#anch03 .mv-ttl06 { color: #fff; font-family:'Roboto Condensed', sans-serif; font-weight:bold; font-size: 1.1em; margin-bottom: 10px; }
	#anch03 .mv-ttl02 { color: #fff; margin-bottom: 10px; font-size: 1.1em; font-weight: bold; }
	
	#anch03 h4 {background: #135181; }
	#anch03 .arrow-button a {background: #135181; } 
	
	#anch03 .border-grid { position: absolute; top: 0; left: 0; display: flex; justify-content: space-between; width: 100%; height: 100%; z-index: 0; }
	#anch03 .border-grid span { width: 1px; height: 100%; background: #0a67b0; margin: 0 5%;}
	
	#anch03 .icon { width: 40%; margin: 0 auto; }
	
	ul.kitaList { display: flex; justify-content: space-between; margin-bottom: 0px; }
	ul.kitaList li { text-align: center; width: 48%; border: 3px solid rgba(255, 255, 255, 0.5);}
	ul.kitaList li .bnr { border: 1px solid #dedede; background: #fff; padding: 10px 0; margin-bottom: 0px; }
	ul.kitaList li .bnr img { width: 60%; margin: 0 auto; }
	ul.kitaList li p { text-align: left; margin-bottom: 0px; color: #fff; }
	
	.kitaroWrapper { padding: 20px; /*background: #fff;*/ }
}
@media screen and (max-width: 599px) {
	.kitaroWrapper { padding: 10px; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	.box_link_list { display: flex; justify-content: flex-start; align-items: center; }
	.box_link_list li:nth-child(1) { margin-right: 20px;}
	.box_link_list a { width: 240px; }
}

@media screen and (min-width: 900px) {
	#anch03 { position: relative; padding: 7.5vh 0vh; background: var(--sub-color); color: #fff; margin: 0 5vw 5vh 0; border-radius: 0 50px 50px 0; }
	#anch03 .in-flex { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
	#anch03 .in-flex-Img { width: 50%; background: url("../img/common/b-it.png") left center no-repeat; background-size: cover; border-radius: 0 50px 50px 0; }
	
	#anch03 .in-flex-Txt { width: 42%; padding: 5vh 4%; }
	
	#anch03 .mv-ttl01 { color: #fff; font-size: 3.0rem; margin-bottom: 10px; }
	#anch03 .mv-ttl06 { color: #fff; font-family:'Roboto Condensed', sans-serif; font-weight:bold; font-size: 1.1em; margin-bottom: 10px; }
	#anch03 .mv-ttl02 { color: #fff; margin-bottom: 10px; font-size: 1.1em; font-weight: bold; }
	
	#anch03 h4 {background: #135181; }
	#anch03 .arrow-button a {background: #135181; } 
	
	#anch03 .border-grid { position: absolute; top: 0; left: 0; display: flex; justify-content: space-between; width: 100%; height: 100%; z-index: 0; }
	#anch03 .border-grid span { width: 1px; height: 100%; background: #0a67b0; margin: 0 5%;}
	
	#anch03 .icon { width: 40%; margin: 0 auto; }
	
	ul.kitaList { display: flex; justify-content: space-between; margin-bottom: 0px; }
	ul.kitaList li { text-align: center; width: 48%; border: 3px solid rgba(255, 255, 255, 0.5);}
	ul.kitaList li .bnr { border: 1px solid #dedede; background: #fff; padding: 10px 0; margin-bottom: 0px; }
	ul.kitaList li .bnr img { width: 60%; margin: 0 auto; }
	ul.kitaList li p { text-align: left; margin-bottom: 0px; color: #fff; }
	
	.kitaroWrapper { padding: 20px; /*background: #fff;*/ }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	#anch03 .in-flex-Img { width: 48%; }
	#anch03 .in-flex-Txt { width: 46%; }
	#anch03 .mv-ttl01 { font-size: 2.2rem; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	#anch03 .in-flex-Img { width: 47%; }
	#anch03 .in-flex-Txt { width: 45%; }
	#anch03 .mv-ttl01 { font-size: 2.4rem; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	#anch03 .in-flex-Img { width: 48%; }
	#anch03 .in-flex-Txt { width: 44%; }
	#anch03 .mv-ttl01 { font-size: 2.6rem; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	#anch03 .in-flex-Img { width: 49%; }
	#anch03 .in-flex-Txt { width: 43%; }
	#anch03 .mv-ttl01 { font-size: 2.8rem; }
}

.view-anch03 { background: #fff; padding: 5vh 0; }
.view-anch03.view { position: relative; overflow: hidden; }
.view-anch03.view:after { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: #fff; z-index: 10; pointer-events: none; transform-origin: right; animation: slideIn03 1s ease forwards; }
.view-anch03.view.in-view::after { animation: slideOut03 1s ease forwards; }

@keyframes slideOut03 {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

@keyframes slideIn03 {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

#anch03 .box_link_btn a { color:var(--sub-color); border:#fff 1px solid; margin: 0 0; }
#anch03 .box_link_btn a:link    { color:#fff; }
#anch03 .box_link_btn a:visited { color:#fff; }
#anch03 .box_link_btn a:hover   { color:var(--sub-color); background:#fff; }
#anch03 .box_link_btn a:active  { color:#fff; }
#anch03 .box_link_btn a:after { background: #fff; }
#anch03 .box_link_btn a:hover:after { background: var(--sub-color); }
#anch03 .box_link_btn a::before { background-color: #fff; }
@media screen and (min-width: 900px) {
	.box_link_list { display: flex; justify-content: flex-start; align-items: center; }
	.box_link_list li:nth-child(1) { margin-right: 20px;}
	.box_link_list a { width: 240px; }
}

/*-- #anch04 -------------------------------------------------------------*/
@media screen and (max-width: 599px) {
}
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 600px) and (max-width: 899px) {
}

@media screen and (min-width: 900px) {
	#anch04 { position: relative; padding: 10vh 6%; background: var(--opa-color); margin: 0 0 5vh 5vw; border-radius: 50px 0 0 50px; }
	.kitaFlex { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; }
	.kitaFlexL { width: 66%; }
	.kitaFlexR { width: 30%; }
	.kitaFlexL h2 { font-size: 2.0rem; font-weight: bold; margin-bottom: 10px; color: #fff; }
	.kitaFlexL p { margin-bottom: 20px; color: #fff; }
	.kitaFlexL ul { display: flex; justify-content: space-between; margin-bottom: 40px; }
	.kitaFlexL ul li { text-align: center; width: 48%; }
	.kitaFlexL ul li .bnr { border: 1px solid #dedede; background: #fff; padding: 10px 0; margin-bottom: 20px; }
	.kitaFlexL ul li .bnr img { width: 60%; margin: 0 auto; }
	.kitaFlexL ul li p { text-align: left; margin-bottom: 0px; color: #fff; }
	
	#anch04 .border-grid { position: absolute; top: 0; left: 0; display: flex; justify-content: space-between; width: 100%; height: 100%; z-index: 0; }
	#anch04 .border-grid span { width: 1px; height: 100%; background: #009bbf; margin: 0 5%;}
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	.kitaFlexL h2 { font-size: 1.8rem; }
	.kitaFlexL { width: 58%; }
	.kitaFlexR { width: 38%; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	.kitaFlexL h2 { font-size: 1.85rem; }
	.kitaFlexL { width: 60%; }
	.kitaFlexR { width: 36%; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	.kitaFlexL h2 { font-size: 1.9rem; }
	.kitaFlexL { width: 62%; }
	.kitaFlexR { width: 34%; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	.kitaFlexL h2 { font-size: 1.95rem; }
	.kitaFlexL { width: 64%; }
	.kitaFlexR { width: 32%; }
}

#anch04 .arrow-button a {background: #009bbf; color: #fff; } 
#anch04 .arrow-button a::after { border-right: 2px solid #fff; border-bottom: 1px solid #fff;}
#anch04 .arrow-button :hover { color:#fff; letter-spacing: 0.1em; }
#anch04 .arrow-button a:hover::after { border-right: 2px solid #fff; border-bottom: 1px solid #fff; }
#anch04 .arrow-button a:hover::after { }

.view-anch04.view { position: relative; overflow: hidden; }
.view-anch04.view:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 10; pointer-events: none; transform-origin: left; animation: slideIn02 1s ease forwards; }
.view-anch04.view.in-view::after { animation: slideOut02 1s ease forwards; }
@keyframes slideOut02 {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

@keyframes slideIn02 {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

/*-- #anch05 -------------------------------------------------------------*/
@media screen and (max-width: 899px) {
	#anch05 { position: relative; overflow: hidden; margin: 0 4%; }
	#anch05 .in-flex { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
	#anch05 .in-flex-Img { width: 48%; display: flex; align-items: center; }
	
	#anch05 .in-flex-Txt { width: 48%; padding: 0vh 4% 0vh 0; }
	#anch05 .in-flex-Txt .mb40 { margin-bottom: 20px !important; }
	#anch05 .copy-01 { }
	#anch05 .copy-01 .mv-ttl01 { color: var(--opa-color); font-size: 3.0rem; }
	#anch05 .copy-01 .mv-ttl02 { color: var(--opa-color); margin-bottom: 20px; }
	
	#anch05 .border-grid { position: absolute; top: 0; left: 0; display: flex; justify-content: space-between; width: 100%; height: 100%; z-index: 0; }
	#anch05 .border-grid span { width: 1px; height: 100%; background: #f4f4f4; margin: 0 5%;}
	
	#anch05 .img-loop-slide div { margin-bottom: 10px; }
	#anch05 .img-loop-slide div img { border-radius: 30px 0 0 0;}
	#anch05 .img-loop-slide p { padding:3px 0 3px 1em; margin-bottom: 0px; border-left: 5px solid var(--opa-color); font-size: 0.9rem; }
}
@media screen and (max-width: 599px) {
	#anch05 .in-flex { display: flex; justify-content: space-between; align-items: center; flex-direction: column; }
	#anch05 .in-flex-Img { width: 100%; order: 2; display: block; }	
	#anch05 .in-flex-Txt { width: 100%; order: 1; padding: 0; margin-bottom: 20px; }
	#anch05 .in-flex-Img .img-loop { margin-bottom: 40px; }
	#anch05 .in-flex-Img .box_link_btn a { margin: 0 auto; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
}

@media screen and (min-width: 900px) {
	#anch05 { position: relative; padding: 10vh 0vh; overflow: hidden; margin: 0 0 5vh 5vw; }
	#anch05 .in-flex { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
	#anch05 .in-flex-Img { width: 64%; }
	
	#anch05 .in-flex-Txt { width: 32%; padding: 0vh 4% 0vh 0; }
	#anch05 .copy-01 { }
	#anch05 .copy-01 .mv-ttl01 { color: var(--opa-color); font-size: 5.0rem; }
	#anch05 .copy-01 .mv-ttl02 { color: var(--opa-color); margin-bottom: 20px; }
	
	#anch05 .border-grid { position: absolute; top: 0; left: 0; display: flex; justify-content: space-between; width: 100%; height: 100%; z-index: 0; }
	#anch05 .border-grid span { width: 1px; height: 100%; background: #f4f4f4; margin: 0 5%;}
	
	#anch05 .img-loop-slide { max-width: 360px; width: 100%; }
	#anch05 .img-loop-slide div { margin-bottom: 10px; }
	#anch05 .img-loop-slide div img { border-radius: 30px 0 0 0;}
	#anch05 .img-loop-slide p { padding:3px 10px 3px 1em; margin-bottom: 0px; border-left: 5px solid var(--opa-color); font-size: 0.9rem; }
}

@media screen and (min-width: 900px) and (max-width: 1089px) {
	#anch05 .copy-01 .mv-ttl01 { font-size:4.2rem; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	#anch05 .copy-01 .mv-ttl01 { font-size:4.4rem; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	#anch05 .copy-01 .mv-ttl01 { font-size:4.6rem; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	#anch05 .copy-01 .mv-ttl01 { font-size:4.8rem; }
}

#anch05 .arrow-button a { color: var(--opa-color); background: #f4f4f4; }
#anch05 .arrow-button a::after { border-right: 2px solid var(--opa-color); border-bottom: 1px solid var(--opa-color); }
#anch05 .arrow-button :hover { color:var(--opa-color); }
#anch05 .arrow-button a:hover::after { border-right: 2px solid var(--opa-color); border-bottom: 1px solid var(--opa-color); }

#anch05 .box_link_btn a { color:var(--opa-color); border:var(--opa-color) 1px solid; margin: 0 0; }
#anch05 .box_link_btn a:link    { color:var(--opa-color); }
#anch05 .box_link_btn a:visited { color:var(--opa-color); }
#anch05 .box_link_btn a:hover   { color:#fff; background: var(--opa-color); }
#anch05 .box_link_btn a:active  { color:var(--opa-color); }
#anch05 .box_link_btn a:after { background: var(--opa-color); }
#anch05 .box_link_btn a:hover:after { background: #fff; }
#anch05 .box_link_btn a::before { background-color: var(--opa-color); }

/*-- #anch06 -------------------------------------------------------------*/
@media screen and (max-width: 899px) {		
}
@media screen and (min-width: 600px) and (max-width: 899px)  {
}
@media screen and (min-width: 900px) {
}

/*-- #anch05 -------------------------------------------------------------*/
@media screen and (max-width: 899px) {		
	#anch06 { margin: 6%; }
	.newsFlex { width: 96%; margin: 0 auto; }
	.newsFlexL {  }
	.newsFlexR {  }
	.newsFlex h2 { font-size: 1.5rem; color:#000; letter-spacing: 0.1em; margin-bottom: 10px; }
	.newsFlex h6 { font-family:'Roboto Condensed', sans-serif; font-weight:bold; color: #dedede; line-height: 1.0; font-size: 1.2rem; margin-bottom: 20px; }
	
	.newsList { max-width: 1020px; width: 100%; margin: 0 auto 20px; }
	.newsList li .newsDl { margin-bottom: 10px; }
	
	.newsDl { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 20px; }
	.newsDl dt { background: #000; color: #fff; font-size: 10px; height: 20px; line-height: 20px; padding: 0 10px; border: 1px solid #000; font-family:'Roboto Condensed', sans-serif; font-weight:bold; }
	.newsDl dd { background: #fff; color: #000; font-size: 10px; height: 20px; line-height: 20px; padding: 0 10px; border: 1px solid #000; font-family:'Roboto Condensed', sans-serif; font-weight:bold; }
}
@media screen and (min-width: 600px) and (max-width: 899px)  {
	.newsFlex h6 { font-size: 0.75rem; }
}
@media screen and (min-width: 900px) {
	#anch06 {  }
	#anch06 .in { max-width: 1200px; width: 84%; margin: 0 auto; /*background: #f4f4f4;*/ padding: 5vh 4%; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; }
	.newsFlex { max-width: 1200px; width: 100%; margin: 0 auto; display: flex; justify-content: space-between; position: relative; }
	.newsFlexL { width: 30%; }
	.newsFlexR { width: 66%; }
	.newsFlex h2 { font-size: 2.4rem; color:#000; letter-spacing: 0.1em; margin-bottom: 0px; }
	.newsFlex h6 { font-family:'Roboto Condensed', sans-serif; font-weight:bold; color: #dedede; line-height: 1.0; margin-bottom: 40px; }
	
	.newsList { margin: 0 auto; }
	.newsList li { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #dedede; }
	.newsList li p { margin-bottom: 0px; font-size: 0.9em; }
	.newsList li .newsDl { margin-right: 10px; }
	
	.newsDl { display: flex; justify-content: flex-start; align-items: center; }
	.newsDl dt { background: #000; color: #fff; font-size: 12px; height: 20px; line-height: 20px; padding: 0 10px; border: 1px solid #000; font-family:'Roboto Condensed', sans-serif; font-weight:bold; }
	.newsDl dd { background: #fff; color: #000; font-size: 12px; height: 20px; line-height: 20px; padding: 0 10px; border: 1px solid #000; font-family:'Roboto Condensed', sans-serif; font-weight:bold; }
}

@media screen and (min-width: 900px) and (max-width: 1079px)  {
	.newsFlex h6 { font-size: 0.8rem; }
}
@media screen and (min-width: 1080px) and (max-width: 1179px)  {
	.newsFlex h6 { font-size: 0.85rem; }
}
@media screen and (min-width: 1180px) and (max-width: 1279px)  {
	.newsFlex h6 { font-size: 0.9rem; }
}
@media screen and (min-width: 1280px) and (max-width: 1379px)  {
	.newsFlex h6 { font-size: 0.95rem; }
}
@media screen and (min-width: 1380px) {
	.newsFlex h6 { font-size: 1.0rem; }
}

#anch06 .box_link_btn a { color:#000; border:#000 1px solid; }
#anch06 .box_link_btn a:link    { color:#000; }
#anch06 .box_link_btn a:visited { color:#000; }
#anch06 .box_link_btn a:hover   { color:#fff; background: #000; }
#anch06 .box_link_btn a:active  { color:#000; }
#anch06 .box_link_btn a:after { background: #000; }
#anch06 .box_link_btn a:hover:after { background: #fff; }
#anch06 .box_link_btn a::before { background-color: #000; }

/*-- #anch07 -------------------------------------------------------------*/
#anch07 .ttl01 { color: #000; border-bottom: 1px solid #000; }
#anch07 .box_link_btn a { color:#000; border:#000 1px solid; }
#anch07 .box_link_btn a:link    { color:#000; }
#anch07 .box_link_btn a:visited { color:#000; }
#anch07 .box_link_btn a:hover   { color:#fff; background:#000; }
#anch07 .box_link_btn a:active  { color:#000; }
#anch07 .box_link_btn a:after { content: ""; background: #000; }
#anch07 .box_link_btn a:hover:after { content: ""; background: #fff; }
#anch07 .box_link_btn a::before { background-color: #000; }