@charset "utf-8";


/************************************
#main_title
************************************/
@media screen and (min-width: 1720px) {
	#main_title {
		margin-bottom: calc(-12px / 1366 * 1720);
	}
	
	#main_title .main_photo {
		position: absolute;
		z-index: 1;
		width: calc(310px / 1366 * 1720);
		margin-left: 50%;
		transform: translateX(-50%);
		top: calc(45px / 1366 * 1720);
		left: calc(340px / 1366 * 1720);
	}
	
	#main_title .wrapper {
		margin-bottom: calc(60px / 1366 * 1720);
	}
}

@media screen and (min-width: 1133px) and (max-width: 1719px) {
	#main_title {
		margin-bottom: calc(-12vw / 13.66);
	}
	
	#main_title .main_photo {
		position: absolute;
		z-index: 1;
		width: calc(310vw / 13.66);
		margin-left: 50%;
		transform: translateX(-50%);
		top: calc(45vw / 13.66);
		left: calc(340vw / 13.66);
	}
	
	#main_title .wrapper {
		margin-bottom: calc(60vw / 13.66);
	}
}

@media screen and (min-width: 744px) and (max-width: 1132px) {
	#main_title {
		margin-bottom: calc(-12vw / 7.44);
	}
	
	#main_title .main_photo {
		position: absolute;
		z-index: 1;
		width: calc(222vw / 7.44);
		top: calc(172vw / 7.44);
		right: calc(66vw / 7.44);
	}
	
	#main_title .wrapper {
		margin: 0 auto calc(100vw / 7.44);
	}
}

@media screen and (max-width: 743px) {
	#main_title::after {
		display: none;
	}
	
	#main_title .main_photo {
		position: absolute;
		z-index: 1;
		width: calc(151vw / 3.9);
		top: calc(96vw / 3.9);
		right: calc(10vw / 3.9);
	}
	
	#main_title .wrapper {
		margin: 0 auto calc(20vw / 3.9);
	}
}


/************************************
#about
************************************/
@media screen and (min-width: 1720px) {
	#about h3 {
		position: relative;
		width: calc(1000px / 1366 * 1720);
		height: calc(55px / 1366 * 1720);
		margin-left: 50%;
		transform: translateX(-50%);
		padding-left: calc(180px / 1366 * 1720);
		margin-bottom: calc(35px / 1366 * 1720);
	}
	
	#about h3 .icon {
		position: absolute;
		width: calc(53px / 1366 * 1720);
		bottom: calc(-8px / 1366 * 1720);
		left: calc((55px + 180px) / 1366 * 1720);
	}
	
	#about h3 .en_title {
		position: absolute;
		color: #ffbe19;
		font-family: "copperplate", serif;
		font-size: calc(10px / 1366 * 1720);
		font-weight: 700;
		line-height: 1em;
		font-style: normal;
		text-align: left;
		top: calc(5px / 1366 * 1720);
		left: calc((117px + 180px) / 1366 * 1720);
	}
	
	#about h3 .title {
		position: absolute;
		background: linear-gradient(to right, #ff6a1a, #ff9e1a);
		background-clip: text;
		color: transparent;
		font-size: calc(32px / 1366 * 1720);
		font-weight: 700;
		line-height: calc(44px / 1366 * 1720);
		top: calc(17px / 1366 * 1720);
		left: calc((117px + 180px) / 1366 * 1720);
	}
	
	#about h3 .title br {
		display: none;
	}
	
	#about .text {
		position: relative;
		width: calc(1000px / 1366 * 1720);
		margin-left: 50%;
		transform: translateX(-50%);
		padding-left: calc(180px / 1366 * 1720);
	}
	
	#about .text.intro {
		height: calc(345px / 1366 * 1720);
		margin-bottom: calc(30px / 1366 * 1720);
	}
	
	#about .text.total {
		height: calc(570px / 1366 * 1720);
		margin-bottom: calc(50px / 1366 * 1720);
	}
	
	#about .text.total:before {
		position: absolute;
		display: block;
		content: "";
		background: url("../../img/goods/silhouette.svg") no-repeat;
		background-size: 100%;
		width: calc(820px / 1366 * 1720);
		height: calc(530px / 1366 * 1720);
		bottom: 0;
		right: calc(90px / 1366 * 1720);
	}
	
	#about .text.experience {
		margin-bottom: calc(50px / 1366 * 1720);
	}
	
	#about .text.solution {
		margin-bottom: calc(87px / 1366 * 1720);
	}
	
	#about .text h4 {
		position: relative;
		display: inline;
		background: linear-gradient(to bottom, transparent 0%, transparent 80%, #ffbfa3 80%, #ffbfa3 90%, transparent 90%);
		color: #322323;
		font-size: calc(26px / 1366 * 1720);
		font-weight: 700;
		line-height: calc(45px / 1366 * 1720);
		left: calc(55px / 1366 * 1720);
	}
	
	#about .text h4 span {
		font-size: calc((26px * 0.8) / 1366 * 1720);
	}
	
	#about .text.intro h4 br:nth-of-type(1), #about .text.intro h4 br:nth-of-type(3) {
		display: none;
	}
	
	#about .text.total h4 br:nth-of-type(1) {
		display: none;
	}
	
	#about .text.experience h4 br:nth-of-type(3) {
		display: none;
	}
	
	#about .text.solution h4 br:nth-of-type(2) {
		display: none;
	}
	
	#about .text>p {
		color: #322323;
		font-size: calc(15px / 1366 * 1720);
		font-weight: 400;
		line-height: calc(28px / 1366 * 1720);
		text-align: justify;
		width: calc(500px / 1366 * 1720);
		margin: calc(20px / 1366 * 1720) 0 0 calc(55px / 1366 * 1720);
	}
	
	#about .text.experience>p {
		margin-bottom: calc(25px / 1366 * 1720);
	}
	
	#about .text.solution>p {
		position: relative;
		z-index: 1;
		margin-bottom: calc(20px / 1366 * 1720);
	}
	
	#about .text.intro>img {
		position: absolute;
		width: calc(373px / 1366 * 1720);
		bottom: 0;
		right: calc(64px / 1366 * 1720);
	}
	
	#about .text.total>img {
		position: absolute;
		z-index: 1;
		width: calc(297px / 1366 * 1720);
		top: 0;
		right: calc(108px / 1366 * 1720);
	}
	
	#about .text.experience>img {
		position: absolute;
		z-index: 1;
		width: calc(267px / 1366 * 1720);
		top: calc(-10px / 1366 * 1720);
		right: calc(108px / 1366 * 1720);
	}
	
	#about .text.solution>img {
		position: absolute;
		z-index: 1;
		width: calc(397px / 1366 * 1720);
		top: calc(-20px / 1366 * 1720);
		right: calc(55px / 1366 * 1720);
	}
	
	#about .text.total .scroll {
		overflow: inherit!important;
		position: absolute!important;
		width: calc(870px / 1366 * 1720);
		bottom: calc(30px / 1366 * 1720);
		right: calc(65px / 1366 * 1720);
	}
	
	.scroll-hint-icon-wrap {
		display: none!important;
	}
	
	#about .text.total .scroll .development {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: baseline;
		width: 100%;
	}
	
	#about .text .development li {
		width: calc(170px / 1366 * 1720);
	}
	
	#about .text .development li img {
		width: 100%;
	}
	
	#about .text.experience .achievement {
		width: calc(890px / 1366 * 1720);
		margin: 0 0 calc(30px / 1366 * 1720) calc(55px / 1366 * 1720);
	}
	
	#about .text.experience .achievement .scroll {
		overflow: inherit!important;
		width: 100%;
	}
	
	#about .text.experience .achievement .scroll ul {
		width: 100%;
	}
	
	#about .text.experience .achievement .scroll ul li {
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background: #fff5ef;
		width: 100%;
		padding: calc(20px / 1366 * 1720);
		margin-bottom: calc(6px / 1366 * 1720);
	}
	
	#about .text.experience .achievement .scroll ul li:last-child {
		margin-bottom: 0;
	}
	
	#about .text.experience .achievement .scroll ul li .number {
		position: absolute;
		width: calc(67px / 1366 * 1720);
		top: calc(10px / 1366 * 1720);
		left: 0;
	}
	
	#about .text.experience .achievement .scroll ul li .photo {
		width: calc(303px / 1366 * 1720);
		height: calc(195px / 1366 * 1720);
	}
	
	#about .text.experience .achievement .scroll ul li .text {
		box-sizing: border-box;
		background: #ffffff;
		width: calc(527px / 1366 * 1720);
		height: calc(195px / 1366 * 1720);
		padding: calc(20px / 1366 * 1720) calc(20px / 1366 * 1720) 0;
		margin: 0;
		transform: none;
	}
	
	#about .text.experience .achievement .scroll ul li .text h5 {
		color: #ec6c00;
		font-size: calc(22px / 1366 * 1720);
		font-weight: 700;
		line-height: 1em;
		text-align: left;
		margin-bottom: calc(13px / 1366 * 1720);
	}
	
	#about .text.experience .achievement .scroll ul li .text p {
		color: #ec6c00;
		font-size: calc(15px / 1366 * 1720);
		font-weight: 400;
		line-height: calc(22px / 1366 * 1720);
		text-align: justify;
		width: 100%;
		margin: 0;
	}
	
	#about .text.experience .example {
		box-sizing: border-box;
		background: #f3f0e6;
		width: calc(1000px / 1366 * 1720);
		height: calc(372px / 1366 * 1720);
		padding: calc(20px / 1366 * 1720) calc(55px / 1366 * 1720) 0;
	}
	
	#about .text.experience .example h5 {
		color: #ff6a1a;
		font-size: calc(14px / 1366 * 1720);
		font-weight: 700;
		line-height: 1em;
		text-align: left;
		margin-bottom: calc(10px / 1366 * 1720);
	}
	
	#about .text.experience .example p {
		color: #322323;
		font-size: calc(14px / 1366 * 1720);
		font-weight: 400;
		line-height: calc(22px / 1366 * 1720);
		text-align: left;
		margin-bottom: calc(10px / 1366 * 1720);
	}
	
	#about .text.experience .example p br.sp {
		display: none;
	}
	
	#about .text.experience .example table {
		width: 100%;
		margin-bottom: calc(13px / 1366 * 1720);
	}
	
	#about .text.experience .example table tbody {
		width: 100%;
	}
	
	#about .text.experience .example table tbody tr {
		display: flex;
		flex-wrap: wrap;
		height: calc(40px / 1366 * 1720);
		border-bottom: calc(1px / 1366 * 1720) solid #cecece;
	}
	
	#about .text.experience .example table tbody tr:last-child {
		border-bottom: none;
	}
	
	#about .text.experience .example table tbody tr th {
		flex-grow: 1;
		box-sizing: border-box;
		background: #f6f6f6;
		color: #322323;
		font-size: calc(14px / 1366 * 1720);
		font-weight: 400;
		line-height: calc(40px / 1366 * 1720);
		text-align: left;
		padding-left: calc(20px / 1366 * 1720);
	}
	
	#about .text.experience .example table tbody tr td {
		box-sizing: border-box;
		background: #ffffff;
		color: #322323;
		font-size: calc(14px / 1366 * 1720);
		font-weight: 400;
		line-height: calc(40px / 1366 * 1720);
		text-align: right;
		border-left: calc(1px / 1366 * 1720) solid #cecece;
		width: calc(195px / 1366 * 1720);
		padding-right: calc(20px / 1366 * 1720);
	}
	
	#about .text.experience .example table tbody tr td:first-of-type {
		border-left: none;
	}
	
	#about .text.experience .example table tbody tr.product td br {
		display: none;
	}
	
	#about .text.experience .example table tbody tr.sum th, #about .text .example table tbody tr.sum td {
		font-weight: 700;
	}
	
	#about .text.experience .example small {
		display: block;
		color: #322323;
		font-size: calc(10px / 1366 * 1720);
		font-weight: 400;
		line-height: calc(14px / 1366 * 1720);
		text-align: left;
		width: 100%;
		margin-bottom: calc(15px / 1366 * 1720);
	}
	
	#about .text.solution .trouble {
		width: calc(890px / 1366 * 1720);
		margin-left: calc(55px / 1366 * 1720);
	}
	
	#about .text.solution .trouble li {
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background: #f6f6f6;
		width: 100%;
		padding: calc(62px / 1366 * 1720) calc(20px / 1366 * 1720) calc(28px / 1366 * 1720) calc(10px / 1366 * 1720);
		margin-bottom: calc(5px / 1366 * 1720);
	}
	
	#about .text.solution .trouble li:last-child {
		margin-bottom: 0;
	}
	
	#about .text.solution .trouble li .problem {
		position: relative;
		box-sizing: border-box;
		width: calc(404px / 1366 * 1720);
	}
	
	#about .text.solution .trouble li .problem h5 {
		position: absolute;
		display: inline-block;
		height: calc(95px / 1366 * 1720);
		top: calc(-48px / 1366 * 1720);
		left: 0;
	}
	
	#about .text.solution .trouble li .problem h5 img {
		width: auto;
		height: 100%;
	}
	
	#about .text.solution .trouble li .problem p {
		position: absolute;
		color: #209fc4;
		font-size: calc(15px / 1366 * 1720);
		font-weight: 400;
		line-height: calc(28px / 1366 * 1720);
		text-align: justify;
		width: calc(300px / 1366 * 1720);
		top: calc(50px / 1366 * 1720);
		left: calc(104px / 1366 * 1720);
	}
	
	#about .text.solution .trouble li .our {
		position: relative;
		box-sizing: border-box;
		background: #ffffff;
		width: calc(409px / 1366 * 1720);
		min-height: calc(190px / 1366 * 1720);
		padding: calc(20px / 1366 * 1720) calc(30px / 1366 * 1720);
	}
	
	#about .text.solution .trouble li .our::after {
		position: absolute;
		display: block;
		content: "";
		background: url("../../img/goods/figure/arrow.svg") no-repeat;
		background-size: 100%;
		width: calc(32px / 1366 * 1720);
		height: calc(64px / 1366 * 1720);
		top: calc(63px / 1366 * 1720);
		left: calc(-15px / 1366 * 1720);
	}
	
	#about .text.solution .trouble li .our h5 {
		display: block;
		width: calc(141px / 1366 * 1720);
		margin-bottom: calc(10px / 1366 * 1720);
	}
	
	#about .text.solution .trouble li .our h5 img {
		width: 100%;
	}
	
	#about .text.solution .trouble li .our p {
		color: #322323;
		font-size: calc(15px / 1366 * 1720);
		font-weight: 400;
		line-height: calc(28px / 1366 * 1720);
		text-align: justify;
		width: 100%;
	}
	
	#about .text.solution .trouble li .our p span {
		font-weight: 700;
	}
	
	#about .result {
		background: linear-gradient(to bottom, #ffffff 0%, #ffffff 14%, #fff5ef 14%, #fff5ef 100%);
		width: 100%;
		height: calc(318px / 1366 * 1720);
		margin-bottom: calc(60px / 1366 * 1720);
	}
	
	#about .result .swiper {
		width: 100%;
		margin-bottom: calc(30px / 1366 * 1720);
	}
	
	#about .result .swiper .swiper-wrapper {
		width: 100%;
		transition-timing-function: linear;
	}
	
	#about .result .swiper .swiper-wrapper .swiper-slide {
		width: calc(258px / 1366 * 1720);
		margin: 0 calc(5px / 1366 * 1720);
	}
	
	#about .result .swiper .swiper-wrapper .swiper-slide img {
		display: block;
		width: 100%;
	}
	
	#about .result .swiper .swiper-wrapper .swiper-slide h5 {
		background: #ff6a1a;
		color: #ffffff;
		font-size: calc(12px / 1366 * 1720);
		font-weight: 700;
		line-height: calc(16px / 1366 * 1720);
		text-align: center;
		width: 100%;
		height: calc(16px / 1366 * 1720);
	}
	
	#about .result .swiper .swiper-wrapper .swiper-slide p {
		color: #808080;
		font-size: calc(12px / 1366 * 1720);
		font-weight: 400;
		line-height: calc(16px / 1366 * 1720);
		text-align: center;
		width: 100%;
		height: calc(16px / 1366 * 1720);
	}
	
	#about .result .link {
		width: calc(1000px / 1366 * 1720);
		margin-left: 50%;
		transform: translateX(-50%);
		padding-left: calc(180px / 1366 * 1720);
	}
	
	#about .result .link a {
		position: relative;
		display: block;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #ff9000 0%, #ff5f00 100%);
		border: calc(1px / 1366 * 1720) solid #ffffff;
		border-radius: calc(20px / 1366 * 1720);
		box-shadow: 0 0 calc(8px / 1366 * 1720) rgba(0, 0, 0, 0.25);
		color: #ffffff;
		font-size: calc(22px / 1366 * 1720);
		font-weight: 700;
		line-height: calc(32px / 1366 * 1720);
		text-align: center;
		width: calc(340px / 1366 * 1720);
		height: calc(80px / 1366 * 1720);
		padding-top: calc(5px / 1366 * 1720);
		margin: 0 auto;
	}
	
	#about .result .link a span {
		font-size: calc(26px / 1366 * 1720);
	}
	
	#about .result .link a::after {
		position: absolute;
		display: block;
		content: "";
		background: url("../../img/common/arrow_g.svg") no-repeat;
		background-size: 100% 100%;
		width: calc(18px / 1366 * 1720);
		height: calc(18px / 1366 * 1720);
		top: 50%;
		transform: translateY(-50%);
		right: calc(10px / 1366 * 1720);
	}
}

@media screen and (min-width: 1133px) and (max-width: 1719px) {
	#about h3 {
		position: relative;
		width: calc(1000vw / 13.66);
		height: calc(55vw / 13.66);
		margin-left: 50%;
		transform: translateX(-50%);
		padding-left: calc(180vw / 13.66);
		margin-bottom: calc(35vw / 13.66);
	}
	
	#about h3 .icon {
		position: absolute;
		width: calc(53vw / 13.66);
		bottom: calc(-8vw / 13.66);
		left: calc((55vw + 180vw) / 13.66);
	}
	
	#about h3 .en_title {
		position: absolute;
		color: #ffbe19;
		font-family: "copperplate", serif;
		font-size: calc(10vw / 13.66);
		font-weight: 700;
		line-height: 1em;
		font-style: normal;
		text-align: left;
		top: calc(5vw / 13.66);
		left: calc((117vw + 180vw) / 13.66);
	}
	
	#about h3 .title {
		position: absolute;
		background: linear-gradient(to right, #ff6a1a, #ff9e1a);
		background-clip: text;
		color: transparent;
		font-size: calc(32vw / 13.66);
		font-weight: 700;
		line-height: calc(44vw / 13.66);
		top: calc(17vw / 13.66);
		left: calc((117vw + 180vw) / 13.66);
	}
	
	#about h3 .title br {
		display: none;
	}
	
	#about .text {
		position: relative;
		width: calc(1000vw / 13.66);
		margin-left: 50%;
		transform: translateX(-50%);
		padding-left: calc(180vw / 13.66);
	}
	
	#about .text.intro {
		height: calc(345vw / 13.66);
		margin-bottom: calc(30vw / 13.66);
	}
	
	#about .text.total {
		height: calc(570vw / 13.66);
		margin-bottom: calc(50vw / 13.66);
	}
	
	#about .text.total:before {
		position: absolute;
		display: block;
		content: "";
		background: url("../../img/goods/silhouette.svg") no-repeat;
		background-size: 100%;
		width: calc(820vw / 13.66);
		height: calc(530vw / 13.66);
		bottom: 0;
		right: calc(90vw / 13.66);
	}
	
	#about .text.experience {
		margin-bottom: calc(50vw / 13.66);
	}
	
	#about .text.solution {
		margin-bottom: calc(87vw / 13.66);
	}
	
	#about .text h4 {
		position: relative;
		display: inline;
		background: linear-gradient(to bottom, transparent 0%, transparent 80%, #ffbfa3 80%, #ffbfa3 90%, transparent 90%);
		color: #322323;
		font-size: calc(26vw / 13.66);
		font-weight: 700;
		line-height: calc(45vw / 13.66);
		left: calc(55vw / 13.66);
	}
	
	#about .text h4 span {
		font-size: calc((26vw * 0.8) / 13.66);
	}
	
	#about .text.intro h4 br:nth-of-type(1), #about .text.intro h4 br:nth-of-type(3) {
		display: none;
	}
	
	#about .text.total h4 br:nth-of-type(1) {
		display: none;
	}
	
	#about .text.experience h4 br:nth-of-type(3) {
		display: none;
	}
	
	#about .text.solution h4 br:nth-of-type(2) {
		display: none;
	}
	
	#about .text>p {
		color: #322323;
		font-size: calc(15vw / 13.66);
		font-weight: 400;
		line-height: calc(28vw / 13.66);
		text-align: justify;
		width: calc(500vw / 13.66);
		margin: calc(20vw / 13.66) 0 0 calc(55vw / 13.66);
	}
	
	#about .text.experience>p {
		margin-bottom: calc(25vw / 13.66);
	}
	
	#about .text.solution>p {
		position: relative;
		z-index: 1;
		margin-bottom: calc(20vw / 13.66);
	}
	
	#about .text.intro>img {
		position: absolute;
		width: calc(373vw / 13.66);
		bottom: 0;
		right: calc(64vw / 13.66);
	}
	
	#about .text.total>img {
		position: absolute;
		z-index: 1;
		width: calc(297vw / 13.66);
		top: 0;
		right: calc(108vw / 13.66);
	}
	
	#about .text.experience>img {
		position: absolute;
		z-index: 1;
		width: calc(267vw / 13.66);
		top: calc(-10vw / 13.66);
		right: calc(108vw / 13.66);
	}
	
	#about .text.solution>img {
		position: absolute;
		z-index: 1;
		width: calc(397vw / 13.66);
		top: calc(-20vw / 13.66);
		right: calc(55vw / 13.66);
	}
	
	#about .text.total .scroll {
		overflow: inherit!important;
		position: absolute!important;
		width: calc(870vw / 13.66);
		bottom: calc(30vw / 13.66);
		right: calc(65vw / 13.66);
	}
	
	.scroll-hint-icon-wrap {
		display: none!important;
	}
	
	#about .text.total .scroll .development {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: baseline;
		width: 100%;
	}
	
	#about .text .development li {
		width: calc(170vw / 13.66);
	}
	
	#about .text .development li img {
		width: 100%;
	}
	
	#about .text.experience .achievement {
		width: calc(890vw / 13.66);
		margin: 0 0 calc(30vw / 13.66) calc(55vw / 13.66);
	}
	
	#about .text.experience .achievement .scroll {
		overflow: inherit!important;
		width: 100%;
	}
	
	#about .text.experience .achievement .scroll ul {
		width: 100%;
	}
	
	#about .text.experience .achievement .scroll ul li {
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background: #fff5ef;
		width: 100%;
		padding: calc(20vw / 13.66);
		margin-bottom: calc(6vw / 13.66);
	}
	
	#about .text.experience .achievement .scroll ul li:last-child {
		margin-bottom: 0;
	}
	
	#about .text.experience .achievement .scroll ul li .number {
		position: absolute;
		width: calc(67vw / 13.66);
		top: calc(10vw / 13.66);
		left: 0;
	}
	
	#about .text.experience .achievement .scroll ul li .photo {
		width: calc(303vw / 13.66);
		height: calc(195vw / 13.66);
	}
	
	#about .text.experience .achievement .scroll ul li .text {
		box-sizing: border-box;
		background: #ffffff;
		width: calc(527vw / 13.66);
		height: calc(195vw / 13.66);
		padding: calc(20vw / 13.66) calc(20vw / 13.66) 0;
		margin: 0;
		transform: none;
	}
	
	#about .text.experience .achievement .scroll ul li .text h5 {
		color: #ec6c00;
		font-size: calc(22vw / 13.66);
		font-weight: 700;
		line-height: 1em;
		text-align: left;
		margin-bottom: calc(13vw / 13.66);
	}
	
	#about .text.experience .achievement .scroll ul li .text p {
		color: #ec6c00;
		font-size: calc(15vw / 13.66);
		font-weight: 400;
		line-height: calc(22vw / 13.66);
		text-align: justify;
		width: 100%;
		margin: 0;
	}
	
	#about .text.experience .example {
		box-sizing: border-box;
		background: #f3f0e6;
		width: calc(1000vw / 13.66);
		height: calc(372vw / 13.66);
		padding: calc(20vw / 13.66) calc(55vw / 13.66) 0;
	}
	
	#about .text.experience .example h5 {
		color: #ff6a1a;
		font-size: calc(14vw / 13.66);
		font-weight: 700;
		line-height: 1em;
		text-align: left;
		margin-bottom: calc(10vw / 13.66);
	}
	
	#about .text.experience .example p {
		color: #322323;
		font-size: calc(14vw / 13.66);
		font-weight: 400;
		line-height: calc(22vw / 13.66);
		text-align: left;
		margin-bottom: calc(10vw / 13.66);
	}
	
	#about .text.experience .example p br.sp {
		display: none;
	}
	
	#about .text.experience .example table {
		width: 100%;
		margin-bottom: calc(13vw / 13.66);
	}
	
	#about .text.experience .example table tbody {
		width: 100%;
	}
	
	#about .text.experience .example table tbody tr {
		display: flex;
		flex-wrap: wrap;
		height: calc(40vw / 13.66);
		border-bottom: calc(1vw / 13.66) solid #cecece;
	}
	
	#about .text.experience .example table tbody tr:last-child {
		border-bottom: none;
	}
	
	#about .text.experience .example table tbody tr th {
		flex-grow: 1;
		box-sizing: border-box;
		background: #f6f6f6;
		color: #322323;
		font-size: calc(14vw / 13.66);
		font-weight: 400;
		line-height: calc(40vw / 13.66);
		text-align: left;
		padding-left: calc(20vw / 13.66);
	}
	
	#about .text.experience .example table tbody tr td {
		box-sizing: border-box;
		background: #ffffff;
		color: #322323;
		font-size: calc(14vw / 13.66);
		font-weight: 400;
		line-height: calc(40vw / 13.66);
		text-align: right;
		border-left: calc(1vw / 13.66) solid #cecece;
		width: calc(195vw / 13.66);
		padding-right: calc(20vw / 13.66);
	}
	
	#about .text.experience .example table tbody tr td:first-of-type {
		border-left: none;
	}
	
	#about .text.experience .example table tbody tr.product td br {
		display: none;
	}
	
	#about .text.experience .example table tbody tr.sum th, #about .text .example table tbody tr.sum td {
		font-weight: 700;
	}
	
	#about .text.experience .example small {
		display: block;
		color: #322323;
		font-size: calc(10vw / 13.66);
		font-weight: 400;
		line-height: calc(14vw / 13.66);
		text-align: left;
		width: 100%;
		margin-bottom: calc(15vw / 13.66);
	}
	
	#about .text.solution .trouble {
		width: calc(890vw / 13.66);
		margin-left: calc(55vw / 13.66);
	}
	
	#about .text.solution .trouble li {
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background: #f6f6f6;
		width: 100%;
		padding: calc(62vw / 13.66) calc(20vw / 13.66) calc(28vw / 13.66) calc(10vw / 13.66);
		margin-bottom: calc(5vw / 13.66);
	}
	
	#about .text.solution .trouble li:last-child {
		margin-bottom: 0;
	}
	
	#about .text.solution .trouble li .problem {
		position: relative;
		box-sizing: border-box;
		width: calc(404vw / 13.66);
	}
	
	#about .text.solution .trouble li .problem h5 {
		position: absolute;
		display: inline-block;
		height: calc(95vw / 13.66);
		top: calc(-48vw / 13.66);
		left: 0;
	}
	
	#about .text.solution .trouble li .problem h5 img {
		width: auto;
		height: 100%;
	}
	
	#about .text.solution .trouble li .problem p {
		position: absolute;
		color: #209fc4;
		font-size: calc(15vw / 13.66);
		font-weight: 400;
		line-height: calc(28vw / 13.66);
		text-align: justify;
		width: calc(300vw / 13.66);
		top: calc(50vw / 13.66);
		left: calc(104vw / 13.66);
	}
	
	#about .text.solution .trouble li .our {
		position: relative;
		box-sizing: border-box;
		background: #ffffff;
		width: calc(409vw / 13.66);
		min-height: calc(190vw / 13.66);
		padding: calc(20vw / 13.66) calc(30vw / 13.66);
	}
	
	#about .text.solution .trouble li .our::after {
		position: absolute;
		display: block;
		content: "";
		background: url("../../img/goods/figure/arrow.svg") no-repeat;
		background-size: 100%;
		width: calc(32vw / 13.66);
		height: calc(64vw / 13.66);
		top: calc(63vw / 13.66);
		left: calc(-15vw / 13.66);
	}
	
	#about .text.solution .trouble li .our h5 {
		display: block;
		width: calc(141vw / 13.66);
		margin-bottom: calc(10vw / 13.66);
	}
	
	#about .text.solution .trouble li .our h5 img {
		width: 100%;
	}
	
	#about .text.solution .trouble li .our p {
		color: #322323;
		font-size: calc(15vw / 13.66);
		font-weight: 400;
		line-height: calc(28vw / 13.66);
		text-align: justify;
		width: 100%;
	}
	
	#about .text.solution .trouble li .our p span {
		font-weight: 700;
	}
	
	#about .result {
		background: linear-gradient(to bottom, #ffffff 0%, #ffffff 14%, #fff5ef 14%, #fff5ef 100%);
		width: 100%;
		height: calc(318vw / 13.66);
		margin-bottom: calc(60vw / 13.66);
	}
	
	#about .result .swiper {
		width: 100%;
		margin-bottom: calc(30vw / 13.66);
	}
	
	#about .result .swiper .swiper-wrapper {
		width: 100%;
		transition-timing-function: linear;
	}
	
	#about .result .swiper .swiper-wrapper .swiper-slide {
		width: calc(258vw / 13.66);
		margin: 0 calc(5vw / 13.66);
	}
	
	#about .result .swiper .swiper-wrapper .swiper-slide img {
		display: block;
		width: 100%;
	}
	
	#about .result .swiper .swiper-wrapper .swiper-slide h5 {
		background: #ff6a1a;
		color: #ffffff;
		font-size: calc(12vw / 13.66);
		font-weight: 700;
		line-height: calc(16vw / 13.66);
		text-align: center;
		width: 100%;
		height: calc(16vw / 13.66);
	}
	
	#about .result .swiper .swiper-wrapper .swiper-slide p {
		color: #808080;
		font-size: calc(12vw / 13.66);
		font-weight: 400;
		line-height: calc(16vw / 13.66);
		text-align: center;
		width: 100%;
		height: calc(16vw / 13.66);
	}
	
	#about .result .link {
		width: calc(1000vw / 13.66);
		margin-left: 50%;
		transform: translateX(-50%);
		padding-left: calc(180vw / 13.66);
	}
	
	#about .result .link a {
		position: relative;
		display: block;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #ff9000 0%, #ff5f00 100%);
		border: calc(1vw / 13.66) solid #ffffff;
		border-radius: calc(20vw / 13.66);
		box-shadow: 0 0 calc(8vw / 13.66) rgba(0, 0, 0, 0.25);
		color: #ffffff;
		font-size: calc(22vw / 13.66);
		font-weight: 700;
		line-height: calc(32vw / 13.66);
		text-align: center;
		width: calc(340vw / 13.66);
		height: calc(80vw / 13.66);
		padding-top: calc(5vw / 13.66);
		margin: 0 auto;
	}
	
	#about .result .link a span {
		font-size: calc(26vw / 13.66);
	}
	
	#about .result .link a::after {
		position: absolute;
		display: block;
		content: "";
		background: url("../../img/common/arrow_g.svg") no-repeat;
		background-size: 100% 100%;
		width: calc(18vw / 13.66);
		height: calc(18vw / 13.66);
		top: 50%;
		transform: translateY(-50%);
		right: calc(10vw / 13.66);
	}
}

@media screen and (min-width: 744px) and (max-width: 1132px) {
	#about h3 {
		position: relative;
		width: 100%;
		height: calc(55vw / 7.44);
		margin-bottom: calc(20vw / 7.44);
	}
	
	#about h3 .icon {
		position: absolute;
		width: calc(53vw / 7.44);
		bottom: calc(-8vw / 7.44);
		left: calc(67vw / 7.44);
	}
	
	#about h3 .en_title {
		position: absolute;
		color: #ffbe19;
		font-family: "copperplate", serif;
		font-size: calc(10vw / 7.44);
		font-weight: 700;
		line-height: 1em;
		font-style: normal;
		text-align: left;
		top: calc(5vw / 7.44);
		left: calc(128vw / 7.44);
	}
	
	#about h3 .title {
		position: absolute;
		background: linear-gradient(to right, #ff6a1a, #ff9e1a);
		background-clip: text;
		color: transparent;
		font-size: calc(32vw / 7.44);
		font-weight: 700;
		line-height: calc(44vw / 7.44);
		top: calc(17vw / 7.44);
		left: calc(128vw / 7.44);
	}
	
	#about h3 .title br {
		display: none;
	}
	
	#about .text {
		position: relative;
		width: 100%;
	}
	
	#about .text.intro {
		height: calc(425vw / 7.44);
		margin-bottom: calc(20vw / 7.44);
	}
	
	#about .text.total {
		height: calc(620vw / 7.44);
		margin-bottom: calc(50vw / 7.44);
	}
	
	#about .text.solution {
		margin-bottom: calc(80vw / 7.44);
	}
	
	#about .text.total:before {
		position: absolute;
		display: block;
		content: "";
		background: url("../../img/goods/silhouette.svg") no-repeat;
		background-size: 100%;
		width: calc(572vw / 7.44);
		height: calc(370vw / 7.44);
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	
	#about .text.experience {
		margin-bottom: calc(50vw / 7.44);
	}
	
	#about .text h4 {
		position: relative;
		display: inline;
		background: linear-gradient(to bottom, transparent 0%, transparent 80%, #ffbfa3 80%, #ffbfa3 90%, transparent 90%);
		color: #322323;
		font-size: calc(26vw / 7.44);
		font-weight: 700;
		line-height: calc(45vw / 7.44);
		left: calc(66vw / 7.44);
	}
	
	#about .text h4 span {
		font-size: calc((26vw * 0.8) / 7.44);
	}
	
	#about .text.intro h4 br:nth-of-type(1), #about .text.intro h4 br:nth-of-type(3) {
		display: none;
	}
	
	#about .text.total h4 br:nth-of-type(1) {
		display: none;
	}
	
	#about .text.solution h4 br:nth-of-type(2) {
		display: none;
	}
	
	#about .text>p {
		color: #322323;
		font-size: calc(15vw / 7.44);
		font-weight: 400;
		line-height: calc(28vw / 7.44);
		text-align: justify;
		width: calc(306vw / 7.44);
		margin: calc(27vw / 7.44) 0 0 calc(66vw / 7.44);
	}
	
	#about .text.total>p {
		margin-top: calc(10vw / 7.44);
	}
	
	#about .text.experience>p {
		margin-top: calc(10vw / 7.44);
		margin-bottom: calc(10vw / 7.44);
	}
	
	#about .text.solution>p {
		width: calc(294vw / 7.44);
		margin-top: calc(10vw / 7.44);
		margin-bottom: calc(30vw / 7.44);
	}
	
	#about .text.intro>img {
		position: absolute;
		width: calc(300vw / 7.44);
		bottom: 0;
		right: calc(50vw / 7.44);
	}
	
	#about .text.total>img {
		position: absolute;
		z-index: 1;
		width: calc(238vw / 7.44);
		bottom: calc(188vw / 7.44);
		right: calc(100vw / 7.44);
	}
	
	#about .text.experience>img {
		position: absolute;
		width: calc(213vw / 7.44);
		top: calc(110vw / 7.44);
		right: calc(100vw / 7.44);
	}
	
	#about .text.solution>img {
		position: absolute;
		width: calc(317vw / 7.44);
		top: calc(110vw / 7.44);
		right: calc(50vw / 7.44);
	}
	
	#about .text.total .scroll {
		position: absolute!important;
		overflow-x: scroll;
		scrollbar-width: none;
		width: 100%;
		bottom: calc(30vw / 7.44);
	}
	
	#about .text.total .scroll-hint-icon {
		position: absolute;
		box-sizing: border-box;
		width: calc(130vw / 7.44);
		height: calc(90vw / 7.44);
		border-radius: calc(20vw / 7.44);
		top: 50%;
		transform: translateY(-50%);
		left: calc(307vw / 7.44);
		padding: calc(6vw / 7.44) 0 0 0;
	}
	
	#about .text.total .scroll-hint-icon:before {
		width: calc(44vw / 7.44);
		height: calc(44vw / 7.44);
		margin-top: calc(14vw / 7.44);
	}
	
	#about .text.total .scroll-hint-icon:after {
		position: absolute;
		background-size: 100%;
		width: calc(44vw / 7.44);
		height: calc(15vw / 7.44);
		left: 44.5%;
	}
	
	#about .text.total .scroll-hint-text {
		font-size: calc(12vw / 7.44);
		font-weight: 700;
		line-height: 1em;
		margin-top: calc(6vw / 7.44);
	}
	
	#about .text.total .js-scrollablet::-webkit-scrollbar {
		display: none;
	}
	
	#about .text.total .scroll .development {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: baseline;
		width: calc(870vw / 7.44);
		padding: 0 calc(66vw / 7.44);
	}
	
	#about .text .development li {
		width: calc(170vw / 7.44);
	}
	
	#about .text .development li img {
		width: 100%;
	}
	
	#about .text.experience .achievement {
		width: 100%;
		height: calc(568vw / 7.44);
		margin-bottom: calc(30vw / 7.44);
	}
	
	#about .text.experience .achievement .scroll {
		position: absolute!important;
		overflow-x: scroll;
		scrollbar-width: none;
		width: 100%;
	}
	
	#about .text.experience .achievement .scroll-hint-icon {
		position: absolute;
		box-sizing: border-box;
		width: calc(130vw / 7.44);
		height: calc(90vw / 7.44);
		border-radius: calc(20vw / 7.44);
		top: 50%;
		transform: translateY(-50%);
		left: calc(307vw / 7.44);
		padding: calc(6vw / 7.44) 0 0 0;
	}
	
	#about .text.experience .achievement .scroll-hint-icon:before {
		width: calc(44vw / 7.44);
		height: calc(44vw / 7.44);
		margin-top: calc(14vw / 7.44);
	}
	
	#about .text.experience .achievement .scroll-hint-icon:after {
		position: absolute;
		background-size: 100%;
		width: calc(44vw / 7.44);
		height: calc(15vw / 7.44);
		left: 44.5%;
	}
	
	#about .text.experience .achievement .scroll-hint-text {
		font-size: calc(12vw / 7.44);
		font-weight: 700;
		line-height: 1em;
		margin-top: calc(6vw / 7.44);
	}
	
	#about .text.experience .achievement .js-scrollablet::-webkit-scrollbar {
		display: none;
	}
	
	#about .text.experience .achievement .scroll ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: calc(1049vw / 7.44);
		height: 100%;
		padding: 0 calc(66vw / 7.44);
	}
	
	#about .text.experience .achievement .scroll ul li {
		position: relative;
		box-sizing: border-box;
		background: #fff5ef;
		width: calc(343vw / 7.44);
		padding: calc(20vw / 7.44);
	}
	
	#about .text.experience .achievement .scroll ul li .number {
		position: absolute;
		width: calc(67vw / 7.44);
		top: calc(10vw / 7.44);
		left: 0;
	}
	
	#about .text.experience .achievement .scroll ul li .photo {
		width: 100%;
		margin-bottom: calc(18vw / 7.44);
	}
	
	#about .text.experience .achievement .scroll ul li .text {
		box-sizing: border-box;
		background: #ffffff;
		width: 100%;
		height: calc(315vw / 7.44);
		padding: calc(20vw / 7.44) calc(23vw / 7.44) 0;
		margin: 0;
		transform: none;
	}
	
	#about .text.experience .achievement .scroll ul li .text h5 {
		color: #ec6c00;
		font-size: calc(22vw / 7.44);
		font-weight: 700;
		line-height: 1em;
		text-align: left;
		margin-bottom: calc(13vw / 7.44);
	}
	
	#about .text.experience .achievement .scroll ul li .text p {
		color: #ec6c00;
		font-size: calc(15vw / 7.44);
		font-weight: 400;
		line-height: calc(22vw / 7.44);
		text-align: justify;
		width: 100%;
		margin: 0;
	}
	
	#about .text.experience .example {
		box-sizing: border-box;
		background: #f3f0e6;
		width: 100%;
		height: calc(398vw / 7.44);
		padding: calc(20vw / 7.44) calc(66vw / 7.44) 0;
	}
	
	#about .text.experience .example h5 {
		color: #ff6a1a;
		font-size: calc(14vw / 7.44);
		font-weight: 700;
		line-height: 1em;
		text-align: left;
		margin-bottom: calc(10vw / 7.44);
	}
	
	#about .text.experience .example p {
		color: #322323;
		font-size: calc(14vw / 7.44);
		font-weight: 400;
		line-height: calc(22vw / 7.44);
		text-align: left;
		margin-bottom: calc(10vw / 7.44);
	}
	
	#about .text.experience .example p br.sp {
		display: none;
	}
	
	#about .text.experience .example .scroll {
		position: absolute!important;
		overflow-x: scroll;
		scrollbar-width: none;
		width: calc(612vw / 7.44);
		margin: 0 auto;
	}
	
	#about .text.experience .example .scroll-hint-icon {
		position: absolute;
		box-sizing: border-box;
		width: calc(130vw / 7.44);
		height: calc(90vw / 7.44);
		border-radius: calc(20vw / 7.44);
		top: 50%;
		transform: translateY(-50%);
		left: calc(240vw / 7.44);
		padding: calc(6vw / 7.44) 0 0 0;
	}
	
	#about .text.experience .example .scroll-hint-icon:before {
		width: calc(44vw / 7.44);
		height: calc(44vw / 7.44);
		margin-top: calc(14vw / 7.44);
	}
	
	#about .text.experience .example .scroll-hint-icon:after {
		position: absolute;
		background-size: 100%;
		width: calc(44vw / 7.44);
		height: calc(15vw / 7.44);
		left: 44.5%;
	}
	
	#about .text.experience .example .scroll-hint-text {
		font-size: calc(12vw / 7.44);
		font-weight: 700;
		line-height: 1em;
		margin-top: calc(6vw / 7.44);
	}
	
	#about .text.experience .example .js-scrollablet::-webkit-scrollbar {
		display: none;
	}
	
	#about .text.experience .example table {
		width: calc(823vw / 7.44);
		margin-bottom: calc(8vw / 7.44);
	}
	
	#about .text.experience .example table tbody {
		width: 100%;
	}
	
	#about .text.experience .example table tbody tr {
		display: flex;
		flex-wrap: wrap;
		height: calc(40vw / 7.44);
		border-bottom: calc(1vw / 7.44) solid #cecece;
	}
	
	#about .text.experience .example table tbody tr:last-child {
		border-bottom: none;
	}
	
	#about .text.experience .example table tbody tr th {
		flex-grow: 1;
		box-sizing: border-box;
		background: #f6f6f6;
		color: #322323;
		font-size: calc(14vw / 7.44);
		font-weight: 400;
		line-height: calc(40vw / 7.44);
		text-align: left;
		padding-left: calc(20vw / 7.44);
	}
	
	#about .text.experience .example table tbody tr td {
		box-sizing: border-box;
		background: #ffffff;
		color: #322323;
		font-size: calc(14vw / 7.44);
		font-weight: 400;
		line-height: calc(40vw / 7.44);
		text-align: right;
		border-left: calc(1vw / 7.44) solid #cecece;
		width: calc(185vw / 7.44);
		padding-right: calc(20vw / 7.44);
	}
	
	#about .text.experience .example table tbody tr.product td br {
		display: none;
	}
	
	#about .text.experience .example table tbody tr td:first-of-type {
		border-left: none;
	}
	
	#about .text.experience .example table tbody tr.sum th, #about .text.experience .example table tbody tr.sum td {
		font-weight: 700;
	}
	
	#about .text.experience .example small {
		position: absolute;
		display: block;
		color: #322323;
		font-size: calc(10vw / 7.44);
		font-weight: 400;
		line-height: calc(14vw / 7.44);
		text-align: left;
		width: calc(612vw / 7.44);
		bottom: calc(19vw / 7.44);
	}
	
	#about .text.solution .trouble {
		position: relative;
		overflow-y: scroll;
		box-sizing: border-box;
		background: #f6f6f6;
		width: calc(612vw / 7.44);
		height: calc(490vw / 7.44);
		margin: 0 auto;
	}
	
	#about .text.solution .trouble li {
		width: calc(570vw / 7.44);
		padding-bottom: calc(20vw / 7.44);
		margin: 0 auto;
	}
	
	#about .text.solution .trouble::after {
		position: sticky;
		display: block;
		content: "";
		background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
		width: 100%;
		height: calc(20vw / 7.44);
		bottom: 0;
	}
	
	#about .text.solution .trouble li:first-child {
		padding-top: calc(15vw / 7.44);
	}
	
	#about .text.solution .trouble li .problem {
		width: 100%;
		margin-bottom: calc(25vw / 7.44);
	}
	
	#about .text.solution .trouble li .problem h5 {
		display: inline-block;
		height: calc(95vw / 7.44);
		margin-bottom: calc(10vw / 7.44);
	}
	
	#about .text.solution .trouble li .problem h5 img {
		width: auto;
		height: 100%
	}
	
	#about .text.solution .trouble li .problem p {
		box-sizing: border-box;
		color: #209fc4;
		font-size: calc(15vw / 7.44);
		font-weight: 400;
		line-height: calc(28vw / 7.44);
		text-align: justify;
		width: 100%;
		padding-left: calc(104vw / 7.44);
	}
	
	#about .text.solution .trouble li .our {
		position: relative;
		box-sizing: border-box;
		background: #ffffff;
		width: 100%;
		padding: calc(20vw / 7.44) calc(30vw / 7.44) calc(15vw / 7.44) calc(104vw / 7.44);
	}
	
	#about .text.solution .trouble li .our::after {
		position: absolute;
		display: block;
		content: "";
		background: url("../../img/goods/figure/arrow.svg") no-repeat;
		background-size: 100%;
		width: calc(32vw / 7.44);
		height: calc(64vw / 7.44);
		transform: rotate(90deg);
		transform-origin: top left;
		top: calc(-20vw / 7.44);
		left: calc(317vw / 7.44);
	}
	
	#about .text.solution .trouble li .our h5 {
		width: calc(141vw / 7.44);
		margin-bottom: calc(15vw / 7.44);
	}
	
	#about .text.solution .trouble li .our h5 img {
		width: 100%;
	}
	
	#about .text.solution .trouble li .our p {
		box-sizing: border-box;
		color: #322323;
		font-size: calc(15vw / 7.44);
		font-weight: 400;
		line-height: calc(28vw / 7.44);
		text-align: justify;
		width: 100%;
	}
	
	#about .text.solution .trouble li .our p span {
		font-weight: 700;
	}
	
	#about .result {
		background: linear-gradient(to bottom, #ffffff 0%, #ffffff 14%, #fff5ef 14%, #fff5ef 100%);
		width: 100%;
		height: calc(318vw / 7.44);
		margin-bottom: calc(50vw / 7.44);
	}
	
	#about .result .swiper {
		width: 100%;
		margin-bottom: calc(30vw / 7.44);
	}
	
	#about .result .swiper .swiper-wrapper {
		width: 100%;
		transition-timing-function: linear;
	}
	
	#about .result .swiper .swiper-wrapper .swiper-slide {
		width: calc(258vw / 7.44);
		margin: 0 calc(5vw / 7.44);
	}
	
	#about .result .swiper .swiper-wrapper .swiper-slide img {
		display: block;
		width: 100%;
	}
	
	#about .result .swiper .swiper-wrapper .swiper-slide h5 {
		background: #ff6a1a;
		color: #ffffff;
		font-size: calc(12vw / 7.44);
		font-weight: 700;
		line-height: calc(16vw / 7.44);
		text-align: center;
		width: 100%;
		height: calc(16vw / 7.44);
	}
	
	#about .result .swiper .swiper-wrapper .swiper-slide p {
		color: #808080;
		font-size: calc(12vw / 7.44);
		font-weight: 400;
		line-height: calc(16vw / 7.44);
		text-align: center;
		width: 100%;
		height: calc(16vw / 7.44);
	}
	
	#about .result .link {
		width: 100%;
	}
	
	#about .result .link a {
		position: relative;
		display: block;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #ff9000 0%, #ff5f00 100%);
		border: calc(1vw / 7.44) solid #ffffff;
		border-radius: calc(20vw / 7.44);
		box-shadow: 0 0 calc(8vw / 7.44) rgba(0, 0, 0, 0.25);
		color: #ffffff;
		font-size: calc(22vw / 7.44);
		font-weight: 700;
		line-height: calc(32vw / 7.44);
		text-align: center;
		width: calc(340vw / 7.44);
		height: calc(80vw / 7.44);
		padding-top: calc(5vw / 7.44);
		margin: 0 auto;
	}
	
	#about .result .link a span {
		font-size: calc(26vw / 7.44);
	}
	
	#about .result .link a::after {
		position: absolute;
		display: block;
		content: "";
		background: url("../../img/common/arrow_g.svg") no-repeat;
		background-size: 100% 100%;
		width: calc(18vw / 7.44);
		height: calc(18vw / 7.44);
		top: 50%;
		transform: translateY(-50%);
		right: calc(10vw / 7.44);
	}
}

@media screen and (max-width: 743px) {
	#about h3 {
		position: relative;
		width: 100%;
		height: calc(40vw / 3.9);
		margin-bottom: calc(60vw / 3.9);
	}
	
	#about h3 .icon {
		position: absolute;
		width: calc(42vw / 3.9);
		bottom: calc(-4vw / 3.9);
		left: calc(26vw / 3.9);
	}
	
	#about h3 .en_title {
		position: absolute;
		color: #ffbe19;
		font-family: "copperplate", serif;
		font-size: calc(8vw / 3.9);
		font-weight: 700;
		line-height: 1em;
		font-style: normal;
		text-align: left;
		top: 0;
		left: calc(73vw / 3.9);
	}
	
	#about h3 .title {
		position: absolute;
		background: linear-gradient(to right, #ff6a1a, #ff9e1a);
		background-clip: text;
		color: transparent;
		font-size: calc(30vw / 3.9);
		font-weight: 700;
		line-height: calc(40vw / 3.9);
		top: calc(6vw / 3.9);
		left: calc(73vw / 3.9);
	}
	
	#about .text {
		position: relative;
		width: 100%;
	}
	
	#about .text.intro {
		margin-bottom: calc(35vw / 3.9);
	}
	
	#about .text.total {
		height: calc(970vw / 3.9);
		margin-bottom: calc(50vw / 3.9);
	}
	
	#about .text.experience {
		margin-bottom: calc(50vw / 3.9);
	}
	
	#about .text.total:before {
		position: absolute;
		display: block;
		content: "";
		background: url("../../img/goods/silhouette.svg") no-repeat;
		background-size: 100%;
		width: 100%;
		height: calc(252vw / 3.9);
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	
	#about .text h4 {
		position: relative;
		display: inline;
		background: linear-gradient(to bottom, transparent 0%, transparent 80%, #ffbfa3 80%, #ffbfa3 90%, transparent 90%);
		color: #322323;
		font-size: calc(24vw / 3.9);
		font-weight: 700;
		line-height: calc(42vw / 3.9);
		left: calc(25vw / 3.9);
	}
	
	#about .text h4 span {
		font-size: calc((24vw * 0.8) / 3.9);
	}
	
	#about .text.quality h4 br:nth-of-type(2) {
		display: none;
	}
	
	#about .text>p {
		color: #322323;
		font-size: calc(16vw / 3.9);
		font-weight: 400;
		line-height: calc(28vw / 3.9);
		text-align: justify;
		width: calc(340vw / 3.9);
		margin: 0 auto calc(10vw / 3.9);
	}
	
	#about .text.lot>p {
		margin-bottom: calc(25vw / 3.9);
	}
	
	#about .text>img {
		display: block;
	}
	
	#about .text.intro>img {
		width: calc(300vw / 3.9);
		margin: 0 0 calc(25vw / 3.9) calc(40vw / 3.9);
	}
	
	#about .text.total>img {
		width: calc(240vw / 3.9);
		margin: calc(25vw / 3.9) auto calc(35vw / 3.9);
	}
	
	#about .text.experience>img {
		width: calc(213vw / 3.9);
		margin: calc(20vw / 3.9) auto calc(40vw / 3.9);
	}
	
	#about .text.solution>img {
		width: calc(317vw / 3.9);
		margin: calc(20vw / 3.9) auto calc(30vw / 3.9);
	}
	
	#about .text.total .scroll {
		position: absolute!important;
		overflow-x: scroll;
		scrollbar-width: none;
		width: 100%;
		bottom: calc(13vw / 3.9);
	}
	
	#about .text.total .scroll-hint-icon {
		position: absolute;
		box-sizing: border-box;
		width: calc(130vw / 3.9);
		height: calc(90vw / 3.9);
		border-radius: calc(20vw / 3.9);
		top: 50%;
		transform: translateY(-50%);
		left: calc(130vw / 3.9);
		padding: calc(6vw / 3.9) 0 0 0;
	}
	
	#about .text.total .scroll-hint-icon:before {
		width: calc(44vw / 3.9);
		height: calc(44vw / 3.9);
		margin-top: calc(14vw / 3.9);
	}
	
	#about .text.total .scroll-hint-icon:after {
		position: absolute;
		background-size: 100%;
		width: calc(44vw / 3.9);
		height: calc(15vw / 3.9);
		left: 44.5%;
	}
	
	#about .text.total .scroll-hint-text {
		font-size: calc(12vw / 3.9);
		font-weight: 700;
		line-height: 1em;
		margin-top: calc(6vw / 3.9);
	}
	
	#about .text.total .js-scrollablet::-webkit-scrollbar {
		display: none;
	}
	
	#about .text.total .scroll .development {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: baseline;
		width: calc(870vw / 3.9);
		padding: 0 calc(25vw / 3.9);
	}
	
	#about .text .development li {
		width: calc(170vw / 3.9);
	}
	
	#about .text .development li img {
		width: 100%;
	}
	
	#about .text.experience .achievement {
		width: 100%;
		height: calc(570vw / 3.9);
		margin-bottom: calc(34vw / 3.9);
	}
	
	#about .text.experience .achievement .scroll {
		position: absolute!important;
		overflow-x: scroll;
		scrollbar-width: none;
		width: 100%;
		height: calc(570vw / 3.9);
	}
	
	#about .text.experience .achievement .scroll-hint-icon {
		position: absolute;
		box-sizing: border-box;
		width: calc(130vw / 3.9);
		height: calc(90vw / 3.9);
		border-radius: calc(20vw / 3.9);
		top: 50%;
		transform: translateY(-50%);
		left: calc(130vw / 3.9);
		padding: calc(6vw / 3.9) 0 0 0;
	}
	
	#about .text.experience .achievement .scroll-hint-icon:before {
		width: calc(44vw / 3.9);
		height: calc(44vw / 3.9);
		margin-top: calc(14vw / 3.9);
	}
	
	#about .text.experience .achievement .scroll-hint-icon:after {
		position: absolute;
		background-size: 100%;
		width: calc(44vw / 3.9);
		height: calc(15vw / 3.9);
		left: 44.5%;
	}
	
	#about .text.experience .achievement .scroll-hint-text {
		font-size: calc(12vw / 3.9);
		font-weight: 700;
		line-height: 1em;
		margin-top: calc(6vw / 3.9);
	}
	
	#about .text.experience .achievement .js-scrollablet::-webkit-scrollbar {
		display: none;
	}
	
	#about .text.experience .achievement .scroll ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: calc(842vw / 3.9);
		padding: 0 calc(25vw / 3.9);
	}
	
	#about .text.experience .achievement .scroll ul li {
		position: relative;
		box-sizing: border-box;
		background: #fff5ef;
		width: calc(274vw / 3.9);
		padding: calc(16vw / 3.9);
	}
	
	#about .text.experience .achievement .scroll ul li .number {
		position: absolute;
		width: calc(54vw / 3.9);
		top: calc(8vw / 3.9);
		left: 0;
	}
	
	#about .text.experience .achievement .scroll ul li .photo {
		width: 100%;
		margin-bottom: calc(16vw / 3.9);
	}
	
	#about .text.experience .achievement .scroll ul li .text {
		box-sizing: border-box;
		background: #ffffff;
		width: 100%;
		height: calc(366vw / 3.9);
		padding: calc(15vw / 3.9) calc(20vw / 3.9) 0;
		margin: 0;
		transform: none;
	}
	
	#about .text.experience .achievement .scroll ul li .text h5 {
		color: #ec6c00;
		font-size: calc(20vw / 3.9);
		font-weight: 700;
		line-height: 1em;
		text-align: left;
		margin-bottom: calc(10vw / 3.9);
	}
	
	#about .text.experience .achievement .scroll ul li .text p {
		color: #ec6c00;
		font-size: calc(15vw / 3.9);
		font-weight: 400;
		line-height: calc(22vw / 3.9);
		text-align: justify;
		width: 100%;
		margin: 0;
	}
	
	#about .text.experience .example {
		box-sizing: border-box;
		background: #f3f0e6;
		width: 100%;
		padding: calc(30vw / 3.9) 0 calc(16vw / 3.9);
	}
	
	#about .text.experience .example h5 {
		color: #ff6a1a;
		font-size: calc(14vw / 3.9);
		font-weight: 700;
		line-height: 1em;
		text-align: left;
		margin: 0 0 calc(10vw / 3.9) calc(25vw / 3.9);
	}
	
	#about .text.experience .example p {
		color: #322323;
		font-size: calc(14vw / 3.9);
		font-weight: 400;
		line-height: calc(22vw / 3.9);
		text-align: left;
		margin: 0 0 calc(10vw / 3.9)calc(25vw / 3.9);
	}
	
	#about .text.experience .example .scroll {
		overflow-x: scroll;
		scrollbar-width: none;
		box-sizing: border-box;
		width: 100%;
		padding: 0 calc(20vw / 3.9);
		margin-bottom: calc(10vw / 3.9);
	}
	
	#about .text.experience .example .scroll-hint-icon {
		position: absolute;
		box-sizing: border-box;
		width: calc(130vw / 3.9);
		height: calc(90vw / 3.9);
		border-radius: calc(20vw / 3.9);
		top: 50%;
		transform: translateY(-50%);
		left: calc(130vw / 3.9);
		padding: calc(6vw / 3.9) 0 0 0;
	}
	
	#about .text.experience .example .scroll-hint-icon:before {
		width: calc(44vw / 3.9);
		height: calc(44vw / 3.9);
		margin-top: calc(14vw / 3.9);
	}
	
	#about .text.experience .example .scroll-hint-icon:after {
		position: absolute;
		background-size: 100%;
		width: calc(44vw / 3.9);
		height: calc(15vw / 3.9);
		left: 44.5%;
	}
	
	#about .text.experience .example .scroll-hint-text {
		font-size: calc(12vw / 3.9);
		font-weight: 700;
		line-height: 1em;
		margin-top: calc(6vw / 3.9);
	}
	
	#about .text.experience .example .js-scrollablet::-webkit-scrollbar {
		display: none;
	}
	
	#about .text .example table {
		width: calc(537vw / 3.9);
	}
	
	#about .text .example table tbody {
		width: 100%;
	}
	
	#about .text .example table tbody tr {
		display: flex;
		flex-wrap: wrap;
		height: calc(40vw / 3.9);
		border-bottom: calc(1vw / 3.9) solid #cecece;
	}
	
	#about .text .example table tbody tr.product {
		height: calc(80vw / 3.9);
	}
	
	#about .text .example table tbody tr:last-child {
		border-bottom: none;
	}
	
	#about .text .example table tbody tr th {
		flex-grow: 1;
		box-sizing: border-box;
		background: #f6f6f6;
		color: #322323;
		font-size: calc(14vw / 3.9);
		font-weight: 400;
		line-height: calc(40vw / 3.9);
		text-align: left;
		padding-left: calc(10vw / 3.9);
	}
	
	#about .text .example table tbody tr.product th {
		line-height: calc(80vw / 3.9);
	}
	
	#about .text .example table tbody tr td {
		box-sizing: border-box;
		background: #ffffff;
		color: #322323;
		font-size: calc(14vw / 3.9);
		font-weight: 400;
		line-height: calc(40vw / 3.9);
		text-align: right;
		border-left: calc(1vw / 3.9) solid #cecece;
		width: calc(120vw / 3.9);
		padding-right: calc(10vw / 3.9);
	}
	
	#about .text .example table tbody tr td:first-of-type {
		border-left: none;
	}
	
	#about .text .example table tbody tr.product td {
		line-height: calc(22vw / 3.9);
		padding-top: calc(16vw / 3.9);
	}
	
	#about .text .example table tbody tr.sum th, #about .text .example table tbody tr.sum td {
		font-weight: 700;
	}
	
	#about .text .example small {
		display: block;
		color: #322323;
		font-size: calc(10vw / 3.9);
		font-weight: 400;
		line-height: calc(14vw / 3.9);
		text-align: left;
		width: 100%;
		margin-left: calc(25vw / 3.9);
	}
	
	#about .text.solution .trouble {
		position: relative;
		overflow-y: scroll;
		box-sizing: border-box;
		background: #f6f6f6;
		width: 100%;
		height: calc(600vw / 3.9);
		margin: 0 auto calc(80vw / 3.9);
	}
	
	#about .text.solution .trouble li {
		width: calc(340vw / 3.9);
		padding-bottom: calc(20vw / 3.9);
		margin: 0 auto;
	}
	
	#about .text.solution .trouble::after {
		position: sticky;
		display: block;
		content: "";
		background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
		width: 100%;
		height: calc(20vw / 3.9);
		bottom: 0;
	}
	
	#about .text.solution .trouble li:first-child {
		padding-top: calc(20vw / 3.9);
	}
	
	#about .text.solution .trouble li .problem {
		width: 100%;
		margin-bottom: calc(36vw / 3.9);
	}
	
	#about .text.solution .trouble li .problem h5 {
		display: inline-block;
		height: calc(95vw / 3.9);
		margin-bottom: calc(20vw / 3.9);
	}
	
	#about .text.solution .trouble li .problem h5 img {
		width: auto;
		height: 100%
	}
	
	#about .text.solution .trouble li .problem p {
		box-sizing: border-box;
		color: #209fc4;
		font-size: calc(16vw / 3.9);
		font-weight: 400;
		line-height: calc(28vw / 3.9);
		text-align: justify;
		width: 100%;
	}
	
	#about .text.solution .trouble li .our {
		position: relative;
		box-sizing: border-box;
		background: #ffffff;
		width: 100%;
		padding: calc(20vw / 3.9);
	}
	
	#about .text.solution .trouble li .our::after {
		position: absolute;
		display: block;
		content: "";
		background: url("../../img/goods/figure/arrow.svg") no-repeat;
		background-size: 100%;
		width: calc(32vw / 3.9);
		height: calc(64vw / 3.9);
		transform: rotate(90deg);
		transform-origin: top left;
		top: calc(-20vw / 3.9);
		left: calc(202vw / 3.9);
	}
	
	#about .text.solution .trouble li .our h5 {
		width: calc(141vw / 3.9);
		margin-bottom: calc(15vw / 3.9);
	}
	
	#about .text.solution .trouble li .our h5 img {
		width: 100%;
	}
	
	#about .text.solution .trouble li .our p {
		box-sizing: border-box;
		color: #322323;
		font-size: calc(16vw / 3.9);
		font-weight: 400;
		line-height: calc(28vw / 3.9);
		text-align: justify;
		width: 100%;
	}
	
	#about .text.solution .trouble li .our p span {
		font-weight: 700;
	}
	
	#about .result {
		background: linear-gradient(to bottom, #ffffff 0%, #ffffff 15%, #fff5ef 15%, #fff5ef 100%);
		width: 100%;
		height: calc(322vw / 3.9);
		margin-bottom: calc(25vw / 3.9);
	}
	
	#about .result .swiper {
		width: 100%;
		margin-bottom: calc(30vw / 3.9);
	}
	
	#about .result .swiper .swiper-wrapper {
		width: 100%;
		transition-timing-function: linear;
	}
	
	#about .result .swiper .swiper-wrapper .swiper-slide {
		width: calc(258vw / 3.9);
		margin: 0 calc(5vw / 3.9);
	}
	
	#about .result .swiper .swiper-wrapper .swiper-slide img {
		display: block;
		width: 100%;
	}
	
	#about .result .swiper .swiper-wrapper .swiper-slide h5 {
		background: #ff6a1a;
		color: #ffffff;
		font-size: calc(12vw / 3.9);
		font-weight: 700;
		line-height: calc(16vw / 3.9);
		text-align: center;
		width: 100%;
		height: calc(16vw / 3.9);
	}
	
	#about .result .swiper .swiper-wrapper .swiper-slide p {
		color: #808080;
		font-size: calc(12vw / 3.9);
		font-weight: 400;
		line-height: calc(16vw / 3.9);
		text-align: center;
		width: 100%;
		height: calc(16vw / 3.9);
	}
	
	#about .result .link {
		width: 100%;
	}
	
	#about .result .link a {
		position: relative;
		display: block;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #ff9000 0%, #ff5f00 100%);
		border: calc(1vw / 3.9) solid #ffffff;
		border-radius: calc(20vw / 3.9);
		box-shadow: 0 0 calc(8vw / 3.9) rgba(0, 0, 0, 0.25);
		color: #ffffff;
		font-size: calc(22vw / 3.9);
		font-weight: 700;
		line-height: calc(32vw / 3.9);
		text-align: center;
		width: calc(340vw / 3.9);
		height: calc(80vw / 3.9);
		padding-top: calc(5vw / 3.9);
		margin: 0 auto;
	}
	
	#about .result .link a span {
		font-size: calc(26vw / 3.9);
	}
	
	#about .result .link a::after {
		position: absolute;
		display: block;
		content: "";
		background: url("../../img/common/arrow_g.svg") no-repeat;
		background-size: 100% 100%;
		width: calc(18vw / 3.9);
		height: calc(18vw / 3.9);
		top: 50%;
		transform: translateY(-50%);
		right: calc(10vw / 3.9);
	}
}


/************************************
#flow
************************************/
@media screen and (min-width: 1720px) {
	#flow h3 {
		position: relative;
		width: calc(1000px / 1366 * 1720);
		height: calc(55px / 1366 * 1720);
		margin-left: 50%;
		transform: translateX(-50%);
		padding-left: calc(180px / 1366 * 1720);
		margin-bottom: calc(35px / 1366 * 1720);
	}
	
	#flow h3 .icon {
		position: absolute;
		width: calc(53px / 1366 * 1720);
		bottom: calc(-8px / 1366 * 1720);
		left: calc((55px + 180px) / 1366 * 1720);
	}
	
	#flow h3 .en_title {
		position: absolute;
		color: #ffbe19;
		font-family: "copperplate", serif;
		font-size: calc(10px / 1366 * 1720);
		font-weight: 700;
		line-height: 1em;
		font-style: normal;
		text-align: left;
		top: calc(5px / 1366 * 1720);
		left: calc((117px + 180px) / 1366 * 1720);
	}
	
	#flow h3 .title {
		position: absolute;
		background: linear-gradient(to right, #ff6a1a, #ff9e1a);
		background-clip: text;
		color: transparent;
		font-size: calc(32px / 1366 * 1720);
		font-weight: 700;
		line-height: calc(44px / 1366 * 1720);
		top: calc(17px / 1366 * 1720);
		left: calc((117px + 180px) / 1366 * 1720);
	}
	
	#flow .step {
		background: #fff8e8;
		width: 100%;
		padding:  calc(30px / 1366 * 1720) 0;
		margin-bottom: calc(60px / 1366 * 1720);
	}
	
	#flow .step .wrapper {
		width: calc(1000px / 1366 * 1720);
		margin-left: 50%;
		transform: translateX(-50%);
		padding-left: calc(180px / 1366 * 1720);
	}
	
	#flow .step .wrapper .intro {
		color: #322323;
		font-size: calc(22px / 1366 * 1720);
		font-weight: 700;
		line-height: 1em;
		text-align: center;
		width: calc(890px / 1366 * 1720);
		margin: 0 auto calc(40px / 1366 * 1720);
	}
	
	#flow .step .wrapper .intro br {
		display: none;
	}
	
	#flow .step .wrapper ul {
		width: calc(890px / 1366 * 1720);
		margin: 0 auto calc(25px / 1366 * 1720);
	}
	
	#flow .step .wrapper ul li {
		position: relative;
		box-sizing: border-box;
		background: #ffffff;
		width: calc(790px / 1366 * 1720);
		min-height: calc(140px / 1366 * 1720);
		padding: calc(15px / 1366 * 1720) 0 calc(25px / 1366 * 1720);
		margin-bottom: calc(28px / 1366 * 1720);
	}
	
	#flow .step .wrapper ul li .en {
		position: absolute;
		color: #ff6a1a;
		font-family: "copperplate", serif;
		font-size: calc(14px / 1366 * 1720);
		font-weight: 700;
		font-style: normal;
		line-height: 0.7em;
		text-align: left;
		transform: rotate(90deg) translateY(-100%);
		transform-origin: top left;
		top: calc(15px / 1366 * 1720);
		left: calc(20px / 1366 * 1720);
	}
	
	#flow .step .wrapper ul li .number {
		position: absolute;
		color: #ffffff;
		font-family: "copperplate", serif;
		font-size: calc(66px / 1366 * 1720);
		font-weight: 700;
		line-height: 0.7em;
		font-style: normal;
		text-align: left;
		text-stroke-width: calc(1.5px / 1366 * 1720);
		text-stroke-color: #ff6a1a;
		-webkit-text-stroke-width: calc(1.5px / 1366 * 1720);
		-webkit-text-stroke-color: #ff6a1a;
		top: calc(15px / 1366 * 1720);
		left: calc(40px / 1366 * 1720);
	}
	
	#flow .step .wrapper ul li .period {
		position: absolute;
		display: block;
		box-sizing: border-box;
		background: url("../../img/goods/figure/flow_period.svg") no-repeat;
		background-size: 100% 100%;
		width: calc(110px / 1366 * 1720);
		height: calc(72px / 1366 * 1720);
		padding: calc(19px / 1366 * 1720) calc(8px / 1366 * 1720) calc(7px / 1366 * 1720) calc(19px / 1366 * 1720);
		top: calc(60px / 1366 * 1720);
		left: calc(-12px / 1366 * 1720);
	}
	
	#flow .step .wrapper ul li .period .estimate {
		color: #322323;
		font-size: calc(12px / 1366 * 1720);
		font-weight: 400;
		line-height: 1em;
		text-align: center;
		width: 100%;
		margin: calc(4px / 1366 * 1720) 0 calc(2px / 1366 * 1720);
	}
	
	#flow .step .wrapper ul li .period .days {
		color: #ff6a1a;
		font-size: calc(24px / 1366 * 1720);
		font-weight: 700;
		line-height: 1em;
		text-align: center;
		width: 100%;
	}
	
	#flow .step .wrapper ul li .period .days span {
		font-size: calc(15px / 1366 * 1720);
	}
	
	#flow .step .wrapper ul li h4 {
		color: #322323;
		font-size: calc(26px / 1366 * 1720);
		font-weight: 700;
		line-height: 1em;
		margin: 0 0 calc(20px / 1366 * 1720) calc(165px / 1366 * 1720);
	}
	
	#flow .step .wrapper ul li h4 br {
		display: none;
	}
	
	#flow .step .wrapper ul li .text {
		color: #322323;
		font-size: calc(15px / 1366 * 1720);
		font-weight: 400;
		line-height: calc(28px / 1366 * 1720);
		text-align: justify;
		width: calc(530px / 1366 * 1720);
		margin-left: calc(165px / 1366 * 1720);
	}
	
	#flow .step .wrapper ul li .text span {
		font-size: calc(12px / 1366 * 1720);
	}
	
	#flow .step .wrapper ul li img {
		position: absolute;
		width: calc(160px / 1366 * 1720);
		top: 0;
		right: calc(-100px / 1366 * 1720);
	}
	
	#flow .step .wrapper ul li::before {
		position: absolute;
		display: block;
		content: "";
		background: repeating-linear-gradient(45deg, #ff6a1a, #ff6a1a calc(2px / 1366 * 1720), #ffffff 0, #ffffff calc(8px / 1366 * 1720));
		width: calc(6px / 1366 * 1720);
		height: 100%;
		top: 0;
		left: 0;
	}
	
	#flow .step .wrapper ul li::after {
		position: absolute;
		display: block;
		content: "";
		background: url("../../img/goods/arrow.svg") no-repeat;
		background-size: 100% 100%;
		width: calc(36px / 1366 * 1720);
		height: calc(18px / 1366 * 1720);
		bottom: calc(-18px / 1366 * 1720);
		left: 50%;
		transform: translateX(-50%);
	}
	
	#flow .step .wrapper ul li:last-child::after {
		display: none;
	}
	
	#flow .step .wrapper .example {
		color: #322323;
		font-size: calc(22px / 1366 * 1720);
		font-weight: 700;
		line-height: 1em;
		text-align: center;
	}
	
	#flow .step .wrapper .example br {
		display: none;
	}
}

@media screen and (min-width: 1133px) and (max-width: 1719px) {
	#flow h3 {
		position: relative;
		width: calc(1000vw / 13.66);
		height: calc(55vw / 13.66);
		margin-left: 50%;
		transform: translateX(-50%);
		padding-left: calc(180vw / 13.66);
		margin-bottom: calc(35vw / 13.66);
	}
	
	#flow h3 .icon {
		position: absolute;
		width: calc(53vw / 13.66);
		bottom: calc(-8vw / 13.66);
		left: calc((55vw + 180vw) / 13.66);
	}
	
	#flow h3 .en_title {
		position: absolute;
		color: #ffbe19;
		font-family: "copperplate", serif;
		font-size: calc(10vw / 13.66);
		font-weight: 700;
		line-height: 1em;
		font-style: normal;
		text-align: left;
		top: calc(5vw / 13.66);
		left: calc((117vw + 180vw) / 13.66);
	}
	
	#flow h3 .title {
		position: absolute;
		background: linear-gradient(to right, #ff6a1a, #ff9e1a);
		background-clip: text;
		color: transparent;
		font-size: calc(32vw / 13.66);
		font-weight: 700;
		line-height: calc(44vw / 13.66);
		top: calc(17vw / 13.66);
		left: calc((117vw + 180vw) / 13.66);
	}
	
	#flow .step {
		background: #fff8e8;
		width: 100%;
		padding:  calc(30vw / 13.66) 0;
		margin-bottom: calc(60vw / 13.66);
	}
	
	#flow .step .wrapper {
		width: calc(1000vw / 13.66);
		margin-left: 50%;
		transform: translateX(-50%);
		padding-left: calc(180vw / 13.66);
	}
	
	#flow .step .wrapper .intro {
		color: #322323;
		font-size: calc(22vw / 13.66);
		font-weight: 700;
		line-height: 1em;
		text-align: center;
		width: calc(890vw / 13.66);
		margin: 0 auto calc(40vw / 13.66);
	}
	
	#flow .step .wrapper .intro br {
		display: none;
	}
	
	#flow .step .wrapper ul {
		width: calc(890vw / 13.66);
		margin: 0 auto calc(25vw / 13.66);
	}
	
	#flow .step .wrapper ul li {
		position: relative;
		box-sizing: border-box;
		background: #ffffff;
		width: calc(790vw / 13.66);
		min-height: calc(140vw / 13.66);
		padding: calc(15vw / 13.66) 0 calc(25vw / 13.66);
		margin-bottom: calc(28vw / 13.66);
	}
	
	#flow .step .wrapper ul li .en {
		position: absolute;
		color: #ff6a1a;
		font-family: "copperplate", serif;
		font-size: calc(14vw / 13.66);
		font-weight: 700;
		font-style: normal;
		line-height: 0.7em;
		text-align: left;
		transform: rotate(90deg) translateY(-100%);
		transform-origin: top left;
		top: calc(15vw / 13.66);
		left: calc(20vw / 13.66);
	}
	
	#flow .step .wrapper ul li .number {
		position: absolute;
		color: #ffffff;
		font-family: "copperplate", serif;
		font-size: calc(66vw / 13.66);
		font-weight: 700;
		line-height: 0.7em;
		font-style: normal;
		text-align: left;
		text-stroke-width: calc(1.5vw / 13.66);
		text-stroke-color: #ff6a1a;
		-webkit-text-stroke-width: calc(1.5vw / 13.66);
		-webkit-text-stroke-color: #ff6a1a;
		top: calc(15vw / 13.66);
		left: calc(40vw / 13.66);
	}
	
	#flow .step .wrapper ul li .period {
		position: absolute;
		display: block;
		box-sizing: border-box;
		background: url("../../img/goods/figure/flow_period.svg") no-repeat;
		background-size: 100% 100%;
		width: calc(110vw / 13.66);
		height: calc(72vw / 13.66);
		padding: calc(19vw / 13.66) calc(8vw / 13.66) calc(7vw / 13.66) calc(19vw / 13.66);
		top: calc(60vw / 13.66);
		left: calc(-12vw / 13.66);
	}
	
	#flow .step .wrapper ul li .period .estimate {
		color: #322323;
		font-size: calc(12vw / 13.66);
		font-weight: 400;
		line-height: 1em;
		text-align: center;
		width: 100%;
		margin: calc(4vw / 13.66) 0 calc(2vw / 13.66);
	}
	
	#flow .step .wrapper ul li .period .days {
		color: #ff6a1a;
		font-size: calc(24vw / 13.66);
		font-weight: 700;
		line-height: 1em;
		text-align: center;
		width: 100%;
	}
	
	#flow .step .wrapper ul li .period .days span {
		font-size: calc(15vw / 13.66);
	}
	
	#flow .step .wrapper ul li h4 {
		color: #322323;
		font-size: calc(26vw / 13.66);
		font-weight: 700;
		line-height: 1em;
		margin: 0 0 calc(20vw / 13.66) calc(165vw / 13.66);
	}
	
	#flow .step .wrapper ul li h4 br {
		display: none;
	}
	
	#flow .step .wrapper ul li .text {
		color: #322323;
		font-size: calc(15vw / 13.66);
		font-weight: 400;
		line-height: calc(28vw / 13.66);
		text-align: justify;
		width: calc(530vw / 13.66);
		margin-left: calc(165vw / 13.66);
	}
	
	#flow .step .wrapper ul li .text span {
		font-size: calc(12vw / 13.66);
	}
	
	#flow .step .wrapper ul li img {
		position: absolute;
		width: calc(160vw / 13.66);
		top: 0;
		right: calc(-100vw / 13.66);
	}
	
	#flow .step .wrapper ul li::before {
		position: absolute;
		display: block;
		content: "";
		background: repeating-linear-gradient(45deg, #ff6a1a, #ff6a1a calc(2vw / 13.66), #ffffff 0, #ffffff calc(8vw / 13.66));
		width: calc(6vw / 13.66);
		height: 100%;
		top: 0;
		left: 0;
	}
	
	#flow .step .wrapper ul li::after {
		position: absolute;
		display: block;
		content: "";
		background: url("../../img/goods/arrow.svg") no-repeat;
		background-size: 100% 100%;
		width: calc(36vw / 13.66);
		height: calc(18vw / 13.66);
		bottom: calc(-18vw / 13.66);
		left: 50%;
		transform: translateX(-50%);
	}
	
	#flow .step .wrapper ul li:last-child::after {
		display: none;
	}
	
	#flow .step .wrapper .example {
		color: #322323;
		font-size: calc(22vw / 13.66);
		font-weight: 700;
		line-height: 1em;
		text-align: center;
	}
	
	#flow .step .wrapper .example br {
		display: none;
	}
}

@media screen and (min-width: 744px) and (max-width: 1132px) {
	#flow h3 {
		position: relative;
		width: 100%;
		height: calc(55vw / 7.44);
		margin-bottom: calc(50vw / 7.44);
	}
	
	#flow h3 .icon {
		position: absolute;
		width: calc(53vw / 7.44);
		bottom: calc(-8vw / 7.44);
		left: calc(67vw / 7.44);
	}
	
	#flow h3 .en_title {
		position: absolute;
		color: #ffbe19;
		font-family: "copperplate", serif;
		font-size: calc(10vw / 7.44);
		font-weight: 700;
		line-height: 1em;
		font-style: normal;
		text-align: left;
		top: calc(5vw / 7.44);
		left: calc(128vw / 7.44);
	}
	
	#flow h3 .title {
		position: absolute;
		background: linear-gradient(to right, #ff6a1a, #ff9e1a);
		background-clip: text;
		color: transparent;
		font-size: calc(32vw / 7.44);
		font-weight: 700;
		line-height: calc(44vw / 7.44);
		top: calc(17vw / 7.44);
		left: calc(128vw / 7.44);
	}
	
	#flow .step {
		background: #fff8e8;
		width: 100%;
		padding:  calc(30vw / 7.44) 0 calc(20vw / 7.44);
		margin-bottom: calc(20vw / 7.44);
	}
	
	#flow .step .wrapper {
		width: 100%;
	}
	
	#flow .step .wrapper .intro {
		color: #322323;
		font-size: calc(22vw / 7.44);
		font-weight: 700;
		line-height: 1em;
		text-align: center;
		width: calc(612vw / 7.44);
		margin: 0 auto calc(30vw / 7.44);
	}
	
	#flow .step .wrapper .intro br {
		display: none;
	}
	
	#flow .step .wrapper ul {
		width: calc(612vw / 7.44);
		margin: 0 auto calc(20vw / 7.44);
	}
	
	#flow .step .wrapper ul li {
		position: relative;
		box-sizing: border-box;
		background: #ffffff;
		width: 100%;
		min-height: calc(140vw / 7.44);
		padding: calc(15vw / 7.44) 0 calc(20vw / 7.44);
		margin-bottom: calc(28vw / 7.44);
	}
	
	#flow .step .wrapper ul li.readmore-hide {
		display: none;
	}
	
	#flow .step .wrapper ul li.is_open {
		display: block;
	}
	
	#flow .step .wrapper ul li .en {
		position: absolute;
		color: #ff6a1a;
		font-family: "copperplate", serif;
		font-size: calc(11.2vw / 7.44);
		font-weight: 700;
		font-style: normal;
		line-height: 0.7em;
		text-align: left;
		transform: rotate(90deg) translateY(-100%);
		transform-origin: top left;
		top: calc(15vw / 7.44);
		left: calc(20vw / 7.44);
	}
	
	#flow .step .wrapper ul li .number {
		position: absolute;
		color: #ffffff;
		font-family: "copperplate", serif;
		font-size: calc(52.8vw / 7.44);
		font-weight: 700;
		line-height: 0.7em;
		font-style: normal;
		text-align: left;
		text-stroke-width: calc(1.5vw / 7.44);
		text-stroke-color: #ff6a1a;
		-webkit-text-stroke-width: calc(1.5vw / 7.44);
		-webkit-text-stroke-color: #ff6a1a;
		top: calc(15vw / 7.44);
		left: calc(40vw / 7.44);
	}
	
	#flow .step .wrapper ul li .period {
		position: absolute;
		display: block;
		box-sizing: border-box;
		background: url("../../img/goods/figure/flow_period.svg") no-repeat;
		background-size: 100% 100%;
		width: calc(110vw / 7.44);
		height: calc(72vw / 7.44);
		padding: calc(19vw / 7.44) calc(8vw / 7.44) calc(7vw / 7.44) calc(19vw / 7.44);
		top: calc(51vw / 7.44);
		left: calc(-12vw / 7.44);
	}
	
	#flow .step .wrapper ul li .period .estimate {
		color: #322323;
		font-size: calc(12vw / 7.44);
		font-weight: 400;
		line-height: 1em;
		text-align: center;
		width: 100%;
		margin: calc(4vw / 7.44) 0 calc(2vw / 7.44);
	}
	
	#flow .step .wrapper ul li .period .days {
		color: #ff6a1a;
		font-size: calc(24vw / 7.44);
		font-weight: 700;
		line-height: 1em;
		text-align: center;
		width: 100%;
	}
	
	#flow .step .wrapper ul li .period .days span {
		font-size: calc(15vw / 7.44);
	}
	
	#flow .step .wrapper ul li h4 {
		color: #322323;
		font-size: calc(26vw / 7.44);
		font-weight: 700;
		line-height: 1em;
		margin: 0 0 calc(20vw / 7.44) calc(138vw / 7.44);
	}
	
	#flow .step .wrapper ul li h4 br {
		display: none;
	}
	
	#flow .step .wrapper ul li .text {
		color: #322323;
		font-size: calc(15vw / 7.44);
		font-weight: 400;
		line-height: calc(28vw / 7.44);
		text-align: justify;
		width: calc(293vw / 7.44);
		margin-left: calc(138vw / 7.44);
	}
	
	#flow .step .wrapper ul li.photo_none .text {
		width: calc(444vw / 7.44);
	}
	
	#flow .step .wrapper ul li img {
		position: absolute;
		width: calc(160vw / 7.44);
		top: 0;
		right: 0;
	}
	
	#flow .step .wrapper ul li::before {
		position: absolute;
		display: block;
		content: "";
		background: repeating-linear-gradient(45deg, #ff6a1a, #ff6a1a calc(2vw / 7.44), #ffffff 0, #ffffff calc(8vw / 7.44));
		width: calc(6vw / 7.44);
		height: 100%;
		top: 0;
		left: 0;
	}
	
	#flow .step .wrapper ul li::after {
		position: absolute;
		display: block;
		content: "";
		background: url("../../img/goods/arrow.svg") no-repeat;
		background-size: 100% 100%;
		width: calc(36vw / 7.44);
		height: calc(18vw / 7.44);
		bottom: calc(-18vw / 7.44);
		left: 50%;
		transform: translateX(-50%);
	}
	
	#flow .step .wrapper ul li:last-child::after {
		display: none;
	}
	
	#flow .step .wrapper button {
		display: block;
		box-sizing: border-box;
		background: #ffffff;
		color: #322323;
		font-size: calc(22vw / 7.44);
		font-weight: 700;
		line-height: calc(42vw / 7.44);
		text-align: center;
		border: calc(4vw / 7.44) solid #ffdc19;
		width: calc(306vw / 7.44);
		height: calc(50vw / 7.44);
		border-radius: calc(25vw / 7.44);
		margin: 0 auto calc(20vw / 7.44);
		cursor: pointer;
	}
	
	#flow .step .wrapper .example {
		color: #322323;
		font-size: calc(22vw / 7.44);
		font-weight: 700;
		line-height: 1em;
		text-align: center;
	}
	
	#flow .step .wrapper .example br {
		display: none;
	}
}

@media screen and (max-width: 743px) {
	#flow h3 {
		position: relative;
		width: 100%;
		height: calc(40vw / 3.9);
		margin-bottom: calc(30vw / 3.9);
	}
	
	#flow h3 .icon {
		position: absolute;
		width: calc(42vw / 3.9);
		bottom: calc(-4vw / 3.9);
		left: calc(26vw / 3.9);
	}
	
	#flow h3 .en_title {
		position: absolute;
		color: #ffbe19;
		font-family: "copperplate", serif;
		font-size: calc(8vw / 3.9);
		font-weight: 700;
		line-height: 1em;
		font-style: normal;
		text-align: left;
		top: 0;
		left: calc(73vw / 3.9);
	}
	
	#flow h3 .title {
		position: absolute;
		background: linear-gradient(to right, #ff6a1a, #ff9e1a);
		background-clip: text;
		color: transparent;
		font-size: calc(30vw / 3.9);
		font-weight: 700;
		line-height: calc(40vw / 3.9);
		top: calc(6vw / 3.9);
		left: calc(73vw / 3.9);
	}
	
	#flow .step {
		background: #fff8e8;
		width: 100%;
		padding:  calc(30vw / 3.9) 0;
		margin-bottom: calc(60vw / 3.9);
	}
	
	#flow .step .wrapper {
		width: 100%;
	}
	
	#flow .step .wrapper .intro {
		color: #322323;
		font-size: calc(22vw / 3.9);
		font-weight: 700;
		line-height: calc(30vw / 3.9);
		text-align: center;
		width: calc(340vw / 3.9);
		margin: 0 auto calc(30vw / 3.9);
	}
	
	#flow .step .wrapper ul {
		box-sizing: border-box;
		width: 100%;
		padding-left: calc(25vw / 3.9);
		margin: 0 auto calc(20vw / 3.9);
	}
	
	#flow .step .wrapper ul li {
		position: relative;
		box-sizing: border-box;
		background: #ffffff;
		width: 100%;
		min-height: calc(178vw / 3.9);
		padding: calc(22vw / 3.9) 0 calc(20vw / 3.9);
		margin-bottom: calc(28vw / 3.9);
	}
	
	#flow .step .wrapper ul li:nth-child(5), #flow .step .wrapper ul li:nth-child(8) {
		padding-top: calc(18vw / 3.9);
	}
	
	#flow .step .wrapper ul li.photo_none {
		min-height: calc(140vw / 3.9);
	}
	
	#flow .step .wrapper ul li.readmore-hide {
		display: none;
	}
	
	#flow .step .wrapper ul li.is_open {
		display: block;
	}
	
	#flow .step .wrapper ul li .en {
		position: absolute;
		color: #ff6a1a;
		font-family: "copperplate", serif;
		font-size: calc(11.2vw / 3.9);
		font-weight: 700;
		font-style: normal;
		line-height: 0.7em;
		text-align: left;
		transform: rotate(90deg) translateY(-100%);
		transform-origin: top left;
		top: calc(10vw / 3.9);
		left: calc(182vw / 3.9);
	}
	
	#flow .step .wrapper ul li .number {
		position: absolute;
		color: #ffffff;
		font-family: "copperplate", serif;
		font-size: calc(52.8vw / 3.9);
		font-weight: 700;
		line-height: 0.7em;
		font-style: normal;
		text-align: left;
		text-stroke-width: calc(1.5vw / 3.9);
		text-stroke-color: #ff6a1a;
		-webkit-text-stroke-width: calc(1.5vw / 3.9);
		-webkit-text-stroke-color: #ff6a1a;
		top: calc(10vw / 3.9);
		left: calc(198vw / 3.9);
	}
	
	#flow .step .wrapper ul li .period {
		position: absolute;
		display: block;
		box-sizing: border-box;
		background: #ffffff;
		width: calc(65vw / 3.9);
		height: calc(46vw / 3.9);
		border: calc(2vw / 3.9) solid #ffbe19;
		border-radius: calc(4vw / 3.9);
		top: calc(5vw / 3.9);
		right: calc(15vw / 3.9);
	}
	
	#flow .step .wrapper ul li .period .estimate {
		color: #322323;
		font-size: calc(12vw / 3.9);
		font-weight: 400;
		line-height: 1em;
		text-align: center;
		width: 100%;
		margin: calc(3vw / 3.9) 0 calc(1vw / 3.9);
	}
	
	#flow .step .wrapper ul li .period .days {
		color: #ff6a1a;
		font-size: calc(24vw / 3.9);
		font-weight: 700;
		line-height: 1em;
		text-align: center;
		width: 100%;
	}
	
	#flow .step .wrapper ul li .period .days span {
		font-size: calc(15vw / 3.9);
	}
	
	#flow .step .wrapper ul li h4 {
		color: #322323;
		font-size: calc(22vw / 3.9);
		font-weight: 700;
		line-height: 1em;
		margin: 0 0 calc(18vw / 3.9) calc(25vw / 3.9);
	}
	
	#flow .step .wrapper ul li:nth-child(5) h4, #flow .step .wrapper ul li:nth-child(8) h4 {
		line-height: calc(30vw / 3.9);
	}
	
	#flow .step .wrapper ul li .text {
		color: #322323;
		font-size: calc(16vw / 3.9);
		font-weight: 400;
		line-height: calc(26vw / 3.9);
		text-align: justify;
		width: calc(196vw / 3.9);
		margin-left: calc(25vw / 3.9);
	}
	
	#flow .step .wrapper ul li.photo_none .text {
		width: calc(315vw / 3.9);
	}
	
	#flow .step .wrapper ul li img {
		position: absolute;
		width: calc(128vw / 3.9);
		top: calc(60vw / 3.9);
		right: 0;
	}
	
	#flow .step .wrapper ul li::before {
		position: absolute;
		display: block;
		content: "";
		background: repeating-linear-gradient(45deg, #ff6a1a, #ff6a1a calc(2vw / 3.9), #ffffff 0, #ffffff calc(8vw / 3.9));
		width: calc(6vw / 3.9);
		height: 100%;
		top: 0;
		left: 0;
	}
	
	#flow .step .wrapper ul li::after {
		position: absolute;
		display: block;
		content: "";
		background: url("../../img/goods/arrow.svg") no-repeat;
		background-size: 100% 100%;
		width: calc(36vw / 3.9);
		height: calc(18vw / 3.9);
		bottom: calc(-18vw / 3.9);
		left: calc(152vw / 3.9);
	}
	
	#flow .step .wrapper ul li:last-child::after {
		display: none;
	}
	
	#flow .step .wrapper button {
		display: block;
		box-sizing: border-box;
		background: #ffffff;
		color: #322323;
		font-size: calc(22vw / 3.9);
		font-weight: 700;
		line-height: calc(42vw / 3.9);
		text-align: center;
		border: calc(4vw / 3.9) solid #ffdc19;
		width: calc(306vw / 3.9);
		height: calc(50vw / 3.9);
		border-radius: calc(25vw / 3.9);
		margin: 0 auto calc(20vw / 3.9);
		cursor: pointer;
	}
	
	#flow .step .wrapper .example {
		color: #322323;
		font-size: calc(22vw / 3.9);
		font-weight: 700;
		line-height: calc(28vw / 3.9);
		text-align: center;
	}
	
	#flow .step .wrapper .example span {
		font-size: calc(13vw / 3.9);
		font-weight: 400;
		line-height: calc(20vw / 3.9);
	}
}


/************************************
#coloring
************************************/
@media screen and (min-width: 1720px) {
	#coloring h3 {
		position: relative;
		width: calc(1000px / 1366 * 1720);
		height: calc(55px / 1366 * 1720);
		margin-left: 50%;
		transform: translateX(-50%);
		padding-left: calc(180px / 1366 * 1720);
		margin-bottom: calc(35px / 1366 * 1720);
	}
	
	#coloring h3 .icon {
		position: absolute;
		width: calc(53px / 1366 * 1720);
		bottom: calc(-8px / 1366 * 1720);
		left: calc((55px + 180px) / 1366 * 1720);
	}
	
	#coloring h3 .en_title {
		position: absolute;
		color: #ffbe19;
		font-family: "copperplate", serif;
		font-size: calc(10px / 1366 * 1720);
		font-weight: 700;
		line-height: 1em;
		font-style: normal;
		text-align: left;
		top: calc(5px / 1366 * 1720);
		left: calc((117px + 180px) / 1366 * 1720);
	}
	
	#coloring h3 .title {
		position: absolute;
		background: linear-gradient(to right, #ff6a1a, #ff9e1a);
		background-clip: text;
		color: transparent;
		font-size: calc(32px / 1366 * 1720);
		font-weight: 700;
		line-height: calc(44px / 1366 * 1720);
		top: calc(17px / 1366 * 1720);
		left: calc((117px + 180px) / 1366 * 1720);
	}
	
	#coloring .text {
		overflow: auto;
		position: relative;
		width: calc(1000px / 1366 * 1720);
		margin-left: 50%;
		transform: translateX(-50%);
		padding-left: calc(180px / 1366 * 1720);
		margin-bottom: calc(20px / 1366 * 1720);
	}
	
	#coloring .text.material {
		padding-bottom: calc(20px / 1366 * 1720);
		margin-bottom: calc(40px / 1366 * 1720);
	}
	
	#coloring .text.material::after {
		position: absolute;
		display: block;
		content: "";
		background: #d8d8d8;
		width: calc(890px / 1366 * 1720);
		height: calc(1px / 1366 * 1720);
		bottom: 0;
		left: calc((55px + 180px) / 1366 * 1720);
	}
	
	#coloring .text h4 {
		float: left;
		display: inline;
		background: linear-gradient(to bottom, transparent 0%, transparent 90%, #ffbfa3 90%, #ffbfa3 100%);
		color: #322323;
		font-size: calc(26px / 1366 * 1720);
		font-weight: 700;
		line-height: 1em;
		text-align: left;
		margin-left: calc(55px / 1366 * 1720);
	}
	
	#coloring .text>p {
		float: left;
		color: #322323;
		font-size: calc(15px / 1366 * 1720);
		font-weight: 400;
		line-height: calc(28px / 1366 * 1720);
		text-align: left;
		margin: calc(4px / 1366 * 1720) 0 0 calc(15px / 1366 * 1720);
	}
	
	#coloring .text>p br:first-child {
		display: none;
	}
	
	#coloring .text ul {
		clear: both;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: calc(890px / 1366 * 1720);
		margin: calc(85px / 1366 * 1720) auto 0;
	}
	
	#coloring .text ul li {
		box-sizing: border-box;
		width: calc(425px / 1366 * 1720);
		padding: 0 calc(50px / 1366 * 1720);
		margin-bottom: calc(40px / 1366 * 1720);
	}
	
	#coloring .text.material ul li {
		background: linear-gradient(to bottom, #ffffff 0%, #ffffff calc(64px / 1366 * 1720), #fff5ef calc(64px / 1366 * 1720), #fff5ef 100%);
		height: calc(452px / 1366 * 1720);
	}
	
	#coloring .text.material ul li:last-child {
		height: calc(324px / 1366 * 1720);
	}
	
	#coloring .text.method ul li {
		background: linear-gradient(to bottom, #ffffff 0%, #ffffff calc(64px / 1366 * 1720), #fff8e8 calc(64px / 1366 * 1720), #fff8e8 100%);
		height: calc(369px / 1366 * 1720);
	}
	
	#coloring .text ul li img {
		display: block;
		width: 100%;
	}
	
	#coloring .text ul li h5 {
		color: #ffffff;
		font-size: calc(22px / 1366 * 1720);
		font-weight: 700;
		line-height: calc(33px / 1366 * 1720);
		text-align: center;
		width: 100%;
		height: calc(33px / 1366 * 1720);
		margin-bottom: calc(14px / 1366 * 1720);
	}
	
	#coloring .text ul li h5 span {
		font-size: calc((22px * 0.8) / 1366 * 1720);
	}
	
	#coloring .text.material ul li h5 {
		background: #ec6c00;
	}
	
	#coloring .text.method ul li h5 {
		background: #ffbe19;
	}
	
	#coloring .text ul li p {
		color: #322323;
		font-size: calc(15px / 1366 * 1720);
		font-weight: 400;
		line-height: calc(28px / 1366 * 1720);
		text-align: justify;
		width: 100%;
	}
}

@media screen and (min-width: 1133px) and (max-width: 1719px) {
	#coloring h3 {
		position: relative;
		width: calc(1000vw / 13.66);
		height: calc(55vw / 13.66);
		margin-left: 50%;
		transform: translateX(-50%);
		padding-left: calc(180vw / 13.66);
		margin-bottom: calc(35vw / 13.66);
	}
	
	#coloring h3 .icon {
		position: absolute;
		width: calc(53vw / 13.66);
		bottom: calc(-8vw / 13.66);
		left: calc((55vw + 180vw) / 13.66);
	}
	
	#coloring h3 .en_title {
		position: absolute;
		color: #ffbe19;
		font-family: "copperplate", serif;
		font-size: calc(10vw / 13.66);
		font-weight: 700;
		line-height: 1em;
		font-style: normal;
		text-align: left;
		top: calc(5vw / 13.66);
		left: calc((117vw + 180vw) / 13.66);
	}
	
	#coloring h3 .title {
		position: absolute;
		background: linear-gradient(to right, #ff6a1a, #ff9e1a);
		background-clip: text;
		color: transparent;
		font-size: calc(32vw / 13.66);
		font-weight: 700;
		line-height: calc(44vw / 13.66);
		top: calc(17vw / 13.66);
		left: calc((117vw + 180vw) / 13.66);
	}
	
	#coloring .text {
		overflow: auto;
		position: relative;
		width: calc(1000vw / 13.66);
		margin-left: 50%;
		transform: translateX(-50%);
		padding-left: calc(180vw / 13.66);
		margin-bottom: calc(20vw / 13.66);
	}
	
	#coloring .text.material {
		padding-bottom: calc(20vw / 13.66);
		margin-bottom: calc(40vw / 13.66);
	}
	
	#coloring .text.material::after {
		position: absolute;
		display: block;
		content: "";
		background: #d8d8d8;
		width: calc(890vw / 13.66);
		height: calc(1vw / 13.66);
		bottom: 0;
		left: calc((55vw + 180vw) / 13.66);
	}
	
	#coloring .text h4 {
		float: left;
		display: inline;
		background: linear-gradient(to bottom, transparent 0%, transparent 90%, #ffbfa3 90%, #ffbfa3 100%);
		color: #322323;
		font-size: calc(26vw / 13.66);
		font-weight: 700;
		line-height: 1em;
		text-align: left;
		margin-left: calc(55vw / 13.66);
	}
	
	#coloring .text>p {
		float: left;
		color: #322323;
		font-size: calc(15vw / 13.66);
		font-weight: 400;
		line-height: calc(28vw / 13.66);
		text-align: left;
		margin: calc(4vw / 13.66) 0 0 calc(15vw / 13.66);
	}
	
	#coloring .text>p br:first-child {
		display: none;
	}
	
	#coloring .text ul {
		clear: both;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: calc(890vw / 13.66);
		margin: calc(85vw / 13.66) auto 0;
	}
	
	#coloring .text ul li {
		box-sizing: border-box;
		width: calc(425vw / 13.66);
		padding: 0 calc(50vw / 13.66);
		margin-bottom: calc(40vw / 13.66);
	}
	
	#coloring .text.material ul li {
		background: linear-gradient(to bottom, #ffffff 0%, #ffffff calc(64vw / 13.66), #fff5ef calc(64vw / 13.66), #fff5ef 100%);
		height: calc(452vw / 13.66);
	}
	
	#coloring .text.material ul li:last-child {
		height: calc(324vw / 13.66);
	}
	
	#coloring .text.method ul li {
		background: linear-gradient(to bottom, #ffffff 0%, #ffffff calc(64vw / 13.66), #fff8e8 calc(64vw / 13.66), #fff8e8 100%);
		height: calc(369vw / 13.66);
	}
	
	#coloring .text ul li img {
		display: block;
		width: 100%;
	}
	
	#coloring .text ul li h5 {
		color: #ffffff;
		font-size: calc(22vw / 13.66);
		font-weight: 700;
		line-height: calc(33vw / 13.66);
		text-align: center;
		width: 100%;
		height: calc(33vw / 13.66);
		margin-bottom: calc(14vw / 13.66);
	}
	
	#coloring .text ul li h5 span {
		font-size: calc((22vw * 0.8) / 13.66);
	}
	
	#coloring .text.material ul li h5 {
		background: #ec6c00;
	}
	
	#coloring .text.method ul li h5 {
		background: #ffbe19;
	}
	
	#coloring .text ul li p {
		color: #322323;
		font-size: calc(15vw / 13.66);
		font-weight: 400;
		line-height: calc(28vw / 13.66);
		text-align: justify;
		width: 100%;
	}
}

@media screen and (min-width: 744px) and (max-width: 1132px) {
	#coloring h3 {
		position: relative;
		width: 100%;
		height: calc(55vw / 7.44);
		margin-bottom: calc(50vw / 7.44);
	}
	
	#coloring h3 .icon {
		position: absolute;
		width: calc(53vw / 7.44);
		bottom: calc(-8vw / 7.44);
		left: calc(67vw / 7.44);
	}
	
	#coloring h3 .en_title {
		position: absolute;
		color: #ffbe19;
		font-family: "copperplate", serif;
		font-size: calc(10vw / 7.44);
		font-weight: 700;
		line-height: 1em;
		font-style: normal;
		text-align: left;
		top: calc(5vw / 7.44);
		left: calc(128vw / 7.44);
	}
	
	#coloring h3 .title {
		position: absolute;
		background: linear-gradient(to right, #ff6a1a, #ff9e1a);
		background-clip: text;
		color: transparent;
		font-size: calc(32vw / 7.44);
		font-weight: 700;
		line-height: calc(44vw / 7.44);
		top: calc(17vw / 7.44);
		left: calc(128vw / 7.44);
	}
	
	#coloring .text {
		overflow: auto;
		position: relative;
		width: calc(612vw / 7.44);
		margin: 0 auto calc(20vw / 7.44);
	}
	
	#coloring .text.material {
		padding-bottom: calc(20vw / 7.44);
		margin-bottom: calc(60vw / 7.44);
	}
	
	#coloring .text.material::after {
		position: absolute;
		display: block;
		content: "";
		background: #d8d8d8;
		width: 100%;
		height: calc(1vw / 7.44);
		bottom: 0;
	}
	
	#coloring .text h4 {
		float: left;
		display: inline;
		background: linear-gradient(to bottom, transparent 0%, transparent 90%, #ffbfa3 90%, #ffbfa3 100%);
		color: #322323;
		font-size: calc(26vw / 7.44);
		font-weight: 700;
		line-height: 1em;
		text-align: left;
	}
	
	#coloring .text>p {
		float: left;
		color: #322323;
		font-size: calc(15vw / 7.44);
		font-weight: 400;
		line-height: calc(28vw / 7.44);
		text-align: left;
		margin: calc(4vw / 7.44) 0 0 calc(15vw / 7.44);
	}
	
	#coloring .text ul {
		clear: both;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		margin: calc(100vw / 7.44) auto 0;
	}
	
	#coloring .text ul li {
		box-sizing: border-box;
		width: calc(292vw / 7.44);
		padding: 0 calc(35vw / 7.44);
		margin-bottom: calc(40vw / 7.44);
	}
	
	#coloring .text.material ul li {
		background: linear-gradient(to bottom, #ffffff 0%, #ffffff calc(44vw / 7.44), #fff5ef calc(44vw / 7.44), #fff5ef 100%);
		height: calc(480vw / 7.44);
	}
	
	#coloring .text.material ul li:nth-child(1), #coloring .text.material ul li:nth-child(2) {
		height: calc(400vw / 7.44);
	}
	
	#coloring .text.material ul li:nth-child(5) {
		height: calc(280vw / 7.44);
	}
	
	#coloring .text.method ul li {
		background: linear-gradient(to bottom, #ffffff 0%, #ffffff calc(44vw / 7.44), #fff8e8 calc(44vw / 7.44), #fff8e8 100%);
		height: calc(340vw / 7.44);
	}
	
	#coloring .text ul li img {
		display: block;
		width: 100%;
	}
	
	#coloring .text ul li h5 {
		color: #ffffff;
		font-size: calc(20vw / 7.44);
		font-weight: 700;
		line-height: calc(28vw / 7.44);
		text-align: center;
		width: 100%;
		height: calc(28vw / 7.44);
		margin-bottom: calc(15vw / 7.44);
	}
	
	#coloring .text ul li h5 span {
		font-size: calc((20vw * 0.8) / 7.44);
	}
	
	#coloring .text.material ul li h5 {
		background: #ec6c00;
	}
	
	#coloring .text.method ul li h5 {
		background: #ffbe19;
	}
	
	#coloring .text ul li p {
		color: #322323;
		font-size: calc(15vw / 7.44);
		font-weight: 400;
		line-height: calc(28vw / 7.44);
		text-align: justify;
		width: 100%;
	}
}

@media screen and (max-width: 743px) {
	#coloring h3 {
		position: relative;
		width: 100%;
		height: calc(40vw / 3.9);
		margin-bottom: calc(30vw / 3.9);
	}
	
	#coloring h3 .icon {
		position: absolute;
		width: calc(42vw / 3.9);
		bottom: calc(-4vw / 3.9);
		left: calc(26vw / 3.9);
	}
	
	#coloring h3 .en_title {
		position: absolute;
		color: #ffbe19;
		font-family: "copperplate", serif;
		font-size: calc(8vw / 3.9);
		font-weight: 700;
		line-height: 1em;
		font-style: normal;
		text-align: left;
		top: 0;
		left: calc(73vw / 3.9);
	}
	
	#coloring h3 .title {
		position: absolute;
		background: linear-gradient(to right, #ff6a1a, #ff9e1a);
		background-clip: text;
		color: transparent;
		font-size: calc(30vw / 3.9);
		font-weight: 700;
		line-height: calc(40vw / 3.9);
		top: calc(6vw / 3.9);
		left: calc(73vw / 3.9);
	}
	
	#coloring .text {
		overflow: auto;
		position: relative;
		width: calc(340vw / 3.9);
		margin: 0 auto calc(60vw / 3.9);
	}
	
	#coloring .text.material {
		padding-bottom: calc(60vw / 3.9);
	}
	
	#coloring .text.material::after {
		position: absolute;
		display: block;
		content: "";
		background: #d8d8d8;
		width: 100%;
		height: calc(1vw / 3.9);
		bottom: 0;
	}
	
	#coloring .text h4 {
		display: inline;
		background: linear-gradient(to bottom, transparent 0%, transparent 90%, #ffbfa3 90%, #ffbfa3 100%);
		color: #322323;
		font-size: calc(24vw / 3.9);
		font-weight: 700;
		line-height: 1em;
		text-align: left;
	}
	
	#coloring .text>p {
		color: #322323;
		font-size: calc(16vw / 3.9);
		font-weight: 400;
		line-height: calc(28vw / 3.9);
		text-align: left;
		margin: calc(15vw / 3.9) 0 calc(25vw / 3.9);
	}
	
	#coloring .text>p br:first-child {
		display: none;
	}
	
	#coloring .text ul {
		width: 100%;
	}
	
	#coloring .text ul li {
		box-sizing: border-box;
		width: 100%;
		padding: 0 calc(30vw / 3.9);
		margin-bottom: calc(30vw / 3.9);
	}
	
	#coloring .text ul li:last-child {
		margin-bottom: 0;
	}
	
	#coloring .text.material ul li {
		background: linear-gradient(to bottom, #ffffff 0%, #ffffff calc(44vw / 3.9), #fff5ef calc(44vw / 3.9), #fff5ef 100%);
	}
	
	#coloring .text.material ul li:nth-child(1) {
		height: calc(340vw / 3.9);
	}
	
	#coloring .text.material ul li:nth-child(2) {
		height: calc(370vw / 3.9);
	}
	
	#coloring .text.material ul li:nth-child(3) {
		height: calc(450vw / 3.9);
	}
	
	#coloring .text.material ul li:nth-child(4), #coloring .text.material ul li:nth-child(5) {
		height: calc(280vw / 3.9);
	}
	
	#coloring .text.method ul li {
		background: linear-gradient(to bottom, #ffffff 0%, #ffffff calc(44vw / 3.9), #fff8e8 calc(44vw / 3.9), #fff8e8 100%);
	}
	
	#coloring .text.method ul li:nth-child(1), #coloring .text.method ul li:nth-child(4) {
		height: calc(280vw / 3.9);
	}
	
	#coloring .text.method ul li:nth-child(2), #coloring .text.method ul li:nth-child(3) {
		height: calc(310vw / 3.9);
	}
	
	#coloring .text ul li img {
		display: block;
		width: calc(220vw / 3.9);
		margin: 0 auto;
	}
	
	#coloring .text ul li h5 {
		color: #ffffff;
		font-size: calc(20vw / 3.9);
		font-weight: 700;
		line-height: calc(28vw / 3.9);
		text-align: center;
		width: calc(220vw / 3.9);
		height: calc(28vw / 3.9);
		margin: 0 auto calc(15vw / 3.9);
	}
	
	#coloring .text ul li h5 span {
		font-size: calc((20vw * 0.8) / 3.9);
	}
	
	#coloring .text.material ul li h5 {
		background: #ec6c00;
	}
	
	#coloring .text.method ul li h5 {
		background: #ffbe19;
	}
	
	#coloring .text ul li p {
		color: #322323;
		font-size: calc(16vw / 3.9);
		font-weight: 400;
		line-height: calc(28vw / 3.9);
		text-align: justify;
		width: 100%;
	}
}