@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
ADD:追加cssはここに記入。style.cssは使用しない
*/

/*cocooon設定--フォント--メイリオを'BIZ UDPGothic'に書き換えて使用*/
@font-face {/*normal*/	
	font-family: 'BIZ UDPGothic';
	src:url("https://garmand.co.jp/gmdcorporate/wp-content/themes/cocoon-child-master/custom/fonts/BIZUDPGothic-Regular.woff2") format('woff2'), url("https://garmand.co.jp/gmdcorporate/wp-content/themes/cocoon-child-master/custom/fonts/BIZUDPGothic-Regular.woff") format("woff");	
    font-weight:400;
    font-style: normal;
    font-display: swap;
 }
@font-face {/*bold*/	
	font-family:'BIZ UDPGothic';
	src:url("https://garmand.co.jp/gmdcorporate/wp-content/themes/cocoon-child-master/custom/fonts/BIZUDPGothic-Bold.woff2") format('woff2'), url("https://garmand.co.jp/gmdcorporate/wp-content/themes/cocoon-child-master/custom/fonts/BIZUDPGothic-Bold.woff") format("woff");	
    font-weight: 700;
    font-style: normal;
    font-display: swap;
 }
.ff-meiryo{	font-family: 'BIZ UDPGothic', sans-serif;}
bolderb, strong,boldstrong, b{font-weight:700;}

:root{
	/*
	 --bs-white
	--bs-secondary:#6c757d;
	--bs-dark-bg-subtle; border-color
	--cocoon-text-color:#010101;
	 */
	--color_blue:#00529f;
	--color_green:#00a199;
	--color_gray:#f0f2f5;
	--color_darkpink:#ed1c24;
	--color_pink:#e52d8a;
	--color_orange:#ec6d45;
	--color_sky:#9FF4F5;
	
	--fs_14:0.875rem;
	--fs_18:1.125rem;
	--fs_22:1.375rem;
	--header_h:80px;/*ヘッダーの高さ*/
	--header_h_sp:40px;
	--gnavi_h:60px;/*ヘッダーナビの高さ*/
	--mv_h: calc( 100vh );/*メインビジュアルの高さ*/
	--subpagetop_h:220px;/*サブページトップ*/
	--mobilemenu_size:80px;
	--content_w:1100px;/*コンテンツ幅を固定*/	

	--font_jp_name:'BIZ UDPGothic', sans-serif;
	--font_jp_maru_name:"Zen Kurenaido", sans-serif; /*w-400*/	
	--font_jp_min_name:"Shippori Mincho", serif; /*w-400*/
	--font_en_name:"Poppins", sans-serif; /*w-500*/
	--font_num_name:'Prompt', sans-serif;
	--font_fa_name:"Font Awesome 6 Free";
	--fluid_max_w:2500px;
	
	--border_round:30px;/*基本のborder-radius*/
	/*--timeline_left:4rem;/*timelineの位置*/
	/*--timeline_top:0.65rem;*/
}

body{
	font-family: var(--font_jp_name), sans-serif;
	letter-spacing:0.04em;
}
a{transition: all .3s;}
.breadcrumb-item+.breadcrumb-item::before{display: none;}/*bootstrap設定を消す*/
/*img fit*/
.img_fit > img{
  width: auto;
  height: auto;
}

/*cocoon設定の初期化*/
article a:hover{ color:#2f7fd3;}
a:hover {text-decoration:none;}
.article dd{margin:0;}

/*ulのスタイルを解除するには .ul_unstyledを使用する。使用できない場合はこちらに記述*/
ul.ul_unstyled,ul.menu, ul.sub-menu {list-style-type: none;padding: 0;}
ul.ul_unstyled li,ul.menu > li,ul.sub-menu > li{margin: 0;}

/*ページ内リンクのヘッダー高さの対応（テスト中:scroll-padding-topが使えないため）*/
[id]:target {scroll-behavior: smooth;scroll-margin-top:80px;}/*ページ内リンクrootが使用できない*/

/*fluid-maxwide*/
.container-fluid.fluid-maxwide{max-width:var(--fluid_max_w);} /*container-fluidに.fluid-maxwideを追加することでmax値を設定*/

/*loading---------------------------------*/
/*枠組み*/
.loader-wrap {
	z-index: 99999;
	position: fixed;
	display: flex;
	flex-direction:column;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height:100vh;
	 background-color: var(--color_blue);

background: linear-gradient(
	135deg,
	#003366 0%,
	#00529f 50%,
	#00a199 100%
);
	color:var(--bs-white);
	overflow: hidden!important;
	padding:0 1.5rem;
}

#draw_logo{
	width:350px;
	height:125px;
	flex:0 0 auto;
}
#loading_logo{
	width: 100%;
	height: 100%;
	display: block;
}
#draw_logo path {
	fill: none;
	stroke: var(--bs-white);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 9px;

	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;

	animation: drawLogo 1.4s linear forwards;
	animation-delay: 1s;
}
@keyframes drawLogo {
	to {
		stroke-dashoffset: 0;
	}
}

/*mainview---------------------------------*/
#main_catch{
	top:calc(var(--header_h) + 10%);
	left:1rem;
	width:calc(100% - 2rem);
	height:auto;
	max-width:500px;
	
	 opacity: 0;
	  transform: translateY(24px);
	  filter: blur(6px);
	  will-change: transform, opacity, filter;
}
#main_catch.show{ /*jsでタイミング操作*/
  animation: catchFadeUp .7s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes catchFadeUp{
  0%{
    opacity: 0;
    transform: translateY(24px);
    filter: blur(6px);
  }
  60%{
    opacity: 1;
    transform: translateY(4px);
    filter: blur(1.5px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}


/*illust animation: dotted*/
.bg-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.blob-svg {
  position: absolute;
  aspect-ratio: 1 / 1;
}
.blob-svg svg {
  display: block;
  width: 100%;
  height: 100%;
}

#blob-blue_m{bottom:0; left:0; width:600px;}
#blob-green_m{top:var(--header_h); right:0; width:600px;}
#blob-pink1{bottom:-100px; left:0; width:600px;}
#blob-yellow1{top:-100px; right:0; width:600px;}
.illust_dotted_blue,.illust_dotted_green,.illust_dotted_pink,.illust_dotted_yellow{opacity:0.3;}
#home_services .illust_dotted_blue,.illust_dotted_green,.illust_dotted_pink,.illust_dotted_yellow{opacity:0.5;}
#subpage_title .illust_dotted_blue,.illust_dotted_green,.illust_dotted_pink,.illust_dotted_yellow{opacity:0.7;}

/*illust animation: drop*/
#drop-pink_m{
display:block;
width:300px;
height:auto;
top:30%;
left:0;
  opacity: 0;
  transform:  translate(-150px, -150px) scale(0.5);
}
#drop-pink_m.show {/*jsでタイミング操作*/
  animation: dropIn-pink_m 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes dropIn-pink_m {
  0% {
    opacity: 0;
    transform: translate(-150px, -150px) scale(0.5);
  }

  60% {
    opacity: 0.6;
    transform: translate(10px, 10px) scale(1.05);
  }

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

#drop-yellow_m{
display:block;
width:250px;
height:auto;
top:60%;
right:0;
  opacity: 0;
transform: translate(150px, -150px) scale(0.5);
}
#drop-yellow_m.show {/*jsでタイミング操作*/
  animation: dropIn-yellow_m 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes dropIn-yellow_m{
  0% {
    opacity: 0;
    transform:  translate(150px, -150px) scale(0.5);
  }

  60% {
    opacity: 0.6;
    transform: translate(-10px, 10px) scale(1.05);
  }

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

/*illust animation: drop ここからmain以外のdrop;home_about, subpage_title*/
#drop-green1{
display:block;
width:200px;
height:auto;
bottom:-100px;
left:5%;
  opacity: 0;
	z-index:1;
 transform: translate(-150px, 150px) scale(0.5);
}
#drop-green1.is-show {
  animation: dropIn-green1 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 0.4s!important;
}
#subpage_title #drop-green1{bottom:4%;width:150px;}
#subpage_title #drop-green1.is-show{animation-delay: 1s!important;}
@keyframes dropIn-green1 {
  0% {
    opacity: 0;
    transform: translate(150px, -150px) scale(0.5);
  }

  60% {
    opacity: 0.6;
    transform:  translate(-10px, 10px) scale(1.05);
  }

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

#drop-blue1{
display:block;
width:300px;
height:auto;
top:10%;
right:4%;
  opacity: 0;
 transform:  translate(-150px, 150px) scale(0.5);
}
#drop-blue1.is-show {
  animation: dropIn-blue1 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
	animation-delay: 0.2s!important;
}
#subpage_title #drop-blue1{width:200px;}
#subpage_title #drop-blue1.is-show{animation-delay: 0.6s!important;}
@keyframes dropIn-blue1 {
  0% {
    opacity: 0;
    transform:  translate(-150px, 150px) scale(0.5);
  }

  60% {
    opacity: 0.6;
    transform: translate(10px, -10px) scale(1.05);
  }

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

#drop-yellow1{
display:block;
width:250px;
height:auto;
bottom:-100px;
left:10%;
  opacity: 0;
  transform: translate(-300px, -300px) scale(0.5) scaleX(-1);
	animation-delay:1s!important;
}
#drop-yellow1.is-show {
	animation: dropIn-yellow1 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
#subpage_title #drop-yellow1{width:200px;bottom:auto;top:2%;}
#subpage_title #drop-yellow1.is-show{animation-delay: 0.2s!important;}
@keyframes dropIn-yellow1 {
  0% {
    opacity: 0;
    transform: translate(-300px, -300px) scale(0.5) scaleX(-1);
  }

  60% {
    opacity: 0.6;
    transform:  translate(10px, 10px) scale(1.05) scaleX(-1);
  }

  100% {
    opacity: 1;
    transform:  translate(0, 0) scale(1) scaleX(-1);
  }
}
#drop-pink1{
display:block;
width:300px;
height:auto;
top:-50px;
right:0;
  opacity: 0;
  transform: translate(-300px, 300px) scale(0.5) scaleY(-1);
	animation-delay:0.5s!important;
}
#drop-pink1.is-show {
	 animation: dropIn-pink1 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
#subpage_title #drop-pink1{width:270px;bottom:0;top:auto;right:5%;}
#subpage_title #drop-pink1.is-show{animation-delay: 0.4s!important;}
@keyframes dropIn-pink1 {
  0% {
    opacity: 0;
    transform:  translate(-300px, 300px) scale(0.5) scaleY(-1);
  }

  60% {
    opacity: 0.6;
    transform: translate(10px, -10px) scale(1.05) scaleY(-1);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) scaleY(-1);
  }
}

/*header---------------------------------*/
.header-container{
	position: fixed!important; 
	top: 0px; left: 0px; width: 100%!important;
	z-index:99;
	height:var(--header_h);
	transition: all 0.3s;
	background-color: transparent;
}
.header-container > .wrap{width:100%;}
.header-container.scroll-nav{ top :-100px;}
.header-container-in.hlt-top-menu .navi{
	margin-right:calc(var(--mobilemenu_size) );
	background-color: transparent!important;
	flex-grow: 1
}

/*logo*/
.header-container-in.hlt-top-menu .logo-header img,.header-container-in.hlt-top-menu .logo-header {transition: 0.2s;}
.header-container-in.hlt-top-menu .logo-header{max-height:var(--header_h);}
/*.header{ flex-shrink: 1;}*/
.logo {text-align:left;}
.site-name-text-link{padding:0 0 0 10px!important;}

/*globalmenu*/
#navi .navi-in>ul>li>a {padding: 0 1.25rem; display:flex; align-items:center;}
#navi .navi-in a{
	cursor:pointer;
	font-size:1rem;
	font-family: var(--font_jp_name); 
	-webkit-font-smoothing: antialiased;
	transform: rotate(0.03deg);
	font-weight:700!important;
}
#navi .navi-in a:hover{background-color:var(--color_darkgray);}
.navi-in > ul li{
	height: var(--header_h);
	transition: all 0.3s;
	color:var(--bs-white);
}
/*子メニュー*/
#navi .navi-in > ul .sub-menu {
	background-color:transparent !important;
}
#navi .navi-in  .sub-menu > li{
	height: 60px;
	line-height: 1;
    padding:0;
	margin:0 0 2px 0;
}
#navi .navi-in  .sub-menu > li > a{ 
	display: flex;
    align-items: center;
    line-height: 1;
    text-decoration: none;
    color: var(--bs-white);
    border-radius: 100vh;
    padding: 0.25rem 1.25rem;
    position: relative;
    transition: 0.3s;
    background-color: var(--color_blue);
    background-image: linear-gradient(90deg, var(--color_green) 0%, var(--color_blue) 50%, var(--color_green) 100%);
    background-size: 200% 100%;
    background-position: left;
	border:1px solid var(--color_sky);
}
#navi .navi-in  .sub-menu > li > a:hover{
	background-position:right;
	color:var(--bs-white);
} 
#navi .navi-in  .sub-menu > li >a::after {
    font-family: var(--font_fa_name);
    content: '\f061';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
	font-size:0.75em;
}

/*mobilemenu:モバイル表示*/
.mobile-menu-buttons{
	display:none;
	justify-content:center;
	top:6px!important;
	bottom:auto;
	right:6px;
    left:auto;
	background-color:transparent;
	box-shadow:none;
	z-index:100;
}
.mobile-menu-buttons .menu-button{
	width:var(--mobilemenu_size);
	height:var(--mobilemenu_size);
}
.menu-button-in{
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background-color:var(--color_blue);
		background-image:linear-gradient(
			90deg,
			var(--color_green) 0%,
			var(--color_blue) 50%,
			var(--color_green) 100%
		);
	background-size:200% 100%;
	background-position:left;
	transition: 0.3s;
}
.mobile-menu-buttons .menu-button:hover .menu-button-in{
 	opacity:1!important;
	background-position:right;
}
.sidebar-menu-button .menu-icon{
	display:none;
}
.sidebar-menu-caption.menu-caption {
  position: relative;
  font-size: 0; 
  display: inline-block;
  width: 70%;
  height: 21px;
}
.sidebar-menu-caption.menu-caption::before,
.sidebar-menu-caption.menu-caption::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--bs-white);
}
.sidebar-menu-caption.menu-caption::before {top: 0;}
.sidebar-menu-caption.menu-caption::after {bottom: 0;}

/* 真ん中の線 */
.sidebar-menu-caption.menu-caption span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--bs-white);
  transform: translateY(-50%);
}

.navi-menu-content{/*右からスライドに変更*/
	left: auto;
	right: 0;
	transform: translateX(101%);
	background-color:rgba(32,33,33,0.9);
	padding:0;
    margin:0;
}
.menu-content .menu-drawer{padding-top:30px;}
.menu-close-button{color:var(--bs-white);text-align:right;padding:0 10px;}
.fa-times:before{content:'\f00d';}
/*mobile sidebar*/
.menu-content,.sidebar{background-color:var(--color_blue);color:var(--bs-white);}
#slide-in-sidebar{padding: 0 1rem ;}
#slide_sitemap a{
	color:var(--bs-white);
    padding:0.4rem 0!important;
	display:flex;
	align-items:center;
}

.widget-sidebar { margin-bottom:2rem!important;}

.slide_menu ul.menu > li{ /*親メニュー*/
	border-top:1px solid var(--color_green);
	padding :0.5rem 0;
}
.slide_menu ul.sub-menu > li{ /*子メニュー*/
    padding-left:1rem; 
	position:relative;
    line-height: 1.8;
	font-size:var(--fs_14);
}
.slide_menu ul.sub-menu > li:before {
 	content:'\30FB';
    color: var(--color_sky);
    position: absolute;
    left: 0;
	top:50%;
	transform: translateY(-50%);
}
.slide_menu a:hover{background-color:rgba(255,255,255,0.1);}
#slide_sitemap .slide_menu_contact  a{
	border:2px solid var(--bs-white);
	padding: 0.25rem 1.25rem!important;
}
.slide_menu_other a{justify-content:center;}

/*footer---------------------------------*/
/*コピーライトエリア*/
.footer,.footer-bottom{ margin-top:0;}
.copyright{font-family:var(--font_en_name);}
/*コンテンツ下部エリア*/
#footer_logo > img{width:100%; max-width:500px;}

/*content-bottomの幅を100%に変更*/
#content-bottom-in.wrap{width:100%;}
.content-bottom{margin:0;}
.widget.widget-content-bottom,.content-bottom{margin-bottom:0;!important}

/*footermenu*/
ul[id^="menu-footer-menu"]{
	margin-bottom:0;
	line-height: 1;
}
ul[id^="menu-footer-menu"] a{
	color:var(--cocoon-text-color);
	padding: 0.65rem 0;
	display:inline-block;
}
ul[id^="menu-footer-menu"] > li > a { font-weight:700;}
ul[id^="menu-footer-menu"] ul.sub-menu{margin-left:0.5rem;}
ul[id^="menu-footer-menu"] ul.sub-menu > li {
    padding-left:1em; 
	position:relative;
	font-size:var(--fs_14);
}
ul[id^="menu-footer-menu"] ul.sub-menu > li::before {
 	 content:'\30FB'; 
    color:var(--color_darkpink);
    position: absolute;
    left: 0;
	top:50%;
	    transform: translateY(-50%);
}
ul[id^="menu-footer-menu"] ul.sub-menu > li.no_mark::before {content:none;}
ul.ul_sns img{
	width:auto;
	height:50px;
}

/*固定+トップ共通*/
.article h2,.article h3,.article h4,.article h5{
	background-color:transparent;
	margin-bottom:0;
	padding:0;
	margin-block-start: 0;
    margin-block-end:0;
	border:none;
	color:var(--cocoon-text-color);
	/*font-weight:600;*/
}
.entry-content{margin:0!important;}
/*固定ページテンプレート:body:not(.home)-----------------------*/
.page .date-tags {display: none;}
.content{margin-top:0;}
.main{padding: 0;}


/*固定ページヘッダー部：body.home ,body.add-parentid-jobs--------------------------*/
body.home .main,body.add-parentid-jobs .main{padding-top:0;}
body.home .entry-title,body.add-parentid-jobs .entry-title{display:none;}
body.home .entry-content,.body .article,.entry-content >*, body.jobs .entry-content,body.add-parentid-jobs .entry-content,body.add-parentid-guidelines .entry-content{margin-bottom:0;}

/*subpage下層ページ---------------------------------*/
.breadcrumb{padding:1rem!important;margin:0!important;}
.breadcrumb, .breadcrumb a{color :var(--cocoon-text-color);font-size:var(--fs_14);}
/*パン屑エリアをgrayにしたい場合はここに記述*/
body.sustainability .breadcrumb,body.history .breadcrumb,body.system-development .breadcrumb,body.messages .breadcrumb,body.job-graduate .breadcrumb,body.job-midcareer .breadcrumb,body.web-development .breadcrumb{background-color:var(--color_gray)!important;}
body.sustainability .widget-content-bottom,body.history .widget-content-bottom,body.system-development .widget-content-bottom,body.messages .widget-content-bottom,body.job-graduate .widget-content-bottom,body.job-midcareer .widget-content-bottom,body.web-development .widget-content-bottom{background-color:var(--color_gray)!important;}


/*下層固定ページ共通 */
/*固定ページヘッダー*/
#subpage_title{
	min-height:var(--subpagetop_h);
	padding-top:calc(var(--header_h) + var(--subpagetop_h) / 2.5);
}
#subpage_title h1{letter-spacing:0.125rem;line-height:1.2;}
#subpage_title .title_anime{letter-spacing:-0.1rem;}


/*投稿ページ共通 投稿ページはページタイプを1カラム狭いに強制*/
.page:not(.column-full-wide) .content-in,.single.single-format-standard .content-in,.archive .content-in{max-width:var(--content_w);padding:0 16px;}
/*タイトル非表示*/
body.single  .entry-header h1{display:none;}

/*subpage nav ：下部下層メニュー*/
#subpage_nav{border-radius:60px 60px 0 0 ;}
#subpage_nav h2{border-bottom: 1px solid var(--color_green)!important;}

#subpage_nav ul.menu > li{ /*親メニュー*/
	padding-left:1rem; 
	position:relative;
    line-height: 1.8;
}
#subpage_nav ul.menu > li:before {
	 content:'\30FB'; 
    color: var(--color_sky);
    position: absolute;
    left: 0;
    top:50%;
	 transform: translateY(-50%);
}
#subpage_nav ul.menu > li a{color:var(--bs-white);padding:0.25rem 0;display:block;}
#subpage_nav ul.menu > li a:hover{
	background-color:rgba(255, 255, 255, 0.1);
}
#subpage_nav ul.menu li.active > a {
  color:var(--color_sky);
}
/*toc_navi ：コンテンツ目次*/
ul.ul_toc > li > a{
line-height:1.4;
padding:0.75rem 2rem 0.75rem 0.5rem ;
color:var(--cocoon-text-color);
display:block;
border-bottom:1px solid var(--color_blue);
position:relative;
}
ul.ul_toc > li > a::before{
font-family: var(--font_fa_name);
    content: '\f111';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    color:var(--color_blue);
    font-size:2rem;
}
ul.ul_toc > li > a::after{
font-family: var(--font_fa_name);
    content: '\f063';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 1.3rem;
    transform: translateY(-50%);
     color:var(--bs-white);
    font-size:0.5rem;
	 transition: transform 0.3s ease;
}
ul.ul_toc > li > a:hover{box-shadow: inset 0 -2px 0 var(--color_blue);}

/*サブページ-----------------------------------*/
/*沿革*/
.timeline li{
    position: relative;
	list-style: none;
	padding:14px 0;
	margin:0!important;
}
.timeline dl{
	margin:0 0 0 2rem;
	line-height: 1.4;
}
.timeline dl dt{
	padding:0;
	font-weight: 700;
	color:var(--color_blue);
	font-family: var(--font_num_name);font-weight:500!important;
	font-size:1.25rem;
	width:6em;
	flex-shrink: 0;
}
.timeline dl dd{flex: 1;}
.border-line {
	position: absolute;
	left:1px;
	top:1.25rem;
	width:6px;
	height:0;
	background:var(--bs-white);
}
.timeline li::after{
	content:'';
	position: absolute;
	top:50%;
	  transform: translateY(-50%);
	left:0;
	width:8px;
	height:8px;
	border: 1px solid  var(--color_blue);
	background: var(--color_blue);
	border-radius: 50%;
}

/*システム開発：一覧*/
.system_card a{color:var(--cocoon-text-color);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); border-radius:16px;}
.system_card{transition: box-shadow 0.3s ease, transform 0.3s ease;}
.system_card:hover {box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);}
.system_card a:hover{color:var(--cocoon-text-color);}
.system_card_thumb {
	width: 100%;
	height: 250px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background:var(--bs-white);
	border-radius:16px 16px 0 0 ;
}

.system_card_thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.system_card_tags li ,.tag-link{
	display: inline-block;
	padding: 4px 14px;
	border: 2px solid var(--color_darkpink);
	color: var(--color_darkpink);
	border-radius:100vh;
	line-height: 1.4;
	margin-right:2px;
	margin-bottom:2px;
}
.tag-link:hover{border: 2px solid var(--color_darkpink);color: var(--color_darkpink);background-color:var(--bs-white);}

/*一覧ページネーション*/
.Pagination {
  display: flex;
  align-items: center;
	justify-content: center;
}
.Pagination-Item-Link {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 45px;
  height: 45px;
  background: #fff;
  border: solid 2px var(--color_blue)!important;
  color: var(--color_blue);
  transition: all 0.15s linear;
}
.Pagination-Item-Link-Icon {
  width: 20px;
}
.Pagination-Item-Link.isActive {
  background: var(--color_blue);
  color:var(--bs-white);
  pointer-events: none;
}
.Pagination-Item-Link:not(.isActive):hover {
  background: var(--color_blue);
  color: var(--bs-white);
}
.Pagination > * + * {
  margin-left: 12px;
}

/*お問い合わせフォーム*******************************/
/*reCAPTCHAボタン非表示*/
.grecaptcha-badge { visibility: hidden; }

/*snow monky*/
/* placeholder */
input::placeholder,
textarea::placeholder {
  color: rgba(var(--bs-tertiary-color-rgb), .3);
}

/* 通常の入力欄 */
.snow-monkey-form input:not([type="checkbox"]):not([type="radio"]),
.snow-monkey-form textarea,
.snow-monkey-form select {
  padding: 18px 16px !important;
  background-color: #CCE9FB !important;
  border: 1px solid #4bb2f2 !important;
}

.snow-monkey-form select {
  padding: 12px 16px !important;
}

.snow-monkey-form textarea {
  height: 200px;
}

/* フォーカス時 */
.snow-monkey-form input:not([type="checkbox"]):not([type="radio"]):focus,
.snow-monkey-form textarea:focus,
.snow-monkey-form select:focus {
  outline: none !important;
  box-shadow: none !important;
  background-color: #EBF6FC !important;
  border-color: #4bb2f2 !important;
}
 .snow-monkey-form input[type=checkbox], .snow-monkey-form input[type=radio]{
  display:inline;
}
.smf-form--letter .smf-item__col--label{padding-bottom:0.25rem;}
.required{
	background-color:var(--bs-danger);
	display:inline-block;
	color:#ffffff;
	padding:0 10px;
	font-size:12px;
	border-radius:4px;
	margin-left:10px;
}
.iframe-container {
            width: 100%;
            height: 300px;
            border: 1px solid var(--bs-dark-border-subtle);
            overflow: auto;
	        font-size:90%;
}

.consent-label {/*承諾ボタン*/
	border: 1px solid var(--bs-dark-border-subtle);
	padding:20px 40px;	
  display: inline-flex;
  align-items: center;
  gap: .5em;
  cursor: pointer;
}
.consent-label input[type="checkbox"] {
  width: 1.1em;
  height: 1.1em;
}
.smf-action .smf-button-control__control{
	background-image:none!important;
	background-color:var(--color_blue)!important;
	border-color:var(--color_blue)!important;
	color:var(--bs-white)!important;
}
.smf-action .smf-button-control__control.is-disabled {
  opacity: .45;
  pointer-events: none;
  cursor: not-allowed;
}

/* 確認ボタンが無効のとき */
.smf-button-control__control.is-disabled,
.smf-action .smf-button-control__control.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
	
}
/*確認画面*/
form[data-screen="confirm"] .dsp_input{
display:none!important;
}
/*プログレストラッカー デザイン*/
.smf-progress-tracker__item[aria-current=true] .smf-progress-tracker__item__number {background-color: var(--color_blue);}
.smf-progress-tracker__item__number{width:44px;height:44px;}
.smf-progress-tracker__item:after, .smf-progress-tracker__item:before{top:22px;}
.smf-progress-tracker__item[aria-current=true] .smf-progress-tracker__item__text {color: var(--color_blue);}

/*animation--------------------------------*/
.title_anime {
  overflow: hidden;
	opacity:0;
}
.title_anime.is-ready {opacity: 1;}

.title_anime  .title-row {
  display: inline-flex;
}

.title_anime  .title-row > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
}

.title_anime.is-show .title-row > span {
  animation: titleUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay:1s;
}
@keyframes titleUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeIn,.fadeUp{opacity: 0;}
.fadeIn.is-show{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000; 
perspective: 1000; 	
will-change: transform, opacity;
animation-name: fadeInAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/*下から */
.fadeUp.is-show{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;

  animation: fadeUpAnime 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  opacity: 0;
}

@keyframes fadeUpAnime{
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
  }

  40% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.delay_05{animation-delay:0.5s!important;}
.delay_10{animation-delay:0.7s!important;}
.delay_15{animation-delay:1.0s!important;}

/*dl-----------------------------*/
dl.dl_table{
margin-left:0 ;
margin-right:0;
margin-block-start: 0;
 margin-block-end: 0;
}
dl.dl_table > dt{
	border-bottom: 1px solid var(--color_blue);
	border-radius: .5px;
     padding: 20px 5px 16px 15px;
	font-weight:normal;
	margin-bottom: 0;
}
dl.dl_table > dd{
    border-bottom: 1px solid var(--bs-dark-bg-subtle);
	 border-radius: .5px;
    padding: 20px 5px 16px 15px;
	margin-bottom: 0;
	margin-left:0;
}
@media (max-width:767px){
	dl.dl_table > dt{padding-bottom: 5px;padding-top: 5px;border-bottom:none; border-top:1px solid var(--bs-dark-bg-subtle);background-color:var(--bs-light);}
	dl.dl_table > dd{padding-top:4px; padding-bottom: 20px;border:none;}
}

/*btn--------------------------------------*/
[class^="btn_right_"],.slide_menu_contact a{
	display: flex;
	  align-items: center;
	  line-height: 1;
	  text-decoration: none;
	  color:var(--bs-white);
	  border-radius:100vh;
	  height: 60px;
	  padding:0.25rem 1.25rem;
	  position: relative;
	  transition: 0.3s;
	  background-color: var(--color_blue);
	background-image:linear-gradient(
			90deg,
			var(--color_green) 0%,
			var(--color_blue) 50%,
			var(--color_green) 100%
		);
	background-size:200% 100%;
	background-position:left;
}
.btn_right_pink{
    background-color: var(--color_pink);
	background-image:linear-gradient(
			90deg,
			var(--color_pink) 0%,
			var(--color_orange) 50%,
			var(--color_pink) 100%
		);
}
[class^="btn_right_"]:hover,.slide_menu_contact a:hover{
	background-position:right;
	color:var(--bs-white);
}
[class^="btn_right_"]::after,.slide_menu_contact a::after{
	font-family: var(--font_fa_name);
	content:'\f061';
	font-weight: 900;
	position:absolute;
	 top: 50%;
     right: 1rem;
    transform: translateY(-50%);
}

.btn_circle_right{
	bottom:0.5rem;
	right:0.5rem;
	display:block;
	width:50px;
	height:50px;
	border-radius:50%;
    background-color: var(--color_pink);
	background-image:linear-gradient(
			90deg,
			var(--color_pink) 0%,
			var(--color_orange) 50%,
			var(--color_pink) 100%
		);
	background-size:200% 100%;
	background-position:left;	
	  position: relative;
	  transition: 0.3s;	
}
.btn_circle_right::after{
font-family: var(--font_fa_name);
    content: '\f061';
    font-weight: 900;
	color:var(--bs-white);
	font-size:var(--fs_14);
    position: absolute;
   top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.btn_circle_right:hover ,a:hover .btn_circle_right{
	background-position:right;
	color:var(--bs-white);
}


/*deco---------------------------------------*/
/*ul*/
/*checkマーク付*/
ul.ul_check {
    list-style-type: none; 
    padding-left: 0; 
}
ul.ul_check > li {
    padding-left:1.5em; 
	position:relative;
    line-height: 1.8;
}
ul.ul_check >li::before {
	content:'';
	display:block;
	width:1em;
	height:1em;
	background-image:url('https://garmand.co.jp/gmdcorporate/wp-content/uploads/icon_check.svg');
	background-size:contain;
	background-repeat:no-repeat;
    position: absolute;
    left: 0;
    top: 0.45em;
}
/*ulドット付き*/
ul.list_gray,ul.list_pink {
    list-style-type: none; 
    padding-left: 0; 
}
ul.list_gray > li ,ul.list_pink > li{
    padding-left:1rem; 
	position:relative;
    line-height: 1.8;
}
ul.list_gray >li:before,ul.list_pink > li:before {
    content:'\30FB'; 
    color:var(--color_sky);
    position: absolute;
    left: 0;
    top:0;
}
ul.list_pink > li:before {color:  var(--color_darkpink);}
/*border*/
.wrap_dotted{
	border:1px dotted var(--cocoon-text-color);
	border-radius:16px;
}
/*共通---------------------------------------*/
.fs_14{font-size:var(--fs_14)!important;}
.fs_18{font-size:var(--fs_18)!important;}
.font_bold{font-family: var(--font_jp_name); -webkit-font-smoothing: antialiased;transform: rotate(0.03deg); /* Windowsのガタつき・潰れ対策 */ font-weight:700!important;}
.font_maru{font-family: var(--font_jp_maru_name);font-weight:400!important;} 
.font_min{font-family: var(--font_jp_min_name);font-weight: 400!important; letter-spacing:-0.175rem;}
.font_en{font-family: var(--font_en_name);font-weight:500!important;} 
.font_num{font-family: var(--font_num_name);font-weight:400!important;} 

.fw-400 { font-weight: 400!important;}
.ls_w{letter-spacing: 0.1em;}
.ls_0{letter-spacing:0rem!important;}

.color_body{color:var(--cocoon-text-color);}
.color_blue{color:var(--color_blue)!important;}
.color_sky{color:var(--color_sky)!important;}
.color_darkpink{color:var(--color_darkpink)!important;}
.bg_blue{background-color:var(--color_blue);}
.bg_gray{background-color:var(--color_gray);}
.bg_grad_pink{
	background-color: var(--color_pink);
	background-image:linear-gradient(
			90deg,
			var(--color_pink) 0%,
			var(--color_orange) 100%
		);	
}

.border_round{border-radius:var(--border_round);}
.border_color{border-color:var(--bs-dark-bg-subtle);}
.img_round > img{border-radius:var(--border_round);}

.link_black{color:var(--cocoon-text-color);}

/************************************
** bootstrap:レスポンシブデザイン用のメディアクエリ
************************************/
@media screen and (min-width: 1200px){

}
@media screen and (max-width: 1199.98px) { /*xl（ここからmobile-menu表示）*/
	#navi{display:none;}
	.mobile-menu-buttons{display:flex;}/*モバイルボタン*/
	.header-container-in.hlt-top-menu {flex-direction:row;height:100%;}
	.header-in{height:100%}
}
@media screen and (max-width:991.9px){/*lg*/
  .single.column-narrow .content-in,.blog.public-page .content-in,.archive.public-page .content-in{width:auto;}
}
@media screen and (max-width:767.9px) {/*md: sp*/
	body.page:not(.home):not(.add-parentid-jobs ) .entry-header h1 {font-size: 1.5rem; margin-right:80px;letter-spacing:0;}
	body.page:not(.home):not(.add-parentid-jobs ) .entry-header::after{width:60px;height:60px;}
}

@media screen and (max-width:575.9px){/*sm*/
	.header{ flex-shrink: 1;}/*縮む*/
	 #header .site-name-text {font-size:1px;}
	#draw_logo{width:calc(350px / 1.5); height:calc(125px / 1.5);}
	.logo-header img { width:calc(100% - var(--mobilemenu_size) / 1.5);}
	
	body:not(.home) main > article::before{	max-width:90%;}
	body:not(.home) .entry-header::after{font-size:5rem;}	
	
	/*main*/
	#main_catch{bottom:var(--header_h);top:auto;}
	#drop-pink_m{top:5%;}
	#drop-yellow_m{top:auto;bottom:0;}
	#blob-blue_m {width: 100%;}	
	#blob-green_m {top:0;width:100%;}
	
	/*top*/
	#drop-blue1{width:250px;top:0;}
	#drop-green1{bottom:-30px;}
	#blob-yellow1{width:100%;}
	#blob-pink1{width:100%;}
	#drop-yellow1{width:200px;bottom:-50px;}
	#drop-pink1{width:250px;}
	
	/*subpage*/
	#subpage_title #drop-yellow1{width: 100px;}
	#subpage_title #drop-green1{width: 100px;bottom:auto;top:4%;}
	#subpage_title #drop-blue1 {width: 200px;}
	#subpage_title #drop-pink1 {width: 120px;bottom:30%;}
	#subpage_title #blob-pink1{bottom:0;}
	#subpage_title #blob-yellow1{top:-50px;}	
	body.system-development #subpage_title .title_anime,body.web-development #subpage_title .title_anime,body.leader-message #subpage_title .title_anime,body.job-graduate #subpage_title .title_anime,body.job-midcareer #subpage_title .title_anime
	{font-size: 2rem !important;}
	
	body.add-parentid-messages #subpage_nav h2 > span:first-child{font-size:2rem!important;}
	ul.ul_hours > li:last-child{flex-direction:column;}
}

/************************************
** cocoon:レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下 humbergerMenuの表示*/
@media screen and (max-width: 1023px){

}

/*834px以下*/
@media screen and (max-width: 834px){
    main.main{padding:0!important;}/*必要：モバイルの両端の余白を取り除く*/
	.scroll-nav .header div.header-in {min-height: var(--header_h_s);}
   table th, table td{font-size:1rem;}	
}

/*480px以下*/
@media screen and (max-width: 480px){
	.logo-header img { width:calc(100% - 100px);}
}