@charset "utf-8";
/*==================================================
	スマホのみに適用
==================================================*/
@media only screen and (max-width: 640px){
	body { font-size: 85%; }
	.dsp_hp, .dsp_hpt { display: none; }

	/* ヘッダー */
	#header .header_ico {
		display: none;
	}
	#header .header_ico02 {
		height: 50px;
		margin-right: 45px;
		padding: 10px 5px 0;
	}
	#header .header_ico02 img {
		width: 55vw;
	}
	@media only screen and (max-width: 320px) {
		#header .header_ico02 img {
			width: 50vw;
		}
	}
	/* コンテナ */
	#wrap, #footer {
		min-width: 320px;
	}
	#container h3.sub {
		margin-bottom: 20px;
		font-size: 20px;
	}
	#container h3.txt_blue {
		font-size: 25px;
	}
	#container h3.sub span {
		font-size: 20px;
	}
	#page_title .sub_page.company {
		height: 120px;
		font-size: 25px;
	}
	/* フッター */
	#top_sitemap .box {
		padding: 15px;
	}
	#footer {
		padding-bottom: 70px;
	}
	#copyright {
		height: auto;
		line-height: 1.6;
		padding: 5px 0;
	}
	/* 枠のマージン・パディング */
	.mb { margin-bottom: 30px; }
	.pt { padding-top: 30px; }
	.pb { padding-bottom: 30px; }
	.sticy_contact .dsp_tbs a {
		height: 70px;
	}
	.sticy_contact .dsp_tbs a img {
		width: 90%;
	}
	/*--------------------------------------------------
		トップページ
	--------------------------------------------------*/
	#top_waku {
		width: 100%;
	}
	#top_waku .box {
		width: 50%;
		box-sizing: border-box;
		padding: 5px;
		border-top: 1px solid #999;
		background: #FFF;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-weight: 600;
	}
	#top_waku .box:nth-of-type(3),#top_waku .box:last-of-type {
		border-bottom: 1px solid #999;
	}
	#top_waku .box:nth-of-type(odd) {
		border-right: 1px solid #999;
	}
	#top_waku .box .img {
		width: 30%;
		display: flex;
		justify-content: center;
	}
	#top_waku .box .img .ico {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30px;
		height: 30px;
		background: #30A0B8;
		border-radius: 5px;
		padding: 3px;
	}
	#top_waku .box:last-of-type .img .ico img {
		height: 28px;
	}
	#top_waku .box .txt {
		width: 70%;
		font-size: 12px;
		color: #143D56;
	}
	@media only screen and (max-width: 320px) {
		#top_waku .box .txt .w320br {
			display: block;
		}
	}
	#slider .slide span img {
		max-width: 100%;
	}
	#slider .slide01 span img {
		width: 100%;
	}
	#slider .slide03 span img {
		width: 70%;
	}
	#slider .slide04 span img {
		bottom: 10vw;
		top: auto;
	}
	#slider .slide05 span img {
		width: 95%;
		bottom: 10vw;
	}
	#top_info {
		padding-top: 50px;
	}
	#top_info .box h3 {
		width: 220px;
		height: 80px;
		padding-top: 13px;
		padding-left: 30px;
		font-size: 20px;
		top: -34px;
	}
	#top_info .box .more {
		text-align: right;
		margin-bottom: 15px;
	}
	#top_info .box .more a {
		position: relative;
		top: auto;
		text-align: left;
	}
	#top_msg {
		padding-bottom: 0;
	}
	#top_msg .ttl {
		font-size: 20px;
	}
	#top_msg .ttl .serif01, #top_msg .ttl .serif02 {
		font-size: 24px;
	}
	@media only screen and (max-width: 320px){
		#top_msg .ttl {
			font-size: 18px;
		}
		#top_msg .ttl .serif01, #top_msg .ttl .serif02 {
			font-size: 20px;
		}
	}
	#top_msg .bg_mv {
		padding-right: 0;
	}
	#top_msg .bg_mv .txt_box .txt {
		font-size: 18px;
	}
	#top_msg .ranking {
		width: 100%;
		max-width: 350px;
	}
	#top_msg .ranking li {
		padding-top: 10px;
		width: 110px;
		height: 110px;
	}
	#top_msg .ranking li:last-of-type {
		padding-top: 10px;
	}
	#top_msg .photo .img {
		width: 100px;
	}
	#top_msg .photo .text {
		margin-left: 120px;
		width: calc(100% - 140px);
		font-size: 18px;
	}
	#top_msg .photo .text br {
		display: none;
	}
	#top_troble .box {
		width: 100%;
	}
	#top_troble .box .illust {
		width: 200px;
		margin: 0 auto;
	}
	#top_troble .box .img {
		width: 200px;
		margin: 0 auto;
	}
	#top_troble .box .msg .txt {
		font-size: 25px;
	}
	#top_troble .box .in h4 {
		font-size: 20px;
	}
	#top_reason h3.txt_blue {
		font-size: 20px;
	}
	#top_reason .waku {
		margin-bottom: 40px;
	}
	#top_reason .waku h4 {
		font-size: 20px;
	}
	#top_reason .waku h4 span {
		font-size: 30px;
	}
	#top_reason .waku ul.img {
		margin-bottom: 20px;
	}
	#top_reason .waku ul.icos {
		width: 100%;
	}
	#top_reason .waku ul.icos li {
		width: 100px;
		margin-bottom: 15px;
		padding-bottom: 30px;
	}
	#top_reason .waku ul.icos li .ico {
		width: 100px;
		height: 100px;
	}
	#top_reason .waku ul.icos li .ico img {
		width: 40%;
	}
	#top_reason .waku ul.icos li .txt {
		font-size: 15px;
	}
	#top_reason .ttl .bg {
		padding-left: 50px;
		padding-right: 15px;
		padding-bottom: 20px;
	}
	#top_reason .ttl .bg .txt01 {
		font-size: 18px;
	}
	#top_reason .ttl .bg .txt02 {
		font-size: 22px;
	}
	#top_reason .ttl .bg .txt02 span {
		font-size: 25px;
	}
	@media only screen and (max-width: 320px){
		#top_reason h3.txt_blue, #top_reason .ttl .bg .txt01 {
			font-size: 16px;
		}
		#top_reason .waku ul.icos li {
			width: 80px;
			margin-bottom: 10px;
			padding-bottom: 25px;
		}
		#top_reason .waku ul.icos li .ico {
			width: 80px;
			height: 80px;
		}
		#top_reason .waku ul.icos li .txt {
			font-size: 13px;
		}
		#top_reason .ttl .bg .txt02 {
			font-size: 18px;
		}
	}
	#top_reason .ttl .bg .txt02 span b {
		width: 80px;
		height: 80px;
		margin: 0 10px 0 0;
		font-size: 70px;
	}
	#top_reason .ttl .ttl_photo img {
		width: 120px;
	}
	#top_reason .in_link li a {
		font-size: 18px;
	}
	@media only screen and (max-width: 320px){
		#top_reason .in_link li a {
			font-size: 17px;
		}
	}
	#top_reason .text h4 {
		font-size: 20px;
		margin-bottom: 20px;
	}
	#top_reason .text h4 img {
		max-height: 36px;
	}
	#top_reason .text h4.l2 img {
		max-height: 72px;
	} 
	#top_reason .text h4 b {
		font-size: 30px;
	}
	#top_reason .text dl dt {
		font-size: 18px;
	}
	#top_reason .photo ul {
		max-width: 350px;
		margin: 0 auto;
	}
	#top_reason .photo ul li:first-of-type {
		margin-right: 10px;
	}
	#top_reason .photo ul li {
		width: 165px;
		height: 165px;
	}
	#top_reason .photo ul li > span {
		font-size: 16px;
		width: 100%;
	}
	#top_reason .photo ul li span b {
		font-size: 40px;
	}
	@media only screen and (max-width: 320px){
		#top_reason .text h4 {
			font-size: 18px;
		}
		#top_reason .photo ul li {
			width: 140px;
			height: 140px;
		}
		#top_reason .photo ul li > span {
			font-size: 14px;
		}
		#top_reason .photo03 .txt {
			font-size: 15px;
		}
	}
	#top_reason .photo03 ul {
		max-width: 100%;
	}
	#top_reason .photo03 ul li {
		width: 55%;
		height: auto;
	}
	#top_reason .photo03 ul li:first-of-type {
		margin-right: 0;
	}
	#top_reason .photo03 ul li:nth-of-type(2) {
		width: 44%;
	}
	#top_reason .text04 dl dd .txt {
		width: 100%;
		margin-bottom: 15px;
	}
	#top_reason .text04 dl dd .img {
		margin: 0 auto;
	}
	#top_flow h3 {
		margin-bottom: 30px;
	}
	#top_flow h3 span {
		font-size: 20px;
	}
	#top_flow h3::before {
		width: 365px;
	}
	#top_flow .strong dt {
		font-size: 18px;
	}
	@media only screen and (max-width: 320px){
		#top_flow h3 span {
			font-size: 17px;
		}
		#top_flow h3::before {
			width: 310px;
		}
		#top_flow .strong dt {
			font-size: 16px;
		}
		#top_flow .strong dd .pink {
			font-size: 20px;
		}
	}
	#top_flow .strong .img {
		width: 100%;
		height: auto;
		padding: 15px;
	}
	#top_flow .box {
		width: calc(100% - 12px);
		padding: 15px;
	}
	#top_flow .box dl dt {
		text-align: center;
		width: 100%;
	}
	#top_flow .box dl dd .ttl,#top_pikapika .ttl {
		font-size: 18px;
		margin-bottom: 15px;
		line-height: 1.8em;
		padding: 10px;
	}
	#top_flow .box dl dd .ttl span,#top_pikapika .ttl span {
		padding: 0 5px;
		margin: -10px 10px -10px -10px;
		padding-top: 10px;
	}
	#top_flow .box dl dd .txt_box .in {
		width: 100%;
	}
	#top_flow .box dl dd .txt_box .in:first-of-type {
		margin-bottom: 15px;
	}
	#top_flow .box dl dd .red_ttl {
		font-size: 18px;
		padding: 0 10px;
	}
	#top_flow .box dl dd .txt_box02 .txt02 {
		width: 100%;
		line-height: 1.8em;
	}
	#top_flow .box dl dd .txt_box02 .img {
		width: 100%;
		text-align: center;
	}
	#top_flow .box dl dd .txt_box.arrow .in {
		width: 100%;
	}
	#top_flow .box dl dd .txt_box.arrow .in:first-of-type {
		margin-bottom: 40px;
	}
	#top_flow .box dl dd .txt_box.arrow .in:first-of-type::before {
		clip-path: polygon(50% 100%, 0 0, 100% 0);
		width: 80px;
		height: 26px;
		right: auto;
		left: 50%;
		transform: translateX(-50%);
		bottom: -30px;
		top: auto;
	}
	@media only screen and (max-width: 320px){
		#top_flow .box dl dd .ttl,#top_pikapika .ttl {
			font-size: 15px;
		}
	}
	#top_flow .option {
		padding: 15px;
	}
	#top_flow .option h4 span {
		display: block;
		margin-right: 0;
		margin-bottom: 5px;
	}
	#top_flow .option .info {
		margin-top: 90px;
	}
	#top_flow .option .info .sen_red {
		margin-bottom: 15px;
	}
	#top_flow .option .info .sen_red span {
		font-size: 18px;
		line-height: 1.8em;
		padding-bottom: 0;
	}
	#top_flow .option .info .waku_txt dt,#top_flow .option .info .waku_txt dd {
		width: 100%;
		padding: 5px 10px;
	}
	#top_flow .option .info .waku_txt dd {
		line-height: 1.8em;
	}
	#top_pikapika h3 {
		margin-bottom: 20px;
		line-height: 1.2;
	}
	#top_pikapika h3 img {
		max-height: 32px;
	}
	#top_pikapika h3 span {
		font-size: 20px;
		display: inline;
	}
	#top_pikapika h3 span:after {
		right: -100px;
	}
	@media only screen and (max-width: 320px){
		#top_pikapika h3 span {
			font-size: 17px;
		}
		#top_pikapika h3 span:after {
			right: -80px;
		}
		#top_pikapika h3 span:before {
			left: -135px;
			top: 50px;
		}
	}
	#top_pikapika dl {
		padding: 5px 10px 10px 10px;
	}
	#top_pikapika dl dt:nth-of-type(2)::before, #top_pikapika dl dd::before {
		width: 60px;
		height: 25px;
		padding-top: 0;
		font-size: 14px;
	}
	#top_pikapika dl dt::after {
		bottom: -44px;
		margin-left: -30px;
		border: 30px solid transparent;
		border-top: 15px solid #30A0B8;
	}
	#top_pikapika dl dt:first-of-type {
		font-size: 16px;
		line-height: 1.4;
	}
	#top_price h3::before {
		width: 180px;
	}
	#top_price .box:not(:last-of-type) {
		margin-bottom: 40px;
	}
	#top_price .box h4 {
		line-height: 1.2;
		padding: 10px;
	}
	#top_price .box .info {
		width: 100%;
	}
	#top_price .box .info .pink {
		font-size: 18px;
	}
	#top_price .box .info .sec dl dd {
		font-size: 12px;
	}
	#top_price .box .info .sec dl dd .fs {
		font-size: 12px;
	}
	#top_price .box .info .sec dl dd b {
		font-size: 26px;
	}
	@media only screen and (max-width: 320px){
		#top_price .box .info .sec dl dd .fs {
			display: block;
		}
	}
	#top_faq h3 {
		padding-top: 90px;
		background-size: 110px auto, 60px auto, 50px auto;
		background-position: center top, left bottom 10px, right bottom 10px;
	}
	#top_faq h3 span {
		font-size: 30px;
	}
	@media only screen and (max-width: 320px){
		#top_faq h3 {
			margin-bottom: 30px;
		}
		#top_faq h3 span {
			font-size: 23px;
		}
	}
	#top_faq dl dt, #top_faq dl.on dt {
		background-size: 20px auto;
	}
	#top_faq dl dt {
		padding-right: 45px;
		padding-left: 60px;
		font-size: 16px;
		line-height: 1.5;
	}
	#top_faq dl dt::before, #top_faq dl dd::before {
		width: 35px;
		height: 35px;
		line-height: 33px;
		font-size: 28px;
	}
	#top_promise h3 {
		margin-bottom: 30px;
	}
	#top_promise .box {
		margin-bottom: 30px;
	}
	#top_promise .box .ttl {
		padding-left: 0;
	}
	#top_promise .box .ttl .maru {
		position: relative;
		margin: 0 auto 15px;
	}
	#top_promise .box .ttl .ttl_txt dt span {
		font-size: 20px;
	}
	#top_promise .box .ttl .ttl_txt dd span {
		font-size: 28px;
	}
	#top_promise .box .txt {
		font-size: 16px;
	}
	#top_application_flow .box .info {
		display: block;
	}
	#top_application_flow .box .info dt {
		width: 100%;
		text-align: center;
		margin-bottom: 10px;
	}
	#top_application_flow .box .info dd {
		width: 100%;
	}
	#top_area .box {
		padding: 15px;
	}
	#top_sns .sns {
		width: 60px;
	}
	#top_sns .sns a {
		width: 60px;
		height: 60px;
	}
	#top_sns a img {
		margin-right: 0;
	}
	#top_sns .sns a span {
		display: none;
	}
	/*--------------------------------------------------
		施工実績
	--------------------------------------------------*/
	#case .box {
		width: 100%;
	}
	#case .photo {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	/*--------------------------------------------------
		サブページ
	--------------------------------------------------*/
	
	/*--------------------------------------------------
		会社案内
	--------------------------------------------------*/
	#company .company_about .tbl_box tr {
		font-size: 14px;
	}
	#company .company_about .tbl_box th, #company .company_about .tbl_box td {
		padding: 5px;
	}
	#company .company_about .tbl_box th {
		width: 35%;
	}
	#company .company_about .tbl_box td {
		width: 65%;
	}
	@media only screen and (max-width: 320px) {
		#company .company_about .tbl_box th, #company .company_about .tbl_box td {
			font-size: 13px;
		}
	}
	#company .company_about .map_box iframe {
		height: 200px;
	}
/*------------------------------------------------*/
}