@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700&display=swap');
/* font-family: 'Noto Sans JP', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Marcellus+SC&display=swap');
/* font-family: 'Marcellus SC', serif; */
@media print{
    body { height:inherit; min-height:0; margin:0; padding:0;}
}
/* ---------------------------------------------
 font
--------------------------------------------- */
html{ font-size:62.5%; color:#555; } /*初期値16pxの62.5%でルートが10px*/
body { font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,sans-serif; }
.f_min { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
.ffs_palt { font-feature-settings: "palt"; letter-spacing: 0.05em; }
/*---------------------------------------------
 reset css
--------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,p,th,td { margin:0; padding:0; line-height:1.4; }
input,textarea { margin:0; font-size:100%; position:relative; }
table { border-collapse:collapse; border-spacing:0; font-size:100%; }
img { border:0; }
address,em,th { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
label { cursor:pointer;}
a,
area,
area:focus,
area:active { outline:none; border:none; border:0; position:relative;}
/*---------------------------------------------
 for IE8
---------------------------------------------
div { position:relative;}
/* ---------------------------------------------
 tag
--------------------------------------------- */
b,strong {font-weight:bold; color:#231815;}
i { font-style:italic;}
em { font-weight:normal; font-style:normal;}
sub { vertical-align:baseline;}
p { line-height:1.6;}
section#message_area p,
section#privacy_area p
 { line-height: 1.8; margin: 0px 0 30px; font-size: 1.8rem; text-align: left; 
 /* font-feature-settings: "palt"; letter-spacing: 0.1em; */ }
img { vertical-align:middle; }
/* link */
a,a:visited { outline:none; transition:.2s; color:#468; text-decoration:none; }
a span { cursor:pointer;}
a:hover { text-decoration:underline; }
a img { border:none; }
/*a:hover img { opacity:0.7; filter:alpha(opacity=70); -ms-filter:"alpha(opacity=70)"; }
a:hover img.over { opacity:inherit; filter:none; -ms-filter:none; }*/
/* ---------------------------------------------
 js
--------------------------------------------- */
.over            {;/* rollover */}
.js_window_open-width-height {;}
.js_page_print   { cursor:pointer;}
.js_window_close {;}
.tile2,.tile3,.tile4,.tile5,.tile6 {;}
.hideattr {display:none;}
.debug .hideattr {display:inline-block; *display:inline; *zoom:1; margin-right:10px;}
.flexli { margin:0 auto; text-align:left; }
/* ---------------------------------------------
 PC/SP
--------------------------------------------- */
.hidePC { display:none !important; }
@media only screen and (max-width:767px) {
	html { padding:0; margin:0;}
	body { padding:0; margin:0; width:100%;}
	body {-webkit-text-size-adjust:100%; }
    iframe { max-width:100%; }
	img { max-width:100%; height:auto; }
	.hidePC { display:inherit !important; }
	.hideSP { display:none !important; }
    /* .spscroll table{ width:100%; } */
	.spscroll { overflow:auto; }
	.spscroll::-webkit-scrollbar{ height:5px;}
	.spscroll::-webkit-scrollbar-track{ background:#F1F1F1;}
	.spscroll::-webkit-scrollbar-thumb { background:#BCBCBC;}
}
/* ---------------------------------------------
 h*
--------------------------------------------- */
.main h2, .main h3, .main h4, .main h5, .main h6 { clear:both; }
.main div h2, .main div h3, .main div h4, .main div h5, .main div h6,
.main ul h2, .main ul h3, .main ul h4, .main ul h5, .main ul h6,
.main table h2, .main table h3, .main table h4, .main table h5, .main table h6 { clear:none; }
/* ---------------------------------------------
 list
--------------------------------------------- */
/*.article ul li,*/
ul.list0 { text-align:left; }
ul.list0 li { padding:5px 0;  line-height:1.4; }

ul.list1 { margin:0 0 10px 18px; text-align:left;}
ul.list1 li { padding:2px 0; text-indent:-18px; }
ul.list1 li:before { content:'・'; font-family:'Font Awesome 5 Free'; margin-right:2px; vertical-align:middle;  line-height:1.4; }

ul.idt { margin-left:1.3em; }
ul.idt li { text-indent:-1.3em; text-align:left; padding:0 0 10px; background:none;  line-height:1.4; }
ul.idt li span { font-weight:bold; color:#378; margin-right:2px;}

ol { margin:0 0 10px 1.7em; list-style:decimal outside; }
ol li { padding:10px 0 10px 5px; line-height:1.4; }

ul.inlineblock li { position:relative; display:inline-block; letter-spacing:normal; margin-right:25px; }
ul.inlineblock li img { vertical-align:middle; margin:3px;}

ul li.nolistmark { background:none;}

/* ---------------------------------------------
 link
--------------------------------------------- */
/* 矢印付リンク */
a.link { text-decoration:none; display:block; color:#3D4584; margin-top:5px; }
a.link::before { content:'\f35a'; font-family:'Font Awesome 5 Free'; margin-right:0.4em; font-weight:900; }
a.link:hover { color: #666; }


a.link_lft i { margin-left:0; margin-right:1rem; }
a.link_lft i::after { transform: scale(-1,1); right:auto; left:6px; right:inherit; }

a.newwin { text-decoration:none; display:block; color:#231815; margin-top:5px; font-weight:bold; }
a.newwin::before { content:'\f24d'; font-family:'Font Awesome 5 Free'; margin-right:0.4em; font-weight:900; }


/* ---------------------------------------------
 table
--------------------------------------------- */
table.tbl { margin: 50px auto; font-size: 1.6rem; /* border-top: 1px solid #fff; */ width: 100%; }
table.tbl tr { }
table.tbl th { color: #333; padding: 10px; font-weight: 800; vertical-align: top; line-height: 1.8; white-space: nowrap; }
table.tbl td { color: #666; padding: 10px; text-align: left; vertical-align: top; line-height: 1.8; }
table.tbl td a { color: #3D4584; text-decoration:none; }
table.tbl td a:before { font-family: "Font Awesome 5 Free"; content: '\f35a'; font-weight: 900; margin-right:0.3em; }
table.tbl td a:hover,
table.tbl td a:hover:before { color: #33808d; }
@media only screen and (max-width: 767px) {
    table.tbl { width: 100%; font-size: 14px; margin-bottom:50px; }
    table.tbl th { border-bottom: none; display: block; width: 100%; padding: 3px 0; }
    table.tbl td { border-bottom: none; display: block; width: 100%; padding: 3px 0 20px 0; font-size: 1.4rem; }
}

/* ---------------------------------------------
  横並びグリッド
--------------------------------------------- */
/* レイアウト:横2つ  */
.cols2 { margin-right:-30px; }
    .cols2:after { content:""; display:table; clear:both; }
.cols2 .col { width:50%; float:left; }
.cols2 .col .colinner { margin:0 30px 30px 0;}

/* レイアウト:横3つ  */
.cols3 { margin-right:-30px; margin-bottom: 20px; font-size:0; }
    .cols3:after { content:""; display:table; clear:both; }
.cols3 .col { width:33.3%; display: inline-flex; }
section#works_list .cols3 .col { float: left; }
.cols3 .colspan2 { width:66.6%;}
.cols3 .col .colinner { margin:0 30px 30px 0; }

/* レイアウト:横4つ  */
.cols4 { margin-right:-20px; margin-bottom: 20px; font-size:0; }
    .cols4:after { content:""; display:table; clear:both; }
.cols4 .col { width:25%; display: inline-flex; }
.cols4 .colspan2 { width:50%;}
.cols4 .col .colinner { margin:0 20px 50px 0; display:block; }

/* .colinner */
.colinner  { display:block; }
	.colinner:after { content:""; display:table; clear:both; }
.colinner img { max-width:100%;height:auto; }

@media only screen and (max-width:767px) {
	.cols2,
	.cols3,
	.cols4 { margin-left:auto; margin-right:auto; max-width:none; }
	.cols2 .col,
	.cols3 .col,
	.cols4 .col { width:100%; margin:0 auto 10px; }
	.cols2 .col .colinner,
	.cols3 .col .colinner,
	.cols4 .col .colinner { margin:0 0 20px; width:100%; }
    .cols_spnocal { width:100%; }
}

/* レイアウト:横2つ  */
.wp-block-columns.wp-block-columns-flexstart { align-items:flex-start; }



/* ---------------------------------------------
 h1,h2,h3,h4,h5
--------------------------------------------- */
h1 { font-size:4.0rem; font-weight:bold; margin:30px auto; color:#000; }
h2 { font-size:4.6rem; margin:0 0 50px 0; line-height:1.6; text-align:center; color:#3D4584; font-weight: 400;
    text-transform:uppercase; }
h2 span { font-size: 1.8rem; display: block;  font-family: 'Marcellus SC', serif; }
h4 { font-size:2.2rem; margin:50px 0; line-height:1.6; text-align:left; color:#3D4584; font-weight: 700; }
@media only screen and (max-width:767px) {
    h2 { margin:0 0 30px 0; }
}

/* ---------------------------------------------
 p
--------------------------------------------- */
p.p { line-height:1.8; margin:10px 0 20px; font-size:1.6rem; }
p.note { font-size:1.4rem; margin-bottom:10px; }
.lead { color: #666; font-size: 1.8rem; margin: 0px 0 50px 0; padding: 0; line-height: 1.8; }
@media only screen and (max-width:767px) {
    p.p { font-size:1.6rem; }
}

/* ---------------------------------------------
 img
--------------------------------------------- */
.img_center { text-align:center; margin:50px 0; }

/* マウスオーバーで画像拡大アニメーション */
a.imghover { overflow:hidden; display:block; }
a.imghover img { /* opacity:0.8; */
	-webkit-transform:scale(1); transform:scale(1);
    transition:1s; }
a.imghover:hover img { /* opacity:1; */
	-webkit-transform: scale(1.1);	transform: scale(1.1); }


/* ============================================
 #wrapper / リキッドレイアウト
============================================ */
body { text-align:center; position:relative; font-size:15px; font-size:1.6rem; }
#wrapper { margin:0 auto; min-width:960px; }
	#wrapper:after { content:""; display:table; clear:both; }
@media only screen and (max-width:767px) {
    #wrapper { /*margin:100px auto 0 auto;*/ min-width:inherit; }
}
/* ============================================
 #header
============================================ */
header { width:100%; padding:0; margin:0; position: relative; }
#headernav { position:fixed; width:100%; top:0; left:0; z-index:600;
    background-color:rgba(255,255,255,.8); transition:background-color .2s; }
    body.home #headernav,
    body.index #headernav { height:68px; }
    body.home #headernav { background-color:initial; }
    body.nottop #headernav { background-color:rgba(255,255,255,.8); }
#headernav .contentsinner { height:50px; padding:10px; }
.head_btn { position: absolute; z-index:100; top: 17px; right: 90px; }
.head_btn div { display: inline-block; }
.head_logo { position: absolute; top: 20px; }
.head_logo img { width:290px; }
@media only screen and (min-width:768px) {
    #headernav { height:90px; }
}
@media only screen and (max-width:767px) {
    #headernav { /*background-color: #fff;*/ height: 120px; }
    .head_btn { top:75px; left: 0; right: 0; margin: auto; z-index: 99; }
    body.home .head_btn,
    body.index .head_btn { top: 22px; right: 75px; }
    .head_logo { width: 60%; top: 20px; }
}
@media only screen and (max-width:330px) {

}

#menuBtn { display:block; position:absolute; top:10px; right:10px; width:60px; padding:0; z-index:99; }
@media only screen and (max-width:767px) {
    #menuBtn { transform:scale(0.8); z-index:102; }
}

#gnavi { display:none; position:fixed; top:0; left:0; background:#e5e5e5; z-index:20; width:100%; height:100vh; overflow: auto; }

#gnavi .search_area { background-color: #FEFFF5; padding:110px 15% 40px 15%; }
#gnavi .search_area table.gsc-search-box td.gsc-input { padding-right: 0px; }
#gnavi .search_area table.gstl_50 { background-color: #eee !important; }
#gnavi .search_area .gsc-input-box { border: none; }
#gnavi .search_area .gsib_a { background-color: #eee; padding: 15px 15px 12px 15px; height: 23px; }
#gnavi .search_area input.gsc-input { font-size: 1.6rem; background-color: #eee !important; }
#gnavi .search_area .gsst_a { padding: 0 10px; }
#gnavi .search_area .gsst_a .gscb_a { color: #666; }
#gnavi .search_area .gsst_a .gscb_a:hover { color: #000; }
#gnavi .search_area .gsc-search-button { margin-left: 0px; }
#gnavi .search_area .gsc-search-button-v2 { padding: 15px 17px; background-color: #000; border:none; }
#gnavi .search_area .gsc-search-button-v2 svg { fill: #FFFFFF; width: 20px; height: 20px; }
@media only screen and (max-width:767px) {
    #gnavi { z-index:100; }
    #gnavi .search_area { padding:70px 5% 10px 5%; }
    #gnavi .search_area .gsc-search-button-v2 { border-radius: 0; }
}

#gnavi ul.menu { padding:0 0 50px 0px; margin:0 auto; /* max-width:1000px; */ text-align:left; }
#gnavi ul.menu li { padding:0 0 0 15%; background-color: #FEFFF5; box-shadow: 2px 2px 2px rgba(0,0,0,0.2); position: relative; }
#gnavi ul.menu li:first-child { z-index: 10; }
#gnavi ul.menu li:nth-child(2) { z-index: 9; margin-right: 2%; }
#gnavi ul.menu li:nth-child(3) { z-index: 8; margin-right: 4%; }
#gnavi ul.menu li:nth-child(4) { z-index: 7; margin-right: 6%; }
#gnavi ul.menu li:nth-child(5) { z-index: 6; margin-right: 8%; }
#gnavi ul.menu li:nth-child(6) { z-index: 5; margin-right: 10%; }
#gnavi ul.menu li:nth-child(7) { z-index: 4; margin-right: 12%; }
#gnavi ul.menu li a { color:#666; padding:10px 0; font-size: 2.4rem; display: inline-block; font-family: 'Marcellus SC', serif; }
#gnavi ul.menu li a:hover { text-decoration: none; color: #000; }
#gnavi li.on a { }
#gnavi ul.menu li span { display: inline-block; padding-left: 1rem; }
#gnavi ul.menu li span a { display: inline-block; font-size: 1.4rem; font-weight: 400; margin-left: 1rem; font-family: inherit; }
/* tree表示 未使用 .menu_tree */
#gnavi ul.menu_tree { margin-left: 60px; }
#gnavi ul.menu_tree li{ margin-bottom: .25em; position: relative; }
#gnavi ul.menu_tree li::before { content: ""; position: absolute; top: -0.5em; left: -16px; width: 10px; height: calc(100% + 2.5em); border-left: 1px solid #222; }
#gnavi ul.menu_tree li:last-child::before { height: calc(1em + .25em); }
#gnavi ul.menu_tree li::after { content: ""; position: absolute; top: 1.8em; left: -16px; width: 10px; border-bottom: 1px solid #222; }

#gnavi ul.submenu { padding:0px; margin:0 auto; /* width: 70%; max-width:1000px; */ text-align:center; }
#gnavi ul.submenu li { display: inline-block; margin-bottom: 10px; }
#gnavi ul.submenu li a { padding: 0 50px 0 0; color: #666; font-size: 1.3rem; }
#gnavi ul.submenu li a.icon_pdf::before { content:'\f1c1'; font-family:'Font Awesome 5 Free'; margin-right:0.4em; font-weight:normal !important; }

@media only screen and (max-width:767px) {
    #gnavi ul.menu { padding:0 0 20px 0; margin-top: -1px; }
    #gnavi ul.menu li { padding:0; }
    #gnavi ul.menu li > a { display: block; padding:10px 0 10px 5%; }
    #gnavi ul.menu li span { display: block; padding-left:calc(5% - 1rem); padding-bottom: 5px; }
    #gnavi ul.menu li span a { padding: 3px 0; }
    #gnavi ul.submenu { padding:0px 5%; text-align: left; }
}

/* ============================================
 #mainv
============================================ */
#mainv { padding:100px 0 100px 0; margin:0 auto; }
#mainv img.logo { margin-bottom: 50px; }
#mainv .catch { color: #000; font-size: 3.6rem; margin: 0px 0 50px 0; padding: 0; line-height: 1.8; /* font-weight: bold; */ }
#mainv .catch span { font-size: 2.0rem; display: block; }
#mainv .catch img { display: block; margin: 20px auto 0 auto; }

@media only screen and (max-width:767px) {
    #mainv { margin: 0 0 20px 0; padding:100px 0 0; }
}

/* ============================================
 #main
============================================ */
#main { padding:0; margin:50px auto 0 auto; }
	#main:after { content:""; display:table; clear:both; }
.contentsinner { max-width:1000px; margin:0 auto; position: relative; }
    .contentsinner:after { content:""; display:table; clear:both; }
@media only screen and (max-width:767px) {
 	#main { max-width:100%; width:inherit; margin:0 auto; }
	.contentsinner { max-width:100%; margin:0 auto; }
    #main .contentsinner { width:90%; margin:auto; padding-bottom:20px; }
	#main .contents { width:100%; float:none; margin-left:auto; margin-right:auto; }
}

/* ============================================
 .breadcrumb
============================================ */
.breadcrumb { width: 100%; height: 100px; position: relative; top:79px; background: url(/img/bg_breadcrumb.png?v2) top center no-repeat; }
body.works .breadcrumb,body.category-works .breadcrumb,
body.company .breadcrumb { background: url(/img/bg_breadcrumb_works.png?v2) top center no-repeat; }
body.service .breadcrumb { background: url(/img/bg_breadcrumb_works.png?v2) top center no-repeat; }
body.contact .breadcrumb { background: url(/img/bg_breadcrumb_contact.png?v2) top center no-repeat; }
body.message .breadcrumb { background: url(/img/bg_breadcrumb_contact.png?v2) top center no-repeat; }
body.staff .breadcrumb { background: url(/img/bg_breadcrumb_contact.png?v2) top center no-repeat; }
/*
body.message .breadcrumb { background: url(/img/bg_breadcrumb_message.png) top center no-repeat; }
body.staff .breadcrumb { background: url(/img/bg_breadcrumb_message.png) top center no-repeat; }
*/
.breadcrumb .b_txt_area { position: relative; width:100%; max-width: 1000px; padding-top:38px; font-size: 1.6rem; margin: 0 auto; text-align: left; }
.breadcrumb .b_txt_area a { color: #666; }
@media only screen and (max-width:767px) {
    .breadcrumb { top: 5px; height: 80px; /* background-size: cover; */ }
    .breadcrumb .b_txt_area { /* top: 30px; */ padding: 0 5%; width: 90%; }
}
.breads{display: flex;}
.breads .bread:after{content:">";padding:0 5px;}
.breads .bread{flex:0 0 auto;}
.breads .bread:last-child::after{content:"";}

/* ============================================
 section
============================================ */
section { padding: 80px 0;}

body.company section { max-width: 700px; margin: 0 auto; }
body.contact section { max-width: 700px; margin: 0 auto; }
body.message section { max-width: 800px; margin: 0 auto; }
body.staff section   { max-width: 800px; margin: 0 auto; }
body.service section { max-width: 800px; margin: 0 auto; }

section#works { background: rgb(224,195,229);
background: linear-gradient(165deg, rgba(224,195,229,1) 30%, rgba(117,204,239,1) 100%); }

section#news { background: rgb(230,240,151);
background: linear-gradient(165deg, rgba(230,240,151,1) 30%, rgba(150,210,90,1) 100%); }

@media only screen and (max-width:767px) {
    section { padding: 40px 0;}
}

/* ============================================
 slick_area
============================================ */
.slick_area { padding: 0 100px; width: 1000px; margin: 0 auto; max-width:calc(100% - 200px); }
ul.slick01 { margin-bottom: 50px;}
ul.slick01 li { width: 320px;}
ul.slick01 li a { text-decoration: none; }
ul.slick01 li a img { width: 100%; height:auto; }
ul.slick01 li h3 { color: #333; font-size: 1.8rem; text-align: left; margin-top: 5px; }
ul.slick01 li .tag { color: #666; font-size: 1.3rem; text-align: left; margin: 3px 0; }
@media only screen and (max-width:767px) {
    .slick_area { padding: 0 12%; width: 76%; }
    .slick-prev { left: -35px; }
    .slick-next { right: -35px; }
}

/* ============================================
 .btn
============================================ */
div[class^="btn_"] a { text-transform: uppercase; }
.btn_w { /* color: #E42861; */ }
.btn_w a { position: relative; display: inline-block; background-color: #fff; color: #E42861; font-size: 1.5rem; text-align: center; border-radius:20px; padding: 10px 0px 10px 10px; margin: 0 5px 10px 5px; width: 170px; }
.btn_w a::before { color: #E42861; position: absolute; z-index: 10; left: 10px; content:'\f35a'; font-family:'Font Awesome 5 Free'; font-weight: 900; }
.btn_w a:hover { text-decoration: none; background-color: rgb(255, 255, 255, 0.8); }

.btn_pink { }
.btn_pink a { position: relative; display: inline-block; color: #fff; font-size: 1.5rem; text-align: center; border-radius:20px; padding: 10px 0px 10px 10px; margin: 0 5px 10px 5px; width: 170px;
background: rgb(250,73,127);
background: linear-gradient(90deg, rgba(250,73,127,1) 0%, rgba(252,147,179,1) 100%); }
.btn_pink a::before { color: #fff; position: absolute; z-index: 12; left: 10px; content:'\f35a'; font-family:'Font Awesome 5 Free'; font-weight: 900; }
.btn_pink a:hover { text-decoration: none; opacity: 0.8; }

.btn_blue {  }
.btn_blue a { position: relative; display: inline-block; color: #fff; font-size: 1.5rem; text-align: center; border-radius:20px; padding: 10px 0px 10px 10px; margin: 0 5px 10px 5px; width: 170px;
background: rgb(36,85,255);
background: linear-gradient(90deg, rgba(36,85,255,1) 0%, rgba(114,153,255,1) 100%); }
.btn_blue a::before { color: #fff; position: absolute; z-index: 12; left: 10px; content:'\f35a'; font-family:'Font Awesome 5 Free'; font-weight: 900; }
.btn_blue a:hover { text-decoration: none; opacity: 0.8; }

.btn_cyan {  }
.btn_cyan a { position: relative; display: inline-block; color: #fff; font-size: 1.5rem; text-align: center; border-radius:20px; padding: 10px 0px 10px 10px; margin: 0 5px 10px 5px; width: 170px;
background: rgb(57,173,223);
background: linear-gradient(90deg, rgba(57,173,223,1) 0%, rgba(136,206,236,1) 100%); }
.btn_cyan a::before { color: #fff; position: absolute; z-index: 12; left: 10px; content:'\f35a'; font-family:'Font Awesome 5 Free'; font-weight: 900; }
.btn_cyan a:hover { text-decoration: none; opacity: 0.8; }

.btn_green {  }
.btn_green a { position: relative; display: inline-block; color: #fff; font-size: 1.5rem; text-align: center; border-radius:20px; padding: 10px 0px 10px 10px; margin: 0 5px 10px 5px; width: 170px;
background: rgb(41,114,35);
background: linear-gradient(90deg, rgba(41,114,35,1) 0%, rgba(126,171,110,1) 100%); }
.btn_green a::before { color: #fff; position: absolute; z-index: 12; left: 10px; content:'\f35a'; font-family:'Font Awesome 5 Free'; font-weight: 900; }
.btn_green a:hover { text-decoration: none; opacity: 0.8; }

.btn_lang {  }
.btn_lang a { position: relative; display: inline-block; background-color: #666; color: #fff; font-size: 1.2rem; text-align: center; border-radius:20px; padding: 10px 0px 10px 0px; margin: 0 5px 10px 5px; width: 100px; }
.btn_lang a:hover { text-decoration: none; background-color: rgb(102, 102, 102, 0.8); }
.btn_lang.on a { background-color: rgba(0, 0, 0, 1);}
@media only screen and (max-width:767px) {
    .btn_lang a { padding: 5px 0px; width:75px; margin:0 0 0 2px; }
}

.btn_contact {  }
.btn_contact a { position: relative; display: inline-block; background-color: #2990B0; color: #fff; font-size: 1.2rem; text-align: center; border-radius:10px; padding: 10px 0px 10px 10px; margin: 0 5px 10px 5px; width: 150px; }
.btn_contact a::before { color: #fff; position: absolute; z-index: 10; left: 10px; content:'\f0e0'; font-family:'Font Awesome 5 Free'; font-weight: 900; }
.btn_contact a:hover { text-decoration: none; opacity: 0.8; }
@media only screen and (max-width:767px) {
    .btn_contact a { padding: 5px 0px 5px 15px; width:100px; margin:0 0 0 2px; }
}

.btn_gray {  }
.btn_gray a { position: relative; display: inline-block; background-color: #666; color: #fff; font-size: 1.5rem; text-align: center; border-radius:10px; padding: 10px 0px 10px 10px; margin: 0 5px 10px 5px; width: 170px; }
.btn_gray a::before { color: #fff; position: absolute; z-index: 10; left: 10px; content:'\f35a'; font-family:'Font Awesome 5 Free'; font-weight: 900; }
.btn_gray a:hover { text-decoration: none; background-color: rgb(102, 102, 102, 0.8); }

a.pdf::before { color: #fff; position: absolute; z-index: 12; left: 1em; content:'\f1c1'; font-family:'Font Awesome 5 Free'; font-weight: 900; }

/* ============================================
 top news
============================================ */
ul.frm_news { margin: 0 0 50px 0; }
ul.frm_news li { margin:0 0 10px 0; }
ul.frm_news li a { display: block; color: #4C6F40; background-color:rgb(255, 255, 255,0.5); padding:7px 50px; text-align: left; border-radius: 50px; }
ul.frm_news li a:hover { text-decoration: none; background-color:rgb(255, 255, 255,0.8); }
ul.frm_news li a .date { font-size: 1.3rem; margin: 0 10px 0 0; }
ul.frm_news li a .tag { font-size: 1.3rem; margin: 0 10px 0 0; }
ul.frm_news li a h3 { font-size: 2.0rem; font-weight: 700; }
@media only screen and (max-width:767px) {

}

/* ============================================
 NEWS
============================================ */
.tag_area { margin: 50px auto; width: 100%; max-width: 1000px; text-align: center; }
.tag_area span { margin: 10px 5px; display: inline-block; line-height:1.2; }
.tag_area span a { background-color: #f8f8f8; padding: 3px 20px; border-radius: 10px; text-decoration: none; }
.tag_area span a:hover { background-color: #eee; }

ul.news_list { margin: 0 auto 50px auto; width: 100%; max-width: 1000px;  }
ul.news_list li { margin:0 0 10px 0; }
ul.news_list li a { display: block; color: #4C6F40; background-color:rgb(231, 241, 148, 0.8); padding:7px 50px; text-align: left; border-radius: 50px; }
ul.news_list li a:hover { text-decoration: none; background-color:rgb(231, 241, 148, 1.0); }
ul.news_list li a .date { font-size: 1.3rem; margin: 0 10px 0 0; }
ul.news_list li a .tag { font-size: 1.3rem; margin: 0 10px 0 0; }
ul.news_list li a h3 { font-size: 2.0rem; font-weight: 700; }
@media only screen and (max-width:767px) {
    .tag_area { margin: 20px auto; }
    ul.news_list { width: 90%; padding: 0 5%; }
}

section#news_detail { width: 100%; max-width: 780px; margin: 0px auto;  }
h3.news { font-size: 2.0rem; font-weight: 700; display: block; color: #4C6F40; background-color:rgb(231, 241, 148, 0.8); padding:10px 5%; text-align: left; border-radius: 50px ;}
.tag_time { width: 100%; margin: 50px 0; }
    .tag_time::after { content:""; display:table; clear:both; }
.tag_time .tag_area { float: left; width: initial; text-align: left; margin: 0; }
.tag_time .time { float: right; color: #4C6F40; font-size: 1.5rem; padding:5px 10px; }
section#news_detail img { width: 100%; max-width: 780px; margin-bottom: 20px; }
section#news_detail p {line-height:1.8; margin:10px 0 20px; font-size:1.6rem; text-align: left; }
@media only screen and (max-width:767px) {
    .tag_time { width: 90%; margin: 20px 5%; }
    section#news_detail p { width: 90%; padding: 0 5%; }
}

/* ============================================
 works
============================================ */
section#works_list .cols3 .col h3 { color: #333; font-size: 1.8rem; text-align: left; margin-top: 5px; padding:0 10px 10px; }
section#works_list .cols3 .col .tag { color: #666; font-size: 1.3rem; text-align: left; margin: 3px 0; padding:0 10px 10px; }
h3.works { font-size: 2.0rem; font-weight: 700; display: block; color: #3D4584; padding:10px 5%; text-align: left; border-radius: 50px ;
background: rgb(224,195,229);
background: linear-gradient(165deg, rgba(224,195,229,1) 30%, rgba(117,204,239,1) 100%); }
.tag_time { width: 100%; margin: 50px 0; }
#works_list .colinner { border:1px solid #ccc; border-radius:10px; }

/* ============================================
message staff
============================================ */
section#staff_area h3 { font-size: 2.0rem; font-weight: 700; display: block; padding: 10px 5%; text-align: left; border-radius: 50px;
    color: #334477; background: rgb(224,195,229);
    background: linear-gradient(165deg, #cdc1ff 30%, #fdd5fd 100%);
    /*background: linear-gradient(165deg, #fda1f8 30%, #fdd5fd 100%);*/
    }
.profile { margin: 50px 0 0 0; }
    .profile::after { content:""; display:table; clear:both; }
.profile .thumb { width: 154px; float: left; }
.profile .thumb img { /*border: 2px solid#333;*/ border-radius: 10px; width: 100%; max-width: 100%; }
.profile dl { width:calc(100% - 184px); float: right; text-align: left; }
.profile dl dt .sub { font-size: 1.4rem; font-weight: 700; color: #333; padding: 0 0 3px 0; }
.profile dl dt .name { font-size: 2.0rem; font-weight: 700; color: #000; padding: 0 0 10px 0;}
.profile dl dd { font-size: 1.4rem; line-height: 1.8;}

.profile_staff { margin: 50px 0 0 0; }
    .profile_staff::after { content:""; display:table; clear:both; }
.profile_staff .thumb { width: 154px; float: right; }
.profile_staff .thumb img { border: 2px solid#333; border-radius: 10px; width: 100%; max-width: 100%; }
.profile_staff dl { width:100%; float: left; text-align: left; }
.profile_staff dl.photo { width:calc(100% - 184px); }
.profile_staff dl dt .name { display: inline-block; font-size: 2.0rem; font-weight: 700; color: #000; padding: 0  10px 10px 0px; }
.profile_staff dl dt .sub { display: inline-block; font-size: 1.5rem; color: #333; padding: 0 0 10px 0px; }
.profile_staff dl dt .specialty { font-size: 1.5rem; color: #333; padding: 2px 0 12px 0px; }
.profile_staff dl dt .specialty span { font-size: 1.3rem;  background-color: #333; border-radius: 10px; color: #fff; padding: 1px 10px; margin: 0 2px; line-height: 1; }
.profile_staff dl dd { font-size: 1.4rem; line-height: 1.8;}

@media only screen and (max-width:767px) {
    .profile .thumb { float: none; margin:  0 auto 20px auto; }
    .profile dl { width:100%; float: none; }
    .profile_staff .thumb { float: none; margin: 0 auto 20px auto; }
    .profile_staff dl.photo { width:100%; }
    .profile_staff dl { float: none; }
    .profile_staff dl dt .specialty span { display: inline-block; padding: 3px 10px; margin:2px; }
}

/* ============================================
service
============================================ */
section#service_area { }
.service_box { margin: 0 0 50px 0; padding: 20px 40px; border: 1px solid #b2b6d4; border-radius: 10px; }
    .service_box::after { content:""; display:table; clear:both; }
.service_box .thumb { width: 250px; float: left; }
.service_box .txt_area { width:calc(100% - 270px); float: right; text-align: left; padding-left: 20px; }
.service_box .txt_area h3 { font-size: 2.4rem; margin: 0 0 20px 0; padding: 0; color: #3D4584; text-align: left; }
.service_box .txt_area p { font-size: 1.4rem; line-height: 1.8; margin: 0 0 20px 0; }
@media only screen and (max-width:767px) {
    .service_box { padding: 15px 30px;}
    .service_box .thumb { float: none; margin: 0 auto; }
    .service_box .txt_area { width:100%; float: none; padding-left: 0px; }
}
/* ============================================
 contact
============================================ */
table.tbl.form_area th { padding-bottom: 5px; }
table.tbl.form_area td { padding-top: 0; }
table.tbl.form_area td input,
table.tbl.form_area td textarea { padding: 10px 20px; width: calc(100% - 40px); border-radius: 5px; outline: solid 2px #000; border: none; }
table.tbl.form_area td input:focus,
table.tbl.form_area td textarea:focus { outline: solid 2px #2990B0; }
.btn_form { }
.btn_form input { position: relative; display: inline-block; color: #fff; font-size: 1.5rem; text-align: center; border-radius:20px; padding: 10px 0px 10px 10px; margin: 0 5px 10px 5px; width: 170px;
background: rgb(69, 179, 235);
background: linear-gradient(90deg, rgb(69, 179, 235) 0%, rgb(118, 207, 252) 100%); cursor: pointer; border: none !important; outline: none !important; }
.btn_form input:hover { text-decoration: none; opacity: 0.8; }

/* ============================================
 contents assemble
============================================ */
section#service a { font-size: 1.6rem; }
section#service img { margin-bottom: 10px;}

section#service .service01 { margin: 30px auto; }
section#service .service01 img { width: 300px; }
@media only screen and (max-width:767px) {

}

/* ============================================
 #footer
============================================ */
/* #linkPagetop */
#linkPagetop { transition:bottom .4s ease-in-out; z-index:500;
    position:fixed; right:10px; bottom:-70px; width:auto; height:58px; }
    body.nottop #linkPagetop { bottom:30px; }
#linkPagetop a { display:inline-block; padding:6px 12px; color:#222; font-size:4.0rem; font-weight: bold;
    border-radius: 30px; font-family:'Font Awesome 5 Free'; line-height: 1; z-index: 99; text-decoration:none; }
#linkPagetop a:hover { color:#666; text-decoration:none; background-color: rgba(255,255,255,0.7); }
@media only screen and (max-width:767px) {
    #linkPagetop a.pc { display:none; }
    #linkPagetop a.sp { display:inline-block; }
}

/* #footerfoot */
footer { background-color:#f8f8f8; }
#footerfoot { position:relative; padding:30px 0;}
#footerfoot .contentsinner { position:relative; }

#footerfoot .footerfootlinks { padding:0px 0 20px; }
#footerfoot .footerfootlinks a,
#footerfoot .footerfootlinks a:visited { padding:5px; text-decoration:none; margin:auto 5px; font-size:1.5rem; color:#666; display:inline-block; }
#footerfoot .footerfootlinks a:hover { text-decoration:underline;}

#footerfoot #copyright { font-size:1.2rem; color:#666; }
#footerfoot #copyright span { display:inline-block; margin:0 5px; }

@media only screen and (max-width:767px) {
    #footerfoot { padding:10px 0; }
    #footerfoot .footerfootlinks { padding:10px 0 20px; }
    #footerfoot .footerfootlinks a { font-size:1.3rem; margin:auto 2px; }
    #footerfoot #copyright { font-size:1rem; }
}


/* ============================================
 Layout
============================================ */
/* clear % */
.clearfix:after {  content:""; display:table; clear:both; }
br.clear { clear:both; height:0; font-size:0; line-height:0; }
.dblock { display: block !important; }
/* margin */
.mt { margin-top:50px !important; }
.mb { margin-bottom:50px !important; }
.m0 { margin:0 !important; }
.pb0 { padding-bottom:0 !important ;}
/* width % */
.w05p { width:5%;} .w06p { width:6%;} .w07p { width:7%;} .w08p { width:8%;} .w09p { width:9%;} .w10p { width:10%;} .w11p { width:11%;} .w12p { width:12%;} .w13p { width:13%;} .w14p { width:14%;} .w15p { width:15%;} .w16p { width:16%;} .w17p { width:17%;} .w18p { width:18%;} .w19p { width:19%;} .w20p { width:20%;} .w25p { width:25%;} .w30p { width:30%;} .w33p { width:33%;} .w40p { width:40%;} .w50p { width:50%;} .w60p { width:60%;} .w70p { width:70%;} .w80p { width:80%;} .w90p { width:90%;} .w100p { width:100%;}
.w260 { width: 260px !important; } .w280 { width: 280px !important; }.w300 { width: 300px !important; }
/* display % */
.ib { display:inline-block; }
/* align */
.inlineL { text-align:left; } .inlineC { text-align:center; } .inlineR { text-align:right; }
.vlineT { vertical-align:top    !important; } .vlineM { vertical-align:middle !important; } .vlineB { vertical-align:bottom !important; }
@media only screen and (max-width:767px) {
   /* width % */
    .w05p_sp { width:5%;} .w06p_sp { width:6%;} .w07p_sp { width:7%;} .w08p_sp { width:8%;} .w09p_sp { width:9%;} .w10p_sp { width:10%;} .w11p_sp { width:11%;} .w12p_sp { width:12%;} .w13p_sp { width:13%;} .w14p_sp { width:14%;} .w15p_sp { width:15%;} .w16p_sp { width:16%;} .w17p_sp { width:17%;} .w18p_sp { width:18%;} .w19p_sp { width:19%;} .w20p_sp { width:20%;} .w25p_sp { width:25%;} .w30p_sp { width:30%;} .w33p_sp { width:33%;} .w40p_sp { width:40%;} .w50p_sp { width:50%;} .w60p_sp { width:60%;} .w70p_sp { width:70%;} .w80p_sp { width:80%;} .w90p_sp { width:90%;} .w100p_sp { width:100%;}
    /* margin % */
    .mt { margin-top:20px !important; }
    .mb { margin-bottom:20px !important; }
}
@media only screen and (max-width:767px) {
    #wrapper #main .spflnone .tx { float:none; width:auto; }
    #wrapper #main .spflnone .img { float:none; width:auto; }
}

/* pager */
.page-numbers{
    display: flex;
    justify-content: center;

}

.page-numbers li:first-child a,.page-numbers li:last-child a{
    border:none;
}

.page-numbers li a,.page-numbers .current{
    border:1px solid #468;
    padding:0 5px;
    margin:0 3px;
}

.page-numbers .current{
    background:#468;
    color:white
}

/* ============================================
  circle
============================================ */
#bg { position:absolute; margin:auto; top:0; right:0; left:0; bottom:0; width:100%; height:100%; z-index:-1; /* z-index:1; */ overflow:hidden; }
#news,
#works
 { overflow:hidden; position:relative; } /* 白丸on色地 */
.circle { border:7px solid #39f; position:absolute; cursor:pointer;
    margin:auto; top:-100%; left:-100%; bottom:0; /* bottom:-100%; */ right:-100%;
    animation:opcty 5s; opacity:0; }
@keyframes opcty {
    0%   {opacity:0}
    50%  {opacity:.5}
    90%  {opacity:.5}
    100% {opacity:0}
}
.hov { transform: scale(1.1); transition:0.5s; }
.erase { transform: scale(2); border-width:0; /*opacity:0 !important;*/ transition:0.4s; }