@charset "UTF-8";

/************************************
** 解像度740px以下のスタイル
************************************/
@media screen and (max-width:767px) {

	html {
		min-width: 320px;
	}

	.breadcrumb {
		margin-bottom: 40px;
	}

	.pc {
		display: none;
	}

	.sp {
		display: inherit;
	}

	.archive-box-img,
	.archive-box-text {
		float: none;
		width: 100%;
	}

	.archive-box-img {
		margin: auto auto 20px;
	}

	.archive-box-img img {
		display: block;
		margin: auto;
	}

	#container {
		background: #000;
	}

	#container #header-in,
	#container #navi,
	#container #navi-in,
	#container #footer-in,
	.inner {
		/*important削除*/
		width: 94%;
		margin: auto;
		padding: 0;
	}

	#container #body-in {
		padding: 30px 0;
	}

	#header {
		height: 60px;
		border-top: 4px solid #214ea2;
		z-index: 100;
	}
	.active #header {
		position: fixed;
	}

	.header-logo {
		width: 130px;
		margin: 13px 0;
	}

	#header-scroll {
		height: 108px;
		top: auto !important;
		bottom: -108px;
	}

	#header-scroll.is-fixed {
		bottom: 0;
	}

	.header-tel {
		float: none;
		margin-bottom: 2px;
	}

	.header-tel a {
		text-decoration: none;
	}

	.header-tel-all {
		text-align: center;
		font-size: 71%;
		line-height: 1.5;
	}

	.header-tel-num {
		text-align: center;
		font-size: 229%;
	}

	.header-tel-num img.sp {
		display: inline-block;
		float: none;
		width: 44px;
		height: auto;
		margin-top: 0;
		vertical-align: unset;
	}

	.header-tel-btn {
		position: relative;
		display: inline-block;
		float: right;
		height: 28px;
		margin: 5px 0;
		padding: 10px 5px;
		text-decoration: none;
		font-size: 10px;
		line-height: 1;
		border-radius: 4px;
		color: #fff;
		background: #12a73b;
		box-shadow: 0 2px 0 0 #00561f;
	}

	.header-tel-btn-txt {
		margin-top: 5px;
		font-size: 16px;
	}

	.header-tel-btn-txt span {
		color: #f6ff00;
	}

	.header-tel-btn img {
		display: inline-block;
		width: 17px;
		height: auto;
		margin-left: 0;
	}

	.header-scroll-btn,
	.header-line-btn {
		position: relative;
		display: inline-block;
		margin-top: 2px;
		margin-left: 0;
		padding: 0;
		font-size: 86%;
		line-height: 40px;
		border-radius: 20px;
	}

	.header-scroll-btn::after,
	.header-line-btn::after {
		display: none;
	}

	.header-scroll-btn {
		float: left;
		width: 38%;
	}

	.header-line-btn {
		width: 58%;
	}

	.sp-nav-btn {
		position: relative;
		display: block;
		float: right;
		width: 48px;
		height: 48px;
		margin-top: 5px;
		margin-left: 5px;
		text-align: center;
		border: 1px solid #000;
		border-radius: 4px;
		background: #fff;
		z-index: 1000;
		-webkit-transition: .2s ease;
		transition: .2s ease;
	}

	.sp-nav-btn span {
		position: absolute;
		display: block;
		width: 26px;
		height: 2px;
		left: 0;
		right: 0;
		margin: auto;
		background: #000;
		-webkit-transition: .2s ease;
		transition: .2s ease;
	}

	.sp-nav-btn span:nth-child(1) {
		top: 8px;
	}

	.sp-nav-btn span:nth-child(2) {
		top: 16px;
	}

	.sp-nav-btn span:nth-child(3) {
		top: 24px;
	}

	.active .sp-nav-btn span:nth-child(1) {
		top: 16px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.active .sp-nav-btn span:nth-child(2) {
		height: 0;
	}

	.active .sp-nav-btn span:nth-child(3) {
		top: 16px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.sp-nav-btn::after {
		content: "メニュー";
		position: absolute;
		bottom: 1px;
		left: 0;
		right: 0;
		font-size: 71%;
	}

	.active .sp-nav-btn::after {
		content: "閉じる";
	}

	.sp-nav-menu {
		position: fixed;
		width: 100%;
		top: 64px;
		bottom: 0;
		right: -100vw;
		margin: auto;
		padding: 40px 20px 20px;
		overflow: scroll;
		pointer-events: none;
		color: #fff;
		background: #1f499f;
		z-index: 500;
		box-sizing: border-box;
		-webkit-transition: .3s ease;
		transition: .3s ease;
	}

	.sp-nav-menu a {
		color: #fff;
	}

	.active .sp-nav-menu {
		right: 0;
		pointer-events: all;
		-webkit-transition-delay: .2s;
		transition-delay: .2s;
	}

	#body {
		background: #fff;
		-webkit-transition: .3s ease;
		transition: .3s ease;
	}

	.active #body {
		opacity: .5;
	}

	.main {
		width: 100%;
	}

	#container .main,
	#container #sidebar {
		float: none;
	}

	.article h2 {
		margin-left: 0;
		margin-right: 0;
	}

	.main blockquote {
		margin-left: 0;
		margin-right: 0;
	}

	.navigation {
		margin-left: 0;
		margin-right: 0;
	}

	.pagination {
		margin: 0;
	}

	#sidebar {
		width: auto;
	}

	#sidebar .widget {
		margin-bottom: 30px;
	}

	#sidebar h3 {
		margin-top: 0;
		margin-bottom: 10px;
		padding: 10px 10px;
	}

	#sidebar li.cat-item {
		margin-bottom: 10px;
		padding: 0 10px 10px 10px;
	}

	.popular-entry-content,
	.new-entry-content {
		margin-bottom: 10px;
		padding: 0 10px 10px 10px;
	}

	.top-title,
	.top-about-title,
	.article-title {
		margin: 0 0 20px 0;
		font-size: 150%;
	}

	#top-main {
		height: auto;
		padding: 40px 0;
	}

	.top-main-title-sub {
		width: 100%;
		margin: auto;
		font-size: 150%;
	}

	.top-main-title {
		margin: 10px 0 20px;
		font-size: 200%;
	}

	.top-main-btn,
	.footer-flow-btn {
		width: 100%;
		padding: 0;
		line-height: 50px;
		border-radius: 25px;
	}

	.top-search-btn {
		width: 100%;
		margin-bottom: 0;
		padding: 0;
	}

	#top-staff,
	#top-about,
	#top-search,
	#footer-promise,
	#footer-flow {
		padding: 40px 0;
	}

	#page {
		padding: 0 0 40px;
	}

	.top-staff-list,
	.top-about-list,
	.footer-promise-list,
	.footer-flow-list {
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.top-staff-list li,
	.top-about-list li,
	.footer-promise-list li {
		width: 100%;
		margin-bottom: 20px;
	}

	.top-staff-list li:nth-child(2n) .top-staff-img {
		float: right;
		margin-right: 0;
		margin-left: 20px;
	}

	.top-staff-btn,
	.top-about-list-btn {
		padding: 0px 30px 0 15px;
	}

	.top-staff-btn::after,
	.top-about-list-btn::after,
	.top-entry-btn::after {
		right: 12px;
	}

	.top-entry-btn {
		width: 100%;
		padding: 0;
		text-align: center;
	}

	.top-search-box {
		padding: 20px;
	}

	.top-search-blk {
		margin-bottom: 20px;
	}

	.top-search-title {
		margin: 0 0 10px 0;
		font-size: 114%;
	}

	.footer-promise-number {
		width: 80px;
		height: 80px;
		top: -40px;
		padding: 6px;
	}

	.footer-promise-list li {
		width: 100%;
		margin-top: 40px;
		padding: 40px 20px 10px 20px;
	}

	.footer-flow-list {
		margin-bottom: 10px;
	}

	.footer-flow-list li {
		width: 100%;
		margin-bottom: 10px;
	}

	.footer-flow-list li:not(:last-child) .footer-flow-box::before,
	.footer-flow-list li:not(:last-child) .footer-flow-box::after {
		display: none;
	}

	.footer-flow-list li:not(:last-child)::before {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		top: auto;
		bottom: -30px;
		left: 0;
		right: 0;
		margin: auto;
		border-style: solid;
		border-width: 26px 15px 0 15px;
		border-color: #ffffff transparent transparent transparent;
		z-index: 5;
	}

	.footer-flow-list li:not(:last-child)::after {
		content: "";
		position: absolute;
		top: auto;
		bottom: -24px;
		right: 0;
		left: 0;
		width: 0;
		height: 0;
		margin: auto;
		border-style: solid;
		border-width: 17px 10px 0 10px;
		border-color: #3491ef transparent transparent transparent;
		z-index: 10;
	}

	.footer-flow-box {
		float: left;
		width: 35%;
		height: 120px;
	}
	.footer-flow-box img {
		max-width: 50%;
	}

	.footer-flow-title {
		font-size: 100%;
		padding: 10px 0;
	}

	.footer-flow-text {
		width: 65%;
		padding: 15px;
		float: right;
		box-sizing: border-box;
	}

	.page-box {
		margin-bottom: 40px;
	}

	.page-inner {
		padding: 30px 0;
	}

	.creator-box {
		padding: 15px;
	}

	.production-table th,
	.production-table td {
		display: block;
		width: 100%;
		padding: 10px;
	}

	.production-button {
		padding: 9px 30px 9px 15px;
	}

	.production-button::after {
		right: 10px;
	}

	.about-img,
	.about-text {
		width: 100%;
	}


	.about-block-text {
		padding: 20px;
	}

	.about-box-img {
		float: none;
		margin: auto auto 10px;
	}

	.about-box-text {
		width: 100%;
	}

	.flow-text,
	.flow-img {
		width: 100%;
	}

	.flow-box-text {
		width: 100%;
	}

	.flow-box-img {
		width: 100%;
	}

	.flow-img img,
	.flow-box-img img {
		display: block;
		margin: auto;
		margin-bottom: 10px;
	}

	.company-box {
		margin-bottom: 40px;
	}

	.company-box-img,
	.company-box-text {
		display: block;
	}

	.company-box-img {
		margin: auto;
		margin-bottom: 10px;
	}

	.company-table th,
	.company-table td {
		display: block;
		padding: 10px;
	}

	.client-number {
		width: 80px;
		height: 80px;
		top: -40px;
		padding: 6px;
	}

	.client-list li {
		width: 100%;
		margin-top: 40px;
		margin-bottom: 20px;
		padding: 40px 20px 10px 20px;
	}

	.form .main {
		padding: 10px;
	}

	.form .main th,
	.form .main td,
	.form .main .is-input-text,
	.form .main textarea,
	.form .main #efo,
	.form .main .submit {
		width: 100%;
		font-size: 20px;
	}

	.form .main th,
	.form .main td {
		display: block;
		box-sizing: border-box;
	}

	.form .main th,
	.form .main td {
		padding: 0;
		font-size: 20px;
		font-weight: normal;
	}

	.form .main label {
		margin-right: 1em;
	}

	.form .main .renewal-refer input, .form .main .refer input {
		width: 100%;
	}

	.form #fd {
		padding: 20px 10px;
		background-color: #ececec;
		text-align: center;
		font-weight: bold
	}

	.form #fd .fd-text {
		display: inline-block;
		margin: auto;
		background: url(images/form/tel-icon.png) no-repeat;
		background-size: 13px 17px;
		padding-left: 3px;
		font-size: 129%;
		line-height: 1;
		color: #0845a6
	}

	.form #fd .tel-icon {
		display: inline-block;
		position: relative;
		top: -2px;
		width: 10px;
		height: 14px;
		margin-right: 5px;
		vertical-align: middle
	}

	.form #fd .fd-button {
		height: 80px;
		margin-top: 8px;
		background-color: #214b9f;
		border: 1px solid #395ca1;
		-webkit-box-shadow: 0 5px 0 #092d75;
		-moz-box-shadow: 0 5px 0 #092d75;
		box-shadow: 0 5px 0 #092d75;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
		border-radius: 5px;
		color: #00a51b;
		background-size: 100% auto;
		background-size: 280px 80px
	}

	.form #fd .fd-button a {
		display: block;
		text-decoration: none
	}

	.form #fd .fd-button-text {
		margin-bottom: 5px
	}

	.form #fd .fd-button-number {
		height: 52px;
		width: 268px;
		background: url(images/form/tel-btn-text.png) 0 0 no-repeat;
		background-size: 268px 52px;
		margin: auto;
		margin-top: 13px;
		text-indent: -9999px
	}

	.form #fd .fd-text2 {
		margin: 12px 0 0 0;
		font-size: 129%;
		color: #0845a6
	}

	.form #fd .time-icon {
		display: inline-block;
		position: relative;
		top: -2px;
		width: 18px;
		height: 18px;
		margin-right: 5px;
		background: url(images/form/time-icon.png) 0 0 no-repeat;
		background-size: 18px 18px;
		vertical-align: middle
	}

	.form .middle .next {
		text-align: left;
		font-weight: normal;
		margin: 0 0 10px;
		line-height: 1.4;
		font-size: 18px;
	}

	.ui-draggable {
		left: auto !important;
		right: 10px !important;
	}

	#page-top {
		right: 10px;
		bottom: 120px;
		margin-top: 0px;
	}

	#page-top a {
		padding: 8px 16px;
	}

	#page-top a#move-page-top {
		margin: auto;
	}

	.page-title {
		padding: 30px 0;
		font-size: 171%;
	}

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

	.footer-table {
		margin-bottom: 30px;
	}

	.footer-table td {
		display: inline-block;
		padding-right: 0;
	}

	.footer-table td a {
		display: inline-block;
		margin-right: 10px;
	}

	.footer-table td:first-child {
		display: block;
	}

	.footer-navi-box {
		float: none;
		margin-bottom: 30px;
		margin-right: 0;
	}
	.btn-green {
		width: 100%;
	}
}

@media screen and (max-width:320px) {
	.top-main-title-sub {
		font-size: 129%;
	}

	.top-main-title {
		font-size: 193%;
	}
}