@charset "utf-8";
/* CSS Document */


body {
	font-family: "Noto Serif JP", serif;
}
body.not_DCL * {
	transition: none!important;
	transition-delay: 0s!important;
}

h2, h3, h4, h5, h6 {
 line-height: 1.3;
}

/* バーガーボタンスタイル */
:root {
  /* バーガーアイコン線の太さ */
  --hamburgerIconThin: 2px;
  /* バーガーアイコン線の間隔 */
  --hamburgerIconGap: 6px;
  /* バーガーアイコン線の色 */
	--hambutgerBorderColor: #333;
  /* ボタンの幅 */
  --hamburgerWidth: 2em;
  /* ボタンの高さ */
  /*--hamburgerHeight: 60px;*/
  /* ボタンのパディング左右 */
  --hamburgerPaddingH: 15px;
  /* ボタンの角丸 */
	--hamburgerBorderRadius: 0px;
  /* ボタンの背景色 */
  --hamburgerBgColor: rgba(255,255,255,0.5);
  /* バーガーアイコンと文字の間隔 */
	--hamburgerGapIcon2Txt: 7px;
}
body.drawer--normal .drawer-hamburger {
  color: var(--hambutgerBorderColor);
  height: var(--hamburgerHeight, var(--headerHeight));
  border-radius: var(--hamburgerBorderRadius);
  gap: var(--hamburgerGapIcon2Txt);
}

/* ドロワーメニュースタイル */
:root {
	--drawerWidth:16.25rem;
  --drawerBgColor: #fff;
  --drawerBorder: 1px solid #b1b1b1;
	--drawerULPL: 0px;
	--drawerTxtColorHover: #333;
	--drawerBgColorHover: #e9e9e9;
}
body.drawer--normal #drawerContents .drawer-menu {
  padding-left: var(--drawerULPL);
	margin-bottom: 0;
}
body.drawer--normal #drawerContents .drawer-menu li {
	border-top: var(--drawerBorder);
}
body.drawer--normal #drawerContents .drawer-menu > li:last-child {
	border-bottom: var(--drawerBorder);
}
body.drawer--normal #drawerContents .drawer-menu .sub-menu {
	--drawerULPL: 28px;
	/*margin-top: -1px;*/
	margin-bottom: 0;
	padding-left: var(--drawerULPL);
}
body.drawer--normal:not(.drawer--subOpCl) #drawerContents .drawer-menu .sub-menu {
	border-top: var(--drawerBorder);
}
body.drawer--normal.drawer--subOpCl #drawerContents .drawer-menu .sub-menu {
	border-top: var(--drawerBorder);
	/*border-color: transparent;*/
}
body.drawer--normal.drawer--subOpCl #drawerContents .drawer-menu .open .sub-menu {
	border-top: var(--drawerBorder);
}
body.drawer--normal #drawerContents .drawer-menu .sub-menu > :first-child {
	margin-top: -1px;
}
body.drawer--normal #drawerContents .drawer-menu a {
	position: relative;
	display: block;
	margin: 0;
	padding: 0.8em 1em;
	color: currentColor;
}
body.drawer--normal #drawerContents .drawer-menu > li > a {
	font-weight: bold;
}
body.drawer--normal #drawerContents .drawer-menu .sub-menu a {
  font-size: 0.9em;
	padding-left: 0;
}
body.drawer--normal #drawerContents .drawer-menu a:hover {
	text-decoration: none;
	color: var(--drawerTxtColorHover);
}
body.drawer--normal #drawerContents .drawer-menu a:hover:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--drawerULPL));
	right: 0;
	background-color: var(--drawerBgColorHover);
	z-index: -1;
}
body.drawer--normal #drawerContents .drawer-btnBox {
	display: flex;
	gap: 20px;
	padding: 20px;
	justify-content: center;
	flex-wrap: wrap;
}
body.drawer--normal #drawerContents .drawer-btnBox a {
	max-height: 30px;
}
body.drawer--normal #drawerContents .drawer-btnBox .snsLink {
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	max-width: 30px;
	padding: 0;
}
body.drawer--normal #drawerContents .drawer-btnBox .snsLink .snsIcon {
	max-height: 100%;
}


/* ドロワーメニューサブメニュー展開 */
.drawer--subOpCl #drawerContents .drawer-menu li .naviSubOpclBox {
	height: 0px;
	transition: all .5s ease;
	overflow: hidden;
}
.drawer--subOpCl #drawerContents .drawer-menu li.open >.naviSubOpclBox.animEnd {
    height: auto!important;
}
#drawerContents .gnaviContents li>a {
	display: flex;
}
#drawerContents .gnaviContents li>a .subMenuIcon:before {
	content: '＋';
	display: inline-block;
	margin-right: 0.2em;
}
#drawerContents .gnaviContents li.open>a .subMenuIcon:before {
	content: '－';
}

.drawer-nav {
    font-size: 1.2em;
}


/* サムネイル集 */
body.drawer #drawerContents .thmbsBoxParent .mainTitle {
	display: none;
}
body.drawer #drawerContents .thmbsBoxParent .layoutBox .row > .col {
  padding: 0;
}
body.drawer#drawerContentsCONTENTS01 .thmbsBoxParent li {
	margin-bottom: 5px;
	background-color: #ffffff;
}
body.drawer #drawerContents .thmbsBoxParent li[class*=drop] {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5em;
}
body.drawer #drawerContents .thmbsBoxParent li[class*=drop] a {
	flex-grow: 1;
  padding-left: 45px;
  border: none;
}
body.drawer #drawerContents .thmbsBoxParent li[class*=drop]::before {
   position: absolute; 
  height: 35px;
  content: '';
  aspect-ratio: 1/1;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: 70%;
  background-image: url(../images/icon_info.webp);
  background-position: center;
}


.outfit {
	font-family: "Outfit", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
}


/* ヘッダー */
:root {
	--headerHeight: 70px;
	--headersetGapT: 7px;
	--headersetGapB: 7px;
}



/* サブページティザータイトル */
.pageClassSubpage #sub_TH_ImgTitle {
	text-align: center;
	background-color: #006619;
	padding: 1em;
	color: #fff;
	font-size: 1.6em;
	font-weight: bold;
}


/* 記事セットBox */
.articleSet {
  display: grid;
	gap: calc(var(--commonGap) * 1.3) var(--commonGap);
}


/* グリッドBox */
.gridBox {
	display: grid;
	gap: var(--commonGap);
	grid-auto-rows: min-content; /* 印刷時の崩れ対策 */
}


/* 柔軟なレイアウト */
:root {
	--sectionContentPaddingV: 6em;
	--sectionContentChildGapV: 20px;
}
section {
	display: inline-block;
	width: 100%;
	padding: 0 var(--contentsPaddingSide);
	margin: 0 auto;
}
section .sectionContent {
	padding: 0;
	margin: var(--sectionContentPaddingV) auto;
}
section .sectionContent .mb_xp5 {
	margin-bottom: calc(var(--sectionContentChildGapV) * 0.5);
}
section .sectionContent .mb_x1 {
	margin-bottom: calc(var(--sectionContentChildGapV) * 1);
}
section .sectionContent .mb_x1p5 {
	margin-bottom: calc(var(--sectionContentChildGapV) * 1.5);
}
section .sectionContent .mb_x2 {
	margin-bottom: calc(var(--sectionContentChildGapV) * 2);
}
section .sectionContent .mb_x2p5 {
	margin-bottom: calc(var(--sectionContentChildGapV) * 2.5);
}
section .sectionContent .mb_x3 {
	margin-bottom: calc(var(--sectionContentChildGapV) * 3);
}
section .sectionContent > [class*=mb_]:last-child {
	margin-bottom: 0;
}

section.commonBg_pink {
	background-color: pink;
}
section.commonBg_lightgray {
	background-color: lightgray;
}
section.commonBg_blue {
	background-color: #E7F4FE;
}
section[class*=commonBg_] .sectionContent:not(.noBg) {
	padding: var(--sectionContentChildGapV);
	background-color: #fff;
}


/* .flow ユーティリティ（カスタム） */
:is(.flow, .txtBox) > * + * {
	margin-block-start: var(--flowSpace, var(--sectionContentChildGapV));
}
:is(.flow, .txtBox) > * + h1 {
	 margin-block-start: calc(var(--flowSpace, var(--sectionContentChildGapV)) * 6); 
}
:is(.flow, .txtBox) > * + h2 {
	 margin-block-start: calc(var(--flowSpace, var(--sectionContentChildGapV)) * 4); 
}
:is(.flow, .txtBox) > * + h3 {
	 margin-block-start: calc(var(--flowSpace, var(--sectionContentChildGapV)) * 2); 
}
:is(.flow, .txtBox) > * + h4 {
	 margin-block-start: calc(var(--flowSpace, var(--sectionContentChildGapV)) * 1.7); 
}
:is(.flow, .txtBox) > * + h5 {
	 margin-block-start: calc(var(--flowSpace, var(--sectionContentChildGapV)) * 1.5); 
}
:is(.flow, .txtBox) > * + h6 {
	 margin-block-start: calc(var(--flowSpace, var(--sectionContentChildGapV)) * 1.2); 
}
.txtBox,
.flow :is(h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
	--flowSpace: 1em;
}


#HDLOGO {
    width: 80%;
}

#FOOTER {
	background: linear-gradient(90deg, #CBD8EC 0%, #8CA6CE 100%);
}


/* transition-timing-function 変数定義 */
:root {
	--ttf: cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

/* ふんわり表示＋上にスライド */
.fx_funwari_up {
	opacity: 0;
	transform: translateY(100px);
	transition: all .5s var(--ttf);
}
.sd-enterd .fx_funwari_up {
	opacity: 1;
	transform: translateY(0px);
}


/* TOP　News見出し */
.top-midashi {
	font-size: 6vw;
    color: #777777;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #777777;
    display: flex;
    align-items: baseline;
    gap: 30px;
}

.top-midashi2 {
	font-size: 0.7em;
	font-weight: bold;
}

.top-midashi-green {
	font-size: 1.5em;
	color: #006619;
}

.box-line {
	padding-bottom: 2em;
	margin-bottom: 2em;
	border-bottom: 1px dashed #cccccc;
}


.midashi-font {
	font-size: 5vw;
	color: #777777;
}


.top-flexBox1, .top-flexBox2 {
    display: flex;
    flex-direction: column-reverse;
    gap: 30px;
}

.top-flexBox-Set {
  --flowSpace: 60px;
}
.top-flexBox3 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}




.foot-flex {
    padding: 30px 50px 0;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
}

.footCopyright {
    font-weight: bold;
    color: #ffffff;
	text-align: center;
}





/* ボタン共通設定 青 */
.bluebtn {
    width: 100%;
    font-weight: bold;
    font-size: 1.2em;
    position: relative;
    text-decoration: none;
    display: inline-block;
    background: #006DD9;
    color: #fff !important;
    padding: 20px 40px 20px 30px;
    border-radius: 50px;
    text-align: left;
    outline: none;
    transition: ease .2s;
    text-decoration: none !important;
}

.bluebtn:hover{
	background: #0482FF;
}

/* 矢印が右に移動 */
.btn-arrow1::after{
    content: '';
    position: absolute;
    top: 43%;
    right: 35px;
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    transition: all .3s;
}

/*hoverした際の移動*/
.btn-arrow1:hover::after{
    right: 25px;
}


/* ボタン共通設定 緑 */
.greenbtn {
    width: 100%;
    font-weight: bold;
    font-size: 1em;
    position: relative;
    text-decoration: none;
    display: inline-block;
    background: #006619;
    color: #fff !important;
    padding: 25px 40px 25px 20px;
    /* border-radius: 50px; */
    text-align: left;
    outline: none;
    transition: ease .2s;
    text-decoration: none !important;
}

.greenbtn:hover{
	background: #008822;
}

/* 矢印が右に移動 */
.btn-arrow1::after{
    content: '';
    position: absolute;
    top: 43%;
    right: 35px;
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    transition: all .3s;
}

/*hoverした際の移動*/
.btn-arrow1:hover::after{
    right: 25px;
}



/*==================================================
　5-3-1 中心から外に線が伸びる（下部）
===================================*/

.gNavi li a{
    /*線の基点とするためrelativeを指定*/
	position: relative;
}

.gNavi li.current a,
.gNavi li a:hover{
	color:#0481A2;
}

.gNavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 0;
    /*線の形状*/
    width: 100%;
    height: 1px;
    background: #ffffff;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.gNavi li.current a::after,
.gNavi li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

#GNAVICONTENTS01 a:hover:before, #GNAVICONTENTS01 .gNavi.sub-open>a:before {
    background: none;
}

#GNAVICONTENTS01 .gNavi>a:hover {
    color: #ffffff !important;
}



/* 下層ページ見出し */
.kasou-midashi {
	font-size: 5vw;
    color: #777777;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: column;
}

.kasou-midashi2 {
	font-size: 0.7em;
	font-weight: bold;
	color: #006619;
}


/* テーブル */
.t_l {
	width: 30%;
	padding: 20px;
	border-bottom: 1px dotted #cccccc;
	font-weight: bold;
}

.t_r {
	width: 70%;
	padding: 20px;
	border-bottom: 1px dotted #cccccc;
}


/* Company */
.company_l {
	width: 30%;
	padding: 30px 15px;
	border-bottom: 3px solid #accbb3;
	font-weight: bold;
}

.company_r {
	width: 70%;
	padding: 30px 0 30px 10vw;
	border-bottom: 1px solid #eeeeee;
}

.company_r .flexLayout {
	display: flex;
	flex-flow: column;
	gap: 1em;
}

.company_r .flexLayout .photo {
	max-height: 200px;
	max-width: 200px;
	width: 100%;
}

.company_r .flexLayout .photo img {
	width: auto;
}


.history-box {
	display: flex;
    gap: 10px;
    flex-direction: column;
	padding-bottom: 30px;
    border-bottom: 1px dotted #cccccc;
}

.history-box-left {
	font-weight: bold;
}


.products-midashi {
    font-size: 1.8em;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 3px solid #accbb3;
}

.products-box {
	display: flex;
	gap: 30px;
	flex-direction: column;
}


/* Contact */
.contact-tel-flex {
    display: flex;
    flex-direction: column;
    gap: 20px;
}



/* 応募メールフォーム */
.form-blackmidashi{
    padding: 10px;
    font-size: 1.4em;
    font-weight: bold;
    background: #000000;
    color: #ffffff;
    text-align: center;
}

div.mfp_buttons button {
    font-size: 14px;
    font-weight: bold;
    color: #000000;
}

.midashi-bold {
	color: #333333;
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 5px;
}


/* Services */
.service-box1,
.service-box2 {
	display: flex;
	gap: 20px;
	flex-direction: column;
}


.service-midashi {
    font-size: 1.4em;
	font-weight: bold;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 3px solid #accbb3;
}