@charset "UTF-8";


@media (max-width: 767px) {
/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* index */
#toppage{}
#toppage article.contents{ width: 100%; position: relative; z-index: 100; padding-block:4.0rem;}
#toppage article.contents section{ width: 90%; margin: 0px auto; max-width: 1200px;}
#toppage article.contents section p:nth-child(n+2){ margin-top: 1.0em;}

/* static */
main#static{ width: 90%; margin: 0px auto; max-width: 1200px; display: flex; justify-content: space-between; flex-wrap: wrap;}
main#static .type-page{ padding: 4.8rem 0; width: 100%;}

/* category / archive / single */
#archive,
#primary,
#single-post{ width: 90%; max-width: 1200px; margin: 0px auto; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 4.8rem 0;}
#archive #archive-list,
#primary #container,
#single-post #detail{ width: 100%; order: 1;}
#archive #secondary,
#primary #secondary,
#single-post #secondary{ width: 100%; order: 2; margin-top: 4.8rem;}

/* page layout */
body.page-template-default header.entry-header{ display: none;}
body.page-template-default #container main{ width: 100%; margin: 0px auto;}
body.page-template-default #container #secondary{ display: none;}

.spbr{ display: block;}
.pcbr{ display: none;}

/*--------------------------------------------------------------
# top page
--------------------------------------------------------------*/
body#home .entry-header,
body#home .post-thumbnail{ display: none;}

body#home #masthead{ position: absolute; top: 0; left: 2%; z-index: 1000;}

h2.homeHeading{ font-size: 2.4rem; line-height: 1.2em; text-align: center; font-weight: 700; color: var(--clr-navy); margin-bottom: 0.72em;}
h2.homeHeading span{ display: block; font-family: Arial, Helvetica, "sans-serif"; color: var(--clr-red); text-align: center; font-weight: normal; margin-bottom: 0.24em; font-size: 1.6rem; line-height: 1.0em;}

#hero-area{ width: 100%; padding-bottom: 100vw; position: relative; background: url("images/hero_image_01.webp") no-repeat center bottom; background-size: cover;}
#hero-area section{ width: 90%; max-width: 1200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 100; text-align: center;}
#hero-area section h1{ text-align: center;}
#hero-area section h1 span{ display: inline-block; padding: 0.24em; font-size: clamp(2.0rem,4.0vw,5.6rem); line-height: 1.0em; background: rgba(255,255,255,0.72); font-weight: 700; margin: 0.16em 0;}
#hero-area section h1 span em{ display: inline-block; line-height: 1.0em; font-style: normal; background-image: linear-gradient(90deg, #17489d, #2fb7c2 50%, #17489d); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;}
#hero-area section h2{ display: inline-block; background: rgba(23,72,157,0.88); line-height: 1.2em; font-size: clamp(1.6rem,2.4vw,3.2rem); font-weight: 700; color: #FFF; text-align: center; padding: 0.16em; margin-top: 0.5em;}
#hero-area svg{ width: 120%; position: absolute; bottom: -185px; left: -10%; z-index: 1;}

/* introduction */
.contents.introduction{ padding-top: 1.6rem !important;}
.introduction p{ text-align: left; font-weight: 600;}

/* information */
.information-list{ padding:  0; position: relative;}
.information-list section{ width: 90%; margin: 0px auto; max-width: 1200px; position: relative; padding: 4.0rem 0; z-index: 10;}
.information-list section:before{ content: ""; width: calc(100% + 9.6rem); height: 100%; background: var(--clr-bgc); position: absolute; top: 0; left: -4.8rem; z-index: -1;}
.information-list section .head{ width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-end;}
.information-list section .head h2{ font-size: 2.0rem; line-height: 1.2em; font-weight: 600; color: var(--clr-navy);}
.information-list section .head h2 span{ display: block; text-align: center; font-family: Arial, Helvetica, "sans-serif"; font-weight: normal; color: var(--clr-blue); font-size: 1.4rem; line-height: 1.0em;}
.information-list section .head a{ display: inline-block; font-size: 1.4rem; line-height: 1.0em; color: #FFF; text-decoration: none; background: var(--clr-navy); padding: 0.32em 1.0em; border-radius: 100px;}
.information-list section .head a:hover{ opacity: 0.72;}
.information-list section .list{ width: 100%; margin-top: 2.4rem;}
.information-list section .list ul li{ padding: 0.8em 0; border-bottom: solid 1px rgba(0,0,0,0.08); display: flex; justify-content: flex-start; flex-wrap: wrap;}
.information-list section .list ul li:last-child{ border-bottom: none;}
.information-list section .list ul li .info-date{ opacity: 0.48; margin-right: 1.0em;}
.information-list section .list ul li .info-cat{ display: inline-block; font-size: 1.2rem; line-height: 1.0em; background: #000; padding: 0.24em 0.8em; border-radius: 100px; color: #FFF; position: relative; top: -1px;}
.information-list section .list ul li .info-cat.cat-topics{ background: var(--clr-blue);}
.information-list section .list ul li .info-cat.cat-event{ background: var(--clr-red);}
.information-list section .list ul li .info-title{ width: 100%;}

/* about us */
.home-aboutus{}
.home-aboutus{ position: relative; z-index: 10;}
.home-aboutus:before{ content: ""; width: 100%; height: 100%; background: var(--clr-bgc); position: absolute; top: 25%; left: 0; z-index: -1;}
.home-aboutus .imgList{ display: flex; justify-content: space-between; flex-wrap: wrap; border-radius: 8px; overflow: hidden; margin-bottom: 1.6rem;}
.home-aboutus .imgList li{ width: 50%;}
.home-aboutus .imgList li img{ width: 100%; height: auto;}
.home-aboutus h3{ font-size: 1.6rem; line-height: 1.2em; font-weight: 700; text-align: center; color: #333; margin-bottom: 0.5em;}
.home-aboutus .linkMenu{ width: 72%; margin: 2.4rem auto 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
.home-aboutus .linkMenu li{ width: 100%;}
.home-aboutus .linkMenu li:nth-child(n+2){ margin-top: 0.64em;}
.home-aboutus .linkMenu li a{ display: block; background: var(--clr-navy); color: #FFF; text-decoration: none; line-height: 1.0em; text-align: center; padding: 1.0em 0; border-radius: 4px; position: relative;}
.home-aboutus .linkMenu li a:after{ content: "\e315"; font-family: "Material Icons"; font-size: 1.4rem; position: absolute; top: 50%; right: 1.0em; transform: translateY(-50%);}
.home-aboutus .linkMenu li a:hover{ opacity: 0.64;}

/* business */
.home-business{}
.home-business .imgList{ display: flex; justify-content: space-between; flex-wrap: wrap; border-radius: 8px; overflow: hidden; margin-bottom: 3.2rem;}
.home-business .imgList li{ width: 33.333333%;}
.home-business .imgList li img{ width: 100%; height: auto;}
.home-business h3{ font-size: 1.6rem; line-height: 1.2em; font-weight: 700; text-align: center; color: #333; margin-bottom: 0.5em;}
.home-business .link{ width: 72%; margin: 2.4rem auto 0;}
.home-business .link a{ display: block; background: var(--clr-navy); color: #FFF; text-decoration: none; line-height: 1.0em; text-align: center; padding: 1.0em 0; border-radius: 4px; position: relative;}
.home-business .link a:after{ content: "\e315"; font-family: "Material Icons"; font-size: 1.4rem; position: absolute; top: 50%; right: 1.0em; transform: translateY(-50%);}
.home-business .link a:hover{ opacity: 0.64;}

/* recruit */
.home-recruit{ background: url("images/home/home_recruit_bg_sp.webp") no-repeat center center; background-size: cover;}
.home-recruit section div.inner{ width: 100%; padding-top: 60.0vw; margin-left: auto;}
.home-recruit h2.homeHeading{ color: #FFF;}
.home-recruit h2.homeHeading span{ color: #FFF;}
.home-recruit h3{ font-size: 1.6rem; line-height: 1.2em; font-weight: 700; text-align: center; color: #FFF; margin-bottom: 0.5em;}
.home-recruit p{ text-align: center; color: #FFF;}
.home-recruit .link{ width: 72%; margin: 2.4rem auto 0;}
.home-recruit .link a{ display: block; background: #FFF; color: var(--clr-navy); text-decoration: none; line-height: 1.0em; text-align: center; padding: 1.0em 0; border-radius: 4px; position: relative;}
.home-recruit .link a:after{ content: "\e315"; font-family: "Material Icons"; font-size: 1.4rem; position: absolute; top: 50%; right: 1.0em; transform: translateY(-50%);}
.home-recruit .link a:hover{ opacity: 0.64;}

/*--------------------------------------------------------------
# middle page
--------------------------------------------------------------*/
#page-title{ width: 90%; margin: 0px auto; max-width: 1200px; padding: 6.4rem 0 1.6rem; border-bottom: solid 1px #DDD;}
#page-title h2{ background-image: linear-gradient(90deg, #17489d, #2fb7c2); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; font-size: 3.2rem; line-height: 1.2em; font-weight: 700;}
main#static .type-page > p:nth-of-type(n+2){ margin-top: 1.0em;}


/* side menu */
main#static .side-menu-box{ width: 100%; padding: 0 0 4.8rem;}
main#static .side-menu-box h3{ font-size: 2.0rem; line-height: 1.0em; border-bottom: solid 1px #DDD; position: relative;}
main#static .side-menu-box h3:after{ content: ""; width: 2.0em; height: 1px; background: var(--clr-blue); position: absolute; bottom: -1px; left: 0;}
main#static .side-menu-box h3 a{ display: block; padding: 0.72em 0; color: #333; font-weight: 600; text-decoration: none;}
main#static .side-menu-box h3 a:hover{ color: var(--clr-blue);}
main#static .side-menu-box ul{}
main#static .side-menu-box ul li{}
main#static .side-menu-box ul li a{ display: block; padding: 1.0em 0.5em; color: #333; text-decoration: none; border-bottom: solid 1px #EEE;}
main#static .side-menu-box ul li a:hover{ color: rgba(51,51,51,0.72); background: #F6F6F6;}
main#static .side-menu-box ul li ul.children li a{ padding-left: 1.5em;}
li.page-item-278{ display: none;}

/* existing sites
--------------------------------------------------------------*/

/* company */
h2.slogan{ font-size: 2.4rem; line-height: 1.2em; font-weight: 600; color: var(--clr-blue); margin-bottom: 0.5em;}
h2.company01{ font-size: 3.2rem; line-height: 1.2em; text-align: center; margin: 8.0rem 0 0.64em;}
h2.company02{ font-size: 3.2rem; line-height: 1.2em; text-align: center; margin: 8.0rem 0 0.64em;}
h2.company02 span{ display: block; text-align: center; font-size: 2.0rem; line-height: 1.2em; color: var(--clr-blue);}
h2.company02.icon:before{ content: "\e0c8"; font-family: "Material Icons"; font-size: 4.8rem; line-height: 1.0em; display: block; text-align: center; color: var(--clr-blue); margin-bottom: 0.16em;}
.wp-block-vk-blocks-gridcolcard{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.wp-block-vk-blocks-gridcolcard .wp-block-vk-blocks-gridcolcard-item{ width: 47%;}
.wp-block-vk-blocks-gridcolcard .wp-block-vk-blocks-gridcolcard-item h4{ font-size: 1.6rem !important; line-height: 1.2em; font-weight: 600; margin-bottom: 0.48em !important;}
.wp-block-vk-blocks-gridcolcard .wp-block-vk-blocks-gridcolcard-item:nth-child(1) h4:before{ content: "\e533"; font-family: "Material Icons"; color: var(--clr-blue); font-size: 124%; margin-right: 0.24em; position: relative; top: 4px;}
.wp-block-vk-blocks-gridcolcard .wp-block-vk-blocks-gridcolcard-item:nth-child(2) h4:before{ content: "\eff7"; font-family: "Material Icons"; color: var(--clr-blue); font-size: 124%; margin-right: 0.24em; position: relative; top: 4px;}
.history{}
.history dl{ width: 100%; position: relative; padding: 0.24em 0;}
.history dl dt{ font-weight: 600;}

.vk_gridcolcard-2c1b9b47-580d-4f28-8384-a838c6df1478{ gap:inherit !important;}
#post-17 iframe{ width: 100%;}

/* philosophy */
h2.philosophy{ font-size: 2.4rem; line-height: 1.2em; padding: 0.8em 0; border-top: solid 2px var(--clr-blue); border-bottom: solid 1px #DDD; margin-bottom: 0.48em;}

/* project */
h2.project{ font-size: 2.4rem; line-height: 1.2em; padding: 0.8em 0; border: solid 1px #333; border-style: solid none; margin-bottom: 0.48em;}

/* works */
.wp-block-gallery{ display: flex; justify-content: space-between; flex-wrap: wrap; margin: 1.0em 0 4.0rem;}
.wp-block-gallery .wp-block-image{ width: 48%;}
.wp-block-gallery .wp-block-image img{ width: 100%; height: auto;}

.wp-block-list,
.is-style-default{ padding-left: 1.2em;}
.wp-block-list > li,
.is-style-default > li{ position: relative;}
.wp-block-list > li:nth-of-type(n+2),
.is-style-default > li:nth-of-type(n+2){ margin-top: 1.0em;}
.wp-block-list > li:before,
.is-style-default > li:before{ content: "\e837"; font-family: "Material Icons"; position: absolute; top: 0; left: -1.2em;}
.wp-block-list li ul.wp-block-list,
.is-style-default li ul.wp-block-list{ padding-left: 1.2em; margin-top: 0.5em;}
.wp-block-list li ul.wp-block-list li,
.is-style-default li ul.wp-block-list li{ position: relative;}
.wp-block-list li ul.wp-block-list li:before,
.is-style-default li ul.wp-block-list li:before{ content: "\e57b"; font-family: "Material Icons"; position: absolute; top: 0; left: -1.2em;}
.wp-block-list li ul.wp-block-list li:nth-of-type(n+2),
.is-style-default li ul.wp-block-list li:nth-of-type(n+2){ margin-top: 0.24em;}
.wp-block-image .wp-element-caption{ font-size: 1.2rem; line-height: 1.2em; text-align: center;}

/* sun-tech-recruit */
ul.sun-tech-recruit{}
ul.sun-tech-recruit li:nth-child(1){ border-bottom: solid 1px #DDD;}
ul.sun-tech-recruit li a{ display: block; font-size: 1.8rem; line-height: 1.2em; padding: 1.0em 0; color: #333; text-decoration: none;}
ul.sun-tech-recruit li a:hover{ color: var(--clr-blue);}

/* recruit */
#post-65 .wp-block-cover h2.wp-block-heading{ font-size: 3.2rem !important; line-height: 1.2em; text-align: center;}
#post-65 .wp-block-cover p.has-text-align-center{ color: var(--clr-blue); margin-top: 0.5em;}
#post-65 h3.wp-block-heading{ font-size: 2.4rem; line-height: 1.2em; text-align: center; font-weight: 600; margin-top: 8.0rem;}
#post-65 .wp-block-separator{ margin: 8.0rem 0;}
#post-65 #vk-htags-95429600-7ad7-4568-8500-5e211a6db320{ background: #EEE; font-size: 3.2rem !important; line-height: 1.0em; text-align: center; padding: 0.8em;}
#post-65 table{ margin-top: 4.0rem;}
#post-65 table tr td:nth-of-type(1){ background: #EEE;}
#post-65 .wp-block-vk-blocks-button{ text-align: center; margin-top: 1.5em;}
#post-65 .wp-block-vk-blocks-button a{ color: #FFF; text-decoration: none; line-height: 1.0em; background: var(--clr-blue); padding: 1.0em 2.4em; border-radius: 8px; display: inline-block;}
#post-65 .wp-block-vk-blocks-button a:hover{ color: #FFF; background: var(--clr-navy);}
#post-65 .wp-block-buttons{ margin-top: 1.0em;}

/* interview */
#post-657 .wp-block-columns{ display: flex; justify-content: space-between; flex-wrap: wrap; flex-grow: 0 !important; margin-top: 4.0rem;}
#post-657 .wp-block-columns div h2.wp-block-heading{ font-size: 2.0rem; line-height: 1.2em; padding: 0.64em 0; border-top: solid 2px var(--clr-blue); border-bottom: solid 1px #DDD; margin-bottom: 0.48em;}
#post-657 .wp-block-columns > div{ width: 47%;}
#post-657 .wp-block-columns > div:nth-child(n+3){ margin-top: 2.4rem;}
#post-657 .wp-block-columns > div img{ width: 100%; height: auto;}
#post-657 .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{ flex-grow: 0 !important; flex-basis:auto !important;}

/* 詳細ページ */
.wp-block-column .vk_block-margin-0--margin-bottom{ font-size: 2.4rem; line-height: 1.2em; font-weight: normal;}
.wp-block-column .vk_block-margin-0--margin-bottom strong{ font-size: 3.2rem; line-height: 1.2em; font-weight: 400;}
.wp-block-column h4.wp-block-heading{ font-size: 1.6rem; line-height: 1.2em; color: var(--clr-blue); margin-top: 1.5em;}
.wp-block-vk-blocks-accordion{ border: solid 1px #DDD; padding: 1.0em; margin-top: 4.0rem;}
.wp-block-vk-blocks-accordion .wp-block-group .wp-block-vk-blocks-icon{ display: none;}
.wp-block-vk-blocks-accordion .wp-block-group > p{ padding-left: 1.2em; position: relative;}
.wp-block-vk-blocks-accordion .wp-block-group > p:before{ content: "\e887"; font-family: "Material Icons"; color: var(--clr-blue); position: absolute; top: 0; left: 0;}
.wp-block-vk-blocks-accordion .wp-block-vk-blocks-accordion-target{ margin-top: 0.5em;}

/* ある日のスケジュール */
.wp-block-group.vk_block-margin-lg--margin-top.has-background{ margin-top: 8.0rem;}
.wp-block-group.vk_block-margin-lg--margin-top.has-background h2.wp-block-heading{ font-size: 2.4rem; line-height: 1.2em; text-align: center; font-weight: 600;}

.wp-block-vk-blocks-timeline .wp-block-vk-blocks-timeline-item{ margin: 5px 0; position: relative; padding-left: 1.0em;}
.wp-block-vk-blocks-timeline .wp-block-vk-blocks-timeline-item:before{ content: ""; width: 4px; height: 100%; background: #CCC; position: absolute; top: 0; left: 0;}

.wp-block-vk-blocks-timeline .wp-block-vk-blocks-timeline-item .vk_timeline_item_caption{ position: relative;}
.wp-block-vk-blocks-timeline .wp-block-vk-blocks-timeline-item .vk_timeline_item_caption:before{ content: ""; width: 16px; height: 16px; background: var(--clr-blue); border: solid 4px #F8F8F8; border-radius: 100%; position: absolute; top: 0; left: -2.6rem; z-index: 10;}

.vk_timeline_item_content h4.vk_heading_title{ font-size: 2.4rem; line-height: 1.2em; margin: 0.64em 0; position: relative;}
.vk_timeline_item_content h4.vk_heading_title i{ color: var(--clr-blue); margin-right: 0.24em;}
.vk_timeline_item_content .wp-block-vk-blocks-balloon{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding: 1.0em 0;}
.vk_timeline_item_content .wp-block-vk-blocks-balloon figure{ width: 9.6%; border-radius: 100%; overflow: hidden; margin-bottom: 0; order: 1;}
.vk_timeline_item_content .wp-block-vk-blocks-balloon figure img{ width: 100%; height: auto;}
.vk_timeline_item_content .wp-block-vk-blocks-balloon .vk_balloon_icon{ display: none;}
.vk_timeline_item_content .wp-block-vk-blocks-balloon .vk_balloon_content_outer{ background: #FFF; border: solid 1px #DDD; padding: 1.0em; border-radius: 8px; order: 2; width: 90%;}

.vk_timeline_item_content .wp-block-vk-blocks-balloon:nth-of-type(2) figure,
.vk_timeline_item_content .wp-block-vk-blocks-balloon:nth-of-type(4) figure{ order: 2;}
.vk_timeline_item_content .wp-block-vk-blocks-balloon:nth-of-type(2) .vk_balloon_content_outer,
.vk_timeline_item_content .wp-block-vk-blocks-balloon:nth-of-type(4) .vk_balloon_content_outer{ order: 1;}
.vk_timeline_item_content .wp-block-vk-blocks-balloon .vk_balloon_content_outer p{ font-size: 1.6rem !important; line-height: 1.4em;}

/* お知らせ一覧 */
.news-grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 60px;}
.news-card { position: relative; overflow: hidden; background: #000; aspect-ratio: 4 / 3; border-radius: 16px;}
.news-card-overlay-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; text-decoration: none; background: transparent;}

.news-card-thumb { width: 100%; height: 100%; position: relative; z-index: 1;}
.news-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; display: block;}
.news-card-category { position: absolute; top: 0; right: 0; padding: 6px 15px; font-size: 0.8rem; font-weight: bold; color: #fff; z-index: 5;background: #333;}
.news-card-category.cat-news { background: #17489d;}
.news-card-category.cat-blog { background: #e60012;}
.news-card-category.cat-info { background: #00a0e9;}
.news-card-info { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none;}
.news-card-info::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 70px; background: rgba(0,0,0,0.72); transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 1;}
.news-card-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1.0em; box-sizing: border-box; z-index: 2; transform: translateY(0); transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.news-card-title { font-size: 1.6rem; line-height: 1.2em; margin: 0; font-weight: bold; color: #fff;}
.news-card-date { display: block; font-size: 1.2rem; color: #FFF; margin-top: 10px; opacity: 0; max-height: 0; transition: opacity 0.4s ease, max-height 0.4s ease;}
.news-card:hover .news-card-thumb img { transform: scale(1.1);}
.news-card:hover .news-card-info::before { height: 100%;}
.news-card:hover .news-card-content { transform: translateY(-200%);}
.news-card:hover .news-card-date { opacity: 1; max-height: 20px;}
@media (max-width: 768px) {
.news-grid-container { grid-template-columns: 1fr;}
}
/* エントリー完了 */
.thanks h2{ text-align: center; font-size: 2.4rem; line-height: 1.2em; color: var(--clr-blue);}
.thanks p{ margin-top: 1.5em;}

/* サイトマップ */
h2.wsp-pages-title{ display: none;}
.wsp-pages-list{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.wsp-pages-list > li{ width: 48%; margin-top: 4.0rem;}
.wsp-pages-list > li:nth-of-type(1),
.wsp-pages-list > li:nth-of-type(2){ margin-top: 0;}
.wsp-pages-list > li a{ display: block; color: #333; border-bottom: solid 1px #DDD; padding: 1.0em 0; line-height: 1.2em; position: relative; text-decoration: none;}
.wsp-pages-list > li a:before{ content: ""; width: 2.0em; height: 1px; background: var(--clr-blue); position: absolute; bottom: -1px; left: 0;}
.wsp-pages-list > li a:hover{ color: var(--clr-navy);}
.wsp-pages-list li ul{ display: block;}
.wsp-pages-list li ul li{ width: 100%;}
.wsp-pages-list li ul li a{ display: block; border-bottom: solid 1px #EEE; position: relative; padding: 1.0em 0.5em;}
.wsp-pages-list li ul li a:hover{ background: var(--clr-bgc); color: var(--clr-blue);}
.wsp-pages-list li ul li a:before{ content: none;}

/* 個人情報保護方針 */
#post-963 h2.wp-block-heading{ margin-top: 8.0rem;}
#post-963 .wp-block-list{ margin-top: 1.0em;}

/* 404 not found
--------------------------------------------------------------*/
body.error404 .entry-content{}
body.error404 .entry-header h1{ width: 100%; padding: 1.6em 5% 0.4em; font-size: 3.2rem; line-height: 1.2em; text-align: center !important; color: var(--clr-prim); letter-spacing: 0.05em; position: relative; border-top: solid 1px #DDD;}
body.error404 .entry-header h1:after{ content: ""; width: 2.0em; height: 1px; background: var(--clr-prim); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}

section.error404{}
section.error404 h2{ font-size: 6.5rem; line-height: 1.2em; text-align: center; color: rgba(51,51,51,0.4);}
section.error404 h2 strong{ display: block; text-align: center; font-size: 20.0rem; line-height: 1.0em;}
section.error404 p{ text-align: center; margin-top: 2.0em;}

/* post
--------------------------------------------------------------*/

/*　archive/category　*/

/* single */
main#single-post{}
main#single-post .entry-header h2.entry-title{ font-size: 2.4rem; line-height: 1.2em;}
main#single-post .entry-meta{ background: var(--clr-bgc); padding: 0.48em; margin: 1.0em 0;}
main#single-post .entry-meta span{ display: inline-block; font-size: 1.4rem; line-height: 1.0em; margin-right: 1.0em;}
main#single-post .post-thumbnail{ display: none;}
main#single-post .entry-content p{ margin-top: 1.5em;}

/* pagenation */
.posts-navigation{ display: none;}
.wp-pagenavi{ margin-top: 6.4rem; display: flex; justify-content: center; flex-wrap: wrap;}
.wp-pagenavi a,
.wp-pagenavi span{ font-size: 1.6rem; line-height: 2.4rem; min-width: 3.2rem; text-align: center; padding: 0.5em !important; margin: 0 2px !important; border: solid 1px #DDD !important; border-radius: 2px;}
.wp-pagenavi span.current{ border-color: #CCC !important; background: #EEE; font-weight: normal !important;}
.wp-pagenavi a:hover{ background: #999 !important; color: #FFF !important; border-color: #888 !important;}

/* side navigation */
.widget_block:nth-child(n+2){ margin-top: 4.0rem;}
.side-widget-title { font-size: 2.0rem; line-height: 1.2em; padding-bottom: 0.8em; border-bottom: solid 1px #DDD; position: relative;}
.side-widget-title:before{ content: ""; width: 2.0em; height: 1px; background: var(--clr-blue); position: absolute; bottom: -1px; left: 0;}
li.page-item-1681{ display: none;}

/* スマホなどで見出しが大きすぎる場合の調整 */
@media (max-width: 768px) {
    .side-widget-title {
    }
}
.side-cat-list,
.side-archive-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-cat-list li a,
.side-archive-list li a {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
    transition: all 0.3s ease 0s;
}

.side-cat-list li a:hover,
.side-archive-list li a:hover {
    color: var(--clr-blue); background: var(--clr-bgc);
}

/* --- 最新の投稿リスト --- */
.side-latest-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-latest-list li {
    border-bottom: 1px solid #eee;
padding: 1.6rem 0;
}
.side-latest-list li:last-child {
    border-bottom: none;
}

.side-latest-list li a {
    display: flex; /* 画像とテキストを横並び */
    text-decoration: none;
    color: #333;
    gap: 10px;
}

/* サムネイル部分 */
.side-latest-thumb {
    width: 80px;  /* 画像の幅 */
    flex-shrink: 0; /* 幅を固定 */
}
.side-latest-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3; /* 比率を固定 */
    object-fit: cover;
    border-radius: 4px;
}

/* テキスト部分 */
.side-latest-meta {
    flex: 1;
}

.side-latest-meta time {
    display: block;
    font-size: 1.2rem;
    line-height: 1.2em;
    color: #888;
    margin-bottom: 4px;
}

.side-latest-title {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.2em;
    font-weight: bold;
    /* 2行で省略する設定 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.side-latest-list li a:hover .side-latest-title {
    color: #17489d;
}

/* next back */
.post-navigation{ width: 100%; margin: 0px auto; }
.nav-links{ display: flex; justify-content: space-between; flex-wrap: wrap; border-top: double 3px #E4E4E4; padding-top: 2.0rem; margin: 0px auto;}
.nav-previous .nav-subtitle,
.nav-next .nav-subtitle{ display: none;}
.nav-previous a,
.nav-next a{ color: #333; text-decoration: none; display: inline-block; position: relative;}
.nav-previous a:hover,
.nav-next a:hover{ color: rgba(51,51,51,0.6);}
.nav-previous a:before{ content: "\e5e1"; font-family: "Material Icons"; color: var(--clr-prim); padding-right: 0.5em;}
.nav-next a:after{ content: "\e5e1"; font-family: "Material Icons"; color: var(--clr-prim); padding-left: 0.5em;}

/* contact form
--------------------------------------------------------------*/
.wpcf7{ margin: 4.0rem 0;}
.form-wrap{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.form-wrap .column{ width: 47%;}
.form-wrap .single{ width: 100%;}
.form-wrap div dl dt{ padding-top: 1.0em; padding-bottom: 0.24em}
.form-wrap div dl dt span.req{ display: inline-block; position: relative;}
.form-wrap div dl dt span.req:after{ content: "必須"; font-size: 1.2rem; line-height: 1.0em; color: #FFF; background: var(--clr-red); padding: 0.16em 0.24em; border-radius: 2px; position: absolute; top: 50%; left: calc(100% + 1.0em); transform: translateY(-50%); word-break: keep-all;}
.form-wrap div dl dd{ padding-bottom: 1.0em;}
.form-wrap dl.policy{ width: 100%;}
.form-wrap dl.policy dt{ text-align: center; line-height: 1.2em;}
.form-wrap dl.policy dd{ text-align: center; padding-top: 0.5em;}
.form-wrap .submit{ width: 100%; text-align: center; margin-top: 2.4rem;}
.form-wrap .submit input[type="button"]{ background: #EEE; border-color: #E4E4E4; font-size: 1.6rem; font-weight: 600; line-height: 1.0em; padding: 1.25em 2.0em; border-radius: 0; cursor: pointer; border-radius: 8px; margin-right: 2.0em;}
.form-wrap .submit input[type="submit"]{ background: var(--clr-red); color: #FFF; border-color: var(--clr-red); font-size: 1.6rem; font-weight: 600; line-height: 1.0em; padding: 1.1em 6.0em; border-radius: 0; cursor: pointer; border-radius: 8px;}

.form-wrap div dl dd input[type="tel"],
.form-wrap div dl dd input[type="text"],
.form-wrap div dl dd input[type="email"],
.form-wrap div dl dd textarea{ width: 100%; border: solid 1px #DDD; background: #F9F9F9; padding: 0.64em; border-radius: 4px; transition: all 0.3s ease 0s;}
.form-wrap div dl dd input[type="tel"]:focus,
.form-wrap div dl dd input[type="text"]:focus,
.form-wrap div dl dd input[type="email"]:focus,
.form-wrap div dl dd textarea:focus{ outline: none; background: #FFF; border: solid 1px #DDD;}
.form-wrap div dl dd input.wpcf7-not-valid,
.form-wrap div dl dd textarea.wpcf7-not-valid{}
.wpcf7-form-control.wpcf7-checkbox{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item{ margin-left: 0px; padding-right: 2.0em;}
.wpcf7-form-control.wpcf7-acceptance.optional .wpcf7-list-item{ margin-left: 0px;}
.wpcf7-not-valid-tip{ font-size: 1.4rem !important; line-height: 1.2em !important; font-weight: 600; color: #FF0000 !important; margin-top: 0.5em;}
.wpcf7-list-item.first{ margin-left: 0;}

.wpcf7-spinner{ display: none !important;}
.wpcf7-response-output{ text-align: center; background: #FFF;}

/* Forms
========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { overflow: visible;}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { text-transform: none;}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] { -webkit-appearance: button;}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText;}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] { box-sizing: border-box; padding: 0;}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto;}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px;}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
#wrapper{ width: 100%; margin: 0px auto; position: relative; overflow: hidden;}

/* header */
header#masthead{ width: 96%; margin: 0px auto; padding: 1.6rem 0; border-bottom: solid 1px #DDD;}
.site-description{ display: none;}
header#masthead .site-branding{ width: 24%; margin: 0px auto;}
header#masthead .site-branding .site-title a{ display: block;}
header#masthead .site-branding .site-title img{ width: 100%; height: auto;}
header#masthead .header-information{ display: none;}

body#home header#masthead{ border-bottom: none;}

/* breadcrumb */
.breadcrumbs{ width: 90%; margin: 0.5em auto 0; max-width: 1200px;}
.breadcrumbs > span{ padding-right: 1.0em; display: inline-block; font-size: 1.2rem; line-height: 1.0em; color: rgba(51,51,51,0.48);}
.breadcrumbs > span:nth-child(n+2){ padding-left: 1.0em;}
.breadcrumbs > span a{ display: inline-block; color: #333; text-decoration: none;}
.breadcrumbs > span a:hover{ color: rgba(51,51,51,0.64);}

/* footer-information */
body#home #footer-information{ border-top: none;}
#footer-information{ padding: 3.2rem 0; border-top: solid 1px #DDD;}
#footer-information section{ width: 90%; margin: 0px auto; max-width: 1200px; margin: 0px auto;}
#footer-information section h2{ font-size: 2.4rem; line-height: 1.2em; text-align: center; font-weight: 700;}
#footer-information section h2 span{ display: block; font-size: 1.6rem; line-height: 1.2em; text-align: center; font-weight: 700; color: var(--clr-blue); margin-top: 0.5em;}
#footer-information section .column{ width: 100%; margin: 2.4rem auto 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
#footer-information section .column .inner{ width: 100%;}
#footer-information section .column .inner:nth-child(n+2){ margin-top: 2.0em;}
#footer-information section .column .inner h3{ font-size: 1.6rem; line-height: 1.0em; font-weight: 600; text-align: center;}
/*#footer-information section .column .inner h3:before{ content: ""; width: 64px; height: 64px; display: block; margin: 0px auto 0.5em;}
#footer-information section .column .inner:nth-child(1) h3:before{ background: url("images/footer_icon_mail.svg") no-repeat; background-size: cover;}
#footer-information section .column .inner:nth-child(2) h3:before{ background: url("images/footer_icon_phone.svg") no-repeat; background-size: cover;}*/
#footer-information section .column .inner.mail a{ display: block; width: 80%; margin: 0.5em auto 0; line-height: 1.0em; font-weight: 600; color: #FFF; text-decoration: none; text-align: center; padding: 1.5em 0; border-radius: 8px; overflow: hidden; position: relative;}
#footer-information section .column .inner.mail a span{ display: inline-block; position: relative; z-index: 10;}
#footer-information section .column .inner.mail a:before{ content: ""; width: 200%; height: 100%; background-image: linear-gradient(90deg, #2fb7c2, #17489d 50%, #2fb7c2); position: absolute; top: 0; left: -100%; transition: all 0.3s ease 0s;}
#footer-information section .column .inner.mail a:hover:before{ left: 0%;}
#footer-information section .column .inner.phone p{ display: flex; justify-content: center; flex-wrap: wrap; align-items: baseline; line-height: 1.0em; margin-top: 1.0em; color: var(--clr-blue);}
#footer-information section .column .inner.phone p a{ display: inline-block; font-size: 3.2rem; color: var(--clr-blue); text-decoration: none;}
#footer-information section .column .inner.phone p a:hover{ color: var(--clr-blue);}
#footer-information section .column .inner.phone span{ display: block; font-size: 1.2rem; line-height: 1.4em; text-align: center; margin-top: 1.0em; padding: 0 3%;}

/* footer */
footer#colophon{ background: #FFF; border-top: solid 4px var(--clr-red); padding: 0;}
footer#colophon section{ width: 100%; max-width: 1200px; margin: 0px auto;}
footer#colophon section nav{ display: none;}

.copyright{ line-height: 1.0em; text-align: center; padding: 0.72em 0;}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.menu-navigation-container{ display: none;}
#site-navigation{ display: flex; flex-wrap: wrap; align-items: center; margin-top: 0.5em;}
#primary-menu{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-right: 2.0em;}
#primary-menu li{position: relative;}
#primary-menu > li:before{ content: ""; width: 0; height: 1px; background: var(--clr-blue); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: all 0.3s ease 0s;}
#primary-menu > li:hover:before{ width: 90%;}
#primary-menu li a{ display: block; position: relative; cursor: pointer; text-decoration: none; padding: 0.8em 1.0em; font-weight: 600;}
#primary-menu li a:hover{}
#primary-menu li ul{ display: block; position: absolute; width: 100%; min-width: 160%; top: 110%; left: -30%; nowhitespace: afterproperty; opacity: 0; transition: all 0.3s ease 0s; visibility: hidden; z-index: 100; background: #FFF; box-shadow: 0 0 16px rgba(0,0,0,0.16);}
#primary-menu li:hover > ul{ top: 100%; margin: 0; opacity: 1; visibility: visible;}
#primary-menu li ul li{ border-bottom: solid 1px #EEE;}
#primary-menu li ul li:last-child{ border-bottom: none;}
#primary-menu li ul li a{ display: block; text-align: center; font-weight: normal;}
#primary-menu li ul li:before{ content: none;}
#primary-menu li ul li a:hover{ background: var(--clr-bgc);}
#primary-menu li ul li ul{ nowhitespace: afterproperty; top: 0; left: 100%; opacity: 0; min-width: 180%;}
#primary-menu li ul li:hover ul{ top: 0; left: 100%; margin: 0; opacity: 1; visibility: visible;}
.menu-toggle { display: none;}
.navi-button{ display: flex; flex-wrap: wrap;}
.navi-button li a{ display: block; min-width: 160px; text-align: center; line-height: 1.0em; font-weight: 600; color: #FFF; text-decoration: none; background: #111; padding: 0.8em 1.6em; border-radius: 100px;}
.navi-button li:nth-child(1) a{ background: var(--clr-red);}
.navi-button li:nth-child(1) a:hover{ background: #AB1812;}
.navi-button li:nth-child(2){ margin-left: 1.0em;}
.navi-button li:nth-child(2) a{ background: var(--clr-blue);}
.navi-button li:nth-child(2) a:hover{ background: #113574;}
li#menu-item-551,
li#menu-item-88{ display: none;}

/* Posts and pages
--------------------------------------------- */
.sticky { display: block;}
.post,
.page {}
.updated:not(.published) { display: none;}
.page-content,
.entry-content,
.entry-summary { margin: 0 auto;}
.entry-content{ padding: 0;}
.page-links { clear: both; margin: 0 0 1.5em;}

/* Comments
--------------------------------------------- */
.comment-content a { word-wrap: break-word;}
.bypostauthor { display: block;}

/* Widgets
--------------------------------------------- */
.widget {}
.widget select { max-width: 100%;}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0;}

/* Make sure logo link wraps around logo image. */
.custom-logo-link { display: inline-block;}

/* Captions
--------------------------------------------- */
.wp-caption { margin-bottom: 1.5em; max-width: 100%;}
.wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto;}
.wp-caption .wp-caption-text { margin: 0.8075em 0;}
.wp-caption-text { text-align: center;}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer { display: none;}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer { display: block;}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;}
.screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000;}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus { outline: 0;}

/* Alignments
--------------------------------------------- */
.alignleft { float: left; margin-right: 1.5em; margin-bottom: 1.5em;}
.alignright { float: right; margin-left: 1.5em; margin-bottom: 1.5em;}
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em;}

/* pagination
--------------------------------------------- */
.pagination { display: flex; align-items: center; justify-content: center; margin: 4.0rem 0; position: relative; font-size: 12px;}
.pagination span,
.pagination a { display: block; width: auto; margin: 4px; padding: 8px; border: 1px solid #555; color: #333; text-decoration: none; text-align: center; line-height: 16px; border-radius: 4px;}
.pagination .pager { width: 32px;}
.pagination a:hover,
.pagination .current { color: #fff; border-color: #555; background-color: #555;}
.pagination a.prev { margin-right: 16px;}
.pagination a.next { margin-left: 16px;}
.pagination a.first {}
.pagination a.last {}
.pagination span.page_num { display: none;}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] { border: 1px solid; border-color: #ccc #ccc #bbb; border-radius: 3px; background: #e6e6e6; color: rgba(0, 0, 0, 0.8); line-height: 1; padding: 0.6em 1em 0.4em;}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover { border-color: #ccc #bbb #aaa;}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus { border-color: #aaa #bbb #bbb;}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; padding: 3px;}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus { color: #111;}
select { border: 1px solid #ccc;}
textarea { width: 100%;}
}