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

body{
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
}

#wrap {
	background-image: linear-gradient(0deg,transparent 31px,#ccc 32px),linear-gradient(90deg,transparent 31px,#ccc 32px);
	/* 透明を 31px まで続けて 32pxめに #ccc の色になる垂直のグラデーション */
	background-color: #eee;
	background-size: 32px 32px;
	/* ↑この模様は32px */
	min-height: 100vh;
	width: 100%;
	overflow: hidden;
}
/* 画像の最適化　*/
img {
	max-width: 100%;
	height: auto;
}
/* header */
#t-head {
	position: fixed;
	width: 100%;
	margin: 0 auto 0;
	line-height: 1;
	z-index: 1000;
	/*border: solid 1px #111;*/
}
#t-head:after {
	content: "";
}
#t-head a,
#t-head {
	color: #333;
	text-decoration: none;
}
#t-head .inner {
	position: relative;
	margin: auto 60px;
	overflow: visible;
	/*border: solid 1px #f0f;*/
}
#t-head .logo {
	float: left;
	width: 110px;
}
#t-head #gmane ul {
	list-style: none;
	position: absolute;
	left: 90px;
	top: 42%;
	width : 68%;
	/*border: solid 1px #00f;*/
}

#gmane ul li a:hover{
	background-color:rgba(221,85,0,0.1);
	color:#dd5500;
}

@media screen and (max-width: 1024px) {
/*ウィンドウ幅が指定px以下の場合に適用*/
#gmane ul {
	top: 16%;
	width : 60%;
}
}
#t-head #gmane ul li a{
	float: left;
	position: relative;
	top: 32%;
	left:80px;
	width:5em;
	text-align:center;
	margin-bottom:10px;
	padding: 0 30px;
	display:block;
	border-right:solid 1px #444;
}
#t-head #gmane ul li:first-of-type a{
	border-left:solid 1px #444;
}

.siteicon {
	position: absolute;
	top: 0;
	height: 168px;
	right: 0;
	margin-bottom: -60px;
}
/* transition */
#t-head,
#t-head:after,
#t-head .logo,
.siteicon,
#gmane ul li a {
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}


/*★狭まったとき Fixed */
#t-head.fixed {
	padding: 5px 0;
	background: rgba(255,255,255,.9);
	border-bottom: solid 1px #111;
}
#t-head.fixed .logo {
	width: 50px;
}
#t-head.fixed .siteicon {
	top: -30px;
	right: -60px;
}
#t-head.fixed:after {
	width: 100%;
	margin-top: 10px;
}
#t-head.fixed #gmane ul{
	left:0px;
}
#t-head.fixed #gmane ul li a {
	color: #333;
	padding: 0 20px;
	left: 80px;
	top: 26%;
}
/* /header */


p {
	line-height: 1.6em;
	margin-bottom: 0.5rem;
}
@media screen and (max-width: 1333px) {
#t-head.fixed{
min-height:3.8em;
}
#t-head.fixed .logo{
padding-top: 0.4em;
}
#t-head #gmane ul {
	top:12%;
}
}

@media screen and (max-width: 1024px) {
/*ウィンドウ幅が指定px以下の場合に適用　タブレット：1024px [max-width : 1024px]*/
#t-head .inner {
	margin: auto 30px;
}

.siteicon {
	right: -60px;
}
.content {
	margin: 107px 30px 0;
}
}

@media screen and (max-width: 930px) {
#t-head.fixed #gmane ul {
	top: 10%;
}

}






















@media screen and (max-width: 598px) {
/*ウィンドウ幅が指定px以下の場合に適用　スマートフォン：599px [max-width : 599px]*/

#t-head,
#t-head.fixed {
	padding: 5px 0;
	background: rgba(255,255,255,1);
	border-bottom: solid 1px #111;
}
#t-head.fixed #gmane ul,
#t-head #gmane ul,
#gmane ul,
#t-head ul{
width : 80%;
top: 10%;
left: 0px;
}
#t-head .logo,
#t-head.fixed .logo {
	width: 50px;
	height: 4.5em;
	padding-top: 1.8em;
}


#t-head #gmane ul li a,
#t-head.fixed #gmane ul li a {
	text-align:center;
	float:left;
	display: block;
	width: 48.5%;
	margin-bottom:5px;
	padding: 0;
}
#t-head #gmane ul li:nth-child(odd) a,
#t-head.fixed #gmane ul li:nth-child(odd) a {
	border-left:solid 1px #444;
}
#t-head.fixed:after {
	margin-top: 0px;
}


.siteicon {
	display: none;
}
#t-head .inner {
	margin-right: 15px;
	margin-left: 15px;
}
}










#topBtn {
	/*-----必須-----*/
	position: fixed;
	bottom: 10px;
	right: 10px;
	/*-----装飾-----*/
	width: 64px;
	height: 64px;
	line-height: 64px;
	text-align: center;
	background-color: #dd5500;
	color: #fff;
	border-radius: 50%;
	text-decoration:none;
}






.basewrap{
	margin:60px;
}
@media screen and (max-width: 598px) {
.basewrap{
	margin:60px 10px;
}

}
















a{
color:#dd5500;
text-decoration:underline;
}



/*-ttl タイトル----------------*/

.mainttl{
margin-top:100px;

display: flex;
flex-basis: 100%;/*子要素のベースとなる幅の指定*/
flex-wrap: wrap; /*子要素の折り返し*/
}
.mainttl div{
	text-align:center;
	width:45%;
	height:inherit;
	padding:10px 2.5%;
	background:#fff;
}


.mainttl div:nth-of-type(2) {
	display:block;
	color:#fff;
}

.mainttl div:nth-of-type(2)  span{
display: table;
	height:13em;
}

.mainttl div:nth-of-type(2)  span p{
 display: table-cell;
	vertical-align: middle;
}


@media screen and (max-width: 598px) {
.mainttl div{
	width:96%;
}
}

.conttl{ margin:3em auto 4em;}
.conttl span{
		color: #dd5500;
		display:block;
		font-size:2em;
		text-align:center;
		font-weight: bold;
	letter-spacing: 0.3em;
}

.conttl h2,
.conttl h3{
	text-align:center;
	font-size:0.9em;
}





/*--flexboxセット--*/
.container {
margin:0 auto 0;
width:80%;

/*flexbox*/
display: flex;
flex-wrap: wrap; /*子要素の折り返し*/
flex-basis: 100%;/*子要素のベースとなる幅の指定*/
align-self:stretch; /*子要素の垂直方向の揃え*/
}



@media screen and (max-width: 920px) {
.container {
width:96%;

/*flexbox*/
display: flex;
flex-basis: 100%;/*子要素のベースとなる幅の指定*/
align-self:stretch; /*子要素の垂直方向の揃え*/
justify-content: center ;/*子要素の中央ぞろえ*/
}

}



.btn {
		cursor: pointer;
		position: absolute;
		right: 0px;
		bottom: 0px;
}
.btn_arrow {
		display: block;
		width: 90px;
		height: 90px;
		overflow: hidden;
		transition: all 0.3s ease;
}
a:hover .btn_arrow {
		width: 130px;
		height: 130px;
}
.btn_arrow::before {
		background: #fff;
		border-radius: 50%;
		width: 100%;
		height: 100%;
		transform: translate(50%, 50%) scale(0.8);
		transform-origin: 50%;
		animation: services_btn-out 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.btn_arrow::after {
		color: #dd5500;
		border-top: 2px solid;
		border-right: 2px solid;
		width: 8px;
		height: 8px;
		transform: rotate(45deg);
		transition: all 0.3s ease;
		z-index: 1;
		right: 8px;
		bottom: 8px;
		position: absolute;
}

.btn_arrow::after,
.btn_arrow::before {
    content: "";
    display: block;
    cursor: pointer;
}






























footer{
	text-align:center;
	margin-top:60px;
	padding:80px 0 250px;
	background-color:#000;
	color:#fff;
}







/*----------------------*/
/*		　拡張子　アイコン　　　	 		*/
/*----------------------*/


a[target="_blank"]:after {
font-family: 'Font Awesome 5 Free';
content: '\f35d';
font-size: 0.9em;
margin: 0px 3px;
font-weight: 900;
}



a:hover{
	opacity: 0.9;
}

/*----------------------*/
/*		　文字　　　	 		*/
/*----------------------*/

.fmin{font-family: '游明朝','Yu Mincho',YuMincho,'Noto Serif CJK JP','Hiragino Mincho Pro',serif;}

.bold{ font-weight:bold;}
.normal{ font-weight:normal;}
.lighter{font-weight:lighter;}
.f80{ font-size:80%;}
.f90{ font-size:90%;}
.f120{ font-size:120%;}
.f130{ font-size:130%;}
.f140{ font-size:140%;}
.f150{ font-size:150%;}
.f160{ font-size:160%;}
.f200{ font-size:200%;}
.f230{ font-size:230%;}



.cl{ overflow:hidden;}
.fl{ float:left}
.fr{ float:right}
.pc{ display:inline-block;}
.smp{display:none;}

@media screen and (max-width:598px) {
.fl,
.fr{ float:none}

.pc{ display:none;}
.smp{display:inline-block;}
}


/*------------------------
文字色
-------------------------*/
.c_red{ color:#E40003;}
.c_orange{ color:#de7603;}
.c_lgreen{ color:#14ae00;}
.c_blue{ color: #1E50A2;}
.ind-1{text-indent: -1em; margin-left:1em;}

.bg_white{ background:#fff;}
.bg_red{ background:#b8292f;}
.bg_lpink{ background:#ffe0e1;}
.bg_lblue{ background:#ebf9fc;}
.bg_blue{ background:#1e51a4;}
.bg_orange{ background:#f08300;}
.bg_lorange{ background:#fcf1eb;}
.bg_gray{ background:#f4f4f4;}
.bg_yellow{ background:#ffffec;}
.bg_green{background-color: #6A8F3F;}
.bg_dpink{ background-color:#ff6970;}

/* common */

.cf:after {
  content: "";
  display: block;
  clear: both;
} 
.cf:before {
  content: "";
  display: block;
  clear: both;
} 
.cf {
  display: block;
}



/*----------------------*/
/*		　動画　　　	 		*/
/*----------------------*/

.wp-video {
text-align:center;
width:90% !important;
margin:auto;
}
.wp-video video{
width: 100%;
height:auto;
}

/*----------------------*/
/*		　幅　　　	 		*/
/*----------------------*/
.w100{ width:100%;}
.w48{ width:48%;}
@media screen and (max-width:598px) {
.w48{ width:100%;}
}
/*----------------------*/
/*		　位置　　　	 		*/
/*----------------------*/

.p00 {padding: 0px}
.p05 {padding: 5px;}
.p10 {padding: 10px;}
.p20 {padding: 20px;}
.p0510 {padding: 5px 10px;}

.pl05 {padding-left: 5px;}
.pl10 {padding-left: 10px;}
.pl20 {padding-left: 20px;}
.pl30 {padding-left: 30px;}

.pt05 {padding-top: 5px;}
.pt10 {padding-top: 10px;}
.pt20 {padding-top: 20px;}
.pt30 {padding-top: 30px;}

.pb05 {padding-bottom: 5px;}
.pb10 {padding-bottom: 10px;}
.pb20 {padding-bottom: 20px;}
.pb30 {padding-bottom: 30px;}

.m00 {margin:0px}
.m0auto{margin: 0px auto}
.mt00 {margin-top:0px;}
.mt05 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mt60 {margin-top:60px;}
.mt70 {margin-top:70px}
.mt100 {margin-top:100px}

.mb00 {margin-bottom:0px;}
.mb05 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb15 {margin-bottom:15px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mb40 {margin-bottom:40px;}
.mb60 {margin-bottom:60px;}
.mb100 {margin-bottom:100px;}

.ml05 {margin-left:5px;}
.ml10 {margin-left:10px;}
.ml15 {margin-left:15px;}
.ml20 {margin-left:20px;}
.ml30 {margin-left:30px;}
.ml35 {margin-left:35px;}
.ml40 {margin-left:40px;}

.mr05 {margin-right:5px;}
.mr10 {margin-right:10px;}
.mr15 {margin-right:15px;}
.mr20 {margin-right:20px;}
.mr30 {margin-right:30px;}
.mr40 {margin-right:40px;}

.va_b{vertical-align: bottom;}
.va_t{vertical-align: top;}
.va_m{vertical-align: middle;}

.ta_c{ text-align:center;}
.ta_l{ text-align:left !important;}
.ta_r{ text-align:right}