@charset "UTF-8";
a, article, body, dd, div, dl, dt, em, form, footer, header, h1, h2, h3, h4, h5, h6, html, i, iframe, img, label, legend, li, nav, ol, p, section, main, span, table, tbody, tfoot, thead, time, tr, th, td, ul, video, address {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  vertical-align: baseline;
  white-space: normal;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  line-height: 1.6;
  text-align: left; }

textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  line-height: 1.6;
  text-align: left; }

article, footer, header, nav, section, main {
  display: block; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

body {
  margin: 0 auto;
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8em;
  font-family: 'Roboto','Nunito',-apple-system, BlinkMacSystemFont, sans-serif;
  color: #0c0c0c;
  height: 100%; }

sup, sub {
  font-size: 70%; }

/* IE8〜11はメイリオ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  body {
    font-size: 14px;
    font-family: 'Segoe UI', Meiryo, sans-serif; } }

table {
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  border: none;
}
* {
  box-sizing: border-box; }
#wrapper {
  max-width: 100%;
  margin: 0 auto;
}

/* 文字サイズ指定
====================================================*/
html{
    font-size: 62.5%;
}
body{
    font-size:1.6rem;/* 16px*/
    line-height: 2;
}
h1 {
    font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
    line-height: 1.3;
}
h2 {
    font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    line-height: 1.3;
	font-weight: bold;
}
@media (min-width: 1200px) {/* 1200px以上*/
    h1 {
        font-size: 3.6rem;/* 36px*/
    }
    h2 {
        font-size: 3.6rem;/* 24px*/
    }
}
@media screen and (max-width: 640px) {/* 640px以下*/
    body{
    	line-height: 2;
		}
    h1{
        font-size: 2.4rem;/* 24px*/
    }
    h2 {
        font-size: 2.4rem;/* 20px*/
    }
}


/* header
====================================================*/
#header {

/*  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;*/
	align-items: center;
	position: relative;
	top: 0;
	z-index: 1001;
	padding: 10px 0;
	max-width: 1000px;
	margin: 0 auto;
	overflow: hidden;

}
#header #lgo {
    max-width: 1000px;
    margin-left: 15px;
}
#header #lgo a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
	color: #000000;
}
#header #lgo a img{
	margin: 0;
	width: 200px;
}

/* footer
====================================================*/
#footer {
	padding-bottom: 80px;
	margin-top: 0;
	border-top: 1px solid #111;
	padding-top: 10px; 
}
#footer .copy {
	text-align: center;
	font-size: 11px;
	margin-bottom: 20px; 
}
#footer .f-set {
  	display: -ms-flexbox;
	display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center; }

#footer .f-set #fLeft {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center; }

#footer .f-set #fLeft .f_logo {
	width: 80px;
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid #111;
}
#footer .f-set #fLeft .f_nav {
    font-size: 9px;
}
#footer .f-set #fLeft .f_nav li a {
    outline: none;
    color: #898989;
    text-decoration: underline;
}
#footer .f-set #fRight img {
    width: 110px;
}

/* pagetop
====================================================*/

@media screen and (min-width: 781px) {
	#pageTop {
		position: fixed;
		bottom: 10px;
		right: 10px;
		z-index: 999;
	}
	#pageTop a {
		display: block;
		background: #cccccc;
		width: 40px;
		height: 40px;
		text-align: center;
	}
	#pageTop a svg {
		height: 40px;
		stroke: rgb(255, 255, 255);
	}
}
@media screen and (max-width: 780px) {
	#pageTop {
		position: fixed;
		bottom: 60px;
		right: 10px;
		z-index: 999;
	}
	#pageTop a {
		display: block;
		background: #cccccc;
		width: 40px;
		height: 40px;
		text-align: center; 
	}
	#pageTop a svg {
		height: 40px;
		stroke: rgb(255, 255, 255);
	}
}

/* ====================================================
 fixed
====================================================*/
#fixed_pc{
	position: fixed;
	bottom: 50px;
	right: 10px;
	width: 230px;
	z-index: 999;
}
#fixed_pc a{
	text-decoration: none;
	display: block;
	width: 100%;
}
#fixed_pc a img{
	width: 100%;
}

#fixed_sp{
	position: fixed;
	bottom: 0;
}
#fixed_sp a{
	width: 100%;
	display: block;
}
#fixed_sp a img{
	width: 100%;
	margin: 0;
}

/* for modern brouser
========================================================*/
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* IE7,MacIE5 */
.clearfix {
  display: inline-block;
}
/* WinIE6 below, Exclude MacIE5 \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}

/* 基本一式
==================================================*/
a,a p{
	text-decoration: none;}
a p:hover{
	opacity: 0.5;
	text-decoration: none;
}
section{
	width: 100%;
	clear: both;
	padding: 0 ;
}
.f_right{
	float: right;
	display: block;
}
.f_left{
	float: left;
	display: block;
}
.clear{	clear: both;}

.mb0{ margin-bottom: 0;}
.mb10{ margin-bottom: 10px;}
.mb20{ margin-bottom: 20px;}
.mb30{ margin-bottom: 30px;}
.mb40{ margin-bottom: 40px;}
.mb50{ margin-bottom: 50px;}

.mt0{ margin-top: 0;}
.mt30{ margin-top: 30px;}
.mt40{ margin-top: 40px;}
.mt50{ margin-top: 50px;}
.mt80{ margin-top: 80px;}
.mt100{ margin-top: 100px;}

/* =========================================
index
============================================ */
@media screen and (min-width: 781px) {
	.index {
		max-width: 800px;
		padding: 10px 0 10px;/* 780=750÷100 */
		margin: 0 auto;
	}
}

@media screen and (max-width: 780px) {
	.index {
		max-width:95%;
		padding: 5px 1% 5px;/* 780=750÷100 */
		margin: 0 auto;
	}
}


/*　==================================================
#top_section
==================================================　*/
#top_section{
	width: 100%;
	background-color: #B50081;
	padding: 50px 0 50px 0;
	text-align: center;
}
#top_section h1{
	padding: 0;
	margin: 0 auto;
}
.tx_day{
	color: #FFFFFF;
	text-align: center;
	font-weight: 600;
	font-size: 1.7em;
}
.tx_day span{
	color: #FF262A;
}
.app_btn{
	display: block;
	background-color: #b60081;
	color: #FFFFFF;
	font-weight: bold;
	width: 60%;
	margin: 50px auto 20px;
	text-align: center;
	padding: 25px 0;
	border-radius: 15px;
	font-size: 0.9em;
}

@media screen and (min-width:781px){
	h1{
		width: 1000px ;
		text-align: center;
	}
	h1 img{
		max-width:700px;
	}
	.pc{ display: block;}
	.sp{ display: none;}
}

@media screen and (max-width:780px){
	h1{
		width: 100% ;
	}
	h1 img{
		width: 100%;
	}
	.tx_day{
		font-size: 1.2em;
	}
	.pc{ display: none;}
	.sp{ display: block;}
}

/*　==================================================
　　ボタン
==================================================　*/
.btn-gradient-radius {
	display: inline-block;
	border-radius: 25px;
	text-decoration: none;
	color: #FFFFFF;
	background:#dc1e14;
	transition: .4s;
	margin: 10px auto;
}
.btn-gradient-radius:hover {
	opacity: 0.5;
}
.btn-gradient-radius.icon02 {
	border-radius: 25px;
	text-decoration: none;
	color: #FFFFFF;
	background:#77604A;
	transition: .4s;
	display: block;
	margin: 0 auto;
}
.icon{
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
	display: block;
	padding: 10px 0;
	text-align: center;
}
.icon::before {
	content:'\f07a';
	font-family:'Font Awesome 5 Free';
	font-weight:900;
	color: #ffffff;
	padding-right: 10px;
}
.icon02{
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
	padding: 10px 0;
	text-align: center;
}
.icon02::after {
	content:'\f002';
	font-family:'Font Awesome 5 Free';
	font-weight:900;
	color: #ffffff;
	padding-left: 10px;
}

@media screen and (min-width: 781px) {
	.btn-gradient-radius02{
		margin: 20px auto;
		width: 80%;
		border-radius: 60px;
	}
	.btn-gradient-radius02 img{
		width: 60%;;
		vertical-align: middle;
	}
}
@media screen and (max-width: 780px) {
	.btn-gradient-radius02{
		margin: 5px auto 10px;
		width: 90%;
		border-radius: 60px;
	}
	.btn-gradient-radius02 img{
		width: 90%;;
		vertical-align: middle;
	}
}
.btn-gradient-radius02:hover {
	opacity: 0.5;
}

/*====================================================================
パンクズ
====================================================================*/
.pankuzu a{
	text-decoration: underline;
	color: #DD2A74;
}
.pankuzu {
	margin: 5px auto 0;
	padding: 0 2%;
}
/*====================================================================
mov
====================================================================*/

.movie-wrap {
	position: relative;
	padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
}

.movie-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media screen and (min-width: 781px) {
	.movie-wrap {
		width: 800px;/*989px*/
		height: 450px;/*556px*/
		margin: 10px auto;
		padding: 0;
	}
}
.ytp-chrome-controls{
	display: none;
}
/*====================================================================
　video
====================================================================*/
@media screen and (min-width: 781px) {
	h2.ttl_video{
		margin-block-start: 0.67em;
    	margin-block-end: 0.67em;
    	margin-inline-start: 0px;
    	margin-inline-end: 0px;
		line-height: 1.4;
		font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));
		font-weight: lighter;
		text-align: center;
	}
	h2.ttl_video span{
		font-size: 0.6em;
	}
	#video{
		padding: 15px 0 30px;
		border-bottom: 100px solid #B50081;
	}
}
@media screen and (max-width: 780px) {
	h2.ttl_video{
		margin-block-start: 0.67em;
    	margin-block-end: 0.67em;
    	margin-inline-start: 0px;
    	margin-inline-end: 0px;
		line-height: 1.4;
		font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));
		font-weight: lighter;
		text-align: center;
	}
	h2.ttl_video span{
		font-size: 0.7em;
	}
	#video{
		padding: 15px 0 30px;
		border-bottom: 30px solid #b60081;
	}
}

/*====================================================================
定番
====================================================================*/
@media screen and (min-width: 781px) {

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

.ytp-expand-pause-overlay .ytp-pause-overlay {
	display: none!important;
}