@charset "utf-8";
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
    letter-spacing: normal;
}
:focus {
    outline: 0;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}
a img {
    border: 0;
}
.center{text-align:center;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    font: 14px/1.5 "メイリオ", "Meiryo", arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
    color: #333;
    -webkit-text-size-adjust: none;
    background-color: #FCFCFC;
}
img.tabimg{
	width: 100%;
	height: auto;
max-width: 100%;
}	
.pcdisplay {
    display: block;
}
.red {
    color: #FC0206;
}
.blue {
    color: #0059ac;
}
.mb20 {
    margin-bottom: 20px;
}
.mb30 {
    margin-bottom: 30px;
}
.mb50 {
    margin-bottom: 50px;
}
.pt10 {
    padding-top: 10px;
}
.pr10 {
    padding-right: 10px;
}
.f90 {
    font-size: 90%;
}
.f100 {
    font-size: 100%;
}
.f120 {
    font-size: 120%;
}
.b {
    font-weight: bold;
}
p {
    margin-bottom: 10px;
}
.right{
    text-align:right;
}
.spnavi{
   display: none;
}
.pure-container {
 display:none;
}
    .nopc{display:none;}   
    .nosp{display:inherit;} 
/* パンくず
------------------------------------------------------------*/
.breadcrumbs {
padding-top:11px;
	text-align: center;
}
.breadcrumbs ul {
width: 960px;
margin: 0 auto;
text-align: left;
}
.breadcrumbs ul li {
margin: 0 0 0 0px;
font-size: 100%;
display: inline;
}
.breadcrumbs ul li:after {/* >を表示*/
  content: '>';
  padding: 0 0.5em;
  color: #111;
}

.breadcrumbs ul li:last-child:after {
  content: '';
}

.breadcrumbs ul li a {
  text-decoration: none;
}

.breadcrumbs ul li a:hover {
  text-decoration: underline;
}
/* リンク設定
------------------------------------------------------------*/
a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    font-size: 100%;
    color: #313131;
}
a:hover, a:active {
    outline: none;
    color: #6f6f6f;
}
/**** Clearfix ****/
nav .panel:after, nav#mainNav:after, .newsTitle:after, .bg:after, .post:after, ul.post li:after, nav#mainNav .inner:after {
    content: "";
    display: table;
    clear: both;
}
nav .panel, nav#mainNav, .newsTitle, .bg, .post, ul.post li, nav#mainNav .inner {
    zoom: 1;
}
/* フォーム
------------------------------------------------------------*/

.cssform p{
width: 667px;
clear: left;
margin: 0;
padding: 15px 0 20px 0;
padding-left: 205px;/*width of left column containing the label elements*/
border-top: 1px solid #ccc;
height: 1%;
	font-size:100%;
}
.cssform p.kojin{
padding: 10px 0 30px 0;
	font-size:100%;
}

.cssform label{
	float: left;
	margin-left: -200px; /*width of left column*/
	width: 200px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 280px;
}

.cssform textarea{
width: 350px;
height: 200px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}

input[type="text"], textarea {
    vertical-align: middle;
    max-width: 90%;
    line-height: 30px;
    height: 30px;
    padding: 1px 5px;
    border: 1px solid #aaa;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    font-size: 100%;
    color: #333;
    background: #fcfcfc;
}
input[type="file"] {
    padding: 4px 0px;
    font-size: 100%;
    color: #333;
}
textarea {
    height: auto;
    line-height: 1.5;
}
input[type="submit"], input[type="reset"], input[type="button"] {
    padding: 3px 10px;
    background: #878787;
    background: -moz-linear-gradient(top, #878787 0%, #6f6f6f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #878787), color-stop(100%, #6f6f6f));
    background: -webkit-linear-gradient(top, #878787 0%, #6f6f6f 100%);
    background: -o-linear-gradient(top, #878787 0%, #6f6f6f 100%);
    background: linear-gradient(to bottom, #878787 0%, #6f6f6f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#878787', endColorstr='#6f6f6f', GradientType=0 );
    border: 0;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    line-height: 1.5;
    font-size: 120%;
    color: #fff;
}
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
    background: #878787;
    background: -moz-linear-gradient(top, #6f6f6f 0%, #878787 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6f6f6f), color-stop(100%, #878787));
    background: -webkit-linear-gradient(top, #6f6f6f 0%, #878787 100%);
    background: -o-linear-gradient(top, #6f6f6f 0%, #878787 100%);
    background: linear-gradient(to bottom, #6f6f6f 0%, #878787 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f6f6f', endColorstr='#878787', GradientType=0 );
    cursor: pointer;
}
*:first-child+html input[type="submit"] {
    padding: 3px;
}
/* レイアウト
------------------------------------------------------------*/
#wrapper, .inner {
    margin: 0 auto;
    width: 960px;
}
#header {
    overflow: hidden;
    width: 960px;
    margin: 0 auto;
}
#header .inner {
    float: left;
    width: 580px;
    background-image: url(../images/tepple.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
	height:110px;
}
#content {
    float: right;
    width: 680px;
    padding: 22px 0 50px;
}
#sidebar {
    float: left;
    width: 240px;
    padding: 22px 0 50px;
}
#footer {
    clear: both;
    background-color: #41B6C4;
}
.main-inner {
    margin: 0 auto;
    width: 100%;
}
.main-inner p {
    margin: 0 10px 30px 10px;
}
/* ヘッダー
*****************************************************/

/* サイト説明文
----------------------------------*/
#header h1 {
    padding: 2px 0 10px;
    font-size: 100%;
    font-weight: bold;
}
/* ロゴ (サイトタイトル)
----------------------------------*/
#header .logo {
    padding: 2px 1px 1px 95px;
    font-size: 250%;
    font-weight: bold;
}
#header .logo a {
    color: #2a88c7;
}
/* コンタクト
----------------------------------*/
.headright {
    float: right;
    padding: 0;
    text-align: right;
    color: #000;
    font-size: 90%;
}
.headright .tel {
    margin-bottom: 0;

}
.headright .tel a:hover{
cursor: default;
}
 a.cursor:hover{
cursor: default;
      color: #313131;
}
/* トップページ　メイン画像
----------------------------------*/
#mainImg {
    margin-top: 0;
    clear: both;
    line-height: 0;
    text-align: center;
    z-index: 0;
    width: 100%;
    background-color: #e6f0fa;
}
.subimg {
    width: 100%;
    height: 300px;
    background-image: url(../images/maskot.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    text-shadow: 1px 1px 1px #000000;
}
.subimg p {
    color: #000;
    font-size: 170%;
    font-weight: bold;
    padding-top: 170px;
    padding-left: 50px;
}
.post {
    margin: 0 0 20px 0;
    padding: 20px 10px 20px 20px;
    background: #fff;
}
.toppage h4 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: normal;
    color: #333;
}
.toppage {
    padding: 0 0 20px 0;
    width: 680px;
}
.toppage p.top1 {
    margin: 10px 20px 10px 20px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}
.toppage p.top2 {
    font-size: 16px;
    font-weight: normal;
    color: #333;
    display: inline-block;
    padding-top: 10px;
}
/* 記事ループ
*****************************************************/
.list {
    padding: 10px 0;
    border-bottom: 1px dashed #dcdcdc;
}
.list:last-child {
    border: 0;
}
.post .list p {
    padding: 0;
}
.list span {
    padding-left: 10px;
}
/* タイポグラフィ
*****************************************************/
h3.title {
    clear: both;
    margin: 0;
    padding: 0 0 0 60px;
    font-size: 160%;
    color: #fff;
    border: 1px solid #0e5eb8;
    border-bottom: 0;
    background-repeat: no-repeat;
    background-position: 5px 50%;
    background-image: url(../images/rousui0_10.png);
    background-color: #0E5EB8;
    height: 45px;
    line-height: 45px;
    font-weight: bold;
    letter-spacing: 0px;
}
.dateLabel {
    text-align: right;
    font-weight: bold;
    color: #858585;
}
.post p {
    padding-bottom: 15px;
}
.post ul {
    margin: 0 0 10px 10px;
}
.post ul li {
    margin-bottom: 5px;
    padding-left: 15px;
    background: url(../images/bullet.png) no-repeat 0 8px;
}
.post ol {
    margin: 0 0 10px 30px;
}
.post ol li {
    list-style: decimal;
}
.post h1 {
    margin: 20px 0;
    padding: 5px 0;
    font-size: 150%;
    color: #000;
    border-bottom: 3px solid #000;
}
h2 {
    margin: 0 0 10px;
    padding-top: 0px;
    padding-bottom: 2px;
    font-size: 200%;
    font-weight: bold;
    color: #0059ac;
    border-bottom: 2px solid #515151;
    letter-spacing: 2px;
    line-height: 130%;
}
h2 {
    padding-bottom: 0;
    border-bottom: none;
}
h3 {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-align: left;
    background-color: #2A88C7;
    padding: 5px 0 5px 10px;
    margin-bottom: 10px;    
}
h4 {
    font-size: 16px;
    color: #2a88c7;
    text-align: center;
    background-color: #c8f0ff;
    padding: 1px 0 1px 0;
    margin-bottom: 10px;
}
.post blockquote {
    clear: both;
    padding: 10px 0 10px 15px;
    margin: 10px 0 25px 30px;
    border-left: 5px solid #ccc;
}
.post blockquote p {
    padding: 5px 0;
}
.post table {
    border: 1px #ccc solid;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 10px 0 20px;
}
.post table th {
    padding: 10px;
    border: #ccc solid;
    border-width: 0 0 1px 1px;
    background: #efede7;
}
.post table td {
    padding: 10px;
    border: 1px #ccc solid;
    border-width: 0 0 1px 1px;
    background: #fff;
}
.post dt {
    font-weight: bold;
}
.post dd {
    padding-bottom: 10px;
}
.post img {
    max-width: 100%;
    height: auto;
}
img.aligncenter {
    display: block;
    margin: 5px auto;
}
img.alignright, img.alignleft {
    margin: 10px 10px 15px 15px;
    display: inline;
}
img.alignleft {
    margin: 10px 15px 15px 10px;
}
.alignright {
    float: right;
}
.alignleft {
    float: left;
}
#gallery-1 img {
    border: 1px solid #eaeaea !important;
    padding: 5px;
    background: #fff;
}
#gallery-1 img:hover {
    background: #fffaef;
}
#saitama {
    width: 100%;
    height: 45px;
    background-image: url(../images/saitama.png);
    background-position: left center;
    background-repeat: no-repeat;
    border: thin solid #05befe;
    background-color: #FFFFFF;
}
#saitama p {
    padding-left: 90px;
    color: #0059AC;
    font-weight: bold;
    font-size: 250%;
    line-height: 50px;
}
/* サイドバー　ウィジェット
*****************************************************/
section.widget ul, .widget_search, #calendar_wrap, .textwidget {
    margin: 0 0 20px 0;
    padding: 0;
    border: 1px solid #d5d5d5;
    background: #fff;
}
section.widget ul ul {
    border: 0;
    margin: 0;
    padding: 0 0 0 10px;
}
p.banner {
    padding-bottom: 15px;
}
p.banner img {
    max-width: 233px;
    height: auto;
}
p.banner img:hover {
    cursor: pointer;
    opacity: .8;
}
section.widget h3 {
    clear: both;
    margin: 0;
    padding: 7px 10px 7px 10px;
    font-size: 110%;
    border: 1px solid #d5d5d5;
    border-bottom: 0;
    color: #fff;
    background-color: #4499ec;
}
section.widget li a {
    display: block;
    padding: 7px 0 7px 12px;
    background: url(../images/arrow.gif) no-repeat 0 12px;
    border-bottom: 1px dashed #dcdcdc;
}
section.widget li:last-child a {
    border: 0;
}
#searchform input[type="text"] {
    line-height: 1.7;
    height: 24px;
    width: 90px;
    vertical-align: bottom;
}
ul.multi50 {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -o-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
ul.qr {
    width: 240px;
    border: 1px solid #0059ac;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:30px;
}
ul.qr li{
line-height:19px;

}
ul.qr li #qrcode{
 padding:10px;

}
.box1{
    padding: 20px 0 30px;
    text-align: center;    
}
/* お知らせ　
-------------*/
.newsTitle {
    clear: both;
    margin: 0;
    padding: 7px 10px 7px 10px;
    font-size: 110%;
    border: 1px solid #d5d5d5;
    border-bottom: 0;
    color: #000;
    background: #fff url(../images/headingBg.png) repeat-x 0 100%;
}
.newsTitle h3 {
    float: left;
    font-weight: normal;
}
.newsTitle p {
    float: right;
    padding: 0 0 0 10px;
    font-size: 80%;
    background: url(../images/arrow.gif) no-repeat 0 5px;
}
.news p {
    clear: both;
    padding-bottom: 2px;
    border-bottom: 1px dashed #dcdcdc;
}
.news p:last-child {
    border: 0;
}
.news p a {
    display: block;
    padding: 5px 0;
    color: #333;
    font-style: italic;
    font: italic 110% "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.news a span {
    color: #515151;
    font: normal 90% Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
}
.news span {
    padding-left: 10px;
}
.news a:hover span {
    color: #6f6f6f;
}
/* フッター
*****************************************************/
p.footbanner {
    padding-bottom: 15px;
    text-align: center;
	clear: both;
}
p.footbanner img {
    width: 940px;
    height: auto;
}
p.footbanner img:hover {
    cursor: pointer;
    opacity: .8;
}
#footer ul {
    padding: 15px 0 25px;
    text-align: center;
}
#footer li {
    display: inline-block;
    padding: 5px 16px;
    border-left: 1px dotted #d5d5d5;
}
*:first-child+html #footer li {
    display: inline;
}
#footer li:first-child {
    border: 0;
}
#footer li a {
    text-decoration: none;
    color: #000;
}
#footer li a:hover {
    color: #999;
}
#footer ul ul {
    display: none;
}
#copyright {
    clear: both;
    padding: 10px 0 37px;
    text-align: center;
    color: #000;
    font-size: 10px;
}
#copyright a {
    color: #000;
}
#copyright a:hover {
    color: #000;
    cursor: default;
}
#pagetop {
    position: fixed;
    bottom: 30px;
    right: 15px;
    font-size: 75%;
    z-index: 1000;
}
#pagetop a {
    background: #666;
    text-decoration: none;
    color: #fff;
    padding: 20px;
    text-align: center;
    display: block;
    border-radius: 50%;
}
#pagetop a:hover {
    text-decoration: none;
    background: #999;
}
/* page navigation
------------------------------------------------------------*/
.pagenav {
    clear: both;
    width: 100%;
    height: 30px;
    margin: 5px 0 20px;
}
.prev {
    float: left
}
.next {
    float: right;
}
#pageLinks {
    clear: both;
    color: #4f4d4d;
    text-align: center;
}
/* トップページ
------------------------------------------------------------*/
p.hoshou {
    width: 100%;
    height: 30px;
    border-top: 1px solid #0e5eb8;
    border-left: 1px solid #0e5eb8;
    border-right: 1px solid #0e5eb8;
    text-align: center;
    line-height: 30px;
    color: #0e5eb8;
    margin-bottom: 0px;
}
.naiyou {
    width: 100%;
    height: 180px;
    background-image: url(../images/topimg_12.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    border: 1px solid #0e5eb8;
    margin-bottom: 30px;
}
.naiyou p {
    padding: 10px;
    font-size: 130%;
}
.toptable {
    text-align: center;
    width: 100%;
    display: table;
    margin-bottom: 30px;
}
.toptd {
    display: table-cell;
    width: 50%;
}
.toptable table {
    width: 270px;
    margin: auto;
    border: 1px solid #ccc;
}
.toptable table caption {
    text-align: center;
    font-size: 100%;
    font-weight: bold;
    padding: 6px 3px;
    background-color: #168ed2;
    color: #ffffff;
}
.toptable table td {
    padding: 10px 10px 10px;
    text-align: left;
}
.toptable table td.img6 {
    text-align: center;
    padding-bottom: 0;
}
ul.post {
    padding: 0;
}
ul.post li {
    margin: 0 10px;
    padding: 20px 0 15px;
    border-bottom: 1px dashed #dcdcdc;
}
ul.post li:last-child {
    border: 0;
}
ul.post img {
    float: left;
    margin: 0 15px 5px 10px;
}
ul.post h3 {
    margin: 0 0 10px 10px;
    font-size: 14px;
    font-weight: normal;
    color: #333;
    border: 0;
}
/* 共通
------------------------------------------------------------*/
.flex-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    width: 100%;
    height: auto;
    max-height: 250px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    background-image: url(../images/tiiki_14.png);
    background-position: center bottom;
    background-repeat: no-repeat;
}
.flex-item {
    width: auto;
    height: 230px;
    padding: 20px 0 0 10px;
}
.flex-item:first-child {
    width: 340px;
}
.sideList {
    padding: 10px 10px 0 10px;
    background-color: #fcf9e3;
    background-size: auto auto;
    margin-bottom: 30px;
}
/* サービス内容
------------------------------------------------------------*/

.servicebox{
    border: 1px solid #c8f0ff;
    margin-bottom: 20px;
    background-color: #C8F0FF;
    border-radius: 10px;
    padding: 20px 0 0 10px;    
}
h3.s1{
	padding: 10px 0 10px 20px;
	font-size: 150%;
	font-weight: bold;
	color: #ffffff;
	border-bottom: 1px solid #515151;
	margin: 0;
	background-color: #138dd2;
}
p.s2{
	margin: 10px 0 0 10px;
	font-size: 100%;
	color: #000;
}
.flex-container2 {
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:flex;
  display:-webkit-box;
	display:-moz-box;
	width: 100%;
	height:auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}

.flex-item2:first-child {
    width: 400px;	
}
.flex-item2 img {
	padding: 0 0 10px 10px;
}

/* サービス料金
------------------------------------------------------------*/

.toptable3 p{
	padding: 5px 0 5px 2px;
	font-size: 100%;
	margin-bottom: 10px;
}
.toptable3{
	width: 100%;
	display: table;
	margin-bottom: 20px;
    border: 1px solid #2a88c7;    
}
.toptd3{
	display: table-cell;
	width: auto;
	vertical-align: top;
}
.toptd3:first-child{
	display: table-cell;
	width: 120px;
	vertical-align: top;
    padding:10px 0 10px 10px;
}
.toptd3:first-child img {
width:100%;
max-width: 90px;
height: auto;
}
.toptable3 table{
	width: 100%;
	margin: auto;
}
.toptable3 table td{
	width: 50%;
	padding: 10px 5px 10px;
	text-align:left;
	vertical-align: middle;	
}
.toptable3 img{
	text-align: center;
}
p.bluebox{
	background-color: #2a88c7;
	color: #FFFFFF;
	padding: 5px 0;
	font-size: 150%;
	text-align: center;
	margin-bottom: 20px;
}

/* サービス料金
------------------------------------------------------------*/
h3.p1{
	padding: 10px 0 10px 20px;
	font-size: 150%;
	font-weight: bold;
	color: #ffffff;
	border-bottom: 1px solid #2552b9;
	background-color: #138dd2;
	margin-bottom: 10px;
}
p.p2{
	padding: 5px 0 5px 20px;
	font-size: 100%;
	color: #fff;
	background-color: #21B9EE;
	margin-bottom: 10px;
}
.toptable2{
	width: 100%;
	display: table;
	margin-bottom: 20px;
}
.toptd2{
	display: table-cell;
	width: 340px;
	vertical-align: top;
}
table.pricetable{
	width: 100%;
	margin: 0 auto 30px;
	font-size: 100%;
    table-layout: fixed;
}
table.pricetable th{
	padding: 10px 10px 10px;
	text-align: left;
	font-weight: bold;
	background-color: #E7F2FB;
	border-bottom: 1px solid #ccc;
	vertical-align: middle;
}
table.pricetable td{
	padding: 10px 10px 10px;
	text-align:left;
	border-bottom: 1px solid #ccc;
	vertical-align: middle;	
}
.toptable2 img{
	text-align: center;
}
p.orangebox{
	background-color: #F1501F;
	color: #FFFFFF;
	padding: 20px 35px;
	font-size: 140%;	
}
/* よくある質問
------------------------------------------------------------*/
dl.qanda {
	width: 100%;
    margin-bottom: 25px;
    	background-color: #c8f0ff;
 
}
dl.qanda dt {
	background-repeat: no-repeat;
	background-image: url(../images/q1.png);
   	padding: 15px 10px 10px 45px;

	background-position: 10px 11px;
	border-bottom: 1px solid #D1CFCF;
	margin-bottom: 5px;
}
dl.qanda dd {
    background: url(../images/an.png) ;
	background-position: 10px 5px;  
   	background-repeat: no-repeat;
    padding: 10px 10px 15px 45px;
}

/* 漏水
------------------------------------------------------------*/
.multicolumnbox{
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -o-flex;
    display: flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	-webkit-justify-content:space-between;
	justify-content:space-between;
	margin-bottom: 30px;	
}
/* お問合せ
------------------------------------------------------------*/

.feedbackform{
padding: 40px 5px;
}

div.fieldwrapper{ /*field row DIV (includes two columns- Styled label column and 'thefield' column)*/
width: 99%; /*width of form rows*/
overflow: hidden;
padding: 5px 0;
}

div.fieldwrapper label.styled{ /* label elements that should be styled (left column within fieldwrapper DIV) */
float: left;
width: 150px; /*width of label (left column)*/
text-transform: uppercase;
border-bottom: 1px solid red;
margin-right: 15px; /*spacing with right column*/
}

div.fieldwrapper div.thefield{ /* DIV that wraps around the actual form fields (right column within fieldwrapper DIV) */
float: left;
margin-bottom: 10px; /* space following the field */
}

div.fieldwrapper div.thefield input[type="text"]{ /* style for INPUT type="text" fields. Has no effect in IE7 or below! */
width: 350px;
}

div.fieldwrapper div.thefield textarea{ /* style for TEXTAREA fields. */
width: 400px;
height: 150px;
}

div.buttonsdiv{ /*div that wraps around the submit/reset buttons*/
margin-top: 5px; /*space above buttonsdiv*/
}



/* 会社概要
------------------------------------------------------------*/
.comtable table {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.8;
	border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
	width: 100%;	
}
.comtable table th {
	width: 25%;
	padding: 15px 10px;
	font-weight: bold;
	vertical-align: top;
	color: #153d73;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;

}
.comtable table td {
	padding: 15px 10px;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

/* 個人情報保護方針
------------------------------------------------------------*/
dl.policy {
	width: 100%;
    margin-bottom: 25px;
}
dl.policy dt {
	padding: 10px 10px;
	background-color: #ECEDEF;
	border-bottom: 1px solid #D1CFCF;
	margin-bottom: 0;
}
dl.policy dd {
    padding: 15px 5px 15px 10px;
	margin-bottom: 15px;	
}
dl ul.policy2 {
	padding: 15px 5px 0 30px;
	margin-bottom: 0;
}
dl ul.policy2  li{
	padding: 0;
	margin-bottom: 10px;
	list-style-type: disc;
}
/* 地域
------------------------------------------------------------*/
ul.arealist{
    margin-bottom: 15px;
}
ul.arealist li{
    line-height: 22px;
    list-style-type: disc;
    margin-left:30px;
}

/* サイトマップ
------------------------------------------------------------*/
ul.sitelist {
}
ul.sitelist li {
    padding-top: 15px;
    padding-left: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #ccc;
}

ul.sitelist li li.last{
    border-bottom: none;
}
/* メインメニュー　PC用
------------------------------------------------------------*/

.navmenu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font: 10px 'Lato', sans-serif; /* use google custom font "Lato" */
}
.navmenu li {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 100px;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 10px;
}
.navmenu li a { 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 70px; /* height of links */
    padding: 0 10px;
    position: relative;
    overflow: hidden;
    color: black;
    outline: none;
    border: 1px solid rgba(0,0,0,.1);
    border-bottom: 8px solid rgba(0,0,0,.1);
    opacity: 1;
    text-transform: uppercase;
    font-size: 1.8em;
    /* 18 * 0.0555 = 1px */
    letter-spacing: 0.0555em;
    background-color: #ff7473; /* default background color */
    text-decoration: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; /* center text horizontally */
    text-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; /* center text vertically */
    -webkit-transition: all .3s;
    transition: all .3s;
}
/* Create shimmering effect */
.navmenu li a:after {
    content: '';
    position: absolute;
    width: 35%;
    height: 100%;
    background-color: white;
    opacity: .5;
    top: 0;
    left: -50%;
    -webkit-transform: skew(-20deg);
    transform: skew(-20deg);
    -webkit-transition: all .2s;
    transition: all .2s;
}
.navmenu li:nth-of-type(2) a {
    background-color: #82cf37;
}
.navmenu li:nth-of-type(3) a {
    background-color: #47b8e0;
}
.navmenu li:nth-of-type(4) a {
        color: white;
    background-color: #614675;
}
.navmenu li:nth-of-type(5) a {
    background-color: #fdc23e;
}
.navmenu li a:hover {
    opacity: .7;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.navmenu li a:hover:after {
    left: 150%;
    -webkit-transition: all .4s;
    transition: all .4s;
}
.navmenu li a:active {
    box-shadow: 0 -30px 10px rgba(255,255,255,.2) inset;
    border-bottom-width: 0;
    box-shadow: none;
    border-top: 8px solid rgba(0,0,0,.1);
    -webkit-transition: none;
    transition: none;
}
/*.navmenu li a.active {
    box-shadow: 0 -30px 10px rgba(255,255,255,.2) inset;
    border-bottom-width: 0;
    box-shadow: none;
    border-top: 8px solid rgba(0,0,0,.1);
    -webkit-transition: none;
    transition: none;
}*/


/* ブログ
------------------------------------------------------------*/
ul.multifour {
    width:100%;
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -moz-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
/* -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;*/
    margin-bottom: 50px;
    flex-wrap: wrap;
        justify-content:flex-start;
}
ul.multifour li{
margin-bottom:20px;
}
.item {
    float: left;
    width: 230px;
    height: 370px;
    overflow: hidden;
    border: 1px solid #d4d4d4;
    box-shadow: 2px 2px 1px 1px #ddd;
    padding: 10px 10px 5px;
    font-size: 12px;
    text-align: right;
    margin: 0 5px;
    
}
ul.multifour2 {
width:100%;
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -moz-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
margin-bottom: 50px;

}
ul.multifour2 li:last-child{
	    width: 70%;
	}
.item2 {
    padding: 10px;
    font-size: 14px;
    text-align: left;
}

.item2 h3 {
    width: 100%;
	font-size:16px;
	line-height: 30px;
	height: 30px;
	overflow: hidden; /* 長いタイトルは切り捨て。必要なら高さを増やしておく。 */
	margin: 0;
	padding: 0;
}
.item2 img {
    width:100%;
    max-width:450px;
		height: auto; 
		border: 0;
	}


/* 製品タイトル */
.item h3 {
    width: 210px;
    font-size: 13px;
    line-height: 30px;
    height: 30px;
    overflow: hidden; /* 長いタイトルは切り捨て。必要なら高さを増やしておく。 */
    margin: 0;
    padding: 0;
    background-color: #2fa9be;
}
/* タイトルからのリンク */
.item h3 a,
.item h3 a:link,.item2 h3 a,
.item2 h3 a:link{
    padding-left:10px;
	color: #fff;
	text-decoration: none;
}
.item h3 a:hover,
.item h3 a:active,.item2 h3 a:hover,
.item2 h3 a:active{
	text-decoration: underline;
}
.item h3 a:visited,.item2 h3 a:visited{
	color: #F1EFEF;
}

/* 写真 */
.mainimage {
	position: relative;
    width: 210px;
	height: 138px; 
	overflow: hidden;
	margin: 0 0px 10px 0px;
}
.mainimage img {
		position: absolute;
		left: 0;
		top: 0;
		height: 158px; 
		border: 0;
	}


/* 説明 */
.item .description {
    font-size: 14px;
    line-height: 18px;
    /*height: 100px;*/
/*	overflow: hidden;*/
    margin: 0 0 5px;
    text-align: left;	
}

/* 詳細ページへのリンク */
/* ボタン部分 */
.item .link {
	font-size:12px;
	margin: 1px 8px 5px 0;
	display: inline-block;
  	padding: 6px 14px;
  	background-color: #20b2aa;
  	color: #fff;
}

.item .link a,
.item .link a:link{
	color: #fff;
	text-decoration: none;
}
.item .link:hover,
.item .link:active{
	text-decoration: underline;
  	background-color: #3573d2;
}
.item .link:visited
{
  	background-color: #0f7291;
}

.katelink ul.product {
	margin: 0 0 0 0px;
	list-style-type: none;
	list-style-image: none;
	clear: both;
	line-height: 1.1em;	padding: 0 -20px 0 0;
}
.katelink ul.product li {
	margin: 10px 20px 0px 0px;
	float: left;
	width: 100px;
	padding: 0px;
	list-style-type: none;
	list-style-image: none;
	font-size: 12px;
	min-height: 135px;
}
.katelink ul.product li img{
    margin-bottom:7px;
    display:block;
	object-fit: cover; 
	width:100px;
	height:67px;
}
/* ポップアップ */
.popupModal1 {
margin: 0 0 50px;
}
.popupModal1 > input { /* ラジオボックス非表示 */
    display: none;
}
.popupModal1 > input:nth-child(1) + label { 
    cursor: pointer;
	font-size:110%;
	color:#F80105;
}
.modalPopup2 { /* 初期設定 ポップアップ非表示 */
    display: none;
}

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 {/* ラジオ１ チェックでポップアップ表示 */
    display: block;
    z-index: 998;
    position: fixed;
    width: 90%;
    height: 80%;
    border-radius: 20px;
    left: 50%;
    top: 50%;
    margin-top: 30px;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background: #fff;
    padding: 10px 20px;
    overflow: hidden;
}
@media (min-width: 768px) {/* PCのときはページの真ん中の600x600領域 */
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2{
         width: 600px;
         height: 600px;
         padding: 30px;

    }
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
     left: 50% !important;
     top: 50% !important;
     margin-left: 270px !important;
     margin-top: -310px !important;
}
}

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div {/* */
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    display: inline-block;
    width: 100%;
    height: 100%;
}
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div > iframe {
    width: 100%;
    height:100%;
    border:none;
    display:block;
}

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div > img {/* ポップアップの中の要素 */
max-width: 100%;
}
.popupModal1 > input:nth-child(1) + label ~ label {
    display: none;/* ラジオ１ 以外のラベルを初期は非表示 */

}
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.70);
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 997;
    text-indent: -999999px;
    overflow: hidden;
}
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    position: fixed;
    left: 10px;
    bottom: 20px;
    z-index: 999;
    width: 44pt;
    height: 44pt;
    font-size: 40px;
    border-radius: 50%;
    line-height: 44pt;
    text-align: center;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
}

.popupModal1 > input:nth-child(1) + label + input:nth-child(3):checked + label + input:nth-child(5) + label + .modalPopup2,
.popupModal1 > input:nth-child(1) + label + input:nth-child(3) + label + input:nth-child(5):checked + label + .modalPopup2 { /* ラジオ２と３ どっちかチェックでポップアップ非表示 */
    display: none;
}


.modalPopup2 {
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.popupModal1 .modalTitle {
     padding-bottom: .5em;
     margin: .5em 0;
     border-bottom:
     1px solid #ccc;
     font-weight: bold;
}
.popupModal1 .modalMain {
     color:#222;
     text-align: left;
     font-size: 14px;
     line-height: 1.8em;
}

@media screen and (max-width:760px) {
.navmenu li a {
    font-size: 1.5em;
}
}

.btn-square-pop {
  position: relative;
  display: inline-block;
  padding: 0.65em 2.5em;
  text-decoration: none;
  color: #FFF;
  background: #fd9535;/*背景色*/
  border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
	letter-spacing: 1px;
	
}
.btn-square-pop:hover {
color: #f0f0dc;
}
.btn-square-pop:active {
  border-bottom: solid 2px #fd9535;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

/* サイドメニュー 　PC用
------------------------------------------------------------*/
.nestedsidemenu {
    font: bold 16px 'Bitter', sans-serif;
    position: relative;
    width: 100%;
}
/* Top Level Menu */
.nestedsidemenu ul {
    z-index: 100;
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none;
}
/* Top level list items */
.nestedsidemenu ul li {
    position: relative;
}
/* Top level menu items link style */
.nestedsidemenu ul li a, .nestedsidemenu ul li span {
    display: block;
    position: relative;
    /* background of menu items (default state) */
    background: #008c9e;
    color: white;
    padding: 14px 10px;
    color: #2d2b2b;
    text-decoration: none;
}
.nestedsidemenu ul li a:link, .nestedsidemenu ul li a:visited {
    color: white;
}
/* Top level menu items link style on hover and when active */
.nestedsidemenu ul li:hover > a {
    background: #005f6b;
}
/* Sub ULs style */
.nestedsidemenu ul li ul {
    position: absolute;
    left: -5000px;
    top: 0;
    opacity: 0;
    width: 230px;
    visibility: hidden;
    box-shadow: 2px 2px 5px gray;
    -webkit-transition: opacity .3s, visibility 0s .3s, left 0s .3s;
    transition: opacity .3s, visibility 0s .3s, left 0s .3s;
}
/* First Sub Levels UL style on hover */
.nestedsidemenu ul li:hover > ul {
    visibility: visible;
    left: 100%;
    opacity: 1;
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
}
/* Sub level Menu list items (alters style from Top level List Items) */
.nestedsidemenu ul li ul li {
    display: list-item;
    float: none;
}
/* 2nd and beyond Sub Levels vertical offset after 1st level sub menu */
.nestedsidemenu ul li ul li ul {
    top: 0;
    left: 100%;
}
/* Sub Levels link style on hover and when active */
.nestedsidemenu ul ul li:hover > a {
    background: #52616a;
}
/* Sub Levels UL style on hover */
.nestedsidemenu ul ul li:hover > ul {
    left: 100%;
}
/* Sub level menu links style */
.nestedsidemenu ul li ul li a {
    font: normal 14px 'Bitter', sans-serif;
    padding: 10px;
    margin: 0;
    background: #4ea1d3;
    border-right: none;
    border-top-width: 0;
}
/* LIs with a sub UL style */
.nestedsidemenu ul li > a {
    /* add padding to accomodate arrow inside LIs */
    padding-right: 25px;
}
/* LIs with NO sub UL style */
.nestedsidemenu ul li > a:only-child {
    /* undo padding for non submenu LIs */
    padding-right: 10px;
}
/* LIs with a sub UL pseudo class */
.nestedsidemenu ul li > a:after {
    /* add arrow inside LIs */
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-left-color: #FFFFFF;
    top: 40%;
    right: 8px;
}
/* LIs with NO sub UL pseudo class */
.nestedsidemenu ul li > a:only-child:after {
    /* undo arrow for non submenu LIs */
    display: none;
}

/* ####### responsive layout CSS ####### */

@media (max-width: 923px) {
/* FIRST breaking point
			Last top menu items' sub ULs should drop to the left (instead of right)
			Change 1 to a different number to exclude/include more top menu items based on menu and max-width setting above
		*/

.nestedsidemenu ul li:nth-last-of-type(-n+1) ul li:hover > ul {
    left: -100%;
}
}

@media (max-width: 500px) {
/* SECOND breaking point 
			For mobile and screen browser windows
			Get Sub ULs to expand entire width of document and drop down
			Changes menu reveal type from "visibility" to "display" to overcome bug. See comments below
		*/
.nestedsidemenu {
    width: 100%;
}
.nestedsidemenu ul li > a:after {
    /* add arrow inside LIs */
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-left-color: transparent;
    border-top-color: #fff;
    top: 40%;
    right: 8px;
}
.nestedsidemenu ul li {
    position: static;
}
.nestedsidemenu ul li ul {
    width: 100%;
    border-top: 2px solid rgba(0,0,0,.6);
    /* change menu reveal type from "visibility" to "display". Former seems to cause browser to jump to top of page sometimes when menu header is tapped on */
    display: none;
}
.nestedsidemenu ul li:hover > ul {
    display: block;
    left: 0 !important;
    top: auto;
    box-shadow: 0 0 12px gray;
}
}