@charset "utf-8";

.mb5 { margin-bottom:5px;} .mb10 { margin-bottom:10px;} .mb15 { margin-bottom:15px;} .mb20 { margin-bottom:20px;} .mb25 { margin-bottom:25px;} .mb30 { margin-bottom:30px;} .mb35 { margin-bottom:35px;} .mb40 { margin-bottom:40px;} .mb45 { margin-bottom:45px;} .mb50 { margin-bottom:50px;} .mb55 { margin-bottom:55px;} .mb60 { margin-bottom:60px;} .mb65 { margin-bottom:65px;} .mb70 { margin-bottom:70px;} .mb75 { margin-bottom:75px;} .mb80 { margin-bottom:80px;} .mb85 { margin-bottom:85px;} .mb90 { margin-bottom:90px;} .mb95 { margin-bottom:95px;} .mb100 { margin-bottom:100px;}
.mt5 { margin-top:5px;} .mt10 { margin-top:10px;} .mt15 { margin-top:15px;} .mt20 { margin-top:20px;} .mt25 { margin-top:25px;} .mt30 { margin-top:30px;} .mt35 { margin-top:35px;} .mt40 { margin-top:40px;} .mt45 { margin-top:45px;} .mt50 { margin-top:50px;} .mt55 { margin-top:55px;} .mt60 { margin-top:60px;} .mt65 { margin-top:65px;} .mt70 { margin-top:70px;} .mt75 { margin-top:75px;} .mt80 { margin-top:80px;} .mt85 { margin-top:85px;} .mt90 { margin-top:90px;} .mt95 { margin-top:95px;} .mt100 { margin-top:100px;}
.ml5 { margin-left:5px;} .ml10 { margin-left:10px;} .ml15 { margin-left:15px;} .ml20 { margin-left:20px;} .ml25 { margin-left:25px;} .ml30 { margin-left:30px;} .ml35 { margin-left:35px;} .ml40 { margin-left:40px;} .ml45 { margin-left:45px;} .ml50 { margin-left:50px;} .ml55 { margin-left:55px;} .ml60 { margin-left:60px;} .ml65 { margin-left:65px;} .ml70 { margin-left:70px;} .ml75 { margin-left:75px;} .ml80 { margin-left:80px;} .ml85 { margin-left:85px;} .ml90 { margin-left:90px;} .ml95 { margin-left:95px;} .ml100 { margin-left:100px;}
.mr5 { margin-right:5px;} .mr10 { margin-right:10px;} .mr15 { margin-right:15px;} .mr20 { margin-right:20px;} .mr25 { margin-right:25px;} .mr30 { margin-right:30px;} .mr35 { margin-right:35px;} .mr40 { margin-right:40px;} .mr45 { margin-right:45px;} .mr50 { margin-right:50px;} .mr55 { margin-right:55px;} .mr60 { margin-right:60px;} .mr65 { margin-right:65px;} .mr70 { margin-right:70px;} .mr75 { margin-right:75px;} .mr80 { margin-right:80px;} .mr85 { margin-right:85px;} .mr90 { margin-right:90px;} .mr95 { margin-right:95px;} .mr100 { margin-right:100px;}
.pt5 { padding-top:5px;} .pt10 { padding-top:10px;} .pt15 { padding-top:15px;} .pt20 { padding-top:20px;} .pt25 { padding-top:25px;} .pt30 { padding-top:30px;} .pt35 { padding-top:35px;} .pt40 { padding-top:40px;} .pt45 { padding-top:45px;} .pt50 { padding-top:50px;} .pt55 { padding-top:55px;} .pt60 { padding-top:60px;} .pt65 { padding-top:65px;} .pt70 { padding-top:70px;} .pt75 { padding-top:75px;} .pt80 { padding-top:80px;} .pt85 { padding-top:85px;} .pt90 { padding-top:90px;} .pt95 { padding-top:95px;} .pt100 { padding-top:100px;}
.pb5 { padding-bottom:5px;} .pb10 { padding-bottom:10px;} .pb15 { padding-bottom:15px;} .pb20 { padding-bottom:20px;} .pb25 { padding-bottom:25px;} .pb30 { padding-bottom:30px;} .pb35 { padding-bottom:35px;} .pb40 { padding-bottom:40px;} .pb45 { padding-bottom:45px;} .pb50 { padding-bottom:50px;} .pb55 { padding-bottom:55px;} .pb60 { padding-bottom:60px;} .pb65 { padding-bottom:65px;} .pb70 { padding-bottom:70px;} .pb75 { padding-bottom:75px;} .pb80 { padding-bottom:80px;} .pb85 { padding-bottom:85px;} .pb90 { padding-bottom:90px;} .pb95 { padding-bottom:95px;} .pb100 { padding-bottom:100px;}
.pl5 { padding-left:5px;} .pl10 { padding-left:10px;} .pl15 { padding-left:15px;} .pl20 { padding-left:20px;} .pl25 { padding-left:25px;} .pl30 { padding-left:30px;} .pl35 { padding-left:35px;} .pl40 { padding-left:40px;} .pl45 { padding-left:45px;} .pl50 { padding-left:50px;} .pl55 { padding-left:55px;} .pl60 { padding-left:60px;} .pl65 { padding-left:65px;} .pl70 { padding-left:70px;} .pl75 { padding-left:75px;} .pl80 { padding-left:80px;} .pl85 { padding-left:85px;} .pl90 { padding-left:90px;} .pl95 { padding-left:95px;} .pl100 { padding-left:100px;}
.pr5 { padding-right:5px;} .pr10 { padding-right:10px;} .pr15 { padding-right:15px;} .pr20 { padding-right:20px;} .pr25 { padding-right:25px;} .pr30 { padding-right:30px;} .pr35 { padding-right:35px;} .pr40 { padding-right:40px;} .pr45 { padding-right:45px;} .pr50 { padding-right:50px;} .pr55 { padding-right:55px;} .pr60 { padding-right:60px;} .pr65 { padding-right:65px;} .pr70 { padding-right:70px;} .pr75 { padding-right:75px;} .pr80 { padding-right:80px;} .pr85 { padding-right:85px;} .pr90 { padding-right:90px;} .pr95 { padding-right:95px;} .pr100 { padding-right:100px;}

.w10 {width: 10%;}.w15 {width: 15%;}.w20 {width: 20%;}.w25 {width: 25%;}.w30 {width: 30%;}.w35 {width: 35%;}.w40 {width: 40%;}.w45 {width: 45%;}.w50 {width: 50%;}.w55 {width: 55%;}.w60 {width: 60%;}.w65 {width: 65%;}.w70 {width: 70%;}.w75 {width: 75%;}.w80 {width: 80%;}.w85 {width: 85%;}.w90 {width: 90%;}.w95 {width: 95%;}.w100 {width: 100%;}
/* 
-----------------------------------------------------------------*/
.text-justify p {
	text-align:justify;
	text-justify:inter-ideograph;
}

.paragraph {
	margin-bottom: 50px;
}
.small-paragraph {
  margin-bottom: 30px;
}

a {
  cursor: pointer;
  cursor: hand;
  text-decoration: none;
}

a:hover {
  transition: 0.3s ease-in-out;
}

.txt-center {
  text-align: center;
}

.signature {
  text-align:right;
}
.signature p {
  display:inline-block;
  text-align: left;
}


/* 
-----------------------------------------------------------------*/
.hidden-1024, .hidden-980, .hidden-750, .hidden-480 {
	display: block;
}
.visible-1024, .visible-980, .visible-750, .visible-480 {
	display: none;
}
@media screen and (max-width:1023px) {
.hidden-1024 {display: none;}
.visible-1024 {display: block;}
}
@media screen and (max-width:980px) {
.hidden-980 {display: none;}
.visible-980 {display: block;}
}
@media screen and (max-width:750px) {
.hidden-750 {display: none;}
.visible-750 {display: block;}
}
@media screen and (max-width:480px) {
.hidden-480 {display: none;}
.visible-480 {display: block;}
}


/* テーブル
-----------------------------------------------------------------*/
.normal-tab {
	width: 100%;
	border-collapse: collapse;
}

.normal-tab th,
.normal-tab td {
	border: 1px solid #cccccc;
	padding: 1em 20px;
	vertical-align: top;
	font-size: 1.6rem;
}

.normal-tab th {
	font-weight: normal;
	background-color: #f3f1ef;
}

.normal-tab ul li {
  list-style-type: none;
  position: relative;
  padding-left: 0.8em;
  line-height: 1.6em;
  margin-bottom: 0.8em;
}
.normal-tab ul li:last-child {
  margin-bottom: 0;
}
.normal-tab ul li:before {
  border-radius: 50%;
  width: 4px; /*点の幅*/
  height: 4px; /*点の高さ*/
  display: block;
  position: absolute;
  left: 0;
  top: 0.7em;
  content: "";
  background: #aaa;
}


.about-tab th {
  width: 18%;
}
.about-tab td {
  width: 82%;
}


@media screen and (max-width:480px) {
.normal-tab th,
.normal-tab td,
.about-tab th,
.about-tab td {
  display: block;
	width: 100%;
  border: none;
}
.normal-tab th {
  padding: 5px 20px;
}
.normal-tab td {
  padding: 1em 0;
}
}



/* テーブル
-----------------------------------------------------------------*/
.border-b-tab {
	width: 100%;
	border-collapse: collapse;
}

.border-b-tab th,
.border-b-tab td {
	border-bottom: 1px solid #ccc;
	vertical-align: top;
	font-size: 1.6rem;
	line-height: 1.6em;
}

.border-b-tab th {
	font-weight: normal;
	padding: 20px 20px 20px 0;
}
.border-b-tab td {
	font-weight: normal;
	padding: 20px 20px 20px 0;
}


.border-b-tab th.border-t-tab,
.border-b-tab td.border-t-tab {
	border-top: 1px solid #ccc;
}


.nowrap-th th {
    white-space: nowrap;
}




/* Googleマップ レスポンシブ対応
-----------------------------------------------------------------*/
.googleMap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin-bottom: 5px;
	margin-top: 5px;
}
.googleMap iframe,
.googleMap object,
.googleMap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* YouTube レスポンシブ対応
-----------------------------------------------------------------*/
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* 電話番号リンク
<a href="tel:00000000000">000-0000-0000</a>
-----------------------------------------------------------------*/
@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}


/* clearfix
-----------------------------------------------------------------*/

.clearfix:after  {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}




/* 下からフェードイン
-----------------------------------------------------------------*/
.fade {
  transition: all 2000ms;
  opacity: 0;
  visibility: hidden;
  transform: translate(0px, 50px);
}

.fadein {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, 0px);
} 




/* GoogleWebフォント

ゴシック体
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
font-family: 'Noto Sans JP', sans-serif;
font-weight: 100;300;400;500;700;900;

明朝体
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap" rel="stylesheet">
font-family: 'Noto Serif JP', serif;
font-weight: 200;300;400;500;600;700;900;

丸ゴシック体
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap" rel="stylesheet">
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 100;300;400;500;700;800;900;

すべて指定
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap" rel="stylesheet">

ゴシック体+明朝体
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap" rel="stylesheet">


Oswald
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap" rel="stylesheet">

font-family: 'Oswald', sans-serif;

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






/* パンくずリスト
-----------------------------------------------------------------*/
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0 22px;
    list-style: none;
    padding: 0;
    font-size: .9em;
    margin-bottom: 40px;
    line-height: 1.8em;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:not(:last-child)::after {
    display: inline-block;
    transform: rotate(45deg);
    width: .3em;
    height: .3em;
    margin-left: 10px;
    border-top: 1px solid #333333;
    border-right: 1px solid #333333;
    content: '';
}

.breadcrumb a {
    text-decoration: none;
    color: #333;
}

@media screen and (max-width:480px) {
.breadcrumb {
    font-size: 1.1rem;
    gap: 0 10px;
    margin-bottom: 30px;
}
.breadcrumb li:not(:last-child)::after {
  margin-left: 5px;
}
}



/* ボタン　ベース（左右マージンは別で指定の必要あり）
-----------------------------------------------------------------*/
.button-base a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 2em;
  color: #666;
  width: 310px;
  font-size: 1.6rem;
  border: 1px solid #ccc;
  background-color: #fff;
  position: relative;
  border-radius: 5px;
}

.button-base a::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 1px solid #666;
  border-right: 1px solid #666;
  transform: rotate(45deg);
  position: absolute;
  right: 10px;
}

.button-base a:hover {
  color: #ff7d00;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ff7d00;
}

.button-base a:hover::after {
  border-top: 1px solid #ff7d00;
  border-right: 1px solid #ff7d00;
}

/* ボタン　左右マージン指定
-----------------------------------------------------------------*/
.button-sdgs a {
   margin-top: 40px;
   margin-right: auto;
 }
.button-products a {
   margin-top: 40px;
   margin-left: auto;
}
 
@media screen and (max-width:640px) {
.button-sdgs a,
.button-products a {
  margin: 40px auto 0; 
 }
}