@charset "UTF-8";
/* CSS Document */
body {
	margin: 0;
	padding: 0;
	line-height: 1.5;
	/*background-color: #E61E58;*/
	background-image: url("../img/bg_pc.svg");
	background-repeat: repeat;
	background-color: #EEEFEF;
	height: 100%;
	font-family: "游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
	overflow-x: hidden;
}
img {vertical-align: bottom; }

@media screen and (orientation: portrait) {
	body {
		background-image: url("../img/bg_sp.svg");
		background-position: 0 -40px;
	}
}

/*
YouTubeレスポンシブ
———————————*/
.frame-wrapper__video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  /*margin-bottom: 50px;*/
	margin-bottom: 1rem;

}
.video_btn {
	margin-bottom: 2rem;
}

.frame-wrapper__video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.pcNone{
	display: none;
}
.spNone{
	display:inherit;
}
/*
FadeOut遷移
———————————*/
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff;  /* 背景カラー */
  z-index: 9999;  /* 一番手前に */
  pointer-events: none;  /* 他の要素にアクセス可能にするためにポインターイベントは無効に */
  opacity: 0;  /* 初期値では非表示 */
  -webkit-transition: opacity .8s ease;  /* アニメーション時間は 0.8秒 */
 -ms- transition: opacity .8s ease;
 -moz- transition: opacity .8s ease;
  transition: opacity .8s ease;
}
 
 
/*body要素に.fadeoutセレクタがある場合には、レイヤーが表示されるようにopacityを１に設定します。*/
 
body.fadeout::after {
  opacity: 1;
}
 
 
/*お好みで、.fadeoutセレクタ以下の他の要素にもアニメーション用のCSSを定義します*/
/*DEMOではページ遷移時にarticle要素のスケールもアニメーションさせています*/
 
body.fadeout article{
  -webkit-transform:scale(1.2);
  transform:scale(1.2);
}

/*
//FadeOut遷移
———————————*/

.pcNone{
	display: none;
}
.spNone{
	display:inherit;
}
/*===================

 フルスクリーン

===================*/
.fullscrn {
	width: 100%;
  	height: 100vh;
}
.box_flex_center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.flame_img {
	/*border: 1px solid white;*/
}
.flame_img img{
	width: 100%;
}
/*
上下スペースありボックス
———————————*/
.content_box {
	background: rgba(238,239,239,0.9);
	/*border-radius: 6px;*/
	/*width: 80%;*/
	/*width: 100%;*/
	/*margin: 5% auto;*/
	margin: 0 auto;
	/*padding: 3%;
	box-sizing: content-box;*/
}

/*===================

 アニメーション - スライド

===================*/

@keyframes LeftToRight {
  0% {
    opacity: 0;/* 透明 */
    transform: translateX(-20%);/* X軸方向に-20% */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);/* X軸方向に20% */
  }
}

/* 「LeftToRight」を適用する箇所 */
.ikiru {
  animation-duration: 2s;/* アニメーション時間 */
  animation-name: LeftToRight;/* アニメーション名 */
  /*animation-iteration-count: infinite;*//* アニメーションの繰り返し（無限）*/
}


/*===================

 Section-1

===================*/
/*
振り返り志位さん
———————————*/
#head {
	background-image: url("../img/top_shi_pc_ver02.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size:contain;
}
/*@media screen and (orientation: portrait) and (max-width: 480px){*/
@media screen and (orientation: portrait) {
	#head {
		background-image: url("../img/top_shi_sp_ver04.png");
		background-position: bottom right;
	}
}
.top_shi {
	/*position: relative;*/
	width: 100%;
	min-height: 100vh;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	/*align-items: center;*/
}
.top_shi_pic {
	width: 45%;
	/*margin-top: -5%;*/
	align-self: center;
}

.jcpslogo {
	width: 15%;
	/*align-self:flex-end;*/
	position: absolute;
	bottom:0;
	right: 0;
	margin-bottom: 3rem;
}
.jcpslogo img{
	width: 100%;
}



/*@media screen and (orientation: portrait) and (max-width: 480px){*/
@media screen and (orientation: portrait){
	.top_shi {
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}
	.top_shi_pic {
		position: absolute;
		top:12%;
		width: 90%;
		/*margin-top: 16%;*/
	}
	.jcpslogo {
		width: 45%;
		margin-bottom: 3rem;
	}
}
.ikiru {
 	position: absolute;
	top;0;
	left: 0;
	z-index: 2;	
}
/*===================

 Section-2

===================*/
/*
ステートメント
———————————*/
#statement_box {
	padding: 4rem;
	box-sizing: border-box;
}
.statement_tex {
	width: 100%;
}
.statement_tex img{
	width: 100%;
}
#statement_box p{
	font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
	font-size: 1.5rem;
	line-height: 1.8em;
	margin-bottom: 1em;
}
#statement_box p:last-child{
	margin-bottom: 0;
}
.ymarker {
	font-weight: 700;
	padding: 0 2px;
	font-size: 2rem;
background: -webkit-linear-gradient(transparent 60%, #ffff7d 40%);
background: -o-linear-gradient(transparent 60%, #ffff7d 40%);
background: linear-gradient(transparent 60%, #ffff7d 40%);
}

/*===================

 Section-3.01

===================*/
/*
私の参院選アクション
———————————*/
#kakuchi_box {
	background: rgba(238,239,239,0.9);
}
p.watashinoaction_title {
	color: #000000;
	font-size: 1.4rem;
	font-weight: 700;
	text-align: left;
	margin: 2.5rem 0 1rem 1rem;
}
p.watashinoaction_title span{
	font-size: 1.2rem;
	font-weight: 700;
	margin-left: 1.2rem;
	display: block;
}

/*
レポートリンクボタン
———————————*/
.btn-open_watashi{
	font-size: 1.2rem;
	padding: 1rem;
	margin: 0 auto 2rem auto;
     display:block;
     width: 10rem;
     height:auto;
     line-height: 1.8rem;
     color: #FFF;
     text-decoration: none;
     text-align: center;
     background-color: #38BADA; /*ボタン色*/
     border-radius: 5px; /*角丸*/
     -webkit-transition: all 0.5s;
     transition: all 0.5s;
}
.btn-open_watashi:hover{
     background-color: #75d2ac; /*ボタン色*/
}

/*===================

 Section-3

===================*/
/*
志位動画とレポート
———————————*/
#doga_box {
}
#report_box {
	background: rgba(238,239,239,0.9);
}
.kurashinokoe {
	width: 49%;
}
.kurashinokoe img{
	width: 100%;
}

ul.report_lists {
	width: 100%;
	padding-bottom: 3rem;
	
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
ul.report_lists li.report_list{
	width: 49%;
	/*border-radius: 6px;*/
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	background: #FFFFFF;
	margin-bottom: 2%;
}
ul.report_list_inside {
	width: 100%;
	
	display: flex;
}
li.report_list_inside_pix {
	width: 35%;
}
li.report_list_inside_pix img{
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	width: 100%;
}
li.report_list_inside_tex {
	width: 60%;
}
p.report_title {
	color: #000000;
	font-size: 1.3rem;
	font-weight: 700;
	text-align: center;
	margin: 2.5rem 0 1rem 0;
}

/*
レポートリンクボタン
———————————*/
.btn-open{
	font-size: 1.2rem;
	padding: 1rem;
	margin: 0 auto 2rem auto;
     display:block;
     width: 10rem;
     height:auto;
     line-height: 1.8rem;
     color: #FFF;
     text-decoration: none;
     text-align: center;
     background-color: #f39800; /*ボタン色*/
     border-radius: 5px; /*角丸*/
     -webkit-transition: all 0.5s;
     transition: all 0.5s;
}
.btn-open:hover{
     background-color: #f9c500; /*ボタン色*/
}
p.statement_tex span{
	display: block;
	font-size: 1.3rem;
	text-align: right;
}

/*===================

 Section-3++

===================*/
/*
比例は共産党キャンペーン
———————————*/
#hirei_campaign_box {
	padding: 4rem;
	box-sizing: border-box;
}
.hirei_campaign_title {
	width: 50%;
	margin-bottom: 0.5rem;
}
.hirei_campaign_title img{
	width: 100%;
}
/*
アイコンループ
———————————*/
*, *:before, *:after {
  box-sizing: border-box;
}

/*@-webkit-keyframes scrollBad {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -320px;
  }
}*/
@keyframes scrollBad {
  0% {
    background-position: 0 0;
  }
  100% {
    /*background-position: 0 -420px;*/
	  /*background-position: 0 -7656px;*//*(画像の長さx1.5)*/
	  /*background-position: 0 -15000px;*//*(画像の長さx1.5)*/
	  background-position: 0 -1470px;/*(画像の長さx1.5)*/
	  /*background-position: 0 -3200px;*/
  }
}

.panel {
  	padding: 3rem;
	height: 40vh;
	/*width: 830px;*/
	width: 100%;
	margin: 0 auto;
}
.icons {
  	background-color: #3E69C3;
  	/*background-image:url("../img/twi_icons_0705.jpg");*/
  	background-image:url("../img/hireicam/icons07132_10.jpg");
	background-size: cover;
  	background-position: center center;
  	/*background-size: 500px;*/
  	/*-webkit-animation: scrollBad 18s linear infinite;*/
  	animation: scrollBad 60s linear infinite;
/**/}
/*
//アイコンループ
———————————*/

.hirei_campaign_box_inside {
	width: 80%;
	margin: 0 auto;
}

.hirei_hash_wrap {
	 display: flex;
	justify-content: center;
	align-items: center;
}

.hirei_hash {
	width: 60%;
	margin: 0 auto;
}
.hirei_hash img{
	width: 100%;
	/*filter: drop-shadow(4px 4px 3px rgba(0,0,0,0.6));
	opacity:0.9;*/
}
p.hirei_campaign_tex {
	font-size: 1.3rem;
	padding: 1rem 0;
	line-height: 1.8em;
}
.camp02_head {
	font-size: 1.8rem;
	font-weight: 700;
}

.tl_mov {
	width: 100%;
	margin: 0 auto;
}
.tl_mov video{
	width: 100%;
}
/*
キャンペーン 第2弾
———————————*/
#action2nd {
	width: 50%;
	/*height: 30vh;*/
	/*width: 30vh;*/
	margin: 0 auto;
	/*overflow: hidden;*/
}
#action2nd img{
	/*width: auto;
	height: 100%;*/
	width: 100%;
	/*border-radius: 4px;*/
}
/*
キャンペーン ツイートボタン
———————————*/
ul.cam_sns_list {
	width: 100%;
	display: flex;
	justify-content: space-around;
	margin: 2rem auto 2rem auto;
}
ul.cam_sns_list li{
	width: 30%;
}
.cam_sns_item{
	width: 100%;
	text-align: center;
	margin: 0 auto 2rem auto;
	padding: 0;
	font-size: 12rem;
	border: 1px solid #BE1B7F;
}
.cam_sns_title {
	font-size: 1.6rem;
	padding: 1rem;
	color: #FFF;
	text-align: center;
	background: #BE1B7F;
}
.cam_sns_item a{
	color: #BE1B7F;
	text-decoration: none;
}
.cam_sns_item span{
	margin-top: -3rem;
	margin-bottom: 2rem;
	display: block;
}
.cam_sns_item a:hover{
	color: #BA3C39;
}


/*===================

 Section-4

===================*/
/*
ドネーション
———————————*/
#donation_box {
}
ul.donation {
	/*width: 50%;*/
	width: 80%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}
ul.donation li{
	width: 100%;
}
ul.donation li:nth-child(2){
	width: 80%;
	margin-left: auto;
}
ul.donation li img{
	width: 100%;
}
ul.donation li.donation_ad{
	width: 50%;
}
ul.donation li:nth-child(5){
	margin-bottom: 10px;
}
ul.donation li:last-child{
	background: #FFF;
	padding: 2rem;
	box-sizing: border-box;
}
ul.donation li p{
	font-size: 1.1rem;
	margin-bottom: 1rem
}
ul.donation li p a{
	color: #430001;
	text-decoration: none;
}
ul.donation li p span{
	font-size: 0.9rem;
}

/*
ドネーション SNS
———————————*/
.donation_sns {
	width: 80%;
	margin: 2rem auto;
	padding: 0rem 2rem;
	box-sizing: border-box;
	border: 1px dashed black;
}
/*.donation_sns_list {
	width: 70%;
	display: flex;
	justify-content: space-between;
}*/
.donation_sns_item{
	width: 40%;
	text-align: center;
	margin: 0 auto 2rem auto;
	padding: 0;
	font-size: 12rem;
}
.donation_sns_item a{
	color: #BE1B7F;
	text-decoration: none;
}
.donation_sns_item span{
	margin-top: -3rem;
	margin-bottom: 2rem;
	display: block;
}
.donation_sns_item a:hover{
	color: #BA3C39;
}

/*===================

 Section-5

===================*/
/*
シェアマップ
———————————*/
#sharemap_box {
}
ul.sharemap {
	padding-top: 50px;
	/*width: 60%;*/
	width: 80%;
	margin: 0 auto;
	padding-bottom: 5%;
	display: flex;
	flex-direction: column;
}
/*ul.sharemap li{
	width: 100%;
}*/
ul.sharemap li#sharemap_01{
	/*width: 44%;*/
	width: 50%;
	margin-bottom: 4rem;
}
ul.sharemap li#sharemap_02{
	width: 86%;
	margin-bottom: 2rem;
}
ul.sharemap li#sharemap_03{
	width: 100%;
	margin-bottom: 2rem;
}
ul.sharemap li#sharemap_04{
	width: 100%;
}
ul.sharemap li#sharemap_05{
	width: 100%;
	background: #FFF;
}
ul.donation li img{
	width: 100%;
}
.pulldown {
	width: 100%;
}
.pulldown p{
	margin: 2.5rem auto;
	text-align: center;
}

/*===================

 Section-6
	フッター

===================*/
#footer_box {
	width: 100%;
	background: #FFFFFF;
	padding: 1rem;
	box-sizing: border-box;
}
ul.footer_list {
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}
ul.footer_list li{
	width: 20%;
	margin-right: 2rem;
}
ul.footer_list li:last-child{
	margin-right: 0;
}
ul.footer_list li img{
	width: 100%;
}


/*===================

 SP縦向き

===================*/
@media screen and (orientation: portrait) and (max-width: 480px){
	.spNone{
		display: none;
	}
	
	.pcNone{
		display:inherit;
	}
	/*
	広げる/閉じるボタン
	———————————*/
	.btn_tw {
		text-align: center;
		margin: 1rem auto;
	}
	.btn_tw a{
		background: #38BADA;
		color: white;
		padding: 0.6rem 1rem;
		box-sizing: border-box;
		text-decoration: none;
		border-radius: 4px;
		display: block;
	}
	.btn_kifu {
		text-align: center;
		margin: 1rem auto;
	font-size: 0.9rem;
	}
	.btn_kifu a{
		background: #F9AF48;
		color: white;
		padding: 0.6rem 1rem;
		box-sizing: border-box;
		text-decoration: none;
		border-radius: 4px;
		display: block;
	}
	
	
	/*===================

 	Section-2

	===================*/
	/*
	ステートメント
	———————————*/
	#statement_box {
		padding: 2rem;
		box-sizing: border-box;
	}
	#statement_box p{
		font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
		font-size: 1rem;
		line-height: 1.8em;
		margin-bottom: 1em;
	}
	.ymarker {
		font-size: 1.5rem;
	}
	/*ul.statement {
		width: 80%;
		margin: 0 auto;
	
		display: inherit;
	}
	ul.statement li{
		width: 100%;
	}
	ul.statement li:first-child{
		margin-bottom: 3em;
	}*/
	
	/*
	私の参院選アクション
	———————————*/
	p.watashinoaction_title {
	color: #000000;
	font-size: 1rem;
	font-weight: 700;
	text-align: left;
	margin: 2.5rem 1rem 1rem 1rem;
	}
	
	/*
	レポート
	———————————*/
	
	.kurashinokoe {
		/*width: 80%;*/
		width: 100%;
	}
	ul.report_lists {
		width: 100%;
		padding-bottom: 3rem;
	
		display: inherit;
	}
	ul.report_lists li.report_list{
		width: 100%;
		/*border-radius: 6px;*/
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		background: #FFFFFF;
		margin-bottom: 2%;
	}
	ul.report_list_inside {
		width: 100%;
		margin-bottom: 1.5rem;
		display: inherit;
	}
	li.report_list_inside_pix {
		width: 100%;
	}
	li.report_list_inside_pix img{
		/*border-top-left-radius: 6px;
		border-top-right-radius: 6px;*/
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		width: 100%;
	}
	li.report_list_inside_tex {
		width: 100%;
		padding-bottom: 1rem;
	}
	p.report_title {
		color: #000000;
		font-size: 1.4rem;
		text-align: center;
		margin: 1rem 0;
	}

	/*===================
	
	 Section-3++

	===================*/
	/*
	比例は共産党キャンペーン
	———————————*/
	#hirei_campaign_box {
		padding: 0rem;
	}
	.hirei_campaign_title {
		width: 90%;
	}
	/*
	//アイコンループ
	———————————*/

	.hirei_campaign_box_inside {
		width: 90%;
	}

	.hirei_hash {
		width: 100%;
	}
	.tl_mov {
		width: 100%;
	}
	p.hirei_campaign_tex {
		font-size: 1rem;
		line-height: 1.6em;
	}
	/*
	キャンペーン 第2弾
	———————————*/
	#action2nd {
		width: 90%;
	}
	#action2nd img{
		width: 100%;
	}
	
	
	/*
	キャンペーン ツイートボタン
	———————————*/
	ul.cam_sns_list {
		display: inherit;
		width: 80%;
		margin: 2rem auto;
	}
	ul.cam_sns_list li{
		width: 100%;
	}
	.cam_sns_item{
		width: 100%;
	}
	.cam_sns_title {
		font-size: 1rem;
	}
	/*===================

 	Section-4

	===================*/
	/*
	ドネーション
	———————————*/
	#donation_box {
	}
	ul.donation {
		width: 80%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}
	.donation li:last-child{
		background: #FFF;
		padding: 1rem;
		box-sizing: border-box;
		width: 100%;
	}
	ul.donation li p{
		font-size: 1rem;
		margin-bottom: 1rem;
		word-break: break-all;
	}
	ul.donation li p a{
		color: #430001;
		text-decoration: none;
	}
	ul.donation li p span{
		font-size: 0.9rem;
	}

	/*
	ドネーション SNS
	———————————*/
	.donation_sns {
		width: 100%;
		margin: 2rem auto;
		border: 1px dashed black;
		padding: 0.5rem 1rem;
		box-sizing: border-box;
	}
	/*.donation_sns_list {
		width: 100%;
		margin: 0rem auto;
		display:block;
	}*/
	.donation_sns_item{
		width: 100%;
		margin: 0 auto 2rem auto;
		margin: 0 auto;
		text-align: center;
		font-size: 5rem;
	}
	.btm_two {
		padding-bottom: 2rem;
		
	}
	.donation_sns_item span{
		margin-top: -1rem;
	}
	/*
	シェアマップ
	———————————*/
	#sharemap_box {
	}
	ul.sharemap {
		padding-top: 50px;
		width: 80%;
		margin: 0 auto;
		padding-bottom: 5%;
		display: flex;
		flex-direction: column;
	}
	ul.sharemap li#sharemap_01{
		width: 80%;
		margin-bottom: 1.2rem;
	}
	ul.sharemap li#sharemap_02{
		margin-bottom: 1rem;
	}
	ul.sharemap li#sharemap_03{
		margin-bottom: 1rem;
	}
.	pulldown p{
		margin: 1.2rem auto;
		text-align: center;
	}
	
	/*===================

 	フッター

	===================*/
	ul.footer_list {
		width: 90%;
		margin: 0 auto;
		display: inherit;
	}
	ul.footer_list li{
		width: 100%;
		margin-right: 0;
		margin-bottom: 1rem;
	}
	ul.footer_list li:last-child{
		margin-bottom: 0;
	}
}


/*===================

SP横向き

===================*/
@media screen and (orientation: landscape) and (max-width: 896px){
}


/*===================

タブレット縦向き

===================*/
@media screen and (min-width: 481px) and (max-width: 1024px) and (orientation: portrait){
}


/*===================

タブレット横向き

===================*/
@media screen and (min-width: 897px) and (max-width: 1112px) and (orientation: landscape){
}