@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(//fonts.googleapis.com/css?family=Pacifico);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

html {
	font-size:10px;
}

body{
	font: 10px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 300;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #000;
}
body * {
	transition: all 0.3s ease;
	box-sizing: border-box;
}

a{
	color: #0066ff;
	text-decoration: none;
}

a:hover, .active{
  text-decoration: none;
}
a[target="_blank"] {
  &:after {
    content: url(../images/modal-icon.svg);
    font-weight: 600;
    margin: 0 0 0 1rem;
  }
}
a:active, a:focus,input:active, input:focus{outline:0;}






/* 共通
------------------------------------------------------------*/

img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

#wrapper {
    /* max-width: 1920px; */
    margin: 0 auto;
	background: #fff;
	position: relative;
}

.pcNone {
	display: none;
}
.spNone {
	display: block;
}





/* header ********************************************/



/* header ********************************************/
.header__wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4.4em 0;
	position: relative;
	.header__logo {
        margin-left: 120px;
        position: relative;
        z-index: 1;
	}
	&:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 710px;
		height: 231px;
		background: url(../images/header-bg.png);
		z-index: 0;
	}
	.header__nav-panel {
		z-index: 1;
		position: relative;
		.header__nav-list {
			display: flex;
			.header__nav-item {
				margin: 0 28px;
				.header__nav-link {
					color: #0041C3;
					font-size: 1.8rem;
					font-weight: bold;
					text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
					&:hover {
						text-decoration: underline;
					}
					&.header__nav-link--contact {
						background: #0041C3;
						outline: 2px solid #0041C3;
						color: #fff;
						padding: 1.7rem 9rem;
						position: relative;
						text-shadow: none;
						&:before {
							content: url(../images/mail-icon-white.svg);
							position: absolute;
							left: 6%;
							top: 54%;
							transform: translate(0px, -50%);
						}
						&:after {
							content: "";
							position: absolute;
							width: 9px;
							height: 9px;
							border-right: 1px solid #fff;
							border-bottom: 1px solid #fff;
							right: 7%;
							top: 41%;
							transform: rotate(-45deg);
						}
						&:hover {
							background: #fff;
							color: #0041C3;
							text-decoration: none;
							&:before {
								content: url(../images/mail-icon.svg);
							}
							&:after {
								border-right: 1px solid #0041C3;
								border-bottom: 1px solid #0041C3;
							}
						}
					}
				}
			}
		}
	}
}

/* section *********************/
section {
	opacity: 0;
	transition: opacity 0.6s ease-out, transform 0.3s ease-out;
	&.is-visible {
		opacity: 1;
	}
}

/* hero *********************/
.hero {
    position: relative;
    min-height: 760px;
    max-width: 1920px;
    margin: 0 auto;
	.hero__text {
        position: absolute;
        z-index: 1;
        color: #0041C3;
        width: 550px;
		padding: 2em 0;
        text-align: left;
        left: 320px;
        top: 50%;
        transform: translate(0, -50%);
		background-image: linear-gradient(90deg, #ffffff 60%, #ffffff00);
		text-shadow: 2px 2px 2px rgba(255, 255, 255, 1), -2px -2px 2px rgba(255, 255, 255, 1), 2px -2px 2px rgba(255, 255, 255, 1), -2px 2px 2px rgba(255, 255, 255, 1);
		.hero__title {
			font-size: 6.8rem;
			line-height: 1.5;
			margin-bottom: 4rem;
		}
		.hero__comment {
			font-size: 2.4rem;
			line-height: 1.5;
			font-weight: bold;
		}
	}
	.hero__kv {
		background-image: url(../images/kv-img.svg);
		background-repeat: no-repeat;
		background-position: right bottom 65px;
		background-size: 81%;
		position: absolute;
		right: 0;
		top: 50%;
		height: 100%;
		width: 1020px;
		transform: translate(0, -50%);
		pointer-events: none;
		.hero__kv-img {
			position: absolute;
			&:after {
				content: "";
				display: block;
				position: absolute;
				width: 100%;
				height: 100%;
				background-repeat: no-repeat;
				background-position: center bottom;
				background-size: contain;
				bottom: 0px;
				left: 0px;
				z-index: -1;
			}
			img {
				width: 100%;
				height: auto;
			}
			&.hero__kv-img--human01 {
                top: 81px;
                right: 381px;
                width: 359px;
				&:after {
                    background-image: url(../images/heroKv_human01_shadow.svg);
					width: 100%;
                    bottom: -2%;
                    left: 2%;
				}
			}
			&.hero__kv-img--img01 {
                top: 34px;
                right: 560px;
                width: 103px;
			}
			&.hero__kv-img--img02 {
				top: 8px;
                right: 490px;
                width: 65px;
			}
			&.hero__kv-img--img03 {
				top: 418px;
                right: 139px;
                width: 90px;
				&:after {
                    background-image: url(../images/heroKv_img03_shadow.svg);
					width: 120%;
					bottom: -20%;
                    left: 11%;
				}
			}
			&.hero__kv-img--img04 {
				top: 189px;
                right: 283px;
                width: 41px;
				&:after {
                    background-image: url(../images/heroKv_img04_shadow.svg);
					width: 160%;
                    bottom: -25%;
                    left: 0;
				}
			}
			&.hero__kv-img--img05 {
				top: 145px;
                right: 763px;
                width: 38px;
				&:after {
                    background-image: url(../images/heroKv_img05_shadow.svg);
					width: 190%;
                    bottom: -27%;
                    left: 0;
				}
			}
			&.hero__kv-img--img06 {
				top: 420px;
                right: 996px;
                width: 18px;
				&:after {
                    background-image: url(../images/heroKv_img06_shadow.svg);
					width: 360%;
                    bottom: -47%;
                    left: -10%;
				}
			}
			&.hero__kv-img--img07 {
				top: 186px;
                right: 802px;
                width: 112px;
				&:after {
                    background-image: url(../images/heroKv_img07_shadow.svg);
					width: 110%;
                    bottom: -40%;
                    left: 12%;
				}
			}
			&.hero__kv-img--img08 {
				top: 163px;
                right: 690px;
                width: 33px;
				&:after {
                    background-image: url(../images/heroKv_img08_shadow.svg);
					width: 80%;
                    bottom: 0px;
                    left: 20%;
				}
			}
			&.hero__kv-img--img09 {
				top: 202px;
                right: 196px;
                width: 43px;
				&:after {
                    background-image: url(../images/heroKv_img09_shadow.svg);
					bottom: 0;
                    left: 0;
				}
			}
			&.hero__kv-img--img10 {
				top: 545px;
                right: 863px;
                width: 16px;
				&:after {
                    background-image: url(../images/heroKv_img10_shadow.svg);
					width: 100%;
                    bottom: 10%;
                    left: 0px;
				}
			}
			&.hero__kv-img--img11 {
				top: 66px;
                right: 314px;
                width: 102px;
				&:after {
                    background-image: url(../images/heroKv_img11_shadow.svg);
					width: 111%;
                    bottom: -25%;
                    left: 4%;
				}
			}
			&.hero__kv-img--img12 {
				top: 302px;
                right: 94px;
                width: 57px;
				&:after {
                    background-image: url(../images/heroKv_img12_shadow.svg);
					width: 150%;
                    bottom: -40%;
                    left: 12%;
				}
			}
			&.hero__kv-img--img13 {
				top: 475px;
                right: 782px;
                width: 89px;
				&:after {
                    background-image: url(../images/heroKv_img13_shadow.svg);
					width: 130%;
                    height: 130%;
                    bottom: -24%;
                    left: 0%;
				}
			}
			&.hero__kv-img--img14 {
				top: 577px;
                right: 782px;
                width: 88px;
				&:after {
                    background-image: url(../images/heroKv_img14_shadow.svg);
					width: 121%;
					height: 120%;
                    bottom: -30%;
                    left: 5%;
				}
			}
			&.hero__kv-img--img15 {
				top: 577px;
                right: 607px;
                width: 88px;
				&:after {
                    background-image: url(../images/heroKv_img15_shadow.svg);
					width: 134%;
                    height: 130%;
                    bottom: -20%;
                    left: -5%;
				}
			}
			&.hero__kv-img--img16 {
				top: 289px;
                right: 230px;
                width: 134px;
				&:after {
                    background-image: url(../images/heroKv_img16_shadow.svg);
                    width: 170%;
                    height: 160%;
                    bottom: -20%;
                    left: -21%;
				}
			}
			&.hero__kv-img--img17 {
				top: 269px;
                right: 925px;
                width: 93px;
				&:after {
                    background-image: url(../images/heroKv_img17_shadow.svg);
					width: 110%;
                    bottom: -26%;
                    left: 25%;
				}
			}
			&.hero__kv-img--img18 {
				top: 628px;
                right: 706px;
                width: 65px;
				&:after {
                    background-image: url(../images/heroKv_img18_shadow.svg);
					width: 110%;
                    bottom: -40%;
                    left: -8%;
				}
			}
			&.hero__kv-img--img19 {
				top: 554px;
                right: 325px;
                width: 143px;
				&:after {
                    background-image: url(../images/heroKv_img19_shadow.svg);
					width: 80%;
                    bottom: -10%;
                    left: 50%;
				}
			}
			&.hero__kv-img--img20 {
				top: 148px;
                right: 250px;
                width: 19px;
				&:after {
                    background-image: url(../images/heroKv_img20_shadow.svg);
					width: 220%;
                    height: 170%;
                    bottom: -80%;
                    left: -60%;
				}
			}
			&.hero__kv-img--img21 {
				top: 648px;
                right: 419px;
                width: 96px;
				&:after {
                    background-image: url(../images/heroKv_img21_shadow.svg);
					width: 140%;
                    bottom: -25%;
                    left: -2%;
				}
			}
			&.hero__kv-img--img22 {
				top: 562px;
                right: 502px;
                width: 43px;
			}
			&.hero__kv-img--img23 {
				top: 495px;
                right: 917px;
                width: 32px;
				&:after {
                    background-image: url(../images/heroKv_img23_shadow.svg);
					width: 140%;
                    left: 0px;
                    bottom: -30%;
				}
			}
			&.hero__kv-img--img24 {
				top: 512px;
                right: 344px;
                width: 61px;
				&:after {
                    background-image: url(../images/heroKv_img24_shadow.svg);
					width: 170%;
                    height: 170%;
                    bottom: -70%;
                    left: -45%;
				}
			}
			&.hero__kv-img--img25 {
				top: 172px;
                right: 350px;
                width: 43px;
				&:after {
                    background-image: url(../images/heroKv_img25_shadow.svg);
					bottom: 0px;
                    left: 0px;
				}
			}
			&.hero__kv-img--img26 {
				top: 375px;
                right: 823px;
                width: 110px;
				&:after {
                    background-image: url(../images/heroKv_img26_shadow.svg);
					width: 120%;
                    bottom: -4%;
                    left: 0;
				}
			}
			&.hero__kv-img--img27 {
				top: 424px;
                right: 753px;
                width: 72px;
				&:after {
                    background-image: url(../images/heroKv_img27_shadow.svg);
					width: 110%;
                    height: 150%;
                    bottom: -40%;
                    left: -6%;
				}
			}
			&.hero__kv-img--img28 {
				top: 350px;
                right: 180px;
                width: 33px;
			}
			&.hero__kv-img--img29 {
				top: 544px;
                right: 723px;
                width: 43px;
			}
			&.hero__kv-img--img30 {
				top: 444px;
                right: 262px;
                width: 18px;
			}
			&.hero__kv-img--img31 {
				top: 570px;
                right: 272px;
                width: 18px;
				&:after {
                    background-image: url(../images/heroKv_img31_shadow.svg);
					width: 290%;
                    height: 210%;
                    bottom: -90%;
                    left: -70%;
				}
			}
			&.hero__kv-img--img32 {
				top: 71px;
                right: 454px;
                width: 18px;
				&:after {
                    background-image: url(../images/heroKv_img32_shadow.svg);
					width: 240%;
                    height: 190%;
                    bottom: -110%;
                    left: -40%;
				}
			}
			&.hero__kv-img--img33 {
				top: 217px;
                right: 620px;
                width: 18px;
				&:after {
                    background-image: url(../images/heroKv_img33_shadow.svg);
					width: 270%;
                    height: 180%;
                    bottom: -90%;
                    left: -90%;
				}
			}
			&.hero__kv-img--img34 {
				top: 541px;
                right: 576px;
                width: 19px;
			}
			&.hero__kv-img--img35 {
				top: 665px;
                right: 629px;
                width: 18px;
			}
			&.hero__kv-img--img36 {
				top: 262px;
                right: 760px;
                width: 18px;
			}
			&.hero__kv-img--img37 {
				top: 336px;
                right: 883px;
                width: 18px;
				&:after {
                    background-image: url(../images/heroKv_img37_shadow.svg);
					width: 200%;
                    height: 170%;
                    bottom: -95%;
                    left: 0%;
				}
			}
			&.hero__kv-img--text01 {
				top: 626px;
                right: 473px;
                width: 124px;
			}
			&.hero__kv-img--text02 {
				top: 327px;
                right: 749px;
                width: 99px;
			}
			&.hero__kv-img--text03 {
				top: 251px;
                right: 133px;
                width: 94px;
			}
			&.hero__kv-img--text04 {
				top: 97px;
                right: 662px;
                width: 88px;
			}
			&.hero__kv-img--text05 {
				top: 451px;
                right: 221px;
                width: 158px;
			}
		}
	}
}


/* strategiccreative *********************/
.strategiccreative {
	margin-bottom: 40px;
	.strategiccreative__inner {
		display: flex;
		justify-content: center;
		padding: 0 20px;
		.strategiccreative__text-content {
			max-width: 400px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-right: 60px;
			.strategiccreative__catch {
				color: #0041C3;
				font-size: 4rem;
			}
			.strategiccreative__sub-text {
				color: #0041C3;
				font-size: 2.4rem;
				font-weight: bold;
				margin-bottom: 3.2rem;
			}
			.strategiccreative__main-text {
				font-size: 1.6rem;
			}
		}
	}
}


/* problems *********************/
.problems {
    background: #F5F6FE;
    text-align: center;
    padding-top: 61px;
    background-image: url(../images/section2-bg_star.png);
    background-repeat: no-repeat;
    background-position: center bottom 60px;
	margin-bottom: 80px;
	.problems__inner {
		max-width: 940px;
		margin: 0 auto;
		position: relative;
		padding: 0 20px;
		.problems__header {
			.problems__catch {
				color: #0041C3;
				font-size: 4rem;
			}
			.problems__sub-text {
				color: #0041C3;
				font-size: 2.4rem;
				font-weight: bold;
				margin-bottom: 3.2rem;
			}

		}
		.problems__main-image {
			img {
				margin-left: 150px;
				vertical-align: bottom;
			}
		}
		.problems__balloon {
			background: #fff;
            position: absolute;
            border-radius: 100%;
            color: #0041C3;
            font-size: 2rem;
            font-weight: bold;
            width: 160px;
            height: 160px;
            display: flex;
            justify-content: center;
            align-items: center;
			line-height: 1.4;
			&.problems__balloon--text01 {
                top: 410px;
                left: 130px;
			}
			&.problems__balloon--text02 {
                top: 250px;
                left: 0px;
			}
			&.problems__balloon--text03 {
				top: 120px;
                left: 190px;
			}
			&.problems__balloon--text04 {
                top: 140px;
                left: 570px;
			}
			&.problems__balloon--text05 {
                top: 250px;
                left: 780px;
			}
		}
	}
}



/* solutions *********************/
.solutions {
	margin-bottom: 80px;
	.solutions__inner {
		max-width: 940px;
		margin: 0 auto;
		padding: 0 20px;
		.solutions__header {
			text-align: center;
			margin-bottom: 80px;
			.solutions__catch {
				color: #0041C3;
				font-size: 4rem;
			}
			.solutions__sub-text {
				color: #0041C3;
				font-size: 2.4rem;
				font-weight: bold;
				margin-bottom: 3.2rem;
			}
			.solutions__main-text {
				font-size: 1.6rem;
			}
		}
		.solutions__contents {
			display: flex;
            flex-direction: row;
            flex-wrap: wrap;
			.solutions__item {
				display: flex;
				margin-bottom: 70px;
				.solutions__item-text {
					margin-right: 10px;
					.solutions__item-title {
						font-size: 2.4rem;
						color: #0041C3;
						font-weight: bold;
						margin-bottom: 1rem;
					}
					.solutions__item-list {
						font-size: 1.4rem;
						line-height: 2;
					}
				}
				.solutions__item-image-wrapper {
					display: flex;
                    justify-content: center;
                    align-content: center;
                    flex-wrap: wrap;
					img {
						width: 100%;
						height: auto;
						max-width: fit-content;
					}
				}
				&.solutions__item--web-production { width: 50%; }
				&.solutions__item--marketing-support { width: 50%; }
				&.solutions__item--offline-production { width: 50%; }
				&.solutions__item--system-development { width: 50%; }
				&.solutions__item--integrated {
					width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-content: center;
                    text-align: center;
					.solutions__item-text {
						margin: 0 0 30px;
					}
				}

			}
		}
	}
}


/* contact-area *********************/
.contact-area {
	max-width: 1280px;
	background: #387CFE;
	margin: 0 auto 170px;
	.contact-area__inner {
        display: flex;
        align-items: center;
        justify-content: center;
		.contact-area__img-box {
			height: 240px;
			position: relative;
			margin-right: 84px;
			img {
				position: relative;
				left: 0;
				top: 50%;
				transform: translate(0, -50%);
			}
			&.contact-area__img-box--reverse {
				margin-right: 0;
				margin-left: 84px;
			}
		}
		.contact-area__btn-box {
			.contact-area__btn-text {
				font-size: 1.4rem;
				color: #fff;
				text-align: center;
				margin-bottom: 2rem;
			}
		}
		.contact-area__btn {
			position: relative;
			background: #fff;
			font-size: 2.4rem;
			font-weight: bold;
			color: #0041C3;
			padding: 1.9rem 12.7rem;
			display: block;
            line-height: 1;
			text-align: center;
			&:before {
				content: url(../images/mail-icon.svg);
				position: absolute;
				left: 6%;
				top: 52%;
				transform: translate(0px, -50%);
			}
			&:after {
				content: "";
				position: absolute;
				width: 11px;
				height: 11px;
				border-right: 2px solid #0041C3;
				border-bottom: 2px solid #0041C3;
				right: 7%;
				top: 41%;
				transform: rotate(-45deg);
			}
			&:hover {
				background: #0041C3;
				color: #fff;
				outline: 2px solid #fff;
				text-decoration: none;
				&:before {
					content: url(../images/mail-icon-white.svg);
				}
				&:after {
					border-right: 1px solid #fff;
					border-bottom: 1px solid #fff;
				}
			}
		}

	}

}



/* strengths *********************/
.strengths {
	background: #F5F6FE;
	margin-bottom: 110px;
	.strengths__inner {
		max-width: 940px;
		margin: 0 auto;
		padding: 80px 20px;
		.strengths__header {
			text-align: center;
			margin-bottom: 40px;
			.strengths__catch {
				color: #0041C3;
				font-size: 4rem;
			}
			.strengths__sub-text {
				color: #0041C3;
				font-size: 2.4rem;
				font-weight: bold;
				margin-bottom: 3.2rem;
			}
			.strengths__main-text {
				font-size: 2.4rem;
				font-weight: bold;
				color: #414141;
			}
		}
		.strengths__item{
			background: #fff;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			align-items: center;
			margin: 0 0 40px;
			box-shadow: 0px 0px 8px #00000029;
			&:nth-child(even) {
				flex-direction: row-reverse;
			}
			.strengths__item-image-wrapper {
				max-width: 453px;
				.strengths__item-image {
					vertical-align: bottom;
				}
			}
			.strengths__item-text-content {
				max-width: 390px;
				margin: 0 45px;
				padding: 15px 0;
				.strengths__item-title {
					font-size: 2rem;
					color: #0041C3;
					font-weight: bold;
					margin-bottom: 0.5rem;
				}
				.strengths__item-text {
					font-size: 1.6rem;
					line-height: 1.7;
					margin-bottom: 2rem;
				}
				.strengths__item-keywords {
					display: flex;
					flex-wrap: wrap;
					button {
						text-decoration: none;
						background: #fff;
						outline: 1px solid #387CFE;
						border-radius: 100px;
						padding: 0.3rem 1.2rem;
						margin: 0 1.2rem 1.8rem 0;
						font-size: 1.4rem;
						color: #387CFE;
						font-weight: bold;
						border: none;
                        cursor: pointer;
						&:hover {
							background: #387CFE;
							color: #fff;
						}
					}
				}
			}
		}
		.popup-wrapper {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.8);
			z-index: 10000;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s ease, visibility 0s 0.3s;
			display: flex;
			justify-content: center;
			align-items: center;
			&.active {
				opacity: 1;
				visibility: visible;
				transition: opacity 0.3s ease, visibility 0s 0s;
			}
			.popup-item {
				background-color: white;
				padding: 72px 150px 100px;
				max-width: 80%;
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
				display: none;
				position: relative;
				.popup-item__close {
					content: "";
					display: block;
					width: 64px;
					height: 64px;
					border-radius: 50%;
					background: #387CFE;
					position: absolute;
					top: 0;
					right: 0;
					cursor: pointer;
					transform: translate(50%, -50%);
					&:before{
						content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        width: 32px;
                        height: 2px;
                        background-color: #fff;
                        transform: translate(-50%, -50%) rotate(45deg);
					}
					&:after {
						content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        width: 32px;
                        height: 2px;
                        background-color: #fff;
                        transform: translate(-50%, -50%) rotate(-45deg);
					}
				}
				.popup-item__title {
					font-size: 3.2rem;
					color: #0041C3;
					font-weight: bold;
					line-height: 1.2;
					margin-bottom: 5rem;
				}

				.popup-item__content {
					font-size: 1.6rem;
					display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
					.popup-item__content-left {
						max-width: 41rem;
						height: -webkit-fill-available;
						margin-right: 6rem;
						display: flex;
						flex-direction: row;
						align-content: space-between;
						flex-wrap: wrap;
						.popup-item__content-link {
							background: #387CFE;
							width: 100%;
							text-align: center;
							border-radius: 100px;
							color: #fff;
							font-size: 1.6rem;
							border: 2px solid #387CFE;
							padding: 1.6rem;
							line-height: 1;
							margin-top: 2rem;
							font-weight: bold;
							&:hover {
								background: #fff;
								color: #387CFE;
								border: 2px solid #387CFE;
								&:after {
									filter: invert(39%) sepia(93%) saturate(3000%) hue-rotate(200deg) brightness(95%) contrast(90%);
								}
							}
						}
					}
					.popup-item__under-text{font-size: 1.4rem;}
					img {
						max-width: 480px;
						width: 45%;
					}

				}
			}
		}
	}
}




/* production-flow *********************/
.production-flow {
	margin-bottom: 120px;
	.production-flow__inner {
		max-width: 940px;
		margin: 0 auto;
		padding: 0 20px;
		position: relative;
		.production-flow__header {
			text-align: center;
			margin-bottom: 40px;
			.production-flow__catch {
				color: #0041C3;
				font-size: 4rem;
			}
			.production-flow__sub-text {
				color: #0041C3;
				font-size: 2.4rem;
				font-weight: bold;
				margin-bottom: 3.2rem;
			}
			.production-flow__main-text {
				font-size: 1.6rem;
			}
		}
		.production-flow__contents {
			.production-flow__contents-title {
                font-size: 2.4rem;
                font-weight: bold;
                text-align: center;
				margin-bottom: 4rem;
			}
			.production-flow__scroll-container {
				position: relative; /* 子要素である矢印ボタンの基準にする */
				.production-flow__tab-list {
					border: 2px solid #0041C3;
					border-radius: 8px;
					box-shadow: 4px 4px 8px #C1CBE6;
					display: flex;
					justify-content: flex-start;
					margin: 0 0 40px !important;
					display: flex;
					overflow-x: auto; /* 横スクロール可能 */
					white-space: nowrap;
					position: relative;
					scroll-behavior: smooth; /* スクロールを滑らかに */
					-ms-overflow-style: none;
					scrollbar-width: none;
					min-height: 41px;
					.production-flow__arrow {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						z-index: 10;
					}
					/* スクロールバー非表示*/
					&::-webkit-scrollbar {
						display: none;
					}
					.production-flow__tab-item {
						font-size: 1.6rem;
						font-weight: bold;
						color: #0041C3;
						border-right: 2px solid;
						padding: 9px 63px;
						cursor: pointer;
						line-height: 1.2;
						list-style: none;
						transition: all 0.3s ease;
						flex-shrink: 0;
						&:hover {
							text-decoration: none;
							background: #0041C3;
							color:#fff;
						}
						&.active {
							background: #0041C3;
							color:#fff;
							text-decoration: none;
							cursor: default;
							border-radius: 0;
						}
						&:last-child {
							border: none;
							position: relative;
							/* &:after {
								content: "";
								display: block;
								width: 1rem;
								height: 1rem;
								border-right: 0.1em solid #0041c3;
								border-bottom: 0.1em solid #0041c3;
								position: absolute;
								top: 50%;
								left: 40%;
								transform: translate(-50%, -50%) rotate(-45deg);
							} */
						}
					}
				}
				.production-flow__arrow-wrapper {
					.production-flow__arrow {
						position: absolute;
						top: 0;
						z-index: 10;
						border: none;
						color: #fff;
						cursor: pointer;
						width: 60px;
						background: #fff;
						border: 2px solid #0041c3;
						border-radius: 8px;
						height: 100%;
						&::before {
							content: "";
							position: absolute;
							width: 9px;
							height: 9px;
							border-right: 2px solid #0041c3;
							border-bottom: 2px solid #0041c3;
							left: 36%;
							top: 37%;
							transform: rotate(-45deg);
						}
						&:hover {
							background: #0041c3;
							&::before {
								border-color: #fff;
							}
						}
						&.production-flow__arrow--left {
							left: 0;
							border-radius: 8px 0 0 8px;
							&::before {
								transform: rotate(135deg);
								left: 46%;
							}
						}

						&.production-flow__arrow--right {
						right: 0px;
						border-radius: 0 8px 8px 0;
						}
					}
				}
			}
			.production-flow__steps {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-between;
				margin-bottom: 30px;
				.production-flow__step-box {
					border-radius: 0px 0px 30px 0;
					width: 300px;
					background: #fff;
					display: flex;
					flex-direction: column;
					.production-flow__step-number {
						position: relative;
						background: #333;
						color: #fff;
						text-align: center;
						font-size: 1.7rem;
						font-weight: bold;
						span {
							font-size: 2.6rem;
							margin-left: 0.5rem;
						}
						&::before {
							content: "";
							display: block;
							position: absolute;
							clip-path: polygon(0 0, 100% 50%, 0 100%);
							background: #fff;
							width: 20px;
							height: 100%;
							z-index: 5;
						}
					}

					.production-flow__step-box-inner {
						border-radius: 0px 0px 30px 0;
						box-shadow: 4px 4px 8px #C1CBE6;
						height: 100%;
						margin-left: -20px;
						padding: 10px 30px 50px 50px;
						.production-flow__step-image-wrapper {
							text-align: center;
							min-height: 140px;
							display: flex;
							justify-content: center;
							align-items: center;
						}
						.production-flow__step-title {
							font-size: 1.8rem;
							font-weight: bold;
							line-height: 1.3;
							text-align: center;
							min-height: 6rem;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-bottom: 1rem;
						}
						.production-flow__step-text {
							font-size: 1.6rem;
							line-height: 1.4;
						}
					}
					&.production-flow__step-box--1{
						z-index: 5;
						.production-flow__step-number {
							background: #85D006;
						}
						.production-flow__step-box-inner {
							margin-left: 0px;
							padding-left: 30px;
						}
					}
					&.production-flow__step-box--2{
						z-index: 4;
						.production-flow__step-number {
							background: #05D58E;
							&::before {
								background: #85D006;
							}
						}
					}
					&.production-flow__step-box--3{
						z-index: 3;
						.production-flow__step-number {
							background: #41D3E2;
							&::before {
								background: #05D58E;
							}
						}					}
					&.production-flow__step-box--4{
						z-index: 2;
						.production-flow__step-number {
							background: #41A7E0;
							&::before {
								background: #41D3E2;
							}
						}
					}
					&.production-flow__step-box--5{
						z-index: 1;
						.production-flow__step-number {
							background: #387cfe;
							&::before {
								background: #41A7E0;
							}
						}
					}
				}
			}
			.production-flow__under-text {
				font-size: 1.4rem;
				text-align: center;
			}
		}

	}
}


/* works *********************/
.works {
	margin-bottom: 120px;
	.works__inner {
        max-width: 940px;
        margin: 0 auto;
		padding: 0 20px;
		.works__header {
			text-align: center;
			.works__catch {
				color: #0041C3;
				font-size: 4rem;
			}
			.works__sub-text {
				color: #0041C3;
				font-size: 2rem;
				font-weight: bold;
				margin-bottom: 3rem;
			}
		}
		.works__contents {
			.works__contents-inner {
				.works__tag-filter {
					display: flex;
					justify-content: center;
					gap: 10px;
					margin-bottom: 56px;
					.works__tag-button {
						padding: 0.4rem 2.6rem;
						border: 1px solid #387CFE;
						border-radius: 20px;
						background-color: #fff;
						cursor: pointer;
						transition: background-color 0.3s, border-color 0.3s;
						font-size: 1.2rem;
						text-decoration: none;
						color: #387CFE;
						font-weight: bold;
						&:hover {
							background-color: #e9e9e9;
						}
						&.active {
							background-color: #387CFE;
							color: #fff;
							border-color: #387CFE;
						}
					}
				}
				.works__tag-content {
					display: flex;
					flex-direction: row;
					gap: 60px;
					flex-wrap: wrap;
					justify-content: space-between;
					margin-bottom: 80px;
					.works__tag-item {
						max-width: calc((100% - 60px) / 2);
						&.hidden {
							display: none;
						}
						.works__tag-item-image-wrapper {
							margin-bottom: 10px;
						}
						.works__tag-item-title {
							color:#0041C3;
							font-size: 1.6rem;
							font-weight: bold;
							line-height: 1.4;
							margin-bottom: 1rem;
						}
						.works__tag-item-text {
							font-size: 1.4rem;
							line-height: 1.8;
						}
						.works__tag-item-tags {
							margin-top: 1rem;
							.works__tag-item-tag {
								display: inline-block;
								margin-right: 1.8rem;
								color: #387DFE;
								font-size: 1.4rem;
								font-weight: bold;
							}
						}
					}
					/* Vue.js フェイド部 */
					.fade-enter-active, .fade-leave-active {
					transition: opacity 0.5s ease;
					}
					.fade-enter {
					opacity: 0;
					}
					.fade-leave-to {
					opacity: 0;
					}

				}
				/* 「もっと見る」ボタンのスタイル */
				.works__more-button {
					display: block;
					margin: 0 auto;
					padding: 1.6rem 21rem;
					background-color: #0041C3;
					color: #fff;
					border: none;
					border-radius: 100px;
					font-size: 2rem;
					cursor: pointer;
					font-weight: bold;
					position: relative;
					transition: background-color 0.3s;
					.works__more-button:hover {
						background-color: #0056b3;
					}
					&::after {
						content: "";
						position: absolute;
						width: 9px;
						height: 9px;
						border-right: 1px solid #fff;
						border-bottom: 1px solid #fff;
						right: 7%;
						top: 37%;
						transform: rotate(45deg);
					}
					&:hover {
						background-color: #fff;
						color: #0041C3;
						outline: 2px solid #0041C3;
						&::after {
							border-right: 1px solid #0041C3;
							border-bottom: 1px solid #0041C3;
						}
					}
				}
			}
		}
	}
}

/* totop *********************/
.totop-btn {
	margin-bottom: 52px;
	.totop-btn__inner {
		max-width: 1060px;
		margin: 0 auto;
		text-align: right;
		padding: 0 20px;
		.totop-btn__link {
			display: inline-block;
            font-size: 20px;
            font-weight: bold;
            color: #387CFE;
			text-align: center;
			.totop-btn__circle {
				width: 57px;
				height: 57px;
				border-radius: 100%;
				background: #F1F7FF;
				display: block;
				border: 2px solid #387CFE;
				position: relative;
				&::after {
					content: "";
					width: 14px;
					height: 14px;
					border-top: 2px solid;
					border-right: 2px solid;
					display: block;
					transform: translate(-50%, -50%) rotate(-45deg);
					left: 50%;
					top: 55%;
					position: absolute;
				}
			}
			&:hover {
				.totop-btn__circle {
					background: #387CFE;
					&::after {
						content: "";
						border-color: #fff;
					}
				}
			}
		}
	}

}


/* footer *********************/
footer {
	background: #0041C3;
	.footer__inner {
		max-width: 1920px;
		margin: 0 auto;
		padding: 28px 80px 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		.footer__logo {
			img {

			}
		}
		.footer__nav {
			.footer__list {
				display: flex;
				.footer__item {
					color: #fff;
					font-size: 1.4rem;
					margin-right: 2.4rem;
					.footer__link {
						color: #fff;
						&:hover {
							text-decoration: underline;
						}
					}
				}
			}
		}
	}
}



/* contactForm *********************/
.contactForm {
	margin-bottom: 143px;
	padding-top: 140px;
	.contactFormInner {
		max-width: 940px;
		margin: 0 auto;
		.contactFormInnerTop {
			margin: 0 0 112px;
			position: relative;
			&:after {
				content: url(../images/ctabtn-img4_sp.png);
				position: absolute;
				right: -110px;
				bottom: -80px;
				z-index: 0;
				opacity: 0.1;
				zoom: .9;
			}
			h1 {
				font-size: 5.6rem;
				text-align: center;
				margin-bottom: 2rem;
				font-weight: 400;
				line-height: 1;
			}
			.subtitle {
				text-align: center;
				margin-bottom: 4.5rem;
				color: #555;
				font-size: 2rem;
				font-weight: bold;
			}

			/* ステップ */
			.contactFormStep {
				display: flex;
				justify-content: space-between;
                align-items: center;
                width: 52%;
                margin: 0 auto;
				position: relative;
				.contactFormStepBox {
					display: flex;
					flex-direction: column;
					align-items: center;
					.circle {
						width: 36px;
						height: 36px;
						border-radius: 50%;
						border: 2px solid #0041C3;
						background: #fff;
						position: relative;
					}
					&:first-child::after {
						content: "入力";
						position: absolute;
                        bottom: -3rem;
                        font-size: 1.6rem;
                        font-weight: bold;
                        color: #3F3F3F;
					}
					&:nth-child(2)::after {
						content: "確認";
						position: absolute;
						bottom: -3rem;
                        font-size: 1.6rem;
                        font-weight: bold;
                        color: #3F3F3F;
					}
					&:last-child::after {
						content: "完了";
						position: absolute;
						bottom: -3rem;
                        font-size: 1.6rem;
                        font-weight: bold;
                        color: #3F3F3F;
					}
				}
				&:before {
					content: "";
					position: absolute;
					width: 100%;
					height: 2px;
					background: #0041C3;
					z-index: 0;
				}
			}
		}
		#errorBox {
			background: #FFE0E0;
			margin-bottom: 40px;
			padding: 2.4em 3em;
			color: #FF0000;
			font-size: 1.6rem;
			.errorBoxText {
			}
			.errorBoxlist {
				padding-left: 1.6em;
				line-height: 1.6;
				li {
					list-style: disc;
				}
			}
		}
		.contactFormInnerForm {
			/* フォーム */
			.contactFormInnerFormInner {
				border-top: 1px solid #ccc;
				.contactFormInnerFormRow {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					border-bottom: 1px solid #D7D7D7;
					padding: 20px 0;
					justify-content: space-between;
					label {
						font-size: 1.6rem;
						color: #202020;
						width: 30%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 16px 0 0;
						&:has(+ input:user-invalid) {
							.req {
								color: #f00;
								border-color: red;
							}
						}
					}
					input,
					textarea {
						padding: 10px;
						border: 1px solid #ccc;
						&:user-invalid {
							background: #FFE0E0;
                            border-color: #FF0000;
						}
					}
					> input {
						width: 70%;
					}
					textarea {
						min-height: 120px;
						width: 100%;
					}
					.req {
						display: inline-block;
                        border: 1px solid #387DFE;
                        color: #387DFE;
                        padding: 0.1rem 0.5rem;
                        font-size: 1.1rem;
					}
					.opt {
						display: inline-block;
						border: 1px solid #202020;
						color: #202020;
						padding: 0.1rem 0.5rem;
                        font-size: 1.1rem;
					}
					.checkbox-group,
					.radio-group {
						display: flex;
						flex-wrap: wrap;
						gap: 15px;
						width: 70%;
					}
					/* ラベル全体のスタイル */
					.checkbox-group {
						display: inline-flex;
						align-items: center;
						cursor: pointer;
						font-size: 16px;
						gap: 8px;
						input[type="checkbox"] {
							display: none;
						}
						.checkmark {
							width: 20px;
							height: 20px;
							border: 1px solid #333; /* 黒枠 */
							display: inline-block;
							position: relative;
							margin-right: 0.5em;
						}
						input[type="checkbox"]:checked + .checkmark::after {
							content: "";
							position: absolute;
							left: 9px;
							top: -6px;
							width: 6px;
							height: 15px;
							border: solid #333;
							border-width: 0 4px 4px 0;
							transform: rotate(45deg);
							filter: drop-shadow(-2px -3px 0px #fff);
							box-shadow: 2px 2px 0 #fff;
						}
					}
					&.formName {
						.kanjiForm {
							width: 25%;
						}
						.furigana {
							width: 15%;
							margin-left: 5%;
						}
						.furiganaForm {
							width: 25%;
						}
					}
					&.formInquiry {
						> label {
							flex-direction: column;
							align-items: flex-start;
						}
						.checkbox-group {
							display: flex;
							gap: 1.2%;
							label {
								width: 24%;
								padding: 0;
								gap: 0;
								display: flex;
								justify-content: flex-start;
								cursor: pointer;
								line-height: 1.2;
								margin-bottom: 10px;
								input {
									padding: 0;
									margin: 0 0.7em 0 0;
								}
							}
						}
						#formInquiryOtherText {
							width: 70%;
							margin: 2em 0 0 auto;
							label {
								white-space: nowrap;
							}
							.formInquiryOtherTextReq {
								color:red;
								margin-left: 1.5em;
							}
						}
					}
					&.formContent {
						.formContentBox {
							width: 70%;
							.note {
								font-size: 1.2rem;
							}
						}

					}
					&.formKnow {
						border-bottom: 1px solid #D7D7D7;
						/* ラジオボタングループ全体 */
						.radio-group {
							gap: 0;
							.checkmark {
								width: 20px;
								height: 20px;
								border: 1px solid #333;
								border-radius: 50%;
								box-sizing: border-box;
								transition: border-color 0.2s ease;
								position: absolute;
								left: 5%;
								top: 50%;
								transform: translate(-50%, -50%);
							}
							input[type="radio"]:checked + .checkmark::after {
								content: "";
								position: absolute;
								left: 50%;
								top: 50%;
								width: 11px;
								height: 10px;
								background-color: #1F1F1F;
								border-radius: 50%;
								transform: translate(-50%, -50%);
							}
							label {
								position: relative;
								padding-left: 30px;
								display: flex;
								justify-content: flex-start;
								width: auto;
								cursor: pointer;
								white-space: nowrap;
								&:nth-child(3n + 1) {
									width: 28%;
								}
								&:nth-child(3n + 2) {
									width: 40%;
								}
								&:nth-child(3n + 3) {
									width: 30%;
								}
							}
							input[type="radio"] {
								display: none;
							}
							input[type="radio"]:checked {
								display: none;
							}
						}
						#formKnowotherText {
							width: 70%;
							margin: 2em 0 0 auto;
							label {
								white-space: nowrap;
							}
							.formKnowOtherTextReq {
								color:red;
								margin-left: 1.5em;
							}
						}
					}
					&.formPolicy {
						border: none;
						margin-bottom: 65px;
						label {
							display: block;
							width: 100%;
							text-align: center;
							padding: 0;
							.note {
								font-size: 1.2rem;
								margin-top: 1em;
							}
						}
						a {
							color: #0d47a1;
							text-decoration: underline;
							&:after {
								filter: invert(39%) sepia(93%) saturate(3000%) hue-rotate(200deg) brightness(95%) contrast(90%);
								top: 0.1rem;
								position: relative;
								margin: 0 0 0 0.5rem;
							}
						}
						/* ラベル全体のスタイル */
						.checkbox-group {
							display: inline-flex;
							align-items: center;
							cursor: pointer;
							display: inline;
							position: relative;
							top: 0.2em;
							input[type="checkbox"] {
								display: none;
							}
							.checkmark {
								width: 20px;
								height: 20px;
								border: 1px solid #333; /* 黒枠 */
								display: inline-block;
								position: relative;
								margin-right: 0.5em;
							}
							input[type="checkbox"]:checked + .checkmark::after {
								content: "";
								position: absolute;
								left: 9px;
								top: -6px;
								width: 6px;
								height: 15px;
								border: solid #333;
								border-width: 0 4px 4px 0;
								transform: rotate(45deg);
								filter: drop-shadow(-2px -3px 0px #fff);
								box-shadow: 2px 2px 0 #fff;
							}
						}

					}
				}
				.contactFormInnerFormSubmit {
					text-align: center;
					gap: 30px;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					button {
						display: block;
						margin: 0 auto;
						padding: 2rem 14rem;
						background: #0041C3;
						color: #fff;
						border: none;
						font-size: 2.4rem;
						cursor: pointer;
						font-weight: bold;
						position: relative;
						transition: background-color 0.3s;
						outline: 2px solid #0041C3;
						&::after {
							content: "";
                            position: absolute;
                            width: 10px;
                            height: 10px;
                            border-right: 1px solid #fff;
                            border-bottom: 1px solid #fff;
                            right: 7%;
                            top: 40%;
                            transform: rotate(-45deg);
						}
						&:hover {
							background: #fff;
							color: #0041C3;
							&::after {
								border-right: 1px solid #0041C3;
								border-bottom: 1px solid #0041C3;
							}
						}
						&.contactFormInnerFormSubmitEdit {
							background: #7A8498;
							outline: 2px solid #7A8498;
							&::after {
								left: 7%;
								transform: rotate(135deg);
							}
							&:hover {
								background: #fff;
								color: #7A8498;
								&::after {
									border-right: 1px solid #7A8498;
									border-bottom: 1px solid #7A8498;
								}
							}
						}
					}
				}
			}
		}
	}
}



/* contactForm 入力・確認・完了の切り替え *********************/
/* 入力 */
#contactFormInput {
	.contactFormStepBox:nth-child(1) {
		.circle {
			background: #0041C3;
			width: 56px;
			height: 56px;
		}
	}
}
/* 確認 */
#contactFormConfirm {
	.contactFormStepBox:nth-child(2) {
		.circle {
			background: #0041C3;
			width: 56px;
			height: 56px;
		}
	}
	.contactFormInnerFormInner {
		.contactFormInnerFormSubmit {
			button {
				&.contactFormInnerFormSubmitEdit {
					display: block !important;
				}
			}
		}
	}
}
/* 完了 */
#contactFormComplete {
	.contactFormStepBox:nth-child(3) {
		.circle {
			background: #0041C3;
			width: 56px;
			height: 56px;
		}
	}
	.contactFormInnerFormInner {
		border: none;
		text-align: center;
		.contactFormInnerFormInnerTitle {
			font-size: 3rem;
			font-weight: normal;
			margin-bottom: 7.5rem;
		}
		.contactFormInnerFormInnerTextbox {
			margin-bottom: 10rem;
		}
		.contactFormInnerFormInnerText {
			font-size: 1.6rem;
			margin-bottom: 2rem;
		}
		.contactFormInnerFormInnerBtn {
			.contactFormInnerFormInnerBtnLink {
				display: block;
				margin: 0 auto;
				padding: 1.6rem 21rem;
				background-color: #0041C3;
				color: #fff;
				border: none;
				font-size: 2rem;
				cursor: pointer;
				font-weight: bold;
				position: relative;
				transition: background-color 0.3s;
				max-width: 440px;
				padding: 1.6rem 10rem;
				outline: 2px solid #0041C3;
				&::after {
					content: "";
					position: absolute;
					width: 9px;
					height: 9px;
					border-right: 1px solid #fff;
					border-bottom: 1px solid #fff;
					right: 7%;
					top: 43%;
					transform: rotate(-45deg);
				}
				&:hover {
					background-color: #fff;
					color: #0041C3;
					&::after {
						border-right: 1px solid #0041C3;
						border-bottom: 1px solid #0041C3;
					}
				}
			}
		}
	}
}















/*------------------------------------------------------------
 RESPONSIVE 設定
------------------------------------------------------------*/
@media (max-width: 1600px) {
	.header__wrap {
		.header__nav-panel {
			.header__nav-list {
				.header__nav-item {
					margin: 0 18px;
				}
			}
		}
	}
	.hero {
		.hero__text {
			left: 90px;
		}
	}


	.strengths {
		.strengths__inner {
			.popup-wrapper {
				.popup-item {
					padding: 5vw 5vw 6vw;
				}
			}
		}
	}
}


@media (max-width: 1280px) {
	.header__wrap {
		.header__nav {
			.header__nav-wrap {
				background: #0041c3;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 64px;
				height: 64px;
				border-radius: 5px;
				padding: 0;
				margin-right: 38px;
				z-index: 10000;
				cursor: pointer;
				position: fixed;
				top: 20px;
				right: -20px;
				&.wrap-active {
					position: fixed;
					right: -20px;
					top: 20px;
					transition: 0.3s;
				}
				.header__nav-btn {
					display: block;
					width: 25px;
					height: 2px;
					background: #fff;
					position: relative;
					cursor: pointer;
					transition: 0.3s;
					&:before,
					&:after {
						content: "";
						position: absolute;
						left: 0;
						width: 25px;
						height: 2px;
						background: #fff;
						transition: 0.3s;
					}
					&:before { top: -8px; }
					&:after { top: 8px; }
					&.active {
						background: transparent;
					}
					&.active::before {
						transform: rotate(45deg);
						top: 0;
					}
					&.active::after {
						transform: rotate(-45deg);
						top: 0;
					}
				}
			}
			.header__nav-panel {
				position: fixed;
				top: 0px;
				left: 0;
				right: 0;
				background: #0041c3;
				transform: translateY(-20px);
				opacity: 0;
				visibility: hidden;
				transition: all 0.3s ease;
				z-index: 1000;
				height: 100vh;
				&.open {
					transform: translateY(0);
					opacity: 1;
					visibility: visible;
				}
				.header__nav-list {
					list-style: none;
					margin: 130px 0 0;
					padding: 0;
					display: flex;
					flex-direction: column;
					gap: 0;
					.header__nav-item {
						.header__nav-link {
							color: #fff;
							text-decoration: none;
							font-weight: bold;
							transition: color 0.3s;
							display: block;
							padding: 15px;
							border-bottom: 1px solid #fff;
							text-shadow: none;
							position: relative;
							&:after {
								content: "";
								position: absolute;
								width: 9px;
								height: 9px;
								border-right: 1px solid #fff;
								border-bottom: 1px solid #fff;
								right: 3%;
								top: 43%;
								transform: rotate(45deg);
							}
							&.header__nav-link--contact {
								display: none;
							}
						}
					}
				}
			}
		}
	}

	/* contactForm *********************/
	.contactForm {
		.contactFormInner {
			.contactFormInnerTop {
				&:after {
					position: absolute;
					right: -30px;
				}
			}
		}
	}

	/* hero *********************/
	.hero {
		min-height: 59.5vw;
		background-size: contain;
		.hero__text {
			width: auto;
			padding: 2em 0;
			left: 3vw;
			top: 50%;
			.hero__title {
				font-size: 5.3vw;
				margin-bottom: 3.15vw;
			}
			.hero__comment {
				font-size: 1.9vw;
				line-height: 1.5;
			}
		}
		.hero__kv  {
			height: 98%;
			background-position: right bottom 3.9vw;
			background-size: 65.5vw;
			.hero__kv-img {
				position: absolute;
				img {
					width: 100%;
					height: auto;
				}
				&.hero__kv-img--human01 {
					top: 6.328125vw;
                    right: 29.765625vw;
                    width: 28.046875vw;
				}
				&.hero__kv-img--img01 {
					top: 2.65625vw;
					right: 43.75vw;
					width: 8.046875vw;
				}
				&.hero__kv-img--img02 {
					top: 0.625vw;
					right: 38.28125vw;
					width: 5.078125vw;
				}
				&.hero__kv-img--img03 {
					top: 32.65625vw;
                    right: 10.859375vw;
                    width: 7.03125vw;
				}
				&.hero__kv-img--img04 {
					top: 14.765625vw;
                    right: 22.109375vw;
                    width: 3.203125vw;
				}
				&.hero__kv-img--img05 {
					top: 11.328125vw;
					right: 59.609375vw;
					width: 2.96875vw;
				}
				&.hero__kv-img--img06 {
					top: 32.8125vw;
                    right: 77.8125vw;
                    width: 1.40625vw;
				}
				&.hero__kv-img--img07 {
					top: 14.53125vw;
                    right: 62.65625vw;
                    width: 8.75vw;
				}
				&.hero__kv-img--img08 {
					top: 12.734375vw;
                    right: 53.90625vw;
                    width: 2.578125vw;
				}
				&.hero__kv-img--img09 {
					top: 15.78125vw;
                    right: 15.3125vw;
                    width: 3.359375vw;
				}
				&.hero__kv-img--img10 {
					top: 42.578125vw;
                    right: 67.421875vw;
                    width: 1.25vw;
				}
				&.hero__kv-img--img11 {
					top: 5.15625vw;
                    right: 24.53125vw;
                    width: 7.96875vw;
				}
				&.hero__kv-img--img12 {
					top: 23.59375vw;
                    right: 7.34375vw;
                    width: 4.453125vw;
				}
				&.hero__kv-img--img13 {
					top: 37.109375vw;
                    right: 61.09375vw;
                    width: 6.953125vw;
				}
				&.hero__kv-img--img14 {
					top: 45.078125vw;
                    right: 61.09375vw;
                    width: 6.875vw;
				}
				&.hero__kv-img--img15 {
					top: 45.078125vw;
                    right: 47.421875vw;
                    width: 6.875vw;
				}
				&.hero__kv-img--img16 {
					top: 22.578125vw;
                    right: 17.96875vw;
                    width: 10.46875vw;
				}
				&.hero__kv-img--img17 {
					top: 21.015625vw;
                    right: 72.265625vw;
                    width: 7.265625vw;
				}
				&.hero__kv-img--img18 {
					top: 49.0625vw;
                    right: 55.15625vw;
                    width: 5.078125vw;
				}
				&.hero__kv-img--img19 {
					top: 43.28125vw;
                    right: 25.390625vw;
                    width: 11.171875vw;
				}
				&.hero__kv-img--img20 {
					top: 11.5625vw;
                    right: 19.53125vw;
                    width: 1.484375vw;
				}
				&.hero__kv-img--img21 {
					top: 50.625vw;
                    right: 32.734375vw;
                    width: 7.5vw;
				}
				&.hero__kv-img--img22 {
					top: 43.90625vw;
                    right: 39.21875vw;
                    width: 3.359375vw;
				}
				&.hero__kv-img--img23 {
					top: 38.671875vw;
                    right: 71.640625vw;
                    width: 2.5vw;
				}
				&.hero__kv-img--img24 {
					top: 40vw;
                    right: 26.875vw;
                    width: 4.765625vw;
				}
				&.hero__kv-img--img25 {
					top: 13.4375vw;
                    right: 27.34375vw;
                    width: 3.359375vw;
				}
				&.hero__kv-img--img26 {
					top: 29.296875vw;
                    right: 64.296875vw;
                    width: 8.59375vw;
				}
				&.hero__kv-img--img27 {
					top: 33.125vw;
                    right: 58.828125vw;
                    width: 5.625vw;
				}
				&.hero__kv-img--img28 {
					top: 27.34375vw;
                    right: 14.0625vw;
                    width: 2.578125vw;
				}
				&.hero__kv-img--img29 {
					top: 42.5vw;
                    right: 56.484375vw;
                    width: 3.359375vw;
				}
				&.hero__kv-img--img30 {
					top: 34.6875vw;
                    right: 20.46875vw;
                    width: 1.40625vw;
				}
				&.hero__kv-img--img31 {
					top: 44.53125vw;
                    right: 21.25vw;
                    width: 1.40625vw;
				}
				&.hero__kv-img--img32 {
					top: 5.546875vw;
                    right: 35.46875vw;
                    width: 1.40625vw;
				}
				&.hero__kv-img--img33 {
					top: 16.953125vw;
                    right: 48.4375vw;
                    width: 1.40625vw;
				}
				&.hero__kv-img--img34 {
					top: 42.265625vw;
                    right: 45vw;
                    width: 1.484375vw;
				}
				&.hero__kv-img--img35 {
					top: 51.953125vw;
                    right: 49.140625vw;
                    width: 1.40625vw;
				}
				&.hero__kv-img--img36 {
					top: 20.46875vw;
                    right: 59.375vw;
                    width: 1.40625vw;
				}
				&.hero__kv-img--img37 {
					top: 26.25vw;
                    right: 68.984375vw;
                    width: 1.40625vw;
				}
				&.hero__kv-img--text01 {
					top: 48.90625vw;
                    right: 36.953125vw;
                    width: 9.6875vw;
				}
				&.hero__kv-img--text02 {
					top: 25.546875vw;
                    right: 58.515625vw;
                    width: 7.734375vw;
				}
				&.hero__kv-img--text03 {
					top: 19.609375vw;
                    right: 10.390625vw;
                    width: 7.34375vw;
				}
				&.hero__kv-img--text04 {
					top: 7.578125vw;
                    right: 51.71875vw;
                    width: 6.875vw;
				}
				&.hero__kv-img--text05 {
					top: 35.234375vw;
                    right: 17.265625vw;
                    width: 12.34375vw;
				}
			}
		}
	}

	/* modal *********************/
	.modal-overlay {
		.modal-content {
			max-width: 770px;
			padding: 50px 50px 140px;
		}
	}

	footer {
		& .footer__inner {
			& .footer__nav {
				.footer__list {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-end;
				}
			}
		}
	}

}
/* 上までHeaderのみの調整で問題なさそう */


@media (max-width: 960px) {
	/* contactForm *********************/
	.contactForm {
		padding-top: 15vw;
		.contactFormInner {
			.contactFormInnerTop {
				&:after {
					display: none;
				}
			}
		}
	}
	/* hero *********************/
	.hero {
		min-height: 123vw;
		.hero__text {
			padding: 0;
			left: 0;
			top: 0;
			width: 100%;
			text-align: center;
			transform: none;
			background: none;
			.hero__title {
				font-size: 6.25vw;
				margin-bottom: 3.15vw;
				.spNone {
					display: none;
				}
			}
			.hero__comment {
				font-size: 3.4vw;
				margin-bottom: 4.2vw;
			}
			.hero__contact-link {
				background: #0041C3;
				color: #fff;
				padding: 2vw 7vw;
				position: relative;
				text-shadow: none;
				font-size: 3.4vw;
				width: 50vw;
				margin: 0 auto;
				font-weight: bold;
				outline: 2px solid #0041C3;
				&.pcNone {
					display: block;
				}
				&:after {
					content: "";
					position: absolute;
					width: 11px;
					height: 11px;
					border-right: 2px solid #fff;
					border-bottom: 2px solid #fff;
					right: 7%;
					top: 41%;
					transform: rotate(-45deg);
				}
				&:hover {
					background: #fff;
					color: #0041C3;
					&::after {
						border-right: 2px solid #0041C3;
						border-bottom: 2px solid #0041C3;
					}
				}
			}
		}
		.hero__kv {
			background-size: contain;
			background-image: url(../images/kv-img_sp.svg);
			background-position: bottom 3vw left 5vw;
			height: 100%;
			width: 98%;
			.hero__kv-img {
				&.hero__kv-img--human01 {
					top: initial;
                    right: 32.6vw;
                    width: 35.1vw;
                    bottom: 21vw;
				}
				&.hero__kv-img--img01 {
					top: initial;
                    right: 50vw;
                    width: 10vw;
                    bottom: 55vw;
				}
				&.hero__kv-img--img02 {
					top: initial;
                    right: 43vw;
                    width: 6.5vw;
                    bottom: 66.8vw;
				}
				&.hero__kv-img--img03 {
					top: initial;
                    right: 8.6vw;
                    width: 9vw;
                    bottom: 25.4vw;
				}
				&.hero__kv-img--img04 {
					top: initial;
                    right: 22.8vw;
                    width: 4vw;
                    bottom: 49.5vw;
				}
				&.hero__kv-img--img05 {
					top: initial;
                    right: 70vw;
                    width: 3.6vw;
                    bottom: 54.3vw;
				}
				&.hero__kv-img--img06 {
					top: initial;
                    right: 92.7vw;
                    width: 1.8vw;
                    bottom: 28vw;
				}
				&.hero__kv-img--img07 {
					top: initial;
                    right: 73.8vw;
                    width: 11vw;
                    bottom: 46vw;
				}
				&.hero__kv-img--img08 {
					top: initial;
                    right: 63vw;
                    width: 3vw;
                    bottom: 55.8vw;
				}
				&.hero__kv-img--img09 {
					top: initial;
                    right: 14.2vw;
                    width: 4.3vw;
                    bottom: 51.5vw;
				}
				&.hero__kv-img--img10 {
					top: initial;
                    right: 79.8vw;
                    width: 1.5vw;
                    bottom: 16.6vw;
				}
				&.hero__kv-img--img11 {
					top: initial;
                    right: 25.7vw;
                    width: 10vw;
                    bottom: 60vw;
				}
				&.hero__kv-img--img12 {
					top: initial;
                    right: 4.2vw;
                    width: 5.7vw;
                    bottom: 36.1vw;
				}
				&.hero__kv-img--img13 {
					top: initial;
                    right: 71.8vw;
                    width: 8.8vw;
                    bottom: 21vw;
				}
				&.hero__kv-img--img14 {
					top: initial;
                    right: 71.6vw;
                    width: 8.8vw;
                    bottom: 11vw;
				}
				&.hero__kv-img--img15 {
					top: initial;
                    right: 54.5vw;
                    width: 8.8vw;
                    bottom: 11.2vw;
				}
				&.hero__kv-img--img16 {
					top: initial;
                    right: 17.6vw;
                    width: 13.1vw;
                    bottom: 33.2vw;
				}
				&.hero__kv-img--img17 {
					top: initial;
                    right: 85.8vw;
                    width: 9.1vw;
                    bottom: 36.5vw;
				}
				&.hero__kv-img--img18 {
					top: initial;
                    right: 64.3vw;
                    width: 6.7vw;
                    bottom: 10.4vw;
				}
				&.hero__kv-img--img19 {
					top: initial;
                    right: 26.9vw;
                    width: 13.9vw;
                    bottom: 10.2vw;
				}
				&.hero__kv-img--img20 {
					top: initial;
                    right: 19.6vw;
                    width: 1.8vw;
                    bottom: 57.5vw;
				}
				&.hero__kv-img--img21 {
					top: initial;
                    right: 36vw;
                    width: 9.6vw;
                    bottom: 1.5vw;
				}
				&.hero__kv-img--img22 {
					top: initial;
                    right: 44.3vw;
                    width: 4.2vw;
                    bottom: 14.4vw;
				}
				&.hero__kv-img--img23 {
					top: initial;
                    right: 85vw;
                    width: 3.1vw;
                    bottom: 22.2vw;
				}
				&.hero__kv-img--img24 {
					top: initial;
                    right: 29vw;
                    width: 5.8vw;
                    bottom: 21.8vw;
				}
				&.hero__kv-img--img25 {
					top: initial;
                    right: 29.3vw;
                    width: 4.3vw;
                    bottom: 52.9vw;
				}
				&.hero__kv-img--img26 {
					top: initial;
                    right: 75.8vw;
                    width: 11vw;
                    bottom: 28.2vw;
				}
				&.hero__kv-img--img27 {
					top: initial;
                    right: 69vw;
                    width: 7vw;
                    bottom: 30.4vw;
				}
				&.hero__kv-img--img28 {
					top: initial;
                    right: 12.9vw;
                    width: 3vw;
                    bottom: 36.4vw;
				}
				&.hero__kv-img--img29 {
					top: initial;
                    right: 66vw;
                    width: 4.2vw;
                    bottom: 18vw;
				}
				&.hero__kv-img--img30 {
					top: initial;
                    right: 20.8vw;
                    width: 1.8vw;
                    bottom: 28.4vw;
				}
				&.hero__kv-img--img31 {
					top: initial;
                    right: 21.8vw;
                    width: 1.8vw;
                    bottom: 16vw;
				}
				&.hero__kv-img--img32 {
					top: initial;
                    right: 39.5vw;
                    width: 1.8vw;
                    bottom: 65vw;
				}
				&.hero__kv-img--img33 {
					top: initial;
                    right: 55.9vw;
                    width: 1.8vw;
                    bottom: 50.8vw;
				}
				&.hero__kv-img--img34 {
					top: initial;
                    right: 51.5vw;
                    width: 1.8vw;
                    bottom: 18.9vw;
				}
				&.hero__kv-img--img35 {
					top: initial;
                    right: 56.7vw;
                    width: 1.8vw;
                    bottom: 6.6vw;
				}
				&.hero__kv-img--img36 {
					top: initial;
                    right: 69.5vw;
                    width: 1.8vw;
                    bottom: 46.2vw;
				}
				&.hero__kv-img--img37 {
					top: initial;
                    right: 81.7vw;
                    width: 1.8vw;
                    bottom: 39vw;
				}
				&.hero__kv-img--text01 {
					top: initial;
                    right: 41.5vw;
                    width: 12vw;
                    bottom: 4.5vw;
				}
				&.hero__kv-img--text02 {
					top: initial;
                    right: 68.4vw;
                    width: 9.9vw;
                    bottom: 37.1vw;
				}
				&.hero__kv-img--text03 {
					top: initial;
                    right: 8vw;
                    width: 9.3vw;
                    bottom: 44.5vw;
				}
				&.hero__kv-img--text04 {
					top: initial;
                    right: 60vw;
                    width: 8.6vw;
                    bottom: 59.1vw;
				}
				&.hero__kv-img--text05 {
					top: initial;
                    right: 16.7vw;
                    width: 15.5vw;
                    bottom: 21vw;
				}
			}
		}

	}
	.contactForm {
		& .contactFormInner {
			#errorBox {
				margin: 0 35px 40px;
			}
		}
	}
	/* problems *********************/
	.problems {
		background-size: contain;
		.problems__inner {
			.problems__header {
				.problems__catch {
					font-size: 3.6rem;
				}
			}
			.problems__main-image {
				img {
					margin-left: 17vw;
					width: 48vw;
				}
			}
			.problems__balloon {
				font-size: 2vw;
				width: 16.6vw;
				height: 16.6vw;
				&.problems__balloon--text01 {
					top: 42.5vw;
					left: 12vw;
				}
				&.problems__balloon--text02 {
					top: 25vw;
					left: 1vw;
				}
				&.problems__balloon--text03 {
					top: 11vw;
					left: 20vw;
				}
				&.problems__balloon--text04 {
					top: 14vw;
					left: 60vw;
				}
				&.problems__balloon--text05 {
					top: 27vw;
					left: 80vw;
				}
			}
		}
	}

	/* solutions *********************/
	.solutions {
		margin-bottom: 8.75vw;
		.solutions__inner {
			margin: 0 auto;
			padding: 0 5.5vw;
			.solutions__header {
				margin-bottom: 80px;
				.solutions__catch {
					font-size: 3.6rem;
					line-height: 1.4;
					margin-bottom: 1.5rem;
				}
				.solutions__sub-text {
					font-size: 2.4rem;
					margin-bottom: 3.2rem;
				}
				.solutions__main-text {
					font-size: 2.4rem;
					text-align: left;
				}
			}
			.solutions__contents {
				.solutions__item {
					margin-bottom: 11.5vw;
					justify-content: space-between;
					position: relative;
					.solutions__item-text {
						margin-right: 0px;
						.solutions__item-title {
							font-size: 2.4rem;
							margin-bottom: 1rem;
							position: absolute;
							left: 50%;
							transform: translate(-50%, 0);
							top: -5rem;
						}
						.solutions__item-list {
							font-size: 2rem;
							line-height: 2;
							text-align: left;
						}
					}
					&.solutions__item--web-production { width: 100%; }
					&.solutions__item--marketing-support { width: 100%; }
					&.solutions__item--offline-production { width: 100%; }
					&.solutions__item--system-development { width: 100%; }
					&.solutions__item--integrated {
						width: 100%;
						margin-bottom: 0;
						.solutions__item-text {
							margin: -3vw 0 3vw;
							.solutions__item-title {
								position: relative;
								top: 0;
							}
						}
					}

				}
			}
		}
	}


	/* contact-area *********************/
	.contact-area {
		.contact-area__inner {
			.contact-area__img-box {
				width: 30vw;
				height: 25vw;
				margin-right: 4vw;
				img {
					left: 0;
				}
				&.contact-area__img-box--reverse {
					margin-right: 0;
					margin-left: 4vw;
				}
			}
			.contact-area__btn-box {
				.contact-area__btn-text {
					font-size: 1.8vw;
				}
			}
			.contact-area__btn {
				font-size: 3vw;
				padding: 2.5vw;
			}

		}

	}


	/* strengths *********************/
	.strengths {
		.strengths__inner {
			.popup-wrapper {
				.popup-item {
					.popup-item__content {
						flex-direction: column-reverse;
						align-items: center;
						.popup-item__content-left {
							margin: 3vw 0 0;
							max-width: initial;
						}
						img {
							max-width: inherit;
							width: auto;
						}
					}
					.popup-item__title {
						margin-bottom: 4vw;
					}
				}
			}
		}
	}

	/* production-flow *********************/
	.production-flow {
		.production-flow__inner {
			.production-flow__contents {
				.production-flow__tab-list {
					.production-flow__tab-item {
						border-right: 2px solid;
					}
				}
			}
		}
	}


	/* contactForm *********************/
	.contactForm {
		margin-bottom: 143px;
		.contactFormInner {
			max-width: 940px;
			.contactFormInnerTop {
				margin: 0 0 112px;
				h1 {
					font-size: 5.6rem;
					margin-bottom: 2rem;
				}
				.subtitle {
					margin-bottom: 4.5rem;
					font-size: 2rem;
				}

				/* ステップ */
				.contactFormStep {
					width: 40%;
					.contactFormStepBox {
						&.active {
							.circle {
								width: 56px;
								height: 56px;
							}
						}
						.circle {
							width: 36px;
							height: 36px;
							border-radius: 50%;
							border: 2px solid #0041C3;
						}
						&:first-child::after {
							bottom: -3rem;
							font-size: 1.6rem;
						}
						&:nth-child(2)::after {
							bottom: -3rem;
							font-size: 1.6rem;
						}
						&:last-child::after {
							bottom: -3rem;
							font-size: 1.6rem;
						}
					}
					&:before {
						width: 100%;
						height: 2px;
					}
				}
			}
			.contactFormInnerForm {
				/* フォーム */
				.contactFormInnerFormInner {
					margin: 0 35px;
					.contactFormInnerFormRow {
						padding: 25px 0 40px;
                        flex-direction: column;
                        align-items: flex-start;
						label {
							font-size: 2.4rem;
                            width: auto;
                            padding: 0;
                            flex-direction: row-reverse;
                            margin: 0 0 0.5em;
						}
						input,
						textarea {
							padding: 10px;
							border: 1px solid #ccc;
						}
						> input {
							width: 100%;
							font-size: 2.2rem;
							padding: 0.6em;
						}
						textarea {
							min-height: 120px;
							width: 100%;
						}
						.req {
							padding: 0.1rem 0.5rem;
							font-size: 1.8rem;
							margin: 0 0.7em 0 0;
						}
						.opt {
							padding: 0.1rem 0.5rem;
							font-size: 1.8rem;
							margin: 0 0.7em 0 0;
						}
						.checkbox-group,
						.radio-group {
							gap: 15px;
							width: 70%;
						}
						/* ラベル全体のスタイル */
						.checkbox-group {
							font-size: 16px;
							gap: 8px;
							.checkmark {
								width: 20px;
								height: 20px;
								border: 1px solid #333; /* 黒枠 */
								margin-right: 0.5em;
							}
							input[type="checkbox"]:checked + .checkmark::after {
								left: 9px;
								top: -6px;
								width: 6px;
								height: 15px;
								border-width: 0 4px 4px 0;
								filter: drop-shadow(-2px -3px 0px #fff);
								box-shadow: 2px 2px 0 #fff;
							}
						}
						&.formName {
							flex-direction: row;
							flex-wrap: wrap;
							.kanji {
								width: 49%;
								order: 1;
								justify-content: flex-end;
							}
							.kanjiForm {
								width: 49%;
								order: 3;
							}
							.furigana {
								width: 49%;
								order: 2;
								justify-content: flex-end;
								margin: 0;
							}
							.furiganaForm {
								width: 49%;
								order: 4;
							}
						}
						&.formInquiry {
							label {
								flex-direction: row;
								.note {
									margin-left: 1em;
									font-size: 2.2rem;
								}
							}
							.checkbox-group {
								gap: 1.2%;
								width: 100%;
								label {
									width: 31%;
                                    padding: 0;
                                    gap: 0;
                                    flex-direction: row;
									input {
										padding: 0;
										margin: 0 0.7em 0 0;
									}
									&:nth-child(3n + 1) {
										width: 35%;
									}
									&:nth-child(3n + 2) {
										width: 33%;
									}
									&:nth-child(3n + 3) {
										width: 29%;
									}
								}
							}
							#formInquiryOtherText {
								width: 100%;
								label {
									justify-content: flex-start;
								}
							}
						}
						&.formContent {
							.formContentBox {
								width: 100%;
								.note {
									font-size: 2rem;
								}
							}

						}
						&.formKnow {
							border-bottom: 1px solid #D7D7D7;
							margin: 0;
							/* ラジオボタングループ全体 */
							.radio-group {
								gap: 0;
								width: 100%;
								.checkmark {
									width: 20px;
									height: 20px;
									border: 1px solid #333;
									border-radius: 50%;
									left: 5%;
									top: 50%;
								}
								input[type="radio"]:checked + .checkmark::after {
									left: 50%;
									top: 50%;
									width: 11px;
									height: 10px;
									border-radius: 50%;
								}
								label {
									padding-left: 40px;
									flex-direction: row;
									&:nth-child(2n + 1) {
										width: 48%;
									}
									&:nth-child(2n + 2) {
										width: 48%;
									}
								}
							}
							#formKnowotherText {
								width: 100%;
								label {
									justify-content: flex-start;
                                    flex-direction: row;
								}
							}
						}
						&.formPolicy {
							margin-bottom: 20px;
							label {
								width: 100%;
								padding: 0;
								.note {
									font-size: 1.2rem;
									margin-top: 1em;
								}
							}
							a {
								&:after {
									top: 0.1rem;
									margin: 0 0 0 0.5rem;
								}
							}
							/* ラベル全体のスタイル */
							.checkbox-group {
								top: 0.2em;
								.checkmark {
									width: 20px;
									height: 20px;
									border: 1px solid #333; /* 黒枠 */
									margin-right: 0.5em;
								}
								input[type="checkbox"]:checked + .checkmark::after {
									left: 9px;
									top: -6px;
									width: 6px;
									height: 15px;
									border-width: 0 4px 4px 0;
									box-shadow: 2px 2px 0 #fff;
								}
							}

						}
					}
					.contactFormInnerFormSubmit {
						button {
							margin: 0 auto;
							padding: 2rem 15rem;
							font-size: 2.4rem;
							&::after {
								width: 10px;
								height: 10px;
								border-right: 1px solid #fff;
								border-bottom: 1px solid #fff;
								right: 7%;
								top: 40%;
								transform: rotate(-45deg);
							}
						}
					}
				}
			}
		}
	}



}

/* 769px以上 ***************************************************************************************************************************************************/

/* 下からスマホデザイン対応 */
@media (min-width: 769px) {
    .production-flow {
        .production-flow__inner {
            .production-flow__contents {
                .production-flow__tab-list {
					display: flex !important;
                }
            }
        }
    }
}


/* 768px ***************************************************************************************************************************************************/

/* 下からスマホデザイン対応 */
@media (max-width: 768px) {
	html {
		font-size: 1.565vw;
	}
	.pcNone {
		display: block;
	}
	.spNone {
		display: none;
	}

	/* hero ********************************************/
	.hero {
		min-height: 127vw;
		margin-bottom: 3vw;
        & .hero__text {
            .hero__comment {
				font-size: 4.1vw;
				margin-bottom: 5vw;
            }
        }
    }

	/* header ********************************************/
	.header__wrap {
		padding: 5.8vw 0;
		.header__logo {
			margin-left: 7.5vw;
			img {
				width: 23vw;
			}
		}
		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 20vw;
			background: url(../images/header-bg.png);
			z-index: 0;
			background-size: cover;
			background-position: left -37vw top;
			background-repeat: no-repeat;
		}
		.header__nav {
			.header__nav-wrap {
				width: 10vw;
				height: 10vw;
				margin-right: 4.5vw;
				right: 0;
				.header__nav-btn {
                    width: 6vw;
                    height: 2px;
					&:before, &:after {
						width: 6vw;
						height: 2px;
					}
					&:before {
						top: -1.7vw;
					}
					&:after {
						top: 1.7vw;
					}
                }
				.header__nav-panel {
					.header__nav-list {
						margin: 12vw 0 0;
					}
				}
				&.wrap-active {
					right: 4.5vw;
					top: 6vw;
					transition: 0.3s;
					margin: 0;
				}
			}
		}
	}

	.contactForm {
		& .contactFormInner {
			#errorBox {
				margin: 0 35px 40px;
			}
		}
	}

	/* strategiccreative *********************/
	.strategiccreative {
		margin-bottom: 6vw;
		.strategiccreative__inner {
			padding: 0 5.5vw;
			flex-direction: column;
			.strategiccreative__text-content {
				max-width: none;
				margin: 0 0 5vw;
				.strategiccreative__catch {
					font-size: 3.6rem;
					text-align: center;
				}
				.strategiccreative__sub-text {
					text-align: center;
				}
				.strategiccreative__main-text {
					font-size: 2.4rem;
				}
			}
			.strategiccreative__image-wrapper {
				text-align: center;
			}
		}
	}


	/* problems *********************/
	.problems {
        padding-top: 8.75vw;
        background-image: url(../images/section2-bg_star_sp.png);
        background-position: top 28vw center;
		.problems__inner {
			padding: 0 3vw;
			min-height: 117vw;
			.problems__header {
				.problems__catch {
					font-size: 3.6rem;
				}
			}
			.problems__main-image {
				position: absolute;
				bottom: 0px;
				img {
					margin-left: 27vw;
					width: 67vw;
				}
			}
			.problems__balloon {
				font-size: 2rem;
				width: 25vw;
				height: 25vw;
				&.problems__balloon--text01 {
					top: 31vw;
					left: 67vw;
				}
				&.problems__balloon--text02 {
					top: 63vw;
					left: 5vw;
				}
				&.problems__balloon--text03 {
					top: 31vw;
					left: 10vw;
				}
				&.problems__balloon--text04 {
					top: 21vw;
					left: 39vw;
				}
				&.problems__balloon--text05 {
					top: 63vw;
					left: 70vw;
				}
			}
		}
	}

	/* solutions *********************/
	.solutions {
		margin-bottom: 8.75vw;
		.solutions__inner {
			margin: 0 auto;
			padding: 0 5.5vw;
			.solutions__header {
				margin-bottom: 80px;
				.solutions__catch {
					font-size: 3.6rem;
					line-height: 1.4;
					margin-bottom: 1.5rem;
				}
				.solutions__sub-text {
					font-size: 2.4rem;
					margin-bottom: 1rem;
				}
				.solutions__main-text {
					font-size: 2.4rem;
					text-align: left;
				}
			}
			.solutions__contents {
				.solutions__item {
					margin-bottom: 12vw;
					justify-content: space-between;
					position: relative;
					.solutions__item-text {
						margin-right: 0px;
						.solutions__item-title {
							font-size: 2.8rem;
							margin-bottom: 1rem;
							position: absolute;
							left: 50%;
							transform: translate(-50%, 0);
							top: -6rem;
						}
						.solutions__item-list {
							font-size: 2rem;
							line-height: 1.8;
							text-align: left;
						}
					}
					.solutions__item-image-wrapper {
						width: 35vw;
					}
					&.solutions__item--web-production { width: 100%; }
					&.solutions__item--marketing-support { width: 100%; }
					&.solutions__item--offline-production { width: 100%; }
					&.solutions__item--system-development { width: 100%; }
					&.solutions__item--integrated {
						width: 100%;
						margin-bottom: 0;
						.solutions__item-text {
							margin: -3vw 0 3vw;
							.solutions__item-title {
								position: relative;
								top: 0;
							}
						}
						.solutions__item-image-wrapper {
							width: 100%;
						}
					}
				}
			}
		}
	}


	/* contact-area *********************/
	.contact-area {
		margin: 0 auto 12.5vw;
		.contact-area__inner {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column-reverse;
			padding: 6.4vw 3vw 0;
			&.contact-area__inner--reverse-column {
				flex-direction: column;
			}
			.contact-area__img-box {
				height: 36.5vw;
				margin-right: 0;
				img {
					left: 50%;
					top: 10%;
					transform: translate(-50%, 0);
					&.contact-area__img01 {
						max-width: 43vw;
					}
					&.contact-area__img02 {
						max-width: 43vw;
					}
					&.contact-area__img03 {
						max-width: 46vw;
					}
					&.contact-area__img04 {
						max-width: 50.4vw;
					}
				}
				&.contact-area__img-box--reverse {
					margin-right: 0;
					margin-left: 0;
				}
			}
			.contact-area__btn-box {
				.contact-area__btn-text {
					font-size: 2.2rem;
					margin-bottom: 2.4rem;
				}
			}
			.contact-area__btn {
				padding: 2.3rem 13rem;
				font-size: 3.7vw;
				&:after {
					width: 11px;
					height: 11px;
					border-right: 2px solid #0041C3;
					border-bottom: 2px solid #0041C3;
					right: 7%;
					top: 37%;
					transform: rotate(45deg);
				}
			}

		}

	}





	/* works *********************/
	.works {
		margin-bottom: 20vw;
		.works__inner {
			padding: 0px 6.2vw;
			.works__header {
				.works__catch {
					font-size: 3.6rem;
				}
				.works__sub-text {
					font-size: 2.4rem;
					margin-bottom: 3rem;
				}
			}
			.works__contents {
				.works__contents-inner {
					.works__tag-filter {
						gap: 4vw;
						margin-bottom: 8.4vw;
						flex-wrap: wrap;
						.works__tag-button {
							padding: 0.4rem 2.6rem;
							border: 1px solid #387CFE;
							border-radius: 20px;
							transition: background-color 0.3s, border-color 0.3s;
							font-size: 2rem;
						}
					}
					.works__tag-content {
						gap: 60px;
						margin-bottom: 80px;
						.works__tag-item {
							max-width: initial;
							width: 100%;
							.works__tag-item-image-wrapper {
								margin-bottom: 5vw;
								img {
									width: 100%;
								}
							}
							.works__tag-item-title {
								font-size: 2.8rem;
								margin-bottom: 2.5rem;
							}
							.works__tag-item-text {
								font-size: 2.4rem;
							}
							.works__tag-item-tags {
								margin-top: 1rem;
								.works__tag-item-tag {
									margin-right: 1.8rem;
									font-size: 2.4rem;
								}
							}
						}
					}
					/* 「もっと見る」ボタンのスタイル */
					.works__more-button {
						padding: 1.6rem 16rem 2rem;
						border-radius: 100px;
						font-size: 3rem;
						&::after {
							width: 3vw;
							height: 3vw;
							border-right: 2px solid #fff;
							border-bottom: 2px solid #fff;
							right: 9%;
							top: 31%;
						}
					}
				}
			}
		}
	}


	/* strengths *********************/
	.strengths {
		margin-bottom: 8.75vw;
		.strengths__inner {
			padding: 8.75vw 5.6vw 3vw;
			.strengths__header {
				margin-bottom: 6.4vw;
				.strengths__catch {
					font-size: 3.6rem;
				}
				.strengths__sub-text {
					font-size: 2.4rem;
					margin-bottom: 3.2rem;
				}
				.strengths__main-text {
					font-size: 2.4rem;
					text-align: left;
				}
			}
			.strengths__item{
				margin: 0 0 8.75vw;
				flex-direction: column;
				&:nth-child(even) {
					flex-direction: column;
				}
				.strengths__item-image-wrapper {
					max-width: 100%;
					width: 100%;
					.strengths__item-image {
						width: 100%;
					}
				}
				.strengths__item-text-content {
                    margin: 5.6vw 6.4vw;
                    max-width: initial;
					.strengths__item-title {
						font-size: 2.4rem;
						margin-bottom: 1rem;
					}
					.strengths__item-text {
						font-size: 2.4rem;
						line-height: 1.7;
						margin-bottom: 2.2rem;
					}
					.strengths__item-keywords {
						margin-bottom: 3rem;
						.strengths__item-keyword {
							border-radius: 80px;
							padding: 0;
							margin: 0 1.2rem 0 0;
							font-weight: bold;
						}
					}
				}
			}
			.popup-wrapper {
				.popup-item {
					.popup-item__close {
						width: 8vw;
                    	height: 8vw;
						&:before,&:after {
							width: 4.175vw;
							height: 0.25vw;
						}
					}
					.popup-item__content {
						flex-direction: column-reverse;
						align-items: center;
						.popup-item__content-left {
							margin: 3vw 0 0;
							max-width: initial;
						}
						img {
							max-width: 100%;
							width: auto;
						}
					}
					.popup-item__title {
						font-size: 2.8rem;
					}
				}
			}
		}
	}

	/* production-flow *********************/
	.production-flow {
		margin-bottom: 10vw;
		.production-flow__inner {
			padding: 0 5.5vw;
			.production-flow__header {
				margin-bottom: 6.2vw;
				.production-flow__catch {
					font-size: 3.6rem;
				}
				.production-flow__sub-text {
					font-size: 2.4rem;
					margin-bottom: 3.2rem;
				}
				.production-flow__main-text {
					font-size: 2.4rem;
                    text-align: left;
				}
			}
			.production-flow__contents {
				.production-flow__contents-title {
					font-size: 2.6rem;
				}
				.production-flow__scroll-container {
					.production-flow__tab-list {
						border: 2px solid #0041C3;
						border-radius: 0 0 10px 10px;
						box-shadow: 4px 4px 8px #C1CBE6;
						margin: 0 0 8.5vw;
						border-top: 0;
						display: none;
						.production-flow__tab-item {
							font-size: 3.6vw;
							border-right: 2px solid;
							padding: 0;
							border-right: 0;
							padding: 2vw 5vw;
							text-align: center;
							&.arrow {
								display: none;
							}
							&.active {
								cursor: default;
								padding: 2vw 5vw;
							}
						}
					}
				}
				.production-flow__title {
					color: #0041C3;
                    font-size: 3.6vw;
                    background: #F5F6FE;
                    border: 2px solid #0041C3;
					border-radius: 10px;
					position: relative;
					cursor: pointer;
					text-align: center;
					padding: 2vw 5vw;
					display: block;
					font-weight: bold;
					&:after {
                        content: "";
                        position: absolute;
                        width: 2.8vw;
                        height: 2.8vw;
                        border-right: 2px solid #0041C3;
                        border-bottom: 2px solid #0041C3;
                        right: 5%;
                        top: 30%;
                        transform: rotate(45deg);
					}
					&.active {
						text-decoration: none;
						border-radius: 10px 10px 0 0;
						&:after {
							transform: rotate(-135deg);
							top: 40%;
						}
					}
				}
				.production-flow__steps {
					margin-bottom: 30px;
					margin-top: 8.5vw;
					flex-direction: column;
					.production-flow__step-box {
						border-radius: 0px 0px 30px 0;
						width: 100%;
						flex-direction: row;
						background: #00000000;
						.production-flow__step-number {
							font-size: 1.7rem;
							top: -10px;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							font-size: 2.2rem;
							padding: 1.5vw;
							span {
								font-size: 4.5rem;
								margin-left: 0;
								line-height: 1;
							}
							&::before {
								width: 100%;
								height: 10%;
								z-index: 5;
								clip-path: polygon(0 0, 100% 0, 50% 100%);
								top: -1px;
							}
						}
						&:last-child {
							.number {
								margin: 0 0 -10px;
							}
						}

						.production-flow__step-box-inner {
							border-radius: 0px 0px 30px 0;
							box-shadow: 4px 4px 8px #C1CBE6;
							width: 100%;
							margin-top: -20px;
							margin-left: 0;
							padding: 10vw 5vw 7vw 5vw;
							background: #fff;
							position: relative;
							.production-flow__step-image-wrapper {
								min-height: 140px;
								height: 100%;
								position: absolute;
								left: 0;
								top: 50%;
								transform: translate(0, -50%);
								width: 35%;
								img {
									width: 70%;
								}
							}
							.production-flow__step-title {
								line-height: 1.3;
								margin-bottom: 2rem;
								text-align: left;
								display: block;
								font-size: 2.6rem;
								width: 65%;
								margin-left: 35%;
								min-height: inherit;
							}
							.production-flow__step-text {
								font-size: 2rem;
								line-height: 1.4;
								width: 65%;
								margin-left: 35%;
								margin-bottom: 5%;
							}
						}
						&.production-flow__step-box--1{
							.production-flow__step-box-inner {
								margin-left: 0px;
								padding-left: 5%;
								padding-top: 5vw;
							}
							.production-flow__step-number {
								background: #85D006;
								margin: -10px 0 0 0;
							}
						}

					}
				}
				.production-flow__under-text {
					font-size: 2.2rem;
				}
			}

		}
	}



	/* totop *********************/
	.totop-btn {
		margin-bottom: 13vw;
		.totop-btn__inner {
			text-align: center;
			.totop-btn__link {
				font-size: 2.8rem;
				.totop-btn__circle {
					width: 13.5vw;
					height: 13.5vw;
					&::after {
						width: 3vw;
						height: 3vw;
					}
				}
			}
		}
	}


	/* footer *********************/
	footer {
		margin-top: 44vw;
		.footer__inner {
			margin: 0 auto;
			padding: 7vw 5.4vw 2vw;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			.footer__logo {
				img {
					width: 41vw;
				}
			}
			.footer__nav {
				width: 100%;
				.footer__list {
					flex-direction: column;
					.footer__item {
						font-size: 2.2rem;
                        margin-right: 0;
						border-bottom: 1px solid;
						line-height: 4;
						.footer__link {
							display: block;
							line-height: 4;
							position: relative;
							&:after {
								content: "";
                                position: absolute;
                                width: 11px;
                                height: 11px;
                                border-right: 2px solid #fff;
                                border-bottom: 2px solid #fff;
                                right: 2%;
                                top: 45%;
                                transform: rotate(-45deg);
							}
						}
						&:last-child {
							border: none;
							text-align: center;
							font-size: 2rem;
						}
					}
				}
			}
		}
	}



	/* contactForm *********************/
	.contactForm {
		margin-bottom: 15.5vw;
		.contactFormInner {
			.contactFormInnerTop {
				margin: 0 0 14vw;
				.subtitle {
					font-size: 2.4rem;
				}

				/* ステップ */
				.contactFormStep {
					width: 63vw;
					.contactFormStepBox {
						.circle {
							width: 7vw;
							height: 7vw;
						}
						&:first-child::after {
							bottom: -4rem;
							font-size: 2rem;
						}
						&:nth-child(2)::after {
							bottom: -4rem;
							font-size: 2rem;
						}
						&:last-child::after {
							bottom: -4rem;
							font-size: 2rem;
						}
					}
				}
			}
			.contactFormInnerForm {
				/* フォーム */
				.contactFormInnerFormInner {
					margin: 0 5.5vw;
					.contactFormInnerFormRow {
						padding: 4vw 0 6.2vw;
						input,
						textarea {
							padding: 1.6vw;
						}
						> input {
							width: 100%;
							font-size: 2.2rem;
							padding: 0.6em;
						}
						.req {
							padding: 0.3rem 0.5rem 0.5rem;
							line-height: 1;
						}
						.opt {
							padding: 0.3rem 0.5rem 0.5rem;
							line-height: 1;
						}
						.checkbox-group,
						.radio-group {
							gap: 15px;
							width: 70%;
						}
						/* ラベル全体のスタイル */
						.checkbox-group {
							.checkmark {
								width: 3.125vw;
								height: 3.125vw;
								border: 1px solid #333; /* 黒枠 */
								margin-right: 0.5em;
							}
							input[type="checkbox"]:checked + .checkmark::after {
								left: 1.4vw;
								top: -0.95vw;
								width: 0.95vw;
								height: 2.35vw;
								border-width: 0 0.65vw 0.65vw 0;
							}
							label {
								font-size: 2.2rem;
								margin-bottom: 3.2vw;
							}
						}
						&.formInquiry {
							.checkbox-group {
								label {
									&:nth-child(3n + 1) {
										width: 37%;
									}
									&:nth-child(3n + 2) {
										width: 35%;
									}
									&:nth-child(3n + 3) {
										width: 25%;
									}
								}
							}
						}
						&.formContent {
							.formContentBox {
								.note {
									margin-top: 1rem;
								}
							}

						}
						&.formKnow {
							/* ラジオボタングループ全体 */
							.radio-group {
								.checkmark {
									width: 4.45vw;
									height: 4.45vw;
								}
								input[type="radio"]:checked + .checkmark::after {
									width: 2.2vw;
									height: 2.2vw;
								}
								label {
									padding-left: 5.8vw;
									font-size: 2.2rem;
									&:nth-child(2n + 1) {
										width: 49%;
									}
									&:nth-child(2n + 2) {
										width: 49%;
									}
								}
							}

						}
						&.formPolicy {
							margin-bottom: 20px;
							label {
								width: 100%;
								padding: 0;
								.note {
									font-size: 2rem;
								}
							}
							a {
								&:after {
									top: 0.1rem;
									margin: 0 0 0 0.5rem;
								}
							}
							/* ラベル全体のスタイル */
							.checkbox-group {
								top: 0.2em;
								.checkmark {
									width: 3.125vw;
									height: 3.125vw;
								}
								input[type="checkbox"]:checked + .checkmark::after {
									left: 1.4vw;
									top: -0.95vw;
									width: 0.95vw;
									height: 2.35vw;
									border-width: 0 0.65vw 0.65vw 0;
								}
							}

						}
					}
					.contactFormInnerFormSubmit {
						button {
							font-size: 2.8rem;
							padding: 2rem 13rem;
							&::after {
								width: 1.8vw;
								height: 1.8vw;
								top: 42%;
							}
						}
					}
				}
			}
		}
	}

/* contactForm 入力・確認・完了の切り替え *********************/
/* 入力 */
#contactFormInput {
	.contactFormStepBox:nth-child(1) {
		.circle {
			width: 9vw;
			height: 9vw;
		}
	}
}
/* 確認 */
#contactFormConfirm {
	.contactFormStepBox:nth-child(2) {
		.circle {
			width: 9vw;
			height: 9vw;
		}
	}
}
/* 完了 */
#contactFormComplete {
	.contactFormStepBox:nth-child(3) {
		.circle {
			width: 9vw;
			height: 9vw;
		}
	}
	.contactFormInnerFormInner {
		.contactFormInnerFormInnerTitle {
			font-size: 3rem;
			margin-bottom: 4rem;
		}
		.contactFormInnerFormInnerTextbox {
			margin-bottom: 10rem;
		}
		.contactFormInnerFormInnerText {
			font-size: 2.4rem;
			margin-bottom: 2rem;
		}
		.contactFormInnerFormInnerBtn {
			.contactFormInnerFormInnerBtnLink {
				font-size: 2.8rem;
				padding: 1.2rem 10rem;
				&::after {
					width: 1.8vw;
					height: 1.8vw;
					top: 42%;
				}
			}
		}
	}
}


}


/* 640px ***************************************************************************************************************************************************/
@media (max-width: 640px) {

}






/* アニメーション ***************************************************************************************************************************************************/

/* ページトップボタン */
.totop-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.totop-btn.is-show {
  opacity: 1;
  visibility: visible;
}



/* こんなお悩みを抱えていませんか？ ballon */
.problems__balloon {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.problems__balloon.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ふわふわアニメーション */
.problems__balloon.is-floating {
    animation: floating 2.5s ease-in-out infinite;
    /* animation-delayはJavaScriptで動的に設定する */
}

@keyframes floating {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}



/* hero__kv-img 各アイテム フェードイン */
.hero__kv-img {
	opacity: 0;
	transform: translateY(-20px);
	animation: fadeInFromTop 0.8s forwards;
	animation-timing-function: ease-out;
}
.hero__kv-img:after{
	opacity: 0;
	transform: scale(0.4) translateY(20px);
	animation: fadeInFromTop 0.8s forwards;
	animation-timing-function: ease-out;
	transform-origin: bottom center;
}

/* フェードインアニメーションキーフレームの定義 */
@keyframes fadeInFromTop {
  to {
    opacity: 1;
    transform: scale(1) translateY(0px);
  }
}

/* フェードイン各要素にアニメーションの遅延時間を設定 */
.hero__kv-img:nth-of-type(2),
.hero__kv-img:nth-of-type(2):after { animation-delay: 0.1s; }
.hero__kv-img:nth-of-type(3),
.hero__kv-img:nth-of-type(3):after { animation-delay: 0.2s; }
.hero__kv-img:nth-of-type(4),
.hero__kv-img:nth-of-type(4):after { animation-delay: 0.3s; }
.hero__kv-img:nth-of-type(5),
.hero__kv-img:nth-of-type(5):after { animation-delay: 0.4s; }
.hero__kv-img:nth-of-type(6),
.hero__kv-img:nth-of-type(6):after { animation-delay: 0.5s; }
.hero__kv-img:nth-of-type(7),
.hero__kv-img:nth-of-type(7):after { animation-delay: 0.6s; }
.hero__kv-img:nth-of-type(8),
.hero__kv-img:nth-of-type(8):after { animation-delay: 0.7s; }
.hero__kv-img:nth-of-type(9),
.hero__kv-img:nth-of-type(9):after { animation-delay: 0.8s; }
.hero__kv-img:nth-of-type(10),
.hero__kv-img:nth-of-type(10):after { animation-delay: 0.9s; }
.hero__kv-img:nth-of-type(11),
.hero__kv-img:nth-of-type(11):after { animation-delay: 1.0s; }
.hero__kv-img:nth-of-type(12),
.hero__kv-img:nth-of-type(12):after { animation-delay: 1.1s; }
.hero__kv-img:nth-of-type(13),
.hero__kv-img:nth-of-type(13):after { animation-delay: 1.2s; }
.hero__kv-img:nth-of-type(14),
.hero__kv-img:nth-of-type(14):after { animation-delay: 1.3s; }
.hero__kv-img:nth-of-type(15),
.hero__kv-img:nth-of-type(15):after { animation-delay: 1.4s; }
.hero__kv-img:nth-of-type(16),
.hero__kv-img:nth-of-type(16):after { animation-delay: 1.5s; }
.hero__kv-img:nth-of-type(17),
.hero__kv-img:nth-of-type(17):after { animation-delay: 1.6s; }
.hero__kv-img:nth-of-type(18),
.hero__kv-img:nth-of-type(18):after { animation-delay: 1.7s; }
.hero__kv-img:nth-of-type(19),
.hero__kv-img:nth-of-type(19):after { animation-delay: 1.8s; }
.hero__kv-img:nth-of-type(20),
.hero__kv-img:nth-of-type(20):after { animation-delay: 1.9s; }
.hero__kv-img:nth-of-type(21),
.hero__kv-img:nth-of-type(21):after { animation-delay: 2.0s; }
.hero__kv-img:nth-of-type(22),
.hero__kv-img:nth-of-type(22):after { animation-delay: 2.1s; }
.hero__kv-img:nth-of-type(23),
.hero__kv-img:nth-of-type(23):after { animation-delay: 2.2s; }
.hero__kv-img:nth-of-type(24),
.hero__kv-img:nth-of-type(24):after { animation-delay: 2.3s; }
.hero__kv-img:nth-of-type(25),
.hero__kv-img:nth-of-type(25):after { animation-delay: 2.4s; }
.hero__kv-img:nth-of-type(26),
.hero__kv-img:nth-of-type(26):after { animation-delay: 2.5s; }
.hero__kv-img:nth-of-type(27),
.hero__kv-img:nth-of-type(27):after { animation-delay: 2.6s; }
.hero__kv-img:nth-of-type(28),
.hero__kv-img:nth-of-type(28):after { animation-delay: 2.7s; }
.hero__kv-img:nth-of-type(29),
.hero__kv-img:nth-of-type(29):after { animation-delay: 2.8s; }
.hero__kv-img:nth-of-type(30),
.hero__kv-img:nth-of-type(30):after { animation-delay: 2.9s; }
.hero__kv-img:nth-of-type(31),
.hero__kv-img:nth-of-type(31):after { animation-delay: 3.0s; }
.hero__kv-img:nth-of-type(32),
.hero__kv-img:nth-of-type(32):after { animation-delay: 3.1s; }
.hero__kv-img:nth-of-type(33),
.hero__kv-img:nth-of-type(33):after { animation-delay: 3.2s; }
.hero__kv-img:nth-of-type(34),
.hero__kv-img:nth-of-type(34):after { animation-delay: 3.3s; }
.hero__kv-img:nth-of-type(35),
.hero__kv-img:nth-of-type(35):after { animation-delay: 3.4s; }
.hero__kv-img:nth-of-type(36),
.hero__kv-img:nth-of-type(36):after { animation-delay: 3.5s; }
.hero__kv-img:nth-of-type(37),
.hero__kv-img:nth-of-type(37):after { animation-delay: 3.6s; }
.hero__kv-img:nth-of-type(38),
.hero__kv-img:nth-of-type(38):after { animation-delay: 3.7s; }
.hero__kv-img:nth-of-type(39),
.hero__kv-img:nth-of-type(39):after { animation-delay: 3.8s; }
.hero__kv-img:nth-of-type(40),
.hero__kv-img:nth-of-type(40):after { animation-delay: 3.9s; }
.hero__kv-img:nth-of-type(41),
.hero__kv-img:nth-of-type(41):after { animation-delay: 4.0s; }
.hero__kv-img:nth-of-type(42),
.hero__kv-img:nth-of-type(42):after { animation-delay: 4.1s; }
.hero__kv-img:nth-of-type(43),
.hero__kv-img:nth-of-type(43):after { animation-delay: 4.2s; }
.hero__kv-img:nth-of-type(44),
.hero__kv-img:nth-of-type(44):after { animation-delay: 4.3s; }
.hero__kv-img:nth-of-type(45),
.hero__kv-img:nth-of-type(45):after { animation-delay: 4.4s; }
.hero__kv-img:nth-of-type(46),
.hero__kv-img:nth-of-type(46):after { animation-delay: 4.5s; }


/* 線画アニメーション */
.hero__kv-img--text-drawing svg path {
	fill: #0041c3; /* 初期状態では塗りつぶしなし */
	stroke: #0041c3; /* 線の色 */
	stroke-width: 1; /* 線の太さ */
	stroke-linecap: round;
	stroke-linejoin: round;
	animation:
		drawStroke 1.5s ease-in-out forwards, /* 線の描画アニメーション */
		fillIn 0.5s ease-out forwards; /* 塗りつぶしアニメーション */

	fill-opacity: 0;
	/* JSで設定されるCSS変数で遅延を制御 */
	animation-delay:
		var(--stroke-animation-delay, 0s), /* 線画アニメーションの遅延 */
		var(--fill-animation-delay, 0s);   /* 塗りつぶしアニメーションの遅延 */
}

/* 線の描画アニメーションのキーフレーム */
@keyframes drawStroke {
	from {
		stroke-dashoffset: var(--path-length);
	}
	to {
		stroke-dashoffset: 0;
		stroke-opacity: 1;
	}
}
/* 塗りつぶしアニメーションのキーフレーム */
@keyframes fillIn {
	from {
		fill-opacity: 0; /* 最初は透明 */
	}
	to {
		fill-opacity: 1; /* 最終的に不透明（完全に塗りつぶされる） */
	}
}