@charset "utf-8";

/***********************************************************************
 共通CSS レスポンシブ対応 追加CSS
 ------------------------------------------------------------------------
 ・元の共通CSSの「後ろ」に読み込んでください（上書き用）
 ・top-responsive.css より前でも後ろでも動作しますが、
   読み込み順は「共通CSS → common-responsive.css → TOP CSS → top-responsive.css」を推奨
 ・PC表示（1025px以上）は元のCSSのまま変わりません
 ・ブレイクポイント：タブレット 1024px / スマホ 767px
***********************************************************************/


/***********************************************************************
 タブレット（～1024px）
***********************************************************************/
@media screen and (max-width: 1024px) {

	/* 枠 */
	.inner {
		padding: 70px 20px 90px;
		box-sizing: border-box;
	}

	/* 文字系 */
	.tit-page {
		padding: 60px 15px;
	}
	.tit-bbtm {
		padding-bottom: 35px;
		margin-bottom: 60px;
	}
	.txt-catch {
		font-size: 32px;
	}
	.txt-basic {
		line-height: 2.6;
		letter-spacing: 0.15em;
	}

	/* ヘッドライン */
	.heading-pic {
		gap: 30px;
	}

	/* サービス */
	.service-item {
		gap: 40px;
		padding: 0 20px;
		box-sizing: border-box;
	}
	.service-item + .service-item {
		margin-top: 110px;
	}
	.service-item::after {
		width: 70%;
		background-size: contain;
	}
	.service-item dl {
		margin-top: 40px;
	}
	.service-item dl dt em {
		font-size: 26px;
	}
	.service-item a figure img {
		width: 100%;
	}

	/* フォーム */
	.form-basic dl {
		gap: 0 20px;
	}
	.form-basic dl dt {
		width: 300px;
		padding-right: 90px;
		box-sizing: border-box;
	}
}


/***********************************************************************
 スマホ（～767px）
***********************************************************************/
@media screen and (max-width: 767px) {

	/* ---- 背景・枠 ---- */
	.inner {
		padding: 50px 15px 60px;
	}

	/* ---- ボタン ---- */
	.w380,
	.w380-left {
		width: 100%;
		max-width: 380px;
		padding: 22px 15px;
		box-sizing: border-box;
	}
	.w380-left {
		margin-left: auto;
		margin-right: auto;
	}
	.btn.btn-beige {
		font-size: 15px;
	}
	.ic-plus-wh::before {
		left: 15px;
	}

	/* ---- 文字系 ---- */
	.tit-page {
		padding: 40px 15px;
		font-size: 17px;
		letter-spacing: 0.1em;
	}
	.tit-section {
		font-size: 20px;
		padding-bottom: 25px;
	}
	.tit-section small {
		font-size: 13px;
	}
	.tit-bbtm {
		font-size: 18px;
		padding-bottom: 25px;
		margin-bottom: 40px;
	}
	.txt-basic {
		font-size: 15px;
		line-height: 2.2;
		letter-spacing: 0.08em;
	}
	.txt-basic14 {
		font-size: 13px;
		letter-spacing: 0.1em;
	}
	.txt-catch {
		font-size: 24px;
		line-height: 1.6;
	}
	.txt-catch + .txt-basic {
		margin-top: 30px;
	}
	.txt-anime em {
		font-size: 22px;
	}

	/* ---- リスト（プライバシーポリシー） ---- */
	ul.list-txt {
		margin-top: 30px;
	}
	ul.list-txt > li {
		padding: 30px 5px 0;
	}
	ul.list-txt > li + li {
		margin-top: 30px;
	}
	ul.list-txt li dl dd {
		padding-left: 15px;
	}

	/* ---- ヘッドライン ---- */
	.heading-pic {
		gap: 20px;
	}

	/* ---- dlテーブル（会社概要） ---- */
	.item-dl-table > dl {
		display: block;
	}
	.item-dl-table > dl + dl {
		margin-top: 25px;
	}
	.item-dl-table > dl dt {
		display: block;
		width: 100%;
		text-align: left;
		padding: 0 0 8px;
		border-right: none;
		border-bottom: 2px solid #BFBFBF;
		box-sizing: border-box;
	}
	.item-dl-table > dl dd {
		display: block;
		width: 100%;
		padding: 10px 0 0;
		box-sizing: border-box;
	}

	/* ---- サービス ---- */
	.service-item,
	.service-item:nth-of-type(even) {
		display: block;
		margin-top: 35px;
		padding: 0 15px;
	}
	.service-item + .service-item {
		margin-top: 80px;
	}
	.service-item::after {
		display: none;
	}
	.service-item::after,
	.service-item:nth-of-type(2)::after,
	.service-item:nth-of-type(4)::after {
		width: 90%;
		height: 160px;
		background-size: contain;
		left: 0;
		right: auto;
		bottom: 0;
	}
	.service-item:nth-of-type(2)::after,
	.service-item:nth-of-type(4)::after {
		left: auto;
		right: 0;
	}
	.service-item > div,
	.service-item > a,
	.service-item figure {
		width: 100%;
	}
	.service-item a figure img {
		width: 100%;
	}
	.service-item dl {
		margin-top: 25px;
		padding: 0;
	}
	.service-item dl dt em {
		font-size: 22px;
		letter-spacing: 0.1em;
	}
	.service-item dl dd {
		letter-spacing: 0.1em;
		font-size: 14px;
	}
	.service-item dl + a {
		margin-left: 0;
		margin-top: 20px;
	}

	/* サービス背景テキスト（TOP） */
	.service-item.ic-txt:nth-of-type(1)::before,
	.service-item.ic-txt:nth-of-type(2)::before,
	.service-item.ic-txt:nth-of-type(3)::before {
		display: none;
	}
	.service-item.ic-txt:nth-of-type(1)::before {
		width: 100px;
		height: 55px;
	}
	.service-item.ic-txt:nth-of-type(2)::before {
		width: 200px;
		height: 53px;
	}
	.service-item.ic-txt:nth-of-type(3)::before {
		width: 240px;
		height: 43px;
	}

	/* ---- フォーム ---- */
	.form-basic dl {
		display: block;
		padding-top: 25px;
	}
	.form-basic dl + dl {
		margin-top: 25px;
	}
	.form-basic dl dt {
		width: 100%;
		margin-top: 0;
		padding: 0 70px 0 0;
		box-sizing: border-box;
		min-height: 36px;
	}
	.form-basic dl dd {
		width: 100%;
		padding: 15px 0 0;
		box-sizing: border-box;
	}
	.form-basic dl dd input[type="text"],
	.form-basic dl dd input[type="email"],
	.form-basic dl dd input[type="tel"],
	.form-basic dl dd textarea {
		width: 100%;
		box-sizing: border-box;
	}
	.form-basic input[type="radio"] + label {
		font-size: 16px;
	}
	.form-basic input[type="radio"] + label span {
		padding-left: 0;
	}
	.ic-req {
		padding: 6px 12px;
		font-size: 12px;
	}
	ul.check_label_child li {
		min-width: 50%;
	}
	.form-address {
		flex-wrap: wrap;
		gap: 10px 10px;
	}
	.form-address input {
		width: 100%;
	}
	.form-basic .btn-send {
		padding-top: 25px;
		margin-top: 25px;
	}
	.form-basic .btn-send button {
		width: 100%;
		max-width: 320px;
		height: 70px;
	}
	.txt-error {
		padding: 12px 12px 12px 48px;
	}
	.txt-error::after {
		left: 14px;
	}

	/* ---- 横並び ---- */
	ul.col {
		gap: 10px;
	}
	ul.col04 li {
		width: calc(50% - 5px);
	}

	/* ---- 完了画面 ---- */
	.formComp .txt-formComp {
		font-size: 20px;
		line-height: 1.6;
	}
	.formComp .txt-formComp + figure {
		margin-top: 30px;
	}
	.formComp dl {
		padding-top: 35px;
		margin-top: 35px;
	}
	.formComp dl dd {
		margin-top: 25px;
	}

	/* ---- ログインフォーム ---- */
	.box-form {
		padding: 25px 15px;
	}

	/* ---- TOPに戻る ---- */
	.back-link {
		margin-top: 50px;
		padding-top: 50px;
	}

	/* ---- アクセス情報の車 ---- */
	dl.txt-atn-car {
		padding: 20px 15px 20px 55px;
		margin-top: 30px;
	}
	dl.txt-atn-car dt::before {
		left: -40px;
		width: 28px;
		height: 28px;
		border-radius: 14px;
		line-height: 28px;
	}

	/* ---- アニメーション（SPでは移動量を控えめに） ---- */
	@keyframes fadeUpAnime {
		from {
			opacity: 0;
			transform: translateY(40px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}