@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;
}

/*================================================
　ヘッドライン
================================================*/
.headline {
	position: relative;
	padding-top: 68px;
	overflow: hidden;
	z-index: 0;
}


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

}

.headline .wrap::before {
	display: block;
	content: "";
	padding-top: 66.25%;
	
}


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


/* 画像 */
.headline .wrap img {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;

	transform: translate(-50%,-50%);
}


/* 文字エリア */
.headline .inner {
	position: absolute;
	width: 80%;
	padding: 0 10px;
	top: 58%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

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


/* 文字 */
.headline .inner .str {
	color: #fff;
	font-size: 5.4vw;
	line-height: 1.6;
	text-align: center;
	text-shadow: 2px 2px 4px #333;
	
}


/*================================================
　共通設定
================================================*/



/*================================================
　お悩み
================================================*/
#content-trouble {
	background: #fff;
}


/* タイトル */
#content-trouble .title {
	color: #333;
	font-size: 5.6vw;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
}


#content-trouble .icon-faq {
	position: relative;
	font-size: 5.8vw;
	color: #2e9592;
	margin-right: 10px;
	opacity: 0;
}



/* animation */
#content-trouble .start .title .icon-faq {
	animation: animeTrouble-titleFaqSp 2.4s forwards;
}
@keyframes animeTrouble-titleFaqSp {
	
	0% {
		opacity: 0;
		left: calc( 50% - 7.9vw );
		transform: translateX(-50%);
	}
	
	60% {
		opacity: 1;
		left: 50%;
		left: calc( 50% - 7.9vw );
		transform: translateX(-50%);
	}
	
	
	100% {
		opacity: 1;
		left: 0;
	}
	
}

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

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




#content-trouble .list {
	width: 68%;
	margin: 0 auto;
	margin-bottom: 30px;
}


#content-trouble .list .box {
	position: relative;
	padding: 15px 0;
}

#content-trouble .list .box::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 2px;
	background: #faaf00;
	left: 0;
	bottom: 0;
*	transform: translateX(-50%);
	opacity: 0;
}


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


#content-trouble .list .box p {
	font-size: 4.4vw;
	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-boxStrSp .8s 2.6s forwards;
}

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

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


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


#content-trouble .start .list .box:nth-of-type(1):before {
	animation: animeTrouble-boxBorderSp .8s 2.6s forwards;
}

#content-trouble .start .list .box:nth-of-type(2):before {
	animation: animeTrouble-boxBorderSp .8s 3.2s forwards;
}
#content-trouble .start .list .box:nth-of-type(3):before {
	animation: animeTrouble-boxBorderSp .8s 3.8s forwards;
}



@keyframes animeTrouble-boxBorderSp {
	0% {
		opacity: 0;
		left: 0;
		width: 0%;
	}

	100% {
		opacity: 1;
		left: 0;
		width: 100%;
	}
	
}



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

#content-trouble .subBox .subTitle {
	position: relative;
	font-size: 5.6vw;
	font-weight: bold;
	text-align: center;
	padding: 10px 0;
	opacity: 0;
}



#content-trouble .start .subBox .subTitle {
	animation: animeTrouble-subTitleSp .6s 5.8s forwards;
}

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

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

}


/* 下部ライン */
#content-trouble .subBox::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 2px;
	background: #faaf00;
	left: 50%;
	bottom: 0;
	opacity: 0;
	transform: translateX(-50%);
	z-index: 1;
}

#content-trouble .start .subBox::before {
	animation: animeTrouble-subBoxUnderlineSp .6s 5.2s forwards;
}

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

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

}



#content-trouble .subBox .myName {
}

/* 画像 */
#content-trouble .gbox {
	width: 40%;
	margin: 0 auto 50px auto;
	opacity: 0;
}

#content-trouble .start .gbox {
	animation: animeFadeInSp 1.4s 4.4s forwards;
}


#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;
}

/* ボタン */
#content-about .cinner .button {
	opacity : 0;
}

/* 各種非表示 */
#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 .start .box01 {
	animation: animeAbout-upSp 1s forwards;
}



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

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


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

/* animation - box2 タイトル */
#content-about .start .box02 .title {
	animation: animeFadeInSp .8s 1.0s forwards;
}

/* animation - box2 コメント */
#content-about .start .box02 .commentBox {
	animation: animeAbout-upSp .8s 1.6s forwards;
}

/* animation - ボタン */
#content-about .start .button {
	animation: animeZoomInSp .6s 2.2s forwards;
}

@keyframes animeZoomInSp {
	0% {
		opacity: 0;
		transform: scale( .6, .6 );
	}

	100% {
		opacity: 1;
		transform: scale( 1, 1 );
	}
	
}

#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: 20px 10px;
}

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


/* flow */
#content-flow .flow {
	margin-bottom: 50px;
}

/* flow box */
#content-flow .flow .box {
	position: relative;
	width: 80%;
	margin: 0 auto;
	padding: 16px 10px;
	border: 2px #f7931e solid;
	opacity: 0;

}


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

#content-flow .start .flow .box:nth-of-type(2) {
	animation: animeFlow-rightSp 1s 1.0s forwards;
}
#content-flow .start .flow .box:nth-of-type(3) {
	animation: animeFlow-rightSp 1s 1.4s forwards;
}


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



#content-flow .flow .box:not(:last-of-type) {
	margin-bottom: 8vw;
}


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


#content-flow .flow .box .wrap {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	align-items: center;
}



/* 画像 */
#content-flow .flow .ibox {
	flex: 0 0 30%;
	padding: 20px 0;
}

/* 文章 */
#content-flow .flow .commentBox {
	flex: 0 0 66%;
}
#content-flow .flow .commentBox p {
	font-size: 3.6vw;
	line-height: 1.6;
}


/* arrow */
#content-flow .flow .box:not(:last-child):before {
	position: absolute;
	content: "\f0d7";
	color: #fdd000;
	font-size: 12.6vw;
	font-weight: bold;
	line-height: 1;
	
	left: 50%;
	bottom: -10.6vw;
	transform: translateX(-50%);
	opacity: 0;
	
}

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

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

#content-flow .buttonStyle01 {
	width: 88%;
}


/*================================================
　サポート
================================================*/
#content-support {
	background: #f7931e;
}


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

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

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

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

/* support */
#content-support .support {
	padding: 0 20px;
}

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


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


/* 文章 */
#content-support .support .commentBox {
	margin-bottom: 10px;
}
#content-support .support .commentBox p {
	text-align: center;
	font-size: 3.8vw;
	line-height: 1.6;
}

/* 画像 */
#content-support .support .ibox {
	width: 30%;
	margin: 0 auto;
}
/*================================================
　よくあるご質問
================================================*/
#content-faq {
	padding: 20px 0;
}

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

/* 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: 4.2vw;
	padding: 10px 32px 10px 10px;
	padding-left: 50px;
	line-height: 1.4;
	
	border: 1px #f7931e solid;
}

#content-faq .faqlist .box .str::before {
	position: absolute;
	color: #2e9592;
	font-size: 5.6vw;
	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: 4.2vw;
	line-height: 1.4;
}


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


/* 開くボタン */
#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;
}