@charset "UTF-8";
/* CSS Document */

header,
nav,
aside,
section,
footer,
figure,
figcaption {display:block;}

#scrlNum{
	position:fixed;
	left:0;
	top:0;
	width:0.3em;
	z-index:10;
	display:none;
}

.center{
	text-align: center;
}


.font.f01{
	font-family: 'Shippori Mincho', serif;
}

.cross::before{
	content:"[";
	margin-right:0.3em;
}
.cross:after{
	content:"]";
	margin-left:0.3em;
}

/*フォーム項目*/

input,
select,
button,
textarea {
	border:solid 1px #ccc;
	box-sizing:border-box;
	padding:5px 10px;
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 10px;   /* Firefox用 */
	background:#fff;
	-webkit-appearance: none;
	width:100%;
}

input[type="checkbox"]{
	width:20px;
	height:20px;
	padding:5px;
	border-radius: 5px;        /* CSS3草案 */  
	-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 5px;   /* Firefox用 */
	margin-right:5px;
	position:relative;
}
/*input[type="checkbox"].active::before*/
input[type="checkbox"]:checked::before{
	content:"";
	display:block;
	width:12px;
	height:12px;
	background:#ccc;
	position:absolute;
	left:3px;
	top:3px;
	border-radius: 3px;        /* CSS3草案 */  
	-webkit-border-radius: 3px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 3px;   /* Firefox用 */
}

input[type="radio"]{
	width:20px;
	height:20px;
	padding:5px;
	border-radius: 20px;        /* CSS3草案 */  
	-webkit-border-radius: 20px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 20px;   /* Firefox用 */
	margin-right:5px;
	position:relative;
}
/*input[type="radio"].active::before*/
input[type="radio"]:checked::before{
	content:"";
	display:block;
	width:12px;
	height:12px;
	background:#ccc;
	position:absolute;
	left:3px;
	top:3px;
	border-radius: 12px;        /* CSS3草案 */  
	-webkit-border-radius: 12px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 12px;   /* Firefox用 */
}

form .btmForm{
	padding-top:50px;
}
form .btmForm li{
	padding:10px 0;
}

input[type="button"],
input[type="reset"],
input[type="submit"],
button{
	cursor:pointer;
	border:none;
	background:#FF4343;
	color:#fff;
	height:35px;
	line-height:35px;
	border-radius: 35px;        /* CSS3草案 */  
	-webkit-border-radius: 35px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 35px;   /* Firefox用 */
	padding:0 10px;
}

/*使用不可の時の表示設定*/
input.useless {
	opacity:0.5;
	cursor:text;
	background-color:#eee;
}

.clear{
	clear:both;
}

.clearfix:after {
	display:block;
	clear:both;
	content:"";
	height:0;
	visibility:hidden;
}

img {
	max-width:100%;
	height:auto;
}

table {
	border-collapse:collapse;
}

table td .group, .frameTable dd .group{margin-bottom: 2.0em;}
table td .group:last-child, .frameTable dd .group:last-child{margin-bottom: 0;}


.frameTable dd .cutskill,
.frameTable dd .cutskill li{
	padding: 0;
	margin: 0;
}
.frameTable dd .cutskill{
	display: flex;
	flex-wrap: wrap;
}
.frameTable dd .cutskill li{
	width:50%;
	padding: 1.2em 1em;
}
.frameTable dd .cutskill li.line{
	width:100%;
}
.frameTable dd .cutskill.center li{
	text-align: center;
}
.frameTable dd .cutskill li:nth-child(2){
	border-left: solid 1px #000;
}
.frameTable dd .cutskill li span{
	position: relative;
	left:auto;
	top:auto;
}

body {
	-webkit-text-size-adjust: 100%;
	font-size:14px;
}

.wideFrame {
	width:auto;
	padding:0 10px;/**/
}

h2 {
	padding:8px 25px;
	color:#333;
	text-align:center;
	font-size:1.9em;
	font-weight:bold;
	margin-bottom:65px;
	font-family: 'Baloo Tammudu', cursive;
	position:relative;
}
h2:after {
	content:"";
	display:block;
	width:120px;
	height:5px;
	background:#c5d0eb;
	position:absolute;
	left:50%;
	bottom:0;
	margin-left:-60px;
}

h3{
	background: #e3e3e3;
    color: #6f6f6f;
    text-align: center;
    margin-bottom: 2.5em;
    padding: 0.6em 2em;
    font-size: 1.65em;
}

#wrapper {
	/*padding-top:45px;
	padding-bottom:80px;*/
}

/*リスト項目の表示*/

ul{
	padding:10px 0 10px 5px;
}
li {
	position:relative;
	padding:8px 0 8px 25px;
}
li span {
	position:absolute;
	left:0;
	top:8px;
}

a.btm {
	display:block;
	font-size:1.2em;
	font-size: 0.9em;
	text-align:center;
	padding:11px 10px;
	box-sizing:border-box;
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 10px;   /* Firefox用 */
}
a.btm.p01 {
	color:#fff;
	background:#434343;
}



/*その他*/

.markScroll {
	position:relative;
}
.markScroll::before,
.markScroll:after {
	content:"";
	display:block;
	right:10px;
	border-right:solid 5px transparent;
	border-left:solid 5px transparent;
	position:absolute;
}
.markScroll::before {
	top:5px;
	border-top:solid 5px transparent;
	border-bottom:solid 8px #ccc;
}
.markScroll:after {
	bottom:5px;
	border-top:solid 8px #ccc;
	border-bottom:solid 5px transparent;
}

li.markNew {
	padding-left:80px;
}

li.markNew::before {
	content:"new!";
	display:block;
	color:#fff;
	font-size:0.87em;
	background:#31BAB5;
	padding:0 8px;
	height:22px;
	line-height:22px;
	position:absolute;
	left:0;
	top:7px;
	order-radius: 22px;        /* CSS3草案 */  
	-webkit-border-radius: 22px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 22px;   /* Firefox用 */
}

@media screen and ( min-width:992px )
{

	#wrapper {
		/*padding-top:81px;*/
	}
	.wideFrame {
		width:992px;
		margin-left:auto;
		margin-right:auto;
		padding:0;
	}
	
}

@media screen and ( min-width:768px ){
	
	form .btmForm li{
		float:left;
		width:50%;
		padding:10px 10px;
		box-sizing:border-box;
	}
}


/*フィールド設定（.field）*/

.field{
	padding:2.0em 0.5em;
}

.field.f01{
	background:#ff8080;
	color:#fff;
}

.field.f02{
	background:#80fffbf5;
}

.field.f03{
	background:#7d7dff;
}

/*フレーム設定（.frame）*/
.frame{
	padding:1.5em 0.3em;
}

.frame.fr01{
	border:solid 1px #b2b2b2;
}

.frame.fr02{
	background:#e0efff;
	border-radius: 15px;        /* CSS3草案 */  
	-webkit-border-radius: 15px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 15px;   /* Firefox用 */
}
.frame.fr03{
	background: url(../../images/sample_0102.jpg) no-repeat center -220px;
	background-size: 100%;
	border:solid 2px #b2b2b2;
	box-shadow: 0 0 15px #00000033;
}

.frame.fr04{
	border:solid 1px #f00;
	color:#f00;
}





/**********************************************************************************************************************************************************************************************
#header(ヘッダー)
*************************************************************************************************************************************************************************************************/



#header{
	/*position: fixed;
	left:0;
	top:0;*/
	position: relative;
	width:100%;
	height:45px;
	height: 215px;
	/*background:#ffffffee;*/
	background:#3892ff url(css_img/bgHeader.jpg) no-repeat center center;
	background-size: cover;
	object-fit: cover;
	z-index: 15;
	/*margin-bottom: 3.5em;*/
}
#header::before{
	content:"";
	display: block;
	width: 100%;
	height:100%;
	left:0;
	top:0;
	opacity: 0.7;
	background-color: #333;
	mix-blend-mode: multiply;
	background-blend-mode: multiply;
}

#header #campanyName{
	position: absolute;
	left:15px;
	top:10px;
	width:130px;
}
#header #campanyName a{
	height:0;
	display: block;
	overflow: hidden;
	padding: 23% 0 0 0;
	background:url(css_img/officeName_kanri.svg) no-repeat center center;
	background-size: 100%;
}



#header h1{
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	/*font-size: 1.7em;*/
	font-size: 2.3em;
	color:#fff;
	width: 95%;
	text-align: center;
}

/*メニュー画面表示させるボタン設定*/
#header #btmMenuScr{
	display: none;/**/
	cursor:pointer;
	position: absolute;
	width:30px;
	height:15px;
	right:20px;
	top:50%;
	transform: translateY(-50%);
	margin:0;
	padding:0;
}
#header #btmMenuScr .tag{
	padding: 0;
	margin:0;
	position: absolute;
	width:100%;
	height: 2px;
	left:50%;
	top:0;
	transform: translateX(-50%);
	background:#666;
}
#header #btmMenuScr .tag:nth-child(2){
	top:auto;
	bottom:0;
}

#header #plist{
	position: absolute;
	width:100%;
	bottom:0;
	left:0;
	padding:0 0 0.2em 0.3em;
	color:#fff;
	font-size: 0.85em;
}
#header #plist a{
	color:#ade3ff;
}

/***************メニュー画面が開くとき***************/
@-webkit-keyframes btmOpenMenu01 {
	0% { top:0; transform: translateX(-50%); }
	50% { top:50%; transform: translate(-50%, -50%);}
	100% { top:50%; transform: translate(-50%, -50%) rotate( 30deg ); } 
}
@keyframes btmOpenMenu01 {
	0% { top:0; transform: translateX(-50%); }
	50% { top:50%; transform: translate(-50%, -50%);}
	100% { top:50%; transform: translate(-50%, -50%) rotate( 30deg ); } 
}
body.openMenu #header #btmMenuScr .tag{
	animation: btmOpenMenu01 0.5s ease 0s forwards alternate;
	-webkit-animation: btmOpenMenu01 0.5s ease 0s forwards alternate;
}

@-webkit-keyframes btmOpenMenu02 {
	0% { bottom:0; transform: translateX(-50%); }
	50% { bottom:50%; transform: translate(-50%, 50%);}
	100% { bottom:50%; transform: translate(-50%, 50%) rotate( -30deg ); } 
}
@keyframes btmOpenMenu02 {
	0% { bottom:0; transform: translateX(-50%); }
	50% { bottom:50%; transform: translate(-50%, 50%);}
	100% { bottom:50%; transform: translate(-50%, 50%) rotate( -30deg ); } 
}
body.openMenu #header #btmMenuScr .tag:nth-child(2){
	animation: btmOpenMenu02 0.5s ease 0s forwards alternate;
	-webkit-animation: btmOpenMenu02 0.5s ease 0s forwards alternate;
}



/***************メニュー画面を閉じるとき***************/

@-webkit-keyframes btmCloseMenu01 {
	0% { top:50%; transform: translate(-50%, -50%) rotate( 30deg ); }
	50% { top:50%; transform: translate(-50%, -50%);}
	100% { top:0; transform: translateX(-50%); }
}
@keyframes btmCloseMenu01 {
	0% { top:50%; transform: translate(-50%, -50%) rotate( 30deg ); }
	50% { top:50%; transform: translate(-50%, -50%);}
	100% { top:0; transform: translateX(-50%); }
}
body.hideMenu #header #btmMenuScr .tag{
	animation: btmCloseMenu01 0.5s ease 0s forwards alternate;
	-webkit-animation: btmCloseMenu01 0.5s ease 0s forwards alternate;
}


@-webkit-keyframes btmCloseMenu02 {
	0% { bottom:50%; transform: translate(-50%, 50%) rotate( -30deg ); }
	50% { bottom:50%; transform: translate(-50%, 50%);}
	100% { bottom:0; transform: translateX(-50%); }
}
@keyframes btmCloseMenu02 {
	0% { bottom:50%; transform: translate(-50%, 50%) rotate( -30deg ); }
	50% { bottom:50%; transform: translate(-50%, 50%);}
	100% { bottom:0; transform: translateX(-50%); }
}
body.hideMenu #header #btmMenuScr .tag:nth-child(2){
	animation: btmCloseMenu02 0.5s ease 0s forwards alternate;
	-webkit-animation: btmCloseMenu02 0.5s ease 0s forwards alternate;
}

@media screen and ( min-width:768px ){

	#header{
		height: 300px;
	}


	#header #btmMenuScr{
		width:55px;
		height:15px;
		right:20px;
	}


	#header #campanyName{
		left:25px;
		top:15px;
		width:180px;
	}


	#header #plist{
		left:0;
		padding:0 0 0.8em 1.3em;
		font-size: 1.0em;
	}

}



/**********************************************************************************************************************************************************************************************
.inPoint(アンカーポイントの付加)
*************************************************************************************************************************************************************************************************/


.inPoint{
	position: relative;
}

.inPoint .inPointTop{
	position: absolute;
	left:0;
	top:-45px; /*ヘッダーの高さに合わせて変更をかけてください。*/
}

@media screen and ( min-width:768px ){
	.inPoint .inPointTop{
		top:-81px; /*ヘッダーの高さに合わせて変更をかけてください。*/
	}
}


/**********************************************************************************************************************************************************************************************
#aNav(メニュー項目)
*************************************************************************************************************************************************************************************************/

#aNav{
	width:100%;
	height:100vh;
	height:-webkit-calc(100vh - 45px) ;
	height:calc(100vh - 45px) ;
	opacity:0;
	transform: translateX(100%);
	background:#000;
	color:#fff;
	position: fixed;
	left:0;
	bottom:0;
	transition-property:transform, opacity;
	transition-duration:0.3s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}

body.openMenu #aNav{
	opacity:1;
	transform: translateX(0);
}


@media screen and ( min-width:768px ){
	

	#aNav{
		height:100vh;
		height:-webkit-calc(100vh - 81px) ;
		height:calc(100vh - 81px) ;
	}
	
}

/**********************************************************************************************************************************************************************************************
#footer(フッター項目)
*************************************************************************************************************************************************************************************************/

#footer{
	background:#231815;
	color:#fff;
	padding:50px 0.8em;
	position: relative;
}

#footer #wordCopy{
	text-align: center;
}

#footer #scrTop{
	display: block;
	width:80px;
	height: 0;
	overflow: hidden;
	padding: 35px 0 0 0;
	background:#231815;
	position: absolute;
	right:5px;
	top:0;
	transform: translateY(-100%);
}

#footer #scrTop::before{
	content:"";
	width:50%;
	padding: 25% 0 0 0;
	background:url(css_img/cursorScrolltop.svg) no-repeat center center;
	background-size: 100%;
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
}

#footer .boxData{
	margin-bottom: 40px;
}

#footer .boxData .logo{
	text-align: center;
	margin-bottom: 60px;
}
#footer .boxData .logo img{
	width:110px;
	max-width: 100%;
}
#footer .boxData .sitename{
	color:#fff;
	font-size: 1.2em;
	font-weight: normal;
	padding: 0;
	margin-bottom: 20px;
	font-family:inherit;
}
#footer .boxData .sitename:after{
	display: none;
}

#footer .boxData .textdata .contact{
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 1.1em;
}
#footer .boxData .textdata .contact li{
	padding: 0.1em 0.2em;
}
#footer .boxData .textdata .contact li a{
	color:#fff;
	font-size: 1.3em;
}
#footer .boxData .textdata .contact li.tel{
	font-size: 1.45em;
}


@media screen and ( min-width:768px ){

	#footer{
		padding: 55px 40px 30px;
	}

	#footer .frameFtrset{
		display: flex;
		justify-content:space-between;
		align-items: flex-end;
	}

	#footer .boxData{
		display: flex;
		margin-bottom: 0;
	}

	#footer .boxData .logo {
		margin-bottom: 0;
		margin-right: 30px;
	}


}

/**********************************************************************************************************************************************************************************************
#contents(コンテンツ項目)
*************************************************************************************************************************************************************************************************/


#contents{
	/*padding-bottom: 3.5em;*/
	padding:3.5em 0 9.5em;
}

@media screen and ( min-width:768px ){

	#contents{
		/*padding-bottom: 3.5em;*/
		padding:10.5em 0;
	}

}


/**********************************************************************************************************************************************************************************************
.frameTable
*************************************************************************************************************************************************************************************************/

.frameTable dl,
.frameTable dt{
	border:solid 1px #000;
}

.frameTable dl{
	border-bottom: none;
}
.frameTable dl:last-child{
	border-bottom:solid 1px #000;
}
.frameTable dt{
	border-top:none;
	border-left: none;
	border-right: none;
	text-align: center;
	font-weight: bold;
}

.frameTable dt,
.frameTable dd{
	padding:1.2em 1.0em;
}
.frameTable dt{
	background-color:#58b0ff;
	color:#fff;
}
.frameTable dd{
	background-color:#fff;
}
.frameTable dd.press{
	padding: 0;
}


@media screen and ( min-width:768px ){

	.frameTable dl{
		display: flex;
		font-size: 1.1em;
	}

	.frameTable dt{
		width:210px;
		border-bottom: none;
		text-align: left;
	}

	.frameTable dt,
	.frameTable dd,
	.frameTable dd .cutskill li{
		padding:1.5em 2.0em;
	}


	.frameTable dd{
		width : -webkit-calc(100% - 210px) ;
   		width : calc(100% - 210px) ;
	}

}



/**********************************************************************************************************************************************************************************************
#phrase
*************************************************************************************************************************************************************************************************/

#phrase {
	padding-top: 2em;
    font-size: 1.68em;
    text-align: center;
	margin-bottom: 1.0em;
    color: #4d4d4d;
	font-weight: bold;
	text-shadow: 3px 3px 7px #0000002b;
    font-family: 'Shippori Mincho', serif;
}

#phrase .photo{
	margin-bottom: 1.2em;
}

#phrase p{
	font-weight: bold!important;/**/
	line-height: 1.9em;
}


@media screen and ( min-width:768px ){

	#phrase {
		padding-top:80px;
		font-size: 1.8em;
	}

	#phrase .inbox{
		display: flex;
		flex-wrap: wrap;
		position: relative;
	}

	#phrase .photo{
		width:500px;
		margin-bottom: 0;
	}
	#phrase p{
		position: absolute;
		text-align: left;
		width:500px;
		width : -webkit-calc(100% - 430px) ;
		width : calc(100% - 430px) ;
		right:0;
		bottom: -20px;
		background: #ffffffcc;
		box-shadow: 5px 5px 10px #00000033;
		padding: 20px 40px;
	}

}
/**********************************************************************************************************************************************************************************************
#areaActive
*************************************************************************************************************************************************************************************************/

#areaActive{
	display:none;
	padding-top:3.5em;
}
#areaActive .frame{
	padding: 0.95em 1.4em;
	line-height: 1.8em;
}
#areaActive .frame::before{
	content:"※ ";
}

@media screen and ( min-width:768px ){

	#areaActive{
		padding-top:100px;
		text-align: center;
	}
	#areaActive .frame{
		padding: 26px 64px;
		font-size: 1.18em;
	}

}