/*
2019/5/14
ベースのフォントサイズ変えた
logoの表示幅を修正。ロゴのサイズ固定だったものを可変に修正
 @media screen and (max-width: 1280px)で一旦小さく
 @media screen and (max-width: 1024px)で再度大きく
 メインのメニュー項目からサポートサービスを削除

2020/3/
下層ページのサブタイトル共通部追加-文字色とラインは白：他の色が必要な時はCSS上書き-
縁取りはグレー系白文字白バック用

2020/4/23
sumabutu.cssを移行
h3のFonmtSize 20から24に変更

2020/5/1
subheader マージン追加した

2020/6/3
@media screen and (max-width: 1100px)で
ロゴのサイズさらに縮小。メニューのマージンとパディングを狭くした（メニューが一つ追加の為）

2020/6/10
btn secondaryの
text-transform:uppercase;
をやめる

以下追加
.contentlist {
	margin-top: 1em;
}

h5のサイズを若干大きく

2020/10/8
.btn.secondaryの
padding: 20px 55px;に（ボタンの幅若干大きくした-もっと巨大にしたいが）

*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
 margin:0;
 padding:0;
 border:0;
 font:inherit;
 /*font-size:100%;*/
 font-size: 16px;
 vertical-align:baseline;
}
html {
 line-height:1
}
ol,ul {
 list-style:none
}
table {
 border-collapse:collapse;
 border-spacing:0
}
caption,th,td {
 text-align:left;
 font-weight:normal;
 vertical-align:middle
}
q,blockquote {
 quotes:none
}
q:before,q:after,blockquote:before,blockquote:after {
 content:"";
 content:none
}
a img {
 border:none
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
 display:block
}
p {
 font-size:15px;
 line-height:27px;
 /*padding-bottom:15px;*/
 /*color:#1d1d1d*/
 color: #777;
}
h1 {
 font-size:32px;
 font-weight:300;
 line-height:68px
}
h2 {
 font-size:36px;
 font-weight:300;
 color:#fff
}
h3 {
 font-size:24px;
 line-height:32px;
 /*margin-bottom:20px;*/
 color:#8A9097;
 /*2019-2-15*/
 border-bottom: solid 1px #8a9097;
 margin-bottom:1em;
 margin-top: 2em;
}
h4 {
 font-size:15px;
 font-weight:600;
 /*margin: 0 0 0 60px;*/
 text-transform:uppercase
}
/*
h4:after {
 display:block;
 width:30px;
 height:2px;
 margin-top:15px;
 content:'';
 background-color:#7AE2DE
}
*/

h5 {
    font-size: 17px;
    line-height: 1.1;
    color: #0068b7;
    font-weight:600;
}
/*
h5 {
 font-size:13px;
 font-weight:600;
 display:inline-block;
 text-transform:uppercase;
 color:#1d1d1d
}
*/

.bold-italic {
 font-weight:600;
 font-style:italic
}
.btn.primary {
 display:inline-block;
 font-size:13px;
 letter-spacing:1px;
 /*text-transform:uppercase;*/
 color:#fff;
 /*2019-2-18
 background-color:#7AE2DE;
 padding:20px;*/
 background-color: #0068b7;
 padding: 20px 40px;
 
 text-decoration:none;
 line-height:1.2;
}
.btn.primary:hover {
 background-color:#71D5D2
}
.btn.secondary {
 display:inline-block;
 font-size:13px;
 letter-spacing:1px;
 /*text-transform:uppercase;*/
 /*
 color:#7AE2DE;
 border:2px solid #7AE2DE;
 */
 /*バックがグレーだと目立たなくなったので*/
 color: #1d1d1d;
 border: 2px solid #1d1d1d;
 padding: 20px 55px;
 text-decoration:none;
 line-height:1.4
}
.btn.secondary:hover {
 color:#fff;
 background-color:#71D5D2;
 border-color:#71D5D2
}
.btn.secondary:focus {
 color:#fff;
 background-color:#7AE2DE;
 border-color:#7AE2DE
}
.btn.secondary-white {
 display:inline-block;
 font-size:13px;
 letter-spacing:1px;
 text-transform:uppercase;
 color:#fff;
 font-weight:400;
 border:2px solid #fff;
 padding: 20px 40px;
 text-decoration:none;
 line-height:1
}
.btn.secondary-white:hover {
 color:#7AE2DE;
 background-color:#fff;
 border-color:#fff
}
.btn.secondary-white:focus {
 color:#7AE2DE;
 background-color:#fff;
 border-color:#fff
}
.view-more {
 /*問合せ牡丹の上のマージン*/
 /*margin-top:70px*/
 margin-top: 20px;
}

.view-map {
    padding: 2px !important
}
a.text-link {
 color:#fff;
 margin-left:30px;
 display:inline-block;
 font-size:13px;
 letter-spacing:1px;
 text-transform:uppercase
}
a.text-link:focus {
 color:#fff
}
a.text-link:after {
 font-family:FontAwesome;
 content:"\f105";
 opacity:0;
 -webkit-transition:all 300ms;
 -moz-transition:all 300ms;
 -ms-transition:all 300ms;
 -o-transition:all 300ms;
 transition:all 300ms
}
a.text-link:hover {
 color:#fff
}
a.text-link:hover:after {
 opacity:1;
 margin-left:10px
}
.has-padding {
 padding: 25px 0;
 /*バックグラウンドの色をちょっとグレーに*/
 /*2019/12/25 白に変更
 background-color: #eeeeef;*/
 background-color: #ffffff;
}
.has-padding-tall {
 padding:160px 0
}

.alternate-bg {
 background-color:#F4F6F9
}
.footer-bg {
 /*background-color:#383231*/
 background-color: #9f9fa0;
}
.is-centered {
 text-align:center
}

body {
 overflow-x:hidden
}
html,body {
 /*font-family:Raleway,Verdana,Arial,sans-serif;*/
 font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
 font-size:15px;
 font-weight:400;
 width:100%;
 height:100%;
 margin:0;
 padding:0;
 /*color:#1d1d1d;*/
 /*color: #9f9fa0;*/
 color: #333333;
 -webkit-text-size-adjust:100%
}
.group:after {
 display:table;
 clear:both;
 content:''
}
.no-padding {
 padding:0
}
.no-margin {
 margin:0
}
a {
 -webkit-transition-timing-function:ease;
 transition-timing-function:ease;
 -webkit-transition-duration:200ms;
 transition-duration:200ms;
 /*color:#7AE2DE*/
}
a:hover {
 text-decoration:none;
 color:#71D5D2
}
ul,ol {
 margin:0;
 padding:0
}
ul li {
 list-style:none
}
input,textarea {
 outline:none
}
.wide {
 width:auto;
 max-height:100%
}
.tall {
 max-width:100%;
 height:auto
}
.bold {
 font-weight:600
}
.italic {
 font-style:italic
}
.has-top-margin {
 margin-top:50px
}

.wp1,.wp2,.wp3,.wp4,.wp5,.wp6,.wp7,.wp8,.wp9,.wp10 {
 visibility:hidden
}
.wp1 {
 -webkit-animation-delay:.5s;
 animation-delay:.5s
}
.wp2 {
 -webkit-animation-delay:.8s;
 animation-delay:.8s
}
.wp3 {
 -webkit-animation-delay:1s;
 animation-delay:1s
}
.bounceInLeft,.bounceInRight,.fadeInUp,.fadeInUpDelay,.fadeInDown,.fadeInUpD,.fadeInLeft,.fadeInRight,.bounceInDown,.fadeIn {
 visibility:visible
}
.header-nav-wrapper {
 position:relative;
 /*background-color:#1d1d1d*/
 background-color: #fff;
}
.header-nav-wrapper .logo {
 display:inline-block;
 /*width:340px;20190514*/
 /*2019-5-14*/
 width: 420px;
 margin-left: 20px;
 /*2019-5-14*/
 padding:30px 0;
 text-align:center;
 /*border-bottom:solid 5px #7AE2DE;*/
 /*background-color:#1d1d1d*/
 background-color: #fff;
}
.header-nav-wrapper .primary-nav-wrapper {
 float:right;
 /*border-bottom:solid 5px #7AE2DE;*/
 /*background-color:#1d1d1d*/
 background-color: #fff;
 -webkit-transition:all 300ms;
 transition:all 300ms
}
.header-nav-wrapper nav {
 display:inline-block;
 margin-right:60px;
 /*padding:34px 0 33px*/
 padding: 32px 0;
}
.header-nav-wrapper nav ul {
    /*2019/02/22 dropdown*/
 /*display:inline-block*/
}

/* 2019-6-11 メニューの左右PADDING小さくした */
.header-nav-wrapper nav ul li {
 /*font-size:13px;*/
 font-size: 12px;
 display:inline-block;
 /*padding:10px 20px;*/

 padding: 0px 10px;
 letter-spacing:1px;
 text-transform:uppercase;
 border-right:solid 1px #E5E7E9
}
.header-nav-wrapper nav ul li:last-child {
 border-right:none
}
.header-nav-wrapper nav ul li a {
 font-weight:600;
 position:relative;
 padding-bottom:10px;
 text-decoration:none;
 /*color:#1d1d1d*/
 /*color: #fafafa;*/
 color: #9f9fa0;
}
.header-nav-wrapper nav ul li a:hover {
 /*color:#7AE2DE*/
}
.header-nav-wrapper nav ul li a:before {
 position:absolute;
 bottom:0;
 left:0;
 visibility:hidden;
 width:100%;
 height:2px;
 content:'';
 -webkit-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s;
 -webkit-transform:scaleX(0);
 transform:scaleX(0);
 /*background-color:#7AE2DE;*/
 background-color: red;
}
.header-nav-wrapper nav ul li a:hover:before {
 visibility:visible;

 -webkit-transform:scaleX(1);
 transform:scaleX(1)
}
.header-nav-wrapper .is-visible {
 visibility:visible;
 opacity:1
}

.header-nav-wrapper nav ul li .active {
/*box-shadowで内側にライン引いてみた2019/2/12*/
 box-shadow: 0px -2px 0px 0px rgba(256,0,0,1.0) inset;
}
/*
.secondary-nav-wrapper {
 display:inline-block;
 padding:35px 30px;
 background-color:#1d1d1d
}
.secondary-nav-wrapper ul.secondary-nav li {
 font-size:13px;
 letter-spacing:1px;
 text-transform:uppercase
}
.secondary-nav-wrapper ul.secondary-nav li.subscribe {
 position:relative;
 padding:10px 20px 10px 0;
 border-right:solid 1px #505c66
}
.secondary-nav-wrapper ul.secondary-nav li.subscribe a {
 position:relative;
 padding-bottom:10px;
 text-decoration:none
}
.secondary-nav-wrapper ul.secondary-nav li.subscribe a:before {
 position:absolute;
 bottom:0;
 left:0;
 visibility:hidden;
 width:100%;
 height:2px;
 content:'';
 -webkit-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s;
 -webkit-transform:scaleX(0);
 transform:scaleX(0);
 background-color:#7AE2DE
}
.secondary-nav-wrapper ul.secondary-nav li.subscribe a:hover:before {
 visibility:visible;
 -webkit-transform:scaleX(1);
 transform:scaleX(1)
}
.secondary-nav-wrapper ul.secondary-nav li.subscribe:after {
 position:absolute;
 top:0;
 right:0;
 height:34px;
 content:' ';
 border-right:1px solid #323940
}
.secondary-nav-wrapper ul.secondary-nav li.search {
 margin-left:20px
}
.secondary-nav-wrapper ul.secondary-nav li.search a {
 font-size:16px;
 color:#fff
}
.secondary-nav-wrapper ul {
 display:inline-block
}
.secondary-nav-wrapper ul li {
 display:inline-block
}
*/
/*
.search-wrapper {
 position:absolute;
 top:0;
 right:0;
 visibility:hidden;
 width:50%;
 padding:38px 30px;
 -webkit-transition:all 300ms;
 transition:all 300ms;
 opacity:0;
 background-color:#1d1d1d
}
.search-wrapper ul.search .is-selected {
 width:360px
}
.search-wrapper ul.search li {
 display:inline-block
}
.search-wrapper ul.search li .hide-search {
 font-size:20px;
 position:absolute;
 top:40%;
 right:30px;
 color:#fff
}
.search-wrapper ul.search li input {
 font-size:13px;
 width:300px;
 padding-bottom:9px;
 -webkit-transition:all 300ms;
 transition:all 300ms;
 color:#fff;
 border:none;
 border-bottom:solid 2px #7AE2DE;
 background-color:#1d1d1d
}
*/
.primary-nav-wrapper.open {
 visibility:visible;
 opacity:1
}
.nav-toggle {
 position:absolute;
 z-index:999999;
 top:50%;
 left:50%;
 padding:10px 35px 16px 0;
 cursor:pointer;
 -webkit-transform:translate(-50%, -50%);
 transform:translate(-50%, -50%)
}
.nav-toggle:focus {
 outline:none
}
.nav-toggle span,.nav-toggle span:before,.nav-toggle span:after {
 /*vavber色とか*/
 position:absolute;
 display:block;
 width:35px;
 height:3px;
 content:'';
 cursor:pointer;
 border-radius:1px;
 /*background:#fff;*/
 background-color: #9f9fa0;
}
.nav-toggle span:before {
 top:-10px
}
.nav-toggle span:after {
 bottom:-10px
}
.nav-toggle span,.nav-toggle span:before,.nav-toggle span:after {
 -webkit-transition:all 300ms ease-in-out;
 transition:all 300ms ease-in-out
}
.nav-toggle.active span {
 background-color:transparent
}
.nav-toggle.active span:before,.nav-toggle.active span:after {
 top:0
}
.nav-toggle.active span:before {
 -webkit-transform:rotate(45deg);
 transform:rotate(45deg)
}
.nav-toggle.active span:after {
 top:10px;
 -webkit-transform:translatey(-10px) rotate(-45deg);
 transform:translatey(-10px) rotate(-45deg)
}

.navicon {
 position:absolute;
 top:0;
 right:0;
 visibility:hidden;
 /*width:25px;*/
 /*height:26px;*/
 /*padding:52px;*/
 width: 20px;
 height: 20px;
 padding: 40px;
 -webkit-transition:all 300ms ease-in-out;
 transition:all 300ms ease-in-out;
 /*background-color:#1d1d1d*/
}


.fixed {
 position:fixed;
 z-index:999
}
header.hero {
 position:relative;
 display:table;
 width:100%;
 height:calc(100vh - 8.2em);
 max-height:760px;
 padding:10px
}
header.hero .hero-bg {
 display:table-cell;
 vertical-align:middle
}
header.hero .hero-bg .hero-intro-text {
 margin-top:60px;
 padding-top:25px;
 text-align:center;
 border-top:solid 1px rgba(255,255,255,0.25)
}
header.hero .hero-bg .hero-intro-text p {
 font-weight:300;
 margin:0;
 padding:0;
 color:#fff
}
header.hero h1 {
 margin-bottom:40px;
 color:#fff
}
header.hero h3 {
 font-weight:300;
 margin-bottom:45px;
 padding:0 25%;
 color:#fff
}
@-webkit-keyframes scroll-inner {
 from {
  margin-top:15%;
  opacity:1
 }
 to {
  margin-top:75%;
  opacity:0
 }
}
@keyframes scroll-inner {
 from {
  margin-top:15%;
  opacity:1
 }
 to {
  margin-top:75%;
  opacity:0
 }
}
/*
div.mouse-container {
 position:absolute;
 bottom:0;
 left:50%;
 display:block;
 height:50px;
 -webkit-transform:translate(-50%, -50%);
 transform:translate(-50%, -50%)
}
*/
div.mouse {
 position:relative;
 display:block;
 width:20px;
 height:30px;
 margin:0 auto;
 border:solid 1px #fff;
 border-radius:8px
}
div.mouse span.scroll-down {
 display:block;
 width:4px;
 height:4px;
 margin:15% auto auto;
 -webkit-animation:scroll-inner 1.5s;
 animation:scroll-inner 1.5s;
 -webkit-animation-timing-function:ease;
 animation-timing-function:ease;
 -webkit-animation-iteration-count:infinite;
 animation-iteration-count:infinite;
 border-radius:50%;
 background:#fff
}
.collective p {
 padding-bottom:25px
}
.collective .video-player {
 display:inline-block;
 margin:25px 0 50px -100px;
 padding:10px;
 background-color:#F4F6F9
}


.crew article.crew-member {
 position:relative;
 overflow:hidden;
 width:100%;
 height:300px;
 -webkit-transition:all 300ms;
 transition:all 300ms;
 background-repeat:no-repeat;
 background-position:center;
 background-size:cover
}
.crew article.crew-member figure {
 display:table;
 width:calc(100% + 1px);
 height:100%
}
.crew article.crew-member figure figcaption {
 display:table-cell;
 height:100%;
 text-align:center;
 vertical-align:middle
}
.crew article.crew-member figure figcaption p {
 padding:15px 15px 25px;
 color:#fff
}
.crew article.crew-member figure figcaption a {
 color:rgba(255,255,255,0.7)
}
.crew article.crew-member figure figcaption a:hover {
 color:#fff
}
.crew article.crew-member figure figcaption .crew-socials ul li {
 display:inline-block;
 margin-right:10px
}
.crew article.crew-member figure figcaption .crew-socials ul li:last-child {
 margin-right:0
}
.crew article.crew-member figure:hover .overlay {
 opacity:1
}
.crew article.crew-member h2 {
 font-size:15px;
 font-weight:500;
 line-height:20px;
 text-transform:uppercase;
 color:#fff
}
.crew article.crew-member img {
 position:absolute;
 top:50%;
 left:50%;
 width:auto;
 min-width:100%;
 height:auto;
 min-height:100%;
 margin:0;
 padding:0;
 -webkit-transition:all 300ms;
 transition:all 300ms;
 -webkit-transform:translate(-50%, -50%);
 transform:translate(-50%, -50%)
}
.crew article.crew-member .overlay {
 z-index:99;
 width:100%;
 height:100%;
 -webkit-transition:all 300ms;
 transition:all 300ms;
 opacity:0;
 background-color:rgba(122,226,222,0.8)
}


.skillset .bar-chart-wrapper {
 position:relative;
 margin-bottom:35px
}
.skillset .bar-wrapper {
 background-color:#1d1d1d
}
.skillset .bar-wrapper .bar {
 height:10px;
 margin:10px 0;
 background-color:#7AE2DE
}
.skillset .bar-chart-figure {
 float:right
}
.skillset .push-right {
 position:absolute;
 top:0;
 right:0
}

.latest-articles article span.featured-tag {
    /*画像に重なる文字としても良いかも*/
 font-size:13px;
 position:absolute;
 vertical-align:middle;
 /*z-index:99;*/
 z-index: 90;
 bottom:20px;
 /*left:10px;
 padding:4px 10px;*/
 color:#fff;
 /*background-color:#7AE2DE;*/
 /*
 -moz-border-radius:40px;
 -webkit-border-radius:40px;
 border-radius:40px
 */
}


.latest-articles article figure.has-overlay {
 height:100%
}
.latest-articles article:hover h2:after {
 margin-left:10px;
 opacity:1
}
.latest-articles article:hover .has-overlay:after {
 background-color:rgba(65,74,82,0.8)
}
.latest-articles article ul.article-footer {
 padding-top:15px;
 border-top:solid 1px #E5E7E9
}
.latest-articles article ul.article-footer li {
 font-size:13px;
 display:inline-block
}
.latest-articles article ul.article-footer li.article-comments {
 float:right
}
.latest-articles img {
 margin:0;
 padding:0;
 -webkit-transition:all 300ms;
 transition:all 300ms
}
.latest-articles figcaption h2 {
 font-size: 16px;
 font-weight:500;
 line-height:30px;
 padding:15px 10px 10px 0;
 color:#1d1d1d
}
.latest-articles figcaption h2:after {
 font-family:FontAwesome;
 content:'\f105';
 -webkit-transition:all 300ms;
 transition:all 300ms;
 opacity:0
}
.latest-articles article.article-post {
 position:relative;
 overflow:hidden
}
.latest-articles article.article-post .article-image {
 position:relative;
 overflow:hidden;
 height:225px;
 max-height:225px;
 background-color:#000;
 background-repeat:no-repeat;
 background-position:center;
 background-size:cover
}

/*2018/8/1 */
/*--------------------------*/

.product-panel {
    margin-top: 20px;
}
.product_img_box {
    position:relative;
    overflow:hidden;
    height:225px;
    max-height:250px;
    width: 100%;
    cursor: pointer;/*2番目からtextになってしまうので*/
}

.product_img {
    position: absolute;
    height:225px;
    max-height:250px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: all 0.2s ease-out;
    transform: matrix3d(
        1,0,0,0,
        0,1,0,0,
        0,0,1,0,
        0,0,0,1
    );
    /*wlii-change: transform;*/
    will-change: transform;
}
.product_img:hover {
    transform: matrix3d(
        1,0,0,0,
        0,1,0,0,
        0,0,1,0,
        0,0,0,0.9
    );
}

/*---2019/2/6 ---*/
/*画像コントラストが明るすぎてぉ語が目立たないときにマスクする*/
/*マウスオーバーでマスク消す*/
.mask-tag {
 position:absolute;
 width: 100%;
 height: 100%;
 background-color: #000;
 opacity: 0.3;
}

.overimg {
	position: absolute;
	width: 100%;
}

.product_img:hover > .mask-tag{
	/*background-color: red;*/
	opacity: 0.1;
}

/*------------------------------*/
/*グリッドスタイルで高さを同じに*/
.row-eq-height { 
    display: flex; 
    flex-wrap: wrap;
}

/*
.panel {
    height: 88%;
}
*/

.row-eq-height .panel {
    height: 88%;
    margin-bottom: 12%;
}


@media screen and (max-width: 1200px) {
    /*
    .row-eq-height {
        display: block;
        flex-wrap: nowrap;
    }
    */
}

/*
トップページ
これを使うとレスポンシブが壊れた
単純なパネルなら問題ない
2019-2-15追記
nowrapのせいだったかも
*/
/*---------------------------*/

.latest-articles select#inputArticle-Sort {
 font-size:13px;
 width:300px;
 margin-left:25px;
 padding-bottom:9px;
 -webkit-transition:all 300ms;
 transition:all 300ms;
 text-indent:.01px;
 text-overflow:'';
 color:rgba(65,74,82,0.5);
 border:none;
 border-bottom:solid 2px #7AE2DE;
 background:url("../img/dd-arrow.png") no-repeat;
 background-color:none;
 background-position:280px 5px;
 -moz-border-radius:0;
 -webkit-border-radius:0;
 border-radius:0;
 -webkit-appearance:none;
 -moz-appearance:none
}
.latest-articles select#inputArticle-Sort:focus {
 outline:none
}
.infoarea .has-overlay:after {
 position:absolute;
 z-index:1;
 top:0;
 right:0;
 width:100%;
 height:100%;
 content:'';
 background-color:rgba(65,74,82,0.5)
}
.infoarea .content-left {
 /*padding-right:80px;*/
 padding-right: 20px;
 border-right:solid 1px #E5E7E9;/*区切り線*/
 border-right: solid 1px #807f7f;
}
.infoarea .content-right {
 /*padding-left:80px;*/
 padding-left: 20px;
}
.infoarea li img {
    max-width: 180px;
}


.infoarea article.item {
 position:relative;
 background-color:#000
}
.infoarea article.item h2 {
 font-size:13px;
 font-weight:500;
 line-height:15px;
 display:inline-block;
 margin-bottom:30px;
 padding:15px 30px 30px;
 letter-spacing:2px;
 text-transform:uppercase;
 color:#fff;
 border-bottom:solid 2px #fff
}
.infoarea article.item img {
 position:absolute;
 top:50%;
 left:50%;
 display:block;
 min-width:calc(100% + 1px);
 height:auto;
 -webkit-transform:translate(-50%, -50%);
 transform:translate(-50%, -50%)
}
.infoarea .overlay {
 position:absolute;
 z-index:2;
 width:100%;
 height:100%;
 -webkit-transition:opacity 300ms;
 transition:opacity 300ms;
 opacity:0;
 background-color:rgba(65,74,82,0.7)
}
.infoarea .infoarea-intro {
 margin-bottom:80px
}


/*2019-02-06*/
.infoarea figure {
 position:relative;
 /*overflow:hidden;*/
 height:500px;
 max-height:500px
}
.infoarea figure:hover .overlay {
 opacity:1
}
.infoarea figure figcaption .freebie-content {
 position:absolute;
 top:50%;
 left:50%;
 width:85%;
 max-width:700px;
 -webkit-transform:translate(-50%, -50%);
 transform:translate(-50%, -50%);
 text-align:center
}
.infoarea figure figcaption .freebie-content .date {
 font-size:13px;
 display:block;
 color:rgba(255,255,255,0.5)
}




/*
.infoarea figure figcaption .like-share-wrapper {
 font-size:13px;
 position:absolute;
 top:30px;
 left:30px;
 color:#fff
}
.infoarea figure figcaption .like-share-wrapper a {
 color:#fff
}
*/

.infoarea figure figcaption ul li {
 display:inline-block;
 padding:0 10px 0 0;
 border-right:solid 1px rgba(255,255,255,0.25)
}
.infoarea figure figcaption ul li:last-child {
 padding:0 0 0 10px;
 border-right:none
}
.infoarea figure figcaption ul li i {
 margin-right:5px
}

/*----------------------------------*/

section.get-started {
 position:relative;
 padding:90px 0;
 background-image:-webkit-linear-gradient(225deg, #70f6ea 0%, #51ccdc 100%);
 background-image:linear-gradient(225deg, #70f6ea 0%,#51ccdc 100%)
}
section.get-started h2 {
 font-size:28px;
 display:inline-block;
 margin-right:30px;
 vertical-align:middle;
 color:#fff
}
section.get-started a {
 font-weight:bold;
 margin-bottom:5px;
 -webkit-transition:all 300ms;
 transition:all 300ms;
 color:#fff;
 border-bottom:solid 2px rgba(255,255,255,0.5)
}
section.get-started a:hover {
 border-bottom-color:#fff
}
section.get-started:before {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 content:' ';
 background-image:url("../img/texture-shapes-bg.png")
}
footer p {
 font-size:14px;
 color:#fff;
 /*color: #c9c9ca;*/
}
footer p a {
 color:#fff;
 /*color: #c9c9ca;*/
}
footer ul li {
 font-size:13px;
 color:#fff;
 /*color: #c9c9ca;*/
 padding: 0px 0px 8px 6px;
}
footer ul li i {
 margin-right:5px
}
footer ul li a {
 color:#fff;
 /*color: #c9c9ca;*/
}
footer ul li a:hover {
 /*color:#7AE2DE*/
}
footer .footer-branding {
 margin-bottom: 20px;
 /*padding-right: 4em;*/
}
footer .footer-branding .footer-branding-logo {
 margin-bottom:10px;
 /*max-width: 300px;*/
 padding-right: 1em;
}

footer .footer-nav {
 /*padding-top:40px;*/
 /*border-top:solid 1px rgba(255,255,255,0.15)*/
 padding-bottom: 1em;
}

/*2019/5/22*/
.footer-bg ul a {
    font-size: 13px;
}

/*2019/2/6*/
.footer-nav .col-md-3 {
    padding-left: 0;
    padding-right: 14px;
}
/*2018-7-20*/
footer .footer-copy {
 padding-top:10px;
 width: 100%;
 border-top:solid 1px rgba(255, 255, 255, 0.5);
 /*真っ白だと違和感があるので透過で調整）*/
}

footer .footer-nav ul.footer-primary-nav {
 display:inline-block;
 margin-bottom:30px
}
footer .footer-nav ul.footer-primary-nav li {
 display:inline-block;
 margin-right:50px
}
footer .footer-nav ul.footer-primary-nav li:last-child {
 margin-right:0
}
footer .footer-nav ul.footer-share {
 display:inline-block;
 float:right
}
footer .footer-nav ul.footer-share>li {
 display:inline-block;
 margin-right:50px
}
footer .footer-nav ul.footer-share>li:last-child {
 margin-right:0
}
footer .footer-nav ul.footer-secondary-nav li {
 color:#8A9097
}


/*
@media screen and (max-width: 1200px) {
 .header-nav-wrapper nav {
  margin-right: 5px;
 }
 .header-nav-wrapper .logo {
  width: 250px;
 }
}
*/
@media screen and (max-width: 1280px) {
 .header-nav-wrapper nav {
  margin-right: 5px;
 }
 .header-nav-wrapper .logo {
  width: 280px;
 }
}  

@media screen and (max-width: 1100px) {
    .header-nav-wrapper nav {
     margin-right: 0px;
    }
    .header-nav-wrapper nav ul li {
        padding: 0 6px;
    }
    .header-nav-wrapper .logo {
     width: 250px;
    }
   }

@media screen and (max-width: 1024px) {
    /*hammenu*/
    /*position fixedにするのか？　heightを１００にするのか？*/
    /*幅小さい時*/

 .header-nav-wrapper .logo {
  width: 400px;
 }

 .primary-nav-wrapper {
  position:fixed;
  z-index:99;
  top:0;
  left:0;
  visibility:hidden;
  width:100%;
  /*height:100%;*/
  opacity:0;
  background-color:#1d1d1d
 }

 .navicon {
  visibility:visible
 }
 .header-nav-wrapper nav {
  width:100%;
  padding:100px 0 0;
  text-align:center
 }
 .header-nav-wrapper nav ul {
     /*2019/2/22 dropdown*/
  /*display:block*/
 }
 .header-nav-wrapper nav ul li {
  /*font-size:30px;*/
  font-size: 20px;
  display:block;
  padding:10px 20px;
  border-right:none
 }
 .secondary-nav-wrapper ul.secondary-nav li {
  font-size:30px
 }
 .header-nav-wrapper nav ul li a {
  display:block;
  /*padding-bottom:40px;*/
  padding-bottom: 20px;
  /*2019/02/04*/
  /*color:#fff*/
 }
 .header-nav-wrapper nav ul li a:before {
  display:none
 }
 .secondary-nav-wrapper {
  display:block;
  padding:0;
  text-align:center;
  background-color:transparent
 }
 .secondary-nav-wrapper ul {
  display:block
 }
 .secondary-nav-wrapper li a:before {
  display:none
 }
 .secondary-nav-wrapper ul li.subscribe a {
  font-weight:600;
  display:block;
  color:#fff
 }
 .secondary-nav-wrapper ul li.subscribe a:hover {
  color:#7AE2DE
 }
 .secondary-nav-wrapper ul.secondary-nav li.subscribe {
  display:block;
  padding:10px 0;
  border-right:none
 }
 .secondary-nav-wrapper ul.secondary-nav li.search i {
  display:none
 }
 .secondary-nav-wrapper ul.secondary-nav li.subscribe:after {
  display:none
 }

 .crew article.crew-member {
  margin-bottom:30px
 }
 .latest-articles article.standard-article {
  margin-top:20px
 }
 h4 {
  margin-left:0
 }
 .infoarea .content-left {
  margin-bottom:20px;
  padding-right:0;
  border-right:none
 }
 .infoarea .content-right {
  padding-left:15px
 }
 footer .footer-nav ul.footer-primary-nav li {
  margin-right:40px
 }
 section.get-started h2 {
  line-height:42px;
  margin:0 0 20px
 }
 .latest-articles article {
  margin-top:50px
 }

}
@media screen and (max-width: 768px) {

/*2018/8/3*/
    .footer-branding-logo {
        width: 350px;
        margin-top:20px;
    }

   /*2019/2/13 ここにテーブルのレスポンシブ用を記載してみる*/
   #aboutme table th,
   #aboutme table td {
       display: block;
   }
   #aboutme table th {
       border-bottom: 0;
   }

   /*
   .aboutme th,
   .aboutme td {
       display: block;
   }
   .aboutme th {
       border-bottom: 0;
   }
   */

 .latest-articles .sort {
  text-align:left
 }
 footer .footer-branding {
  margin-bottom:20px
 }
 footer .footer-nav {
  padding-top:20px;
  border-top:solid 1px rgba(255,255,255,0.15)
 }
 footer .footer-nav ul.footer-primary-nav {
  display:block;
  margin-bottom:0
 }
 footer .footer-nav ul.footer-primary-nav li {
  display:block;
  margin:0 0 20px;
  padding:15px 0;
  border-bottom:dashed 1px rgba(255,255,255,0.25)
 }
 footer ul li a {
  display:block
 }
 footer .footer-nav ul.footer-share {
  display:block;
  float:none
 }
 footer ul.footer-secondary-nav {
  margin-top:40px
 }
 footer ul.footer-secondary-nav li a {
  margin-top:10px
 }
 footer .footer-nav ul.footer-share>li {
  display:block;
  margin:0 0 20px;
  padding:15px 0;
  border-bottom:dashed 1px rgba(255,255,255,0.25)
 }
 .share-dropdown {
  top:auto;
  right:auto;
  bottom:120px;
  left:15px
 }
 .share-dropdown:after {
  left:20%
 }

}
@media screen and (max-width: 640px) {

 .has-padding {
  padding:0px 0
 }
 .has-padding-tall {
  padding:0px 0
 }
 section.get-started h2 {
  font-size:24px;
  line-height:48px;
  margin-right:0;
  margin-bottom:30px
 }
 .latest-articles article.featured-article {
  height:310px;
  max-height:310px
 }
 .latest-articles article.standard-article {
  height:180px;
  max-height:180px
 }
}

@media screen and (max-width: 480px) {
 
 .header-nav-wrapper {
  /*border-bottom:solid 5px #7ae2de;*/
  /*background-color:#1d1d1d*/
  background-color: #fff;
 }
 .header-nav-wrapper .logo {
  width:250px
 }
 .navicon {
  /*padding:52px 35px;*/
  padding: 42px 35px;
  background-color:transparent
 }
 .header-nav-wrapper .logo {
  border-bottom:none
 }
 .sort h5 {
  display:block
 }
 .latest-articles select#inputArticle-Sort {
  margin:20px 0
 }
}

/*----------- add ----------------------*/
.carousel-cell {

    display:table;
    width:100%;
    height: 0;


    /*height:calc(100vh - 8.2em);*/

    margin-right:10px;
    background-position:center;
    background-size:cover

   }

.carousel-cell::before {
    /*
	display:block;
    content:"";

	padding-top:34%; /* 画像縦幅÷画像横幅*/
}
.flickity-item {
    background-size: cover;
    width: 100%;
    height: 0;
    /*height: 100%;*/
}

/*-------------------------------------------------*/
.boderbottom {
    border-bottom: solid 1px rgb(75, 77, 80);
}

/*2019-2-7 <hr>で罫線引こうとしていた。たっかさをそろえることが困難になったので中止*/
.borderbtm {
    /*border-bottom: solid 1px rgb(75, 77, 80);*/
    /*content: " ";
    height: 100%;*/
    /*margin-right: 15px;*/

    /*content: " ";*/
    /*height: 2px;*/
    padding:0;
    margin:0;

    width: 100%;
    position: absolute;
    bottom: 0;
}

/*------------------------------*/
.produckhr {
    margin: 12px 0 24px 0;
    border-top: solid 1px rgb(75, 77, 80);
}

.topinfolist {
    height: 16em;
    overflow: auto;
    border-left: solid 5px #807f7f;
    font-size: 15px;
}
.topinfolist dt {
    float: left;
    width: 9em;
    /*2019/5/31追記*/
    text-align: justify;
    text-align-last: justify;
}
.topinfolist dd {
    /*width: 100%;*/
    margin-left: 10em;
}
.topinfolist dt,dd {
    padding: 4px 5px;
    line-height: 120%;
}

.infoarea h4 {
    margin-bottom: 20px;
}

.partner li{
    padding-bottom: 14px;
}

/*-------------- news -----------------------*/
.newstitle {
    font-size: 36px;
}
.newstitle::after {

    display: block;
    /*width: 100%;*/
    height: 2px;
    margin-top: 15px;
    content: '';
    background-color: #7AE2DE;

}

/*--------------- top ----------------------*/
.carousel-caption {
    margin-left: -200px;
    width: 100%;
    padding-right: 30px;
    /*実際の高さに合わせる*/
    bottom: 180px;
}

/*------------- contentheader ---------------*/
.subtitleimg {
    /*background:ページごとに違うのでHTML側に記述。ここはレイアウト関連のみ*/
    /*background-position: 50% 24%;*/
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    padding: 20px;
    /*
    border-top: solid 4px #cacacc;
    border-bottom: solid 4px #cacacc;
    */
    height: 200px;
    max-height: 200px;
}

.subheader {
    color: #4a6ea9;
    margin-left: 25px;
}
.breadcrumb {
    margin-bottom: 0;
}

/*2019-2-15*/
.subtitleMaskimg {
    /*background:ページごとに違うのでHTML側に記述。ここはレイアウト関連のみ*/
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    /*padding: 20px;*/
    /*
    border-top: solid 4px #cacacc;
    border-bottom: solid 4px #cacacc;
    */
    height: 200px;
    max-height: 200px;
}

.rightmask {
    margin: 0;
    padding: 0;
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../../images/img_BmaskR.png);

    height: 200px;
    max-height: 200px;

}
.rightmask:before {
    width: 100%;
    height: 100%;
}
.maskcontent {
    height: 100%;
}

/*2019-2-18 */
.netofficelist {
    padding: 6px 0;
    margin-left: 1em;
    color: #1d1d1d;
    font-size: 14px;
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1.5;
}
.netofficelist .glyphicon {
    color: #0068b7;
    margin-right: 0.5em;
}

#n_o_products .row {
    margin-bottom: 3em;
}

.borderleft {
    border-left: solid 1px #807f7f;
}

#n_o_products ul .listb{
    font-weight: 600;
}

#n_o_products p{
    margin-top: 0.5em;
}

#n_o_products ul .caption {
    font-size: 12px;
}

.secondary {
    margin-bottom: 3em;
}

.primary {
    margin-bottom: 2em;
}
.vcent {
    vertical-align: middle;
}

.breadcrumb {
    /*background:transparent;*/
}
.breadcrumb li+li:before {
    content:'>';
}

.telfax {
    font-size: 40px !important;
}
.telfax span {
    color: #0068b7;
}

.telfax .glyphicon {
    font-size: 100%;
}

/*2019-5-7 */
.separatorline {
    margin: 15px;
    border-top: solid 1px #8A9097;
    padding-top: 20px; 
}

#page_top {
    /*2019-6-19*/
    width: 50px;
    height: 50px;
    position: fixed;
    right: 36px;
    bottom: 10px;
    background: #3f85ef;
    opacity: 0.6;
    border-radius: 50%;
    display:none;
  }

  #page_top a{
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
  }
  #page_top a::before{
    font-family: FontAwesome;
    content: '\f0d8';
    font-size: 25px;
    color: #fff;
    position: absolute;
    width: 25px;
    height: 25px;
    top: -5px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}
.is-eventNone {
    pointer-events: none;
}


table {
    background-color: 
    /*transparent;背景色が無効になる-bootstrapデフォ指定*/
    #fff;
}

/*bootstrapデフォ
.table-striped>tbody>tr:nth-of-type(odd) {
	background-color: #f9f9f9
}
*/

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #e9f0fe;

}

    /*
    #e9f0fe
    #d2e3cc-少々暗い。ボーダー見えなくなる
    #e6e9d9
    #e5e5e5
    */

.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border-color: #c0c0c0;/*デフォ#ddd*/
}

.table > tbody > tr.bgblue > td, .table > tbody > tr.bgblue > th, .table > tbody > tr > td.bgblue, .table > tbody > tr > th.bgblue, .table > tfoot > tr.bgblue > td, .table > tfoot > tr.bgblue > th, .table > tfoot > tr > td.bgblue, .table > tfoot > tr > th.bgblue, .table > thead > tr.bgblue > td, .table > thead > tr.bgblue > th, .table > thead > tr > td.bgblue, .table > thead > tr > th.bgblue {
    background-color: 
    #e9f0fe;
}


@media print {
    a[href]:after {
    content: "" !important;
    }
    
    abbr[title]:after {
    content: "" !important;
    }
}


/*下層ページのサブタイトル共通部-白-*/
#container-topsub p,h1 {
    color: #fff;
}
#container-topsub p {
    padding: 0px 0 0 0;
    font-style: italic;
}
#container-topsub h1 {
    font-weight: 500;
    padding: 20px 0 0 0;
    line-height: 40px;
}
.border-gradation {
    border-bottom: 3px solid;
    max-width: 360px;
    border-image: linear-gradient(to right, #fff 0%, rgba(0, 0, 0, 0) 100%);
    border-image-slice: 1;
}

.futidori {
    /*letter-spacing: 6px;*/
    text-shadow: 1px 1px 0 #9f9fa0, -1px 1px 0 #9f9fa0, 1px -1px 0 #9f9fa0, -1px -1px 0 #9f9fa0, 0px 1px 0 #9f9fa0, 0px -1px 0 #9f9fa0;
}

/*------------------- From sumsbutu -----------------------------------*/
#maintoron {
    padding-bottom: 0px;
}

#maintoron h2 {
    color: #9f9fa0;
    font-size: 30px;
}

.jambo {
    font-size: 50px;
    color: #ffa040;
}

.toron {
    padding: 20px;
    width: 80%;
    margin: 0 auto;
    background-color: beige;
}

.jmbt {
    background-color: beige;
}

.headpanel {
    /*margin-bottom: 15px;*/
    background-color: beige;
    border: 1px solid #ebccd1;
        border-top-color: #ebccd1;
        border-right-color: #ebccd1;
        border-bottom-color: #ebccd1;
        border-left-color: #ebccd1;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);

    text-align: center;
    padding: 20px;
}

.contentlist {
	margin-top: 1em;
}