@charset "utf-8";
/* ================================================================
 株式会社　ソーフィールド
 admin  : Masako Yoshimoto
 Author: Graphics Drive Inc.
 Author URI: http://www.graphics-drive.com/
 update : 2020/05/12
 
 Smart phone用css
 break point max-width: 480px, min-with: 320px
------------------------------------------------------------------- 

コンテンツ
トップページ
コンセプト
お問い合わせ
来場予約
会社情報
table
Footer

================================================================ */

.pc{ display: none; }
.sp{ display: block; }

body { word-wrap:break-word; }/* スマホで英文字の改行をさせる */

/* br { display: none; }brの改行をさせない */

#header{ display: none; }

#contents , #contents2, .inner{
	width: 95%;
	min-width: 320px;
	clear: both;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
}

/* bxslider01・キャプション文字 */
.bxslider_caption{ height: 300px; padding-bottom:20px; }

/* ------------------------------------------------------------
		コンテンツ・見出し・共通
------------------------------------------------------------ */

/* 見出し  */
.center-box h2 br{ display: inline-block; } /* brを改行させる */

/* 4カラム・list・トップページPickUp */
ul.col4 li{ width: 49%; padding-bottom: 3%; }
ul.col4 li:nth-child(2n){ padding-right: 0; }

/* 3カラム・list */
ul.col3 li, ul.col3-blue li, ul.col3-frame li{ width: 100%; padding-bottom: 5%; padding-right: 0;} /* 全て右余白無し・下空ける */
ul.col3 li img, ul.col3-blue li img, ul.col3-frame img{ float: none; width: 100%; margin-right: auto; margin-left: auto; padding: 0; } 

ul.col3n li{ width: 100%; padding-bottom: 5%; padding-right: 0;} 
ul.col3n li img{ float: none; width: 100%; margin-right: auto; margin-left: auto; padding: 0; } 

/* 2カラム・list・トップページ */
ul.col2 li{ padding-bottom: 3%; }

/* 2カラム・box */
.left50, .right50, .left30, .right70, .left70, .right30, .left60, .right40, .left40, .right60, .left20, .right80, .right20, .left80
{ float: none; width: 100%; margin-right: auto; margin-left: auto; padding: 0; margin-bottom: 10px; }

/* 戻るボタン・矢印付き */
.btn-ctop{ width: 95%; }

/* 画像センター合わせ */
img{ float: none; max-width: 100%; margin-right: auto; margin-left: auto; padding: 0; }

/* ------------------------------------------------------------
		トップページ
------------------------------------------------------------ */
/* 上メニューが被る分下げる */
#slider{ width: 100%; margin-top: 50px;}

.square-green, .square-gray{ width: 100%; height: 60px;}
.square-green p, .square-gray p{padding-top: 10px; }

/* News */
.infobox{ width: 100%; height: auto; }
.news{ width: 100%; float: none; margin-bottom: 20px; }
.blog { width: 100%; float: none; }
.news h3, .blog h3{ text-align: center; }

/* イベント・コロナ対策ページ */
.g-top .btn-white2{ width: 95%; }

/* ------------------------------------------------------------
		コンセプト
------------------------------------------------------------ */
/* Like a hotel */
#concept-h{padding-top: 30px;}
#concept-h h2{ font-size: 2.6em; line-height: 1.4em; }

/* ------------------------------------------------------------
		ショールーム
------------------------------------------------------------ */
.style-title{font-size: 2.8em; line-height: 1.4em;}


/* ------------------------------------------------------------
	来場予約
------------------------------------------------------------ */

ul.col3-frame li{
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------
	こだわり仕様
------------------------------------------------------------ */
/* 4つのボタン */
ul.btn4 li{width: 90%;}
ul.btn4 li:nth-child(1n){ margin-right: 5%; margin-left:5%;}

/* ------------------------------------------------------------
		 会社情報
------------------------------------------------------------ */
.gmap{ width:95%; margin:0 auto; }
.gmap iframe{ height:250px; }

/* ------------------------------------------------------------
		 table
------------------------------------------------------------ */
/* 会社概要 */

.table1{width: 95%;}
.table1 th, .table1 td{ width: 100%; display: block; word-break: break-all;}

/* ------------------------------------------------------------
		Footer
------------------------------------------------------------ */
#footer .finner{ width: 95%; }
#footer .finner .left{float: none;}