@charset "UTF-8";
/* CSS Document */
body {
	background-color: #F7F5F2;
	color: #2E2E2E;
}
* { box-sizing: border-box; }
section:not(.firstview):not(.first_nav):not(#about) {
	margin: 80px 0 0;
}
a, a:link, a:visited, a:hover {
	text-decoration: none;
}
ul {
	margin: 0;
	padding: 0;
}
.col-15, .col-sm-15, .col-md-15, .col-lg-15 {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
	width: 100%;
}
.logo {
	max-width: 170px;
}
.border_white {
	border-color: #fff !important;
}
.sp , .sp_320 , .sp_991 { display: none !important; }
.sp_block{ display: inline-block !important; }

.contents_box {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 20px;
}
/*------------
追加カスタムクラス
--------------*/
.bg_basecolor { background-color: #2F5C8F; }
.bg_keycolor { background-color: #8C6A3D; }
.text_basecolor { color: #2F5C8F; }
.border-radius_20top {/*上に角丸を作る*/
	border-radius: 20px 20px 0 0;/*上に角丸を作る*/
}
.border-radius_20bottom {
	border-radius: 0 0 20px 20px;
}
/*------------
h2_title
--------------*/
h2 {
	font-family: source-han-sans-japanese, sans-serif;
	position: relative;
	font-weight: bold;
	font-size: 2.5rem;
	color: #8C6A3D;
	letter-spacing: 1px;
	border-top: dotted 3px #8C6A3D;
	border-bottom: dotted 3px #8C6A3D;
	padding: 1.2rem 0;
	line-height: 1;
}
.scroll_bg h2 {
	color: #FFF;
	border-top: dotted 3px #FFF;
	border-bottom: dotted 3px #FFF;
	 -webkit-text-stroke: 2px #8C6A3D;
	text-stroke: 2px #8C6A3D;
	 text-shadow: 0.05em 0.05em 0.05em #8C6A3D;
	paint-order: stroke;
}
h2::after {
	display: block;
	font-size: 1.25rem;
	padding-top: 0.5rem;
}
#company h2::after {
	content: "会社概要";
}
#about h2::after {
	content: "タグライブとは？";
}
#feature h2::after {
	content: "機能と特徴";
}
#aioption h2::after {
	content: "全自動AI検閲";
}
#sample h2::after {
	content: "表示サンプル";
}
#works h2::after {
	content: "導入事例";
}
#price h2::after {
	content: "料金";
}
#flow h2::after {
	content: "導入フロー";
}
#contact h2::after {
	content: "お問い合わせ";
}
.bg_twittercolor h2::before {
	background: #FFF;
}
/*------------
firstview
--------------*/
#firstview {
	position: relative;
	height: 100%;
}
#firstview .first_bg { border-radius: 0; }
#firstview .container { max-width: 100%!important; }
#firstview .maimlogo img { max-width: 380px; }
#firstview .firstview_box { max-width: 480px; }
#firstview .firstview_copy {
	font-family: "source-han-sans-japanese";
	font-size: 2.5rem !important;
	color: #FFF !important;
	-webkit-text-stroke: 1px #2F5C8F;
	text-stroke: 1px #2F5C8F7;
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
	z-index: 5;
}
#firstview .firstview_box {
	position: absolute !important;
	display: flex !important;
	flex-direction: column;
	top: 0 !important;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	z-index: 5;
	width: 100%;
	max-width: 960px;
	height: max-content;
	text-align: center !important;
}
#firstview .firstview_box .container {
	background: rgba( 255, 255, 255, 0.8 );
	border-radius: 20px;
}
#firstview .firstview_box p:first-of-type {
	font-size: 1.4rem;
	color: #8C6A3D;
}
#firstview .firstview_box a {
	display: block;
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
	font-style: normal;
	width: 100%;
	font-size: 2rem;
	color: #FFF;
	border-radius: 50px;
	transition: .2s;
}
#firstview .firstview_box p:first-of-type {
	font-size: 1.2rem;
	color: #8C6A3D;
}
#firstview .firstview_box a:hover {
	background: #46351f;
}
.ribbon19 {
	display: inline-block;
	position: absolute;
	padding: 10px 0;
	right: -100px;
	top: 45px;
	width: 500px;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	background: #8C6A3D;
	color: #fff;
	letter-spacing: 0.05em;
	-webkit-transform: rotate(25deg);
	transform: rotate(25deg);
	box-shadow: 0 0 0 2px rgb(140, 106, 61);
	z-index: 6;
}
/*------------
ファーストビュー_ナビゲーション （first_nav）
--------------*/
#first_nav .container {
	max-width: 100% !important;
	width: 100% !important;
}
#first_nav a {
	font-size: 1.5rem;
	color: #FFF;
}
.first_nav a>div:hover { opacity: 0.7; }
#first_nav a span { font-size: 1rem }
/*------------
ナビゲーションバー（nav）
--------------*/
nav .container {
	max-width: 1280px;
	display: none !important;
}
.navbar-brand img { max-width: 180px; }
nav li a {
	color: #333;
	transition: .2s;
}
nav li a:hover { color: #6e6e6e; }
nav ul {
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1rem;
}
nav .contact_button {
	border-radius: 10px;
	transition: .2s;
}
nav .contact_button:hover { background: #46351f; }
/*表示用ヘッダー*/
.clone-nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	background: #fff;
	width: 100%;
	height: auto;
	padding: 0.5rem 0 !important;
	transition: .3s;
	color: #000;
	transform: translateY(-200%);
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3) !important;
}
.is-show { transform: translateY(0); }
.clone-nav .container { display: flex !important; }
.clone-nav .navbar { padding: 0.5rem 1rem; }
.clone-nav .navbar-nav { width: 80%; }
/*------------
シェアボタン
--------------*/
.sns_share {
	width: 230px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 40px auto 0;
	padding: 0;
}
.sns_share .sns_share_title {
	margin-right: 10px;
	padding: 5px 10px;
	border-bottom: solid 2px #2F5C8F;
	color: #2F5C8F;
	font-size: 85%;
	font-weight: bold;
}
.sns_share a {
	width: 32px;
	height: 32px;
	margin: 0 3px;
	padding: 0;
	border-radius: 50%;
	border: solid 1px #2F5C8F;
	box-sizing: border-box;
}
.sns_share a:hover{ opacity: .7; }
.sns_share a span { vertical-align: middle; }
.sns_share a span::before { color: #2F5C8F; }
/*------------
会社概要
--------------*/
#company h3 {
	font-size: 1.5rem;
}
#company h4::before , h4::after {
	content: "";
	width: 100px;
	height: 1px;
	background-color: #111;
}
#company h4::before { margin-right: 20px; }
#company h4::after { margin-left: 20px; }
#company h4 {
	font-size: 1.2rem;
	line-height: 2;
}
#company h4 span {
	display: block;
	font-size: 1rem;
}
#company .caption {
	font-size: 0.8rem;
}
#company .argyle_intro img {
	display: block;
	max-width: 250px;
	margin: 0 auto;
}
.scroll_bg {
	position: relative;
	background: linear-gradient( rgba(47, 92, 143, 0.5),rgba(47, 92, 143, 0.5)),url("../img/bg.jpg");
	width: 100%;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	margin: 80px 0;
	padding: 80px 0;
	transition: background-color 0.5s, background-image 0.5s; /* トランジションを両方に適用 */
}
.custom-shape-divider-top-1762460641 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.custom-shape-divider-top-1762460641 svg {
    position: relative;
    display: block;
    width: calc(136% + 1.3px);
    height: 167px;
}
.custom-shape-divider-top-1762460641 .shape-fill , .custom-shape-divider-bottom-1762460580 .shape-fill {
    fill: #FFF9E6;
}
.custom-shape-divider-bottom-1762460580 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}
.custom-shape-divider-bottom-1762460580 svg {
    position: relative;
    display: block;
    width: calc(136% + 1.3px);
    height: 167px;
}

/*------------
description(SNSサイネージ)
--------------*/
#about .bg_gray {
	background: #fafafa;
}
#about h3 {
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.5rem;
	line-height: 1.5;
	border-bottom: solid 3px #8C6A3D;
}
#about .about_img img {
	position: absolute;
}
#about p { line-height: 2; }
/*------------
feature（タグライブの特徴）
--------------*/
#feature .contents_box .d-flex img {
	width: 48px;
	height: 48px;
}
#feature .contents_box h3 {
	font-size: 1.1rem;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 1.5;
}
#feature .signage_needs h3 {
	font-size: 1.5rem;
	color: #8C6A3D;
}
#feature .contents_box p { line-height: 2; }
#feature .document_download img {
	width: 100% !important;
	height: auto !important;
}
#feature .document_download a {
	display: block;
	max-width: 250px;
	color: #FFF;
	text-align: center;
	margin: 0 auto;
	border: solid 1px #FFF;
	padding: 0.5rem 1rem;
	transition: .2s;
}
#feature .document_download a:hover {
	background: #FFF;
	color: #8C6A3D !important;
}
/*------------
sample（利用用途）
--------------*/
.sample_des {
	font-size: 1.75rem;
	font-family: source-han-sans-japanese, sans-serif;
}
.tab-pane>p {
    background: #8C6A3D;
    width: max-content;
    font-size: 1.5rem;
    margin-top: 3rem !important;
    border-radius: 50px;
}
.nav-tabs { border-bottom: none; }
.nav-tabs .nav-link {
	border: solid 2px #8C6A3D;
	border-radius: 0.25rem;
	box-sizing: border-box;
	background: #FFF;
	color: #8C6A3D;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
	position: relative;
	color: #fff;
	background-color: #8C6A3D;
	border: #8C6A3D solid 2px;
}
.nav-tabs .nav-link.active::before, .nav-tabs .nav-item.show .nav-link::before {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	margin: 0 auto;
	bottom: -10px;
	text-align: center;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 15px 0 15px;
	border-color: #8C6A3D transparent transparent transparent;
}
.tab-content .tab-pane {
  display: block;
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

.tab-content .tab-pane.active {
  visibility: visible;
  height: auto;
  overflow: visible;
}
#sample h3 , #sample h4 {
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
	font-style: normal;
}
#sample h3 {
	font-size: 1.3rem;
	border-bottom: solid 3px #8C6A3D;
	line-height: 1.5;
	padding: 0 0 0.5rem;
}
#sample h4 {
	font-size: 1.25rem;
	line-height: 1.5;
}
#sample .sample-flow p{
	font-size: 1.25rem;
}
#sample .sample-flow p span {
	font-size: 75%;
}
#sample .sample-flow a {
	position: relative;
	display: block;
}
#sample .sample-flow a::before,
#sample .sample-flow a::after {
	content: "";
	display: block;
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
	opacity: 0;
}
#sample .sample-flow a::before {
	background: rgba(122,122,122,.6);
	width: 100%;
	height: 100%;
}
#sample .sample-flow a::after {
	color: #fff;
	content: "デモを見る";
	font-size: 22px;
	font-weight: bold;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	bottom: 0;
	right: 0;
}
#sample .sample-flow a:hover::before,
#sample .sample-flow a:hover::after {
	opacity: 1;
}
/*------------
work
--------------*/
#works { margin-bottom: 100px; }
#works .carousel-item.active {
	display: flex;
}
#works .contents_box .carousel-item { flex-direction: row !important; }
#works h3 {
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.4rem;
	width: max-content;
	letter-spacing: 1px;
	border-bottom: solid 3px #8C6A3D;
	padding-bottom: 5px;
}
#works h3 span {
	font-size: 1rem;
	text-indent: -5em;
	padding-left: 5em;
}
#works h4 {
	font-size: 1.4rem;
}
#works .maintext {
	font-family: tbudgothic-std, sans-serif;
	color: #8C6A3D;
	line-height: 1.5;
}
#works .work_option {
	border: solid 1px #8C6A3D;
}
#works .work_option p {
	font-size: 1.2rem;
}
#works .work_option i {
	color: #8C6A3D;
	font-size: 1.5rem;
	vertical-align: text-top;
	margin-right: 10px;
}
#works .work_option li {
	line-height: 1.8;
}
#works .work_img>img {
	
}
#works .work_img>p , #works .caption {
	font-size: 0.8rem;
}
.carousel-control-next-icon , .carousel-control-prev-icon{
	background-size: 15px !important;
	border-radius: 50% !important;
	width: 40px !important;
	height: 40px !important;
	background-position: center center;
	box-shadow: 0px 3px 5px #3a3a3a;
}
.carousel-control-prev { left: -60px; }
.carousel-control-next { right: -60px; }
.sample_temp h3 {
	width: 100% !important;
	font-size: 1.5rem;
	line-height: 1.5;
}
.sample_temp a{ transition: .2s; }
.sample_temp a:hover {
	background: #46351f;
	color: #FFF !important;
}
.carousel-indicators {
	bottom: -28px;
}
.carousel-indicators li {
	background-color: #8C6A3D;
}
/*------------
price
--------------*/
#price .bg_basecolor { border-radius: 20px 20px 0 0; }
#price .contents_box { border-radius: 0 0 20px 20px; }
#price h3 {
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
	font-style: normal;
}
#price .main h3 {
	font-size: 2.25rem;
	letter-spacing: 5px;
}
#price .templete h3::before , #price .customize h3::before {
	display: block;
	font-size: 1.2rem;
	margin-bottom: 1rem;
}
#price .price-text {
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 2rem;
}
#price .price-text .price-text_big {
	font-size: 4.5rem;
}
#price .price-text .price-text_big {
	color: #8C6A3D;
}
#price h4 {
	font-size: 1rem;
	color: #b2b2b2;
}
#price h4::before, #price h4::after {
	content: "";
	width: 100px;
	height: 1px;
	background-color: #b2b2b2;
}
#price h4::before {
	margin-right: 20px;
}
#price h4::after {
	margin-left: 20px;
}
#price h5 {
	font-size: 1rem;
}
#price .mainoption_text {
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.6rem;
	color: #191919;
}
#price .mainoption_text::before {
	content: "+";
	display: block;
	font-size: 4rem;
	margin-bottom: -1rem;
}
#price .mainoption h3 , #price .mainoption .option-price , #price .mainoption .option-price_caption , #price .sub-option_text , #price .sub-option h3 {
	font-size: 1.4rem;
	line-height: 1.5;
}
#price .mainoption .option-price span {
	font-size: 2.5rem;
}
#price .mainoption .option-price_caption {
	width: max-content;
	border-bottom: 5px solid #f56a11;
}
#price .sub-option_text {
	font-size: 2.25rem;
	color: #b2b2b2;
}
#price .sub-option_text::before, #price .sub-option_text::after {
	content: "";
	width: 150px;
	height: 1px;
	background-color: #b2b2b2;
}
#price .sub-option_text::before {
	margin-right: 30px;
}
#price .sub-option_text::after {
	margin-left: 30px;
}
#price .sub-option h3 {
	font-size: 1rem;
}
#price .sub-option-price , #price .option-price {
	line-height: 1;
}
#price .sub-option_big {
	font-size: 1.8rem;
}
#price .late_option h3 {
	border: none;
}
#price .late_option_price h3 {
	font-size: 1.4rem;
}
#price .late_option_price p {
	font-size: 2rem;
}
#price .late_option_price p span {
	font-size: 1rem;
}
/*------------
flow
--------------*/
#flow p {
	font-size: 1.8rem;
	margin-bottom: 0.5rem;
}
/*------------
faq
--------------*/
.qa-box {
	width: 80%;
	margin: 0 auto;
	}
.qa-box .qa dt,
.qa-box .qa dd {
	display: flex;
	align-items: baseline;
	margin: 15px 0;
	padding: 15px;
}
.qa-box .qa dt {
	background: #F5F5F5;
}
.qa-box .qa dt p {
	margin: 0;
	padding-left: 15px;
	font-weight: bold;
	width: 100%;
}
.qa-box .qa dd p {
	margin: 0;
	padding-left: 15px;
	width: 100%;
}
.qa-box .qa dt::before {
	content: "Q";
	display: flex;
	justify-content: center;
	align-items: center;
	background: #007BC6;
	width: 2em;
	height: 2em;
	color: #fff;
}
.qa-box .qa dd::before {
	content: "A";
	display: flex;
	justify-content: center;
	align-items: center;
	background: #CC5581;
	width: 2em;
	height: 2em;
	color: #fff;
}
/*------------
contact
--------------*/
#contact form { background: #F7F5F2; }
#contact .contact_text span {
	font-size: 0.8rem;
}
.zcwf_lblTopBottom .zcwf_title {
	font-size: 0.9rem;
}
#contact textarea {
	height: 200px;
}
#crmWebToEntityForm.zcwf_lblTopBottom {
	max-width: 480px !important;
	padding: 0 !important;
}
.zcwf_lblTopBottom .zcwf_col_fld input[type=text], .zcwf_lblTopBottom .zcwf_col_fld textarea , .zcwf_lblTopBottom .zcwf_col_fld_slt {
	width: 100% !important;
	padding: 0.25rem !important;
}
.zcwf_lblTopBottom .zcwf_col_fld_slt {
	padding: 0.5rem !important;
}
.zcwf_lblTopBottom .zcwf_button {
	display: block;
	max-width: 300px !important;
	margin-right: auto !important;
	margin-left: auto;
	border: none !important;
}
#contact label { margin-bottom: 0; }
#contact label span { display: none }
#contact .zcwf_row:not(:nth-of-type(10)) label::after {
	content: "必須";
	background: #8C6A3D;
	color: #FFF;
	margin-left: 1em;
	border-radius: 2px;
	padding: 0.1rem;
}
#contact input[type="submit"] {
	background: #8C6A3D;
	width: 100%;
	max-width: 250px;
	font-size: 16px;
	color: #fff;
	margin: 0 auto 10px;
	border: solid 1px #ccc;
	border-radius: 4px;
	padding: 10px;
	-webkit-appearance: none;
	transition: .2s ease;
}
#contact input[type="reset"] {
	background: #fff;
	text-decoration: underline;
	margin: 0 auto;
	border: none;
	padding: 0;
}
#contact input[type="submit"] , #contact input[type="reset"] { display: block; }
#contact input[type="submit"]:hover { opacity: .5; }
/*------------
footer
--------------*/
footer {
	background: #2F5C8F;
	margin-top: 80px;
	padding: 32px 0 10px;
}
footer p {
	font-size: 0.8rem;
	margin: 0;
}
footer a { color: #fff !important; }
footer h3 {
	font-size: 1rem;
	font-weight: bold;
}
footer .row:first-of-type ul { line-height: 1.8; }
footer li {
	display: inline-block;
	font-size: 0.8rem;
}
footer li a { text-decoration: none; }
footer li a:hover { text-decoration: underline; }
footer .row:nth-of-type(n+2) li { text-decoration: none; }
footer .row:nth-of-type(2) ul li{
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	letter-spacing: 0.1em;
	font-size: 2rem;
}
footer .row:nth-of-type(2) ul li:last-child::after{
	content: '※営業時間（ 11:00 〜 19:00 ）';
	font-size: 0.8rem;
	margin-left: 0.5rem;
	letter-spacing: 0;
}
footer .row:nth-of-type(3) li { border-right: solid 1px #fff; }
footer .row:nth-of-type(3) li:last-child { border-right: none; }
@media (min-width: 1200px) {
	.col-lg-15 {
		width: 20%;
		flex: 0 0 20%;
	}
}
@media (min-width: 992px) {
	.col-md-15 {
		width: 20%;
		flex: 0 0 20%;
	}
}
@media (max-width: 991px) {
	.sp_991 { display: block !important }
	.pc_991 { display: none !important; }
	#firstview .firstview_box { width: 80%; }
	#firstview .jumbotron .row>img { max-width: 400px; }
	#firstview .firstview_box { text-align: center !important; }
/*------------
firstview
--------------*/
	#firstview img {
		max-width: 550px;
	}
	#firstview .firstview_box a {
		max-width: 400px;
	}
	#firstview .taglive_area_sp  {
		position: relative;
		width: 100vw!important;
		max-width: 90rem;
	}
/*------------
work
--------------*/
	.carousel-control-prev { left: 0px; }
	.carousel-control-next { right: 0px; }
}
@media (min-width: 601px) and (max-width: 820px) { 
		#firstview {
		height: 100%;
	}
}
@media (min-width: 768px) {
	.col-sm-15 {
		width: 20%;
		flex: 0 0 20%;
	}
}
@media (min-width: 320px) and (max-width: 820px) {
	.sp {
		display: block !important;
	}
	.pc , #price .col-lg-6:nth-of-type(2) .container .initial_cost p::after {
		display: none !important;
	}
/*------------
ナビゲーションバー（nav）
--------------*/
	.navbar-nav {
		width: 100%;
	}
	nav .position-fixed {
		right: 10px;
		bottom: 10px;
	}
	nav>.sp{
		display: flex !important;
	}
	nav>ul li i  {
		font-size: 2rem;
		margin: 0 auto 0.3rem;
	}
	nav>ul li {
		width: 100px;
		height: 100px;
		font-size: 0.6rem;
		border-radius: 50%;
		opacity: 0.9;
		overflow: hidden;
	}
	nav>ul li a { color: #fff; }
/*------------
firstview
--------------*/
	#firstview .firstview_copy { font-size: 1.5rem !important; }
/*------------
company
--------------*/
	#company h4 {
		font-size: 1rem;
		line-height: 1.6;
	}
/*------------
description
--------------*/
	#about img { max-width: 500px; }
	#about h3 { font-size: 2rem; }
/*------------
case
--------------*/
	#case .contents_box p { font-size: 1rem; }
/*------------
sample
--------------*/
	#sample h3 { width: 100%; }
	.sample_des { font-size: 1.5rem; }
/*------------
work
--------------*/
	#works .contents_box .carousel-item { flex-direction: column !important; }
	#works .contents_box .carousel-item>div:first-of-type>div { display: flex !important; }
	#works .work-status h4 { width: 100%; }
	#works .work-status p {
		width: 100%;
		max-width: 500px;
	}
	#works h3 span {
		font-size: 1rem;
		text-indent: 0;
		padding-left: 0;
	}
/*------------
price
--------------*/
	#price h4 { line-height: 1.6; }
	#price .customize { margin-top: 0; }
	#price .mainoption .option-price_caption { width: 100%; }
}
@media (min-width: 320px) and (max-width: 600px) { 
		#firstview { max-height: 100vh; }
		#firstview .taglive_area_sp { max-height: 100vh; }
}
@media (min-width: 576px) {
/*------------
work
--------------*/
	#works .contents_box .carousel-item>div:first-of-type>img {
		max-width: 300px;
	}
}
@media (min-width: 576px) and (max-width: 768px) {
	#works .contents_box .carousel-item>div:first-of-type>div img {
		max-width: 200px;
	}
}
@media (min-width: 320px) and (max-width: 575px) {
	.pc_320 {
		display: none !important;
	}
	.sp_320 , .sp_block {
		display: block !important;
	}
	h2 {
		font-size: 1.8rem;
	}
/*------------
ナビゲーションバー（nav）
--------------*/
	.navbar-brand img { max-width: 200px; }
	nav .navbar-nav>li { font-size: 0.8rem; }
	nav .navbar-nav>li:nth-child(3) { display: none !important }
	nav .navbar-nav>li:nth-child(n+1):nth-child(-n+5)::before { width: 20px; /*下線の幅*/ }
/*------------
firstview
--------------*/
	#firstview .firstview_box a { font-size: 1rem; }
/*------------
feature
--------------*/
	#feature .contents_box h3 {
		font-size: 1.4rem;
		font-weight: bold;
		letter-spacing: 1px;
		line-height: 1.5;
	}
/*------------
about
--------------*/
	#about h3 { font-size: 1.5rem; }
/*------------
sample
--------------*/
	#sample h3 {
		width: 100%;
		font-size: 1.5rem;
	}	
	#sample h4 , #sample .sample-flow p {
		font-size: 1.2rem;
	}
	#sample h4 {
		line-height: 1.8;
	}
/*------------
work
--------------*/
	#works .contents_box .carousel-item>div:first-of-type>div {
		display: block!important;
		text-align: center;
		margin-bottom: 1rem !important;
	}
	.clone-nav .navbar-nav {
		width: 95%;
	}
	#works .contents_box .carousel-item>div:first-of-type>div p {
		font-size: 0.8rem;
	}
	#works .carousel-control-next {
		right: 0;
	}
	#works .carousel-control-prev {
		left: 0;
	}
	#works .contents_box .carousel-item>div:first-of-type>div img {
		max-width: 150px;
	}
	#works h3 {
		width: 100%;
		font-size: 1.2rem;
		line-height: 1.5;
	}
	#works h4 {
		font-size: 1.2rem;
	}
	#works .work_option p {
		font-size: 1rem;
	}
	#works .work_option i {
		font-size: 1.2rem;
	}
	.btnarrow4 {
		padding: 0 35px;
	}
	.btnarrow4::before {
		width: 21%;
	}
/*------------
price
--------------*/
	#price .templete h3, #price .customize h3 {
		font-size: 2.5rem;
	}
	#price h4::before, #price h4::after {
		width: 70px;
	}
	#price .mainoption_text , #price .sub-option_text{
		font-size: 1.5rem;
	}
	#price .mainoption .option-price_caption {
		text-decoration: underline #f56a11;
		border-bottom: none;
	}
	#price .sub-option_text::before, #price .sub-option_text::after {
		width: 50px;
	}
	#price .sub-option_text {
		color: #b2b2b2;
	}
	#price .bg_option , #price .sub-option h3 {
		font-size: 1.5rem;
	}
/*------------
faq
--------------*/
  .qa-box { width: 100%; }
/*------------
footer
--------------*/
	footer .row:first-of-type ul li , footer .row:nth-of-type(2) ul li:last-child::after{
		display: block;
	}
	footer .row:nth-of-type(2) ul li:last-child::after {
		margin-left: 0;
	}
	footer .row:nth-of-type(3) {
		flex-direction: column-reverse;
	}
}