@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&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:#444; } /*初期値16pxの62.5%でルートが10px*/
body { font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,sans-serif; }
.f_min { font-family: "Hina Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", 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:#666; 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:'・'; 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; color:#444; margin-top:5px; }
a.link::before { content:''; display: inline-block; height:1em; width:1em;
    background:url(/img/icon_right.svg) center center no-repeat; background-size:contain; 
    margin-right:0.2em; font-weight:900; transform:translateY(.1em); transition:.2s; }
a.link:hover { color: #666; }
a.link:hover::before { transform:translate(.2em,.1em); }


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; 
    font-family: "Hina Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif; }
h2 { font-size:3.8rem; margin:0 auto 30px; line-height:1.6; text-align:center; color:#333; font-weight: 400;
    max-width:95vw; }
    h2.pagetitle { text-align:left; line-height:1.2; color:#000; font-size:min(4.4rem,9vw);
        font-family: "Hina Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
        margin-bottom:20px; 
        }
        h2.pagetitle::first-letter { color:#c00; font-size:1.2em; }
h2 span { font-size: 1.8rem; display: block;  font-family: 'Marcellus SC', serif; }
h3 { font-size:3rem; margin:30px 0 15px; line-height:1.6; text-align:left; color:#333; font-weight: 700;}
h4 { font-size:2.4rem; margin:30px 0 15px; line-height:1.6; text-align:left; color:#333; font-weight: 700; }
h5 { font-size:2.0rem; margin:30px 0 10px; line-height:1.6; text-align:left; color:#333; font-weight: 700; }
h6 { font-size:1.6rem; margin:30px 0 10px; line-height:1.6; text-align:left; color:#444; 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;*/ font-size:1.5rem; }
	#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 { background-color:initial; }
    body.nottop #headernav { background-color:rgba(255,255,255,.8); }
#headernav .contentsinner { padding:10px 0; box-sizing:content-box;
    display:flex; justify-content:space-between; margin:0 auto; }
.head_logo { /*position: absolute; top: 20px;*/ width:min(30vw,290px); }
.head_logo img { display:block; }
#headernav a.link { font-size:1.2rem; font-weight:600; margin-right:1em; }
.head_btn { text-align:right; }
.head_btn ul.sns { margin-right:10px; }
.head_btn ul.sns li a { padding:min(7px,0.6vw); }
.head_btn div { display: inline-block; }
.head_btn .logout { font-size:1.2rem; margin-left:1em; display:inline-block; }
.logout::before { content:''; background:url(/img/icon_logout.svg) center center no-repeat; background-size:contain; 
    display:inline-block; width:1em; height:1em; margin:0 .15em 0 0; transform:translateY(0.15em); }
.head_btn .btn_lang { display:none; }
@media only screen and (max-width:1120px) {
    .head_btn { text-align:right; padding-right:45px; }
}
@media only screen and (max-width:767px) {
    .head_btn { padding-top:4px; padding-right:50px; }
}
/*@media only screen and (max-width:580px) */
@media only screen and (max-width:670px) 
{
	.head_btn ul.sns { display:none; }
}
@media only screen and (max-width:500px) {
	#headernav a.link { display:none; }
}

#nav_toggle { display:block; width:30px; height:30px; z-index:300; cursor :pointer;
    position:absolute; top:16px; right:3vw; position:fixed; 
}
#nav_toggle div { position:relative; }
#nav_toggle span{ display:block; position:absolute; left:0; 
    height:3px; background:#000; width:100%; border-radius:2px;
    -webkit-transition:0.2s ease-in-out; -moz-transition:0.2s ease-in-out; transition:0.2s ease-in-out; 
    transition:.2s; 
    }

#nav_toggle span:nth-child(1){ top:0px;  }
#nav_toggle span:nth-child(2){ top:10px; }
#nav_toggle span:nth-child(3){ top:20px; }

#nav_toggle:hover  span:nth-child(1) { transform:translateY(2px); }
#nav_toggle:hover  span:nth-child(3) { transform:translateY(-2px); }

.open #nav_toggle span:nth-child(1) { top:12px; -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); transform:rotate(135deg); }
.open #nav_toggle span:nth-child(2) { width:0; left:50%; }
.open #nav_toggle span:nth-child(3) { top:12px; -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); transform:rotate(-135deg); }




#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:#f8f8f8; z-index:20; width:100%; height:100vh; overflow: auto; }


#gnavi .search_area { background-color: #FEFdFc; padding:50px 15% 20px 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 20px 0px; margin:0 auto 15px; /* max-width:1000px; */ 
    text-align:left; background-color: #FEFdFc; box-shadow:2px 1px 2px rgba(0,0,0,0.1); }
#gnavi ul.menu li { padding:0 0 0 15%; 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:#333; padding:10px 0; font-size:2rem; display: inline-block; font-family: 'Marcellus SC', sans-serif; }
#gnavi ul.menu li.info a { font-size:1.5rem; margin-left:1em; }
#gnavi ul.menu li.info a:before { content:'-'; display:inline-block; position:relative; margin-right:.3em; }
#gnavi ul.menu li.logout a { font-size:1.5rem; font-weight:500; margin:10px 0 30px; }
#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:15px auto 0; /* 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 10px; 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%; }
}

/* ============================================
 #sidebar
============================================ */
 #sidebar { padding:30px 0; }

 
/* ============================================
 #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:0 auto; min-height:calc(100vh - 200px); }
	#main:after { content:""; display:table; clear:both; }
.contentsinner { width:min(1000px,93vw); 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 { margin:0 auto; }
    #main .contentsinner { padding-bottom:20px; }
	#main .contents { width:100%; float:none; margin-left:auto; margin-right:auto; }
}

/* ============================================
 .breadcrumb
============================================ */
.breadcrumb { width: 100%; position: relative; margin-top:min(10px,2vw); }
.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; }

.breads{display: flex;}
.breads .bread:after {content:">";padding:0 5px;}
.breads .bread {flex:0 0 auto;}
.breads .bread a i.home::before { content:''; display:inline-block; width:1em; height:1em; background:url(/img/icon_home.svg) center center no-repeat; background-size:contain; }
.breads .bread:last-child::after{content:"";}

.breadcrumb li.bread.bread-home a { 
    font-size:.1em; color:#fff !important; text-decoration:none; margin-left:-5px; }
.breadcrumb li.bread.bread-home a::before { content:''; display:inline-block; width:17px; height:17px; 
    background:url(/img/icon_home.svg) center center no-repeat; background-size:contain; 
    transform:translate(5px,2px);
}

/* ============================================
 section
============================================ */
section { padding:0; padding-top:min(30px,3vw); padding-bottom:min(30px,3vw); }

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%); }

/* ============================================
 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; }

a.btn { position: relative; display: inline-block; color: #fff; font-size:.9em; text-align: center; border-radius:20px; padding:5px 0px 5px 10px; margin: 0 5px 10px 5px; width: 170px;
background:#888; }
a.btn::before { position:absolute; left:1em; top:0; bottom:0; margin:auto; 
    display:inline-block; width:1.2em; height:1.2em; margin-right:.1em;
    content:''; background:url(/img/icon_right.svg) center center no-repeat; background-size:contain; 
    filter:invert(0.95); transition:.2s;
    }
a.btn:hover { text-decoration:none; }
a.btn:hover::before { transform:translateX(.1em); }

.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 { content:''; display:inline-block; width:1em; height:1em; background:url(/img/icon_right_circle.svg) center center no-repeat; background-size:contain; }
.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: #999; 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(102, 102, 102, 1);}
@media only screen and (max-width:767px) {
    .btn_lang a { padding: 5px 0px; width:75px; margin:0 0 0 2px; }
}

.btn_signin {  }
.btn_signin a { position: relative; display: inline-block; background-color: #000; 
    font-size:min(1.2rem,2.6vw); text-align: center; color: #fff; font-weight:600;
    border-radius:10px; padding: 10px 0px 10px 10px; margin: 0 5px 10px 5px; width: 150px; }
.btn_signin a::before { 
    content:''; display:block; width:1.5em; height:1.5em;
    background:url(/img/icon_account.svg) center center no-repeat; background-size:contain;
    filter:invert(3);
    position: absolute; z-index: 10; left: 10px; 
    }
.btn_signin a:hover { text-decoration: none; opacity: 0.8; }
@media only screen and (max-width:767px) {
    .btn_signin a { padding: 5px 7px 5px 22px; width:initial; margin:0 0 0 2px; display:inline-block; }
    .btn_signin a:before { left:4px; }
}
.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; }

/* ============================================
 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:7px auto; width: 100%; max-width:800px;  }
ul.news_list li { margin:0 0 3px 0; }
ul.news_list li a { 
    display:flex; flex-wrap:wrap; align-items:center; 
    padding:7px 20px; background-color:rgb(247, 247, 247, 0.6); 
    border:1px solid #eee; border-radius:5px; 
    color: #666; text-align: left; 
    }
ul.news_list li a:hover { text-decoration: none; background-color:rgb(240, 240, 240, 1.0); }
ul.news_list li a .date { font-size: 1.3rem; margin: 0 20px 0 0; display:inline-block; }
ul.news_list li a .tag { font-size: 1.3rem; margin: 0 10px 0 0; }
ul.news_list li a h4 { font-size: 1.4rem; font-weight:500; display:inline-block; margin:0;  }
@media only screen and (max-width:767px) {
    .tag_area { margin: 20px auto; }
}

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: #222; 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:15px; bottom:-70px; width:auto; height:20px; }
    body.nottop #linkPagetop { bottom:30px; }
#linkPagetop a::before { content:''; display:inline-block; width:30px; height:30px; 
    background:url(/img/icon_right_circle.svg) center center no-repeat; background-size:contain; 
    transform:rotate(-90deg); transition:transform .2s;
    }
#linkPagetop a:hover { color:#666; text-decoration:none; }
#linkPagetop a:hover::before { transform:rotate(-90deg) translateX(2px); }
@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:10px 0 20px; }
#footerfoot .footerfootlinks a,
#footerfoot .footerfootlinks a:visited { padding:5px; text-decoration:none; margin:auto 5px; font-size:1.3rem; 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 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; }