@charset "UTF-8";

/* reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body {line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,q:before, q:after { content:'';content:none;}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{text-decoration: line-through;}
abbr[title], dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input, select{vertical-align:middle;}


/*======================================
	基本スタイル
======================================*/
html {
	font-size: 62.5%;
}

body {
	color: #333;
	
	height: 100%;
	line-height: 1.4;
	font-size: 1.4rem;
	letter-spacing: 0.02rem;
	margin: 0;
	
	-webkit-font-smoothing: antialiased;
	-webkit-moz-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}

body, textarea, input, pre {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
}

*, *::before, *::after {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
}

a { text-decoration: none; }

ul { margin: 0; padding: 0; }

p {
	margin: 0;
	padding: 0;
	font-size: 1.4rem;
	line-height: 1.4;
}

sup {
	vertical-align: super;
	font-size: small;
}

li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	-webkit-backface-visibility: hidden;
}

.nblur {
	-webkit-backface-visibility: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }


/*======================================
	debug
======================================*/
.debug {
}

.debug .disp {
	position: fixed;
	font-size: .8rem;
	width: 200px;
	height: 100px;
	background: #eee;
	bottom: 50px;
	
	z-index: 10000;
}

/*
.line1,
.line2 {
	position: fixed;
	width: 100%;
}

.line1 { border-top: 1px #f00 solid; }
.line2 { border-top: 1px #00f solid; }

*/


/*======================================
	コンテンツ設定
======================================*/
#contents.tMargin {
	margin-top: 60px;
}


[id^="content-"] {
	padding: 20px 0;
*	padding-bottom: 50px;
}


[id^="content-"] .cinner {
	background: #fff;
	padding: 30px 10px;
}


/*======================================
	トップページへのリンク
======================================*/
.topLink {
	position: fixed;
	width: 50px;
	height: 50px;
	background: rgba( 33, 33, 33, .6 );
	bottom: 20px;
	right: -50px;
	border-radius: 5px;
	cursor: pointer;
	z-index: 98;
}

.topLink span {
	display: block;
	position: absolute;
	font-size: 2.6rem;
	color: #fff;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	text-align: center;
}

.animeTopLink1 {
	animation: animeTopLink1 .6s forwards;
}

.animeTopLink2 {
	animation: animeTopLink2 .6s forwards;
}


@keyframes animeTopLink1 {
	0% {
		opacity: 0;
		transform: translateX(0);
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
	}
	
	100% {
		opacity: 1;
		transform: translateX(-70px);
		-webkit-transform: translateX(-70px);
		-moz-transform: translateX(-70px);
		-ms-transform: translateX(-70px);
	}
	
}


@keyframes animeTopLink2 {
	0% {
		opacity: 1;
		transform: translateX(-70px);
		-webkit-transform: translateX(-70px);
		-moz-transform: translateX(-70px);
		-ms-transform: translateX(-70px);
	}
	
	100% {
		opacity: 0;
		transform: translateX(0);
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
	}
	
}



/*======================================
	アイコン設定
======================================*/

/* 疑似要素設定 */
.iconfas::before,
.iconfas::after,
.iconfas *::before,
.iconfas *::after,
.iconfas_b *::before,
.iconfas_f *::after {
	font-family: "Font Awesome 5 Free";
}


/*======================================
	マージン
======================================*/
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb50 { margin-bottom: 50px; }
.mb80 { margin-bottom: 80px; }

/*======================================
	画像の比率設定
======================================*/

/* 4:3 */
[class*="img-ratio"] {
	position: relative;
	display: block;
	width: 100%;
}

[class*="img-ratio"] img {
	position: absolute;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
}

[class*="img-ratio"]::before {
	content: "";
	display: block;
}

/* 4:3 */
.img-ratio01::before { padding-top: 75%; }

/* 16:9 */
.img-ratio02::before { padding-top: 56.25%; }


/*======================================
	コメントボックス
======================================*/
[class*="commentBox"] p {
	font-size: 1.6rem;
}

[class*="commentBox"] .mb {
	margin-bottom: 14px;
}

/* 自動マージン */
[class*="commentBox"].automb p:not(:last-child) {
	margin-bottom: 15px;
}

/*======================================
	サブコメントボックス
======================================*/
.subComment {
	border: 1px #aaa dotted;
	padding: 10px 20px;
	background: #fffbe3;
	
	border-radius: 5px;
}


/*======================================
	中央
======================================*/
.posMid {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

/*======================================
	その他
======================================*/
/* 表示,非表示 */
.chide { visibility: hidden; }
.cshow { visibility: visible; }


/* font */
.fset00 {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

.fset01 {
	font-family: "游ゴシック", "Yu Gothic", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}

.fset02 {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}


.fset03 {
	font-family: '小塚ゴシック Pro L', 'Kozuka Gothic Pro Light', sans-serif;
}

.fsetGoogle01 {
	font-family: 'Noto Sans JP', sans-serif;
}

.fsetGoogle02 {
	font-family: 'Kosugi Maru', sans-serif;
	transform: rotate(0.001deg);
}

.fsetGoogle03 {
	font-family: 'Alata', sans-serif;
}


/*---------------------------
　矢印
---------------------------*/

/* arrow01 */

.arrow01::before {
	position: absolute;
	content: "\f105";
	color: #f00;
	font-weight: bold;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transition: .4s;
}

.arrow01:hover:before {
	transform: translate(5px, -50%);
}





/* color */

/* 赤系 */
.sr00 { color: #f22; }

/* 青系 */
.sb00 { color: #00c; }

/* オレンジ系 */
.so00 { color: #ff9500; }

.tshadow01 {
	text-shadow: 1px 1px 1px #000 ;
}


/* 改行 */
.br,
.spbr { display: block; }


/* 表示 */
.pcOnly { display: none; }
.spOnly { display: block; }
/*============================
　header
============================*/
header {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 100;
}

/* wrapper */
header .wrap {
	position: relative;
	background: #fff;
	padding: 10px 20px;
	box-shadow: 0 2px 3px #333;
	z-index: 1;
}


#title {
	position: relative;
}

/* タイトル */
#title .logo {
	height: 48px;
}

#title .logo img {
	display: block;
	position: absolute;
	height: 110%;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
}

#title .logo a {
	display: inline-block;
	height: 100%;
}

#title .logo .nyanq {
	left: 106px;
	height: 42px;
}

/* タイトルのサブメッッセージ */
#title .subTitle {
	font-size: 1.2rem;
	margin-bottom: 5px;
}





/*============================
　navi
============================*/
#navi {
	position: fixed;
	height: 110%;
	visibility: hidden;
	background: linear-gradient( to bottom, #fa8e00 0, #fa8e00 60%, #bf6d00 100% );
	background: -webkit-linear-gradient( top, #fa8e00 0, #fa8e00 60%, #bf6d00 100% );
	background: #fff;
	z-index: 0;
}



#navi .menu {
	position: relative;
	padding: 5px 10px;
}

/* 各メニュー */
#navi .menu li {
	position: relative;
}

#navi .menu li::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background: #aaa;
	bottom: 0;
}

#navi .menu .top {
}


/* リンクカラー */
#navi .menu li a {
	display: block;
	color: #333;
	padding: 15px 0;
}

#navi .menu li a::before {
	position: absolute;
	content: "";
	width: 0;
	height: 1px;
	background: #fff;
	
	left: 50%;
	bottom: 5px;
	transform: translateX(-50%);
	transition: .4s;
}

#navi .menu li a:hover:before {
	width: 70%;
}




/* メニュー名 */
#navi .menu .name {
	font-size: 1.7rem;
}

#navi .menu .subName {
	color: #2e9592;
	font-size: 1.4rem;

}

.navibg {
	position: fixed;
	display: none;
	width: 100%;
	height: 110%;
	top: 0;
	left: 0;
	background: #000;
	opacity: 0;
	z-index: 1;
}

header #navi.fixedNavi {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 10;
}

/*================================================
　機能領域
================================================*/
.navifunc {
	display: flex;
	display: -webkit-flex;
	position: absolute;
	width: 60px;
	height: 60px;
	cursor: pointer;
	
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 1;
}


/* navi button */
.naviButton {
	flex: 0 0 60px;
}

.naviButton .button {
	position: relative;
	width: 80%;
	padding: 20px 0;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
}

.naviButton .button .icon {
	display: block;
	position: relative;
	width: 70%;
	height: 2px;
	background: #666;
	margin: 0 auto;
	
}


.naviButton .button .icon::before,
.naviButton .button .icon::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 2px;
	background: #666;
}

.naviButton .button .icon::before {
	top: -11px;
}

.naviButton .button .icon::after {
	top: 11px;
	background: #666;
}


/* open */
.naviButton .button .icon.open {
	animation: animeNaviButtonFadeOutSp .6s forwards;
}

.naviButton .button .icon.open::before {
	animation: animeNaviButtonOpen01 .6s forwards;
}

.naviButton .button .icon.open::after {
	animation: animeNaviButtonOpen02 .6s forwards;
}

@keyframes animeNaviButtonFadeOutSp {
	0% { background: #666; }
	100% { background: transparent; }
}

@keyframes animeNaviButtonOpen01 {
	0% { transform: translateY(0) rotate(0); }
	100% { transform: translateY(11px) rotate(405deg); }
}

@keyframes animeNaviButtonOpen02 {
	0% { transform: translateY(0) rotate(0); }
	100% { transform: translateY(-11px) rotate(-405deg) ; }
}

/* close */
.naviButton .button .icon.close {
	animation: animeNaviButtonFadeInSp .6s forwards;
}

.naviButton .button .icon.close::before {
	animation: animeNaviButtonClose01 .6s forwards;
}

.naviButton .button .icon.close::after {
	animation: animeNaviButtonClose02 .6s forwards;
}

@keyframes animeNaviButtonFadeInSp {
	0% { background: transparent; }
	100% { background: #666; }
}

@keyframes animeNaviButtonClose01 {
	0% { transform: translateY(11px) rotate(405deg); }
	100% { transform: translateY(0) rotate(0); }
}

@keyframes animeNaviButtonClose02 {
	0% { transform: translateY(-11px) rotate(-405deg) ; }
	100% { transform: translateY(0) rotate(0); }
}


/*================================================
　breadcrumb
================================================*/
#breadcrumbList ul {
	display: flex;
	display: -webkit-flex;
	
	margin: 20px 10px 30px 10px;
	overflow: hidden;

}

/* 各階層 */
#breadcrumbList li {
	position: relative;
	background: #faaf00;
	background: #4F2600;

}

/* 全枠共通 */
#breadcrumbList li::before,
#breadcrumbList li::after {
	position: absolute;
	content: "";
	top: 50%;
	transform: translateY(-50%);
}

/* 後部 */
#breadcrumbList li:nth-child(2n):before {
	border-top: 26px #4F2600 solid;
	border-left: 20px rgba( 0, 0, 0, 0 ) solid;
	border-bottom: 26px #4F2600 solid;
	left: -20px;
}


/* 前部 */
#breadcrumbList li::after {
	border-top: 26px rgba( 0, 0, 0, 0 ) solid;
	border-left: 20px #4F2600 solid;
	border-bottom: 26px rgba( 0, 0, 0, 0 ) solid;
	right: -18px;
}

#breadcrumbList li:nth-child(2) {
	left: 26px;
}


/* link */
#breadcrumbList li a {
	display: block;
	color: #fff;
	font-size: 1.6rem;
*	font-weight: bold;
*	text-shadow: 1px 1px 2px #000;
	padding: 5px 15px 5px 15px;
}

#breadcrumbList li .msg {
	display: none;
}


/* TOPページアイコン */
#breadcrumbList .top::before {
	content: "\f015";
	margin-right: 5px;
	font-weight: bold;
}



/*================================================
　サブページ - ヘッドライン
================================================*/
.subHeadline {
	position: relative;
	padding-top: 68px;
	overflow: hidden;
	z-index: 0;
}



.subHeadline .wrap {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 0;
}

/* 比率 */
.subHeadline .wrap::before {
	display: block;
	content: "";
	padding-top: 68.45%;
}


/* フィルター */
.subHeadline .wrap::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .2;
	top: 0;
	z-index: 2;
}



.subHeadline .wrap img {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
	top: 0;

}

.subHeadline .inner {
	position: absolute;
	width: 100%;
	padding: 0 10px;
	left: 50%;
	bottom: 60px;
	transform: translateX(-50%);
	z-index: 3;
}


.subHeadline .inner .str {
	color: #fff;
	font-size: 8vw;
	line-height: 1.4;
	text-shadow: 2px 2px 4px #333;
	
}

.subHeadline .inner .str .en {
	display: block;
	font-size: 6vw;
}

.subHeadline .inner .str .strCol01 {
	color: #2e9592;
}


/*================================================
　共通
================================================*/

/* 最初の説明 */
.firstBox {
	padding: 0px 10px;
	margin-bottom: 50px;
}

.firstBox p {
	font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.4;
}



/*================================================
　無料相談受付中
================================================*/
#content-consult {
	background: #f5f5f5;
	padding: 20px 10px;
}



/* first box */
#content-consult .firstBox {
	padding: 40px 0;
	margin: 0;
}

#content-consult .commentBox p {
	text-align: center;
	font-size: 4.0vw;
}

/* last box */
#content-consult .lastBox {
}


#content-consult .checklist {
	padding: 0 16px;
	margin: 0 auto;
	margin-bottom: 50px;
*	background: #aaa;
}

#content-consult .checklist .box {
	position: relative;
	font-size: 3.6vw;
	padding-left: 8vw;
}

#content-consult .checklist .box:not(:last-child) {
	margin-bottom: 10px;
}


#content-consult .checklist .box::before {
	position: absolute;
	content: "\f00c";
	color: #2e9592;
	font-size: 5.4vw;
	font-weight: bold;
	line-height: 1;
*	top: 50%;
	left: 0;
*	transform: translateY(-50%);
}



/*================================================
　資料ダウンロード・お問い合わせ
================================================*/
#content-document {
	background: #2e9592;
}

#content-document .cinner {
	padding: 20px 0 ;
}


/* wrapper */
#content-document .document {
	position: relative;
}

#content-document .document::beforea {
	position: absolute;
	content: "";
	width: 90%;
	height: 2px;
	background: #fdd000;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );

}

/* 各box */
#content-document .document .box {
	padding: 0 5px;
}

#content-document .document .box:not(:last-of-type) {
	margin-bottom: 20px;
}


/* コメント */
#content-document .document .box .commentBox {
	margin-bottom: 10px;
}

#content-document .document .box p {
	font-size: 3vw;
	font-weight: bold;
	text-align: center;
}


/* リンクボタン */
#content-document .document .buttonStyle01 {
	width: 70%;
	font-size: 3.8vw;
}



#content-document .document .buttonStyle01::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

#content-document .document .download::after {
	content: "\f019";
	font-size: 4vw;
	right: 4.0vw;
}

#content-document .document .mail {
	padding-right: 10px;
}

#content-document .document .mail::after {
	content: "\f0e0";
	font-size: 4.2vw;
	font-weight: normal;
	right: 4.0vw;
}


#content-document .document .order::after {
	content: "\f044";
	font-size: 4vw;
	font-weight: normal;
	right: 4.0vw;
}



/*================================================
　画面下部コンテンツ
================================================*/
.bottomContents {
	position: fixed;
	width: 100%;
	background: #ddd;
	bottom: 0;
	z-index: 51;
	padding: 10px 0;
	transition: .6s;
	opacity: 0;
}

.bottomContents.close {
	transform: translateY(100px);
}


.bottomContents .inner {
	padding: 0 10px;
}

.bottomContents .contents {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	align-items: center;
}

/* メッセージ領域 */
.bottomContents .contents .msg {
	flex: 0 0 48%;
}

.bottomContents .contents .msg p {
	font-weight: bold;
	font-size: 3.8vw;
	letter-spacing: .1rem;
	text-align: center;
}

.bottomContents .contents .msg .tel {
	color: #2e9592;
	font-size: 4.8vw;
}

/* ボタン領域 */
.bottomContents .contents .link {
	position: relative;
	flex: 0 0 50%;
	
}


/* ボタンデザイン */
.bottomContents .contents .link .btn {
	position: relative;
	display: block;
	color: #2e9592;
	font-size: 3.2vw;
	font-weight: bold;
	text-align: center;
	border: 1px #2e9592 solid;
	border-radius: 50px;
	background: #fff;
	padding: 5px 3vw 5px 0;
	transition: .4s;
}

/* hover */
.bottomContents .contents .link .btn:hover {
	color: #fff;
	background: #2e9592;
}


.bottomContents .contents .link .btn::before {
	position: absolute;
	right: 2vw;
}

.bottomContents .contents .link .btn:not(:last-of-type) {
	margin-bottom: 5px;
}


/* download */
.bottomContents .contents .link .download::before {
	content: "\f019";
	font-size: 3.3vw;
}

/* mail */
.bottomContents .contents .link .mail::before {
	content: "\f0e0";
	font-weight: normal;
	font-size: 3.3vw;
}

/* order */
.bottomContents .contents .link .order::before {
	content: "\f044";
	font-weight: normal;
}


/*============================
　footer
============================*/
footer {
	background: #fff;
}

/* footer 全体 */
footer .wrap {
	padding: 30px 10px;
}

/* footer main wrapper */
footer .fwrap {
	position: relative;
	color: #fff;
}


footer .fContent {
	position: relative;
	color: #333;
}

footer .fContent:not(:last-of-type) {
	margin-bottom: 50px;
}

/* コンテンツメイン枠 */
footer .fContent .inner {
	position: relative;
	padding: 0 10px 0 10px;
	border-left: 3px #2e9592 solid;
}


/* 見出し */
footer .fContent .header {
	position: relative;
	font-size: 1.6rem;
	padding: 3px 2px;
	margin-bottom: 15px;
}



/* 肉球アイコン */
.iconCompany::before {
	content: "\f1b0";
	font-weight: bold;
	margin-right: 10px;
}

/* サイトマップアイコン */
.iconSitemap::before {
	content: "\f002";
	font-weight: bold;
	margin-right: 10px;
}


/*----------------------------
　ロゴ
----------------------------*/
footer .logo {
	position: relative;
	height: 50px;
	margin-bottom: 30px;
}

footer .logo img {
	height: 100%;
}


footer .logo .nyanq {
	position: absolute;
	height: 42px;
	top: 50%;
	transform: translateY(-50%);
}
/*----------------------------
　会社情報
----------------------------*/
footer .company {
}

/* */
footer .company .box {
	display: flex;
	display: -webkit-flex;
	margin-bottom: 10px;
}

footer .company dt {
	flex: 0 0 70px;
	font-size: 1.4rem;
	line-height: 1.6;
	margin-right: 15px;
	
}

#footer .company dt span {
	display: block;
	font-size: 1.4rem;
	border-radius: 5px;
}


footer .company dd {
	display: flex;
	align-items: center;
}

footer .company dd p {
	font-size: 1.4rem;
	line-height: 1.4;
}

/*----------------------------
　サイトマップ
----------------------------*/
footer .siteMap {
}

/* 各サービス別 box */
footer .siteMap .contentBox {
}

footer .siteMap .contentBox .box {
	flex: 0 0 31%;
	margin-bottom: 30px;
}


/* 各サービス別 box */
footer .siteMap .subHeader {
	color: #fff;
	font-weight: normal;
	background: #2e9592;
	text-align: center;
	margin-bottom: 10px;
	
	border-radius: 3px;
}



footer .siteMap .list {
	padding-left: 5px;
}


/* 各ページ */
footer .siteMap .list li {
	position: relative;
	font-size: 1.4rem;
	line-height: 1.6;
	padding-left: 15px;
}

/* リンク */
footer .siteMap a {
	color: #333;
}


/*============================
　帯のフッター部
============================*/
footer .band {
	text-align: center;
	background: #fa8e00;
}

footer .band p {
	color: #fff;
	padding: 5px 0;
	font-size: 1.6rem;
	text-shadow: 1px 1px 2px #333;
}

footer .band a {
	color: #fff;
}
/*================================================
　ヘッダースタイル
================================================*/


/*================================================
　style - 01
================================================*/
.tcenter {
	text-align: center;
}
.headerStyle01 {
	display: inline-block;
	position: relative;
	font-size: 6.0vw;
	text-align: center;
	padding: 2px 10px;
	border-bottom: 3px #fdd000 solid;

}

/*================================================
	押し込んだ表現
================================================*/
.pressButton {
	outline: none;
	box-shadow: 2px 2px  #666;
	background: -webkit-linear-gradient( top, #eee 0%, #bbb 100% );
	background: -moz-linear-gradient( top, #eee 0%, #bbb 100% );
	background: -ms-linear-gradient( top, #eee 0%, #bbb 100% );

}

/* 押された時 */
.pressButton:active {
	box-shadow: 0 0 0 transparent;
	transform: translate( 2px, 2px );
	-webkit-transform: translate( 2px, 2px );
	-moz-transform: translate( 2px, 2px );
	-ms-transform: translate( 2px, 2px );
}


/*================================================
	ボタン等に光を走らせる
================================================*/
.effectReflection {
	position: relative;
	display: block;
	overflow: hidden;
}

.effectReflection::before {
	position: absolute;
	content: "";
	width: 40px;
	height: 100%;
	background: #fff;
	top: -50px;
	left: -80px;
	z-index: 1;
	animation: effectReflectionSp 2.6s infinite;
}

@keyframes effectReflectionSp {
	0% {
		opacity: 0;
		transform: scale(0) rotate( 30deg );
	}
	
	30% {
		opacity: 0;
		transform: scale(0) rotate( 30deg );
	}

	31% {
		opacity: 1;
		transform: scale(2) rotate( 30deg );
	}


	100% {
		opacity: 0;
		transform: scale(50) rotate( 30deg );
	}
}

@keyframes effectReflectionDelaySp {
	0% {
		opacity: 0;
		transform: scale(0) rotate( 30deg );
	}
	
	30% {
		opacity: 0;
		transform: scale(0) rotate( 30deg );
	}

	31% {
		opacity: 1;
		transform: scale(2) rotate( 30deg );
	}


	70% {
		opacity: 0;
		transform: scale(50) rotate( 30deg );
	}

	100% {
		opacity: 0;
		transform: scale(50) rotate( 30deg );
	}

}


/*================================================
	マーカーアニメーション
================================================*/
.effectMarker01 {
	background-image: linear-gradient(to right, #ffff00 50%, transparent 50%);
	background-image: -webkit-linear-gradient(left, #ffff00 50%, transparent 50%);
	background-position: 100% 0;
	background-size: 200% auto;
	background-repeat: no-repeat;
}

@keyframes animeEffectMarkerSp01 {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}


/*================================================
　汎用アニメーション
================================================*/
/* beat */
@keyframes animeBeatSp {
	0% { filter: drop-shadow( 0 0 0 #000 ); }
	100% { filter: drop-shadow( 0 0 10px transparent ); }
}

/* fade in */
@keyframes animeFadeInSp {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* fade out */
@keyframes animeFadeOutSp {
	0% { opacity: 1; }
	100% { opacity: 0; }
}


/* 上から下へ移動 */
.effectMove01 {
	position: relative;
	animation: animeEffectMove01Sp 1.6s forwards;
}

.effectInit01 {
	opacity: 0;
}

@keyframes animeEffectMove01Sp {
	0% { opacity: 0; transform: translateY( -20px ); }
	100% { opacity: 1; transform: translateY( 0 ); }
}


/* zoom in */
@keyframes animeZoomInSp {
	0% { opacity: 0; transform: scale( .6, .6 ); }
	100% { opacity: 1; transform: scale( 1, 1 ); }
}



/*================================================
　縁取り
================================================*/
.textBorder01 {
	text-shadow: #ffffff 2px 0px,
				 #ffffff -2px 0px,
				 #ffffff 0px -2px,
				 #ffffff 0px 2px,
				 #ffffff 2px 2px,
				 #ffffff -2px 2px,
				 #ffffff 2px -2px,
				 #ffffff -2px -2px,
				 #ffffff 1px 2px,
				 #ffffff -1px 2px,
				 #ffffff 1px -2px,
				 #ffffff -1px -2px,
				 #ffffff 2px 1px,
				 #ffffff -2px 1px,
				 #ffffff 2px -1px,
				 #ffffff -2px -1px;
}
/*================================================
　フォント設定
================================================*/

/* Ｑ用 */
.fontAlfa01 {
	font-family: 'Alata', sans-serif;
}
/*================================================
　ボックス
================================================*/

/*================================================
　style - 01
================================================*/
/* box style 01 */
.boxStyle01 {
}

.boxStyle01 .box {
}

.boxStyle01 .box:not(:last-of-type) {
	margin-bottom: 60px;
}


.boxStyle01 .box01 {
	position: relative;
	overflow: hidden;
}

.boxStyle01 .box01::before {
	display: block;
	content: "";
	padding-top: 68.5%;
}


.boxStyle01 .box01 img {
	position: absolute;
	width: 110%;
	max-width: initial;
	height: auto;
	
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
}


.boxStyle01 .box02 {
	flex: 0 0 50%;
	background: #fff;
	padding: 20px;
}

.boxStyle01 .box02 .title {
	color: #2e9592;
	font-size: 6.8vw;
	text-align: center;
	margin-bottom: 4vw;
}

/* comment box */
.boxStyle01 .box02 .commentBox {
	margin-bottom: 30px;
}

/* 文字設定 */
.boxStyle01 .box02 .commentBox p {
	font-size: 3.4vw;
	text-align: center;
	line-height: 1.8;
}
/*================================================
　ボタン設定
================================================*/

/*================================================
　style - 01
================================================*/
.buttonStyle01 {
	position: relative;
	display: block;
	color: #2e9592;
	font-size: 4.2vw;
	font-weight: bold;
	text-align: center;
	
	
	width: 100%;
	margin: 0 auto;
	padding: 10px 0;
	
	border: 1px #2e9592 solid;
	border-radius: 50px;
	
	transition: .4s;
}

.buttonStyle01::after {
	position: absolute;
	content: "\f054";
	font-weight: bold;
	right: 8%;
}

.buttonStyle01:hover {
	color: #fff;
	background: #2e9592;
}

/*================================================
　お問い合わせフォーム - 共通
================================================*/
#contents .cinner {
	padding: 30px 0;
}
.form {
}

/* flex 設定 */
.form .fbox {
	display: flex;
	display: -webkit-flex;
}

.form .fbox.fbox-row {
	flex-direction: column;
}

.form .fbox.fbox-center {
	align-items: center;
}


.form .fbox.bline {
	align-items: baseline;
}


.form .subject:first-of-type {
	border-top: 1px #333 solid;
}


/* 項目 */
.form .subject {
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	align-items: center;
	
	background: #eee;
	text-align: center;
	padding: 20px 0;
	border-bottom: 1px #333 solid;

}

/* 項目名 */
.form .subject .title {
	font-size: 5.4vw;
	font-weight: bold;
}

/* サブ項目名 */
.form .subject .subTitle {
	font-size: 3.4vw;
}


/* 必須項目 */
.form .subject .required,
.form .subject .any {
	display: inline-block;
	text-align: center;
	color: #2e9592;
	font-size: 2.8vw;
	font-weight: bold;
	background: #fff;
	border: 2px #2e9592 solid;
	border-radius: 20px;
	padding: 2px 16px;
	margin-top: 5px;
}

/* 必須項目 */
.form .subject .any {
	color: #f7931e;
	border: 2px #f7931e solid;
}


/* 入力情報 */
.form .details {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	
	padding: 30px 10px 30px 10px;
	border-bottom: 1px #333 solid;
}

/* wrapper */
.form .details .wrap {
	width: 100%;
	margin: 0 auto;
}


/* 入力例 */
.form .details .example {
	color: #999;
	font-size: 1.6rem;
	padding-top: 5px;
}


/* ラベル */
.form .details .label {
	width: 80px;
	font-size: 1.5rem;
	font-weight: bold;
	margin-right: 10px;
}


/* テキスト入力 */
.form .details .text,
.form .details .textarea {
	width: 100%;
	padding: 6px 16px;
	font-size: 1.6rem;
	background: #eee;
	border: 1px #aaa solid;
	border-radius: 10px;
}

/* テキストエリア入力 */
.form .details .textarea {
	resize: vertical;
}

/* フォーカスが当たった時・値が入っている時 */
.form .details .incstr,
.form .details .text:focus {
	outline: none;
	background: #fff;
}



/* checkboxを非表示 */
.form .typeCheck .checkbox {
	display: none;
}

/* 選択肢 */
.form .typeCheck label,
.form .typeCheck .defTypeButton {

	position: relative;
	display: block;
	
	font-size: 1.6rem;
	width: 100%;
	background: #efefef;
	border: 1px #888 solid;
	
	margin-bottom: 10px;
	padding: 8px 10px;
	padding-left: 40px;
	
	border-radius: 10px;
	cursor: pointer;
}

/* チェックされた時 */
.form .typeCheck .checkbox:checked + label,
.form .typeCheck .defTypeButton.checked {
	color: #fff;
	background: #2e9592;
	border: 1px #2e9592 solid;
}

/* アイコン */
.form .typeCheck label .icon,
.form .typeCheck .defTypeButton .icon {
	position: absolute;
	display: inline-block;
	width: 16px;
	height: 16px;
	background: #fff;
	
	border-radius: 50%;
	margin-right: 10px;
	
	top: 50%;
	left: 14px;
	transform: translateY(-50%);
}

.form .typeCheck .checkbox:checked + label .icon::before,
.form .typeCheck .defTypeButton.checked .icon::before {
	position: absolute;
	content: "";
	width: 8px;
	height: 8px;
	background: #2e9592;
	border-radius: 50%;
	
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
}


/* セレクト形式 */
.form .formSelect {
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 1.6rem;
	border: 1px #aaa solid;
}


/* 送信ボタンbox */
.ctrlBox {
	padding: 50px 0;
	text-align: center;
	
}

/* 入力確認ボタン */
.ctrlBox .button {
	width: 100%;
	padding: 16px 0;
	text-align: center;
	margin: 0 auto;
	
	color: #fff;
	font-size: 2.6rem;
	background: #f7931e;
	border: 0;
	border-radius: 10px;
	
	cursor: pointer;
}

/*================================================
　お問い合わせフォーム(エラー)- 共通
================================================*/
/* エラー表示 */
.formError {
	position: relative;
	color: #f33;
	font-size: 1.6rem;
	font-weight: bold;
	background: #fafafa;
	border: 2px #f33 solid;
	padding: 5px;
	margin-bottom: 16px;
	border-radius: 5px;
	padding-left: 34px;
}


/* ×アイコン */
.formError .icon::before {
	position: absolute;
	content: "\f00d";
	color: #f33;
	font-weight: bold;
	font-size: 2.2rem;
	font-style: normal;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);;
}


/* 吹き出し */
.formError::before,
.formError::after {
	position: absolute;
	content: "";
}

.formError::before {
	border-top: 10px #f33 solid;
	border-left: 10px transparent solid;
	border-right: 10px transparent solid;
	left: 10px;
	bottom: -10px;
}

.formError::after {
	border-top: 8px #fafafa solid;
	border-left: 8px transparent solid;
	border-right: 8px transparent solid;
	left: 12px;
	bottom: -7px;
}


/*------------------------------------------------
　担当者名
------------------------------------------------*/
.form.first .formName .text {
	width: 100%;
}

.form.first  .formName .box {
	display: flex;
	display: -webkit-flex;
	align-items: baseline;
	flex: 0 0 46%;
}

/* box内のbox */
.form.first .formName .subbox {
	flex: 0 0 100%;
}

.form.first .formName .label {
	flex: 0 0 100%;
}

.form .formName .name01,
.form .formName .name02 {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 20px;
}


/* boxの間隔 */
.form .formName .box:not(:last-of-type) {
	margin-right: 20px;
}


/* 確認画面 */
.form.check .formName .name01 {
	justify-content: flex-start;
	margin: 0;
}

.form.check .formName p {
	font-size: 1.8rem;
}

.form.check .formName .box:first-of-type {
	margin-right: 10px;
}

/*------------------------------------------------
　住所
------------------------------------------------*/

.form.first .formAddress .post {
	margin-bottom: 10px;
}

.form.first .formAddress .post .text {
	text-align: center;
}
/* post01 */
.form.first .formAddress .post .sbox {
	margin-right: 30px;
}

.form.first .formAddress .post .sbox .ssbox {
	position: relative;
	width: 80px;
}

.form.first .formAddress .post .sbox .ssbox::before {
	position: absolute;
	content: "－";
	top: 50%;
	right: -22px;
	transform: translateY(-50%);
}

/* post02 */
.form.first .formAddress .post .sbox:nth-child(2) {
	width: 90px;
}


.form.first .formAddress .text {
	width: 100%;
}


.form.first .formAddress .post .example {
	text-align: center;
}


/* 住所 */
.form.first .formAddress .str01 {
	padding: 16px 0;
	font-weight: bold;
}

/*------------------------------------------------
　電話番号
------------------------------------------------*/
.form.first .formTel .box {
	position: relative;
	justify-content: space-between;
}

/* 入力フォーム */
.form.first .formTel .gbox {
	flex: 0 0 30%;
}



/* ハイフン */
.form.first .formTel .hf {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	color: #666;

}

.form.first .formTel .text {
	width: 100%;
	text-align: center;
}

/* 入力例 */
.form.first .formTel .example {
	text-align: center;
}

/*------------------------------------------------
　連絡方法
------------------------------------------------*/
.form.first .formRows {
	padding-top: 30px;
	padding-bottom: 30px;
}


.form.first .formRows label {
	text-align: center;
	padding-left: 0;
}

.form.first .formRows ul {
	justify-content: space-between;
}

.form.first .formRows li {
	flex: 0 0 48%;
}

/*------------------------------------------------
　確認画面
------------------------------------------------*/

/* 枠のpadding */
.form.check .details {
	padding: 30px 20px 30px 20px;
}


/* 基本文字サイズ */
.form.check .details .wrap,
.form.check .details p {
	font-size: 1.8rem;
}

/* フリガナ */
.form.check .details rt {
	font-size: 1.2rem;
}

/* リスト padding */
.form.check .typeCheck .uData {
	padding: 2px 0;
}

/* 送信・修正ボタン */
.ctrlBox.check  {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	width: 90%;
	margin: 0 auto;
}

.ctrlBox.check .box {
	flex: 0 0 45%;
}




/*------------------------------------------------
　完了画面
------------------------------------------------*/
.ctrlBox.finish .link {
	color: #fff;
	font-size: 1.4rem;
	background: #f7931e;
	border: 0;
	border-radius: 10px;
	padding: 10px 20px;
}

/*================================================
　お問い合わせフォーム - 共通
================================================*/
#contents {
	margin: 60px 0 0 0;
}

.headerStyle {
	color: #fff;
	font-size: 2.8rem;
	font-weight: normal;
	text-align: center;
	background: #f7931e;
	
	padding: 60px 0;
}

/* 入力の進捗 */
.progress {
	position: relative;
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	overflow: hidden;
	margin: 50px 5px 30px 5px;
	z-index: 0;
}

/* 各進捗 */
.progress li {
	position: relative;
	flex: 0 0 28%;
	color: #fff;
	background: #ccc;
	text-align: center;
	padding: 6px 0;
	margin-right: 4%;
}

.progress li p {
	position: relative;
	font-size: 2.6vw;
	top: 50%;
	transform: translateY(-50%);
}


/* 先の部分 */
.progress li::after {
	position: absolute;
	content: "";
	
	border-top: 6vw transparent solid;
	border-left: 3.6vw #ccc solid;
	border-bottom: 6vw transparent solid;
	
	top: 50%;
	transform: translateY(-50%);
	right: -3.55vw;
	z-index: -1;
}

/* 現在色*/
.progress li.now {
	background: #f7931e;
}

.progress li.now::after {
	border-left: 3.6vw #f7931e solid;
}

/* エラー表示 */
.errorBox {
	position: relative;
	width: 76%;
	border-top: 1px #f33 solid;
	border-bottom: 1px #f33 solid;
	padding: 20px 0;
	margin: 50px auto 50px auto;
}


/* 矢印 */
.errorBox::before,
.errorBox::after {
	position: absolute;
	content: "";
	width: 18px;
	height: 18px;
	top: 50%;
	transform: translate( 0, -50% ) rotate(45deg);
	
}

.errorBox::before {
	border-top: 2px #f33 solid;
	border-right: 2px #f33 solid;
	left: -20px;
	animation: animeErrorBox01 1s infinite;
}

.errorBox::after {
	border-bottom: 2px #f33 solid;
	border-left: 2px #f33 solid;
	right: -20px;
	transform: translate( 0, -50% ) rotate(45deg);
	animation: animeErrorBox02 1s infinite;
}


@keyframes animeErrorBox01 {
	0% { opacity: 1; transform: translate( -20px, -50% ) rotate(45deg); }
	100% { opacity: 0; transform: translate( 0, -50% ) rotate(45deg); }
}


@keyframes animeErrorBox02 {
	0% { opacity: 1; transform: translate( 20px, -50% ) rotate(45deg); }
	100% { opacity: 0; transform: translate( 0, -50% ) rotate(45deg); }
}

.errorBox p {
	color: #f33;
	text-align: center;
	font-size: 4.6vw;
	font-weight: bold;
}



/*================================================
　お問い合わせフォーム - 入力
================================================*/
#content-contact01 {
}

#content-contact01 .firstBox {
	margin-bottom: 30px;
}

/* お問い合わせ box */
#content-contact01 .inqbox {
	margin-bottom: 30px;
}

#content-contact01 .inqbox .wrap {
	border: 1px #2e9592 solid;
	border-radius: 8px;
	padding: 10px 26px;
	margin: 0 10px;
}

#content-contact01 .inqbox .title {
	font-size: 2.0rem;
	text-align: center;
}

#content-contact01 .inqbox .str01 {
	color: #2e9592;
	font-size: 9.6vw;
	font-weight: bold;
	letter-spacing: .2rem;
	text-align: center;
}

#content-contact01 .inqbox .str02 {
	font-size: 1.8rem;
	text-align: center;
}

/* ご連絡可能な曜日 */
#content-contact01 .formRows .weekList {
	justify-content: space-between;
	flex-wrap: wrap;
}

#content-contact01 .formRows .weekList li {
	flex-basis: 30%;
	margin: 0;
}

#content-contact01 .formRows .weekList label {
	font-size: 1.6rem;
	line-height: 1;
	vertical-align: middle;
	padding: 8px 0 8px 5px;
}



/* ご連絡可能な時間帯 */
#content-contact01 .formRows .timeList {
	flex-direction: column;
}

#content-contact01 .formRows .timeList li {
	flex-basis: 18%;
	margin: 0;
}

#content-contact01 .formRows .timeList label {
	font-size: 1.6rem;
	line-height: 1;
	vertical-align: middle;
	padding: 8px 0 8px 5px;
}

/*================================================
　お問い合わせ内容
================================================*/
#content-contact01 .inMessage {
	height: 50vw;
	font-size: 1.6rem;
	padding: 6px;
}


/*------------------------------------------------
　送信ボタン
------------------------------------------------*/
#content-contact01 .ctrlBox .button {
	width: 90%;
}