@charset "UTF-8";

@media screen and (max-width: 1024px) {
	/* =====================================================
	* display
	* =================================================== */
	.none-pc {
		display: block !important;
	}
	.none-tab-sp {
		display: none !important;
	}

	/* =====================================================
	* header
	* =================================================== */
	.header {
		height: var(--height-header-sp);
		padding-left: 15px;
		padding-right: 0;
	}
	/* logo --------------------------------------------- */
	.header__logo {
		width: fit-content;
	}
	.header__logo img {
		position: relative;
		top: unset;
		left: unset;
		width: auto;
		height: 30px;
		transition: all 0.3s ease-in-out;
	}
	.header.scroll .header__logo img {
		height: 30px;
		width: auto;
	}
	.header.scroll.show .header__logo img:first-of-type {
		display: block;
	}
	.header.scroll.show .header__logo img:last-of-type {
		display: none;
	}
	.header__logo span {
		font-size: 21px;
	}
	/* header nav --------------------------------------- */
	.header__nav {
		position: fixed;
		top: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		width: 100%;
		height: auto;
		min-height: 100vh;
		padding-top: 70px;
		margin-right: 0;
		background: var(--color-wh);
		transform: translateX(130%);
		transition: all 0.3s ease-in-out;
	}
	.header__nav a {
		position: relative;
		display: flex;
		align-items: baseline;
		padding: 14px 0 14px;
		border-bottom: solid 1px #e8e8e8;
	}
	@media screen and (max-width: 1024px) and (hover: hover) and (pointer: fine) {
		.header__nav a:hover {
			opacity: 0.7;
		}
		.header__nav ul li:nth-of-type(-n + 4) a:hover {
			color: var(--color-wh);
		}
	}
	.header__nav ul {
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column;
		width: 100%;
		max-height: calc(100vh - (var(--height-header-sp) + 30px));
		padding: 0 20px;
		overflow-y: auto;
		overflow-x: hidden;
		gap: 0px;
	}
	.header__nav ul li {
		width: 100%;
	}
	.header__nav ul li {
		margin-left: 0;
	}
	.header__nav ul li a::after {
		content: "";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0;
		width: 6px;
		height: 6px;
		background: var(--color-bk);
		-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
		clip-path: polygon(0 0, 0% 100%, 100% 50%);
	}
	.header__nav ul li .sns a::after {
		display: none;
	}
	.header__nav ul .header__nav--contact a:after {
		display: none;
	}
	.header__nav .sns a:nth-of-type(2) {
		margin: 0;
		margin-right: 26px;
	}
	.header.scroll .header__nav ul li.header__nav--contact .cta__tel-inner a {
		color: var(--color-pi);
	}
	@media screen and (max-width: 1024px) and (hover: hover) and (pointer: fine) {
		.header__nav ul li:nth-of-type(-n + 5):hover {
			color: var(--color-wh) !important;
		}
	}
	.header__nav ul .header__nav--contact {
		height: auto;
		padding: 0;
		margin: 30px 0 0;
		background: var(--color-wh);
	}
	.header__nav ul li:last-child a {
		display: flex;
		align-items: center;
		justify-content: center;
		border: unset;
		width: 100%;
		height: auto;
		border-radius: 0;
		color: #333;
		background: #fff;
		border: solid 1px #333;
		padding: 12px 0 12px;
	}
	.header__nav ul .header__nav--contact-tel {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20px;
		letter-spacing: 0.05em;
		line-height: 1;
	}
	.header__nav ul .header__nav--contact-tel a {
		padding: 0;
		margin-bottom: 12px;
		font-family: var(--font-en);
		font-size: 1.5rem;
		color: var(--color-pi);
	}
	.header__nav ul .header__nav--contact-tel a img {
		width: 20px;
		margin-right: 6px;
	}
	.header__nav ul .header__nav--contact-tel p {
		padding-left: 0;
		font-size: 0.8125rem;
	}
	.header__nav.scroll .header__nav li:nth-of-type(-n + 5) a {
		color: var(--color-wh);
	}
	.header.show .header__nav {
		transform: translateX(0);
	}
	/* sp menu ------------------------------------------ */
	.sp-menu {
		position: relative;
		display: none;
		width: 50px;
		height: 50px;
		background: unset;
		z-index: 999;
		transition: all 0.3s ease-in-out;
		border: none;
	}
	.header.scroll .sp-menu {
		width: 50px;
		height: 50px;
	}
	.sp-menu-bar {
		display: inline-block;
		transition: all 0.3s;
		position: absolute;
		left: 50%;
		width: 30px;
		height: 1px;
		background: var(--color-bk);
		transform: translate(-50%, -50%);
	}
	.sp-menu-bar__top {
		top: calc(50% - 9px);
	}
	.sp-menu-bar__mid {
		top: 50%;
	}
	.sp-menu-bar__btm {
		top: calc(50% + 9px);
	}
	.header.show .sp-menu .sp-menu-bar__top, .header.show .sp-menu .sp-menu-bar__btm {
		top: 50%;
	}
	.header.show .sp-menu .sp-menu-bar__top {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	.header.show .sp-menu .sp-menu-bar__mid {
		opacity: 0;
	}
	.header.show .sp-menu .sp-menu-bar__btm {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	/* =====================================================
	* top
	* =================================================== */
	/* trial -------------------------------------------- */
	.trial {
		margin-top: -27%;
	}
}


@media screen and (max-width: 768px) {
	/* =====================================================
	* content
	* =================================================== */
	/* flex --------------------------------------------- */
	.flex-col-sp {
		flex-direction: column;
	}

	/* =====================================================
	* display
	* =================================================== */
	.none-tab {
		display: block !important;
	}
	.none-sp {
		display: none !important;
	}

	/* =====================================================
	* footer
	* =================================================== */
	.footer {
		padding-top: 70px;
	}
	.footer__info,
	.footer__right,
	.footer__btm-nav {
		position: relative;
	}
	.footer__info::before,
	.footer__right::before,
	.footer__btm-nav::before {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		background: var(--color-wh);
		opacity: 0.2;
	}
	/* footer top --------------------------------------- */
	.footer__top {
		margin-bottom: 22px;
	}
	.footer__top p {
		padding-left: 0;
		font-size: 13px;
	}
	/* footer info -------------------------------------- */
	.footer__info {
		min-width: auto;
		padding-bottom: 45px;
		margin-bottom: 45px;
	}
	.footer__logo {
		width: 88.1%;
		margin-bottom: 30px;
	}
	.footer__info img {
		height: 33px;
	}
	.footer__address {
		margin-bottom: 15px;
	}
	/* footer right ------------------------------------- */
	.footer__right {
		width: 100%;
		min-width: auto;
		padding-bottom: 0;
	}
	.footer__right .sns {
		justify-content: center;
		margin-bottom: 50px;
	}
	.footer__nav {
		justify-content: flex-start;
		margin-bottom: 35px;
	}
	.footer__nav ul {
		width: 100%;
	}
	.footer__nav ul:first-of-type {
		margin-right: 0;
		margin-left: 0;
		padding-left: 0;
	}
	.footer a {
		font-size: 13px;
	}
	/* footer bottom ------------------------------------ */
	.footer__btm {
		padding: 0 0 20px;
	}
	.footer__btm::before {
		content: none;
	}
	.footer__btm-nav {
		justify-content: center;
		padding-bottom: 22px;
		margin-bottom: 50px;
	}
	.footer__btm small {
		text-align: center;
		letter-spacing: 0;
		font-size: 11px;
	}

	/* =====================================================
	* section
	* =================================================== */
	/* section title ------------------------------------ */
	.section__title-lg {
		margin-bottom: 20px;
	}
	.section__title-lg::after {
		bottom: -5px;
		width: 34.62vw;
		max-width: 150px;
	}
	.section__title {
		margin-bottom: 1.5rem;
	}
	/* section copy ------------------------------------- */
	.section__copy > span {
		padding-left: 6px;
		margin-bottom: 3px;
	}

	/* =====================================================
	* column
	* =================================================== */
	/* 2column ------------------------------------------ */
	.col2 .col__item {
		flex-direction: column;
		margin-bottom: 2rem;
	}
	.col2__img, .col2__cont {
		width: 100%;
	}
	.col2__img {
		padding-top: 18px;
		padding-left: 0;
	}
	.col2__img::before {
		left: -10px;
		width: 13.5%;
		height: 20%;
		padding-bottom: 0;
	}
	.col2__cont {
		padding-top: 1rem;
		order: 2;
	}
	.col2__title {
		padding-bottom: 0.5rem;
		margin-bottom: 0.5rem;
		font-size: 22px;
	}
	.col2__cont p {
		font-size: 14px;
	}
	/* 4column ------------------------------------------ */
	.col4 {
		align-items: center;
		flex-direction: column;
	}
	.col4 .col__item {
		width: 69.2%;
		min-width: auto;
		margin-bottom: 88px;
	}
	.col4 .col__item:last-of-type {
		margin-bottom: 0;
	}

	/* =====================================================
	* button
	* =================================================== */
	.btn.center a {
		margin: 0em auto 0em;
		max-width: 350px;
		padding: 10px 30px 10px 15px;
		min-width: 200px;
		width: fit-content;
	}
	.btn::before {
		right: 9%;
	}

	/* CUSTOM */
	#page-top {
		bottom: 75px;
		right: 21px;
		width: fit-content;
		height: fit-content;
		z-index: 100;
	}
	.sns_floating {
		right: 17px;
	}
	.sns_floating a {
		margin: 0.7em 0;
	}
	.sns_floating img {
		height: 25px;
	}
	.blog__archive--content {
		width: 100%;
		margin-right: 0%;
	}
	.blog__archive--content:nth-child(3n) {
		margin-right: 0%;
	}
	.blog__archive--content:nth-child(2n) {
		margin-right: 0%;
	}
	.blog__archive--ttl {
		font-size: 14px;
		line-height: 1.5;
	}
	.tp_service__block {
		flex-direction: column;
	}
	.order1, .order2 {
		order: initial !important;
	}
	.mv {
		padding: 70px 0 0;
	}
	.mv__headline {
		font-size: 60px;
	}
	.mv__desc {
		font-size: 11px;
		width: 100%;
		margin-left: 0;
		margin-top: 50px;
	}
	.mv__desc img {
		height: 2em;
	}
	.mv__slider--img:before {
		padding-top: 100%;
	}
	.tp_about {
		padding: 80px 0 60px;
	}
	.tp_about__bgtext__wrap {
		height: 100px;
	}
	.tp_about__bgtext {
		font-size: 100px;
	}
	.tp_about__inner {
		flex-wrap: wrap;
		gap: 30px;
		justify-content: center;
	}
	.tp_about__images {
		flex: unset;
		position: relative;
		width: 100%;
		max-width: 400px;
	}
	.tp_about__content {
		width: 100%;
	}
	.tp_about__title {
		font-size: 12px;
	}
	.tp_about__subtitle {
		font-size: 26px;
		margin: 0 0 15px;
	}
	.tp_about__text {
		font-size: 13px;
		margin-bottom: 30px;
	}
	.button {
		font-size: 13px;
	}
	.tp_works {
		padding: 60px 0 0;
	}
	.tp_works__title {
		font-size: 12px;
	}
	.tp_works__subtitle {
		font-size: 26px;
		margin: 0 0 15px;
		font-weight: 500;
	}
	.tp_works__text {
		font-size: 13px;
		margin-bottom: 30px;
	}
	.tp_works__bgtext {
		display: none;
	}
	.tp_works__head {
		margin-bottom: 60px;
	}
	.works__item {
		width: 100%;
	}
	.tp_client {
		padding: 60px 0;
	}
	.tp_client__title {
		font-size: 12px;
	}
	.tp_client__subtitle {
		font-size: 26px;
		margin: 0 0 15px;
		font-weight: 500;
	}
	.tp_works__text {
		font-size: 13px;
		margin-bottom: 30px;
	}
	.tp_client__logos {
		padding: 20px 0;
		border-radius: 0;
	}
	.client__list {
		gap: 15px 15px;
		padding: 0 20px;
	}
	.client__item {
		width: calc(100% / 2 - 7.5px);
	}
	.tp_service {
		padding: 60px 0;
	}
	.tp_service__title {
		font-size: 12px;
	}
	.tp_service__subtitle {
		font-size: 26px;
		margin: 0 0 15px;
		font-weight: 500;
	}
	.tp_service__lead {
		font-size: 13px;
		margin-bottom: 30px;
	}
	.tp_service__head {
		margin-bottom: 50px;
	}
	.tp_service__img {
		width: 100%;
		max-width: 250px;
		margin-bottom: 30px;
	}
	.tp_service__img:after {
		top: 15px;
		left: 15px;
	}
	.tp_service__content {
		width: 100%;
	}
	.tp_service__content--ttl h4 {
		font-size: 20px;
		font-weight: 500;
	}
	.tp_service__content--ttl h4 span {
		font-size: 30px;
	}
	.tp_service__text {
		font-size: 13px;
		line-height: 2;
		margin-bottom: 20px;
	}
	.tp_service__blocks {
		gap: 40px;
	}
	.tp_service__block:nth-child(2n) .tp_service__img {
		order: -1;
	}
	.tp_service__btn a {
		margin: 40px auto 0;
	}
	.tp_company__head {
		margin-bottom: 20px;
	}
	.tp_company {
		padding: 40px 0 60px;
	}
	.tp_company__title {
		font-size: 12px;
	}
	.tp_company__subtitle {
		font-size: 26px;
		margin: 0 0 15px;
		font-weight: 500;
	}
	.tp_company__text {
		font-size: 13px;
		margin-bottom: 30px;
	}
	.tp_company__image:before {
		padding-top: 65%;
	}
	.tp_company:after {
		height: 200px;
	}
	.tp_company__image img {
		border-radius: 0;
	}
	.tp_message {
		padding: 60px 0;
	}
	.tp_message__image {
		width: 100%;
		max-width: 250px;
		margin-bottom: 35px;
	}
	.tp_message__image:after {
		width: 100%;
		height: 100%;
		top: 15px;
		left: 15px;
	}
	.tp_message__inner .tp_company__head {
		margin-bottom: 0px;
		width: 100%;
		margin-left: 0;
	}
	.low_page__title {
		font-size: 12px;
	}
	.low_page__subtitle {
		font-size: 26px;
		margin: 0 0 20px;
		font-weight: 500;
	}
	.website-009--low_header {
		padding: 100px 0 0;
	}
	.website-009--low_header .mv__text {
		margin: 0 auto 0px;
		width: fit-content;
	}
	.website-009--low_header--img {
		width: 100vw;
		margin-left: -20px;
		margin-top: 20px;
	}
	.low_company {
		padding: 0px 0 0px;
	}
	.low_page__contact--description {
		font-size: 12px;
	}
	.low_page_contact {
		margin: 30px auto 100px;
	}
	.taxonomy__archive a {
		width: 49%;
	}
	.taxonomy__archive a:nth-child(5n) {
		margin-right: 2%;
	}
	.taxonomy__archive a:nth-child(2n) {
		margin-right: 0;
	}
	.company__intro--content h2 {
		font-weight: 500;
	}
	.company__message {
		margin: 60px 0;
		justify-content: center;
	}
	.company__message--content {
		width: 100%;
		padding-right: 0;
		font-size: 13px;
		order: 1;
		margin-top: 20px;
	}
	.company__message--img {
		width: 100%;
		max-width: 200px;
	}
}