@charset "utf-8";

body{
xbackground: #efefef;
font-family: 'Inter','Roboto','Noto Sans JP', sans-serif;
color: #000;
font-size: 93.75%; /* 15px */
line-height: 1.85;
xletter-spacing: 0.025rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
word-wrap: break-word;
text-align: justify; /* 均等割り付け */
	}

*{box-sizing: border-box;}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	color: #eee;
	text-decoration: none;
    outline: none;
}

img{
    max-width: 100%;
    height: auto;
}

.indent {
	margin-left: 1rem;
}

.indent02 {
	margin-left: 1rem;
	text-indent: -1rem;
}


/* フォント指定*/
h1,
h2,h3,h4,
#service .service-area section h3,
#g-nav,
#footer-link,
.scrolldown1 span,
#vidual-area dt,
.footer-logo{
font-family: 'Roboto','Noto Sans JP', sans-serif;
	;
color: #000;
xletter-spacing: 0.2em;
}

h2{text-align: center;}

.txt12{font-size: 0.75rem; /* 12px */}

.txt13{line-height: 1.7; font-size: 0.8125rem; /* 13px */}

.txt13_02{line-height: 1; font-size: 0.8125rem; /* 13px */}

.txt17{font-size:1.0625rem; /* 17px */}

.txtRed{color: #cc0000;}

.txtWh{color: #fff;}

.txtSky{
color: #36C9FF;
}

.txtAAA{color: #aaa;}

.bold{font-weight: 700;}

.normal{font-weight: 400;}

.annot{
font-size: 12px;
max-width: 1280px;
padding-left: 10%;
margin: 0 auto;
xbackground-color: antiquewhite;}






/* CSSでページをフェードイン */
body {
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


#container{
    overflow-x: hidden;
    /*以下、IE11用*/
    z-index: 1;
    position: relative;
}




/* header ロゴ*/
#header h1 a img{width: 150px}

#header h1{
    padding: 0 20px 0 0;
    line-height: 1;
}

/* タブレット用 （W=1280px 未満） --------------------------------------------*/
@media screen and (max-width:1280px) {
#header h1{
    padding: 0 20px 0 10px;
    line-height: 1;
}
}


h2{
    font-size:1.5rem; /*24px*/
    margin: 0 0 20px 0;
    xtext-transform: uppercase;
}

h3{
    font-size:1.875rem; /*30px*/
    margin: 0 0 20px 0;
    text-transform: uppercase;
}

h4{
    font-size:1.25rem; /* 20px */
    margin: 0 0 20px 0;
    text-transform: uppercase;
}


/* スマホ用 （W=426px 未満） --------------------------------------------*/
@media screen and (max-width:426px){

h2{
    font-size: 1.5rem;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

h3{
    font-size: 1.25rem;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}
}


/* ---------------------------------------------------------------------------------------*/
/*ヘッダー */
/* ---------------------------------------------------------------------------------------*/

#header{
    position: fixed;/*fixedを設定して固定*/
    top:0;
    height: auto;/*高さ指定*/
    width: 100%;/*横幅指定*/
    z-index: 999;/*最前面へ*/
    /*以下はレイアウトのためのCSS*/
    display: flex;
    flex-direction: column;
    xbackground: rgba(255,255,255,0.8); /*#fffを透過*/
    background-color: #fff;
}

#header.hidden { /*未使用 2024.1.23*/
    xtransform: translateY(-35px);
}


/* ★PANTONE JP 追加 2024.1.5-------------------------*/
.toplink{
    text-align: center;
    background-color: #000;
    width: 100%;
    xheight: auto;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.toplink > ul{padding-top: 4px;}
.toplink > ul > li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto 6px;
    padding: 0 10px 0;
    height: 15px;
    line-height: 15px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.toplink > ul > li a:hover{text-decoration: underline}
.toplink > ul > li+ li {border-left: 1px solid #fff;}



/* タブレット用 （W=1280px 未満） --------------------------------------------*/
@media screen and (max-width:1280px) {
.toplink{
    text-align: center;
    background-color: #000;
    width: 100%;
    height: auto;
    padding: 5px;
    display: block;
}

.sec02{
    width: 100%
}
}


/* タブレット用 （W=1080px 未満） --------------------------------------------*/
@media screen and (max-width : 1180px ){
.toplink{height: 50px;
}

.toplink > ul > li {
    xposition: relative;
    display: block;
    vertical-align: middle;
    xpadding: 0;
    height: auto;
    line-height: 15px;
    font-size: 13px;
    color: #fff;
}

.toplink > ul > li+ li {border-left: none;
}
}


/* タブレット用 （W=687px 未満） --------------------------------------------*/
@media screen and (max-width:687px) {
.toplink{height: 70px; 
padding-left: 10%; /* テキストを強制的に3行に */
padding-right: 10%}
}


/* スマホ用 （W=510px 未満） --------------------------------------------*/
@media screen and (max-width:510px) {
.toplink{height: 70px;}
}




/* PC用 （W=1280px 以上 ＊2024.2.6 追記） --------------------------------------------*/
@media screen and (min-width:1281px) {
.sec02{width: 1280px;}
}

.sec02{xwidth: 1280px;
    margin: 0 auto;
    xpadding: 20px 0;
    display: flex;
    align-items: center;
    height: 70px;
}


#header .headericon{
    margin-left: auto;
    display: block;
    width: 25%;
    height: 24px;
    text-align: right;
    background-color: #fff;

}

#header .headericon > ul > li {
    display: inline-block;
    margin: 0;
    padding-right: 3%;
}

#header .headericon > ul > li:last-child {padding-right: 0}


#header_border{
    display: block;
    max-width: 1280px;
    height: 2px;
    margin: 100px auto 0;
    border-bottom: solid 2px #000;
}
/* タブレット用 （W=1280px 未満） --------------------------------------------*/
@media screen and (max-width:1280px) {
#header_border{margin: 112px auto 0;}
}
/* タブレット用 （W=1080px 未満） --------------------------------------------*/
@media screen and (max-width : 1180px ){
#header_border{margin: 120px auto 0;}
}

/* スマホ用 （W=687px 未満） --------------------------------------------*/
@media screen and (max-width:687px) {
#header_border{margin: 140px auto 0;}
}



/* header ロゴのレイアウト 2024.1.24*/
/* タブレット用 （W=1080px 未満） --------------------------------------------*/
@media screen and (max-width : 1180px ){
#header h1{
    position: absolute; /* 左右中央揃え */
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

#header .headericon{
    margin-left: auto;
    display: block;
    width: 35%;
    height: 24px;
    text-align: right;
    background-color: #fff;
}

.sec02{
    xheight: 100px;
}
}


/* タブレット用 （W=687px 未満） --------------------------------------------*/
@media screen and (max-width:687px) {
#header .headericon{
    margin-left: auto;
    display: block;
    width: 45%;
    text-align: right;
    background-color: #fff;
}

#header .headericon > ul > li.sp_hidden{
    display: none;
}
    
}




/* ---------------------------------------------------------------------------------------*/
/* ドロップダウンメニュー */
/* ---------------------------------------------------------------------------------------*/

/*ナビゲーションを横並びに*/
nav ul{
	list-style: none;
	display: flex;
	justify-content: center;
    xbackground-color: antiquewhite;
}
/*2階層目以降は横並びにしない*/
nav ul ul{
	display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
	position: relative;
}

/*ナビゲーションのリンク設定*/
nav ul li a{
	xdisplay: block;
    display: flex;
    align-items: center;
    height: 70px; /*←hoverを要素全体の高さに：要検討 2024.2.14*/
    xbackground-color: antiquewhite;
    line-height: 1.2;
    xletter-spacing: -0.09rem;
	text-decoration: none;
	color: #000;
	padding:0;
    margin: 0 8px;
	transition:all .3s;
    white-space: nowrap   
}

nav ul li a:hover{
	color:#000;
    text-decoration: none;
}

nav ul li li a{
display: inline-block; /* 縦長バナーがはみ出すため */
height: 2rem;
	padding:0 20px; /* 2階層目の行間 */
}
nav ul li li a:hover{
	color:#000;
    text-decoration: underline;
}

/* タブレット用 （W=1280px 未満） --------------------------------------------*/
@media screen and (max-width:1280px) {
nav ul li a{
	padding:5px 20px; /* 2階層目の行間 */
}
nav ul li li a{
	padding:5px 20px; /* 2階層目の行間 */
}
}




/*2・3階層目の共通設定（基本設定） ----------------------------*/

/*下の階層を持っているulの指定*/
nav li.has-child ul{
    position: fixed; /*ウィンドウ幅いっぱいに*/
    left:0;
    top:100px;
    z-index: 4;
    /*形状を指定*/
    xbackground:rgba(255,255,255,0.8);
    background:#fff;
    xmin-width:12000px;
    width: 100vw;
    margin: 0 auto;
    visibility: hidden; /*はじめは非表示*/
    opacity: 0;
    transform: scaleY(0);
    transition: all .3s; /*アニメーション設定*/
    transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
    transform-origin: center top;
}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
  visibility: visible;
  transform: scaleY(1);
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a{
line-height: 1.3rem;
	color: #000;
	xborder-bottom:solid 1px #000;
}

nav li.has-child ul li:last-child a{
	xborder-bottom:none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
    xborder-bottom:solid 1px #000;
	xbackground:rgba(0,0,0,0.8);
}




/* 1180px以下の形状 （ハンバーガー・メニュー）--------------*/
@media screen and (max-width : 1180px ){

nav{padding: 0;}
	
nav ul{display: block;}
	
nav ul li a{display: block;
    width: 100%;
    height: 40px;
    border-bottom:1px solid #ccc;
    margin-left: 0px; /* ★プルダウンで開く背景の位置のズレを微調整（ナゾ？） 2024.4.6 */
}


nav ul li li a{
display:  block; /* 縦長バナーがはみ出すため */
height: 40px;
	padding:0 20px; /* 2階層目の行間 */
}

/*矢印の設定 --------------*/
/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before{
	content:'';
	position: absolute;
	left:10px;
	top:15px;
	width:6px;
	height:6px;
	border-top: 2px solid #fff;
   border-right:2px solid #fff;
   transform: rotate(135deg);
}

nav ul ul li.has-child::before{
    transform: rotate(135deg);
	left:20px;
}
    
nav ul li.has-child.active::before{
    transform: rotate(-45deg);
}
}




/* メガメニューを3カラムに */
nav li.has-child ul .inner{
    display: flex;
    max-width: 1280px;
    margin: 0 auto;
    padding: 15px 0 20px;
    background-color: #fff;
}

nav li.has-child ul .inner .item{}

nav li.has-child ul .inner .bnr{width: 50%; 
border-left: 1px solid #000;
}
nav li.has-child ul .inner .bnr a img {max-width: 100%;
}

/* タブレット用 （W=1180px 未満） --------------------------------------------*/
@media screen and (max-width : 1180px ){
/* メガメニューを1カラムに */
nav li.has-child ul .inner{
    display: inline-block;
width: 100%; 
    margin: 0 auto;
    padding: 0;
    xbackground-color: antiquewhite;
}

nav li.has-child ul .inner .item{width: 100%;}

nav li.has-child ul .inner .bnr{width: 100%; 
border-left: none;
}

nav li.has-child ul .inner .bnr li a {border-bottom: none
}

nav li.has-child ul .inner .bnr a img {max-width: 100%;
}

nav li.has-child ul li a{color: #000;}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
    background:rgba(0,0,0,0.8);
}

nav li.has-child ul .bnr li a:hover,
nav li.has-child ul .bnr li a:active{
background:rgba(0,0,0,0); /* バナー部分は透過色なし */
}

}



/* ---------------------------------------------------------------------------------------*/
/*ハンバーガーメニューをクリックしたらスマホ用ナビ（＃g-nav）が上から下に出現 */
/* ---------------------------------------------------------------------------------------*/

/* タブレット用 （W=1180px 未満） --------------------------------------------*/
@media screen and (max-width : 1180px ){
#g-nav{ /*展開した時*/
    position:fixed; /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    z-index: 999; 
	top:-200%; /*ナビのスタート位置と形状*/
    left:0;
	width:100%;
    height: 100vh; /*ナビの高さ*/
	background:rgba(0,0,0,0.8);
	transition: all 1s; /*動き*/
	-webkit-transition: -webkit-transform all 1s; /*iOSハック*/
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    top: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    width: 90%;
    margin:20px auto 0 auto; /*上マージンを調整*/
}
    
#g-nav ul ul{
    width: 100%;
    margin: 0;
}
 
/*プルダウンナビのCSS*/
#g-nav ul li.has-child ul{
  	position: relative;
	left:0;
	top:0;
	width:100%;
	visibility:visible;/*JSで制御するため一旦表示*/
	opacity:1;/*JSで制御するため一旦表示*/
	display: none;/*JSのslidetoggleで表示させるため非表示に*/
	transition:none;/*JSで制御するためCSSのアニメーションを切る*/
    transform: none;
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: center;
}

#g-nav li a{
	color: #aaa;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-weight: bold;
}

}


/* ---------------------------------------------------------------------------------------*/
/*　ハンバーガーメニュー　　3本線が奥行きを持って回転して×に */
/* ---------------------------------------------------------------------------------------*/

.g-nav-openbtn{
    display: none;
}
 
/* タブレット用 （W=1080px 未満） --------------------------------------------*/
@media screen and (max-width : 1180px ){
.g-nav-openbtn{
	display: block;
	position:fixed;
	z-index: 9999;/*ボタンを最前面に*/
	top:4px;
	xright: 70px;
	left: 0px;
	cursor: pointer;
	width: 50px;
	height:50px;
}

/*ボタン内側*/
.g-nav-openbtn .openbtn-area{
    transition: all .4s;
}

.g-nav-openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background: #fff;
  	width: 45%;
  }


.g-nav-openbtn span:nth-of-type(1) {
	top:15px;
}

.g-nav-openbtn span:nth-of-type(2) {
	top:23px;
}

.g-nav-openbtn span:nth-of-type(3) {
	top:31px;
}

/*JSでactiveクラスが付与されると 線と周りのエリアが回転して×になる*/

.g-nav-openbtn.active .openbtn-area{
	transform: rotateY(-360deg);
}

.g-nav-openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-135deg);
    width: 30%;
}

.g-nav-openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.g-nav-openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(135deg);
    width: 30%;
}
}


/*閉じるための×ボタン*/
.close-btn{
	position: absolute;
	top:10px;
	right:10px;
	z-index: 2;
	cursor: pointer;
    width: 60px;
    height:60px;
}
	
.close-btn span{
    display: inline-block;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #fff;
 }

/*×マーク*/
.close-btn span:nth-of-type(1) {
    top: 21px;
    left: 16px;
    transform: translateY(6px) rotate(-135deg);
    width: 50%;
}

.close-btn span:nth-of-type(2){
    top: 32px;
    left: 16px;
    transform: translateY(-6px) rotate(135deg);
    width: 50%;
}



/* ---------------------------------------------------------------------------------------*/
/* メインメニュー hoverで下線がゆっくり表示 (2024.1.15) */
/* ---------------------------------------------------------------------------------------*/

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

.nav01c li.current a,
.nav01c li a:hover{
	color:#000;
    
}

.nav01c li a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: 15px; /*アンダーラインが位置する、各リストの下端からの高さ　ヘッダーの下端に合わせています*/
opacity: 0; /*ホバー前に、アンダーラインを可視化しない*/
}

.nav01c li a:hover::after {
opacity: 1;       /*アンダーラインが透明な状態からアニメーションが開始され、ホバーを話して終了する際も、徐々に透明な状態に戻る。*/
transition: 0.3s; /*変形の時間*/
}


.nav01c li li a::after {
    display: none;
}

/*現在地とhoverの設定*/
.nav01c li.current a::after,
.nav01c li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}
@media screen and (max-width : 1180px ){
.nav01c li a::after {
    display: none;
}
}


/* ---------------------------------------------------------------------------------------*/
/* ツールチップ (2024.2.14 差し替え) */
/* ---------------------------------------------------------------------------------------*/
.tooltip{
    position: relative;
    cursor: pointer;
    display:  inline-block;
}
.tooltip img{
    xwidth: 20px;
}
.description {
    display: none;
    position: absolute;
    padding: 10px;
    text-align: center;
    word-break: keep-all;
    color: #000;
    border-radius: 5px;
    background: #fff;
    width: 200px;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.65)); /* 吹き出し三角形部分にも影 */
    
}

.description p{font-size: 13px;
    line-height: 1.3;
    margin-bottom: 0.25rem;
    color: #000;}
.description a {color: #000;
}
.description a:hover{text-decoration: underline;}
 
.description:before {
    content: "";
    position: absolute;
    top: -24px;
    right: 40%;
    border: 15px solid transparent;
    border-top: 15px solid #fff;
    margin-left: -15px;
    transform: rotateZ(180deg);
    
}
.tooltip:hover .description{
 display: inline-block;
    top: 40px;
    left: -90px;
}





/* ---------------------------------------------------------------------------------------*/
/* 以下は未作業 (2024.2.6) */
/* ---------------------------------------------------------------------------------------*/

/* contact */
#contact{
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#contact .contact-detail{
    width:54%;
    border-right: 1px solid #666;
    text-align: center;
    padding: 20px 3%;
}

#contact .contact-detail h2{
     margin:0 0 5px 0;
    font-size: 1.625rem; /*26px*/
}

#contact .contact-form,
#contact .contact-tel{
     width:23%;
	 font-size: 1.0625rem; /* 17px */
}

#contact .contact-detail div,
#contact .contact-form div,
#contact .contact-tel div{position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);}


#contact .contact-form p,
#contact .contact-tel p{
    text-align: center;
}

#contact .contact-form p a,
#contact .contact-tel p a{
}


#contact .contact-form {border-right:1px solid #666;}



/* hoverでリンク部分に下線 */
#contact a{color: #fff; position: relative;}/*線の基点とするためrelativeを指定*/

#contact a:hover{color:#eee;}

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

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




@media screen and (max-width:768px) {
#contact{display: block}

#contact .contact-detail,
#contact .contact-form,
#contact .contact-tel{
    width:100%;
	padding: 20px
}

#contact .contact-detail div,
#contact .contact-form div,
#contact .contact-tel div{position: relative;
  top: 0%;
  -webkit-transform: translateY(-0%);
  -ms-transform: translateY(-0%);
  transform: translateY(-0%);}



#contact .contact-form {border-bottom:1px solid #666;}
#contact .contact-detail{border-bottom: 1px solid #666;}
#contact .contact-detail h2{
    font-size: 1.5rem;
}
#contact .contact-detail p{
    text-align: center;
}
}

@media screen and (max-width:426px) {
    #contact{
        font-size: 0.8rem;
    }
	
}




/* ---------------------------------------------------------------------------------------*/
/* フッター */
/* ---------------------------------------------------------------------------------------*/

#footer{
width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    padding:1%;
    background-color: #000;
    color: #fff;
}

#footer .footer-menu{
display: flex; 
justify-content: space-around;
min-width: 1280px;
xwidth: 100%;
margin: 0 auto;
xbackground-color: #666}

#footer .footer-menu .txt{ 
margin-right: auto; /*最初の要素のみ左寄せ*/
text-align: left;
flex-basis: 59%;
padding: 2rem 0}

#footer .footer-menu .txt h2{color: #fff;text-align: left;
margin-bottom: 0;}

#footer .footer-menu .txt p a{text-decoration: underline;}


#footer .footer-menu .link01{
flex-basis: 25%;}

#footer .footer-menu .link02{
flex-basis: 16%;}

#footer .footer-menu ul{}

#footer .footer-menu ul li a:hover{text-decoration: underline}



#footer .footer-link{xmax-width:1280px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

#footer .footer-logo{
    display: flex;
    align-items: center;
    xbackground-color: aqua;
    height: 80px;
    margin: 0 40px;
}

#footer .footer-logo a img{
width: 100px;
}


#footer .footer-sns {
    display: block;
    height: 80px;
    margin: 0 40px;
    xbackground-color: #666
}

#footer .footer-sns ul{display: flex;}

#footer .footer-sns ul li{margin: 0 20px 0 0;}

#footer .footer-sns ul li img{width:20px;}

#footer .footer-sns ul li a:hover{
opacity: 0.6;
	filter: alpha(opacity=60);
	text-decoration: none;
	-moz-opacity: 0.8;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

#footer small{

}

#footer .footer-copyright{max-width:1280px;
text-align: center;
margin: 0 auto;}




@media screen and (max-width:960px) {
    #footer{
	display: block;
        padding:5% 0;
    }
    #footer .footer-info{
        width:100%;
        padding: 0 0 2% 0;
        margin: 0 auto;
        text-align:center;
        xborder-bottom: 1px solid #aaa;
    }
	#footer .footer-info ul{display: flex;
	justify-content: center;
}

    
    #footer .footer-link{width:100%;}

    #footer .footer-link ul {display: flex;
	justify-content: center;
	padding: 0 0 5% 0;
    }
    
    #footer small {
        padding:2% 0 0;
        text-align:center;
    }
}

@media screen and (max-width:426px) {
    #footer .footer-link ul li{
        margin: 0 2px;
}
}



.copyright_link{
    text-align: center;
    background-color: #000;
    width: 100%;
    xheight: auto;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.copyright_link > ul{padding-top: 4px;}
.copyright_link > ul > li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto 6px;
    padding: 0 10px 0;
    height: 15px;
    line-height: 15px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.copyright_link > ul > li a:hover{text-decoration: underline}
.copyright_link> ul > li+ li {border-left: 1px solid #fff;}



/* タブレット用 （W=1280px 未満） --------------------------------------------*/
@media screen and (max-width:1280px) {
.copyright_link{
    text-align: center;
    background-color: #000;
    width: 100%;
    height: auto;
    padding: 5px;
    display: block;
}

}


/* タブレット用 （W=1080px 未満） --------------------------------------------*/
@media screen and (max-width : 768px ){
.copyright_link{height: 50px;
}

.copyright_link > ul > li {
    xposition: relative;
    display: block;
    vertical-align: middle;
    xpadding: 0;
    height: auto;
    line-height: 15px;
    font-size: 13px;
    color: #fff;
}

.copyright_link > ul > li+ li {border-left: none;
}
}


/* タブレット用 （W=687px 未満） --------------------------------------------*/
@media screen and (max-width:687px) {
.copyright_link{}
}


/* スマホ用 （W=510px 未満） --------------------------------------------*/
@media screen and (max-width:510px) {
.copyright_link{}
}







/* NEWS欄用*/
.ico_new01::after{
	position: relative;
  content: 'NEW';
  top: 0;
  left: 0;
  color: #fff;/*文字色*/
	padding :2px 7px 6px 7px;
  background: #cc0000;/*背景色*/
  font-weight: 600;
}

/* 製品ページ用*/
.ico_new02::after{
  content: 'NEW';
  top: 0;
  left: 0;
  color: #fff;/*文字色*/
  padding: 0 0.4rem 0.1rem;/*余白*/
  background: #cc0000;/*背景色*/
  font-size: 80%;
  font-weight: 600;
  margin-left: 0.5rem
}



/* ---------------------------------------------------------------------------------------*/
/* リンクボタン - 下線が伸びて背景に変わる */
/* ---------------------------------------------------------------------------------------*/

.btn_area{text-align: center; margin: 0 auto 4rem}

@media screen and (max-width:426px) {
.btn_area{
xwidth: 90%;
margin: 0 auto 2rem;
}
}


.btn_area p{font-size: 1.25rem; /* 20px */
font-weight: 600;
}


.btnlinestretches_01{
/*線の基点とするためrelativeを指定*/
position:relative;
/*ボタンの形状*/
color:#eee;
padding: 10px 30px;

display:inline-block;
text-decoration: none;
outline: none;
}

@media screen and (max-width:426px) {
.btnlinestretches_01{
    padding: 10px 10px;
}
}

/*テキストの設定*/
.btnlinestretches_01 span{
/*テキストを前面に出すためz-indexの値を高く設定*/
position:relative;
z-index: 2;
}

.btnlinestretches_01:hover span{
color: #444;
}

/*線の設定*/
.btnlinestretches_01::after {
content:'';
/*絶対配置で線の位置を決める*/
position:absolute;
z-index:1;
bottom:0;
left:0;
background:#ccc;
width:100%;
height:1px;
/*アニメーションの指定*/
transition:all 0.3s ease-in-out;
}

/*線が伸びて背景に*/
.btnlinestretches_01:hover::after {
height:100%;
}



/*パンくずリスト*/
.breadcrumb *, .breadcrumb *:after, .breadcrumb *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.breadcrumb {
	margin: 80px auto 0;
	padding-left: 2em;
	xbackground-color: #3949AB;
	color: #ccc;
	xborder-radius: 0.5em;
}
.breadcrumb a {
	text-decoration: none;
	color: #999;
}
.cbreadcrumb .breadcrumbs {
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}
.breadcrumb li {
	display: inline-block;
	position: relative;
	padding-right: calc(16px + 4px);
	margin-right: 4px;
	xcolor: #7986CB;
    font-size: 0.875rem; /* 14px */
}
.breadcrumb li::before {
	content: '›';
	width: 1em;
	height: 1em;
	line-height: 1;
	text-align: center;
	font-size: 1em;
	color: inherit;
	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
}
.breadcrumb li:last-child {
	margin-right: 0;
	padding-right: 0;
	color: #ccc;
}
.breadcrumb li:last-child::before {
	content: normal;
}




/* スマホサイトのみ電話発信 */
@media screen and (min-width: 768px){
  .telLink {
    pointer-events: none;
  }

}