@charset "utf-8";
/*-------------------------------------------------
パソコン961px以上
モバイル320〜960px
-------------------------------------------------*/

*,
*:before,
*:after{box-sizing: border-box;}

html{
font-synthesis: none; /*偽ボールド防止*/
scroll-behavior: smooth; scroll-padding-top:100px;
font-size:min(1.38vw,18px);}
@media screen and (max-width:960px){
html{scroll-padding-top:80px;
font-size:min(4.3vw,17px);}
}
/*スクロールバーをコンパクトに*/
*{scrollbar-color: #ccc #eee; scrollbar-width: thin;}/*firefox*/
html::-webkit-scrollbar {width: 8px; height: 8px;}
html::-webkit-scrollbar-thumb {background: #ccc;}
html::-webkit-scrollbar-track {background: #eee;}

@font-face {
font-family: "Noto Sans JP";
src: url("../font/NotoSansJP-VariableFont_wght.woff2");
font-display: swap;
font-optical-sizing: auto; 
  ascent-override: 90%;
  descent-override: 10%;
  line-gap-override: 0%;
}
/*ボディ*/
body {font-family:"Noto Sans JP", sans-serif; line-height:1.8; min-width:1000px; position:relative; overflow-wrap: break-word; -webkit-text-size-adjust: none;}
@media screen and (max-width:960px){
body { min-width: 320px;}
}

/*ページ*/
.page{padding-top: 100px;}
@media screen and (max-width:960px){
.page{padding-top: 80px;}
}

/*明朝体*/
.min{font-family:"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "Noto Serif JP" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;}

/*ゴシック体*/
.go{font-family:"Noto Sans JP", sans-serif;}

/*New Attenに似た代替フォント
https://fonts.google.com/specimen/Afacad+Flux*/
@font-face {
font-family: "af";
src: url("../font/AfacadFlux-VariableFont_slnt,wght.woff2");
font-display: swap;
font-optical-sizing: auto; 
  ascent-override: 83%;
  descent-override: 17%;
  line-gap-override: 0%;
}
.af{font-family:"af" , sans-serif;}

/*画像*/
img{max-width:100%; height: auto; position:relative; line-height:1; vertical-align:middle;}

/*アンカーリンク*/
a{color: #19529F; text-decoration: underline; text-underline-offset: 0.2em;}
a:hover{text-decoration: none;}

/*ホバー画像*/
a img{transition: 0.2s filter;}
a:hover img{filter: brightness(105%) saturate(105%) contrast(105%);}

/*文字色*/
.color{color: #19529F;}
.color.blue{color: #1397D7;}
.color.green{color: #10AA8F;}
.color.yellow{color: #ECA826;}
.color.orange,
.color.contact{color: #ED833D;}
.color.red{color: #EF5064;}
.color.purple{color: #845182;}

/*ボタン*/
.button{min-height: 3.3em; padding:0.4em 2.5em 0.4em; line-height: 1.2; font-weight:bold; text-align:center; vertical-align:middle; cursor: pointer; border-radius:0.2em; position:relative; display:inline-flex; align-items: center; justify-content: center; color:#fff; background:#19529F; border:none; box-shadow: 0 0 0 1px rgba(0,0,0,0.3) inset , 0 -0.2em 0 0 rgba(0,0,0,0.2) inset; text-decoration:none; transition: 0.2s color,0.2s background,0.2s border,0.2s box-shadow,0.2s opacity,0.2s filter;}
.button:hover{background: #0D3681;}
.button:hover img{filter: none;}
/*色分け*/
.button.blue{background: #1397D7;}
.button.blue:hover{background: #0A78C6;}
.button.green{background: #10AA8F;}
.button.green:hover{background: #088D6F;}
.button.yellow{background: #ECA826;}
.button.yellow:hover{background: #E38B15;}
.button.orange,
.button.contact{background: #ED833D;}
.button.orange:hover,
.button.contact:hover{background: #E46325;}
.button.red{background: #EF5064;}
.button.red:hover{background: #E73445;}
.button.reverse{background: #fff; color: #19529F; box-shadow: 0 0 0 2px inset currentColor, 0 -0.2em 0 0 rgba(0,0,0,0.2) inset;}
.button.reverse:hover{background: #E6ECF4; color: #0D3681;}
.button.reverse.blue{color: #1397D7;}
.button.reverse.blue:hover{background: #DCF0F9; color: #0A78C6;}
.button.reverse.green{color: #10AA8F;}
.button.reverse.green:hover{background: #DBF2EE; color: #088D6F;}
.button.reverse.yellow{color: #ECA826;}
.button.reverse.yellow:hover{background: #FCF0DA; color: #ED833D;}
.button.reverse.orange,
.button.reverse.contact{color: #ED833D;}
.button.reverse.orange:hover,
.button.reverse.contact:hover{background: #FCEDE2; color: #E46325;}
.button.reverse.red{color: #EF5064;}
.button.reverse.red:hover{background: #FDE8EB; color: #E73445;}
/* ボタンの影を無効 */
.button.no_shadow{box-shadow: 0 -0.2em 0 0 rgba(0,0,0,0.2) inset;}
/*ボタンにアイコン*/
.button.icon:after,
.button.icon.left:before{font-family:"Font Awesome 6 Free"; font-weight:600; content: "\f054"; margin-left: 0.7em; display: inline-block; transform: scale(0.7); transform-origin: right center;}
.button.icon:not(.left):before{display: none;}
.button.icon.left:after{display: none;}
.button.icon.left:before{content: "\f053"; margin-left: 0; margin-right: 0.7em; transform-origin: left center;}
.button.icon.next:before,
.button.icon.next:after{content: "\f054";}
.button.icon.back:before,
.button.icon.back:after{content: "\f053";}
.button.icon.up:before,
.button.icon.up:after{content: "\f077";}
.button.icon.link:before,
.button.icon.link:after{content: "\f35d";}
/*アイコンの位置が固定*/
.button.icon:not(.left).absolute{padding-right: 3em;}
.button.icon.left.absolute{padding-left: 3em;}
.button.icon.absolute:before{position: absolute; top: 50%; left: 1em;transform: translateY(-50%) scale(0.7);}
.button.icon.absolute:after{position: absolute; top: 50%; right: 1em;transform: translateY(-50%) scale(0.7);}
/*ボタンの幅を調整*/
.button.fix_width{min-width: 22em;}
.button.fix_width.fix_large{min-width: 28em; font-size: 130%; min-height: 4em;}
@media screen and (max-width:960px){
.button.fix_width{width:min(100%,22em); min-width: inherit;}
.button.fix_width.fix_large{width:min(100%,28em); min-width: inherit; font-size: 110%;}
}
/* 経路ボタン */
.button.route img{height: 1.4em; margin: 0 0.5em 0 0;}
/*ボタンを無効*/
.button.disable,
.button.disabled{pointer-events: none; opacity: 0.3;}

/*マーキング*/
.mark{background: linear-gradient(to bottom,transparent 60%,#95DDFF 60%); text-shadow: 1px 1px 0 #fff;}
.mark.green{background: linear-gradient(to bottom,transparent 60%,#95EABF 60%); }
.mark.red{background: linear-gradient(to bottom,transparent 60%,#FFBFCF 60%);}
.mark.yellow,
.mark.orange{background: linear-gradient(to bottom,transparent 60%,#FFD280 60%);}

/*その他*/
small{ font-size:70%;}
.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}
img.center{display: block; margin-left: auto; margin-right: auto;}
.oh{ overflow:hidden;}
.ib{ display:inline-block;}
.indent{ padding-left:1em; text-indent:-1em;}
p.indent+p.indent{margin-top: -0.5em;}
.normal{ font-weight: normal !important;}
.bold{ font-weight:bold !important;}
.palt{font-feature-settings:"palt";}
.relative{position: relative;}
.stretch{align-items: stretch !important;}
.no_margin{margin: 0 !important;}
.no_padding{padding: 0 !important;}

/*ロングコメント*/
.longComment p{ margin:0 !important;}
.noData { color:rgba(0,0,0,0.6); font-weight: bold;}

/*PC調整*/
@media screen and (min-width:961px){
.sp,.pcHidden{ display:none !important;}
.center-left,.center-right{ text-align:center;}
.left-center,.left-right{ text-align:left;}
.right-center,.right-left{ text-align:right;}
a[href^="tel:"]{pointer-events: none; text-decoration: none !important; color: inherit !important;}
}
/*SP調整*/
@media screen and (max-width:960px){
.pc,.spHidden{ display:none !important;}
.center-left,.right-left{ text-align:left;}
.left-center,.right-center{ text-align:center;}
.left-right,.center-right{ text-align:right;}
.spWidth100per{ width:100% !important;}
.spWidth90per{ width:90% !important;}
.spWidth80per{ width:80% !important;}
.spWidth70per{ width:70% !important;}
.spWidth60per{ width:60% !important;}
.spWidth50per{ width:50% !important;}
.spWidth40per{ width:40% !important;}
.spWidth30per{ width:30% !important;}
.spWidth20per{ width:20% !important;}
.spWidth10per{ width:10% !important;}
.spFontSize70per{font-size: 70% !important;}
.spFontSize80per{font-size: 80% !important;}
.spFontSize90per{font-size: 90% !important;}
.spFontSize100per{font-size: 100% !important;}
.spFontSize110per{font-size: 110% !important;}
.spFontSize120per{font-size: 120% !important;}
.spFontSize130per{font-size: 130% !important;}
.spFontSize140per{font-size: 140% !important;}
.spFontSize150per{font-size: 150% !important;}
.spFontSize160per{font-size: 160% !important;}
.spFontSize170per{font-size: 170% !important;}
.spFontSize180per{font-size: 180% !important;}
.spFontSize190per{font-size: 190% !important;}
.spFontSize200per{font-size: 200% !important;}
.spFontSize400per{font-size: 400% !important;}
}
@media print{
.sp{ display:none !important;}
}

/*コンテナを囲んで塗りたいとき*/
.wrapper{padding: 6em 0; background: #e5ecf4; position: relative; z-index: 10;}
@media screen and (max-width:960px){
.wrapper{padding: 4em 0;}
}
.wrapper>*:first-child{margin-top: 0;}
.wrapper>*:last-child{margin-bottom: 0;}

.wrapper.white{background: #fff;}
.wrapper.green{background: #DBF2EE;}
.wrapper.reverse{background: #19529f; color: #fff;}
.wrapper.reverse a:not(.button){color: #fff;}
.wrapper.reverse.green{background: #10aa8f;}

/*ページの幅を制限するコンテナ*/
.container{max-width: 1280px; padding: 0 40px; margin: auto;}
.container.wide{max-width: 1480px;}
.container.wide.super{max-width: 1680px;}
@media screen and (min-width:961px){
.narrow{ max-width:83.3%;/*コンテナを基準に1000px相当*/ margin:auto;}
.container.wide .narrow{max-width:85.7%;/*コンテナを基準に1200px相当*/}
.container.wide.super .narrow{max-width:87.5%;/*コンテナを基準に1400px相当*/}
}
@media screen and (max-width:960px){
.container{padding: 0 0px; width:80%;}
}
@media screen and (max-width:480px){
.container{padding: 0 20px; width:100%;}
}
/*アニメーション*/
@media screen{
.container{opacity: 0;
animation: fade 0.5s 0.2s ease-out both;}
}

/*セクション*/
section+section,
.section+section,
.section+.section,
section+.section{margin-top: 6em;}

section:has(.wrapper)+section,
.section:has(.wrapper)+section,
.section:has(.wrapper)+.section,
section:has(.wrapper)+.section{margin-top: 0;}

/*文章*/
p{margin: 1em 0;}
p.caption{margin: 0.5em 0;}
::selection {background: rgba(60,60,60,0.6); color:#fff;}
::-moz-selection {background: rgba(60,60,60,0.6); color:#fff;}

/*多めの余白P*/
.margin p+p{margin-top: 2em;}

/*discリスト*/
ul.disc{ margin:1em 0; padding:0 0 0 1.5em;}
ul.disc>li{ list-style:disc outside;}
ul.disc>li+li{margin-top: 0.5em;}

/*番号付きリスト*/
ol{ margin:1em 0; padding:0 0 0 1.5em;}
ol>li{ list-style:decimal outside;}
ol>li+li{margin-top: 0.5em;}

/*番号付きリスト（スタイリング）*/
ol.style{ margin:2em 0; padding:0; counter-reset: number 0;}
ol.style>li{ list-style:none; line-height:1.8; position: relative; padding: 0 0 0 2.2em; z-index: 10;}
ol.style>li>*:first-child{margin-top: 0;}
ol.style>li>*:last-child{margin-bottom: 0;}
ol.style>li+li:not(:has(.heading)){margin-top: 0.5em;}
ol.style>li:before{counter-increment: number 1; content: counter(number); position: absolute; top: 0.1em; left: 0; width: 2em; height: 2em; display: flex; align-items: center; justify-content: center; background: #19529f; color: #fff; text-align: center; flex-direction: column; line-height: 1; font-size: 80%; font-weight: bold; border-radius: 0.2rem;}
ol.style.green>li:before{background: #10AA8F;}
/* 見出しがある場合 */
ol.style>li+li:has(.heading){margin-top: 2em;}
ol.style .heading{ font-size: 130%; line-height: 1.4; margin: 0 0 0.5em;}
ol.style .heading+p{margin-top: 0.5em;}
/* リストが箱の場合 */
ol.style:has(li.hako){margin: 2em auto;}
ol.style>li.hako{padding: 1.5em 1em 1.5em 3em; margin: 0;}
ol.style>li.hako:before{top: 2em; left: 1em;}
/* 全体が箱で囲まれている場合 */
.hako:has(ol.style){margin: 2em auto; padding-left:1em;}

/*チェックリスト*/
ul.check{margin:1em 0; display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap:0.5em 2em;}
ul.check.margin{margin:2em 0; row-gap:1em;}
ul.check>li{ position:relative; padding:0 0 0 1.8em; line-height:1.6; width: 100%;}
ul.check>li:before{ position:absolute; content:""; top:0.16em; left:0; z-index:1; background: rgba(25,82,159,0.2); display: inline-block; width: 1.2em; height: 1.2em; border-radius: 99em;}
ul.check>li:after{ position:absolute; content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:600; top:-0.24em; left:0.14em; z-index:2; font-size:130%; color:#19529F;}
ul.check.blue>li:before{background: rgba(19,151,215,0.2);}
ul.check.blue>li:after{ color:#1397D7;}
ul.check.green>li:before{background: rgba(16,170,143,0.2);}
ul.check.green>li:after{ color:#10AA8F;}
ul.check.yellow>li:before,
ul.check.orange>li:before{background: rgba(236,168,38,0.2);}
ul.check.yellow>li:after,
ul.check.orange>li:after{ color:#ECA826;}
ul.check.red>li:before{background: rgba(239,80,100,0.2);}
ul.check.red>li:after{ color:#EF5064;}
ul.check:has(.heading){row-gap:1.5em;}
ul.check>li>.heading{margin: 0 0 0.3em; font-size: 115%;}
/*カラム*/
@media screen and (min-width:961px){
ul.check.col2>li{width: calc(50% - 1em); margin: 0;}
ul.check.col3>li{width: calc(33.3% - 1.32em); margin: 0;}
}

/*順番に出現するアニメーション*/
@keyframes animation_order{100%{opacity: 1;}}
@media screen{
.animation.order>*{opacity: 0;}
}
.animation.order.active>*{animation: animation_order 0.6s 1.6s ease-in-out both;}
.animation.order.active>*:nth-child(1){animation-delay:0.1s;}
.animation.order.active>*:nth-child(2){animation-delay:0.2s;}
.animation.order.active>*:nth-child(3){animation-delay:0.3s;}
.animation.order.active>*:nth-child(4){animation-delay:0.4s;}
.animation.order.active>*:nth-child(5){animation-delay:0.5s;}
.animation.order.active>*:nth-child(6){animation-delay:0.6s;}
.animation.order.active>*:nth-child(7){animation-delay:0.7s;}
.animation.order.active>*:nth-child(8){animation-delay:0.8s;}
.animation.order.active>*:nth-child(9){animation-delay:0.9s;}
.animation.order.active>*:nth-child(10){animation-delay:1.0s;}
.animation.order.active>*:nth-child(11){animation-delay:1.1s;}
.animation.order.active>*:nth-child(12){animation-delay:1.2s;}
.animation.order.active>*:nth-child(13){animation-delay:1.3s;}
.animation.order.active>*:nth-child(14){animation-delay:1.4s;}
.animation.order.active>*:nth-child(15){animation-delay:1.5s;}

/*フェードイン*/
@keyframes fade{100%{opacity: 1;}}
@media screen{
.fade{opacity: 0;}
}
.active.fade{animation: fade 1s 0s ease-out both;}

/*フェードイン右*/
@keyframes fade_right{100%{opacity: 1; transform: translateX(0vw);}}
@media screen{
.fade_right{opacity: 0; transform: translateX(-10vw);}
}
.active.fade_right{animation: fade_right 0.5s 0s ease-out both;}
@media screen and (max-width:960px) and (orientation:portrait){
.active.fade_right{animation-duration: 0.3s;}
}

/*フェードイン左*/
@keyframes fade_left{100%{opacity: 1; transform: translateX(0vw);}}
@media screen{
.fade_left{opacity: 0; transform: translateX(10vw);}
}
.active.fade_left{animation: fade_left 0.5s 0s ease-out both;}
@media screen and (max-width:960px) and (orientation:portrait){
.active.fade_left{animation-duration: 0.3s;}
}

/*フェードイン上*/
@keyframes fade_up{100%{opacity: 1; transform: translateY(0vh);}}
@media screen{
.fade_up{opacity: 0; transform: translateY(5vh);}
}
.active.fade_up{animation: fade_up 0.5s 0s ease-out both;}

/*クリップパス右*/
@keyframes clip_right{100%{clip-path: inset(0 0 0 0);}}
@media screen{
.clip_right{clip-path: inset(0 100% 0 0);}
}
.active.clip_right{animation: clip_right 1s 0s cubic-bezier(0.5,0,0.5,1) both;}

/*クリップパス右下*/
@keyframes clip_right_bottom{100%{clip-path: polygon(0 0, 200% 0, 0 200%);}}
@media screen{
.clip_right_bottom{clip-path: polygon(0 0, 0 0, 0 0);}
}
.active.clip_right_bottom{animation: clip_right_bottom 1s 0s cubic-bezier(0.5,0,0.5,1) both;}

/*クリップパス左*/
@keyframes clip_left{100%{clip-path: inset(0 0 0 0);}}
@media screen{
.clip_left{clip-path: inset(0 0 0 100%);}
}
.active.clip_left{animation: clip_left 1s 0s cubic-bezier(0.5,0,0.5,1) both;}

/*クリップパス左下*/
@keyframes clip_left_bottom{100%{clip-path: polygon(100% 200%, -100% 0, 100% 0);}}
@media screen{
.clip_left_bottom{clip-path: polygon(100% 0, 100% 0, 100% 0);}
}
.active.clip_left_bottom{animation: clip_left_bottom 1s 0s cubic-bezier(0.5,0,0.5,1) both;}

/*フロート操作*/
.fl,.fl-center{ float:left;}
.fr,.fr-center{ float:right;}
.flm,.flm-center{ float:left; margin:0 1.5em 1.5em 0; clear:left;}
.frm,.frm-center{ float:right; margin:0 0 1.5em 1.5em; clear:right;}
@media screen and (max-width:960px){
.fl-center,.fr-center,.flm-center,.frm-center{float:none; max-width:100%; display:block; margin:0 auto 1em;}
}

/*clearfix*/
.clearfix:after {content: ""; clear: both; display: block; }

/*画像とテキストの組み合わせ*/
.image-text{display: flex; margin: 1em auto; gap:1em 4%;}
.image-text.reverse{flex-direction: row-reverse;}
.image-text+.image-text{margin-top: 4em;}
.image-text>.text{flex: 1;}
.image-text>.image{text-align: center;}
.image-text.align-items_center{align-items: center;}
.image-text>.image>*:first-child,.image-text>.text>*:first-child{margin-top: 0;}
.image-text>.image>*:last-child,.image-text>.text>*:last-child{margin-bottom: 0;}
@media screen and (max-width:960px){
.image-text:not(.hold){flex-direction: column;}
.image-text:not(.hold)>.image,
.image-text:not(.hold)>.text{width: 100% !important;}
}

/*テキストと画像の組み合わせ*/
.text-image{display: flex; margin: 1em auto; gap:1em 4%;}
.text-image.reverse{flex-direction: row-reverse;}
.text-image+.text-image{margin-top: 4em;}
.text-image>.text{flex: 1;}
.text-image>.image{text-align: center;}
.text-image.align-items_center{align-items: center;}
.text-image>.text>*:first-child,.text-image>.image>*:first-child{margin-top: 0;}
.text-image>.text>*:last-child,.text-image>.image>*:last-child{margin-bottom: 0;}
@media screen and (max-width:960px){
.text-image:not(.hold){flex-direction: column;}
.text-image:not(.hold)>.image,
.text-image:not(.hold)>.text{width: 100% !important;}
}

/*テキストとテキストの組み合わせ*/
.text-text{display: flex; margin: 1em auto; gap:1em 4%;}
.text-text.reverse{flex-direction: row-reverse;}
.text-text+.text-text{margin-top: 4em;}
.text-text>.text{flex: 1;}
.text-text>.text[style]{flex:initial;}
.text-text.align-items_center{align-items: center;}
.text-text>.text>*:first-child{margin-top: 0;}
.text-text>.text>*:last-child{margin-bottom: 0;}
@media screen and (max-width:960px){
.text-text:not(.hold){flex-direction: column;}
.text-text:not(.hold)>.text{width: 100% !important;}
}

/*グリッドレイアウト*/
.grid2,.grid3,.grid4,.grid5,.grid6{display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; row-gap: 2em;}
    .grid2.margin,.grid3.margin,.grid4.margin{row-gap:3em;}
.grid2>*>*:first-child,.grid3>*>*:first-child,.grid4>*>*:first-child,.grid5>*>*:first-child,.grid6>*>*:first-child{margin-top: 0;}
.grid2>*>*:last-child,.grid3>*>*:last-child,.grid4>*>*:last-child,.grid5>*>*:last-child,.grid6>*>*:last-child{margin-bottom: 0;}

.grid2{column-gap: 4%; font-size:95%;}
.grid2>*{width: 48%;}
    .grid2.margin{column-gap: 8%;}
    .grid2.margin>*{width: 46%;}
.grid3{column-gap: 3%; font-size:90%;}
.grid3>*{width:31.3%}
    .grid3.margin{column-gap: 6%;}
    .grid3.margin>*{width:29.3%}
.grid4{column-gap: 2%; font-size:85%;}
.grid4>*{width:23.5%;}
    .grid4.margin{column-gap: 4%;}
    .grid4.margin>*{width: 22%;}
.grid5{column-gap: 2%; font-size:80%;}
.grid5>*{width:18.4%;}
.grid6{column-gap: 2%; font-size:75%;}
.grid6>*{width:15%;}

@media screen and (max-width:960px){
/*holdが付いてないとき*/
.grid2:not(.hold),.grid3:not(.hold),.grid4:not(.hold),.grid5:not(.hold),.grid6:not(.hold){font-size:100%;}
.grid2:not(.hold)>*,.grid3:not(.hold)>*,.grid4:not(.hold)>*,.grid5:not(.hold)>*,.grid6:not(.hold)>*{width: 100%;}

/*2カラムへ*/
.grid3.to2,.grid4.to2,.grid5.to2,.grid6.to2{flex-direction: row; column-gap: 4%; font-size:90%;}
.grid3.to2>*,.grid4.to2>*,.grid5.to2>*,.grid6.to2>*{width:48%;}
}

/*日付*/
span.date{font-weight: 500; display: inline-block; line-height: 1.4; font-family:"af" , sans-serif; color: #19529f;}

/* カテゴリー */
span.category{font-weight: 500; display: inline-block; line-height: 1.4; background: #19529f; color: #fff; padding: 0 0.5em; text-align: center; min-width: 6em;}
span.category.red{background: #EF5064;}

/*ナビゲーションリスト*/
ul.nav{ margin:1em auto;}
ul.nav li:first-child{ border-top:1px solid rgba(25,82,159,0.2);}
ul.nav li{border-bottom:1px solid rgba(25,82,159,0.2); line-height:1.4; position:relative; overflow: hidden; padding: 1em;
display: flex; align-items: center; justify-content: flex-start; gap:1em;}
ul.nav li>a{font-weight: bold; color: inherit; text-decoration: none; display: flex; align-items: center; justify-content: flex-start; gap:1em; position: relative; margin: -1em; padding:1em 2.5em 1em 1em; width: calc(100% + 2em); transition: 0.2s color , 0.2s background;}
ul.nav li>a:after{font-family:"Font Awesome 6 Free"; font-weight:600; content: "\f054"; position:absolute; top:50%; right:1em; transform: translateY(-50%) scale(0.8); transform-origin: right center; color: #19529F;}
ul.nav li>a[target="_blank"]:after{content: "\f35d";}
ul.nav li>a:hover{background: rgba(25,82,159,0.1);}
ul.nav li>a.current{font-weight: bold; background: rgba(25,82,159,0.1); color: #19529f;}
ul.nav .image{align-self: flex-start; width: min(30%,10em);}
ul.nav .text{ flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; row-gap: 0.3em;}
ul.nav .text>*:first-child{margin-top: 0;}
ul.nav .text>*:last-child{margin-bottom: 0;}

ul.nav.news .image{width: 6em; height: auto; aspect-ratio:3/2; overflow: hidden;}
ul.nav.news .image:not(:has(img)){background: url(../img/symbol.webp) no-repeat center center; background-size: 60% auto; background-color: #fff; box-shadow: 0 0 0 1px inset rgba(25,82,159,0.2);}
ul.nav.news .image img{width: 100%; height: 100%; object-fit: cover;}
ul.nav.news li>a:hover .image:not(:has(img)){filter: brightness(105%) saturate(105%) contrast(105%);}
ul.nav.news .meta{display: flex; flex-wrap: wrap; gap:0 0.5em; font-size: 80%;}
ul.nav.news .title{margin: 0; font-size: 110%; font-weight: bold;}
ul.nav.news p:not(.title){font-size: 80%; margin: 0; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; /* 行数 */}
@media screen and (max-width:480px){
ul.nav{ margin-left:-20px; margin-right:-20px;}
ul.nav li{padding-left: 20px; padding-right: 20px;}
ul.nav li>a{margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 2.5em; width: calc(100% + 40px);}
ul.nav.news .image{width: 5em;}
ul.nav.news .title{font-size: 100%;}
ul.nav.news p:not(.title){-webkit-line-clamp: 3; /* 行数 */}
}

/*サブナビ*/
.snav{margin:6em auto 6em; width: min(calc(100% - 80px),1600px); background: #fff; box-shadow: 0 0 1.5em rgba(0,0,0,0.15); padding: 1rem; border-radius: 0.3rem; position: relative;}
.snav .heading{font-size: 140%; padding: 0.5em 1em; background: linear-gradient(135deg,#1397D7 0%,#19529f 100%);
  color: #fff; text-align: center; margin: -1rem -1rem 1rem; border-radius: 0.3rem 0.3rem 0 0;}
.snav .trigger{display: none;}
.snav .nav a{color: #19529f; font-weight: bold; display: block;}
@media screen and (min-width:961px){
.snav{font-size: min(1.1vw,18px);}
.snav .inner{margin: auto; display: block !important;}
.snav .nav{margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap:0.3em;}
.snav .nav li,
.snav .nav li:first-child{border-top: none; border-bottom: none; /*border-left:1px solid #ccc; border-right:1px solid #ccc;*/}
.snav .nav li{padding: 0;}
.snav .nav li+li{/*margin-left: -1px;*/}
.snav .nav a{margin: 0;  padding:0.9em 1.5em; min-width: 8em; text-align: center; display: inline-block; border-radius: 0.2em;}
.snav .nav a:after{display: none;}
}
@media screen and (max-width:960px){
.snav{width: 80%;}
.snav .heading{font-size: 130%;}
.snav .nav{margin: auto;}
}
@media screen and (max-width:480px){
.snav{width: calc(100% - 40px);}
.snav .nav a{padding-left: 0.5em; padding-right: 2em;}
.snav .nav a:after{right: 0.8em;}
}
/*アニメーション*/
@media screen{
.snav{opacity: 0; transform: translateY(2vh);
animation: fade_up 0.4s 0.2s ease-out both;}
}
/* カレント */
.page.service_corporate .snav a.service_corporate,
.page.service_recruit .snav a.service_recruit,
.page.service_ec .snav a.service_ec,
.page.service_special .snav a.service_special,
.page.aboutus_philosophy .snav a.aboutus_philosophy,
.page.aboutus_message .snav a.aboutus_message,
.page.aboutus_overview .snav a.aboutus_overview,
.page.aboutus_access .snav a.aboutus_access,
.page.magazine .snav a.magazine,
.page.kawaraban .snav a.kawaraban,
.page.privacy .snav a.privacy,
.page.security .snav a.security,
.snav a.current{font-weight: bold; background: rgba(25,82,159,0.1);}

/*アイキャッチ直下のサブナビ*/
.eyeCatch+.snav{margin-top: -5em; margin-bottom: 3em; transition: 0.4s;}
.eyeCatch+.snav:before{content: ""; position: absolute; left: 50%; top: -0.9em; z-index: 10; transform: translateX(-50%); width: 0; height: 0; border-left: 0.7em solid transparent; border-right: 0.7em solid transparent; border-bottom: 1em solid #fff;}
.eyeCatch+.snav .heading{display: none;}
@media screen and (min-width:961px){
.eyeCatch+.snav .nav{border: none; padding: 0;}
}
@media screen and (max-width:960px){
.eyeCatch+.snav{margin-top: -3em; margin-bottom: 2em;}
.eyeCatch+.snav .trigger{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap:0.3em; line-height: 1.2; font-size: 12px; margin: auto; width: min(80% , 360px); height: 50px; background: #E6ECF4; color: rgba(0,0,0,0,0.8); cursor: pointer; border-radius: 0.2rem;}
.eyeCatch+.snav .trigger:before{ content: "\f0c9"; font-family: "Font Awesome 6 Free"; font-weight: 600; font-size: 20px; line-height: 1; color: #19529F;}
.eyeCatch+.snav .trigger:after{ content: "サブメニュー";}
.eyeCatch+.snav .trigger.open{background: #fde8eb;}
.eyeCatch+.snav .trigger.open:before{ content: "\f00d"; color: #EF5064;}
.eyeCatch+.snav .trigger.open:after{ content: "閉じる";}
.eyeCatch+.snav .inner{display: none; padding: 1em 0 0; border: none;}
.eyeCatch+.snav:not(:has(.trigger.open)){/*box-shadow: none; padding-bottom: 0.1rem;*/}
.eyeCatch+.snav:not(:has(.trigger)) .inner{display: block; padding-top: 0;}
}

/*見出しの文字サイズ*/
.heading{line-height:1.4; font-weight: bold; margin: 0 0 0.7em; display: block; position: relative;}
.heading.lv0{font-size: 300%;}
.heading.lv1{font-size: 240%;}
.heading.lv2{font-size: 200%;}
.heading.lv3{font-size: 160%;}
.heading.lv4{font-size: 140%;}
.heading.lv5{font-size: 130%;}
.heading.lv6{font-size: 120%;}
@media screen and (max-width:960px){
.heading.lv0{font-size: 240%;}
.heading.lv1{font-size: 200%;}
.heading.lv2{font-size: 160%;}
.heading.lv3{font-size: 140%;}
.heading.lv4{font-size: 130%;}
.heading.lv5{font-size: 120%;}
.heading.lv6{font-size: 110%;}
}
/*主な要素直下の見出しは上部に適度なマージン*/
*:not(.heading)+.heading{margin-top:2em;}

/*アイキャッチ見出し*/
.eyeCatch{margin:0 auto 3em; position: relative; text-align: center; background: linear-gradient(135deg,#1397D7 0%,#19529f 100%); color: #fff;}
.eyeCatch .text{ margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 1680px; min-height: 180px; padding:2em; position: relative; z-index: 20;}
.eyeCatch .text>*{font-size: 240%; line-height: 1.4; position: relative; margin: 0 auto; text-align: center; font-weight: bold;}
.eyeCatch .text>*.parent{font-size: 1rem; font-weight: normal;}
.page:has(.snav.clone) .eyeCatch .text{padding-bottom: 4em;}
@media screen and (max-width:960px){
.eyeCatch{ margin: 0 auto 2em;}
.eyeCatch .text{min-height: 80px; padding:20px;}
.page:has(.snav.clone) .eyeCatch .text{padding-bottom: calc(20px + 1.5em);}
.eyeCatch .text>*{font-size: 150%;}
.eyeCatch .text>*.parent{font-size: 0.8rem;}
}
/*画像があるとき*/
.eyeCatch:has(.image){background: linear-gradient(135deg,#1397D7 0%,#19529f 55%);}
.eyeCatch .image{width: 100%; position: relative; z-index: 10; display: flex; align-items: center; justify-content: flex-end;}
.eyeCatch .image img{width: min(50%,960px); height: 100%; aspect-ratio:16/9; object-fit: cover; border-radius: 4vw 0 0 0;}
.eyeCatch .image+.text{position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); width: min(90%,1600px);; flex-direction: row; justify-content: flex-start;}
.eyeCatch .image+.text>*{font-size: min(3.2vw,280%); text-align: left; margin: 0; width: 50%; padding-right: 1em;}
@media screen and (min-width:961px){
.eyeCatch:has(.image)+.snav:before{left: 6em;}
}
@media screen and (max-width:960px) and (orientation:landscape){
.eyeCatch .image+.text>*{font-size: 3.6vw;}
}
@media screen and (max-width:960px) and (orientation:portrait){
.eyeCatch:has(.image){background: linear-gradient(135deg,#1397D7 40%,#19529f 100%);}
.eyeCatch .image img{width: 100%; aspect-ratio:3/2; border-radius: 0;}
.eyeCatch .image+.text{position: relative; left: auto; top: auto; transform: none; width: 100%; justify-content: center;}
.eyeCatch .image+.text>*{font-size: 150%; text-align: center; margin: auto; width: 100%; padding: 0;}
}
/* 色分け */
.eyeCatch.green{background: linear-gradient(135deg,#17C6AE 0%,#10aa8f 100%);}
.eyeCatch.green:has(.image){background: linear-gradient(135deg,#17C6AE 0%,#10aa8f 55%);}
@media screen and (max-width:960px) and (orientation:portrait){
.eyeCatch.green:has(.image){background: linear-gradient(135deg,#17C6AE 40%,#10aa8f 100%);}
}
/*アニメーション*/
@media screen{
.eyeCatch{opacity: 0; animation: fade 1s 0s ease-out both;}
.eyeCatch .text{opacity: 0; animation: fade 0.5s 0.1s ease-out both;}
.eyeCatch .image{opacity: 0; animation: fade 0.5s 0.2s ease-out both;}
}
@media screen and (max-width:960px) and (orientation:portrait){
.eyeCatch .text{animation-delay: 0.2s;}
.eyeCatch .image{animation-delay:0.1s; }
}

/*見出しスタイル*/
.heading.style{margin-bottom: 1em;}
.heading.style:after{content: ""; display: block; width: 100%; height: 3px; background: rgba(25,82,159,0.3); position: absolute; left: 0; bottom: 0; border-radius: 99em;}
.heading.style>span{position: relative; z-index: 20; display: inline-block; padding: 0 0 calc(0.3em + 3px) 0;}
.heading.style>span:after{content: ""; display: block; width: 100%; height: 3px; background:#19529F; position: absolute; left: -1px; bottom: 0; border-radius: 99em;}
.heading.style.blue:after{background: rgba(19,151,215,0.3);}
.heading.style.blue>span:after{background:#1397D7;}
.heading.style.green:after{background: rgba(16,170,143,0.3);}
.heading.style.green>span:after{background:#10AA8F;}
.heading.style.yellow:after,
.heading.style.orange:after{background: rgba(237,131,61,0.3);}
.heading.style.yellow>span:after,
.heading.style.orange>span:after{background:#ED833D;}
.heading.style.red:after{background: rgba(239,80,100,0.3);}
.heading.style.red>span:after{background:#EF5064;}

/*見出しスタイル*/
.heading.style2{padding: 0.3em 0.6em 0.3em 0.8em; background: #E6ECF4;}
.heading.style2:before{content: ""; display: block; width: 0.2em; height: 100%; background: #19529F; position: absolute; z-index: 30; top: 0; left: 0;}
.heading.style2.blue{background: #DCF0F9;}
.heading.style2.blue:before{background: #1397D7;}
.heading.style2.green{background: #DBF2EE;}
.heading.style2.green:before{background: #10AA8F;}
.heading.style2.yellow,
.heading.style2.orange{background: #FCEDE2;}
.heading.style2.yellow:before,
.heading.style2.orange:before{background: #ED833D;}
.heading.style2.red{background: #FDE8EB;}
.heading.style2.red:before{background: #EF5064;}

/*見出しにワンポイント*/
.heading .fix_head{font-size: 1.2rem; background: #19529f; color: #fff; font-weight: bold; position: relative; left: -1em; display: inline-flex; align-items: center; justify-content: center; border-radius: 99em; line-height: 1.2; padding: 0.5em 1em; margin: 0 0 0.7em 0;}
.heading .fix_head:after{content: ""; display: inline-block; background: #19529f; width: 0.7em; height: 0.7em; position: absolute; right: 0; bottom: 0; clip-path: polygon(75% 0,100% 100%,0 75%);}
.center .fix_head,
.fix_head.center{left: auto; margin-bottom: 1em;}
.center .fix_head:after,
.fix_head.center:after{width: 0.85em; right: 50%; bottom: -0.6em; transform: translateX(50%); clip-path: polygon(0 0,100% 0,50% 100%);}
@media screen and (max-width:960px){
.heading .fix_head{left:-0.5em; font-size: 1.1rem;}
.center .fix_head,
.fix_head.center{left: auto;}
}
.heading .fix_head.green,
.heading .fix_head.green:after{background: #10aa8f;}
.heading .fix_head.red,
.heading .fix_head.red:after{background: #EF5064;}
.heading .fix_head.reverse{background: #fff; color: #19529f;}
.heading .fix_head.reverse:after{background: #fff;}
.heading .fix_head.reverse.green,
.heading .fix_head.reverse.green:after{color: #10aa8f;}
.heading .fix_head.reverse.red,
.heading .fix_head.reverse.red:after{color: #EF5064;}

/*ヘッダー*/
header.g{position: fixed; z-index: 80; top: 0; left: 0; width: 100%; height: 100px; background: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
@media screen and (max-width:960px){
header.g{height: 80px;}
}

/*ヘッダーのロゴ*/
.header_logo{position: absolute; top: 50%; left: 20px; transform: translateY(-50%); display: inline-flex; flex-direction: column; align-items: center; justify-content: center;}
.header_logo img{width: min(16vw,200px);}
@media screen and (max-width:960px){
.header_logo{left: 15px;}
.header_logo img{width: min(42vw,160px);}

/*ヘッダーのスマホ用ボタン*/
header.g .sp.buttons{position: absolute; top: 50%; right: 75px; transform: translateY(-50%); display: flex; align-items: center; justify-content: flex-end; line-height: 1.2; font-size: min(3vw,80%); font-weight: bold;}
header.g .sp.buttons>*{display: flex; gap:0.5em; flex-direction: column; align-items: center; justify-content: center; text-decoration: none;}
header.g .sp.buttons i{font-size: 1.5rem;}
}

/*ハンバーガー*/
.trigger_gnav{position: fixed; z-index: 110; top: 0; right: 0; width: 100px; height: 100px; display: inline-flex; background: #19529F; justify-content: center; cursor: pointer; border-radius: 0 0 0 1.2em; transition: 0.3s opacity,0.3s background;}
.trigger_gnav:hover{/*opacity: 0.8;*/}
.trigger_gnav:not(.open):hover{background: #0D3681;}
.trigger_gnav.open{background: #FDE8EB !important;}
.trigger_gnav:before,
.trigger_gnav:after{content: ""; width: 100%; height: 100%; background: url(../img/menu.webp) no-repeat center; background-size: 50px auto; position: absolute; top: 0; transition: 0.3s transform cubic-bezier(.5,0,0,1); transform: scale(1);}
.trigger_gnav:after{background-image: url(../img/menu_close.webp); transform: scale(0.01);}
.trigger_gnav.open:before{transform: scale(0.01);}
.trigger_gnav.open:after{transform: scale(1);}
@media screen and (max-width:960px){
.trigger_gnav{top:10px; width: 60px; height: 60px; border-radius: 0.3em 0 0 0.3em;}
.trigger_gnav:before,
.trigger_gnav:after{background-size: 50% auto;}
}

/*ハンバーガーを押したときのナビゲーション*/
.gnav_wrap{position: fixed; z-index: 100; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,64,149,0.9); display: flex; align-items: center; overflow-y: scroll; justify-content: center; height: 100dvh; opacity: 0; pointer-events: none; transition: 0.3s opacity; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); scrollbar-color: #5E86BC #0f315f; /*firefox*/}
.gnav_wrap::-webkit-scrollbar-thumb {background: #5E86BC;}
.gnav_wrap::-webkit-scrollbar-track {background: #0f315f;}
.gnav_wrap.open{opacity: 1; pointer-events: auto;}
.gnav_wrap>.inner{margin: auto; width:100%;}
.gnav_wrap .wrapper.reverse{background: none; padding: 2em 0;}
@media screen and (max-width:960px){
.gnav_wrap{top: 80px; height: calc(100dvh - 80px);}
.gnav_wrap>.inner{width: 100%;}
.gnav_wrap .wrapper.reverse{padding-bottom: 4em;}
}

/*グロナビ*/
nav.g{flex: 1; display: flex; justify-content: center; margin: auto;}
nav.g .body{display: flex; justify-content: center; column-gap:3em; line-height: 1.4; width: 100%;}

nav.g ul.nav1{flex: 1; display: flex; flex-direction: column; row-gap:0.3em; max-width: 13em;}

nav.g ul.nav1 a:not(.button){display: block; border-radius: 0.2em; transition: 0.2s color,0.2s background; padding: 0.6em 1em 0.6em 2.2em; text-decoration: none; font-weight: bold; position: relative;}
nav.g ul.nav1 a:not(.button):before{font-family:"Font Awesome 6 Free"; font-weight:600; content: "\f138"; position:absolute; top: 0.6em; left: 0.7em;}
nav.g ul.nav1 a:not(.button):hover{background: rgba(255,255,255,0.15);}

/* カレント */
.page.top nav.g a.top,
.page.service nav.g a.service,
.page.service_corporate nav.g a.service_corporate,
.page.service_recruit nav.g a.service_recruit,
.page.service_ec nav.g a.service_ec,
.page.service_special nav.g a.service_special,
.page.case nav.g a.case,
.page.strength nav.g a.strength,
.page.aboutus nav.g a.aboutus,
.page.aboutus_philosophy nav.g a.aboutus_philosophy,
.page.aboutus_message nav.g a.aboutus_message,
.page.aboutus_overview nav.g a.aboutus_overview,
.page.aboutus_access nav.g a.aboutus_access,
.page.magazine nav.g a.magazine,
.page.kawaraban nav.g a.kawaraban,
.page.privacy nav.g a.privacy,
.page.security nav.g a.security,
.page.news nav.g a.news,
nav.g ul.nav1 a:not(.button).current{background: rgba(255,255,255,0.15); font-weight: bold;}

nav.g ul.nav1 a:not([href]):hover{background:none;}

nav.g ul.nav1>li:has(ul.child){margin-bottom: 0.7em;}

nav.g ul.child>li>a:not(.button){padding: 0.5em 1em 0.5em 2em; font-size: 85%; text-decoration: none; font-weight: normal; position: relative;}
nav.g ul.child>li>a:not(.button):before{content: ""; top: 1em; left: 1em; width: 0.4em; height: 0.4em; background: currentColor; border-radius: 100%; opacity: 0.5;}

nav.g li:has(.button){margin: 1em 0;}
nav.g a.button{padding: 0.4em 1em; width: min(100%,13em);}
nav.g a.button i{margin-right: 0.5em; font-size: 120%;}

nav.g ul.small{font-size: 80%;}
nav.g ul.small a:not(.button){font-weight: normal;}

nav.g li:has(ul.banners){margin: 2em 0;}
nav.g ul.banners{display: flex; flex-direction: column; gap:1em;}
nav.g a.banner{padding: 0 !important; width: min(100%,13em);}
nav.g a.banner:before{display: none;}

@media screen and (min-width:961px){
nav.g ul.nav1>li:first-child{margin-top: 0;}
nav.g ul.nav1>li:last-child{margin-bottom: 0;}
}
@media screen and (max-width:960px){
nav.g {font-size: 120%; flex-direction: column; row-gap:0.3em;}
nav.g .body{flex-direction: column; width: 100%;}
nav.g ul.nav1{max-width: initial;}
nav.g li:has(.button){text-align: center;}
nav.g a.button{width: 100%;}
nav.g a.banner{margin: auto;}
}

/*グロナビをPC用に調整*/
header.g nav.g{position: absolute; right: calc(100px + 2em); bottom: 50%; transform: translateY(50%); font-size: min(1.2vw,18px);}
header.g nav.g .body{flex-direction: row;}

header.g nav.g ul.nav1 a:not(.button):hover{background: rgba(25,82,159,0.1);}
header.g nav.g ul.nav1 a:not([href]):hover{background:rgba(0,0,0,0.05);}

/* カレント */
.page.service header.g a.service,
.page.service_corporate header.g a.service_corporate,
.page.service_recruit header.g a.service_recruit,
.page.service_ec header.g a.service_ec,
.page.service_special header.g a.service_special,
.page.case header.g a.case,
.page.strength header.g a.strength,
.page.aboutus header.g a.aboutus,
.page.aboutus_philosophy header.g a.aboutus_philosophy,
.page.aboutus_message header.g a.aboutus_message,
.page.aboutus_overview header.g a.aboutus_overview,
.page.aboutus_access header.g a.aboutus_access,
.page.magazine header.g a.magazine,
.page.kawaraban header.g a.kawaraban,
.page.privacy header.g a.privacy,
.page.security header.g a.security,
.page.news header.g a.news,
header.g nav.g ul.nav1 a:not(.button).current,
header.g nav.g ul.nav1>li:has(ul.child .current)>a:not(.button)
{background: rgba(25,82,159,0.1); color: #19529f !important;}

header.g nav.g ul.nav1{flex-direction: row; gap:0.3em; max-width: initial;}
header.g nav.g ul.nav1>li>a:not(.button){display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 1.5em; min-height: 60px; min-width: 7em; color: #000;}
header.g nav.g ul.nav1>li>a:not(.button):before{display: none;}
header.g nav.g ul.nav1>li:has(ul.child){margin-bottom: 0; position: relative;}
header.g nav.g ul.nav1>li>a.current+ul.child{margin-top: 0;}
header.g nav.g ul.nav1>li:hover ul.child{pointer-events: auto; opacity: 1;}

header.g nav.g ul.child{position: absolute; top: 60px; left: 50%; width: 16em; transform: translateX(-50%); background: #fff; box-shadow: 0 0 2em rgba(0,0,0,0.15); padding: 1em; border-radius: 0.3em; pointer-events: none; opacity: 0; transition: 0.2s opacity;}
header.g nav.g ul.child:before{ content: ""; position: absolute; left: 50%; top: -9px; z-index: 10; transform: translateX(-50%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid #fff;}
header.g nav.g ul.child>li>a{font-size: 90%; font-weight: bold;}
header.g nav.g ul.child>li>a:before{top:1em;}
header.g nav.g ul.child>li>a.current:before{}

header.g nav.g ul.nav1>li:has(.button){margin:0 0 0 1em;}
header.g nav.g ul.nav1>li>a.button{height: 100%; padding: 0.4em 2em;}
header.g nav.g ul.nav1>li>a.button i{margin-right: 0.5em; font-size: 120%;}

@media screen and (max-width:960px){
header.g nav.g{display: none;}
}

/* SNS */
.sns_wrap{display: flex; align-items: center; justify-content: center; gap:2em; line-height: 1; margin: 2em 0;}
.sns_wrap i{font-size: 200%; width: 1em; height: 1em; display: inline-flex; align-items: center; justify-content: center; transition: 0.2s opacity;}
.sns_wrap a:hover i{opacity: 0.8;}

/*グローバルフッター*/
footer.g{border-top: 3px solid #19529f;}
main:not(:has(.wrapper))+footer.g{margin-top: 6em;}

/* フッターのCTA */
.heading.cta{font-size: min(2.4vw,200%); line-height: 1.6;}
.image-text.cta .image{width: 48%; align-self: flex-start;}
.image-text.cta ul.check{font-weight: bold; font-size: 120%; font-feature-settings: "palt"; letter-spacing: 0.1em; margin: 1em 0 2em;}
.button_wrap.cta{font-size: 110%; margin: 2em 0 0; display: flex; gap:0.5em;}
.button_wrap.cta .button i{margin-right: 0.5em; font-size: 120%;}
@media screen and (max-width:960px){
.heading.cta{font-size: min(6vw,200%); margin: 0 auto 3rem;}
.button_wrap.cta{flex-direction: column;}
}
/*実績画像が連なったイメージ*/
.jisseki_flow_wrap{position: absolute; z-index: -1; top: 0; right: 0%; width: 26%; display: flex; align-items: center; justify-content: space-around;}
.jisseki_flow{width: 25%; transform: rotate(10deg); transform-origin:top right;}
.jisseki_flow>div{transform: translateY(0%);
animation: jisseki_div 20s 0s linear infinite;}
@keyframes jisseki_div{100%{transform: translateY(-33.33%);}}
@media screen and (max-width:960px){
.jisseki_flow_wrap{position: relative; top: auto; right: auto; width: 100%; height: auto; aspect-ratio:2/1; overflow: hidden; margin: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, white 10%, white 90%, transparent 100%);}
.jisseki_flow{transform-origin: center;}
}
@media screen and (max-width:480px){
.jisseki_flow_wrap{aspect-ratio:4/3; width: calc(100% + 40px); margin: auto -20px;}
}

/*フッターとグロナビ共用の会社情報テキスト*/
.g_flex{display: flex; flex-direction: row-reverse; gap:4em 3em; font-size: min(1.2vw,18px);}
.g_flex nav.g{flex: 1;}
.f_company{ width: 28em;}
.f_company .logo{margin: 0 0 2em;}
.f_company .logo img{width: min(20vw,240px);}
.f_company p+p.tel,
.f_company p.tel+p{margin-top: -1em;}
.f_company p.tel{display: flex; align-items: center; gap:0.3em 1em;}
.f_company .sns_wrap{margin: 2em 0 0; justify-content: flex-start;}
.f_company .button_wrap{margin: 3em 0 0; display: flex;}
.f_company .button_wrap .button{width: min(100%,18em);}
.f_company .button_wrap .button i{margin-right: 0.5em; font-size: 120%;}
@media screen and (max-width:960px){
.g_flex{flex-direction: column; font-size: 100%;}
.g_flex nav.g{width: 100%;}
.f_company{width: 100%; flex-direction: column; align-items: center; text-align: center;}
.f_company .logo img{width: min(60vw,300px);}
.f_company p+p.tel,
.f_company p.tel+p{margin-top: 1em;}
.f_company p.tel{font-size: 140%; flex-direction: column;}
.f_company .sns_wrap{justify-content: center;}
.f_company .button_wrap{flex-direction: column;}
.f_company .button_wrap .button{width: 100%;}
}

/*©*/
footer.g .copyright{background: #0F315F; color: rgba(255,255,255,0.7); font-style: normal; font-size: 70%; line-height: 1.2; text-align: center; margin: auto; padding: 1em; min-height: 50px; display: flex; align-items: center; justify-content: center; gap:0.5em; position: relative; z-index: 10; font-feature-settings: "palt"; letter-spacing: 0.2em; padding-left: 1.2em;}

/* ページ先頭へ */
a.pageTopButton{position: fixed; z-index:80; display:flex; align-items: center; justify-content: center; bottom:50px; right:50px; width:50px; height:50px; font-size: 20px; opacity: 0; pointer-events: none; border-radius: 0.1em; background: rgba(255,255,255,0.9); color: rgba(25,82,159,1); text-decoration: none; transition: 0.3s opacity,0.3s background,0.3s color;
-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}
a.pageTopButton:hover{background: rgba(225,232,242,0.9);}
a.pageTopButton.active{pointer-events: inherit; opacity: 1;}
a.pageTopButton:after{font-family:"Font Awesome 6 Free"; font-weight:600; content: "\f077";}
a.pageTopButton>span{text-indent: -9999px; overflow: hidden;}
@media screen and (max-width:960px){
a.pageTopButton{bottom: 20px; right: 20px; width: 40px; height: 40px; font-size: 16px;}
}
@media print{
a.pageTopButton{display: none;}
}

/*箱*/
.hako{background: #E6ECF4; padding: 2em; margin: 2em auto;}
.hako>*:first-child,
.hako>.narrow>*:first-child{margin-top: 0;}
.hako>*:last-child,
.hako>.narrow>*:last-child{margin-bottom: 0;}
.hako.blue{background: #DCF0F9;}
.hako.green{background: #DBF2EE;}
.hako.yellow,
.hako.orange{background: #FCEDE2;}
.hako.red{background: #FDE8EB;}
.hako.gray,
.hako.grey{background: #eee;}
.hako .heading.style2{background: #fff;}
.hako ul.check>li:before{background: #fff;}
@media screen and (max-width:960px){
.hako{padding-left: 1em; padding-right: 1em;}
}

/* アコーディオン*/
.ac .trigger{cursor:pointer; background:#fff; padding:1em 2.5em 1em 1em; display:block; vertical-align:middle; font-weight: bold; border:1px solid #ccc; position:relative; z-index: 10; transition:0.4s;}
.ac .trigger.open{background:#e5ecf4; border-color: rgba(25,82,159,0.5); border-bottom-color: rgba(0,0,0,0); border-radius: 0.5em 0.5em 0 0;}
.ac .trigger.open:not(:first-child){ margin-top:2em;}
.ac .trigger:not(.open):hover{background:#e5ecf4; border-color: rgba(25,82,159,0.5); z-index: 20;}
.ac .trigger:after {color: #19529F; font-family:"Font Awesome 6 Free"; font-weight:600; content: "\f067"; display: inline-block; line-height: 1; position:absolute; top:50%; right:1em; transform: translateY(-50%) scale(0.7); transform-origin: center; transition:0.4s color,0.4s transform;}
.ac .trigger.open:after{color: #e83e8e; transform: translateY(-50%) scale(0.7) rotate(135deg);}
.ac .trigger>*,
.ac .trigger p{ margin:0; line-height: 1.54;}
.ac .trigger>.heading{font-size:110%; line-height: 1.4;}
.ac .trigger+*{ display:none; border:1px solid rgba(25,82,159,0.5); background: #fff; border-top:none; margin:0 auto 2em; padding:1em; position:relative; z-index: 10; border-radius: 0 0 0.5em 0.5em;}
.ac .trigger+*>*:first-child{margin-top: 0;}
.ac .trigger+*>*:last-child{margin-bottom: 0;}
.ac .trigger+*+.trigger{margin-top: -1px;}
/*アコーディオン　Q and A*/
.ac.qanda .trigger,.ac.qanda .trigger+*{ padding-left:3em;}
.ac.qanda .trigger:before,
.ac.qanda .trigger+*:before{content: "Q"; font-weight:bold; width:1.6em; height:1.6em; display: inline-flex; align-items: center; justify-content: center; text-align:center; position:absolute; top:1.15em; left:0.9em; background:#C1DCB4; font-size: 90%; border-radius: 0.3em; color: #074e1a; }
.ac.qanda .trigger.open:before{color: #fff; background: #074e1a;}
.ac.qanda .trigger+*:before{content: "A"; top:1.30em; color: #fff; background: #19529F;}
.ac.qanda .trigger>.heading{font-weight: normal;}
.ac.qanda .trigger.open>.heading{font-weight: bold;}
/*Q&A構造化データ用に調整*/
.ac>*+*[itemprop="mainEntity"]{margin-top: -1px;}
.ac>*:not(:first-child) .trigger.open{ margin-top:2em;}
.ac *[itemprop="text"]>*:first-child{margin-top: 0;}
.ac *[itemprop="text"]>*:last-child{margin-bottom: 0;}

/*テーブル*/
table.style{margin:1em 0; padding:0; width:100%; text-align: left; line-height: 1.6;}
table.style>tbody>tr>th{ border:1px solid #bbb; background:#e5ecf4; padding:0.7em; font-weight:bold; vertical-align:middle;}
table.style>tbody>tr>td{ border:1px solid #ccc; background:#fff; padding:0.7em; vertical-align:middle;}
table.style>tbody>tr>th.top,
table.style>tbody>tr>td.top{ vertical-align:top;}
table.style.center{text-align: center;}
table.style p{margin: 0;}
table.style .heading{margin-bottom: 0.3em;}
table.style *:not(.heading)+.heading{margin-top:1em;}
@media screen and (max-width:960px){
table.style.hold{font-size: 90%;}
table.style:not(.hold){ display:block; width: auto;}
table.style:not(.hold) col{ display:none;}
table.style:not(.hold)>tbody{display:block;}
table.style:not(.hold)>tbody>tr{display:block;}
table.style:not(.hold)>tbody>tr>th{display:block; border:none; padding:0.7em 20px; width:100%;}
table.style:not(.hold)>tbody>tr>td{display:block; border:none; padding:0.7em 20px 2em;}
}
@media screen and (max-width:480px){
table.style:not(.hold){margin-left: -20px; margin-right: -20px;}
}
/*テーブル.ボーダー*/
table.style.border>tbody>tr{border-bottom:1px solid #ccc;}
table.style.border>tbody>tr:first-child{border-top:1px solid #ccc;}
table.style.border>tbody>tr>th{ border:none; background:inherit; vertical-align:top; padding-left: 0; padding-right: 0;}
table.style.border>tbody>tr>td{ border:none; background:inherit; vertical-align:top; padding-right: 0;}
@media screen and (max-width:960px){
table.style.border:not(.hold)>tbody>tr{ padding:0; margin-bottom:0; }
table.style.border:not(.hold)>tbody>tr>th{ padding:1em 20px 0; border-bottom:none;}
table.style.border:not(.hold)>tbody>tr>td{ padding:0 20px 1em; border-bottom:none;}
}
/*はみ出た分を横スクロール*/
.you_can_swipe{ display: none;}
@media screen and (max-width:960px){
.you_can_swipe{display: block; text-align:center; font-size:70%;}
.overflow-x-wrapper{ overflow-x:auto; -webkit-overflow-scrolling: touch; margin: auto -10vw;}
.overflow-x-wrapper>div{padding: 0 10vw; width: 960px; box-sizing: content-box;}
.overflow-x-wrapper table.style.hold{font-size: 100%;}
}
@media screen and (max-width:480px){
.overflow-x-wrapper{ margin: auto -20px;}
.overflow-x-wrapper>div{padding: 0 20px;}
}

/* 大きい英語デザイン */
p.eng.design_large{position: absolute; top: 0; left: 40px; font-size: min(18vw,260px); line-height: 1; margin: 0; color: #e5ecf4; font-family: "af";}
p.eng.design_large.right{left: auto; right: 40px; text-align: right;}
.wrapper:not(.white) p.eng.design_large{color: #fff;}
.wrapper.reverse p.eng.design_large{color: rgba(255,255,255,0.1);}
@media screen and (max-width:960px){
p.eng.design_large{left: 20px;}
p.eng.design_large.right{left: auto; right: 20px;}
}

/*準備中*/
img.junbityuu{display: block; margin: 4em auto; width: min(50%,200px); transform-origin: center bottom;
animation: junbityuu 0.5s ease-in-out infinite alternate;}
@keyframes junbityuu{
0%{transform: rotate(-5deg);}
100%{transform: rotate(5deg);}
}

/* Googleマップ */
iframe[src*="google.com/maps"] {width: 100%; height: auto; aspect-ratio:16/9; vertical-align: bottom; margin: 1em auto; display: block;}
@media screen and (max-width:960px) and (orientation:portrait){
iframe[src*="google.com/maps"] {aspect-ratio:3/4;}
}

/* 制作サービスの一覧 */
.container:has(.service_items){max-width: 1920px;}
p.service_desc{line-height: 2; font-size: 120%;}
.service_items{margin: 4em auto; row-gap: 4em; align-items: stretch;}
.service_item{display: flex; flex-direction: column; background: #fff; color: #000; padding: 3em 1.5em; box-shadow: 0 0 1em rgba(0,0,0,0.2);}
.service_item .text{margin-bottom: 1em;}
.service_item .heading{font-size: min(2.4vw,300%);}
.service_item .heading small{font-size: 60%;}
.service_item .heading.catch{font-size: 140%;}
.service_item .button_wrap{margin: auto auto 0; width: min(100%,400px); display: flex; justify-content: center; gap:0.5em;}
.service_item .button_wrap .button{flex: 1; padding: 0;}
.service_item .button i{margin-right: 0.5em;}
@media screen and (min-width:961px){
.grid2 .service_item{padding-left: 3em; padding-right: 3em;}
}
@media screen and (max-width:960px){
p.service_desc{font-size: 110%;}
.service_items{margin: 3em auto; row-gap: 3em;}
.service_item{padding: 2em 1em;}
.service_item .heading{font-size: 200%;}
}

/* 強みの一覧 */
p.strength_desc{line-height: 2; font-size: 120%;}
.strength_items{margin: 4em auto; align-items: stretch; row-gap: 3em;}
.strength_item{display: flex; flex-direction: column; background: #fff; color: #000; padding: 2em 1.5em; box-shadow: 0 0 1em rgba(16,170,143,0.2);}
.strength_item .image{margin: 0 auto 2em; width: min(60%,400px); height: auto;}
.strength_item .image img { width: 100%; height: 100%; aspect-ratio:3/2; object-fit: contain; display: block; }
.strength_item .heading{font-size: 150%; text-align: center;}
.strength_item .text>*:last-child{margin-bottom: 0;}
@media screen and (max-width:960px){
p.strength_desc{font-size: 110%;}
.strength_items{margin: 3em auto; row-gap: 2em;}
.strength_item{padding: 2em 1em;}
.strength_item .heading{font-size: 130%;}
}

/* ページャー */
nav.pager{display: flex; align-items: center; justify-content: space-between; width: min(100%,600px); margin: 4em auto 0; position: relative; font-family: "af";}
nav.pager:before{position: absolute; z-index: -1; top: 50%; left: 0; height: 1px; width: 100%; display: block; content: ""; background: rgba(25,82,159,0.6);}

nav.pager .select_page{position: relative;}
nav.pager .select_page:before{content: "Page"; position: absolute; top: -1.3rem; font-size: 80%; font-weight: 500; color: #0D3681;}
nav.pager select{min-width: 6em; height: 3em; text-align: center; font-weight: bold; border-radius: 0.2em;}

nav.pager .prev a,
nav.pager .next a{min-width: 8em; height: 3em; display: inline-flex; align-items: center; justify-content: center; gap:1em; background: #19529f; color: #fff; padding: 0 1em; text-decoration: none; border-radius: 0.2em; transition: 0.2s background;}
nav.pager .prev a:hover,
nav.pager .next a:hover{background: #0D3681;}

nav.pager .prev a:before,
nav.pager .next a:after{font-family: "Font Awesome 6 Free"; font-weight: 600; content: "\f053"; display:inline-block;}
nav.pager .next a:after{content: "\f054";}

nav.pager a.disabled{background: #ccc; color:rgba(255,255,255,0.6); pointer-events: none;}
@media screen and (max-width:960px){
nav.pager .prev a,
nav.pager .next a{min-width: 6em;}
}

/*お知らせ　詳細*/
article.news{margin-bottom: 6em;}
article.news header {margin: 0 auto 2em;}
article.news .meta { display: flex; flex-wrap: wrap; gap: 0 0.5em; margin: 0 0 1em;}
article.news header .heading{font-size: 180%; margin: 0;}
article.news .image{display: flex; align-items: center; justify-content: center; margin: 2em auto; gap:2em 4%;}
@media screen and (min-width:961px){
article.news .image img{width: min(100%,1000px); max-height: 750px;}
}
article.news .download_link{text-align: center; margin: 2em auto;}
@media screen and (max-width:960px){
article.news header .heading{font-size: 140%}
}
@media screen and (max-width:960px) and (orientation:portrait){
article.news .image{flex-direction: column;}
}

/*実績紹介*/
.pickup_case{margin: 4em auto; display: flex; gap:4em 6%; flex-wrap: wrap;}
.pickup_case>*{width: calc((100% - 6%) / 2);}
.pickup_item{height: auto; text-decoration: none; display: flex; flex-direction: column; gap:1em; padding: 1.5em; color:#000; transition: 0.2s background,0.2s box-shadow; box-shadow: 0 0 2em rgba(0,0,0,0.15);}
.pickup_item:hover{box-shadow: 0 0 2em rgba(25,82,159,0.4); background: #E6ECF4;}
.pickup_item .image{width: 100%; height: 100%; aspect-ratio:16/9;}
.pickup_item .image img{width: 100%; height: 100%; object-fit: cover; object-position: center top;}
.pickup_item .text{flex: 1; font-size: 90%; text-align: left;}
.pickup_item .heading{font-size: 160%; color: #19529f;}
.pickup_item table.data tr{display: flex;}
.pickup_item table.data th{width:5em; font-weight: 350;}
.pickup_item table.data td{flex: 1; font-weight: 500;}
@media screen and (max-width:960px){
.pickup_case{margin: 3em auto; row-gap:3em; flex-direction: column;}
.pickup_case>*{width: 100%;}
.pickup_item{padding: 1em 1em;}
.pickup_item .heading{font-size: 140%;}
}

/*実績　詳細*/
article.case{margin-bottom: 6em;}
article.case .main_image{position: relative; z-index: 10; margin: 0 auto 2em; box-shadow: 0 0 2em rgba(0,0,0,0.15);}
article.case header {margin: 0 auto 2em;}
article.case header .heading{font-size: 180%; margin: 0;}
article.case .heading.style2{font-size: 140%; margin: 2em 0 0.7em;}
article.case table.data tr{display: flex;}
article.case table.data th{width:9em; font-weight: 350;}
article.case table.data td{flex: 1; font-weight: 500;}
article.case table.data tr.url a:after{content: "\f35d"; font-family: "Font Awesome 6 Free"; font-weight: 600; display: inline-block; margin-left: 0.5em;}
@media screen and (max-width:960px){
article.case header .heading{font-size: 140%}
article.case .heading.style2{font-size: 120%;}
article.case table.data tr{flex-direction: column;}
article.case table.data tr+tr{margin-top: 0.5em;}
article.case table.data th{font-size: 80%;}
article.case table.data td{flex: 1; padding-left: 1em; font-size: 120%;}
article.case table.data tr.url td{font-size: 80%;}
}
@media screen and (max-width:480px){
article.case .main_image{margin:0 -20px 2em;}
}