@charset "utf-8";



/* 全体の設定
------------------------------------------------------------------------------*/
#wrapp {
	width: 100%;
	padding-top: 70px;
	overflow: hidden;
}




/* 共通
------------------------------------------------------------------------------*/
/* block */
.block {
	width: 100%;
	height: auto;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

/* main-contents */
.main-contents {
	width: 1200px;
	margin:0 auto;
}

.main-contents li.main-img {
	float: left;
	width: 800px;
	height: 600px;
}

.main-contents li.main-h2 {
	float: left;
	width: 400px;
	height: 600px;
}

.main-contents li.main-h2 img {
	margin-top: 50px;
}

.main-contents li.main-h2 h2 {
	font-size: 36px;
	font-weight: normal;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
}

/* text-contents */
.text-contents {
	width: 100%;
	background: #fff;
}

.text-contents h2{
	width: 1200px;
	max-width: 95%;
	margin: auto;
	padding: 10px 0 10px 0;
	text-align: center;
	font-size: 36px;
	font-weight: normal;
}

.text-contents h3 {
	width: 1200px;
	padding: 100px 0 150px 0;
	margin: auto;
	font-size: 36px;
	font-weight: normal;
	line-height: 2em;
}

.text-contents p {
	width: 1200px;
	padding: 100px 0 150px 0;
	margin: auto;
	font-size: 18px;
	line-height: 2.5em;
}

.text-contents p strong {
	font-size: 18px;
}


/* 画像 */
img {
	width: 100%;
	height: auto;
}

.counsel-navi {
	text-align: center;
	font-size: 60px;
	font-weight: bold;
}

.counsel-navi a {
	display: block;
	width: 600px;
	height: 100px;
	padding: 20px 10px 20px 10px;
	line-height: 100px;
	margin: auto;
	color: #fff;
	border-radius: 20px;
	box-shadow:0 0 30px #FF3;
	border: 3px solid #ff0;
	background: #ff9900;
	background: -moz-linear-gradient(top,  #ff9900 0%, #ff3300 100%);
	background: -webkit-linear-gradient(top,  #ff9900 0%,#ff3300 100%);
	background: linear-gradient(to bottom,  #ff9900 0%,#ff3300 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9900', endColorstr='#ff3300',GradientType=0 );
}

.counsel-navi a:hover {
	background:#FC0;
	color: #000;
	border: 3px solid #F60;
}

p.attention {
	text-align: center;
	font-size: 16px;
	margin: 20px auto 0 auto;
}

.link a {
	font-size: 24px;
	padding: 15px 3% 15px 2%;
	font-weight: bold;
	border-radius: 10em;
}




.slide-link{
	width:100%;
	margin-bottom:5%;
}

.slide-link a .slide-top{
	width:94%;
	padding:3%;
	text-align:center;
	font-size:72px;
	line-height:1.3em;
	font-weight:bold;
	text-shadow:2px 2px 3px #993;
	display:block;
	color:#000 !important;
	background: linear-gradient(270deg, #ffcc33, #fff999, #ffcc33, #fff999);
	background-size: 800% 800%;
	-webkit-animation: AnimationName 8s ease infinite;
	-moz-animation: AnimationName 8s ease infinite;
	animation: AnimationName 8s ease infinite;
}
	@-webkit-keyframes AnimationName {
		0%{background-position:0% 50%}
		50%{background-position:100% 50%}
		100%{background-position:0% 50%}
	}
	@-moz-keyframes AnimationName {
		0%{background-position:0% 50%}
		50%{background-position:100% 50%}
		100%{background-position:0% 50%}
	}
	@keyframes AnimationName {
		0%{background-position:0% 50%}
		50%{background-position:100% 50%}
		100%{background-position:0% 50%}
	}
	
.slide-link a .slide-top .slide-red{
	color:#C00;
	font-size:72px;
	line-height:1.3em;
	font-weight:bold;
}

.slide-link a .slide-bottom{
	width:94%;
	padding:3%;
	text-align:center;
	font-size:72px;
	line-height:1.3em;
	font-weight:bold;
	text-shadow:2px 2px 3px #000;
	display:block;
	color:#FC0;
	background: url(../images/dark-grey-terrazzo.png) repeat 0 0;
}

@media screen and (max-width:896px) {

	.slide-link a .slide-top{
		font-size:48px;
	}
	
	.slide-link a .slide-top .slide-red{
		font-size:48px;
	}
	
	.slide-link a .slide-bottom{
		font-size:48px;
	}
	
}

@media screen and (max-width:480px) {

	.slide-link a .slide-top{
		font-size:30px;
		text-shadow:1px 1px 3px #993;
	}
	
	.slide-link a .slide-top .slide-red{
		font-size:30px;
	}
	
	.slide-link a .slide-bottom{
		font-size:30px;
	}
	
}

@media screen and (max-width:375px) {

	.slide-link a .slide-top{
		font-size:24px;
	}
	
	.slide-link a .slide-top .slide-red{
		font-size:24px;
	}
	
	.slide-link a .slide-bottom{
		font-size:24px;
	}
	
}



/* ヘッダー
------------------------------------------------------------------------------*/
/* メインナビ */
#menu-area {
	width: 100%;
	height: 70px;
	background:#066;
	/*background:#096;*/
	/*background:#396;*/
	/*background:#01b091;*/
	position: fixed;
	z-index: 60;
	filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
;
}

#menu-area p {
	text-indent: 1.5em;
	font-size: 18px;
}

#menu-area p a {
	line-height: 70px;
	font-weight: bold;
	color:#FF0;
}


/* PC用メニュー */
.gnav-pc {
	width: 100%;
	position: relative;
	z-index: 60;
}

.gnav-pc ul {
	position: fixed;
	right: -100px;
	width: 84%;
	height: 70px;
}

.gnav-pc li {
	float: left;
	line-height: 70px;
	width: 13%;
	font-size: 15px;
	text-align: center;
}

.gnav-pc li a {
	display: block;
	color: #fff;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

.gnav-pc li a:hover {
	background:#67bca9;
}


/* スマホ用メニュー */
.gnav-sp {
	background: #000;
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 50;
	opacity: 0.8;
}

.gnav__wrap {
    width: 100%;
    height: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
    position: absolute;
}

.gnav__menu__item {
    margin: 40px 0;
	text-align: center;
}

.gnav__menu__item a {
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    transition: .5s;
}

.gnav__menu__item a:hover {
    color: #666;
}




/* Top
------------------------------------------------------------------------------*/
#top {
	margin-bottom: 150px;
}

.main {
	width: 100%;
	height: auto;
	/*background:url(../images/old_map.png) repeat 0 0;*/
	padding-bottom: 40px;
}

.main-ph{
	width:1200px;
	height:800px;
	background-image:url(../images/main.png);
	background-position:center top;
	background-repeat:no-repeat;
	margin:0 auto;
	position:relative;
}
.main-ph ul li{
	width:402px;
	height:388px;
}
.main-ph ul li.fukidashi01{
	position:absolute;
	top:2%;
	left:0;
}
.main-ph ul li.fukidashi02{
	position:absolute;
	bottom:0;
	left:0;
}
.main-ph ul li.fukidashi03{
	position:absolute;
	top:2%;
	right:0;
}
.main-ph ul li.fukidashi04{
	position:absolute;
	bottom:0;
	right:0;
}

.h-impact{
	width:100%;
	height:auto;
	margin-top:-50px;
}






@media screen and (max-width:1200px) {

	.main-ph{
		width:100%;
		height:100%;
		background-size: cover;
		padding-bottom:66%;
	}
	.main-ph ul li{
		width:35%;
		height:35%;
	}
	.main-ph ul li.fukidashi02{
		position:absolute;
		bottom:5%;
		left:0;
	}
	.main-ph ul li.fukidashi04{
		position:absolute;
		bottom:5%;
		right:0;
	}
	
	.h-impact{
		margin-top:0;
	}

}


.main p.h0{
	width:1200px;
	margin:20px auto 0 auto;
	padding:2% 3% 2% 3%;
	font-size:48px;
	text-align:center;
	text-shadow:2px 2px 3px #996;
	font-weight:bold;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	box-sizing:border-box;
	border:10px dashed #F60;
	border-radius:0.3em;
	background:url(../images/old_map.png) repeat 0 0;
	color:#222;
}


.main h1 {
	margin: 50px auto 0 auto;
	text-align: center;
	font-size:30px;
	width: 94%;
}

.black {
	background: #222;
	padding: 30px 0 30px 0;
}

.black p {
	color: #fff;
	text-align: center;
	font-size: 72px;
	font-weight: bold;
	line-height: 1.3em;
}

.sankaku img {
	margin: -25px auto 0 auto;
	width: 200px;
	height: 50px;
}




/* Look
------------------------------------------------------------------------------*/
#look {
    margin-top: -70px;
    padding-top: 70px;
}

.look01 {
	background: #e8f5c9;
	/*border-top: 7px double #67bca9;*/
}

.look01 .main-h2 img {
	width: 104px;
	height: 100px;
}

@media screen and (max-width:480px) {

	.look01 .main-h2 img {
		width:78px;
		height:75px;
	}

}

/* Give
------------------------------------------------------------------------------*/
#give {
    margin-top: -70px;
    padding-top: 70px;
}

.give01 {
	background: #e8f5c9;
	/*border-top :7px double #67bca9;*/
}

.give01 .main-h2 img {
	width: 108px;
	height: 100px;
}

.give03 h3 {
	text-align: center;
	color:#066;
	line-height: 1.5em;
}

@media screen and (max-width:480px) {

	.give01 .main-h2 img {
		width:81px;
		height:75px;
	}

}


/*リンク共通
-------------------------*/
.green_link a {
	background:#066;
	color: #fff;
}
.green_link a:hover {
	background:#67bca9;
}



/* Bad
------------------------------------------------------------------------------*/
#bad {
    margin-top: -70px;
    padding-top: 70px;
}

.bad01 {
	/*background: #f5c8e7;*/
	background: #e8f5c9;
	/*border-top: 7px double #ff679a;*/
	/*border-top :7px double #67bca9;*/
}

.bad01 .main-h2 img {
	width: 100px;
	height: 101px;
}

.bad03 h3 { 
	text-align: center;
	color:#066;
	line-height: 1.5em;
}

@media screen and (max-width:480px) {

	.bad01 .main-h2 img {
		width:75px;
		height:76px;
	}

}

/* Job
------------------------------------------------------------------------------*/
#job {
    margin-top: -70px;
    padding-top: 70px;
}

.job01 {
	/*background: #f6c8ca;*/
	background: #e8f5c9;
	/*border-top: 7px double #f66;*/
	/*border-top :7px double #67bca9;*/
}

.job01 .main-h2 img {
	width: 108px;
	height: 100px;
}

.job03 p {
	font-size: 18px;
}

.big-job {
	font-size: 36px;
	line-height: 1.5em;
	color:#066;
	font-weight:bold;
}

@media screen and (max-width:480px) {

	.job01 .main-h2 img {
		width:81px;
		height:75px;
	}

}


/* Fair
------------------------------------------------------------------------------*/
#fair {
    margin-top: -70px;
    padding-top: 70px;
}

.fair {
	/*background: #f5e8c8;*/
	background: #e8f5c9;
	/*border-top: 7px double #ff9a66;*/
	/*border-top :7px double #67bca9;*/
}

.fair .main-h2 img {
	width: 83px;
	height: 130px;
}

@media screen and (max-width:480px) {

	.fair .main-h2 img {
		width:58px;
		height:91px;
	}

}


/* Teach
------------------------------------------------------------------------------*/
.teach {
	background: #fff;
	/*border-top:20px solid #67bca9;*/
	padding-bottom: 50px;
	margin-top:20px;
}

.teach img {
	width: 1200px;
	margin: auto;
}


/* Service
------------------------------------------------------------------------------*/
#service {
    margin-top: -70px;
    padding-top: 70px;
}

.service {
	background:#67bca9;
	/*border-top: 7px double #f06;*/
}

.service .main-h2 img {
	width: 105px;
	height: 108px;
}

.big-service {
	font-size: 42px;
	color: #fff;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-align: center;
}

@media screen and (max-width:480px) {

.service .main-h2 img {
	width:84px;
	height:86px;
}

}


/* Entry
------------------------------------------------------------------------------*/
#entry {
    margin-top: -70px;
    padding-top: 70px;
	padding-bottom: 150px;
	width: 100%;
	background:url(../images/old_map.png) repeat 0 0;
}

.sankaku2 img {
	margin: 0 auto;
	width: 200px;
	height: 50px;
}




/* Damage-taiken Thanks-taiken 共通
------------------------------------------------------------------------------*/

.taiken h2{
	margin:0 auto 75px auto;
}

.taiken h3 {
	width: 1200px;
	max-width: 95%;
	padding: 20px 0 0 0 !important;
	margin: auto;
	font-size: 48px;
	font-weight: bold;
	line-height:1.8em;
	text-shadow: 2px 2px 3px #ccc;
	/*font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;*/
}

.taiken h3 span {
	padding: 15px;
	text-align: center;
	font-size: 18px;
	border-radius: 10em;
	text-shadow: none;
}

.taiken p {
	width: 1200px;
	max-width: 95%;
	padding: 50px 0 20px 0;
	margin: 0 auto;
	font-size: 18px;
	line-height: 2.5em;
	border-bottom: 1px solid #ccc;
}

.taiken p.first,.taiken p.last {
	border-bottom: 0;
}

.taiken p span {
	font-size: 18px;
	font-weight: bold;
}




/* Damage-taiken
------------------------------------------------------------------------------*/
#damage-taiken .text-contents{
	background:#f5f5f5;
	padding:100px 0 10% 0;
}


#damage-taiken .damage-h2{
	background: #333;
	color:#fff;
}

#damage-taiken h3 {
	color:#333;
}

#damage-taiken h3 span {
	background: #333;
	color: #fff;
}




/* Thanks-taiken
------------------------------------------------------------------------------*/
#thanks-taiken .text-contents{
	background:#ffffe0;
	padding:100px 0 10% 0;
}

#thanks-taiken .thanks-h2{
	background:#F60;
	color:#fff;
	font-weight: bold;
}

#thanks-taiken h3 {
	color: #c00;
}

#thanks-taiken h3 span {
	background:#F60;
	color: #fff;
}




/* フッター
------------------------------------------------------------------------------*/
footer {
	width: 100%;
	padding-top:7%;
	background:url(../images/old_map.png) repeat 0 0;
}

footer p.copy {
	width: 100%;
	padding: 15px 0 15px 0;
	text-align: center;
	font-size: 12px;
	background:#066;
	color: #fff;
}




/* トップに戻るボタン
------------------------------------------------------------------------------*/
#go-top {
	width: 100px;
	height: 115px;
	position: fixed;
	right: 1%;
	bottom: 1%;
	filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
}




/* 画面幅 1200px以下
----------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1200px) {
	
	/* 共通
	------------------------------------------------------------------------------*/
	/* main-contents */
	.main-contents {
		width: 94%;
	}
	
	.text-contents h3 {
		width: 94%;
	}
	
	.text-contents p {
		width: 94%;
	}
	
	.main-contents li.main-h2 {
		text-align: center;
		width: 94%;
		height:250px;
	}
	
	.main-contents li.main-h2 img {
		margin: -40px auto 0 auto !important;
		margin: auto;
	}

	.teach img {
		width: 94%;
	}
}




/* 画面幅 1200px以下
----------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1200px) {
	
	/* ヘッダー
	------------------------------------------------------------------------------*/
	.menu {
		width: 30px;
		height: 20px;
		position: absolute;
		right: 20px;
		top: 20px;
		z-index: 50;
	}
	
	.menu__line {
		background:#fff;
		display: block;
		height: 2px;
		position: absolute;
		transition: transform .3s;
		width: 100%;
	}
	
	.menu__line--center {
		top: 9px;
	}
	
	.menu__line--bottom {
		bottom: 0;
	}
	
	.menu__line--top.active {
		top: 8px;
		transform: rotate(45deg);
	}
	
	.menu__line--center.active {
		transform: scaleX(0);
	}
	
	.menu__line--bottom.active {
		bottom: 10px;
		transform: rotate(135deg);
	}
	
	.gnav-pc {
		display:none;
	}
	
	.sankaku2 img {
		margin: 0 auto 0 auto;
		width: 200px;
		height: 50px;
	}
	
	.main img {
		width:100%;
	}
	
	.main p.h0{
		width:94%;
		font-size:48px;
	}
	

	/* Service
	------------------------------------------------------------------------------*/
	.service {
		padding-bottom:100px;
	}

}




/* 画面幅 896px以下
----------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:896px) {
	
	/* 共通
	------------------------------------------------------------------------------*/
	
	.main p.h0{
		font-size:36px;
		border:7px dashed #F60;
	}
	
	.main h1 {
		margin: 30px auto 0 auto;
		font-size:24px;
	}
	
	.black p {
		font-size: 48px;
		width: 94%;
		margin: auto;
	}
	
	.counsel-navi {
		font-size: 48px;
	}
	
	.counsel-navi a {
		width:84%;
	}
	
	p.attention {
		width: 84%;
		font-size: 14px;
	}
	
	.main-contents li.main-img {
		float: none;
		width: 100%;
		height: auto;
	}
	
	.main-contents li.main-h2 {
		float: none;
		width: 90%;
		margin: auto;
	}
	
	.main-contents li.main-h2 h2 {
		font-size: 30px;
	}

	/* text-contents */
	.text-contents h3 {
		width: 94%;
		font-size: 30px !important;
	}

	.text-contents p {
		width: 94%;
		font-size: 14px !important;
	}
	
	.text-contents p strong {
		font-size: 14px;
	}
	
	.teach img {
		width: 100%;
	}

	
	/* Damage
	------------------------------------------------------------------------------*/
	.taiken h2 {
		width: 94%;
	}
	
	.taiken p {
		width: 94%;
		font-size: 16px;
	}
	
	.taiken p span {
		font-size: 16px;
	}
	
	.taiken h3 {
		width: 94%;
		line-height: 2em;
	}
	
	.taiken h3 span {
		padding: 10px;
	}
	

}



/* 画面幅 768px以下
----------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:768px) {

	.main p.h0{
		font-size:30px;
	}

}



/* 画面幅 480px以下
----------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px) {

	.gnav__wrap {
		padding-top: 40px;
	}
	
	li.gnav__menu__item {
		margin: 20px 0;
	}
	
	li.gnav__menu__item a {
		font-size: 24px;
	}

	#top {
		margin-bottom: 100px;
	}
	
	.black p {
		font-size: 36px;
	}
	
	.counsel-navi {
		font-size: 36px;
	}

	.block {
	  position: inherit;
	}
	
	.main p.h0{
		font-size:24px;
		border:5px dashed #F60;
	}
	
	.main h1 {
		font-size:18px;
	}
	
	.main-contents li.main-h2 {
		height:210px;
	}
	
	/* main-contents */
	.main-contents li.main-h2 h2 {
		font-size: 24px;
	}

	/* text-contents */
	.text-contents h2{
		font-size:30px !important;
	}
	
	.text-contents h3 {
		font-size: 24px !important;
		padding: 50px 0 100px 0;
	}
	
	.text-contents p {
		padding: 50px 0 100px 0;
	}
	
	.link a {
		font-size: 20px;
	}
	
	/* Service
	------------------------------------------------------------------------------*/
	.big-service {
		font-size:36px;
	}
	
	#entry {
		padding-bottom: 100px;
	}
	
	.sankaku2 img {
		margin: -75px auto 0 auto;
	}
	
	/* Damage
	------------------------------------------------------------------------------*/
	.taiken h2 {
		font-size: 24px !important;
	}
	
	.taiken p {
		font-size: 14px;
	}
	
	.taiken p span {
		font-size: 14px;
	}

	/* フッター
	------------------------------------------------------------------------------*/
	footer p.copy {
		font-size: 10px;
	}

	/* トップに戻るボタン
	------------------------------------------------------------------------------*/
	#go-top {
		width:70px;
	}
}




/* 画面幅 375px以下
----------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:375px) {

	/* Service
	------------------------------------------------------------------------------*/
	.big-service {
		font-size: 28px;
	}
}




/* アクションimg
------------------------------------------------------------------------------*/
li, p, h2, h3, img, div {
	transition: .8s;		
}

/*縮小・拡大表示*/
.list-mv01 {
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
}

.mv01 {
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}

/*透明→不透明*/
.list-mv02 {
	opacity: 0;
}

.mv02 {
	opacity: 1.0;
}

/*3D回転*/
.list-mv04 {
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
}

.mv04 {
	transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
}

/*ズームイン＆3D回転*/
.list-mv06 {
	transform: scale(0, 0) rotateY(180deg);
	-webkit-transform: scale(0, 0) rotateY(180deg);
}

.mv06 {
	transform: scale(1, 1) rotateY(360deg);
	-webkit-transform: scale(1, 1) rotateY(360deg);
}

/*フェードイン＋上移動*/
.list-mv07 {
	opacity: 0;
	transform: translate(0, 60px); 
	-webkit-transform: translate(0, 60px); 
}

.mv07 {
	opacity: 1.0;
	transform: translate(0, 0); 
	-webkit-transform: translate(0, 0);
}

.list-mv09{/*right画像*/
	opacity: 0;
	transform: translate(100%,0); 
	-webkit-transform: translate(100%,0); 
}
.mv09{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

@media screen and (max-width:1200px) {
	
.list-mv09{/*right画像*/
	opacity: 0;
	transform: translate(75%,0); 
	-webkit-transform: translate(75%,0); 
}
.mv09{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

}

@media screen and (max-width:800px) {
	
.list-mv09{/*right画像*/
	opacity: 0;
	transform: translate(50%,0); 
	-webkit-transform: translate(50%,0); 
}
.mv09{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}


}