/************************************
** トップページ共通
************************************/

h3 {
	text-align:center !important;}

/************************************
** �@イントロダクション
************************************/

#intro {
 height:520px;
 background:#81CDE4;
 width:100%;
 padding:0;}

#intro .inner {
	width:950px;
	height:520px;
	margin:0 auto;
	position:relative;
	overflow:hidden;}

#intro .circle1 {
	position:absolute;
    top: 22%;
    left: 35%;
    transform: translate(-50%, -50%);
	animation: horizontal 0.9s ease-in-out infinite alternate;}

#intro .circle2 {
	position:absolute;
    top: 3%;
    left: 60%;
	animation: horizontal 1.1s ease-in-out infinite alternate;}

#intro .circle3 {
	position:absolute;
    top: 21%;
    left: 82%;
	animation: horizontal 1.3s ease-in-out infinite alternate;}

#intro .circle4 {
	position:absolute;
    top: -21%;
    left: 83%;
	animation: horizontal 1.5s ease-in-out infinite alternate;}

#intro .circle1 img {
	animation: vertical 0.9s ease-in-out infinite alternate;}

#intro .circle2 img {
	animation: vertical 1.1s ease-in-out infinite alternate;}

#intro .circle3 img {
	animation: vertical 1.3s ease-in-out infinite alternate;}
	
#intro .circle4 img {
	animation: vertical 1.5s ease-in-out infinite alternate;}

@keyframes horizontal {
    0% { transform:translateX( -2px); }
  100% { transform:translateX(  0px); }
}
@keyframes vertical {
    0% { transform:translateY(-5px); }
  100% { transform:translateY(  0px); }
}

#intro h1 {
	font-size:2.2em;
	color:#222;
	line-height:1.8em;
	text-align:left !important;
	position:absolute;
	bottom:30px;
	left:0;}

#intro h1:before {
	content:url(../image/shapes4.png);
	display:block;
	margin-left:5px;}

#svg_path {
	z-index:900;
	position:relative;
	margin:0 auto;}

/* 599px以下の場合 */
@media screen and (max-width: 599px) {

#intro {
	height:500px;
	width:100%;
padding:0;}

#intro .inner {
	width:100%;
	height:500px;}

#intro h1 {
	font-size:1.5em;
	line-height:1.5em;
	left:15px;
	bottom:20px;}

#svg_path {
	transform: scale(0.6,0.6);
	position:absolute;
	top:-90px;
	left:-310px;}

#intro img {
	zoom:0.6;}

@-moz-document url-prefix(){
 #intro img{
    transform-origin: 0 0;
    transform: scale(0.6);}
}

#intro .circle1 {
    top: 25%;
    left: 0;
    right: 0;
    margin: auto;}

#intro .circle2 {
    top: 9%;
    left: 60%;}

#intro .circle3 {
    top: 22%;
    left: 84s%;}

#intro .circle4 {
    top: 52%;
    left: 4%;}
}


/************************************
** �Aコンセプト
************************************/

#concept {
	}

#concept h2::before {
	content: 'OUR PURPOSE';}

#concept .h_line:before {
	content:url(../image/h1.png);
	display:block;
	margin-bottom:15px;}

#concept h3 {
	font-weight:500;}

#concept .inner {
	display:flex;
	align-items: center;
	justify-content:space-between;}

#concept .box {
	width:520px;
	background:#f7f5f2;
	border-radius:10px;
	padding:50px;}

#concept img {
	border-radius:10px;
	position:absolute;
	right:0;
	top: 0;
    bottom: 0;
    margin: auto;}

#concept .reverse img{
	left:0;} 

#concept .img_box {
	position:relative;
	z-index:5;
	width:450px;
	height:318px;}

#concept .decorate1 {
	background:url(../image/shape1_4.png) no-repeat center left;
	width:22px;
	height:22px;
	z-index:30;
	position:absolute;
	bottom:-5px;
	right:5px;}

#concept .decorate2 {
	background:url(../image/shape3_3.png) no-repeat center left;
	width:25px;
	height:25px;
	z-index:30;
	position:absolute;
	bottom:-35px;
	right:35px;}

#concept .decorate3 {
	background:url(../image/shape2_2.png) no-repeat center left;
	width:25px;
	height:25px;
	z-index:30;
	position:absolute;
	bottom:-10px;
	left:5px;}

#concept .decorate4 {
	background:url(../image/shape4_1.png) no-repeat center left;
	width:25px;
	height:25px;
	z-index:30;
	position:absolute;
	bottom:-35px;
	left:35px;}

#concept h3 {
	font-size:1.2em;
	line-height:2em;
	position:relative;
	margin-bottom:60px;}

#concept h3:after {
	content: '';
	display: inline-block;
	position: absolute;
	left: 50%;
	bottom: -30px; /* 下線の上下位置調整 */
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translate(-50%); /*位置の調整*/
	width: 90px;
	height: 2px;
	background-color: #A63FAA;}

#concept .m60 {
	margin-top:60px;
	flex-direction:row-reverse;}

/* 599px以下の場合 */
@media screen and (max-width: 599px) {

#concept .h_line:before {
	margin-bottom:0px;}

#concept h2 {
	font-size:1.6em;
	line-height:1.5em;}

#concept .inner {
	display:block;
	width:100%;}

#concept .box {
	width:100%;
	margin:0 auto;
	padding:0 30px;
	background:transparent;}

#concept .img_box {
	width:100%;
	height:auto}

#concept img {
	position:static;
	margin-top:30px;
	width:calc(100% - 60px);}

#concept h3 {
	width:100%;
	line-height:1.6em;}

#concept .inner p {
	width:100%;}

#concept .left60 {
	padding-left:0px;}
}


/************************************
** �Bサービスメニュー
************************************/

#service {
	background:#F7F5F2;}

#service h2::before {
	content: 'SERVICE MENU';}

#service .h_line:before {
	content:url(../image/h2.png);
	display:block;
	margin-bottom:15px;}

#service h3 {
	font-size:1.2em;
	line-height:2em;
	font-weight:500;
	position:relative;
	margin-bottom:60px;}

#service h3:after {
	content: '';
	display: inline-block;
	position: absolute;
	left: 50%;
	bottom: -30px; /* 下線の上下位置調整 */
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translate(-50%); /*位置の調整*/
	width: 90px;
	height: 2px;
	background-color: #00a0da;}

#service .menu{
	background:#00A0DA;
	max-width:950px;
	padding:30px;
	align-items: center;
	margin:60px auto 0 auto;
	border-radius:10px;
	display:flex;
	justify-content:space-between;
	position:relative;}

#service .menu_number {
	width:72px;
	height:72px;
	background:#fff;
	border-radius:50%;
	position:absolute;
	right:-15px;
	top:-15px;
	font-family: 'Belgrano', serif;
	color:#a8a8a8;
	display:flex;
	align-items:center;
	justify-content:center;
	font-style:italic;
	font-size:1.4em;}

#service .menu_img2 {
	position:relative;}

#service .menu_img2 img {
	border-radius:50%;
	width:380px;
	height:380px;}

#service .decorate1,
#service .decorate2 {
	position:absolute;
	width:25px;
	height:25px;
	background-repeat:no-repeat;}

#service .menu0 .decorate1 {
	background:url(../image/shape3_2.png);
	bottom:50px;
	right:20px;}

#service .menu0 .decorate2 {
	background:url(../image/shape4_4.png);
	bottom:20px;
	right:60px;}

#service .menu1 .decorate1 {
	background:url(../image/shape1_4.png);
	bottom:50px;
	left:20px;}

#service .menu1 .decorate2 {
	background:url(../image/shape2_3.png);
	bottom:20px;
	left:60px;}

#service .menu2 .decorate1 {
	background:url(../image/shape3_3.png);
	bottom:50px;
	right:20px;}

#service .menu2 .decorate2 {
	background:url(../image/shape4_2.png);
	bottom:20px;
	right:60px;}

#service .menu3 .decorate1 {
	background:url(../image/shape2_4.png);
	bottom:50px;
	left:20px;}

#service .menu3 .decorate2 {
	background:url(../image/shape3_3.png);
	bottom:20px;
	left:60px;}

.u-fade-type-up{
    transform: translateY(50px);
    opacity: 0;}

/* トリガー発火でis-activeを付与 */
.u-fade-type-up.is-active{
    transition: .6s;
    transform: translateY(0);
    opacity: 1;}

#service .menu_text {
	width:450px;}

#service h4 {
	margin-bottom:30px;
	font-size:1.4em;
	font-weight:500;
	line-height:1.5em;
	color:#fff;}

#service h4:before {
	display:block;
	font-size:0.7em;
	font-family: 'Belgrano', serif;}

#service .menu0 h4:before {
	content:"NEW SERVICE!";}

#service .menu1 h4:before {
	content:"SERVICE | 01";}

#service .menu2 h4:before {
	content:"SERVICE | 02";}

#service .menu3 h4:before {
	content:"SERVICE | 03";}

#service .description {
	background:#fff;
	border-radius:10px;
	padding:30px 30px  25px 30px;
	position:relative;}

#service .description p {
  line-height:1.8em;}

#service a {
	text-decoration:none;}

#service .link_text {
	color:#00a0da;
	margin-top:18px;
	font-weight:500;
	text-decoration:underline;}

#service .link_text:after {
	content:url(../image/arrow.png);
	vertical-align: middle;
	padding-left:5px;
	position:relative;
	bottom:3px;}

#service .link_circle {
	width:48px;
	height:48px;
	border-radius:50%;
	background:#dddddb;
	z-index:5;
	position:absolute;
	bottom:15px;
	right:15px;}

#service .link_circle img {
	position:absolute;
	left: 0;
    right: 0;
	top: 0;
    bottom: 0;
    margin: auto;}


/* 599px以下の場合 */
@media screen and (max-width: 599px) {

#service .h_line:before {
	margin-bottom:0px;}

#service h2 {
	font-size:1.6em;
	line-height:1.5em;}

#service h3 {
	line-height:1.6em;}

#service .lead {
	text-align:left;
	width:calc(100% - 30px);}

#service .lead br {
	display:none;}

#service .menu_number {
	width:70px;
	height:70px;
	position:absolute;
	left:25px;
	top:35px;
	z-index:99999;}

#service .menu_box {
	flex-direction: column;
	align-items: center;
	justify-content: center;}

#service .menu {
	margin-bottom:30px;
	width:100%;
	display:block;
	padding:15px;}

#service .menu:last-child {
	margin-bottom:0;}

#service .menu_img2 img {
	width:calc(100% - 30px);
	height:auto;
	margin:30px auto 15px auto;}

#service .description {
	padding:30px 20px  25px 30px;}

#service .menu_text {
	width:98%;
	margin:0 auto;}

#service .link_circle {
	bottom:-5px;
	right:-5px;}

#service .link_circle img {
	width:35%;
	height:auto;}
}

/************************************
** �Cごあいさつ
************************************/

#message h2::before {
	content: 'OUR VALUE';}

#message .h_line:before {
	content:url(../image/h3.png);
	display:block;
	margin-bottom:15px;}

#message .inner {
	display:flex;
	justify-content: space-between;
	align-items:center;}

#message .m60 {
	margin-top:60px;}

#message h3 {
	line-height:1.9em;
	width:400px;
	height:438px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:1.3em;
	font-weight:500;
	position:relative;}

#message .lead1,
#message .lead3{
	background:url(../image/window1.png) no-repeat center top;}

#message .lead2 {
	background:url(../image/window2.png) no-repeat center top;}

#message .decorate1 {
	background:url(../image/shape1_3.png) no-repeat center left;
	width:25px;
	height:25px;
	z-index:30;
	position:absolute;
	top:130px;
	right:-35px;}

#message .decorate2 {
	background:url(../image/shape2_4.png) no-repeat center left;
	width:25px;
	height:25px;
	z-index:30;
	position:absolute;
	top:160px;
	right:-5px;}

#message .decorate3 {
	background:url(../image/shape4_2.png) no-repeat center left;
	width:30px;
	height:30px;
	z-index:30;
	position:absolute;
	top:130px;
	left:-35px;}

#message .decorate4 {
	background:url(../image/shape3_1.png) no-repeat center left;
	width:30px;
	height:30px;
	z-index:30;
	position:absolute;
	top:160px;
	left:-5px;}

#message .decorate5 {
	background:url(../image/shape2_3.png) no-repeat center left;
	width:25px;
	height:25px;
	z-index:30;
	position:absolute;
	top:130px;
	right:-35px;}

#message .decorate6 {
	background:url(../image/shape4_4.png) no-repeat center left;
	width:25px;
	height:25px;
	z-index:30;
	position:absolute;
	top:160px;
	right:-5px;}

#message .message_text {
	width:calc(50% + 30px);
	background:#f7f5f2;
	border-radius:10px;
	padding:30px;}

#message .from {
	margin:60px auto;
	display:flex;
	justify-content: space-between;}

#message .image {
	text-align:center;
	flex-flow: column;
	display:flex;
	justify-content:center;
	width:400px;}

#message img {
	width: 300px;
	height: 300px;
	margin:0 auto;
	border-radius: 50%;
	object-fit: cover;
	display:block;}

#message .from p {
	width:calc(50% - 15px);
	line-height:1.8em;}

#message b,
#message small  {
	display:block;}

#message b {
	margin-bottom:15px;}

#message small {
	font-family: 'Belgrano', serif;
	display:block;
	margin-top:15px;}

#message .from p img {
	width:350px;
	height:auto;
	border-radius: 0%;
	object-fit: contain;
	margin:15px 0;}

#message .blog {
	margin-top:15px;
	font-weight:500;}

#message .from a {
	color:#00a0da;}

#message .from a:after {
	content:url(../image/arrow.png);
	padding-left:3px;}


/* 599px以下の場合 */
@media screen and (max-width: 599px) {

#message .h_line:before {
	margin-bottom:0px;}

#message h2 {
	font-size:1.6em;
	line-height:1.5em;}

#message h3 {
	width:calc(100% - 60px);
	margin:0 auto;
	background-size:contain;}

#message .lead1,
#message .lead3{
	background-size:100%;}

#message .lead2{
	background-size:100%;}

#message .inner {
	display:block;}

#message .message_text {
	width:100%;
	background:transparent;
	padding-top:0px;}

#message .image {
	width:100%;
	justify-content:center;}

#message .image img {
	width: 250px;
	height: 250px;
	margin:0 auto 30px auto;}

#message .from {
	margin:15px auto;}

#message .from p {
	width:100%;
	padding:0 30px;}

#message .from p b{
	text-align:center;
	margin-bottom:15px;
	line-height:1.5em;}

#message small {
	text-align:center;
	margin-top:0;
	margin-bottom:25px;
	position:relative;
	bottom:5px;}

#message .from p img {
	width:320px;
	height:auto;
	border-radius: 0%;
	object-fit: contain;
	margin:15px auto 0 auto;}

}

/************************************
** サ責メッセージ
************************************/

#message h2.p2::before {
	content: 'MESSEAGE FROM SUPERVISOR';}

#message .line2:before {
	content:url(../image/h2.png);
	display:block;
	margin-bottom:15px;}

#message .lead_m {
	background-color:#00a0da;
	border-radius:50%;
	width:400px;
	height:400px;
	color:#fff;}

#message .supervisor {
	width:950px;
	margin:30px auto;
	background:#fff;
	border-radius:10px;
	padding:15px 30px;
	display:flex;
	border:3px solid #00a0da;
	box-sizing: border-box;}

#message .name {
	width:400px;
	font-size:0.9em;
	font-weight:700;
	line-height:1.6em;
	display:flex;
	align-items:center;}

#message .name img {
	width: 180px;
	height: auto;
	border-radius: 0;
	display:block;
	margin-left:25px;
	object-fit: contain !important;}

#message .explain {
	line-height:1.9em;
	font-size:0.8em;
	padding-left:30px;
	width:calc(50% + 30px);}


/* 599px以下の場合 */
@media screen and (max-width: 599px) {

#message .lead_m {
	width:370px;
	height:370px;
	margin-bottom:30px;}

#message .supervisor {
	width:calc(100% - 60px);
	margin:30px auto;
	display:block;
	padding:30px 20px 30px 25px;}

#message .name {
	width:100%;
	display:block;
	text-align:center;}

#message .name img {
	margin:5px auto 15px auto;}

#message .explain {
	line-height:1.9em;
	font-size:0.8em;
	padding-left:0;
	width:100%;
	display:block;}

}

/************************************
** �Dロゴ
************************************/

#logo {
	background:#f7f5f2;}

#logo h2::before {
	content: 'OUR LOGO';}

#logo .h_line:before {
	content:url(../image/h4.png);
	display:block;
	margin-bottom:15px;}

#logo img.logo {
	width:350px;
	heigh:auto;
	display:block;
	margin:0 auto 60px auto;}

#logo .inner {
	display:flex;}

#logo .text {
	width:60%;
	padding-right:60px;}

#logo h3 {
	font-size:1.3em;
	position:relative;
	margin-bottom:60px;}

#logo h3:before {
	content:"message from the creator";
	font-family: 'Belgrano', serif;
	color:#999;
	display:block;
	font-size:0.7em;
	margin-bottom:10px;}

#logo h3:after {
	content: '';
	display: inline-block;
	position: absolute;
	left: 50%;
	bottom: -30px; /* 下線の上下位置調整 */
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translate(-50%); /*位置の調整*/
	width: 90px;
	height: 2px;
	background-color: #e3d100;}

#logo .author {
	width:40%;}

#logo .portrait img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	object-fit: cover;
	margin:0 auto 30px auto;}

#logo small {
	line-height:1.8em;}

#logo .author b {
	margin-bottom:15px;
	display:block;}

#logo .author a {
	margin-top:15px;
	font-weight:500;}

#logo .ri-external-link-line {
	position:relative;
	top:13px;
	margin-right:5px;
	font-size:1.2em;}

#logo .signature img {
	width:250px;
	height:auto;
	margin-top:30px;}

/* 599px以下の場合 */
@media screen and (max-width: 599px) {

#logo .h_line:before {
	margin-bottom:0px;}

#logo h2 {
	font-size:1.6em;
	line-height:1.5em;}

#logo h3 {
	line-height:1.6em;}

#logo h3:before {
	margin-bottom:0;}

#logo img.logo {
	width:300px;}

#logo .inner {
	display:block;}

#logo .text {
	width:100%;
	padding-right:0;
	padding:0 30px;}

#logo p {
	width:100%;
	padding-right:0px;}

#logo .author {
	width:100%;
	margin-top:30px;}

}


/************************************
** �E新着情報
************************************/

#news {}

#news h2::before {
	content: 'NEWS';}

#news .h_line:before {
	content:url(../image/h1.png);
	display:block;
	margin-bottom:15px;}

#news dl {
	width:60%;
	margin:30px auto;
	text-align:left;
	border-top:1px solid #999;
	border-bottom:1px solid #999;
	line-height:4em;}

#news dl div {
	display:flex;}

#news dt {
	width:20%;
	padding-left:30px;
	font-family: 'Belgrano', serif;}

#news dd {
	width:80%;
	padding-right:30px;}

/* 599px以下の場合 */
@media screen and (max-width: 599px) {

#news .h_line:before {
	margin-bottom:0px;}

#news h2 {
	font-size:1.6em;
	line-height:1.5em;}

#news dl {
	width:90%;
	line-height:1.5em;
	text-align:center;}

#news dl div {
	display:block;
	padding:10px 0;}

#news dt {
	width:100%;
	padding-left:0px;
	margin-bottom:15px;}

#news dd {
	width:100%;
	padding-right:0px;}
}


/************************************
** �F求人情報
************************************/

#recruit {
	background:#f7f5f2;}

#recruit h2::before {
	content: 'CAREERS';}

#recruit .h_line:before {
	content:url(../image/h2.png);
	display:block;
	margin-bottom:15px;}

#recruit h3 {
	font-weight:500;
	font-size:1.1em;
	line-height:2em;
	margin-bottom:45px;
	position:relative;}

#recruit h3:after {
	content: '';
	display: inline-block;
	position: absolute;
	left: 50%;
	bottom: -15px; /* 下線の上下位置調整 */
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translate(-50%); /*位置の調整*/
	width: 90px;
	height: 2px;
	background-color: #00a0da;}

#recruit dl {
	display: flex;
	flex-wrap: wrap;
	margin:60px auto 30px auto;
	width:35%;
	text-align:left;
	border-top:1px solid #999;
	border-bottom:1px solid #999;}

#recruit dt {
    width: 30%;
	font-weight:normal;
	padding:15px 0 0 15px;}

#recruit dd {
	width:70%;
	padding:15px 0;}

#recruit a {
	font-weight:500;
	color:#00a0da;}

#recruit a:after {
	content:url(../image/arrow.png);
	padding-left:3px;}

/* 599px以下の場合 */
@media screen and (max-width: 599px) {

#recruit .h_line:before {
	margin-bottom:0px;}

#recruit h2 {
	font-size:1.6em;
	line-height:1.5em;}

#recruit .lead {
	text-align:left;
	width:calc(100% - 30px);}

#recruit .lead br {
	display:none;}

#recruit dl {
	width:calc(100% - 60px);
	text-align:center;}

#recruit dt {
    width: 100%;
	padding:15px 0 0 0;}

#recruit dd {
	width:100%;
	padding:15px 0;}

}


/************************************
** �G会社概要
************************************/

#company {
}

#company h2::before {
	content: 'COMPANY INFORMATION';}

#company .h_line:before {
	content:url(../image/h3.png);
	display:block;
	margin-bottom:15px;}

#company .inner {
	display:flex;}

#company .text {
	width:50%;
	padding-right:60px;}

#company h2::before {
	content: 'COMPANY INFORMATION';}

#company h3 {
	font-weight:500;
	font-size:1.1em;
	line-height:2em;
	margin-bottom:45px;
	position:relative;}

#company h3:after {
	content: '';
	display: inline-block;
	position: absolute;
	left: 50%;
	bottom: -15px; /* 下線の上下位置調整 */
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translate(-50%); /*位置の調整*/
	width: 90px;
	height: 2px;
	background-color: #fe7900;}

#company dl {
	display: flex;
	flex-wrap: wrap;
	margin:0 auto;
	width:50%;
	text-align:left;
	border-top:1px solid #999;
	border-bottom:1px solid #999;}

#company dt {
    width: 45%;
	font-weight:normal;
	padding:15px 0 0 15px;}

#company dd {
	width:55%;
	padding:15px 0;}

#company dd a {
	color:#00a0da;}

/* 599px以下の場合 */
@media screen and (max-width: 599px) {

#company .h_line:before {
	margin-bottom:0px;}

#company h2 {
	font-size:1.6em;
	line-height:1.5em;}

#company h3 {
	line-height:1.6em;}

#company .inner {
	display:block;
	width:100%;}

#company .text {
	width:100%;
	padding:0 30px;
	margin-bottom:30px;}

#company dl {
	display:block;
	width:100%;
	text-align:center;
	width:calc(100% - 60px);}

#company dt {
	width:100%;
	padding:0 30px;}

#company dt:first-child {
	padding-top:30px;}

#company dd {
	width:100%;
	padding:5px 0 30px 0;}
}