@charset "UTF-8";


/* ipad pro
--------------------------------------*/
@media only screen and (max-width: 1024px) {
	.pc {
		display: none !important;
	}

	.sp {
		display: block !important;
	}

	.inner {
		width: 90%;
	}

	.cmn__btn a {
		width: 20%;
	}

	.mv__box {
		width: 90%;
	}

	.mv__img {
		width: 50%;
	}

	.mv__catch {
		width: 80%;
		top: 44%;
		transform: translateY(-44%);
	}

	.mv__sub {
		width: 70%;
	}

	.h__logo img {
		padding: 20px 16px;
	}

	.about__catch {
		font-size: 2rem;
	}

	.about__btn a {
		width: 20%;
		max-width: 130px;
	}

	.point__box {
		width: 90%;
	}

	.contact__box {
		width: 70%;
	}
}


/* ipad
--------------------------------------*/
@media only screen and (max-width: 768px) {

	.inner {
		width: 90%;
	}

	#header {
		padding-bottom: 0;
	}

	.h__logo {
		width: 28%;
		max-width: 180px;
	}

	.mv__img {
		height: 400px;
	}

	.f__li a {
		padding: 8px;
	}

	.about__txt {
		width: 70%;
	}

	.twocolum {
		padding: 40px 0 60px;
	}

	.twocolumL {
		width: 18%;
	}

	.twocolumR {
		width: 82%;
	}

	.point__txt {
		padding: 40px;
	}

	.point__img img {
		aspect-ratio: 1 / 1;
	}

	.point__box {
		width: 90%;
	}

	.service__single {
		width: 48%;
	}

	.point__box {
		width: 100%;
	}

	.portfolio__area {
		width: 80%;
	}

	.service__single:nth-child(3n+2) {
		transition-delay: initial;
	}

	.service__single:nth-child(3n) {
		transition-delay: initial;
	}

	.service__single:nth-child(2n) {
		transition-delay: .3s;
	}
}


/* iphone
--------------------------------------*/
@media only screen and (max-width: 600px) {

	.cmn__dt {
		width: 40%;
		padding-left: 0;
	}

	.cmn__dd {
		width: 60%;
	}

	.cmn__ttl {
		font-size: 1.5rem;
	}

	.cmn__btn {
		box-sizing: border-box;
	}

	.cmn__btn a {
		width: 30%;
	}

	.cmn__btn .cercle {
		width: 35px;
		height: 35px;
	}

	.cmn__page {
		width: 90%;
		padding-bottom: 0;
	}

	.cmn__page h2 {
		font-size: 1.1rem;
	}

	.cmn__img {
		width: 100%;
	}

	.cmn__list li img {
		width: 45px;
		height: 45px;
	}

	.cmn__btn a {
		font-size: .9rem;
	}

	.cmn__box {
		margin-bottom: 20px;
	}

	.cmn__page dt {
		width: 30%;
		padding: 14px 8px;
	}

	.cmn__page dd {
		width: 70%;
		padding: 14px 8px;
	}

	.cmn__img img {
		width: 100%;
	}

	.cmn__page h1 {
		font-size: 1.3rem;
		letter-spacing: .07em;
	}

	.cmn__form {
		width: 100%;
	}

	#hamburger {
		left: 14px;
		top: 14px;
	}

	#hamburger .toggle {
		height: 1.1rem;
	}

	#global {
		right: 14px;
		top: 14px;
	}

	.show .toggle i:nth-child(3) {
		transform: translateY(-7px) rotate(45deg);
		-webkit-transform: translateY(-7px) rotate(45deg);
	}

	.loading p {
		width: 120px;
	}

	.mv__catch {
		font-size: 2rem;
	}

	.mv__catch span {
		font-size: .9rem;
	}

	.about__txt {
		width: 80%;
	}

	#contact img {
		height: 200px;
	}

	.f__box {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 0;
	}

	.f__copy {
		width: 90%;
		margin: 0 auto;
	}

	#footer {
		padding: 60px 0 40px;
	}

	.f__copy {
		padding: 26px 0 80px;
	}

	.f__single:first-child {
		width: 100%;
	}

	.f__single {
		width: 100%;
	}

	.contact__box {
		width: 80%;
		padding: 30px;
	}

	.cmn__link {
		text-align: center;
	}

	.h__logo {
		width: 44%;
	}

	.mv__txt {
		font-size: 1.6rem;
		margin-bottom: 20px;
	}

	.mv__txt small {
		font-size: 1rem;
	}

	.mv__sub {
		font-size: .7rem;
	}

	.mv__catch {
		top: 50%;
		transform: translateY(-50%);
	}

	.mv__img {
		width: 60%;
	}

	.mv__catch {
		width: 90%;
	}

	.mv__btn a {
		font-size: .8rem;
		width: 46%;
	}

	.f__logo {
		width: 54%;
	}

	.works__ul li {
		padding: 0 6px;
	}

	.point__img {
		width: 100%;
	}

	.point__txt {
		width: 100%;
		padding: 30px;
	}

	.point__box {
		width: 90%;
	}

	.point__single {
		margin-bottom: 40px;
	}

	#about {
		padding: 80px 0 100px;
	}

	.point__h3 {
		font-size: 1.1rem;
		text-align: center;
	}

	.mv__img {
		height: 200px;
	}

	.trigger #hamburger {
		top: 14px;
	}

	.show .menu__box {
		width: 68vw;
	}

	.point__img img {
		aspect-ratio: 5 / 3.6;
	}

	.about__catch {
		font-size: 1.5rem;
	}

	.point__box {
		margin: 60px auto 40px;
	}

	.point__h3 {
		margin-bottom: 20px;
	}

	#contact {
		padding: 100px 0 120px;
	}

	#point {
		padding: 80px 0 100px;
	}

	.f__ul {
		margin-bottom: 50px;
	}

	.f__ttl {
		font-size: 1rem;
		letter-spacing: .2em;
		font-weight: 300;
		padding: 0px;
	}

	.menu__nav li a {
		font-size: .85rem;
	}

	.service__single {
		width: 100%;
	}

	#bread {
		padding: 140px 0 40px;
	}

	.twocolumL {
		width: 90%;
		position: initial;
		margin: 0 auto;
	}

	.twocolumR {
		width: 100%;
		border-left: none;
	}

	.service__box {
		width: 90%;
		margin: 80px auto 0;
	}

	.sidebar {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.sidebar li {
		padding-right: 0;
		text-align: center;
	}

	.sidebar li a {
		border-bottom: 1px solid #ccc;
		padding-bottom: 8px;
	}

	.portfolio__nav {
		width: 96%;
	}

	.portfolio__area {
		width: 90%;
	}

	#works {
		padding: 80px 0 100px;
	}

	.service__single:nth-child(2n) {
		transition-delay: initial;
	}

	.portfolio__area {
		width: 100%;
	}

	.portfolio__nav {
		margin: 40px auto 20px;
	}

	.l20 {
		width: 50%;
		margin: 0 auto 10px;
	}

	.r70 {
		width: 100%;
	}

	.info__box {
		margin: 20px 0;
	}

	.bread__ul {
		width: 90%;
	}

	.about__catch {
		margin-bottom: 30px;
	}

	.icon .service__icon {
		max-width: 30px;
		max-height: 30px;
	}

	.service__single {
		padding: 20px 30px;
	}

	.mv__sub {
		width: 58%;
	}

	.about__txt {
		font-size: .9rem;
	}

	.fbc-page .fbc-wrap .fbc-items {
		padding: 0 !important;
	}

	.fbc-page .fbc-wrap .fbc-items li:first-child {
		padding-left: 10px !important;
	}

	.wpcf7 .wpcf7-recaptcha iframe {
		transform: scale(0.7);
		transform-origin: 0% 0%;
	}

	.cmn__index li {
		width: 100%;
	}

	.cmn__index img {
		aspect-ratio: 5 / 3.7;
	}

	.fbc-page {
		width: 100%;
	}

	.swiper-button-next,
	.swiper-button-prev {
		top: var(--swiper-navigation-top-offset, 44%) !important;
	}

	.swiper-button-next:after,
	.swiper-button-prev:after {
		transform: scale(.5);
	}

	.tabArea {
		width: 90%;
	}

	.scroll-infinity__item {
		width: calc(100vw / 3);
	}

	.aioseo-breadcrumbs {
		width: 90%;
	}
}