@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : layout.css
Description : レイアウト用CSS
===================================================================== */


/* ==========================================================
	共通
========================================================== */

/*メインビジュアル背景*/
.mv {
	/*	画像はこちら↓ */
		background: url(../images/bg.png) repeat;
		background-size: contain;
}

.nav{
	/* background-color: #ff7777 !important; */
	max-width: 1024px;
    margin: 0 auto;
}
.nav ul {
	/* justify-content: space-around; */
	justify-content: center;
}
/*アクセントカラー（背景色）*/
.nav,
.ttl_h2:before,
.slick-arrow,
.slick-active button::before,
.popup_close {
	/* background-color: #ff7777; */
}

/*アクセントカラー（文字色）*/
.ttl_h3,
.wrapper .txt_link,
.wrapper b.highlight,
.cast_name1 {
	color: #ff7777;
}

.popup_close {
	border-color: #ff7777;
}

.wrapper section:not(:last-child) {
    border-bottom: 0;
}

.onlyPC{
	display: block;
}

.onlySP{
	display: none;
}

@media screen and (max-width: 767px){
.onlyPC{display: none;}

.onlySP{display: block;}
}
/* ==========================================================
	header
========================================================== */

.nav {
	padding: 2em 0;
}

/*メニューの幅(SP)
　※calc(### / 750 * 100%)の###部分を変更してください*/
.nav ul {
	width: calc(750 / 750 * 100%);
}

.nav li {
	width: 60%;
}

/*メニューの文字色*/
.nav a {
	color: #fff;
	font-weight: bold;
  background: #ff7777;
  border: double 8px #fff;
	border-radius: 30px;
	text-align: center;
	font-size: 1.2em;
	padding: 1em 0.5em;
}

/*メニューの文字色：ホバー*/
/*テキストリンクの文字色：ホバー*/
.nav a:hover,
.txt_link:hover {
	color: #fff;
	background: #fa91b9;
}

/*メニューの下線：ホバー*/
/* .nav a:hover:after {
	background-color: #fff;
} */
/*放送日時*/
.oa_time{
background:#ff7777 url(../images/bg_2.png) center bottom repeat-x;
text-align: center;
color: #fff;
padding: 1em 2em;
margin: 0 auto;
z-index: 100;
/*max-width: 1024px;*/
}
.oa_time p{
	font-size: 5rem;
	font-weight: bold;
}

/* ==========================================================
	コンテンツ
========================================================== */

/*コンテンツ外側の背景*/
#main {
	background-color: #f7f5f2;
    /*	画像はこちら↓ */
    /*	background: url(../images/bg.png) repeat center;*/
}

/*コンテンツ背景*/
.wrapper {
    background-color: #f7f5f2;
}
.contents {
	background-color: #fff;
}

/*タイトル部分装飾*/
	h2 {
	position: relative;
	padding: 1em;
	margin: 0 0 1em;
	}
	h2:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 7px;
	background: repeating-linear-gradient(-45deg, #ff7777, #ff7777 2px, #fff 2px, #fff 4px);
	}
	.ttl_h2:before {
		content: "";
		position: absolute;
		background: url(../images/icon.png) no-repeat;
		background-size: contain;
		width: 1em;
		height: 1em;
	}
	.ttl_h3{
		text-align: center;
	}

/*バナー*/
.banner_list {
/* max-width: 600px; */
	margin: 3rem auto;
}
 .banner_list li{
	width: 100%;
}
 /* バナー2つ掲載時 */
 .banner_list li{
	width: 48%;
} 
/* .banner_list li{
	width: 70%;
} */
/*annaバナー*/
.anna{
	margin-top: 3rem;
	margin-bottom: 3rem;
	background-color: #f1dfd1;
	background-image: linear-gradient(315deg, #f1dfd1 0%, #f6f0ea 74%);
    padding: 3% 5%;
	text-align: center;
	width: 80%;

}
.anna p {
    display: inline;
    border-bottom: 1px dashed #333333;
	line-height: 2.5;
	letter-spacing: 0.25em;
}
.anna img{
	max-width: 262px;
	height: auto;
	margin-top: 2rem;
	margin-left: auto;
	margin-right: auto;
}
/*intor*/
.intor{
	width: 80%;
	margin: 0 auto;
	padding-bottom: 3em;
	}
/*present*/
.present_box,.application_box{
	border-radius: 30px 0 30px 0;
	padding: 5%;
	width: 80%;
	margin: 0 auto 3rem;
}
.images_list{
	width: 100%;
}
.one_photo{
	width: 65%;
}

.two_photo{
	width: 65%;
	margin-bottom: 1em;
}
.present_box_heading01{
	border-bottom: 3px dashed #ff7777;
}
.present_box_heading02{
	border-bottom: 3px dashed #fd9f4e;
}
.present_box_heading03{
	border-bottom: 3px dashed #837cd1;
}
.present01{
border: 3px solid #ff7777;
}
.present02{
	border: 3px solid #fd9f4e;
	}
	.present03{
		border: 3px solid #837cd1;
		}
.present_title{
	display: block;
	font-size: 2.5rem;
	font-weight: bold;
	color: #333;
	text-align: center;
	padding: 0.5em 0 1em;
}

.present_ribbon {
	position: relative;
	display: inline-block;
	/* margin: 1rem 0 1rem -10px; */
	padding: 1rem 3rem;
	color: #fff;
	border-radius: 30px;
	background: #837cd1;
	-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
	box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
  }
  .ribbon01{
	background: #ff7777;
  }
  .ribbon02{
	background: #fd9f4e;
  }
  .ribbon03{
	background: #837cd1;
  }
  .present_text{
	  margin: 3rem 1rem;
	 line-height: 2;
	 text-align: center;
  }

  /*present67*/
  .present_box_heading67{
	border-bottom: 3px dashed #a5d17c;
}
.present67{
	border: 3px solid #a5d17c;
	}
	.ribbon67{
		background: #a5d17c;
	  }

  /*募集*/

  .application_box a{
	  display: inline;
  }
  .application_box a:hover{
	opacity: 0.8;
  }
  .application_title{
	  display: inline-block;
	  color: #fff;
	  background-color: #5a1400;
	  padding: 0.5em 1em;
	  margin-bottom: 1rem;
  }
  .application_text{
	font-size: 1.6rem;
    line-height: 2;
  }
  .close{
	background-color: #333;
}
.deadline{
	color:#5a1400;
	font-size: 1.6rem;
	font-weight: bold;
}
.notes_title{
	font-weight: bold;
	margin-top: 1rem;
}
.notes{
	font-size: 1.6rem;
	line-height: 1.8;
	padding-left:1em;
	text-indent:-1em;
}
.bg_pink{
	background-color: #d3fff0;
	border-radius: 0;
}
.bg_orange{
	background-color: #d2fff0;
	border-radius: 0;
}
.font_l{
	font-size: 2rem;
}
/*ツイッター枠*/
.sns_tw {
    border: solid #ff7777 6px;
}
.follow_box{
	margin: 3rem auto;
	text-align: center;
}
/*放送内容*/
.oa_box{
	padding: 2%;
	width: 80%;
	margin: 0 auto 3rem;
	border: 1px solid #ff7777;
    background: #ff77771f;
}
.oa_text {
    margin-left: 5px;
}
.oa_text a{
	display: inline-block;
	font-size: 1.2em;
	font-weight: bold;
}
/* .oa_text a:hover{
	background: linear-gradient(transparent 50%, #ffafaf  0%);
} */

 .oa_text a::after{
    content: "";
    width: 25px;
    height: 25px;
    position: absolute;
    background: url(../images/arrow.png) no-repeat;
    background-size: contain;
    margin-right: 50px;
    transform: translate(10px, 4px);
	transition : all 0.3s ease 0s;
}
 .oa_text a:hover::after{
    content: "";
    width: 25px;
    height: 25px;
    position: absolute;
    background: url(../images/arrow.png) no-repeat;
    background-size: contain;
    margin-right: 60px;
    transform: translate(15px, 4px);
}
.oa_number {
    background-color: #ff7777;
    border-radius: 20px;
    padding: 0.2em 0.8em 0.4em;
    color: #fff;
    margin-right: 1em;
}
.cast{
	padding-bottom: 0 !important;
}
.cast img{
	width: 50%;
	margin: 0 auto;
}

.btn_img{
	display: block;
    width: 250px;
    margin: 0 auto;
    text-align: center;
}
.btn_img:hover{
	opacity: 0.8;
}
@media screen and (max-width: 767px){
	.btn_img{
		width: 75%;
	}
	 .oa_text a::after{
    transform: translate(10px, -2px);
}
 .oa_text a:hover::after{
    transform: translate(15px, -2px);
}
}
/*バックナンバーー*/
.backnumber_heading01{
	display: block;
	width: 80%;
	margin: 0 auto 5rem;
}
.backnumber_title{
display: inline-block;
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
background: linear-gradient(transparent 50%, #ffafaf  0%);
}
.backnumber_box{
	width: 80%;
	margin: 0 auto 5rem;
	background: #fdf3f5;
    padding: 2%;
}
.backnumber_box a:hover{
	color: #ff7777;
	text-decoration: underline;
	opacity: 0.8;
}
.backnumber_box_title{
	font-size: 2rem;
	font-weight: bold;
	border-bottom: 3px dashed #ff7777;
}
.backnumber_box_text{
	margin: 3rem 1rem;
    line-height: 2;
}
.backnumber_box_link{
	margin-bottom: 2rem;
}
.recipe_box{
margin: 3rem 1rem;
}
.recipe_title{
	color: #ff7777;
	font-weight: bold;
}
.btn_top {
    background-color: #ff7777;
    display: block;
    margin: 7rem auto 2rem;
    width: 150px;
    text-align: center;
    padding: 0.5%;
}
.btn_top a{
	color: #fff;
}
.btn_top a:hover{
	opacity: 0.8;
}

a.btn-border {
	border: 2px solid #333;
	border-radius: 0;
	background: #fff;
  }

  a.btn-border:hover {
	color: #fff;
	background: #333;
  }

  a.btn-border {
    border: 2px solid #333;
    border-radius: 0;
    background: #fff;
    display: block;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    padding: 2%;
}
a.pink{
    border: 2px solid #ff7777;
}
a.pink:hover {
	background: #ff7777;
  }

/*check.html*/
#agreement{
	width: 70%;
	padding: 3rem 0;
	margin: 0 auto;
}
.agreement_box{
	margin: 2rem auto;
	border: 1px solid #837cd1;
	padding: 2rem;
}
.agreement_heading{
	font-size: 2.4rem;
	text-align: center;
	font-weight: bold;
	margin: 0;
}
.agreement_text{
	font-size: 2rem;
	margin-top: 2rem;
	margin-bottom: 5rem;
	text-align: center;
}
.agreement_text a{
	font-size: 2rem;
	color: #d44747;
	text-align: center;
}
.agreement_text a:hover{
	color: #d44747;
	text-decoration: underline;
}
.policy{
    margin: 20px auto;
  text-align:center;
}
.submit_btnarea {
    width: 360px;
    margin: 0 auto;
}
.form_btn{
    background:#837cd1;
    border: 1px solid #fff;
    color: #333;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: all .5s ease-out;
    position: relative;
	text-align: center;


}
.form_btn a{
	color: #fff;
	pointer-events:auto;

}
.form_btn a:hover{
	color: #333;

}
button[type="submit"][disabled] a{
	color: #ccc;
	pointer-events: none;


}
.form_btn:hover{
    border:#837cd1 1px solid;
    background: #fff;
    color: #333;
}
button[type="submit"][disabled] {
            background-color: #fff;
            color: #ccc;
			border: 1px solid #ccc;
            cursor: default;
        }

button[type="submit"][disabled]:hover{
        opacity:1;
		color: #333;
    }

@media screen and (max-width: 767px){
	.banner_list li {
		width: 80%;
		margin: 0 auto 1em;
	}
	/* .banner_list li {
		width: 100%;
	} */

	.anna{
		width: 100%;

	}
.intor{
	width: 80%;
	margin: 0 auto;
	padding-bottom: 3em;
	}
	.cast img {
		width: 80%;
	}
	.present_box, .application_box {
	 width: 100%;
	}
	.present_ribbon {
		margin: 1rem 0 1rem 10px;
	}
	.images_list,.one_photo, .two_photo{
		width: 100%;
	}
	.images_list li {
		display: block;
		width: 90%;
		margin: 0 auto 1em;
	}
	.backnumber_heading01,.backnumber_box{
		width: 100%;
	}
	.oa_box{
		width: 100%;
	}

	a.btn-border {
		font-size: 2.2rem;
		width: 90%;
		padding: 6% 2%;
	}
	/*check.html*/
#agreement{
	width: 90%;
}
.submit_btnarea {
    width: 100%;
}
.font_l{
	font-size: 3rem;
}
}

	/*プレゼント画像横並び*/
.img_side{
	display: flex;
	align-items: center;
}

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

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


/* =====================================================================
*    シノビー年末プレゼントバナー
* =================================================================== */

.present2023{
    width: 50%;
	margin: 3rem auto;
	max-width: 50rem;
}

@media screen and (max-width: 767px){
    .present2023{
    width: 100%;
	max-width: 90%;

    }
}

/* =====================================================================
*    テーブル
* =================================================================== */
table , td, th {
	width: 100%;
	border: 1px solid #595959;
	border-collapse: collapse;
}
td, th {
	padding: 3px;
	width: 40px;
	height: 25px;
}
th {
	background: #f0e6cc;
}
.even {
	background: #fbf8f0;
}
.odd {
	background: #fefcf9;
}