@charset "utf-8";
/***************************************************
 * Generated by SVG Artista on 6/9/2022, 2:32:55 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

 @-webkit-keyframes animate-svg-stroke-1 {
	0% {
	  stroke-dashoffset: 4537.6796875px;
	  stroke-dasharray: 4537.6796875px;
	}

	100% {
	  stroke-dashoffset: 0;
	  stroke-dasharray: 4537.6796875px;
	}
  }

  @keyframes animate-svg-stroke-1 {
	0% {
	  stroke-dashoffset: 4537.6796875px;
	  stroke-dasharray: 4537.6796875px;
	}

	100% {
	  stroke-dashoffset: 0;
	  stroke-dasharray: 4537.6796875px;
	}
  }

  @-webkit-keyframes animate-svg-fill-1 {
	0% {
	  fill: transparent;
	}

	100% {
	  fill: rgb(255, 255, 255);
	}
  }

  @keyframes animate-svg-fill-1 {
	0% {
	  fill: transparent;
	}

	100% {
	  fill: rgb(255, 255, 255);
	}
  }

  .svg-elem-1 {
	-webkit-animation: animate-svg-stroke-1 3s ease-in 0s both,
						 animate-svg-fill-1 1.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
			animation: animate-svg-stroke-1 3s ease-in 0s both,
				 animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
  }



/* ----------------------------- 2. トップページ */
.p-top__kv { position: relative; height: 100vh; margin-bottom: 80px; }
.is_tablet .p-top__kv {width: 100%; height: auto; aspect-ratio: 16 / 9;}
.p-top__kv .slider { position: absolute; width: 100%; height: 100%; z-index: 1; left: 0; top: 0; }
.p-top__kv .slider > ul {display: none;}
.p-top__kv .slider > ul.slick-initialized {display: block;}
.p-top__kv .slider li { position: relative; }
.p-top__kv .slider li:before { display: block; content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 10px; z-index: 1; background: #009CE1; }
.p-top__kv .slider li.slick-current:before { width: 100%; -webkit-transition: 5.5s linear all; -moz-transition: 5.5s linear all; -ms-transition: 5.5s linear all; transition: 5.5s linear all; }
.p-top__kv .slider li img { object-fit: cover; width: 100%; height: 100vh; }
.is_tablet .p-top__kv .slider li img { width: 100%; height: auto; }
.p-top__kv h2 { position: absolute; left: 0; top: 0; width: 100%; height: 50px; z-index: 9; display: flex; align-items: center; justify-content: center; font-size: 14px; font-size: 1.4rem; font-family: "f-noto_sans_jp_r", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 100%; color: #999; font-weight: 400; }
.p-top__lead { background: url(../images/top/lead_img1.png) no-repeat right center; padding-top: 200px; padding-bottom: 224px;}
.p-top__lead .box1 {position: relative; z-index: 2;}
.p-top__lead .box1 p { font-size: 34px; font-size: 3.4rem; line-height: 240%; }
.p-top__lead .illust { position: absolute; top: 0; right: 0;}
.p-top__service { margin-bottom: 143px; }
.p-top__service .c-wrap__1580 { display: flex; justify-content: space-between;  box-sizing: content-box;}
.p-top__service .c-wrap__1580:before, .p-top__service .c-wrap__1580:after { display: none; }
.p-top__service .heading { padding-left: 190px; }
.p-top__service .heading h3 { font-weight: 700; font-family: "f-inter", "f-noto_sans_jp_r", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 300px; font-size: 30rem; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-feature-settings: initial; line-height: 100%; color: rgba(0, 156, 225, 0.3); }
.p-top__service .heading h3 h1, .p-top__service .heading h3 h2, .p-top__service .heading h3 h3, .p-top__service .heading h3 h4, .p-top__service .heading h3 h5, .p-top__service .heading h3 h6 { font-feature-settings: initial; }
.p-top__service .content { width: 67.0886%; }
.p-top__service .content li { border-bottom: 2px solid #222; }
.p-top__service .content li a { display: block; padding: 45px 0 45px 25px; background: url(../images/common/arrow_1.svg) no-repeat right center; background-size: 120px 120px; }
.p-top__service .content li a:hover { text-decoration: none; }
.p-top__service .content li .en { font-size: 120px; font-size: 12rem; display: block; letter-spacing: -0.05em; line-height: 120%; font-family: "f-inter", "f-noto_sans_jp_r", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #444; }
.p-top__service .content li p { font-size: 26px; font-size: 2.6rem; line-height: 1.2;}
.p-top__works { margin-bottom: 100px; overflow: hidden; }
.p-top__works .heading h3 { text-align: center; font-size: 100px; font-size: 10rem; font-family: "f-inter", "f-noto_sans_jp_r", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #444; line-height: 120%; }
.p-top__works .content { padding-bottom: 70px; position: relative; }
.p-top__works .content:before { display: block; content: ""; position: absolute; z-index: 1; width: 100vw; left: calc(-1 * ( 50vw - 50% ) ); bottom: 0; height: calc(100% - 280px); background: #009CE1; }
.p-top__works .content > * { position: relative; z-index: 9; }
.p-top__works .content .slick-list { overflow: visible !important; }
.p-top__works .content li { text-align: center; max-width: 440px; }
.p-top__works .content li a { color: #fff; text-decoration: none; }
.p-top__works .content li.slick-current .img1 { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); }
.p-top__works .content .txt1 { -webkit-transform: scale(0.68); -moz-transform: scale(0.68); transform: scale(0.68);}
.p-top__works .content li.slick-current .txt1 { opacity: 1; -ms-filter: "alpha(opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); }
.p-top__works .content li.slick-current .txt1 .tag { opacity: 1; -ms-filter: "alpha(opacity=100)"; filter: alpha(opacity=100); }
.p-top__works .content .img1 { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.24); background: #fff; width: 100%; margin: 0 auto 20px; -webkit-transition: 0.3s ease all; -moz-transition: 0.3s ease all; -ms-transition: 0.3s ease all; transition: 0.3s ease all; }
@media screen and (min-width: 769px) {
  .p-top__works .content .img1 { -webkit-transform: scale(0.68); -moz-transform: scale(0.68); transform: scale(0.68); -webkit-transform-origin: center bottom; transform-origin: center bottom; }
}
/* .p-top__works .content .txt1 { opacity: 0; -ms-filter: "alpha(opacity=0)"; filter: alpha(opacity=0); } */
.p-top__works .content .txt1 h4 { font-size: 24px; font-size: 2.4rem; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 25px; }
.p-top__works .content .txt1 .tag { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; opacity: 0; -ms-filter: "alpha(opacity=0)"; filter: alpha(opacity=0); }
.p-top__works .content .txt1 .tag a { border: 1px solid #fff; border-radius: 24px; font-size: 14px; font-size: 1.4rem; line-height: 120%; margin: 5px; padding: 3px 8px; }
.p-top__voice { margin-bottom: 100px; }
.p-top__voice .c-wrap__1580 { padding-top: 90px; position: relative; box-sizing: content-box;}
.p-top__voice .c-wrap__1580:before { display: block; content: ""; position: absolute; width: calc(100% + 140px); height: 480px; top: 0; left: -70px; z-index: 0; background: url(../images/common/bg1.png) center top; }
.p-top__voice .c-wrap__1580 > * { position: relative; z-index: 2; }
.p-top__voice .heading h3 { text-align: center; font-size: 100px; font-size: 10rem; font-family: "f-inter", "f-noto_sans_jp_r", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #444; line-height: 120%; }
.p-top__voice .content ul { display: flex; flex-wrap: wrap; }
.p-top__voice .content ul:before, .p-top__voice .content ul:after { display: none; }
.p-top__voice .content li { width: 24.5283%; margin-left: 0.62893333%; }
.p-top__voice .content li:nth-child(4n+1) { margin-left: 0; }
.p-top__voice .content li a { display: block; text-decoration: none; }
.p-top__voice .content li a:hover{opacity: 1;}
.p-top__voice .content li a:hover .img1 img {opacity: 1; /* opacity: 0.7; -ms-filter: "alpha(opacity=70)"; filter: alpha(opacity=70); */ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1); }
.p-top__voice .content .img1 { overflow: hidden; }
.p-top__voice .content .img1 img { -webkit-transition: 0.3s ease all; -moz-transition: 0.3s ease all; -ms-transition: 0.3s ease all; transition: 0.3s ease all; width: 390px; height: 440px; object-fit: cover; }
.p-top__voice .content .txt1 { position: relative; margin-left: 30px; background: #fff; padding: 10px 20px; margin-top: -50px; }
.p-top__voice .content .txt1 h4 { font-size: 24px; font-size: 2.4rem; font-weight: 700; line-height: 140%; margin-bottom: 18px; color: #009CE1; }
.p-top__voice .content .txt1 p { font-size: 16px; font-size: 1.6rem; line-height: 120%; }
.p-top__voice .content .txt1 p span { display: inline-block; *display: inline; *zoom: 1; border: 1px solid #707070; line-height: 120%; width: 50px; padding: 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; margin-right: 7px; }
.p-top__credo { margin-bottom: 120px; }
.p-top__credo .heading { display: flex; align-items: flex-start; background: url(../images/top/credo_bg1.png) no-repeat right bottom/80rem; padding-left: 85px; padding-bottom: 85px; margin-bottom: 75px; }
.p-top__credo .heading:before, .p-top__credo .heading:after { display: none; }
.p-top__credo .heading h3 { font-weight: 700; font-family: "f-inter", "f-noto_sans_jp_r", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 300px; font-size: 30rem; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-feature-settings: initial; line-height: 84%; color: rgba(0, 156, 225, 0.3); margin-right: 85px; }
.p-top__credo .heading h3 h1, .p-top__credo .heading h3 h2, .p-top__credo .heading h3 h3, .p-top__credo .heading h3 h4, .p-top__credo .heading h3 h5, .p-top__credo .heading h3 h6 { font-feature-settings: initial; }
.p-top__credo .heading p { font-size: 24px; font-size: 2.4rem; line-height: 280%; margin-top: 200px;}
.p-top__credo .heading p strong { font-size: 30px; font-size: 3rem; font-weight: 500; display: inline-block; background: #fff; padding: 5px 10px 5px 0; margin-top: 80px;}
.p-top__credo .nav { margin-bottom: 100px; box-sizing: content-box;}
.p-top__credo .nav ul { display: flex; }
.p-top__credo .nav ul:before, .p-top__credo .nav ul:after { display: none; }
.p-top__credo .nav li { width: 25%; }
.p-top__credo .nav li a { display: flex; align-items: flex-end; position: relative; color: #fff; text-decoration: none; height: 500px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 55px 40px; }
.p-top__credo .nav li a:hover { opacity: 1; -ms-filter: "alpha(opacity=100)"; filter: alpha(opacity=100); }
.p-top__credo .nav li a:hover .img1:before { opacity: 0; -ms-filter: "alpha(opacity=0)"; filter: alpha(opacity=0); }
.p-top__credo .nav li a:hover .img1 img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1); opacity: 1; -ms-filter: "alpha(opacity=100)"; filter: alpha(opacity=100); }
.p-top__credo .nav li .txt1 { position: relative; z-index: 2; }
.p-top__credo .nav li .txt1 p { font-size: 32px; font-size: 3.2rem; letter-spacing: 0.05em; line-height: 120%; }
.p-top__credo .nav li .txt1 .en { font-size: 16px; font-size: 1.6rem; font-family: "f-inter", "f-noto_sans_jp_r", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 120%; display: block; }
.p-top__credo .nav li .img1 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.p-top__credo .nav li .img1:before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); z-index: 2; -webkit-transition: 0.3s ease all; -moz-transition: 0.3s ease all; -ms-transition: 0.3s ease all; transition: 0.3s ease all; }
.p-top__credo .nav li .img1 img { width: 100%; height: 100%; object-fit: cover; -webkit-transition: 0.3s ease all; -moz-transition: 0.3s ease all; -ms-transition: 0.3s ease all; transition: 0.3s ease all; position: relative; z-index: 1; }
.p-top__credo .btn { text-align: center; }
.p-top__credo .btn a { display: block; max-width: 1000px; margin-left: auto; margin-right: auto; }
.p-top__credo .btn a:hover img { opacity: 1; -ms-filter: "alpha(opacity=100)"; filter: alpha(opacity=100); }
.p-top__news { background: #fff; box-shadow: 5px 0 20px rgba(0, 0, 0, 0.16); padding-top: 92px; padding-bottom: 102px; margin-bottom: 154px; }
.p-top__news .heading { margin-bottom: 20px; }
.p-top__news .heading h3 { text-align: center; font-size: 80px; font-size: 8rem; font-family: "f-inter", "f-noto_sans_jp_r", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #444; line-height: 120%; }
.p-top__news .content { max-width: 1236px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; box-sizing: content-box;}
.p-top__news .content li { border-bottom: 1px solid #DFDFDF; }
.p-top__news .content li:first-child { border-top: 1px solid #DFDFDF; }
.p-top__news .content li a { display: flex; align-items: center; text-decoration: none; margin: 24px 18px; font-size: 1.8rem; position: relative;}
.p-top__news .content li a::after{content: ""; display: inline-block; position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; background: #222;transform: scaleX(0); transform-origin: right; transition: all .4s ease; transition-property: transform;}
.p-top__news .content li a:hover::after{transform: scaleX(1); transform-origin: left;}
.p-top__news .content li a:hover .title { text-decoration: none; }
.p-top__news .content li .date { font-family: "f-montserrat", "f-noto_sans_jp_r", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: 500; color: #A7B9C0; width: 130px; }
.p-top__news .content li .title { width: calc(100% - 130px); }
.p-top__project { background: #F7F9FA; padding-top: 112px; padding-bottom: 120px; margin-bottom: 144px; }
.p-top__project .heading { margin-bottom: 40px; }
.p-top__project .heading h3 { text-align: center; font-size: 80px; font-size: 8rem; font-family: "f-inter", "f-noto_sans_jp_r", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #444; line-height: 120%; }
.p-top__project .content ul { display: flex; flex-wrap: wrap; }
.p-top__project .content ul:before, .p-top__project .content ul:after { display: none; }
.p-top__project .content li { width: 23.4177%; margin-left: 2.109733%; margin-bottom: 48px; }
.p-top__project .content li:nth-child(4n+1) { margin-left: 0; }
.p-top__project .content li a { text-decoration: none; }
.p-top__project .content .img1 { overflow: hidden; }
.p-top__project .content .img1 img { -webkit-transition: 0.3s ease all; -moz-transition: 0.3s ease all; -ms-transition: 0.3s ease all; transition: 0.3s ease all; width: 370px; height: 270px; object-fit: cover; }
.p-top__project .content .img1 a:hover img { opacity: 1; -ms-filter: "alpha(opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1); }
.p-top__project .content .txt1 { padding: 10px; }
.p-top__project .content .txt1 .date { font-family: "f-barlow", "f-noto_sans_jp_r", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: 500; line-height: 120%; color: #A7B9C0; }
.p-top__project .content .txt1 h4 { font-weight: 700; margin-bottom: 15px; line-height: 120%; }
.p-top__project .content .txt1 .lead { font-size: 16px; font-size: 1.6rem; line-height: 140%; margin-bottom: 10px; }
.p-top__project .content .txt1 .tag { display: flex; flex-wrap: wrap; }
.p-top__project .content .txt1 .tag a { border: 1px solid #222; border-radius: 24px; font-size: 14px; font-size: 1.4rem; line-height: 120%; margin: 5px; padding: 3px 8px; }
.p-top__blog { overflow: hidden; margin-bottom: 135px; }
.p-top__blog .heading { margin-bottom: 30px; }
.p-top__blog .heading h3 { text-align: center; font-size: 80px; font-size: 8rem; font-family: "f-inter", "f-noto_sans_jp_r", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #444; line-height: 120%; }
.p-top__blog .content .slick-list { overflow: visible !important; }
.p-top__blog .content .slick-arrow { position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; width: 40px; height: 40px; border: 0; background-position: center; background-repeat: no-repeat; background-size: contain; background-color: transparent; cursor: pointer; outline: 0; white-space: nowrap; overflow: hidden; white-space: nowrap; text-indent: 60px; z-index: 9; }
.p-top__blog .content .slick-arrow.slick-prev { left: -20px; background-image: url(../images/common/arrow_3-left.svg); }
.p-top__blog .content .slick-arrow.slick-next { right: -20px; background-image: url(../images/common/arrow_3.svg); }
.p-top__blog .content li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #fff; padding-left: 8px; padding-right: 8px; -webkit-transition: 0.3s ease all; -moz-transition: 0.3s ease all; -ms-transition: 0.3s ease all; transition: 0.3s ease all; }
.p-top__blog .content li a { display: block; text-decoration: none; padding: 16px; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.16); width: 348px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; opacity: 0.5; }
.p-top__blog .content li.slick-active a { opacity: 1;}
.p-top__blog .content li a:hover{opacity: 1;}
.p-top__blog .content li a .img1 img {width: 316px; height: 230px; object-fit: cover;}
.p-top__blog .content li .is-active-next {display: none;}
.p-top__blog .content li .txt1 .info { display: flex; align-items: center; font-size: 16px; font-size: 1.6rem; line-height: 140%; margin-bottom: 12px; position: relative; margin-top: -14px; }
.p-top__blog .content li .txt1 .info:before, .p-top__blog .content li .txt1 .info:after { display: none; }
.p-top__blog .content li .txt1 .date { font-family: "f-barlow", "f-noto_sans_jp_r", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: 500; color: #A7B9C0; padding: 1px 10px; background: #fff; }
.p-top__blog .content li .txt1 .category { background: #009CE1; color: #fff; padding: 1px 12px; }
.p-top__blog .content li .txt1 h4 { font-weight: 700; line-height: 140%; margin-bottom: 13px; }
.p-top__blog .content li .txt1 .lead { line-height: 150%; }
.p-top__blog.staff { background: url(../images/common/bg1.png) center top; padding-top: 113px; padding-bottom: 120px; margin-bottom: 0; }



@media screen and (max-width:1500px) {
  .p-top__works .content li { max-width: 360px; }
}
@media screen and (max-width:767px),(max-width:896px) and (orientation:landscape) { .c-btn1 { margin-top: 30px; }
  .c-title1 { margin-bottom: 40px; }
  .c-title1 .en { font-size: 38px; font-size: 3.8rem; }
  .c-title1 .h { font-size: 18px; font-size: 1.8rem; }
  .c-table__nostyle { width: 100%; }
  .c-table__nostyle th, .c-table__nostyle td { padding: 2px 0 !important; border: 0; font-weight: normal; text-align: left; vertical-align: top; background: transparent; }
  .u-indent { text-indent: -1em; padding-left: 1em; } }
@media screen and (max-width:767px),(max-width:896px) and (orientation:landscape) { /* ----------------------------- 全体 */
  .p-top__kv { height: 80vw; margin-bottom: 40px; }
  .p-top__kv h2 { display: none; }
  .p-top__kv .slider li:before { height: 4px; }
  .p-top__kv .slider li img { height: 80vw; }
  .p-top__lead { padding-top: 0; padding-bottom: calc(88vw + 20px); margin-bottom: 40px; background-size: contain; background-position: center bottom; }
  .p-top__lead .box1 p { font-size: 17px; font-size: 1.7rem; line-height: 200%; }
  .p-top__lead .illust { position: relative; top: 0; right: 0; left: 0;}
  .p-top__lead .illust canvas { width: 100% !important; height: auto !important; }
  .p-top__service { margin-bottom: 80px; }
  .p-top__service .heading { padding-left: 0; }
  .p-top__service .heading h3 { font-size: 55px; font-size: 5.5rem; }
  .p-top__service .content { width: calc(100% - 70px); }
  .p-top__service .content li a { padding: 20px 0; background-size: 30px 30px; }
  .p-top__service .content li .en { font-size: 36px; font-size: 3.6rem; }
  .p-top__service .content li p { font-size: 13px; font-size: 1.3rem;}
  .p-top__works { margin-bottom: 60px; }
  .p-top__works .heading { margin-bottom: 20px; }
  .p-top__works .heading h3 { font-size: 50px; font-size: 5rem; }
  .p-top__works .content { padding-bottom: 40px; }
  .p-top__works .content:before { height: calc(100% - 140px); }
  .p-top__works .content .wrap { padding-left: 15px; padding-right: 15px; }
  .p-top__works .content li { max-width: 320px; }
  .p-top__works .content .img1 { width: calc(100vw - 40px - 40px) !important; margin-top: 0; margin-left: auto; margin-right: auto; }
  .p-top__works .content .txt1 { opacity: 1; -ms-filter: "alpha(opacity=100)"; filter: alpha(opacity=100); }
  .p-top__works .content .txt1 h4 { font-size: 20px; font-size: 2rem; margin-bottom: 15px; }
  .p-top__works .content .txt1 .tag a { font-size: 12px; font-size: 1.2rem; margin: 3px; }
  .p-top__voice { margin-bottom: 60px; }
  .p-top__voice .c-wrap__1580 { padding-top: 40px; }
  .p-top__voice .heading { margin-bottom: 20px; }
  .p-top__voice .heading h3 { font-size: 50px; font-size: 5rem; }
  .p-top__voice .content ul { display: block; }
  .p-top__voice .content li { width: auto; margin-left: 0; margin-bottom: 20px; }
  .p-top__voice .content .txt1 h4 { font-size: 18px; font-size: 1.8rem; margin-bottom: 10px; }
  .p-top__voice .content .txt1 p { font-size: 12px; font-size: 1.2rem; }
  .p-top__credo { margin-bottom: 40px; padding-left: 15px; padding-right: 15px; }
  .p-top__credo .heading {align-items: flex-start; justify-content: space-between; background-size: contain; padding-left: 0; padding-bottom: 70vw; margin-bottom: 40px; background: url(../images/top/credo_bg1.png) no-repeat right bottom; }
  .p-top__credo .heading h3 { font-size: 50px; font-size: 5rem; margin-right: 0; }
  .p-top__credo .heading .lead { width: calc(100% - 70px); }
  .p-top__credo .heading p { font-size: 16px; font-size: 1.6rem; line-height: 220%; margin-top: auto;}
  .p-top__credo .heading p + p { margin-top: 30px; }
  .p-top__credo .heading p strong { font-size: 20px; font-size: 2rem; padding: 0; background: transparent; margin-top: 30px;}
  .p-top__credo .nav { padding-left: 0; padding-right: 0; margin-bottom: 30px; }
  .p-top__credo .nav ul { flex-wrap: wrap; }
  .p-top__credo .nav li { width: 50%; }
  .p-top__credo .nav li a { height: 50vw; padding: 15px 10px; }
  .p-top__credo .nav li .txt1 p { font-size: 19px; font-size: 1.9rem; }
  .p-top__credo .nav li .txt1 .en { font-size: 14px; font-size: 1.4rem; }
  .p-top__news { padding-top: 40px; padding-bottom: 40px; margin-bottom: 60px; }
  .p-top__news .heading h3 { font-size: 50px; font-size: 5rem; }
  .p-top__news .content li a { display: block; padding: 15px 10px; }
  .p-top__news .content li .title { width: auto; }
  .p-top__project { padding-top: 40px; padding-bottom: 40px; margin-bottom: 60px; }
  .p-top__project .heading h3 { font-size: 50px; font-size: 5rem; }
  .p-top__project .content ul { display: block; }
  .p-top__project .content li { width: auto; margin-left: 0; margin-bottom: 40px; }
  .p-top__project .content .txt1 h4 { margin-bottom: 10px; }
  .p-top__project .content .txt1 .lead { font-size: 14px; font-size: 1.4rem; }
  .p-top__project .content .txt1 .tag a { font-size: 12px; font-size: 1.2rem; }
  .p-top__blog { margin-bottom: 50px; }
  .p-top__blog .heading h3 { font-size: 50px; font-size: 5rem; }
  .p-top__blog .content { margin-left: 15px; margin-right: 15px; }
  .p-top__blog.staff { padding-top: 40px; padding-bottom: 40px; }
}

@media screen and (max-width: 896px) and (orientation:landscape) {
	.p-top__voice .content ul { display: flex; }
	.p-top__voice .content li { width: 49%; margin-right: 2%;}
	.p-top__voice .content li:nth-child(2n) { margin-right: 0;}
	.p-top__project .content ul { display: flex; }
	.p-top__project .content li { width: 49%; margin-right: 2%;}
	.p-top__project .content li:nth-child(2n) { margin-right: 0;}
  .p-top__works .content .img1 { width: 100% !important;}
}


.peratto {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  opacity: 0;
}
.peratto::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 0px;
  height: 0px;
  border: 0px solid #dcdcdc;
  border-top-color: #f9f9f9;
  border-right-color: #f9f9f9;
  background-color: #f9f9f9;
  transition: 0.2s all ease;
  overflow: hidden;
  border-radius: 2px;
  border-width: 300px;
}

@keyframes haruAnim{
  0%{transform: translate(-40px,10px); opacity: 0;}
  100%{transform: translate(0); opacity: 1;}
}
@keyframes haruAnimAfter{
  100%{border-width: 0;}
}

.peratto.is-active{animation: haruAnim 1s; animation-fill-mode: forwards;}
.peratto.is-active::after{animation: haruAnimAfter 1s;animation-fill-mode: forwards;}




/* -----------------------------トップページ(新規内容追加と表示調整)----- */
/* キービジュアル */
.p-top__kv.re{background: url(../images/top/re/kv-bg.png)no-repeat bottom center/100%;aspect-ratio: 1920/912;height: auto;position: relative;}
.p-top__kv.re .kv-works{width: 58.5%;display: flex;flex-wrap: wrap;gap: 1.5rem;position: absolute;right: 4.27%;bottom:8.99%;}

.p-top__kv.re .kv-works .items{display: block;width: calc((100%/5) - ((1.5rem * 4)/5));aspect-ratio: 21 / 11;overflow: hidden;box-shadow: 0 0.3rem 0.6rem #00000028;transition: all ease 0.3s;opacity: 0;pointer-events: none;transform: translateY(0.5rem);}
.p-top__kv.re .kv-works .items.is-active{opacity: 1;pointer-events: auto;transform: translateY(0);}

.p-top__kv.re .kv-works .items:hover{transform: scale(1.05);opacity: 0.9;}
.p-top__kv.re .kv-works .items img{width: 100%;height: auto;object-fit: cover;}
@media screen and (max-width: 767px), (max-width: 896px) and (orientation:landscape){
  .p-top__kv.re{background: url(../images/top/re/kv-bg-sp.png)no-repeat bottom center/100%;aspect-ratio: 375/534;}
  .p-top__kv.re .kv-works{width: 90%;right: auto;left: 50%;transform: translateX(-50%);top: 15%;bottom: auto;}
  .p-top__kv.re .kv-works .items{display: block;width: calc((100%/3) - ((1.5rem * 2)/3));}
}


/* 文章 */
.p-top__lead.re{background: url(../images/top/re/lead_img1re.png)no-repeat right 22% center/calc(100vw * (534 /1920)) calc(100vw * (358 /1920));}

@media screen and (max-width: 767px), (max-width: 896px) and (orientation:landscape) {
	.p-top__lead.re{background-size: contain;background-position: center bottom;padding-bottom: calc(68vw + 20px);}
}

/* クレド */
.p-top__credo.re{max-width: 1580px;margin-left: auto;margin-right: auto;}
.p-top__credo.re .heading{padding-left: 0;background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 17%, rgba(175, 225, 248, 1) 17%, rgba(175, 225, 248, 1) 100%);padding-bottom: 1.1rem;}
.p-top__credo.re .heading .pc-w{color: #fff;}
.p-top__credo.re .heading h3{margin-right: 16.5%;}
.p-top__credo.re .heading .lead p{margin-top: 8.25rem;color: #fff;font-weight: 600;font-size: 2.5rem;font-family:"Yu Gothic UI","游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;letter-spacing: 0.127em;line-height: 270%;}
.p-top__credo.re .heading .lead p strong{background: transparent;font-weight: 700;display: inline;font-size: 3rem;letter-spacing: 0.15em;}
.p-top__credo.re .heading .lead .credo-bg{width: 61.5rem;height: auto;display: block;margin:5rem auto 0 5rem;max-width: 100%;}

@media screen and (max-width: 767px), (max-width: 896px) and (orientation:landscape) {
  .p-top__credo.re .heading{background: none;}
  .p-top__credo.re .heading .pc-w{color: rgba(0, 156, 225, 0.3);}
  .p-top__credo.re .heading h3{margin-right: 0;}
  .p-top__credo.re .heading .lead{background: #AFE1F8;padding: 1rem;}
  .p-top__credo.re .heading .lead p{font-size: 1.4rem;line-height: 220%;margin-top: auto;}
  .p-top__credo.re .heading .lead p strong{font-size: 1.6rem;}
  .p-top__credo.re .heading .lead .credo-bg{margin:1rem auto;}
}

/* インスタグラム */
.top-instagram{padding-top: 3rem;padding-bottom: 3rem;}
@media screen and (max-width: 767px), (max-width: 896px) and (orientation:landscape) {
  .top-instagram{padding-left: 5px;padding-right: 5px;}
}