/*google font 設定*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Noto+Serif+JP:wght@400;700&family=Amiri:wght@400;700&display=swap');

#huka #nav{color: #fff;}
#huka #nav.alt{color: #c7c7c7;}

/* flexbox */
.flex_b{
	display: flex;
	flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;	
    align-items: flex-start;
}

	@media screen and (max-width: 480px) {
		.flex_b{
			display: block;
		}
	}

.flex_b.row{
		flex-direction: row-reverse;
	}


figcaption{
	text-align: right;
	font-size: 0.8em;
}		

@media screen and (max-width: 480px) {
br.sp{display: none;}
}

/* link */

#huka .container a ,#huka .container a:hover{
    color: #cdb14c;
}	

/* font */
#huka h1 {
    margin: 0;
    display: none !important;
}

#huka #main h2{
	overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    font-size: 2.25em;
    margin: 0 0 1.8em 0;
}
#huka #main #news h2 {
    background: url(../images/bg_h_01.png) no-repeat center;
}
#huka #main #newbook h2 {
    background: url(../images/bg_h_02.png) no-repeat center;
}
#huka #main #favorite h2 {
    background: url(../images/bg_h_03.png) no-repeat center;
}
#huka #main #movie h2 {
    background: url(../images/bg_h_04.png) no-repeat center;
}
#huka #main #prof h2 {
    background: url(../images/bg_h_05.png) no-repeat center;
}
#huka #main #activity h2 {
    background: url(../images/bg_h_06.png) no-repeat center;
}
#huka #main #campaign h2 {
    background: url(../images/bg_h_07.png) no-repeat center;
}
#huka #main #about h2 {
    background: url(../images/bg_h_08.png) no-repeat center;
}


@media screen and (max-width: 480px) {
	#huka #main h2{
	    font-size: 3.8vw;
	}

	#huka #main #news h2,
	#huka #main #newbook h2,	
	#huka #main #movie h2,
	#huka #main #favorite h2,
	#huka #main #prof h2,
	#huka #main #activity h2,
	#huka #main #campaign h2,
	#huka #main #about h2{
		background-size: contain;
	}

}



#huka h2 + p{
		font-size: 1.35em;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		line-height: 2;
		color: #fff;
}

@media screen and (max-width: 480px) {
	#huka h2 + p{
		font-size: 1.15em;
	}
}

#huka h3{
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
    font-size: 1.4em;
    font-weight: 500;
    line-height: 1.2;
    color: #444;
    letter-spacing: 0.1em;
}

	@media screen and (max-width: 480px) {
		#huka h3{
			font-size: 4.5vw;
			text-align: center;
			line-height: 1.1;
		}
	}

#huka h3 + p{
		font-size: 1.15em;
		font-family: 'Noto Sans JP', serif;
		font-weight: 400;
		color: #333;
		line-height: 1.75;
}
	@media screen and (max-width: 480px) {
		#huka h3 + p{
				font-size: 1.05em;
				text-align: left;
		}
	}			
    
#huka #main h3 > span{
	/*font-size: 0.7em;
	padding-left: 2em;
	letter-spacing: 0.1em;*/
}

		@media screen and (max-width: 480px) {
			#huka #main h3 > span{
				/*font-size: 0.7em;
				display: block;
				padding-left: 0;*/
			}
		}

#huka h4{
	font-size: 1.2em;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: #333;
}

	@media screen and (max-width: 480px) {
		#huka h4{
			font-size: 1em;
			text-align: left;
		}
	}


/*#main h4 + p {
	font-size: 1.125em;
}*/

#huka  p{
	font-size: 1.05em;
	font-weight:400;
	line-height: 1.8;
}

#huka  p.txt_bold{
	font-weight: 800;
    font-size: 1.25em;
    letter-spacing: .05em;
    line-height: 1.2;
    font-family: 'Noto Serif JP', serif;
    color: #000;

}

#huka .tyuki {
	font-weight: 400;
    font-size: 0.8em;
    line-height: 1.2;
    text-align: center;
}

.line {
  position: relative;
  display: inline-block;
  padding: 0 45px;
}
.line:before, .line:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.line:before {
  left:0;
}
.line:after {
  right: 0;
}


/* effect */


.content1 .conBox{
    /*max-width: 1920px;*/
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border: none;
    line-height: 1.8em;
    font-size: 100%;
}

#mainVisual{
	width: 100%;
	min-height: 1300px;
    background: url(../images/main_bg.jpg)top center no-repeat;
    background-size: cover;
}
.mainVisual__inner{
	position: relative;
    width: 85rem;
    margin: 0 auto;
}


.mainVisual__wrap{
	flex-wrap: wrap;
    align-items: baseline;
    padding:4rem 1rem;
}

.copy1{
    margin-bottom: 2rem;
}


.copy1.flex{
	  display: flex;
	justify-content: flex-end;
}



.copy2 .text{
	margin-bottom: 2rem;
	}


img.pc{
	display: block;
}

@media screen and (max-width: 1200px) {
	.copy2 img.pc{
			width: inherit;
	}
}




@media screen and (max-width: 1024px) {
	.mainVisual__inner{
	    width: 60.33rem;
	}
	.mainVisual__wrap{
	    padding:2rem 4rem 4rem; 
	}


}

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

	/*.content1*/
	#mainVisual {
	height: auto;
    background-position: right 50% bottom 0%;
    background-size: 150%;
    min-height: 850px;
	}
	.mainVisual__wrap {
    padding:0 2rem 4rem;
	}

	.mainVisual__inner{
		width: 100%;
	}

	.copy1 {
		width: 100%;
		margin: 0 auto 2rem;
	}
	.copy2 {
	    width: 80%;
	    /*margin: 0 auto;*/
	}
	.copy1 img {
		width: 40%;
	}
}

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

	#mainVisual {
	background-size: 200%;		
    min-height: 600px;
	}
	.mainVisual__wrap {
    padding: 2em;
	}	
	.copy1 {
	    margin: 0 auto 2rem;
	}
	.copy1 img{
	    width: 55%;
	}	
	.copy2 {
	    width: 95%;
	}		
	.copy2 .text {
	    margin-bottom: 1rem;
	}		

}





#huka #main > .main {
    padding: 8em 5em 5em 5em;
}

	@media screen and (max-width: 1024px) {
		#huka #main > .main {
		    padding: 5em 3em ;
		}
	}

	@media screen and (max-width: 980px) {
		#huka #main > .main {
		    padding: 4em 3em ;
		}
	}

		@media screen and (max-width: 480px) {
		#huka #main > .main {
		    padding: 6em 1em 3em; 
		}
	}


/* Header(main visual) */

	#header {
		padding: 0 ;
		text-align: center;
	}

		#header.alt {
			padding: 0 ;
		}

		@media screen and (max-width: 980px) {
			#header.alt {
				margin-top:85px ;
			}
		}

		#header.alt #nav.only_sp{
			display: none;
		}

		@media screen and (max-width: 768px) {
			#header.alt .mv.only_sp{
				display: block;
			}
			#header.alt .mv.only_pc{
				display: none;
			}
		}


/* 1-お知らせ */

	/* 背景色*/
	#huka #news {
	    background-color: #f5f5f5;
	    color: #333;
	   	font-weight: 700;
    	font-family:'Noto Sans JP', serif;
    	margin-top: -10px;
	}

	.container{
		max-width: 860px;
		width: 100%;
		margin: 0 auto;
	}

	.news_con {
		padding: 0;
		margin: 0 auto;
		width: 100%;
		max-width: 1440px;
	}



/*  newsの設定  */
.news{
	font-family: 'Noto Sans JP', sans-serif;
}

/*ul.scroll {
    height: 600px;
    overflow: auto;
    padding-right: 1em;
}*/

.scroll::-webkit-scrollbar {
    border:1px solid #fff;
    width: 7px;
    height: 7px;
    border-radius: 10px;
}
.scroll::-webkit-scrollbar-thumb {
/*    background-color: #b2ced2;*/
    border-radius: 10px;
    background: rgb(178,206,210);
background: linear-gradient(0deg, rgba(0,134,194,1) 75%, rgba(178,206,210,1) 100%);
}


.news_con li{
	margin: 1em 0;
	color: #fff;
}
.news_con li:first-child{
	margin-top: 0;
}
#huka .news_con li h4{
	margin: 0;
	padding-bottom: 0.5em;
    font-weight: 500;
    color:#444 ;
    line-height: 1.3em;
}
#huka .news_con p.date {font-weight: 700; font-family: "Amiri", serif; color:#444; letter-spacing: 0.05em;}

.news_con .detail {line-height: 1.5;font-size: 0.9em; padding-left: 1em; color: #e3e3e3; margin-bottom: 0.5em;}

.news .mainarea.flex {
    display: flex;
    width: 100%;
    margin:0 auto;
}
.news .photo {
    width: 300px;
    margin-left: 20px;
    margin-right:inherit;
/*    display: inline-block;*/
}
.news .photo img {
    width: 100%;
    height: auto;
}
.news .overview {
    width: calc(100% - 340px);
/*    display: inline-block;*/
    vertical-align: top;
    text-align: left;
}
.news .overview p {
	line-height: 1.5em;
	font-size: 0.9em;
}

.news .flex.img_box{
	padding: 0 1.5%;
}

.news .flex.img_box img{
	margin: 0.5%;
    width: 49%;
}


/*text link*/
#huka #news a:hover {
    color: #cdb14c;
}

#huka #news span.text_uline a {
     color: #cdb14c; 
}
#news .text_uline a {word-break: break-all; color:#fff ;position: relative;text-decoration: none;}
.text_uline a:visited { color : #e95469;}

.text_uline a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background-color: #669ACC;
	transition: width 0.3s;
}
	#huka #news span.text_uline a{
		color: #cdb14c;
	}
.text_uline a:hover::after {
	width: 100%;
}

 /* 新着記事のみNEWマークを表示  */
    .news_con .new .date:after{
      display        : inline-block;       /* インラインボックス定義  */
      content        : "更新";              /* 表示する文字       */
      background     : #cdb14c;            /* 背景色            */
      color          : #ffffff;            /* 文字色            */
      font-weight    : bold;               /* 太字              */
      font-size      : 1.1em;                /* ベースの文字サイズ    */
      letter-spacing : -1px;               /* 文字間隔詰め       */
      line-height    : 1.2;                  /* 1行の高さ          */
      vertical-align : middle;                /* 基準の高さ位置      */
      margin         : 0 0 0.2em 0.5em;                  /* 外余白なし         */
      padding        : 0.25em 0.5em 0;                /* 反転時の内余白     */
      transform      : scale(0.6)          /* 文字サイズ変更      */
                       translateX(-30%);   /* 横位置調整        */
                                           /* ブリンクのアニメ指定   */
      animation      : newAnime .7s infinite alternate;
    }
    @keyframes newAnime {
       0% { color      : #cdb14c;          /* ブリンク時の文字色      */
            background : #ffffff;          /* ブリンク時の背景色      */
          }
     100% { color      : #ffffff;          /* ブリンク時の文字色      */
            background : #cdb14c;          /* ブリンク時の背景色      */
          }
    }

	.news_con .date .end{
	    font-size: 0.65em;
	    border: 1px solid #333;
	    margin-left: 1em;
	    padding: .05em .5em 0;
	    vertical-align: baseline;
		letter-spacing : -1px;
	}

/* 2-コメント */

	#huka #comment{
		background:#c7dff6 ;
	}

	@media screen and (max-width: 480px) {
	    #huka #main #comment.main {
	        padding: 4em 1em 3em;
	    }
	}

	#huka #comment .contents{
		margin: 0 auto;
	}

	#huka #comment .comment01,#huka #comment .comment02{
		width: 100%;
		max-width: 1024px;
		margin: 0 auto 5%;
	}

	#huka #comment .comment01,
	#huka #comment .comment02{
		padding: 4em;
		background: #fff;
	}
	@media screen and (max-width: 480px) {
			#huka #comment .comment01,
			#huka #comment .comment02{
				padding: 2em;
			}
	}

	#huka #comment div.com{
		width: 100%;
	    font-family: 'Noto Serif JP';
	    font-size: 1.15em;
	}


	#huka #comment div.com h3{
		text-align: center;
		margin-bottom: 1.5em;
	}
	#huka #comment div.com h3 span {
	    background: linear-gradient(transparent 50%, #96c3ef87 10%);
	    line-height: 1.8em;
	}

	#huka #comment div.com p{
		font-family: 'Noto Serif JP';
		font-size: 1.05em;
    	line-height: 2;
	}

	#huka #comment .comment02 li{
		margin: 2em auto;
    	border-bottom: 1px solid #ddd;
	}
	#huka #comment .comment02 li:last-child{
		margin-bottom:0;
    	border-bottom: none;
	}

	#huka #comment .comment02 li p{
		font-size: .85em;
		text-align: right;
		margin-top: .5em;
		margin-bottom: 2em;
	}
	@media screen and (max-width: 480px) {
		#huka #comment .comment02 li p span{
			display: block;
		}
	}





/* 2-本の紹介 */

	#main > #newbook {
    	background:#E6E6E6;
	}

	#huka #newbook .bg{
	}

	@media screen and (max-width: 480px) {
		#huka #newbook .bg {
		}
	}

	#huka #newbook .container{
    	margin: 0 auto;
		width: 100%;
		max-width: 1200px;
	}
		@media screen and (max-width: 768px) {
			#huka #newbook .container {
			    padding: 0;
			}
		}

			@media screen and (max-width: 480px) {
				#huka #newbook .container{
					padding: 0;
				}
			}

	#huka #newbook .container .shinkan{
		margin: 4em auto;
	}		

/* 共通　書籍情報 */

	#huka #newbook .calligraphy.flex_b{
		align-items: self-start;
	}

	@media screen and (max-width:768px) {
		#huka #newbook .calligraphy.flex_b{
			flex-direction: column;
		}
	}

	#huka .img_book img{
		width: 100%;
		max-width: 300px;
	}

	#huka .book{
			margin:0;
	    	width:calc(100% - (320px + 6em));
			text-align: left;
			font-family: 'Noto Sans JP', sans-serif;
			font-weight: 500;
			color: #333;
		}

		@media screen and (max-width:768px) {
			#huka .book{
				text-align: center;
				width: 75vw;
    			margin: 0 auto;				
			}
		}

			@media screen and (max-width:480px) {
				#huka .book {
			    	margin: 2em auto 0;
			    	width: 85vw;
			    }
			}

	#huka img.page {
		margin: 2% auto;
	    width: 100%;
	    max-width: 800px;
	    border: 1px solid #9f9f9f;
	}

		#huka .img_book{
			margin:0 3em 3em 3em;
		}
			@media screen and (max-width:768px) {
				#huka .img_book{
					margin:0 auto 3em;
				}
			}

		#huka .img_book a{
			display: block;
		}

		#huka .img_book a.button.primary{
			margin: 2em auto;
		}

		#huka .img_book img{
			box-shadow: #dbdbdb 3px 3px 6px;
			margin: 0 auto;
			width: 100%;
			max-width: 300px;
		}

		#huka .book ul.actions.special {
			justify-content: flex-start;
		}

		@media screen and (max-width: 1024px) {
			#huka #new_book .book ul.actions.special {
			    justify-content: space-around;
			}
		}
			@media screen and (max-width: 980px) {
				#huka .book ul.actions.special {
					justify-content: center;
				}
			}	
				@media screen and (max-width: 480px) {
					#huka ul.actions:not(.fixed) {
				    	width: 75vw!important;
    					margin: 0 auto;
					}
				}
	

		#huka .book h3 {
    		text-align: left;
    		font-size: 1.8em;
		}

			@media screen and (max-width: 980px) {
				#huka .book h3 {
					text-align: center;
					margin-left: inherit;
					margin-top: 0.5em;
				}			
			}

			@media screen and (max-width: 480px) {
				#huka .book h3 {
					font-size: 4.5vw;
					letter-spacing: 0;
				}			
			}

		#huka .book h3 + p{
			color: #333;
			font-family: 'Noto Serif JP';
			font-size: 1.15em;
		}	

			@media screen and (max-width: 480px) {
				#huka .book h3 + p{
					text-align: left;
					font-size: 1.05em;
				}	
			}		

	    #huka .book h3 + p + p {
			color: #333;
			font-family: 'Noto Serif JP';				    	
			font-size: 1.2em;
			line-height: 2;
		}						

		@media screen and (max-width: 768px) {
			#huka #new_book .book h3,
			#huka #new_book .book h3 + p + p {
				text-align: center;
			}
		}

			@media screen and (max-width: 480px) {
				#huka #new_book .book h3 + p + p {
					text-align: left;
					font-size: 1.05em;
				}
			}			



#huka p.heading01 {
	font-size: 1.75em;
	font-weight: 700;
}

.heading01 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5em;
	text-align: center;
}

.heading01::before,
.heading01::after {
	content: '';
	width: 2px;
	height: 40px;
	background-color: #000;
}

.heading01::before {
	margin-right: 30px;
	transform: rotate(-35deg)
}
.heading01::after {
	margin-left: 30px;
	transform: rotate(35deg)
}



	#huka #newbook .shinkan img.only_pc{
		max-width: 600px;
		width: 100%;
		margin: 0 auto;
	}
@media screen and (max-width: 480px) {
	#huka #newbook .shinkan img.only_sp{
		width: 100%;
		margin: 0 auto;
	}
}

	@media screen and (max-width: 480px) {
		#huka #newbook .calligraphy .img_book img {
			width: 100%;
			max-width: 240px;
		}	
	}


/* 3 動画 */

	#main > #movie{background:#d7d7d7;}

	#huka #movie .bg{
    	padding: 0em 5em 5em 5em;
	}
		@media screen and (max-width: 980px) {
			#huka #movie .bg{
    			padding: 0em 2em 5em 2em;
			}
		}
			@media screen and (max-width: 768px){
				#huka #movie .bg {
    				padding: 0em 1em 5em 1em;
				}
			}

	#huka #movie .container {
		max-width: 1200px;
		margin: 0 auto;
	}

		@media screen and (max-width: 480px){
			#huka #movie .container {
				width: 75vw;
			}
		}


	#huka #movie .movie_wrap{
		max-width: 980px;
    	width: 100%;
    	margin: 0 auto 1em;
    	text-align: center;
		}

		@media screen and (max-width: 980px) {
			#huka #movie .movie_wrap {
			    padding: 3em ;
			}
		}

			@media screen and (max-width: 768px){
				#huka #movie .movie_wrap {
			    	padding:0;
				}
			}

	#huka #movie .movie_inner{
		max-width: 540px;
		width: 100%;
		margin: 0 auto 4em;
	}

	#huka #movie h3{
	    margin: 0 0 1em 0;
	    text-align: center;
	}

		@media screen and (max-width: 480px){
			#huka #movie h3{
			    font-size: 4vw;
			}
		}	

	#huka #movie h3 > span{
		display: block;
		font-weight: 500;
		padding: 0 ;
		font-family: 'Noto Sans JP';		
	}

	#huka #movie h3 + p {
    	text-align: center;
	}	

	#huka #movie .movie img {
    	margin: 0 auto 2vw;
	}
	@media screen and (max-width: 480px){
		#huka #movie .movie img {
    		width: 80%;
		}
	}			

	#huka #movie .button{
		font-size: 1em;
		width: 50%;
		display: block;
		margin: 0 auto;
	}	

		@media screen and (max-width: 480px){
			#huka #movie .button{
				font-size: 0.9em;
			}	
		}		







/*4-愛用品・写真など*/

/*	#main > #favorite{ background:#fff;}*/

#huka #main #favorite.main {
    padding: 0;
}

#huka #favorite .bg {
    color: #fff;
    padding: 8em 1em 5em 1em;
}
	@media screen and (max-width: 480px) {
		#huka #favorite .bg {
		    padding: 6em 1em 3em;
		}
	}
.favorite_wrap{
	display: flex;
	align-items: center;
	height: 740px;
	overflow: hidden;
}

.slideshow {
  display: flex;
  animation: loop-slide 60s infinite linear 1s both;
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.slide-paused:hover .slideshow {
  animation-play-state: paused;
  cursor: pointer;
}

.slide-paused:hover {
  cursor: pointer;
}

.content {
  width: 700px;
  height: 700px;
}

	.essay{
		color: #333;
		max-width: 1024px;
		width: 100%;
		margin: 0 auto;
		padding: 6em 3em 0;
	}

		@media screen and (max-width: 1024px) {
			.essay{
					padding: 4em calc((100% - 860px) / 2);
					font-size: 1.2em;
			}
		}
			@media screen and (max-width: 480px) {
			    .essay {
			        padding: 4em calc((100% - 860px) / 2) 0;
			        width: 85vw;
			        font-size: 1.05em;
			    }
			}

	.essay_box {
		/* 方眼紙模様に必須のスタイル */
		background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f7edca calc(100% - 1px)),
		                  linear-gradient(90deg, transparent calc(100% - 1px), #f7edca calc(100% - 1px));
		background-size: 20px 20px;
		background-repeat: repeat;
		background-position: center center;
		border: 2px solid #cdb14c;

		/* 以下任意のスタイル */
		padding: 40px;
		font-family: 'Noto Serif JP';
		color:#5f4b24;
		font-weight: 500;
	}
			@media screen and (max-width: 480px) {
			    .essay_box {
			        padding: 20px;
			    }
			}

	#huka .essay_box p{
		line-height: 2em;
	}

	#huka .essay_box p.title span {
		font-size: 1.2em;
		font-weight: bold;
		line-height: 1em;
	}


/* 5-著者プロフィール */


	#huka #prof .container {
		max-width: 1024px;
		width: 100%;
		margin: 0 auto;
	}

	#huka #prof h4{
		font-size: 1.35em;
		margin: 0 0 1.5em 0;
	}

    #huka #prof .flex_b{
    	justify-content: center;
    	margin-bottom: 2em;
    	align-items: center;
    	flex-direction: row-reverse;
    }
	    @media screen and (max-width: 1024px){
		    #huka #prof .flex_b{
		    	width: 100%;
		    	max-width: 600px;
		    	position: relative;
		    	margin: 100px auto 0;
		    	justify-content: flex-end;
		    }
		}

    #huka #prof .flex_b img.lead{
    	margin-left: -120px;
    }

	    @media screen and (max-width: 1024px){
	    	#huka #prof .flex_b img.lead{
		    	margin-left: initial;
		    	position: absolute;
		    	top:-60px;
		    }
	    }

	    @media screen and (max-width: 768px){
	    	#huka #prof .flex_b img.lead{
		    	width: 100%;
		    	max-width: 530px;
		    }
		    #huka #prof .flex_b img.photo{
		    	width: 100%;
		    	max-width: 600px;
		    }
	    }
/*	#huka #prof .flex_img{
	    	margin: 0 auto;
	    }

	#huka #prof .flex_b .flex_img{
		max-width: 510px;
		width: 100%;
	}

		@media screen and (max-width: 480px){
			#huka #prof .flex_b .flex_img{
				width: 80vw;
			}
		}*/

	#huka #prof .prof_txt{
		width:100%;
		margin:40px 0 0 0 ;
	}
		@media screen and (max-width: 768px){
		    #huka #prof .prof_txt{
		    	margin: 40px auto 0;
		    	width: 80vw;
		    }
		}


/*	#huka #prof .flex_b{
		justify-content: center;
	}*/

		@media screen and (max-width: 480px){
			#huka #prof .flex_b.row{
				padding: 0 10vw;
			}
		}

	#huka #prof .flex_b.row .flex_img{
		max-width: 340px;
		width: 100%;
	}

		@media screen and (max-width: 480px){
			#huka #prof .flex_b.row .flex_img{
				width: 60vw;
			}
		}

	#huka #prof .flex_b.row .flex_txt{
		width:calc(100% - 380px);
		margin:0 40px 0 0;
	}
		@media screen and (max-width: 768px){
	    #huka #prof .flex_b.row .flex_txt{
	    	margin: 0 auto;
	    	width: 75vw;
	    }
	}

			@media screen and (max-width: 480px){
			    #huka #prof .flex_b.row .flex_txt{
			    	width: 80vw;
			    }
			}

	#huka #prof .flex_b .flex_img *{
		width: 100%;
	}


/*6-活動の軌跡*/

	#huka #main #activity.main {
	    padding: 0;
	    background:#669ACC;
	    margin: 0 auto;
	}

	#huka #main #activity .container{
		max-width: 1024px;
		width: 100%;
	}



	#huka #activity h2 + p {
	    text-align: center;
	    margin-bottom: 2em;
	    font-size: 1em;
	    font-weight: 500;
	}

	#huka #activity .bg {
	    color: #fff;
	    padding: 8em 1em 5em 1em;
	    background-size: auto;
	}
		@media screen and (max-width: 480px) {
			#huka #activity .bg {
			    padding: 6em 1em 3em;
			    background-size: 150%;
			}
		}

	#huka #activity .timeline {
	  list-style: none;
	}
	#huka #activity .timeline > li {
	  margin-bottom: 60px;
	}

	#huka #activity .timeline h4 {
		margin: 40px 0 0 0;
	    font-size: 1.1em;		
	    font-weight: 400;
	    line-height: 1.1em;
	    color: #f3f2eb;
	    letter-spacing: initial;
	}

	/* for Desktop */
	@media ( min-width : 375px ){
	  #huka #activity .timeline > li {
	    overflow: hidden;
	    margin: 0;
	    position: relative;
	  }
	  #huka #activity p.timeline-date {
	    width: 7em;
        float: left;
        margin: 40px 0 0 0;
        line-height: 1;
        color: #f3f2eb;
        font-family: "Amiri", serif;
        letter-spacing: 0.05em;
        font-size: 1.05em;
	  }
	  #huka #activity .timeline-content {
	    width: calc(100% - (7em + 10px));
        float: left;
        border-left: 8px #f3f2eb solid;
        padding-left: 30px;
	  }
	  #huka #activity .timeline-content:before {
	    content: '';
        width: 18px;
        height: 18px;
        background: #669acc;
        position: absolute;
        left: 7.05em;
        top: 40px;
        border-radius: 100%;
        border: solid 5px #f3f2eb;
	  }
	}

/*6-キャンペーン*/

	#huka #main #campaign.main {
	    padding: 0;
	    margin: 0 auto;
	}

	#huka #main #campaign .container{
		max-width: 1024px;
		width: 100%;
	}
	#huka #campaign .bg {
	    padding: 8em 1em 5em 1em;
	    background-size: auto;
	}

	.oubo{
		overflow: auto;
	    display: block;
	    width: 100%;
	    height: auto;
	    margin: 0 auto;
	    padding: 0;
	    background-position: bottom;
	    background-repeat: no-repeat;
	}
	.oubo h3{
	    margin: 50px 0 5px 0;
	    padding: 0.4em;
	    font-size: 1.1rem;
	    font-weight: bold;
	    line-height: 1.5;
	    background-color: #669acc;
	    color: #fff!important;
	    -webkit-background-size: 7px 7px;
	    display: inherit !important;
	}

	tbody{
		text-align: left;
	   
	}

	table td,table th{
	    line-height: 1.5;
	    padding: 0.75em 0.75em !important;
	}


	table tr{
	    border-bottom: 2px solid #fff;
	}

	table td{
		font-weight: bold;
	    background-color:#ccdff1;
	    width: 20%;
	}

	table th{
	    background-color:#f0f7fd;
	}

	table th a{
	    font-weight: 600;
	    color: #f13d39;
	}

		@media screen and (max-width: 768px){
			#iki .oubo h3{ font-size: 1.3rem;}

	        table td, table th {
	          display: block;
	          width: 100%;
	        }
	    }

	    	@media screen and (max-width: 480px){
					.camp_img img{ width: 75vw;margin: 0 auto}
	    	}
	#huka #main #campaign .button.primary {
		    margin: 2em auto 0;
    		display: block;
    }

   #huka #main #campaign div.com {
	    width: 100%;
	    font-family: 'Noto Serif JP';
	    font-size: 1.15em;
	    margin-top: 4em;
	}
	#huka #main #campaign div.com li {
		margin: 0 auto 2em;
	    border: 1px solid #ccdff1;
	    padding: 2em;
	}
#huka #main #campaign div.com li p {
    font-size: .85em;
    text-align: right;
    margin-top: .5em;
    line-height: 2;
}

    .strikethrough {
      text-decoration: line-through;
    }

/* 7-パンダレーベルとは？ */

	#huka #about .bg{
    	padding: 8em 1em 5em 1em;
    	background: #F3F2EB;
	}

		@media screen and (max-width: 980px) {
			#huka #about .bg{
    			padding: 3em;
			}
		}
			@media screen and (max-width: 768px){
				#huka #about .bg {
    				padding: 3em;
				}
			}

				@media screen and (max-width: 480px){
					#huka #about .bg {
	    				padding: 4em 2em;
					}
				}

	#huka #about .container {
		max-width: 1024px;
		margin: 0 auto;
    	padding: 4em ;
    	background: #fff;
    	border-radius: 20px;
    	text-align: center;
	}

		@media screen and (max-width: 480px){
			#huka #about .container {
				padding: 3em 1em;
			}
		}

	#huka #about .about-wrap{
		border-radius: 10px;
		max-width: 980px;
    	width: 100%;
		}

		@media screen and (max-width: 980px) {
			#huka #about .about-wrap {
			}
		}

			@media screen and (max-width: 768px){
				#huka #about .about-wrap {
			    	padding:0;
				}
			}

		#huka #about .label{
			width: 34em;
			margin: 0 auto 1.8em;
		}

		#huka #about .label dl {
		    display: table;
		    width: 100%;
		    margin: 0 auto;
		    table-layout: fixed;
		    padding-bottom: 0.5rem;
		}
		#huka #about .label dt {
		    display: table-cell;
		    vertical-align: top;
		    width: 5em;
		    padding: 0 1em 0 0;
		    font-size: 1.1rem;
		    line-height: 1.3;
		}
		#huka #about .label dd {
		    display: table-cell;
		    vertical-align: top;
		    font-size: 0.9rem;
		    line-height: 2;
		}
		#huka #about .label dd h4 {
		    font-weight: 600;
		    font-size: 1.15rem;
		    margin-bottom: 0.2rem;
		    line-height: 1.3;
		    text-align: left;
		}

		#huka #about .text_uline a{
		    position: relative;
		}
		#huka #about .label dd p {
	        text-align: left;
	    }
			@media screen and (max-width: 768px) {
				#huka #about .label{
					width: 38em;
				}
/*			    #huka #about .label dt {
			        font-size: 0.7rem;
			        width: 150px;
			    }
			    #huka #about .label dd {
			        font-size: 0.7rem;
			        line-height: 1.5;
			    }
			    #huka #about .label dd h4 {
			        font-weight: 600;
			        font-size: 0.85rem;
			    }
			    #huka #about .label dd p {
			        font-size: 0.7rem;
			    }*/
			}

				@media screen and (max-width: 480px) {
					#huka #about .label{
						width: 75vw;
					}
				    #huka #about .label dt {
				        display: block;
				        line-height: 2.3;
				    }
				    #huka #about .label dd {
				        display: block;
				    }
				    #huka #about .label dd h4 {
				        margin-bottom: 0.4rem;
				    }
				}

    #huka #about .about-wrap .flex_b{
    	justify-content: center;
    	align-items: center;
    }
    	@media screen and (max-width: 480px){
    		#huka #about .about-wrap .flex_b{
    			display: flex;
    		}
    	}

	#huka #about .about-wrap .flex_img {
			max-width: 240px;
			width: 30%;
	}
		@media screen and (max-width: 480px){
			#huka #about .about-wrap .flex_img {
					width: 30vw;
					}
		}

	#huka #about .about-wrap .flex_img *{
		width: 100%;
	}


	#huka #about h3 span{
		line-height: 2;
	    font-weight: 600;
	    color: #fff;
	    padding: 0.25em;
	    font-size: inherit;
	    border-radius: 6px;
	    background:linear-gradient(90deg, rgb(241 88 129), rgb(245 57 57) 50%, rgb(239 139 90) 86%, rgb(247 221 122));
	}
		@media screen and (max-width: 480px){
			#huka #about h3{
				font-size: 4.5vw;
			}
			#huka #about h4{
				font-size: 4.5vw;
			}
			#huka #about span.text_uline{
				display: block;
			}
		}

/* パンダエフェクト */

.poyoyon {animation: poyoyon 3s ease-in-out infinite;}

@keyframes poyoyon {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.99, 0.99) translate(0, 2px);
  }
  30% {
    transform: scale(1.0, 1.0) translate(0, 4px);
  }
  50% {transform: scale(0.99, 1.0) translate(0, -4px);
  }
  70% {
    transform: scale(1.0, 0.98) translate(0, 2px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}