@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 {
	position: relative;
	color: #333;
	min-width: 1000px;
	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 {
	width: 100%;
}

#contents.tMargin {
	margin-top: 60px;
}


[id^="content-"] {
	width: 100%;
	padding: 30px 10px;
}

[id^="content-"] .cinner {
	min-width: 800px;
	max-width: 1000px;
	background: #fff;
	margin: 0 auto;
	padding: 20px 20px 20px 20px;
}


.middleContent {
	display: block;
	width: 1000px;
	margin: 0 auto;
}

/*======================================
	トップページへのリンク
======================================*/
.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: 16px;
}

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

/*======================================
	サブコメントボックス
======================================*/
.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,
.pcbr { display: block; }

/* 表示 */
.pcOnly { display: block; }
.spOnly { display: none; }

/*================================================
　header
================================================*/
header {
	position: fixed;
	background: #fff;
	width: 100%;
	top: 0;
	left: 0;
	box-shadow: 0 2px 3px #333;
	padding: 10px 20px;
	z-index: 100;
}


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

#title .logo img {
	display: inline-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: 108px;
	height: 42px;
}




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

/*================================================
　navi
================================================*/
#navi {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	padding: 0 20px;
}

#navi .menu {
	display: flex;
	display: -webkit-flex;
	justify-content: flex-end;
	align-item: center;
}

/* menu */
#navi .menu .menuContent {
	flex: 0 0 110px;
}

/* link */
#navi .menu .menuContent a {
	position: relative;
	display: block;
	color: #000;
	text-align: center;
	padding: 3px 0;
}

#navi .menu .menuContent a::before {
	position: absolute;
	display: block;
	content: "";
	width: 0;
	height: 1px;
	background: #fa8e00;
	left: 50%;
	bottom: 0;
	opacity: 0;
	transition: .2s;
	transform: translateX(-50%);
}

#navi .menu .menuContent a:hover:before {
	width: 80%;
	height: 1px;
	bottom: 0;
	background: #fa8e00;
	opacity: 1;
}


#navi .menu .menuContent .subName {
	display: none;
}

/*================================================
　機能領域
================================================*/
.navifunc {
	display: none;
}

/*================================================
　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;
	height: 600px;
	padding-top: 68px;
	overflow: hidden;
	z-index: 0;
}


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

.subHeadline .wrap::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background: #000;
	top: 0;
	left: 0;
	opacity: .2;
	z-index: 1;
}



.subHeadline .wrap img {
	position: relative;
	min-width: 800px;
	width: 100%;
	z-index: 0;
}

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


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

.subHeadline .inner .str .en {
	display: block;
	font-size: 2.6rem;
}

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

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

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

.firstBox p {
	font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.6;
}


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



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

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

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


#content-consult .checklist {
	width: 600px;
	margin: 0 auto;
	margin-bottom: 50px;
}

#content-consult .checklist .box {
	position: relative;
	font-size: 1.8rem;
	padding-left: 50px;
}

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


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

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

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


/* wrapper */
#content-document .document {
	position: relative;
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
}

#content-document .document .box:nth-of-type(2):before,
#content-document .document .box:nth-of-type(2):after {
	position: absolute;
	content: "";
	width: 2px;
	height: 90%;
	background: #fdd000;
	top: 50%;
	transform: translateY( -50% );
}

#content-document .document .box:nth-of-type(2):before {
	left: 0;
}
#content-document .document .box:nth-of-type(2):after {
	right: 0;
}


/* 各box */
#content-document .document .box {
	position: relative;
	flex-basis: 33%;
}

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

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


/* リンクボタン */
#content-document .document .buttonStyle01::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 16px;
	line-height: 1;
}

#content-document .document .download::after {
	content: "\f019";
	font-size: 1.8rem;
}

#content-document .document .mail::after {
	content: "\f0e0";
	font-size: 2.4rem;
	font-weight: normal;
}

#content-document .document .order::after {
	content: "\f044";
	font-size: 2.2rem;
	font-weight: normal;
}



/*================================================
　画面下部コンテンツ
================================================*/
.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 {
	width: 980px;
	margin: 0 auto;
}

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

/* メッセージ領域 */
.bottomContents .contents .msg {
	flex-basis: 200px;
}

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

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

/* ボタン領域 */
.bottomContents .contents .link {
	position: relative;
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	flex-basis: 760px;
	
}


.bottomContents .contents .link .btn {
	position: relative;
	display: block;
	flex-basis: 32%;
	text-align: center;
	color: #2e9592;
	font-size: 1.8rem;
	font-weight: bold;
	border: 1px #2e9592 solid;
	border-radius: 50px;
	background: #fff;
	padding: 16px 30px 16px 20px;
	transition: .4s;
}

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


.bottomContents .contents .link .btn::before {
	position: absolute;
	right: 20px;
	font-size: 1.8rem;
}

/* download */
.bottomContents .contents .link .download::before {
	content: "\f019";
}

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

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



/*================================================
　footer
================================================*/
footer {
	background: linear-gradient( to bottom, #363636 0, #141414 100% );
	background: #fff;
}

/* footer 全体 */
footer .wrap {
	width: 1000px;
	margin: 0 auto;
	padding: 30px 10px;
}

/* footer main wrapper */
footer .fwrap {
	position: relative;
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	color: #fff;
}


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

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

/* コンテンツメイン枠 */
footer .fContent .inner {
	position: relative;
	padding: 0 10px 0 20px;
	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 {
	flex-basis: 36%;
}

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

footer .company dt {
	flex: 0 0 80px;
	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 {
	flex-basis: 64%;
}

/* 各サービス別 box */
footer .siteMap .contentBox {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	
}

footer .siteMap .contentBox .box {
	flex: 0 0 31%;
}


/* 各サービス別 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 .etc {
	flex: 0 0 280px;
}



/*================================================
　帯のフッター部
================================================*/
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: 3.0rem;
	text-align: center;
	padding: 2px 10px;
	border-bottom: 3px #fdd000 solid;

}
/*================================================
	押し込んだ表現
================================================*/
.pressButton {
	outline: none;
	box-shadow: 2px 2px  #333;
	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 );
}


/*================================================
	ボタン等に光を走らせる
================================================*/
.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: effectReflection 2.6s infinite;
}

@keyframes effectReflection {
	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 effectReflectionDelay {
	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 animeEffectMarker01 {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}


/*================================================
　汎用アニメーション
================================================*/

/* beat */
@keyframes animeBeat {
	0% { filter: drop-shadow( 0 0 0 #000 ); }
	100% { filter: drop-shadow( 0 0 12px transparent ); }
}

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

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


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

.effectInit01 {
	opacity: 0;
}

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

/* zoom in */
@keyframes animeZoomIn {
	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 {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
}

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


.boxStyle01 .box01 {
	position: relative;
	flex: 0 0 50%;
	overflow: hidden;
	z-index: 1;
}

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

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

.boxStyle01 .box02 .title {
	color: #2e9592;
	font-size: 2.8rem;
	text-align: center;
	margin-bottom: 30px;
}

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

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

/*================================================
　style - 01
================================================*/
.buttonStyle01 {
	position: relative;
	display: block;
	color: #2e9592;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	
	
	width: 80%;
	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;
}

/*================================================
�@�w�b�h���C��
================================================*/
.headline {
	position: relative;
	height: 600px;
	padding-top: 68px;
	overflow: hidden;
	z-index: 0;
}


/* wrapper */
.headline .wrap {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 0;
}

/* filter */
.headline .wrap::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .4;
	z-index: 1;
}


/* �摜 */
.headline .wrap img {
	position: absolute;
	min-width: 800px;
	width: 100%;
	z-index: 0;
	
	top: 38%;
	transform: translateY(-50%);
}


/* �����G���A */
.headline .inner {
	position: absolute;
	width: 60%;
	max-width: 1000px;
	padding: 0 10px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.headline .inner::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 2px;
	bottom: 0;
	background: #FAAF00;
}


/* ���� */
.headline .inner .str {
	color: #fff;
	font-size: 3.4rem;
	line-height: 1.6;
	text-align: center;
	text-shadow: 2px 2px 4px #333;
	
}


/*================================================
�@���ʐݒ�
================================================*/



/*================================================
�@���Y��
================================================*/
#content-trouble {
	background: #fff;
}


/* �^�C�g�� */
#content-trouble .title {
	display: inline-block;
	color: #333;
	font-size: 3.2rem;
	font-weight: bold;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 30px;
}


/* Q�A�C�R�� */
#content-trouble .icon-faq {
	position: relative;
	font-size: 3.8rem;
	color: #2e9592;
	margin-right: 10px;
	opacity: 0;
}


/* animation */
#content-trouble .start .title .icon-faq {
	animation: animeTrouble-titleFaq 2.4s forwards;
}
@keyframes animeTrouble-titleFaq {
	
	0% {
		opacity: 0;
		top: 50px;
		left: calc( 50% - 1.9rem );
	}
	
	60% {
		opacity: 1;
		top: 0;
		left: calc( 50% - 1.9rem );
	}
	
	
	100% {
		opacity: 1;
		top: 0;
		left: 0;
	}
	
}

/* ���� */
#content-trouble .title .str {
	opacity: 0;
}

#content-trouble .start .title .str {
	animation: animeFadeIn 1s 2.2s forwards;
}



#content-trouble .list {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	width: 90%;
	margin: 0 auto;
	margin-bottom: 50px;
}

#content-trouble .list .box {
	flex: 0 0 32%;
}

#content-trouble .list .box p {
	position: relative;
	font-size: 2.1rem;
	font-weight: bold;
	text-align: center;
	overflow: hidden;
}


/* ���� */
#content-trouble .list .box .str {
	position: relative;
	display: inline-block;
	opacity: 0;
}

#content-trouble .start .list .box:nth-of-type(1) p span {
	animation: animeTrouble-boxStr .6s 2.6s forwards;
}

#content-trouble .start .list .box:nth-of-type(2) p span {
	animation: animeTrouble-boxStr .6s 3.2s forwards;
}

#content-trouble .start .list .box:nth-of-type(3) p span {
	animation: animeTrouble-boxStr .6s 3.8s forwards;
}


@keyframes animeTrouble-boxStr {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
	
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}



#content-trouble .subBox {
	position: relative;
	width: 52%;
	margin: 0 auto;
	overflow: hidden;
	
	z-index: 0;
}

#content-trouble .subBox .subTitle {
	position: relative;
	font-size: 3.2rem;
	font-weight: bold;
	text-align: center;
	padding: 10px 0;
*	margin-bottom: 30px;
	opacity: 0;
}

#content-trouble .start .subBox .subTitle {
	animation: animeTrouble-subTitle .8s 4.8s forwards;
}

@keyframes animeTrouble-subTitle {
	0% {
		opacity: 1;
		transform: translateY(50px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}

}


/* �������C�� */
#content-trouble .subBox::before {
	position: absolute;
	content: "";
	width: 90%;
	height: 4px;
	background: #faaf00;
	left: 50%;
	bottom: 0;
	opacity: 0;
	transform: translateX(-50%);
	z-index: 1;
}

#content-trouble .start .subBox::before {
	animation: animeTrouble-subBoxUnderline .8s 4.2s forwards;
}

@keyframes animeTrouble-subBoxUnderline {
	0% {
		opacity: 1;
		width: 0%;
	}

	100% {
		opacity: 1;
		width: 90%;
	}

}


#content-trouble .subBox .myName {
}

/* �摜 */
#content-trouble .gbox {
	width: 200px;
	margin: 0 auto 50px auto;
	opacity: 0;
}


#content-trouble .start .gbox {
	animation: animeTrouble-gbox 2.4s forwards;
}

@keyframes animeTrouble-gbox {
	0% {
		opacity: 0;
		transform: translateY(-100px);
	}

	60% {
		opacity: 1;
		transform: translateY(-100px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}

}



#content-trouble .buttonStyle01 {
	position: relative;
	width: 200px;
	margin: 0 auto;
	color: #fff;
	font-size: 2.4rem;
	text-align: center;
	background: #2e9592;
	padding: 8px 0;
}

#content-trouble .buttonStyle01::before {
	position: absolute;
	content: "";
	background: #FAAF00;
	width: 100%;
	height: 100%;
	left: 8px;
	top: 5px;
	z-index: -1;
}



/*================================================
�@����
================================================*/
#content-about {
	background: #f5f5f5;
}

#content-about .cinner {
	background: none;
	padding: 40px 0;
}



/* �e���\�� */
#content-about .cinner .box01,
#content-about .cinner .box02,
#content-about .cinner .title,
#content-about .cinner .commentBox,
#content-about .cinner .button {
	opacity : 0;
}



/* ���ԓ���ւ� */
#content-about .type02 .box02 { order: 1; }
#content-about .type02 .box01 { order: 2; }



/* box01 animation */
#content-about .type01.start .box01 {
	animation: animeAbout-up 1s forwards;
}

#content-about .type02.start .box01 {
	animation: animeAbout-down 1s forwards;
}

/* animation */
@keyframes animeAbout-up {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes animeAbout-down {
	0% {
		opacity: 0;
		transform: translateY(-30px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* animation - box2  */
#content-about .start.type01 .box02 {
	animation: animeAbout-box02a 1s .6s forwards;
}

#content-about .start.type02 .box02 {
	animation: animeAbout-box02b 1s .6s forwards;
}


/* animation */
@keyframes animeAbout-box02a {
	0% {
		opacity: 0;
		transform: translateX(-100%);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}


@keyframes animeAbout-box02b {
	0% {
		opacity: 0;
		transform: translateX(100%);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}



/* animation - box2 �^�C�g��  */
#content-about .start .box02 .title {
	animation: animeFadeIn .8s 1.6s forwards;
}

/* animation - box2 �R�����g */
#content-about .start .box02 .commentBox {
	animation: animeAbout-up .8s 2.0s forwards;
}


/* animation - �{�^�� */
#content-about .start .button {
	animation: animeZoomIn .6s 2.4s forwards;
}


#content-about .cinner .box02 .commentBox {
	width: 400px;
	margin: 0 auto 30px auto;
}

#content-about .cinner .box02 .commentBox p {
	text-align: left;
}

#content-about .cinner .box02 .list {
	padding-left: 10px;
}


/*================================================
�@����
================================================*/
#content-flow {
	background: #fff;
}

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


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

#content-flow .firstBox p {
	text-align: center;
	font-size: 1.8rem;
}


/* flow */
#content-flow .flow {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	margin-bottom: 50px;
}

/* flow box */
#content-flow .flow .box {
	position: relative;
	flex: 0 0 29%;
	padding: 16px 10px;
	border: 2px #f7931e solid;
	opacity: 0;
}

#content-flow .start .flow .box {
	animation: animeFlow-down 1s forwards;
}

#content-flow .start .flow .box:nth-of-type(2) {
	animation: animeFlow-down 1s .4s forwards;
}
#content-flow .start .flow .box:nth-of-type(3) {
	animation: animeFlow-down 1s .8s forwards;
}


@keyframes animeFlow-down {
	0% { opacity: 0; transform: translateY(-30px); }
	100% { opacity: 1; transform: translateY(0); }
}


/* title */
#content-flow .flow .title {
	font-size: 2.0rem;
	text-align: center;
}

/* �摜 */
#content-flow .flow .ibox {
	width: 50%;
	margin: 0 auto;
	padding: 20px 0;
}

/* ���� */
#content-flow .flow .commentBox {
	padding: 0 10px;
}
#content-flow .flow .commentBox p {
*	text-align: center;
	font-size: 1.6rem;
}


/* arrow */
#content-flow .flow .box:not(:last-child):before {
	position: absolute;
	content: "\f0da";
	color: #fdd000;
	font-size: 8.0rem;
	font-weight: bold;
	
	top: 50%;
	right: -54px;
	transform: translateY(-50%);
	opacity: 0;
}

#content-flow .start .flow .box:not(:last-child):before {
	animation: animeflow-leftToRight .6s 1.5s forwards;
}

@keyframes animeflow-leftToRight {
	0% { opacity: 0; transform: translate( -20px, -50% ); }
	100% { opacity: 1; transform: translate( 0, -50% ); }
}


#content-flow .buttonStyle01 {
	width: 400px;
}


/*================================================
�@�T�|�[�g
================================================*/
#content-support {
	background: #f7931e;
}


#content-support .cinner {
	background: none;
	padding: 20px 0;
}

#content-support .headerStyle01 {
	color: #fff;
}

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

#content-support .firstBox p {
	color: #fff;
	text-align: center;
	font-size: 1.8rem;
}

/* support */
#content-support .support {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	
}

/* support box */
#content-support .support .box {
	position: relative;
	flex: 0 0 29%;
	background: #fff;
	padding: 16px 10px;
}


/* ���� */
#content-support .support .commentBox {
	min-height: 100px;
	margin-bottom: 20px;
}
#content-support .support .commentBox p {
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.6;
}

/* �摜 */
#content-support .support .ibox {
	width: 50%;
	margin: 0 auto;
}
/*================================================
�@�悭���邲����
================================================*/
#content-faq {
}

/* faq list */
#content-faq .faqlist {
	width: 640px;
	padding: 40px 0;
	margin: 0 auto;
	
}

/* faq box */
#content-faq .faqlist .box {
}


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

/* ���� */
#content-faq .faqlist .box .str {
	position: relative;
	font-size: 1.6rem;
	padding: 10px 10px;
	padding-left: 50px;
	
	border: 1px #f7931e solid;
}

#content-faq .faqlist .box .str::before {
	position: absolute;
	color: #2e9592;
	font-size: 2.4rem;
	font-weight: bold;
	font-family: 'Alata', sans-serif;
	line-height: 1;
	top: 10px;
	left: 10px;
}


/* ���� */
#content-faq .faqlist .box .question {
	position: relative;
	cursor: pointer;
	

}

#content-faq .faqlist .box .question::before {
	content: "Q";
}

/* �� */
#content-faq .faqlist .box .answer {
	display: none;
	border-top: none;
}

#content-faq .faqlist .box .answer::before {
	content: "A";
}

#content-faq .faqlist .box .answer p {
	font-size: 1.6rem;
}

#content-faq .faqlist .box .answer .mb {
	margin-bottom: 20px;
}


/* �J���{�^�� */
#content-faq .faqlist .box .question .btn {
	position: absolute;
	width: 24px;
	height: 24px;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}

#content-faq .faqlist .box .question .btn::before,
#content-faq .faqlist .box .question .btn::after {
	position: absolute;
	content: "";
	background: #2e9592;
	
}

#content-faq .faqlist .box .question .btn::before {
	width: 100%;
	height: 2px;
	top: 50%;
	transform: translateY(-50%);
}

#content-faq .faqlist .box .question .btn::after {
	width: 2px;
	height: 100%;
	left: 50%;
	transform: translateX(-50%);
}


#content-faq .faqlist .box .question .btn.open:after {
	content: "";
	opacity: 0;
}