/*
Theme Name: Twenty Seventeen Child
Template: twentyseventeen
Description: Child theme for Twenty Seventeen - FirstContact Blog
Version: 1.0
*/

/* =============================================
   Overrides for parent theme CSS
   ============================================= */

/* h1 margin override */
h1 {
	margin: 0.67em 0 0px;
	line-height: 1.65em;
}

/* h1 KV title gradient */
h1.kv_title{
	background: -webkit-linear-gradient( 280deg, #3ED5F8 12%, #30A1DD);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* h2 text-align override */
h2 {
	text-align: center;
}

/* h1 margin-bottom */
h1 {
	margin-bottom: 8px;
}

/* h3 color override */
h3 {
	color: #333;
	font-size: 18px;
	font-size: 1.125rem;
}

/* h5 text-transform disable */
h5 {
	text-transform: none;
}

/* Reset parent p margin - only apply inside entry-content */
p {
	margin: 0;
	padding: 0;
}

.entry-content p {
	margin: 0 0 1.5em;
	padding: 0;
}

/* Japanese font-family override */
html[lang="ja"] body,
html[lang="ja"] button,
html[lang="ja"] input,
html[lang="ja"] select,
html[lang="ja"] textarea {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W3", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* button selector fix for mejs */
:not( .mejs-button ) > button:hover,
:not( .mejs-button ) > button:focus {
	/* inherits parent button hover/focus styles */
}

/* a:hover color override */
a:not(.main_bt):hover,
a:active {
	color: #0187d1;
}

/* Entry title color */
.entry-title a {
	color: #363648;
}

/* Layout max-width overrides */
.wrap {
	max-width: 1024px;
}

/* Entry header margin */
.entry-header {
	margin-bottom: 40px;
	margin-top: 40px;
}

/* Site content padding */
.site-content {
	padding: 67px 0 0 0;
}
@media screen and (max-width: 639px) and (min-width: 0px) {
	.site-content {
		padding: 50px 0 0 0;
	}
}

/* Single post entry-content max-width */
.single-post:not(.twentyseventeen-front-page) .entry-content,
.page:not(.twentyseventeen-front-page) .entry-content {
	max-width: 800px;
}

/* audio/video focus outline */
audio:focus,
video:focus {
	outline: thin dotted;
}

/* .gallery-item margin-bottom remove */
.gallery-item {
	margin-bottom: 0;
}

/* Media query overrides - 48em */
@media screen and (min-width: 48em) {
	.wrap {
		max-width: 1024px;
	}

	.page .panel-content .recent-posts .entry-title {
		font-size: 34px;
	}

	.single-post .entry-title,
	.page .entry-title {
		font-size: 32px;
		color: #363648;
	}
}

/* max-width commented out */
.gallery-caption {
	/* max-width: auto; */
}


/* =============================================
   Common custom styles
   ============================================= */
/*共通--------------*/
*{
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.95em;
	box-sizing: border-box;
}
body{
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .5px;
	text-rendering: auto;
	color: #363648;
	background: #F7F8F9;
	width: 100vw;
	min-height: 100vh;
	display: block;
	overflow: visible;
	margin-right: auto;
	margin-left: auto;
	padding-top: 0px;
	padding-bottom: 0px;
	min-width:unset;
}
.wrap{
	width: 100%;
	overflow: hidden;
}
.main_bt,
input[type="submit"].main_bt,
input[type="button"].main_bt{
	color: #fff;
	background-color: #E161E1;
	border-radius: 40px;
	text-align: center;
	padding: 8px 20px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	transition: all .2s;
}
.main_bt:hover,
input[type="submit"].main_bt:hover,
input[type="button"].main_bt:hover{
	box-shadow: 0 8px 20px rgb(255 0 226 / 16%);
}
.position_r {
	position: relative;
}
a{
	text-decoration:none;
	color: #32414A;
}
p{
	font-weight: 300;
}
h2{
	font-size: 1.7em;
	line-height: 1.6em;
	margin-bottom: 16px;
	text-align: center;
	font-weight: 700;
}
textarea:focus,
input:focus{
	border: 1px solid #ee786c;
}
.for_pc{
	display: block;
}
.for_sp{
	display: none;
}
.only_sp{
	display: none;
}
.header{
	position: fixed;
	top: 0;
	height: 60px;
	width: 100%;
	color: #fff;
	background: rgba(247, 247, 247, 0.85);
	z-index: 100;
}
.newtab_bt{
	display: inline-flex;
	align-items: end;
}
.newtab_icon{
	margin-left: 6px;
}
.label_bt{
	color: #0187d1;
	border: 1px solid #0187d1;
	border-radius: 20px;
	display: inline;
	font-size: 12px;
	padding: 4px 22px;
}
.fadein {
	opacity: 0;
	transform : translate(0, 50px);
	-webkit-transition: all 1500ms;
	-moz-transition: all 1500ms;
	transition: all 1500ms;
}

.fadein.scrollin{
	opacity: 1;
	transform: translate(0, 0);
}

/* =============================================
   Custom CSS blocks (breadcrumb, article listing,
   sidebar, pagination, footer, header, responsive)
   ============================================= */
/* ------------------------パンくずリスト----------------------- */
.breadcrumb {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	color:#666;
	margin: 1em !important;
	padding: 0;
}
.breadcrumb li {
	text-decoration: none !important;
}
.breadcrumb li:before{
	content: '>'; 
	padding: 0 1em;
}

.breadcrumb li:first-child:before{
	content: none; 
}


/* ------------------------/パンくずリスト----------------------- */


/* ------------------------header css------------------------ */

@media only screen and (min-width: 640px){
 #header_nav_area .header_nav .bt_order_top {
		height: 35px;
		width: 210px;
 }
}
/* ------------------------/header css------------------------ */


@media only screen and (min-width: 640px) {
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}
body {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W3", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;/**/
}
img {
    vertical-align: top;
}
.for_sp {
    display: none;
}
/* Content inner - header's inner is overridden in New Header Styles section */
.inner {
    margin: 0 auto;
    width: 1024px;
    min-width: 1024px;
    height: auto;
}
.wrap {
	min-width: 1024px;
}



/* ------------------------記事一覧ページcss----------------------------- */

/* topContents------------------------------------------------------*/

#topContents {
	width: 100%;
}
.kv_inner{
	width:1024px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 50px;
}
.contents_wrap {
	margin: 0 auto;
	width: 1024px;
}
.pagination_wrap {
	width: 1024px;
}

.contents_wrap .item_all_wrap{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.contents_wrap .item_all_wrap .item_wrap{
  width:calc(100% / 3 - 20px);
	flex-shrink: 0;
	min-height: 400px;
	margin-right: 30px;
	margin-bottom: 40px;
}
.contents_wrap .item_all_wrap .item_wrap:nth-child(3n) {
	margin-right: 0;
}
.contents_wrap .item_all_wrap .item_wrap a{
	text-decoration: none;
}
.contents_wrap .item_image_wrap{
	width: 100%;
	height: 180px;
  overflow: hidden;
}
.contents_wrap .item_image{
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.2s all ease-in-out;
cursor: pointer;
 }
.item_wrap a:hover .item_image{
	transform: scale(1.1);
	transition: 0.2s all ease-in-out;
	opacity: 0.8;
}
.item_tag li:before {
	content: ','; 
	padding: 0 0.5em 0 0;
}
.item_tag li:first-child:before{
	content: none; 
}
.contents_wrap .item_title{
	font-size: 16px;
	color: #363648;
	margin-top: 10px;
	line-height: 1.6;
	font-weight: bold;
	display: flex;
	margin-bottom: 4px;
}
.contents_wrap .item_remarks{
	font-size: 14px;
	color: #363648;
	max-height: calc(3 * 1.65em);
	-moz-text-overflow: '...';
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	line-height: 1.65em;
	overflow: hidden;
	margin-bottom: 14px;
	font-weight: 300;
}
	.item_date {
    color: #666;
    font-size: 12px;
    font-weight: 400;
	}
}

@media screen and (max-width: 639px) and (min-width: 0px) {
	html, body {
			margin: 0;
			padding: 0;
			height: 100%;/* overflow-x: hidden; */
			width: 100%;
	}
	body {
			font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W3", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;/**/
	}
	img {
			vertical-align: top;
	}
	.for_pc {
			display: none;
	}
	.inner {
			margin: 0 auto;
			width: 98%;
			height: auto;
	}
	#topContents {
    width: 100%;
  }

 .kv_inner{
  width:96%;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 10vw;
  }
 .kv_title {
	font-size: 6vw;
 }
 .contents_wrap {
    margin: 0 auto;
 }
 .contents_wrap .item_all_wrap{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
 }
  .contents_wrap .item_all_wrap .item_wrap{
  width:96%;
   margin: 0 auto;
   flex-shrink: 0;
	 margin-bottom: 8vw;
 }
 .contents_wrap .item_all_wrap .item_wrap a{
 text-decoration: none;
 }
 .contents_wrap .item_image_wrap{
	width: 100%;
	height: 48vw!important;
  overflow: hidden;
 }
 .contents_wrap .item_image{
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 }

 .item_tag li:before {
	content: ','; 
	padding: 0 0.5em 0 0;
 }

 .item_tag li:first-child:before{
	 content: none; 
 }
 
 .contents_wrap .item_title{
	font-size: 16px;
	color: #363648;
	margin: 12px 0 10px;
	line-height: 1.4;
 }
 
 .contents_wrap .item_remarks{
	font-size: 14px;
	color: #363648;
	max-height: calc(3 * 1.65em);
	-moz-text-overflow: '...';
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	line-height: 1.65em;
	overflow: hidden;
	font-weight: 300;
	margin-bottom: 12px;
 }
 
 .item_date {
	color: #666;
	font-size: 12px;
	font-weight: 400;
	margin-top: 6px;
 }

}
/* ------------------------ END_記事一覧ページcss ----------------------------- */


/* ------------------------ for_sp  ----------------------------- */

/* ------------------------ 個別記事ページcss  ----------------------------- */
@media screen and (max-width: 639px) and (min-width: 0px) {
 /* 個別記事内、画像＋文章の横並びを縦並びにするレスポンシブ */
 .wp-block-media-text {
	display: -ms-grid;
	display: flex;
	flex-direction: column;}
/* ------------------------ /個別記事ページcss ----------------------------- */

 .site-content {
	width: 90%;
	 margin: auto;
 }
}

/* --------------------- 個別記事 and sidebar ---------------------*/
/* Override parent theme sidebar float layout - child theme uses flexbox */
@media screen and (min-width: 48em) {
	.has-sidebar:not(.error404) #primary {
		float: none;
		width: 100%;
	}
	#primary {
		margin-left: auto;
		margin-right: auto;
	}
}

.single-post .content-area {
	max-width: 700px !important;
}

.related_sidebar_wrap ul {
	padding: 0;
}

.related_sidebar_wrap .sidebar_title {
	margin: 20px 0;
	padding-left: 0px;
	border-bottom: #0070c0 1px solid;
	border-left: none;
	color: #0070c0;
	font-size: 18px;
	padding: 0;
	font-weight: normal !important;
	width: 100%;
}

.sidebar_list { 
	list-style: none;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	margin-bottom: 10px;
}
.sidebar_list img { 
	margin-right: 10px;
} 
.sidebar_list_text {
	width: 100%;
}
@media only screen and (min-width: 640px){
	.wrap {
		padding: 0;
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		justify-content: space-between;
	}
	.related_sidebar_wrap {
    width: 250px;
    margin: 190px 0 0 0;
	}
	.sidebar_list { 
		font-size: 14px;
	}
}
@media screen and (max-width: 639px) and (min-width: 0px) {
	.wrap {
		width: 98%;
	}
	.related_sidebar_wrap {
		margin-top: 8vw;
	}	
}
	
/* --------------------- EDN_個別記事 and sidebar ---------------------*/

/* ページ上部スクロールボタン */
#page_top {
	position: fixed;
	bottom: 110px;
  right: 20px;
}
#page_top a {
	background-color: #0187d1;
	border: solid 1px #0187d1;
	text-decoration: none;
	color: #fff;
	width: 50px;
	padding: 10px 0;
	text-align: center;
	display: block;
	border-radius: 64px;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}

#page_top a:hover {
	color: #0187d1;
	background-color: #e5f7ff;
}
/* /ページ上部スクロールボタン */

/* ページネーション */
 .pagenation_wrap {
	margin-bottom: 25px;
 }

  .pagination_content {
		display: flex;
		justify-content: center;
  } 
  
.pagination_content li {
  color: #666;
  border-radius: 50%;
	line-height: 7px; 
	border: 1px solid #0070c0;
	display: flex;
  justify-content: center;
	align-items: center;
	margin-right: 10px;
	width: 49px;
	height: 49px;
}
.pagination_content li a {
	padding: 20px;
	line-height: 7px;
}
  
.pagination_content a:hover,
.pagination_content li.current a {
  background: #0070c0;
  color: #fff;
  padding: 20px;
  border-radius: 50%;
	line-height: 7px; 
	display: flex;
  justify-content: center;
  align-items: center;
	width: 100%;
	height: 100%;
}
/* /ページネーション */
/* TOPページ */
.page_title {
	text-align: center;
	
}
.cat_text_wrap, .cat_title {
	color: #0f3785;
}
.cat_title {
	text-align: center;
	margin: 16px 0;
	font-weight: 700;
	font-size: 22px;
}
.cat_img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 0.4s all ease-in-out;
}
@media only screen and (min-width: 640px){
	.top_category_wrap {
		margin: 50px auto;
		width: 800px;
	}
	.cat_link {
		display: flex;
		align-items: flex-end;
	}
	.cat_link:hover .cat_img{
		-webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
		transition: 0.4s all ease-in-out;
	}
	.cat_link:hover .detail_allow {
		width:70px;
		transition: 0.4s all ease-in-out;
	}
	.cat_link:nth-child(odd) {
		flex-direction: row-reverse;
	}
	.cat_text_wrap {
		background-color: #ebebeb;
		height: 230px;
		width: 350px;
		padding: 0 20px;
		position: relative;
	}
	.allow_wrap {
		position: absolute;
		bottom: 30px;
		right: 40%;
		width: 70px;
	}
	.detail_allow {
		display: flex;
		width: 50px;
		border-bottom: 1.5px solid #0f3785;
		position: relative;
		transition: all .4s ease-in-out;
	}
	.detail_allow::before {
		content: '';
		border-right: 1.5px solid #0f3785;
		border-top: 1.5px solid #0f3785;
		position: absolute;
		height: 8px;
		width: 8px;
		right: 0px;
		bottom: -5px;
		transform: rotate(45deg);
	}	
	.cat_img_wrap {
		width: 450px;
		height: 270px;
		overflow: hidden;
	}
	
}
@media screen and (max-width: 639px) and (min-width: 0px) {
	.top_category_wrap {
		margin: 5vw 0;
		margin-bottom: 0;
	}
	.cat_title {
		margin-top: 0;
	}
	.cat_text_wrap {
		background-color: #ebebeb;
		padding: 5vw 0;
		margin-bottom: 5vw;
	}
	.cat_text {
		padding: 0 3vw;
	}
}
/* END_TOPページ */

/*footer ----------------------------*/
#footer {
	background-color: #292950;
	width: 100vw;
	height: 360px;
	font-size: 15px;
	color: #fff;
}
#footer > .inner{
	position: relative;
	width: 90.625%;
	max-width: 1276px;
	margin: 0 auto;
	padding: 40px 0 20px;
	display: flex;
	justify-content: space-around;
}
#footer > .inner h4{
	font-size: 1em;
	line-height: 2.8em;
	color: #fff;
    margin-bottom: 16px;
    text-align: center;
}
#footer > .inner p{
	font-size: 14px;
	line-height: 3.6em;
}
#footer > .inner a:not(.sns_logo){
	display: block;
	color:#C0C0D0;
	font-size: 12px;
	font-weight: 300;
	line-height: 2.8em;
}
#footer > .inner a:not(.sns_logo):hover{
	color:#fff;
}
.sns_logo_wrap{
	margin-top: 30px;
}
.sns_logo_wrap .sns_logo{
	margin-right: 12px;
}
.vitalify_icon{
	background-image: url(https://first-contact.jp/assets-official/home/img/logo/fc_logo_blue.svg);
	background-position: center center;
	background-repeat: no-repeat;
	height: 40px;
	width: 180px;
	background-size: contain;
}
.vitalify_icon > a{
	width: 100%;
	height: 100%;
	display: block;
}
.footer_copyright {
	font-size: 11px;
	color: #fff;
	margin-left: 25px;
	text-align: center;
}
.newtab_text_bt img{
	margin-left: 6px;
	vertical-align: text-bottom;
	width: 16px;
}

/*LIQUID CONNECT PLUGIN ----------------------------*/
.widget_liquid_connect a img {
	-webkit-box-shadow: none;
	box-shadow:none;
}
.widget_liquid_connect a.liquid_connect_content_link {
	box-shadow:none;
}
.widget_liquid_connect .liquid_connect[class*="liquid_connect_modal"] {
	bottom: 120px !important;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	border: 0px;
}
.widget_liquid_connect .liquid_connect[class*="liquid_connect_modal"] .liquid_connect_inner {
	padding: 0px;
}
.widget_liquid_connect .liquid_connect[class*="liquid_connect_modal"] .liquid_connect_close {
	top: 6px;
	right: 6px;
	border: 0px;
	font-size: 19px;
	background: transparent;
	color: #c9eefd;
	font-weight: 100;
}
.widget_liquid_connect .liquid_connect[class*="liquid_connect_modal"] .liquid_connect_inner .liquid_connect_content_copy {
	display: none !important;
}
@media screen and (max-width: 599px) {
	.widget_liquid_connect .liquid_connect[class*="liquid_connect_modal"] .liquid_connect_close {
		top: -14px;
		right: 30px;
		font-size: 60px;
	}
}

/* ============ OLD HEADER CSS IN MEDIA QUERY - COMMENTED OUT ============
@media screen and (max-width:1024px){
	.for_pc{
			display: none;
	}
	.for_sp{
			display: block;
	}
	.header{
			z-index: 2022;
			-webkit-transition: 0.3s all;
			-moz-transition: 0.3s all;
			transition: 0.3s all;
	}
	.header > .inner {
			width: 100%;
	}
	.header > .inner a {
			margin: 0 0 0 12px;
	}
	.header > .inner a.main_bt {
			font-size: 12px;
			margin-right: 52px;
			white-space: nowrap;
			padding: 6px 16px;
	}
	.header > .inner .head_logo {
			width: 128px;
	}
	.hamburger {
			display: block;
			position: fixed;
			z-index: 3;
			right: 4px;
			top: 9px;
			width: 42px;
			height: 42px;
			cursor: pointer;
			text-align: center;
	}
	.hamburger span {
			display: block;
			position: absolute;
			width: 28px;
			height: 2px;
			left: 5px;
			background: #0F123F;
			-webkit-transition: 0.2s ease-in-out;
			-moz-transition   : 0.2s ease-in-out;
			transition        : 0.2s ease-in-out;
	}
	.hamburger span:nth-child(1) {
			top: 10px;
	}
	.hamburger span:nth-child(2) {
			top: 20px;
	}
	.hamburger span:nth-child(3) {
			top: 30px;
	}
	.hamburger.active span:nth-child(1) {
			top : 16px;
			left: 6px;
			background :#fff;
			-webkit-transform: rotate(-45deg);
			-moz-transform   : rotate(-45deg);
			transform        : rotate(-45deg);
	}
	.hamburger.active span:nth-child(2),
	.hamburger.active span:nth-child(3) {
			top: 16px;
			background :#fff;
			-webkit-transform: rotate(45deg);
			-moz-transform   : rotate(45deg);
			transform        : rotate(45deg);
	}
	nav.globalMenuSp {
			position: fixed;
			z-index : 2;
			top  : 0;
			left : 0;
			color: #fff;
			background: #4CA1D1;
			text-align: center;
			width: 100%;
			height: 0vh;
			opacity: 0;
			-webkit-transition: opacity .2s ease, visibility .2s ease;
			-moz-transition: opacity .2s ease, visibility .2s ease;
			transition: opacity .2s ease, visibility .2s ease;
	}
	nav.globalMenuSp ul {
			margin: 60px auto;
			padding: 0;
			width: 100%;
			display: none;
	}
	nav.globalMenuSp ul li {
			list-style-type: none;
			padding: 0;
			width: 100%;
			-webkit-transition: .4s all;
			-moz-transition: .4s all;
			transition: .4s all;
	}
	nav.globalMenuSp ul li:last-child {
			padding-bottom: 0;
	}
	nav.globalMenuSp ul li:hover{
			background :#ddd;
	}
	nav.globalMenuSp ul li a.scroll_color {
			display: block;
			color: #fff;
			padding: 1.2em 0;
	}
	nav.globalMenuSp.active {
			opacity: 100;
			height: 100vh;
	}
	nav.globalMenuSp.active ul {
			display: block;
	}
}
============ END OLD HEADER CSS IN MEDIA QUERY ============ */
/* tablet */
@media screen and (max-width:819px){
	h2 {
		font-size: 1.7em;
		width: 100%;
	}
	#footer {
			height: 880px;
	}
	#footer > .inner{
			display: block;
	}
	.vitalify_icon{
			margin: auto;
	}
}
/* sp */
@media screen and (max-width:599px){
	*{
			line-height: 1.85em;
	}
	.none_sp{
		display: none;
	}
	.only_sp{
		display: block;
	}
	#footer > .inner{
			display: block;
			padding: 32px 0;
	}
	.vitalify_icon{
			width: 100%;
			height: 32px;
			padding: 0;
	
	}
	.footer_copyright{
			width: 100%;
			padding: 10px 0 0;
			margin-left: 0;
			text-align: center;
	}
	#footer {
			height: 880px;
	}

}

	h2.catchcopy {
		color: #fff;
		font-size: 1em;
		line-height: 2.8em;
		margin-bottom: 16px;
		text-align: center;
		font-weight: 700;
	}

/* ========================================
   New Header Styles (2026-02-12)
   ======================================== */
.header {
	position: fixed;
	top: 0;
	height: 66px;
	width: 100%;
	color: #fff;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
	z-index: 100;
}

.header > .inner {
	width: 100%;
	margin: auto;
	height: 66px;
	padding: 0 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.header > .inner .head_logo {
	width: 192px;
	height: auto;
	display: block;
}

/* Header Navigation */
.header .header__nav {
	display: flex;
	gap: 24px;
	flex: 1;
	align-items: center;
	justify-content: center;
}

.header .header__nav a {
	color: #49495A;
	padding: 11px 8px;
	transition: color 0.2s;
	margin: 0;
}

.header .header__nav a:hover {
	color: #067EC3;
}

/* Header CTA Buttons */
.header .header__cta {
	display: flex;
	align-items: center;
	gap: 16px;
}

.header .header__cta a.header__btn {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	padding: 0 20px;
	margin: 0;
	border-radius: 100px;
	transition: all 0.2s;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

.header .header__cta a.header__btn--outline {
	background-color: #FFFFFF;
	border: 1px solid #DDDDDD;
	color: #222222;
}

.header .header__cta a.header__btn--outline:hover {
	background-color: #F5F5F5;
	border-color: #067EC3;
	color: #067EC3;
}

.header .header__cta a.header__btn--primary {
	background: linear-gradient(90deg, #067EC3 0%, #00A3CC 100%);
	border: none;
	color: #FFFFFF;
	box-shadow:
		inset 0 0 0 2px rgba(255, 255, 255, 0.1),
		0px 4px 6px -4px rgba(0, 0, 0, 0.1),
		0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.header .header__cta a.header__btn--primary:hover {
	background: linear-gradient(90deg, #0570AD 0%, #0093B8 100%);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1), 0px 6px 8px -4px rgba(0, 0, 0, 0.15), 0px 12px 18px -3px rgba(0, 0, 0, 0.15);
}

/* Responsive: 1250px以下 */
@media screen and (max-width: 1250px) {
	.header .header__nav {
		gap: 16px;
	}
}

/* Responsive: Tablet (1025px〜1249px) */
@media screen and (min-width: 1025px) and (max-width: 1249px) {
	.header .header__nav {
		gap: clamp(0px, calc((100vw - 1025px) * 0.12), 24px);
	}

	.header .header__nav a {
		white-space: nowrap;
		padding: 11px clamp(4px, 0.5vw, 8px);
	}

	.header > .inner {
		padding: 0 16px;
	}
}

/* Responsive: 1024px以下（SP表示） - Copy from site-common.css */
@media screen and (max-width: 1024px) {
	.for_pc {
		display: none;
	}

	.for_sp {
		display: block;
	}

	.header {
		height: 72px;
		z-index: 2022;
		-webkit-transition: 0.3s all;
		-moz-transition: 0.3s all;
		transition: 0.3s all;
	}

	.header > .inner {
		width: 100%;
		min-width: unset;
		height: 100%;
		padding: 0 8px 0 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header > .inner .head_logo {
		width: 160px;
	}

	/* ハンバーガーメニュー */
	.header.for_sp .hamburger {
		width: 56px;
		height: 56px;
		border-radius: 100px;
		padding: 0 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: rgba(255, 255, 255, 0.92);
		border: 1px solid rgba(6, 126, 195, 0.1);
		box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		cursor: pointer;
		gap: 4px;
		z-index: 4;
		box-sizing: border-box;
	}

	.header.for_sp .hamburger span {
		width: 16px;
		height: 0;
		border-top: 2px solid rgb(6, 126, 195);
		background: transparent;
		display: block;
		border-radius: 10px;
	}

	/* ナビ開いてる時のボタン */
	.hamburger.active {
		position: relative;
		gap: 0;
	}

	.hamburger.active span {
		position: absolute;
		border-top-color: #fff;
	}

	.hamburger.active span:nth-child(1) {
		transform: rotate(-45deg);
	}

	.hamburger.active span:nth-child(2) {
		opacity: 0;
	}

	.hamburger.active span:nth-child(3) {
		transform: rotate(45deg);
	}

	/* グローバルメニュー（SP） */
	nav.globalMenuSp {
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		color: #fff;
		background: #4CA1D1;
		text-align: center;
		width: 100%;
		height: 0vh;
		opacity: 0;
		-webkit-transition: opacity .2s ease, visibility .2s ease;
		-moz-transition: opacity .2s ease, visibility .2s ease;
		transition: opacity .2s ease, visibility .2s ease;
	}

	nav.globalMenuSp ul {
		margin: 60px auto;
		padding: 0;
		width: 100%;
		display: none;
	}

	nav.globalMenuSp ul li {
		list-style-type: none;
		padding: 0;
		width: 100%;
		-webkit-transition: .4s all;
		-moz-transition: .4s all;
		transition: .4s all;
	}

	nav.globalMenuSp ul li:last-child {
		padding-bottom: 0;
	}

	nav.globalMenuSp ul li:hover {
		background: #ddd;
	}

	nav.globalMenuSp ul li a.scroll_color {
		display: block;
		color: #fff;
		padding: 1.2em 0;
	}

	/* このクラスを、jQueryで付与・削除する */
	nav.globalMenuSp.active {
		opacity: 100;
		height: 100vh;
	}

	nav.globalMenuSp.active ul {
		display: block;
	}
}

/* =============================================
   404 Page
   ============================================= */
.notfound {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(160px + 66px) 20px 160px;
}

.notfound__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    max-width: 320px;
    width: 100%;
}

.notfound__img {
    width: 320px;
    height: auto;
}

.notfound__desc {
    font-weight: 700;
    font-size: 16px;
    line-height: 130%;
    text-align: center;
    color: #363648;
}

.notfound__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 31px;
    width: 173px;
    height: 64px;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-radius: 100px;
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    text-align: center;
    color: #363648;
    text-decoration: none;
    letter-spacing: normal;
    transition: background-color 0.3s;
}

.notfound__btn:hover {
    background-color: #F3F4F6;
}

@media screen and (max-width: 640px) {
    .notfound {
        padding: calc(80px + 72px) 16px 80px;
    }
}

/* ========================================
   Additional CSS (migrated from WP Admin)
   ======================================== */
.button{
	width:300px;
	margin:0 auto;
	overflow:hidden;
}
.button img{
	transition:1s all;
}
.button_morelink img:hover{
	margin-left:15px;
}
.block_img_animation:hover{
	opacity: 0.8;
}
.button_cvr:hover{
	opacity: 0.8;
}

.liquid_connect_inner {
	width: 300px !important;
}
@media screen and (max-width: 599px) {
	.widget_liquid_connect .liquid_connect[class*="liquid_connect_modal"] .liquid_connect_close {
		font-size: 50px !important;
		top: -11px !important;
		right: 22px !important;
	}
}

/* GPTコーディング記事用 */
button.simple-button {
	background-color: #4CAF50;
	border: none;
	color: white;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 10px;
	cursor: pointer;
	border-radius: 5px;
}
button.simple-button:hover {
	background-color: #4CAF50;
}

button.hover-button {
	background-color: #4CAF50;
	border: none;
	color: white;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 10px 2px;
	transition-duration: 0.4s;
	cursor: pointer;
}
button.hover-button:hover {
	background-color: #3e8e41;
}

button.shake-button {
	position: relative;
	animation: shake 0.5s ease-in-out infinite;
}
button.shake-button:hover {
	background-color: #222;
}
@keyframes shake {
	0% { transform: translateX(0); }
	25% { transform: translateX(-5px) rotate(-5deg); }
	50% { transform: translateX(5px) rotate(5deg); }
	75% { transform: translateX(-5px) rotate(-5deg); }
	100% { transform: translateX(0); }
}

button.blinking-button {
	background-color: aqua;
	border-radius: 10px;
	border: none;
	color: white;
	font-size: 16px;
	padding: 10px;
	box-shadow: 0px 0px 10px 2px aqua;
	animation: blink 1s infinite;
}
button.blinking-button:hover {
	background-color: aqua;
}
@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
}

a.design-button {
	display: inline-block;
	padding: 0.5em 1em;
	font-size: 1.2em;
	text-decoration: none;
	color: #ffffff;
	background-color: #ff6600;
	border-radius: 25px;
	box-shadow: 2px 2px 3px rgba(0,0,0,0.4);
	transition: all 0.2s ease-in-out;
}
a.design-button:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 4px 4px 6px rgba(0,0,0,0.4);
}

input[type="text"].simple-box {
	border: 2px solid #ccc;
	padding: 10px;
	font-size: 16px;
	border-radius: 5px;
	width: 300px;
	outline: none;
}

.color-box {
	border-radius: 10px;
	border: 2px solid black;
	padding: 10px;
	background-color: lightgray;
	color: red;
}

.note-box {
	position: relative;
	margin: 20px auto;
	max-width: 500px;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	overflow: hidden;
}
.note-header {
	background-color: #ffd;
	padding: 10px;
	position: relative;
}
.note-title {
	font-size: 1.2rem;
	font-weight: bold;
}
.note-close {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 1.5rem;
	font-weight: bold;
	cursor: pointer;
}
.note-content {
	padding: 20px;
	position: relative;
}
.note-content::before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 25px 25px 0;
	border-color: transparent #ffd transparent transparent;
	top: -1px;
	left: -24px;
	transform: rotate(135deg);
}

.heart-box {
	position: relative;
	width: 250px;
	height: 220px;
	margin: 50px auto;
}
.heart-box h2 {
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	font-size: 24px;
	text-align: center !important;
}
.heart-box p {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	font-size: 18px;
	text-align: center !important;
}
.heart-box:before,
.heart-box:after {
	content: "";
	position: absolute;
	top: 0;
	width: 125px;
	height: 200px;
	background-color: #f7a4b8;
	border-radius: 100px 100px 0 0;
	transform: rotate(-45deg);
}
.heart-box:before {
	left: 30px;
}
.heart-box:after {
	right: 30px;
}
.heart-box-fix h2 {
	z-index: 1;
}
.heart-box-fix p {
	z-index: 1;
}
.heart-box-fix:after {
	right: 42px;
	transform: rotate(45deg);
}

.design-textbox {
	width: 400px;
	margin: 0 auto;
	background-color: #f9f9f9;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0px 0px 20px #aaa;
}
.design-textbox h3 {
	color: #000;
	text-align: center;
	font-size: 24px;
	margin-bottom: 20px;
}
.design-textbox form {
	display: flex;
	flex-direction: column;
}
.design-textbox label {
	font-size: 18px;
	margin-bottom: 5px;
}
.design-textbox input {
	font-size: 16px;
	padding: 10px;
	border-radius: 5px;
	border: none;
	margin-bottom: 15px;
	box-shadow: 0px 0px 10px #aaa;
}
.design-textbox input {
	outline: none;
	box-shadow: 0px 0px 10px #007bff;
}
.design-textbox button {
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 5px;
	font-size: 18px;
	padding: 10px 20px;
	margin-top: 10px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.design-textbox button:hover {
	background-color: #0056b3;
}

/* 2025バージョンアップ後の追加対応 */
.wp-block-image {
	margin: 1em 0 1.5em;
}
p.has-text-color a {
	color: inherit;
}
.wp-block-gallery {
	margin-bottom: 1.5em !important;
}
.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image,
.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item,
.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image,
.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item {
	width: calc((100% - 16px) / 2);
	margin: 0 16px 16px 0;
}
.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figcaption,
.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption,
.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figcaption,
.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption {
	padding: 40px 10px 9px;
	font-size: 13px;
}
.wp-block-group.has-background {
	padding: 20px 30px;
	margin-top: 0;
	margin-bottom: 0;
}