/*
# Copyright (C) 2021 IBRAIN. All Rights Reserved. 
# 無断転載を禁じます。
*/


/* ----------------------------------------------------------------------------- *
 * 1.0　初期設定
 * ----------------------------------------------------------------------------- */

*, *: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;
}

html {
	/* 文字の大中小がある場合、bodyに設定したサイズが上書きされるため「html」に設定。 */
	font-size: 120%;
	color:#000000;		/* ベースカラー */
}

body {
	margin: 0;
	padding: 0;
	/* フォント関係の処理の追加（※header で googleフォントの Kosugi 読み込んでいる） */
	font-family: 'Kosugi', sans-serif;
	/* ここまで */
}

header, main, aside, footer{
    display: block;
	margin: 0;
    padding: 0;
}

a {
	-webkit-transition: all 0.5s ease-out;  /* Saf3.2+, Chrome */
	-moz-transition: all 0.5s ease-out;  /* FF4+ */
	-ms-transition: all 0.5s ease-out;  /* IE10? */
	-o-transition: all 0.5s ease-out;  /* Opera 10.5+ */
	transition: all 0.5s ease-out;
}

a:link {
	color:#00304C;
	text-decoration: underline;
}
a:visited {
	color:#00304C;
	text-decoration: underline;
}
a:hover, a:active, a:focus {
	color:#9a1117;
	text-decoration: none;
}
.themesDinner a:link {
	color:#FFFFFF;
	text-decoration: underline;
}
.themesDinner a:visited {
	color:#FFFFFF;
	text-decoration: underline;
}
.themesDinner a:hover, .themesDinner a:active, .themesDinner a:focus {
	color:#f05158;
	text-decoration: none;
}

a img{
	-webkit-transition: all 0.5s ease-out;  /* Saf3.2+, Chrome */
	-moz-transition: all 0.5s ease-out;  /* FF4+ */
	-ms-transition: all 0.5s ease-out;  /* IE10? */
	-o-transition: all 0.5s ease-out;  /* Opera 10.5+ */
	transition: all 0.5s ease-out;
}

h1{
	text-align: center;
	letter-spacing: 0.2em;
	font-size:190%;
	margin: 80px 0;
}
h1.productPos{
	margin: 80px 0 7px;
}
h1 span{
	display: block;
	text-align: center;
	letter-spacing: 0;
	font-size: 65%;
	color: #ff3cbb;
}
h1 span.productSize{
	font-size: 80%;
	color: #000000;
	padding-bottom: 0.3em;
}

h2{		/* イメージ用（テキストでH2を作る場合は再設定が必要） */
	margin:0 0 1.5em 0;
	text-align:center;
	line-height: 1.0em;
	font-size:180%;
}
h2.h2Text{		/* イメージ用（テキストでH2を作る場合は再設定が必要） */
	font-size:140%;
	position:relative;
	display:table;
	margin:0 0 1em;
	text-align:left;
}
h2.h2Text:before{
	content:"　";
	position:absolute;
	width:104%;
	border-bottom:7px solid #ff3cbb;
	left:-2%;
	bottom:-2px;
	z-index:-1;
}

h3{		/* イメージ用（テキストでH2を作る場合は再設定が必要） */
	font-size:140%;
	position:relative;
	display:table;
	margin:0 0 1em;
	text-align:left;
	line-height: 1.0em;
}
h3:before{
	content:"　";
	position:absolute;
	width:104%;
	border-bottom:7px solid #ff3cbb;
	left:-2%;
	bottom:-2px;
	z-index:-1;
}

ul{
	font-size:100%;
}
ul li{
	font-size:100%;
}
ul li ul{
	font-size:100%;
}
ul li ul li{
	font-size:100%;
}
ul li ul li ul{
	font-size:100%;
}
ul li ul li ul li{
	font-size:100%;
}

/* ↓安易に設定するとレイアウト（アクセシビリティボタンなど）に影響（メイン内のみに効かせる）　 */
main ul,main ol{
	margin-bottom:20px;
}
main ul li,main ol li{
	line-height: 1.5em;
	margin-bottom: 10px;
}
main ol{
	margin-left:0;
}
main ol li{
	margin-left:0.5em;
	padding-left:0;
}
main img{
	max-width:100%;
	height:auto;
}
main p{
	margin:0 0 1em 0;
	line-height: 2.0em
}


/* ----------------------------------------------------------------------------- *
 * 2.0　共通利用パーツ
 * ----------------------------------------------------------------------------- */

/* ■ページ内リンク */
#pageTop{
	display: block;
	position: fixed;
	width:2.6em;
	bottom: 4.0em;
	right: 1.0em;
	z-index: 999999;
	text-align: center;
	font-size:150%;
}
#pageTop a {
	margin:  0 auto;
	display: block;
	width: 2.6em;
	height: 2.6em;
	background-color: #ff3cbb;
	border:2px solid #ff3cbb;
	border-radius: 3.0em;
	text-align: center;
	color: #FFFFFF;
	text-decoration: none;
	line-height: 2.5em;
}
#pageTop a:link, #pageTop a:visited {
	background-color: #ff3cbb;
	border:2px solid #ff3cbb;
	color: #FFFFFF;
}
#pageTop a:hover {
	background-color: #FFFFFF;
	border:2px solid #ff3cbb;
	color: #ff3cbb;
}


/* ----------------------------------------------------------------------------- *
 * 3.0　基本レイアウト
 * ----------------------------------------------------------------------------- */

/* 各種背景 */
.themes{
	width:100%;
	min-height: 100vh;
	background: #FFFFFF;
}
.themesDinner{
	background: linear-gradient(#224260,#0a2846);
	color:#FFFFFF;
}

/* 画像が最大を超えて画面いっぱいに表示する際 */
.imageMax{
	max-width:none;
	width:100%;
	height:auto;
}

/* ファイルアイコンの自動表示 */
a:not(.noIcon)[href$=".pdf"]:after,
span.markPdf:after{
    content:" ";
    display: inline-block;
    width: 37px;
    height: 15px;
    background: url(libs/file_icon/iconPdf.gif) no-repeat center right;
	vertical-align: sub;
}
a:not(.noIcon)[href$=".doc"]:after {
    content:" ";
    display: inline-block;
    width: 37px;
    height: 15px;
    background: url(libs/file_icon/iconDoc.gif) no-repeat center right;
	vertical-align: sub;
}
a:not(.noIcon)[href$=".docx"]:after {
    content:" ";
    display: inline-block;
    width: 37px;
    height: 15px;
    background: url(libs/file_icon/iconDocx.gif) no-repeat center right;
	vertical-align: sub;
}
a:not(.noIcon)[href$=".xls"]:after {
    content:" ";
    display: inline-block;
    width: 37px;
    height: 15px;
    background: url(libs/file_icon/iconXls.gif) no-repeat center right;
	vertical-align: sub;
}
a:not(.noIcon)[href$=".xlsx"]:after {
    content:" ";
    display: inline-block;
    width: 37px;
    height: 15px;
    background: url(libs/file_icon/iconXlsx.gif) no-repeat center right;
	vertical-align: sub;
}
a:not(.noIcon)[href$=".csv"]:after {
    content:" ";
    display: inline-block;
    width: 37px;
    height: 15px;
    background: url(libs/file_icon/iconCsv.gif) no-repeat center right;
	vertical-align: sub;
}
a:not(.noIcon)[href$=".zip"]:after {
    content:" ";
    display: inline-block;
    width: 37px;
    height: 15px;
    background: url(libs/file_icon/iconZip.gif) no-repeat center right;
	vertical-align: sub;
}

/* ----------------------------------------------------------------------------- *
 * 4.0　ヘッダー
 * ----------------------------------------------------------------------------- */

header {
	width: 100%;
	margin: 0 auto;
}
.headerNest{
	max-width:1600px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: stretch;
	margin:0 auto;	
}
.headerNest > div:first-child{
	font-size: 92%;
	padding: 1.3em 1.2em 0 0;
	background: #ff3cbb;
	flex: initial;
	width:250px;
	text-align:right;
}
.headerNest > div:last-child{
	flex: initial;
	width:250px;
	padding: 0.6em 0 0 0;
}
.headerNest > div{
	flex: auto;
}
@media screen and (max-width:1100px) {
	.headerNest > div:last-child{
		width:100px;
		text-align:right;
	}
}
@media screen and (max-width:850px) {
	.headerNest > div:last-child{
		display: none;
	}
}

.headerMenu{
	width: 100%;
	max-width: 850px;
	
	font-size: 92%;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: stretch;
	margin:0 auto;
	padding: 1.4em 0 0.9em 0;
}
.headerMenu a:link {
	color:#000000;
	text-decoration: none;
}
.headerMenu a:visited {
	color:#000000;
	text-decoration: none;
}
.headerMenu a:hover, .headerMenu a:active, .headerMenu a:focus {
	color:#9a1117;
	text-decoration: none;
}
.themesDinner .headerMenu a:link {
	color:#FFFFFF;
	text-decoration: none;
}
.themesDinner .headerMenu a:visited {
	color:#FFFFFF;
	text-decoration: none;
}
.themesDinner .headerMenu a:hover, .themesDinner .headerMenu a:active, .themesDinner .headerMenu a:focus {
	color:#f05158;
	text-decoration: none;
}

/* -----------------------------------
■スライダー（トップ）
----------------------------------- */

/* ◆スライダー◆ */
.slider {
	width: 100%;
}
#slider{
	height:691px;
}
.slider ul {
	list-style: none outside none;
	margin: 0;
	padding: 0;
}
.slider li {
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;

	width: 100%;
	height:auto;

}
.slider li > div {
	position:absolute;
	transform: translate(0,-50%);
	width:100%;
	left:0;
	top:50%;
	
	color: #FFFFFF;
	text-align: center;
	font-size: 175%;
	line-height: 1.8em;
}
.slider li > div > div {
	margin-bottom: 0.2em;
}
.slider li > div .wordBig {
	margin-bottom: 1em;
}
.slider li > div .worSmall {
	font-size: 90%;
	margin-bottom: 0;
}


.lSSlideOuter {
	position: relative;
}

.lSSlideOuter .lSPager.lSpg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	z-index: 990;
}

.lSSlideOuter .lSPager.lSpg > li a {
    background-color: rgba(0,0,0,0.3) !important;
	border: 2px solid #FFF;
    border-radius: 30px !important;
    height: 16px !important;
    width: 16px !important;
}
.lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a {
    background-color: #FFF !important;
}

/* -----------------------------------
■メイン画像
----------------------------------- */
.mainImage{
	position: relative;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	height:293px;
	background: url("inmain.jpg") no-repeat center center;
	background-size: cover;
}
.conmain{
	position: relative;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	height:293px;
	background: url("conmain.jpg") no-repeat center center;
	background-size: cover;
}
.promain{
	position: relative;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	height:293px;
	background: url("promain.jpg") no-repeat center center;
	background-size: cover;
}
.casmain{
	position: relative;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	height:293px;
	background: url("casmain.jpg") no-repeat center center;
	background-size: cover;
}
.usmain{
	position: relative;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	height:293px;
	background: url("usmain.jpg") no-repeat left center;
	background-size: cover;
}
.mainImage > img, .conmain > img, .promain > img, .casmain > img, .usmain > img{
	width: 100%;
	height: auto;
}
.mainImage > div, .conmain > div, .promain > div, .casmain > div, .usmain > div{
	position:absolute;
	transform: translate(0,-50%);
	width:100%;
	left:0;
	top:50%;
	
	color: #FFFFFF;
	font-size: 130%;
}


/* ----------------------------------------------------------------------------- *
 * 5.0　フッター
 * ----------------------------------------------------------------------------- */

footer {
	width: 100%;
	margin: 0 auto;
	padding-top:1.5em;
}
.footerArea{
	width: 100%;
	max-width: 1600px;
	margin: 1.2em auto;
}
.footerLine {
	width: 100%;
	margin: 0 auto;
	border-top: 1px solid #000000;
}
.footerCaption{
	font-size:125%;
	font-weight:bold;
	text-align: center;
	margin-bottom:0.7em;
}
.footerCenter{
	text-align: center;
	margin-bottom:1.5em;
}
.footerPolicy{
	max-width: 1400px;
	text-align: right;
	font-size: 85%;
}
.footerPolicy a{
	position: relative;
}
.footerPolicy a::before{
	font-size: 75%;
	position: absolute;
	content: "▲";
	color: #FFFFFF;
	background: #999999;
	line-height: 1em;
	left:-2.0em;
	border-radius: 1em;
	padding:0.2em 0.25em 0.3em 0.2em;
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.footerPolicy a:link, .footerPolicy a:visited{
	text-decoration: none;
}

/* フッター部使わないなら消す */
.footerSNS{
	text-align: center;
	margin-bottom: 95px;
}
.footerAreaFlex{
	width: 95%;
	max-width: 1200px;
	
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	margin: 0 auto;
	padding-bottom:30px;
}
.footerAreaFlex div{
	line-height: 2em;
}
.footerAreaFlex div:first-child{
	line-height: 0;		/* 画像以外が入ったらここを変更する必要あり */
	max-width: 40%;
}
.footerAreaFlex div img{
	max-width: 100%;
	height: auto;
}
.footerAreaFlex div:nth-child(2){
	padding: 0 0 0 55px;
}
.footerAreaFlex div:nth-child(2) img{
	margin-bottom: 10px;
}
.footerAreaFlex span.smallFont{
	font-size:90%;
}


/* ----------------------------------------------------------------------------- *
 * 6.0　メインコンテンツ（共通）
 * ----------------------------------------------------------------------------- */

main {
	line-height: 2.0em;
	width: 100%;
	margin: 0 auto;
}
.contents {
	width: 100%;
	/*max-width:1600px;*/
	margin: 0 auto;
}
.contentsNest2 {
	width: 100%;
	max-width:1600px;
	margin: 0 auto;
}
.contentsNest {
	width: 95%;
	max-width:1200px;
	margin: 0 auto;
}


/* ----------------------------------------------------------------------------- *
 * 7.0　メインコンテンツ（個別）
 * ----------------------------------------------------------------------------- */

/* -----------------------------------
■トップページ
----------------------------------- */
h2.topCap {
	font-size:180%;
	position:relative;
	margin:0 auto 1em;
	text-align:center;
	line-height: 1.5em
}

.topBack{
	background: url("back_top.png") bottom center no-repeat;
	background-size: contain;
}

.newsBack{
	width: 100%;
	position: relative;
	background: url("back_news.png") center left no-repeat;
	z-index: -2;
	text-align: center;
}

.newsBack h4{
	font-size: 150%;
	line-height: 1.0em;
	margin-bottom: 0.75em;
	padding-top: 3em;
}

.newsBack h3{
	font-size: 160%;
	margin: 0.25em 0 0.125em 0;
}

.newsNest {
	width: 95%;
	/*max-width:1200px;*/
	max-width:1350px;
	margin: 0 auto;
}

.flexNews{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	margin: 35px auto 0 auto;
	padding-bottom: 45px;
}
.flexNews > div{
	width:29%;
	padding-bottom: 35px;
}

a.topLinkBtn, a.topLinkBtnB{
	display: inline-block;
	padding:0.55em 1em 0.4em 1em;
	margin-top: 1em;
	border: 2px solid #ff3cbb;
	line-height: 1em;
}
a.topLinkBtn:link, a.topLinkBtn:visited,
a.topLinkBtnB:link, a.topLinkBtnB:visited{
	background: #ff3cbb;
	color:#FFFFFF;
}
a.topLinkBtn:hover,
a.topLinkBtnB:hover{
	background: #FFFFFF;
	color:#ff3cbb;
	text-decoration: underline;
}
a.topLinkBtnB{
	border: 2px solid #444444;
}
a.topLinkBtnB:link, a.topLinkBtnB:visited{
	background: #444444;
}
a.topLinkBtnB:hover{
	background: #FFFFFF;
	color:#444444;
}
.topGriller a.topLinkBtn{
	font-size:55.555%;
	font-weight: normal;
}

.topGriller{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
}
.topGriller > div:first-child{
	width:49.947%;
	line-height:0;
}
.topGriller div:first-child img{
	width:100%;
	height: auto;
}
.topGriller > div:last-child{
	width:47%;
	font-size: 180%;
	font-weight: bold;
	line-height: 2em;
	
	position: relative;
}
.topGriller div:last-child img{
	width:61.142%;
	height: auto;
	margin-top: 1.2em;
}
.topGriller div:last-child > div:first-child{
	width: 100%;
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-55%);
	-ms-transform: translateY(-55%);
	transform: translateY(-55%);
}

.topGriller div.linkArea {
	max-width: 61.142%;
	text-align: right;
	margin-bottom: 100px;
}


.tokchoMain{
	background: url("topTokuchoBack.jpg") no-repeat top center;
	background-size: cover;

	padding:70px 0;
}
.tokchoMain .tokchoMainTitle{
	text-align:center;
	font-size:220%;
	font-weight: bold;
	color: #FFFFFF;
	margin: 0 0 0.5em 0;
}
.tokchoMain .tokchoMainText{
	text-align:center;
	color: #FFFFFF;
	margin: 0.5em 0 0 0;
}

.flexTokucho{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	margin: 90px auto 0;
	padding-bottom: 100px;
}
.flexTokucho > div{
	width:29%;
	padding-bottom: 40px;
}
.newsNest .flexTokucho > div{
	width:26%;
	padding-bottom: 40px;
}
.flexTokucho h2, h2.TokuchoH2 {
	font-size:120%;
	position:relative;
	display:table;
	margin:0 auto 1em;
	text-align:center;
}
.flexTokucho h2:before, h2.TokuchoH2:before{
	content:"　";
	position:absolute;
	width:104%;
	border-bottom:7px solid #ff3cbb;
	left:-2%;
	bottom:-2px;
	z-index:-1;
}
.tokuchoNum{
	text-align: center;
	margin:0 auto 20px;
	border:2px solid #000000;
	font-weight:bold;
	font-size:108%;
	width:5.6em;
	height:5.6em;
	padding-top:1em;
	border-radius: 50%;
}
.tokuchoNum span{
	display:block;
	font-size:145%;
}


.topBottom{
	margin-top: -30px;
}

/* -----------------------------------
■コンセプト
----------------------------------- */

.conceptCaption{
	text-align: center;
	margin: 80px auto 120px;
	font-size:110%;
}

.conceptBack{
	background: url("back_concept.png") bottom center no-repeat;
	background-size: contain;
}

.conceptImage{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
}
.conceptImage > div:first-child{
	width:52%;
	line-height:0;
}
.conceptImage div:first-child img{
	width:100%;
	height: auto;
}
.conceptImage > div:last-child{
	width:38.312%;
	font-size: 138%;
	font-weight: bold;
	line-height: 2em;
	
	position: relative;
}
.conceptImage div:last-child > div:first-child{
	width: 100%;
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-55%);
	-ms-transform: translateY(-55%);
	transform: translateY(-55%);
}


.flexConcept2Area{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	margin: 90px auto;
}
.flexConcept2Area div{
	width:50%;
}
.flexConcept2Area div:first-child{
	padding-right: 2.5em;
	border-right: 1px solid #ff3cbb;
}
.flexConcept2Area div:last-child{
	padding-left: 2.5em;
	border-left: 1px solid #ff3cbb;
}

.flexConcept2AreaNoline{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: stretch;
	margin: -40px auto 90px;
}
.flexConcept2AreaNoline > div{
	width:40%;
}
.flexConcept2AreaNoline > div > div{
	text-align: center;
}

.flexConcept3Area{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	margin: 90px auto 0;
	/*padding-bottom: 170px;*/
}
.flexConcept3Area div{
	width:31%;
	padding-bottom: 40px;
}
.f3Narrow{
	margin: 30px auto 0;
}


/* -----------------------------------
■導入事例・販売代理店
----------------------------------- */
.salesAnno{
	margin: -50px 0 80px 0;
	text-align: center;
}
.csPos{
	padding-left: 2em;
	font-size: 85%;
}

/* -----------------------------------
■製品概要
----------------------------------- */
.productBack{
	background: url("back_product.png") bottom center no-repeat;
	background-size: contain;
}
.flexHalfArea{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	margin: 0 auto 90px;
}
.flexHalfArea > div{
	width:55%;
}
.flexHalfArea > div.shortArea{
	width:45%;
	padding-right:6%;
	font-size:90%;
}
table.conceptClearTable{
	margin-bottom:1.5em;
}
table.conceptClearTable td{
	padding:0.3em 0 0.2em 0;
}
table.conceptClearTable th{
	padding:0.3em 0.5em 0.2em 0;
	width:7em;
	font-weight: normal;
	white-space: nowrap;
}
table.conceptClearTable ul{
	margin:0;
	padding:0 0 0 1.0em;
}
table.conceptClearTable ul li{
	margin:0 0 0.5em 0;
}
.conceptClearTableSize80{
	width: 80%;
}

.flexProduct2Area{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	margin: 90px auto 50px;
	padding-bottom:220px;
	
	font-size:110%;
	line-height:2.2em;
}
.flexProduct2Area div{
	width:50%;
}
.flexProduct2Area div:first-child{
	width:55%;
	padding-right: 4em;
	padding-left:12%;
	border-right: 1px solid #ff3cbb;
}
.flexProduct2Area div:last-child{
	width:45%;
	padding-left: 2.5em;
	border-left: 1px solid #ff3cbb;
}

.flexProduct2Area2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	margin: 90px auto 0;
}
.flexProduct2Area2 > div{
	width:48%;
	padding-bottom: 40px;
	text-align: center;
}
.flexProduct2Area2 > div img{
	width: 100%;
	max-width: 500px;
	height: auto;
}
.flexProduct2Area2 > div img.productLogo {
	width: 65%;
	max-width: 325px;
	margin-bottom: -65px;
}
.productCap{
	text-align: center;
	font-size: 110%;
	margin: -60px auto 60px;
}

table.productTb{
	margin: 0 auto 50px;
	border-collapse: collapse;
	max-width:100%;
	font-size:90%;
}
table.productTb th, table.productTb td{
	border: 1px solid #000000;
	padding:0.2em 1em;
}

.productLinkArea{
	width: 95%;
	max-width: 1480px;
	text-align: right;
	margin-bottom: 35px;
}
.productLinkArea2{
	text-align: right;
	margin: 0 auto;
	margin-bottom: 35px;	
	max-width: 1200px;
}


/* -----------------------------------
■ご予約・ご質問
----------------------------------- */

.formArea dl {
	display: flex;
	flex-wrap: wrap;
	margin: 30px 0px 0px;
	padding: 0;
	border: 2px solid #333333;
	border-top: none;
}

.formArea dl > dt {
	background: #dddddd;
}

.formArea dl > dt,
.formArea dl > dd {
	width: 100%;
	margin: 0;
	padding: 1em;
	border-top: 2px solid #333333;
	text-align: center;
}

.formTextCover {
	margin-bottom: 0.5em;
}
.formArea dl > dt *:last-child,
.formArea dl > dd *:last-child{
	margin-bottom: 0;
}

.formArea input[type="text"],
.formArea input[type="email"],
.formArea input[type="tel"],
.formArea textarea {
	padding: 1em;
	width: 100%;
	font-size: 15px;
	border: 1px solid #ccc;
}

.formArea .side_by_side_3 input[type="text"] {
	width: 25%;
}

.formArea input[type="submit"],
.formArea input[type="submit"]:hover {
	display: table;
	margin: 30px auto;
	padding: 0.5em 1em;
	color: #FFFFFF;
	background-color: #ff3cbb;
	border:2px solid #333333;
}

.formMimicButton {
	width: 100%;
	text-align: center;
}

.formMimicButton a {
	text-decoration: none;
	display: inline-block;
	margin: 30px auto;
	padding: 0.5em 1em;
	color: #FFF;
	background-color: #dddddd;
}


.formArea .form_step {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px;
	list-style: none;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 49%, #666666 49%, #666666 51%, #ffffff 51%, #ffffff 100%);
	background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 49%,#666666 49%,#666666 51%,#ffffff 51%,#ffffff 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 49%,#666666 49%,#666666 51%,#ffffff 51%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
}

.formArea .form_step {
	margin: 0;
	padding: 0;
}

.formArea .form_step > li {
	display: block;
	position: relative;
	margin: 0;
	padding: 0.5em;
	width: 22%;
	border: 1px solid #666666;
	color: #666666;
	background-color: #ffffff;
	font-size: 1.5vw;
	font-weight: bold;
	text-align: center;
}
.formArea .form_step > li:nth-of-type(n + 2) {
	margin: 0px 0px 0px 4%;
}

.formArea_input .form_step > li:nth-of-type(1),
.formArea_preview .form_step > li:nth-of-type(2),
.formArea_complete .form_step > li:nth-of-type(4) {
	background-color: #666666;
	color: #ffffff;
}

@media print, (min-width: 992px) {
    .formArea .form_step > li {
        font-size: 18px;
    }

}

/* -----------------------------------
■ご予約・ご質問
----------------------------------- */

.privacyH2{
	font-size:150%;;
	margin:1.5em 0 0.8em 0;
	text-align:left;
}



/* ----------------------------------------------------------------------------- *
 * 8.0　メディアクエリー
 * ----------------------------------------------------------------------------- */

/* -----------------------------------
■レスポンシブ対応
----------------------------------- */

/* PC,SM 表示切替 */

.smOnly, .smOnly2 {
	display: none;
}

.smBlock {
	display: inline;
}

@media (min-width: 768px) {

	/* 電話へのリンクはスマホのみ有効 */

    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
    
	a[href*="tel:"]:link {
		color:#000000;
		text-decoration: none;
	}
	a[href*="tel:"]:visited {
		color:#000000;
		text-decoration: none;
	}
	.themesDinner a[href*="tel:"]:link {
		color:#FFFFFF;
		text-decoration: none;
	}
	.themesDinner a[href*="tel:"]:visited {
		color:#FFFFFF;
		text-decoration: none;
	}
}

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

	/* -----------------------------------
	1.0　初期設定
	----------------------------------- */

	html {
		font-size: 200%;
	}

	/* PC,SM 表示切替 */
	.pcOnly {
		display: none;
	}
	.smOnly {
		display: inline;
	}
	.smBlock, .smOnly2 {
		display: block;
	}

	h1{
		font-size:180%;
	}
	h2{
		font-size:160%;
	}
	
	h1 span{
		font-size: 70%;
	}
	h1 span.productSize{
		font-size: 70%;
	}

	/* -----------------------------------
	2.0　共通利用パーツ
	----------------------------------- */

	/* ■ページ内リンク */
	#pageTop{
		bottom: 5.3em;
	}

	/* -----------------------------------
	3.0　基本レイアウト
	----------------------------------- */

	a:not(.noIcon)[href$=".pdf"]:after {
	    width: 84px;
	    height: 30px;
	    background: url(images/file_icon/iconPdf2.gif) no-repeat center right;
	    background-size: contain;
	}
	a:not(.noIcon)[href$=".doc"]:after {
	    width: 84px;
	    height: 30px;
	    background: url(images/file_icon/iconDoc2.gif) no-repeat center right;
	    background-size: contain;
	}
	a:not(.noIcon)[href$=".docx"]:after {
	    width: 84px;
	    height: 30px;
	    background: url(images/file_icon/iconDocx2.gif) no-repeat center right;
	    background-size: contain;
	}
	a:not(.noIcon)[href$=".xls"]:after {
	    width: 84px;
	    height: 30px;
	    background: url(images/file_icon/iconXls2.gif) no-repeat center right;
	    background-size: contain;
	}
	a:not(.noIcon)[href$=".xlsx"]:after {
	    width: 84px;
	    height: 30px;
	    background: url(images/file_icon/iconXlsx2.gif) no-repeat center right;
	    background-size: contain;
	}
	a:not(.noIcon)[href$=".csv"]:after {
	    width: 84px;
	    height: 30px;
	    background: url(images/file_icon/iconCsv2.gif) no-repeat center right;
	    background-size: contain;
	}
	a:not(.noIcon)[href$=".zip"]:after {
	    width: 84px;
	    height: 30px;
	    background: url(images/file_icon/iconZip2.gif) no-repeat center right;
	    background-size: contain;
	}

	/* -----------------------------------
	4.0　ヘッダー
	----------------------------------- */
	#slider{
		height:560px;
	}

	.slider li > div {
		font-size: 150%;
	}
	.slider li > div .worSmall {
		font-size: 90%;
	}


	.mainImage, .conmain, .promain, .casmain, .usmain{
		height:237px;
	}

	.headerNest{
		display: block;
	}
	.headerNest > div:first-child{
		padding: 0.7em 1.2em 0.7em 0;
	}
	.headerMenu div{
		width:33%;
		text-align:center;
		margin-bottom:0.5em;
	}

	.mainImage > div > img, .conmain > div > img, .promain > div > img, .casmain > div > img, .usmain > div > img{
		margin-top: 0.3em;
	}

	/* -----------------------------------
	5.0　フッター
	----------------------------------- */

	.footerAreaFlex{
		display: block;
	}
	.footerAreaFlex div{
		line-height: 2em;
		width:100%;
	}
	.footerAreaFlex div:first-child{
		max-width: 100%;
		margin:0 0 60px 0;
	}
	.footerAreaFlex div:nth-child(2){
		padding: 0;
	}

	/* -----------------------------------
	7.0　メインコンテンツ（個別）
	----------------------------------- */

	.newsBack{
		background: url("back_news.png") top left no-repeat;
		background-size: contain;
	}
	.newsNest {
		width: 90%;
	}
	.newsBack h4{
		font-size: 129%;
	}
	.newsBack h3{
		font-size: 137%;
	}

	.flexNews{
		display: block;
		margin: 40px auto 0 auto;
		padding-bottom: 20px;
	}
	.flexNews > div{
		width:100%;
		padding-bottom: 0;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: -10px;
	}

	.flexNews > div:first-child{
		width: 85%;
	}
	.flexNews > div:nth-child(2){
		width: 88%;
	}
	

	.flexTokucho{
		display: block;
		margin: 90px auto 0;
		padding-bottom: 100px;
	}
	.flexTokucho > div{
		width:100%;
		padding-bottom: 40px;
	}
	.newsNest .flexTokucho > div{
		width:100%;
		padding-bottom: 40px;
	}

	.flexConcept2Area, .flexConcept2AreaNoline{
		display: block;
	}
	.flexConcept2Area > div, .flexConcept2AreaNoline > div{
		width:100%;
	}
	.flexConcept2AreaNoline > div:first-child{
		margin-bottom: 80px;
	}
	.flexConcept2AreaNoline > div:first-child > div:first-child{
		margin-bottom: -60px;
	}
	.flexConcept2AreaNoline > div:last-child > div:last-child{
		margin-bottom: 30px;
	}

	.flexConcept2Area div:first-child{
		padding-right: 0;
		border-right: none;
	}
	.flexConcept2Area div:last-child{
		padding-left: 0;
		border-left: none;
	}
	.flexConcept3Area{
		display: block;
	}
	.flexConcept3Area > div{
		width:100%;
	}

	.flexHalfArea{
		display: block;
		width: 95%;
	}
	.flexHalfArea > div{
		width:100%;
	}
	.flexHalfArea > div.shortArea{
		width:100%;
		padding-right:0;
	}
	.flexProduct2Area{
		display: block;
	}
	.flexProduct2Area div:first-child{
		width:100%;
		padding-right: 0;
		padding-left: 0;
		border-right: none;
		margin-bottom: 60px;
	}
	.flexProduct2Area div:last-child{
		width:100%;
		padding-left: 0;
		border-left: none;
	}
	.productTeam658 img{
		width:320px;
	}
	
	.flexProduct2Area2{
		display: block;
	}
	.flexProduct2Area2 > div{
		width:100%;
	}
	.flexProduct2Area2 > div img{
		max-width: 100%;
	}
	.flexProduct2Area2 > div img.productLogo {
		width: 55%;
		max-width: 100%;
		margin-top: 0px;
		margin-bottom: -150px;
	}
	.flexProduct2Area2 > div.productLogoU {
		margin-bottom: -60px;
	}	
	.productH1{
		margin-bottom: 0.8em;
	}
	.productH2{
		font-size:155%;
		margin-bottom: -20px;
	}
	.productLinkArea{
		width: 100%;
		padding-right: 1em;
		margin-top:30px;
		margin-bottom: 10px;
	}
	.productLinkArea2{
		padding-right: 1em;		
		margin-top:30px;
		margin-bottom: 60px;
	}

	h2.topCap {
		font-size:116%;
	}

	.topGriller div:last-child > div:first-child{
		position: static;
		left: 0;
		top: 50%;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
	.topGriller a.topLinkBtn{
		font-size:85%;
	}

	.topGriller > div:first-child{
		width:53%;
	}
	.topGriller > div:last-child{
		font-size: 105%;
	}
	.topGriller div:last-child img{
		width:92%;
	}
	.topGriller div.linkArea {
		max-width: 100%;
		text-align: left;
	}
	
	.topGriller{	/* スマホ時の位置調整 */
		margin: -1.05em auto -0.7em;
	}
	.topGriller > div:last-child{
		padding-top :1.0em;
	}
	
	
	.topCaption{
		text-align: left;
	}
	.topInfo{
		padding:1em;
	}
	.topInfo > div{
		display: block;
	}
	.topInfo > div > div:nth-child(odd){
		width:100%;
	}
	.topInfo > div > div:nth-child(even){
	width:100%;
	}

	.tokchoMain{
		padding:50px 0;
	}
	.tokchoMain .tokchoMainTitle{
		font-size:170%;
	}

	.tokuchoNum{
		font-size:80%;
		line-height:1.6em;
		margin:0 auto 30px;
		padding-top:1.2em;
	}
	.tokuchoNum span{
		line-height:1.2em;
	}

	.conceptCaption{
		width: 95%;
		text-align: left;
	}
	.conceptImage{
		display:block;
	}
	.conceptImage > div:first-child{
		width:100%;
		margin:0 auto 0.5em;
	}
	.conceptImage > div:last-child{
		width:13.5em;
		margin:0 auto;
		font-size: 105%;
	}
	.conceptImage div:last-child > div:first-child{
		width: 100%;
		position: static;
		-webkit-transform: translateY(0%);
		-ms-transform: translateY(0%);
		transform: translateY(0%);
	}
	
	.csPos{
		padding-left: 1.5em;
	}

	.formArea input[type="text"],
	.formArea input[type="email"],
	.formArea input[type="tel"],
	.formArea textarea {
		padding: 1em;
		width: 100%;
		font-size: 100%;
		border: 1px solid #ccc;
	}
	
	.flexHalfArea2{
		display: block;
	}
	.flexHalfArea2 > div{
		width:100%;
	}
	.flexHalfArea2 > div:nth-child(2){
		margin-top: 90px;
	}
	
	.flexHalfArea3{
		display: block;
	}
	.flexHalfArea3 > div{
		width:100%;
	}
	.flexHalfArea3 > div:first-child{
		width:100%;
	}

	ul.lunchList{
		display: block;
	}
	ul.lunchList li{
		margin: 0 0 0 2.0em;
	}

	.privacyH2{
		font-size:130%;
	}

	.conceptClearTableSize80{
		width: 100%;
	}
	table.conceptClearTableSizeSm th, table.conceptClearTableSizeSm td {
		display: block;
	}

	/* テーブルスクロール */
	.table-scroll {
		-webkit-overflow-scrolling: touch;
		overflow: auto;
		overflow-y: auto!important;
		margin-bottom:45px;
		width:100%;
	}
	.table-scroll:before {
		content: "※左右にフリックすると表がスライドします。";
	}
	.table-scroll table{
		min-width:1200px;
	}
	.table-scroll table:first-child{
		margin-top:10px;
	}
	.table-scroll table:last-child{
		margin-bottom:0;
	}

	.table-scroll table.w1600{
		min-width:1600px;
	}
	.table-scroll table.w950{
		min-width:1150px;
	}	
}

ul + h3{
	margin-top: 50px;
}