@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');
@import url('https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css');


@import url('https://fast.fonts.net/lt/1.css?apiType=css&c=49f0e321-ce81-46f5-b17c-5e5b726a7209&fontids=1281558');
    @font-face{
        font-family:"Naive Inline W00 Light";
        src:url("../Fonts/1281558/04671923-3957-4fe8-b7b2-420a52cbd1f9.eot?#iefix");
        src:url("../Fonts/1281558/04671923-3957-4fe8-b7b2-420a52cbd1f9.eot?#iefix") format("eot"),url("Fonts/1281558/9ed32b47-e5ea-405f-a2fe-83d2fd14f7ba.woff2") format("woff2"),url("../Fonts/1281558/a8a2dc26-3635-4589-86f8-95a9cb4a1c98.woff") format("woff"),url("Fonts/1281558/b50c135b-bf11-4b26-a6d9-7d8b6fc46add.ttf") format("truetype");
    }

/* =============================================================================
   clearfix
   ========================================================================== */
.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/* IE/Mac */
.clearfix{
	display: inline-table;
	zoom: 1;
}
/* Hide from IE/Mac, apply to IE/Win \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}

.clear {
	clear: both;
	display: block;
}



/* =============================================================================
   デザイン基本
   ========================================================================== */
body {
   margin: 0;
   overflow-y: scroll; /* 2 */
	font-family: 'Noto Sans Japanese', "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;}

html,body{
   min-width:1170px;
}

ul, ol, dl {
	list-style-type: none;
}

h1,h2,h3,h4,h5,p,ol,ul,li,dl,dt,dd{
	margin:0;
	padding:0;
}

p{
	padding-top:0.5em;
}

img {
   vertical-align:bottom
}






.top_picup01_wrap{
   position: relative;
	width: 100%;
   max-width: 1400px;
	margin: 0 auto;
}


.top_picup01_wrap2{
	margin: 0 -100%;
	padding: 0 100%;
}
.top_page_title_wrap{
	margin: 0 -200px;
}

.v20_i01{
   position: absolute;
   width: 35%;
   top: 24%;
   right: 0;
}

.img100 img{
   width: 100%;
   height: auto;
}



/* --- 全体のBOX定義 ---------------------------------------- */
.kvbox {
  position   : relative;
  max-width  : 100%;
  overflow   : hidden;
}




/* --- 背景の指定 ------------------------------------------- */
.bg-apple .bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 28s infinite;   /* 4画像 × 各7s = 10s */
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.bg-apple .src1 {
  background-image : url("../images/top/visual_14.jpg");   /* 背景の画像を指定 */
	background-position:center;
	background-repeat:no-repeat;
}
.bg-apple .src2 {
  background-image : url("../images/top/visual_13.jpg");   /* 背景の画像を指定 */
  animation-delay  : 7s;
	background-position:center;
	background-repeat:no-repeat;
}
.bg-apple .src3 {
  background-image : url("../images/top/visual_12.jpg");   /* 背景の画像を指定 */
  animation-delay  : 14s;
	background-position:center;
	background-repeat:no-repeat;
}
.bg-apple .src4 {
  background-image : url("../images/top/visual_11.jpg");   /* 背景の画像を指定 */
  animation-delay  : 21s;
	background-position:center;
	background-repeat:no-repeat;
}



@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}





/* =============================================================================
   clearfix
   ========================================================================== */
.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/* IE/Mac */
.clearfix{
	display: inline-table;
	zoom: 1;
}
/* Hide from IE/Mac, apply to IE/Win \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}

.clear {
	clear: both;
	display: block;
}

/* ---------------------------------------------------------------------------
   フォント色
   ---------------------------------------------------------------------------*/

.txt_red1{
	color:#C6002F;
}

.txt_red2{
	color:#CC5F7D;
}

.txt_pink1{
	color:#F30;
}

.txt_pink2{
	color:#E50065;
}

.txt_pink3{
	color:rgba(255,133,172,1.00);
}

.txt_blue1{
	color:#03F;
}

.txt_blue2{
	color:#09F;
}

.txt_green1{
	color:#396;
}

.txt_green2{
	color:#00A6A3;
}

.txt_green3{
	color:#7FBF39;
}

.txt_gray1{
	color:#999;
}

.txt_Purple1{
	color:#90C;
}

.txt_orange1{
	color:#F60;
}

.txt_yellow{
	color:rgba(245,236,153,1.00);
}


/* ---------------------------------------------------------------------------
   フォントサイズ
   ---------------------------------------------------------------------------*/

.fsize50{
	font-size:50%;
}

.fsize60{
	font-size:60%;
}

.fsize70{
	font-size:70%;
}

.fsize80{
	font-size:80%;
}

.fsize90{
	font-size:90%;
}

.fsize120{
	font-size:120%;
}


/* ---------------------------------------------------------------------------
   全般
   ---------------------------------------------------------------------------*/
html,body{
   min-width:1120px;
	 overflow: auto;
}

body{
	/*background-color:rgba(255,211,211,1.00);*/
	background-color:rgba(69,58,93,1.00);
}

.sage{
    padding-left: 1em; 
    text-indent: -1em; 
}

.sage1_5{
    padding-left: 1.5em; 
    text-indent: -1.5em; 
}

.sage2{
    padding-left: 2em; 
    text-indent: -2em; 
}

.sage3{
    padding-left: 3em; 
    text-indent: -3em; 
}

ul, ol, dl {
	list-style-type: none;
}

h1,h2,h3,h4,h5,p,ol,ul,li,dl,dt,dd{
	margin:0;
	padding:0;
}

p{
	padding-top:10px;
}

img {
   vertical-align:bottom
}

::selection {
	background: #fad3d3;
}
::-moz-selection {
	background: #fad3d3;
}


/* ---------------------------------------------------------------------------
   テンプレート
   ---------------------------------------------------------------------------*/

#upper{
	position:relative;
	width:100%;
  background-color: rgba(255,255,255,1.00);
	background-repeat:repeat-x;
}


.spr{
	background-color: rgba(255,255,255,1.00);
	box-sizing: border-box;
	display: flex;
}

.spr .center_box{
	width: min(100%, 1900px);
	position: relative;
   margin-bottom: 5%;
}

.spr .center_box .release023{
   position: absolute;
   width: 36%;
   top: 10%;
   left: 13%;
}

.spr .center_box .k01{
   position: absolute;
   top: -6px;
   left: 38px;
   width: 80px;
}

.spr .center_box .k02{
   position: absolute;
   top: -6px;
   right: 38px;
   width: 80px;
}

.spr .center_box .k03{
   position: absolute;
   bottom: -6px;
   left: 38px;
   width: 80px;
}

.spr .center_box .k04{
   position: absolute;
   bottom: -6px;
   right: 38px;
   width: 80px;
}

.spr .k_box{
	position: relative;
	background-color: rgba(0,0,0,1.00);
	align-self: stretch;
	flex-grow: 1;
  background-image: url("../images/top/visual_22_bg.jpg");
  background-position: center;
  background-size:auto 100%;
}


.bg-apple{
	position: relative;
	width:98%;
	margin: auto;
  background-color: rgba(205,227,222,1.00);
  background-image: url("../images/top/visual_21_bg.jpg");
  background-position: center;
  background-size:auto 100%;
}



.logo-5th{
	position: absolute;
	width: 200px;
	height: auto;
	top: 43px;
	right: 13px;
}

	.logo-5th img{
		width:100%;
		height:auto;
	}

.topic_wrap{
   width: 100%;
	margin: auto;
   padding: 10px 0 10px 0;
   margin-top: 0px;
}

.topics-inner{
	position:relative;
	width:1000px;
	height:130px;
	margin:auto;
}

	.topics-inner li{
		float:left;
		width:315px;
		height:130px;
		padding:0 9px 0 9px;
	}
	
	.topics-inner li img{
		width:100%;
		height:auto;
	}

.visual-mobile{
	display:none;
}

.logo{
	position:absolute;
	width: 58%;
   left: 50%;
   transform: translateX(-50%);
   bottom: -10%;
	z-index:100;
	text-align: center;
}

.visual_under{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 10px;
	background-image: url("../images/top/visual_21_under.png");
	background-repeat: repeat-x;
	background-position: bottom center;
}


#center{
	position:relative;
	overflow:hidden;
	width:100%;
	background-color:rgba(255,255,255,1.00);
}


.menu_wrap{
   position: relative;
   padding: 10px 0;
}

.menu-inner{
	width:1028px;
	height:58px;
	margin:auto;
}

	.menu-inner li{
		float:left;
	}


.topics-inner-mobile{
	display:none;
}



.info-inner{
	width:1028px;
	margin:auto;
	margin-top:30px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 40px;
}

.info-inner-w01{
	position:relative;
	overflow:hidden;
	width:408px;
}
	
.info-inner-w01-pv{
	position: absolute;
	width: 290px;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
   -webkit- transform: translateY(-50%) translateX(-50%);
   margin: auto;
}
		
		.info-inner-w01-pv img{
			width:100%;
			height:auto;
		}
	
	.info-inner-w02{
		width:310px;
	}
	
	.info-inner-w03{
		width:310px;
	}
	
	
	.info-inner-w02-index{
	}
	
	.info-inner-w02-index img{
		height:20px;
		width:auto;
	}


	.info-inner-w03-index{
	}
	
	.info-inner-w03-index img{
		height:20px;
		width:auto;
	}
	
	
	
	.news-waku{
		position:relative;
		overflow:hidden;
		width:277px;
		height:300px;
		border-top:rgba(131,104,110,1.00) 2px dotted;
		border-bottom:rgba(131,104,110,1.00) 2px dotted;
	}
	
	.news-waku-content{
		position:relative;
		overflow:auto;
		width:90%;
		height:270px;
		margin:15px auto 15px auto;
		font-family: 'Noto Sans Japanese', "游ゴシック", YuGothic, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	}
	
		.news-waku-content ul{
			list-style-type:none;
		}

		.news-waku-content li{
			margin-bottom:10px;
			padding-bottom:10px;
			border-bottom: rgba(105,105,105,1.00) 1px dotted;
			font-size:85%;
			color:rgba(105,105,105,1.00);
			
		}
	
		.news-waku-content a{
			color:rgba(105,105,105,1.00);
			text-decoration:none;
		}
		
		.news-waku-content a:hover{
			text-decoration:underline;
		}
		
		.news-waku-content a:visited{
			color:rgba(105,105,105,1.00) !important;
		}
		
		.news-waku-content .day{
			color: #FE0068;
			font-weight:bold;
		}




	.twitter-waku{
		position:relative;
		overflow:hidden;
		width:277px;
		height:300px;
		border-top:rgba(131,104,110,1.00) 2px dotted;
		border-bottom:rgba(131,104,110,1.00) 2px dotted;
	}
	
	.twitter-waku-content{
		position:relative;
		overflow:auto;
		width:90%;
		height:270px;
		margin:15px auto 15px auto;
	}

	
	
#fooder{
	width:100%;
}



.fooder-link-inner{
	position:relative;
	overflow:hidden;
	width:630px;
	margin:32px auto 0 auto;
}

	.fooder-link-inner li{
		width:200px;
		height:60px;
		padding:0 5px 5px 5px;
		float:left;
	}
	
	.fooder-link-inner li img{
		width:100%;
		height:auto;
	}
	
#copy{
	width:200px;
	text-align:center;
	font-family: 'Noto Sans Japanese', "游ゴシック", YuGothic, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight:400;
	font-size:60%;
	color:rgba(255,255,255,1.00);
	margin:20px auto 50px auto;
	letter-spacing:2px;
}


#mobileHeader{
	display:none;
}


.stylePc{
	display:block;
}

.styleMobile{
	display:none;
}


/* 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   スマホ版
   〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 */

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


html,body{
	min-width:100%;
	max-width:100%;
  overflow: hidden;

}


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




.top_picup01_wrap{
  position: relative;
  width: 100%;
  background-color: rgba(253,233,235,1.00);
  z-index: 990;
}

.top_page_title_wrap{
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: auto;
  margin-bottom: 0;
  background-color: rgba(189,189,189,1.00);
}



/* --- 全体のBOX定義 ---------------------------------------- */
.kvbox {
  position   : relative;
  max-width  : 100%;
  overflow   : hidden;
}




/* --- 背景の指定 ------------------------------------------- */
.visual-mobile .bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 42s infinite;   /* 4画像 × 各7s = 10s */
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.visual-mobile .src1 {
  background-image : url("../images/top/visual_13m.jpg");   /* 背景の画像を指定 */
	background-position:center;
	background-repeat:no-repeat;
	background-size: cover;
}
.visual-mobile .src2 {
  background-image : url("../images/top/visual_12m.jpg");   /* 背景の画像を指定 */
  animation-delay  : 7s;
	background-position:center;
	background-repeat:no-repeat;
	background-size: cover;
}
.visual-mobile .src3 {
  background-image : url("../images/top/visual_11m.jpg");   /* 背景の画像を指定 */
  animation-delay  : 14s;
	background-position:center;
	background-repeat:no-repeat;
	background-size: cover;
}
.visual-mobile .src4 {
  background-image : url("../images/top/visual_13m.jpg");   /* 背景の画像を指定 */
  animation-delay  : 21s;
	background-position:center;
	background-repeat:no-repeat;
	background-size: cover;
}
.visual-mobile .src5 {
  background-image : url("../images/top/visual_12m.jpg");   /* 背景の画像を指定 */
  animation-delay  : 27s;
	background-position:center;
	background-repeat:no-repeat;
	background-size: cover;
}
.visual-mobile .src6 {
  background-image : url("../images/top/visual_11m.jpg");   /* 背景の画像を指定 */
  animation-delay  : 34s;
	background-position:center;
	background-repeat:no-repeat;
	background-size: cover;
}


@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}






#mobileHeader{
	display:block;
	position:relative;
	width:100%;
	height:50px;
	background-color: rgba(180,174,195,1.00);
	border-bottom: rgba(203,216,245,1.00) 1px solid;
}



	
#mobileMenu{
	display:block;
	position:fixed;
	z-index:2000;
	top:0;
	left:0;
	height:50px;
	width:100%;
	background-color:#FF86A6;
}

	#mobileMenu .logo{
		position:absolute;
		width:150px;
		height:auto;
		z-index:2100;
		top:10px;
		left:10px;
	}
	
	#mobileMenu  .btn{
		width:150px;
		float:right;
	}

	#mobileMenu img{
		width:100%;
		height:auto;
	}
	

	#mobileHeader .logo{
	position: absolute;
	width: 202px;
	height: 35px;
	z-index: 2100;
	left: 3px;
	top: -10px;
	}
	
	#mobileHeader .logo img{
		width:100%;
		height:auto;
	}




/* ---------------------------------------------------------------------------
   テンプレート
   ---------------------------------------------------------------------------*/

#upper{
	position:relative;
	overflow:hidden;
	width:100%;
	height:auto;
	background-image:url(../images/top/bg_01.jpg);
	background-repeat:repeat-x;
}


.bg-apple{
	display:none;
}

.visual-mobile{
	display:block;
	position:relative;
	overflow:hidden;
	width:100%;
}

	.visual-mobile img{
		width:100%;
		height:auto;
	}


.topic_wrap{
   display: none;
}

.topics-inner-mobile_wrap{
   padding: 5px 0;
   /*background-color: rgba(255,221,212,1.00);*/
   margin-bottom: 20px;
}

.topics-inner-mobile{
	display:block;
	position:relative;
	width:80%;
	height:auto;
	margin:auto;
}

	.topics-inner-mobile li{
		width:100%;
		height:auto;
		padding:5px 0 5px 0;
	}
	
	.topics-inner-mobile li img{
		width:100%;
		height:auto;
	}


.v20_i01{
   position: absolute;
   width: 40%;
   top: 1%;
   right: 0;
}


#center{
	position:relative;
	overflow:hidden;
	width:100%;
	background-color:rgba(255,255,255,1.00);
}

.menu-inner{
	display:none;
}




.info-inner{
	position:relative;
	width:90%;
	margin:auto;
	display: block;
}

	.info-inner-w01{
		position:relative;
		float:none;
		width:100%;
		height:auto;
		margin:auto;
	}


	.info-inner-w01-pv{
		width: 75%;
	}
		
		.info-inner-w01-pv img{
			width:100%;
			height:auto;
		}
	
		
	.info-inner-w02{
		width:100%;
		margin:auto;
		margin-top:20px;
		margin-bottom:40px;
}
	
	.info-inner-w03{
		width:100%;
		margin:auto;
		margin-bottom:40px;
	}
	
	
	.info-inner-w02-index{
	}
	
	.info-inner-w02-index img{
		height:30px;
		width:auto;
	}


	.info-inner-w03-index{
	}
	
	.info-inner-w03-index img{
		height:30px;
		width:auto;
	}
	
	
	
	.news-waku{
		width:90%;
		height:300px;
		margin:auto;
		margin-top:10px;
		border-top:rgba(131,104,110,1.00) 2px dotted;
		border-bottom:rgba(131,104,110,1.00) 2px dotted;
}



	.twitter-waku{
		width:90%;
		height:300px;
		margin:auto;
		margin-top:10px;
		border-top:rgba(131,104,110,1.00) 2px dotted;
		border-bottom:rgba(131,104,110,1.00) 2px dotted;
}
	
	
#fooder{
   position: relative;
	width:100%;
	height:auto;
}



.fooder-link-inner{
	position:relative;
	overflow:hidden;
	width:90%;
	margin:32px auto 0 auto;
}

	.fooder-link-inner li{
		width:200px;
		height:60px;
		margin:auto;
		padding:0 0 15px 0;
		float:none;
	}
	
	.fooder-link-inner li img{
		width:100%;
		height:auto;
	}
	
#copy{
	width:200px;
	text-align:center;
	font-family: 'Noto Sans Japanese', "游ゴシック", YuGothic, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight:400;
	font-size:60%;
	color:rgba(105,105,105,1.00);
	margin:20px auto 50px auto;
	letter-spacing:2px;
}











.stylePc{
	display:none;
}

.styleMobile{
	display:block;
}





}