/*************************
メディアクエリ
*************************/
@media screen and (max-width: 768px){

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}



body {
-webkit-text-size-adjust: 100%;
	background:#fff;
font-family:"游ゴシック","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif !important;
　　　font-weight: 200;	
}


img{
  max-width: 100%;
  height: auto;
  border: 0;
  text-align:center;
}


/**************************************************************************************************

WRAPPER

**************************************************************************************************/
#wrapper {
	margin:0 auto;
	width:100%;
	padding:0 0 0 0;
background:#f7f7f8;
color:#000;
}




/**************************************************************************************************

FADE

**************************************************************************************************/

.fadeIn {
  transform: translate3d(0, 30px, 0);
  transition: 0.5s;
  opacity: 0;
}
.fadeIn.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}



/*************************************************************************************************

P

**************************************************************************************************/
p{
font-size:15px;
line-height:1.8em;
color:#000;

}

p.txtC{
text-align:center;
}


/**************************************************************************************************

HEADER

**************************************************************************************************/
header{
  z-index: 2;
    width: 100%;
margin: 0 auto;
background:#fff;
	height:55px;
position: fixed;
    top: 0;
    transition: 0.5s;
}

#headerWrap{
margin: 0 auto 0 auto;
width:100%;
}


#headerLogoPc{
display:none;
}


#headerMenuBox{
display:none;
}


/**************************************************************************************************

スマホメニュー

**************************************************************************************************/
.header {
display:block;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: white;
 /***  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); メニュー下の影はここ ***/
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*** padding: 0.5rem 1rem; メニューの余白はここ***/
}

/*** スマホ用ロゴ ***/
.spLogo {
float:left;
margin:0 0 0 10px;
display:block;
padding:0 0 0 0;
}

.spLogo img{
width:120px;
}

/* ハンバーガーボタンのデザイン */
.drawer__button {
  position: relative;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 999; /* メニューを開いている時もクリックできるよう設定 */
	width:55px;
background:#ec6c44;
	height:55px;
}
/* ハンバーガーボタン内の線 */
.drawer__button > span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background-color: #fff;
  transform: translateX(-50%);
}
.drawer__button > span:first-child {
  transform: translate(-50%, calc(-50% - 0.5rem));
  transition: transform 0.3s ease;
}
.drawer__button > span:nth-child(2) {
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}
.drawer__button > span:last-child {
  transform: translate(-50%, calc(-50% + 0.5rem));
  transition: transform 0.3s ease;
}
/* 展開時のデザイン */
.drawer__button.active > span:first-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.drawer__button.active > span:nth-child(2) {
  opacity: 0;
}
.drawer__button.active > span:last-child {
  transform: translate(-50%, -50%) rotate(45deg);
}
/* メニューのデザイン */
.drawer__nav {
  position: fixed; /* 追従ヘッダーなどでも表示できるよう設定しておく */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease;
  opacity: 0;
  visibility: hidden;
}
.drawer__nav.active {
  opacity: 1;
  visibility: visible;
}
.drawer__nav__inner {
  position: relative;
  width: 80%;
  height: 100%;
  background-color: white;
  padding: 4rem 1.5rem 1rem;
  margin: 0 0 0 auto;
  overflow: scroll;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.drawer__nav.active .drawer__nav__inner {
  transform: translateX(0);
}
.drawer__nav__menu {
  list-style: none;
  padding-left: 0;
}
.drawer__nav__link {
  display: block;
font-size:17px;
  color: black;
  text-decoration: none;
  padding: 1rem 1rem;
  border-bottom: solid 1px lightgray;
position:relative;
}


.drawer__nav__item :before{
font-family: "Font Awesome 5 Free";
content:'\f054';
position:absolute;
color:#000;
font-weight: 900;
font-size:50%;
top:50%;
right:15px;
-webkit-transform: translateY(-50%);
-ms-transform:translateY(-50%);
          transform: translateY(-50%);

}


/* ハンバーガーメニュー展開時、背景を固定 */
body.active {
  height: 100%;
  overflow: hidden;
}


/**************************************************************************************************

メインイメージ

**************************************************************************************************/
/*** PC用のメインイメージは非表示 ***/
.keyVisual {
display:none;
}

.keyVisualSp {
width:100%;
height:100%;
z-index:1;
margin:55px auto 0 auto;
    position: relative;
display:block;
}
 
 .keyVisualSp img{
    width:100%;
    height:100%;
object-fit: cover;
}

 
.keyVisualSp p{
color:#fff;
font-weight:900;
    position: absolute;
    bottom:7%;
    left:8%;
font-size:30px;
line-height:1.6em;
	font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
text-shadow: 1px 1px 0px #000;
}

/****メインの文字 *****/

.catch_copy span {
  transition: 1s;
  opacity: 0;
  display: block;
}
.catch_copy span:first-child {
  animation: catch_anime 1.4s forwards 0.5s;　
}
.catch_copy span:nth-child(2) {
  animation: catch_anime 1.4s forwards 1.5s;
}
.catch_copy span:nth-child(3) {
  animation: catch_anime 1.4s forwards 2.5s;
}

@keyframes catch_anime {
  0% {
    transform: translateY(20px);
  }
   100% {
    opacity: 1;
    transform: translateY(0);
  }
}
 

 
/**************************************************************************************************

政治活動を支えるパートナーとして

**************************************************************************************************/
.leadBoxUpper{
width:100%;
margin:0 auto 0 auto;
}


.leadBoxUpper h3 span{
font-size:30px;
padding:30px 20px 0 20px;
font-weight:900;
line-height:1.6em;
	font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
text-align:center;
}

.leadBoxMiddle{
width:100%;
margin:20px auto 0 auto;
padding:0 30px 50px 30px;
text-align:left;
}

.leadBoxMiddle p span{
font-size:17px;
line-height:2.0em;
text-align:left;
  opacity: 0;
  display: block;
}


/**************************************************************************************************

ご挨拶

**************************************************************************************************/
.greetingArea{
width:100%;
background:#fff;
margin:0 auto;
padding:50px 0 60px 0;
}

.greetingBox{
width:100%;
padding:0 30px;
margin:0 auto;
}

/*** 動かす文字はspanで設定 ***/


.greetingBox h2{
font-size:35px;
margin:0 0 30px 0;
font-weight:900;
position:relative;
line-height:1.8em;
	font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
text-align:left;
}

 /*** 文字の横に平行四辺形の縦線 ***/
.greetingBox .heading {
  align-items: center; /* 線を上下中央 */
  display: flex; /* 文字と線を横並び */
  justify-content: left; /* 文字を中央寄せ */
}
.greetingBox .heading::before {
  background-color: #ec6c44; /* 線の色 */
  content: "";
  height:37px; /* 線の高さ */
  width:9px; /* 線の長さ */
}
.greetingBox .heading::before {
  margin-right: 30px; /* 文字との余白 */
  transform: skewX(-20deg); /* 傾ける */
}
.greetingBox p{
font-size:17px;
line-height:2.0em;
text-align:left;
margin:15px 0 0 0;
}


/**************************************************************************************************

会社情報

**************************************************************************************************/
.companyBox{
width:100%;
padding:0 40px;

margin:0 auto 50px auto;

}

.companyBox h2{
font-size:35px;
margin:60px 0 30px 0;
font-weight:900;
position:relative;
line-height:1.8em;
	font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
text-align:left;
}

.companyBox .captionttl{
font-size:16px;
position:absolute;
left:240px;
top:28px;
font-weight:normal;
line-height:1.8em;
text-align:left;
font-family:"游ゴシック","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
}

.companyBox .heading {
  align-items: center; /* 線を上下中央 */
  display: flex; /* 文字と線を横並び */
  justify-content: left; /* 文字を中央寄せ */
}
.companyBox .heading::before {
  background-color: #5ec0c6; /* 線の色 */
  content: "";
  height:37px; /* 線の高さ */
  width:9px; /* 線の長さ */
}
.companyBox .heading::before {
  margin-right: 30px; /* 文字との余白 */
  transform: skewX(-20deg); /* 傾ける */
}

.companyBox ul {
width:100%;
}

.companyBox ul li{
display:inline-block;
vertical-align:middle;
width:100%;
margin:0 0 0 0;
}

.companyBox ul li:last-child{ 
display:inline-block;
vertical-align:middle;
width:100%;
margin:30px 0 0 0;
}


.companyBox table {
width:100%;

	border-collapse:collapse;
	margin:0 0 0 0;
}

.companyBox th {
font-size:16px;
line-height:1.8em;
	width:100px;
	vertical-align:top;
	padding:10px 0 10px 5px;
	font-weight:900;
	color:#000;
text-align:left;
}

.companyBox td {
	font-size:16px;
line-height:1.8em;
	padding:10px 10px;
	vertical-align:top;
text-align:left;
	color:#000;
}



/**************************************************************************************************

お知らせ

**************************************************************************************************/
.InformationArea{
width:100%;
background:#fff;
margin:0 auto;

padding:60px 40px 20px 40px;
}


.InformationBox{
width:100%;

margin:0 auto 60px auto;

}

.InformationBox h2{
font-size:35px;
margin:0 0 30px 0;
font-weight:900;
line-height:1.8em;
	font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
text-align:left;
}

.InformationBox .captionttl{
font-size:16px;
position:absolute;
left:300px;
top:28px;
font-weight:normal;
line-height:1.8em;
text-align:left;
font-family:"游ゴシック","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
}

.InformationBox .heading {
  align-items: center; /* 線を上下中央 */
  display: flex; /* 文字と線を横並び */
  justify-content: left; /* 文字を中央寄せ */
}
.InformationBox .heading::before {
  background-color: #000; /* 線の色 */
  content: "";
  height:37px; /* 線の高さ */
  width:9px; /* 線の長さ */
}
.InformationBox .heading::before {
  margin-right: 30px; /* 文字との余白 */
  transform: skewX(-20deg); /* 傾ける */
}

.InformationBox dl{
width:100%;
border-bottom:dotted 1px #ccc;
margin:0 0 30px 0;
padding:0 0 30px 0;
}


.InformationBox dl dt{
display:inline-block;
width:100%;
margin:0 0 0 0;
font-size:16px;
line-height:1.8em;
	vertical-align:top;
text-align:left;
	color:#000;

}

.InformationBox dl dd{
display:inline-block;
width:100%;
margin:0;
font-size:16px;
line-height:1.8em;
	vertical-align:top;
text-align:left;
	color:#000;

}


/**************************************************************************************************

お問い合わせ

**************************************************************************************************/
.contactBox{
width:100%;

margin:0 auto 0 auto;
padding:60px 40px;
}


.contactBox h2{
font-size:40px;
margin:0 0 30px 0;
font-weight:900;
line-height:1.8em;
	font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
text-align:center;
}


.contactBox .heading {
  align-items: center; /* 線を上下中央 */
  display: flex; /* 文字と線を横並び */
  justify-content: center; /* 文字を中央寄せ */
}
.contactBox .heading::before {
  background-color: #000; /* 線の色 */
  content: "";
  height:37px; /* 線の高さ */
  width:9px; /* 線の長さ */
}
.contactBox .heading::before {
  margin-right: 30px; /* 文字との余白 */
  transform: skewX(-20deg); /* 傾ける */
}


/*** ボタン ***/
.contactBox .btn a{
width:80%;
	font-size:18px;
	vertical-align:middle;
text-align:center;
	font-weight:700;
	color:#fff;
	line-height:1.6em;
	text-decoration: none;
	display: block;
margin:40px auto 0 auto;
	padding:25px 0;
background: #f75500;
border:solid 2px #f75500;
position:relative;
}


.contactBox .btn .visited a, {
	opacity:1.0;
}


.contactBox .btn a:hover {
background: #fff;
border:solid 2px #f75500;
	color:#f75500;
}

.contactBox .btn a:active {
	opacity:.8;
}


.contactBox .btn :before{
font-family: "Font Awesome 5 Free";
content:'\f054';
position:absolute;
color:#fff;
font-weight: 900;
font-size:50%;
top:50%;
right:15px;
-webkit-transform: translateY(-50%);
-ms-transform:translateY(-50%);
          transform: translateY(-50%);

}



.contactBox .btn a:hover::before{
font-family: "Font Awesome 5 Free";
content:'\f054';
position:absolute;
color:#f75500;
font-weight: 900;
font-size:50%;
top:50%;
right:15px;
-webkit-transform: translateY(-50%);
-ms-transform:translateY(-50%);
          transform: translateY(-50%);

}



/*************************************************************************************************

NONE

**************************************************************************************************/
.pcnone{
display:block;
}

.spnone{
display:none;
}

.br-sp { display:none; }

.br-pc { display:block; }


a[href^="tel:"] {
    pointer-events: none;
}



/*************************************************************************************************

アンカーリンクずれ解消

**************************************************************************************************/

#message {
  margin-top : -55px;
  padding-top : 55px;
}




/*************************************************************************************************

CLEAR

**************************************************************************************************/

.clear {
clear:both;
}

.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}




/**************************************************************************************************

PAGEUP

**************************************************************************************************/

.pagetop {
	display: none;
	position: fixed;
	bottom: 50px;
	right:50px;
	z-index:10000;
}

.pagetop a {
position:absolute;
	display: block;
	width:40px;
	height: 40px;
	background-color: #969696;
	text-align: center;
	color: #fff;
	font-size: 12px;
	text-decoration: none;
border-radius: 5px;         /* CSS3 */
	-moz-border-radius: 5px;    /* Firefox */
	-webkit-border-radius: 5px;
	line-height:40px;

}


.pagetop a:before{
font-family: "Font Awesome 5 Free";
content:'\f106';
 font-size: 0.6em;
position:absolute;
font-weight: 900;
font-size: 100%;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
          transform: translate(-50%,-50%);
}





/**************************************************************************************************

FOOTER

**************************************************************************************************/

footer{
	width:100%;
	margin:0 auto 0 auto;
	height:auto;
background:#000;
	text-align:center;
}



/*** コピーライト、サブメニュー ***/
.footerBtm {
width:100%;
position:relative;
padding:30px 0;
}

.footerBtm p {
font-size:18px;
line-height:2.2em;
color:#fff;
font-size:13px;
text-align:center;
}




		
}