@charset "utf-8";

*, *:before, *:after {
	box-sizing: border-box;
}

html {
	height: 100%;
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.6;
	margin: 0;
	padding: 0;
}

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

a:hover,
a:active{
	text-decoration: none;
}


/*----------------------------------------------------*/
/*[レイアウトの設定*/
/*----------------------------------------------------*/

/*--全体のレイアウト--*/
#all_wrapp {
	width: 100%;
	background-image: url(../img/bg_main.jpg);
	background-repeat: repeat-y; /* 縦方向に繰り返す */
	background-position: bottom; /* 画像をトップに合わせる */
}

/*----------------------------------------------------*/
/*[文字の装飾]*/
/*----------------------------------------------------*/
.txt_red {
	color:red;
}

.txt_small {
	font-size: .8rem;
}



/*----------------------------------------------------*/
/*[ヘッダースライドショーの設定*/
/*----------------------------------------------------*/
header {
	position: relative;
}

.page-title {
	position: absolute;
	top: 30%;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	margin: auto;
	display: grid;
	place-items: center;
}

.page-title img {
	width: 60%;
	max-width: 600px;
}
@media screen and (max-width: 480px) {
	.page-title img {
		width: 70%;
	}
}

#slider {
	width: 100%;
	height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
@media (max-width: 480px) {
	#slider {
		max-height: 400px;
	}
}


/*----------------------------------------------------*/
/*[main、sectionの設定*/
/*----------------------------------------------------*/

#main {
	max-width: 1020px;
	margin: 1em auto;
	padding: 30px;
}

@media (max-width: 480px) {
	#main {
		margin: 0 auto;
		padding: 30px 20px;
	}
}

section {
	margin: 0 auto 30px;
	padding: 20px;
	background-color: #fff;
	border-radius: 10px;
	border:3px solid #000;
}
@media (min-width: 769px) {
	section {
		padding: 30px max(30px, 3vw);
	}
}



/*----------------------------------------------------*/
/*番組概要*/
/*----------------------------------------------------*/

/*--[見出しの「二刀流概要」部分の設定]--*/
.about-nitoryu {
	margin: auto;
}
.about-nitoryu-title {
	margin: 0 auto;
	padding: .75em .5em;
	background-color: #000;
	border: 2px solid #000;
	border-radius: 6px 6px 0 0;
	color: #fff;
	font-size: clamp(1.125rem, 0.943rem + 0.91vw, 1.625rem);
	text-align: center;
}
.about-nitoryu-text {
	margin-top: 0;
	padding: 20px;
	background-color: #3f51b5;
	border: 2px solid #000;
	border-radius: 0 0 6px 6px;
	color: #fff;
	font-size: clamp(1rem, 0.932rem + 0.34vw, 1.188rem);
}
@media (max-width: 480px) {
	.about-nitoryu-title span {
		display: block;
	}
}
@media (min-width: 769px) {
	.about-nitoryu-text {
		padding: 30px max(30px, 4vw);
	}
}

/*--二刀流のコンテンツ見出し--*/
.pickup {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 1em;
	font-size: clamp(1.125rem, 0.943rem + 0.91vw, 1.625rem);
	line-height: 1.4;
	text-align: center;
}
.pickup::before,
.pickup::after {
	content: "";
	width: 3px;
	height: 2em;
	background-color: #3fc1c9;
}
.pickup::before {
	margin-right: 30px;
	transform: rotate(-35deg);
}
.pickup::after {
	margin-left: 30px;
	transform: rotate(35deg);
}

/*--二刀流のコンテンツ--*/
.about-inner {
	position: relative;
	margin: auto;
	max-width: 800px;
}
.contents {
	margin: 2em 0;
}
.contents > img {
	vertical-align: top;
}
.contents > p {
	margin-top: .5em;
	padding: 1em;
	background-color: rgba(255, 255, 255, .8);
	border: 1px solid #fff;
	box-shadow: 0 0 10px #999;
	font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
}

@media (min-width:601px) {
	.contents > img {
		width: min(90%, 600px);
	}
	.contents > p {
		position: absolute;
		z-index: 100;
		padding: min(3vw, 30px);
		width: 300px;
	}
	.c-left > p {
		bottom: 0;
		right: 0;
	}
	.c-right {
		text-align: right;
	}
	.c-right > p {
		bottom: 0;
		left: 0;
		text-align: left;
	}
	.c-04 {
		padding-bottom: 25%;
	}
	.c-04 > p {
		width: 400px;
	}
}
@media (min-width:769px) {
	.c-04 {
		padding-bottom: ;
	}
}

/* 左からふわっと写真が出てくる設定 */
.fadeLeft {
	animation-name:fadeLeftAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity:0;
}
	@keyframes fadeLeftAnime{
		from {
			opacity: 0;
			transform: translateX(-100px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}



/*----------------------------------------------------*/
/*[出演者紹介]*/
/*----------------------------------------------------*/

.heading02 {
	position: relative;
	margin: 0 auto 2em;
	font-size: clamp(1.25rem, 1.114rem + 0.68vw, 1.625rem);
	text-align: center;
	border-bottom: 5px solid #ff0000;
}

.heading02::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 70px;
	height: 5px;
	background-color: #000000;
}

.performer {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.performer_box {
	padding: 10px;
	width: 32%;
	background-color: #fff;
	text-align: center;
}

.performer_box img {
	border-radius: 6px;
}

.performer_box h3 {
	margin-top: .5em;
	line-height: 1.2;
}

@media (max-width: 767px) {
	.performer_box {
		padding: 0;
		width: 100%;
	}
	.performer_box:not(:last-child) {
		margin-bottom: 30px;
	}
}



/*----------------------------------------------------*/
/*[店舗情報の設定*/
/*----------------------------------------------------*/

#section3 h4,
#section4 h4,
#section5 h4 {
	margin-bottom: .25em;
	font-size: 1.125rem;
}
#section3 ul,
#section4 ul,
#section5 ul {
	margin-top: 0;
	padding-left: 1.5em;
}
#section3 h3~h3 {
	margin-top: 2em;
}

.con_title {
	position: relative;
	padding-bottom: .65em;
	font-size: clamp(1.125rem, 0.943rem + 0.91vw, 1.625rem);
}

.con_title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 8px;
	background-image: repeating-linear-gradient(45deg, #b4a983 0px, #b4a983 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
	background-size: 8px 8px;
}

/*--レイアウト２カラム設定--*/
.col_2 img {
	border-radius: 6px;
}
.col_2 h4 {
	margin: .5em;
}
.col_2 + .col_2 {
	margin-top: 2em;
}

@media (min-width: 767px) {
	.col_2 {
		display: flex;
	}
	.col_2_re {
		flex-direction: row-reverse;
	}
	.col_img {
		flex: 1.5;
	}
	.col_txt {
		flex: 1;
		padding-left: 2em;
	}
	.col_2_re .col_txt {
		padding-left: 0;
	}
}


/*
.col_2{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.col_2 > *{
    width: calc( 50% - 6px ) ;
    margin-right: 12px;
    margin-bottom: 12px;
}
.col_2 > *:nth-child(2n){
    margin-right: auto;
}
.col_2 > * > *{

    height: auto;
    position: relative;
    overflow: hidden
}



@media screen and (max-width: 960px) {
    .col_2 > *{
        width: 100%;
        margin-right: auto;
    }
}
*/










/*----------------------------------------------------*/
/*[フッターの放送局一覧]*/
/*----------------------------------------------------*/


ul.tvname {
    list-style-type: none; /* 点をリストから削除 */
    padding: 0; /* リストの余白を削除 */
  }
  
  ul.tvname  li {
    display: inline; /* または inline-block; */
    margin-right: 10px; /* リスト項目の間隔を設定 */
    font-family: 'Courier New', Courier, monospace;
  }

@media (max-width: 480px) {

}


/*-----------------------------------*/



/*----------------------------------------------------*/
/*[リンクボタンとTVerボタンの設定]*/
/*----------------------------------------------------*/

/*--TVer--*/
.button_01 {
    width: 300px;
    margin: 0 auto;
  }
  a.btn_blue {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    position: relative;
    background: #228bc8;
    border: 1px solid #228bc8;
    border-radius: 30px;
    box-sizing: border-box;
    padding: 0 45px 0 25px;
    color: #fff;
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    transition-duration: 0.3s;
  }
  a.btn_blue:before {
    content: '';
    width: 8px;
    height: 8px;
    border: 0;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 25px;
    margin-top: -6px;
  }
  a.btn_blue:hover {
    background: #fff;
    color: #228bc8;
  }
  a.btn_blue:hover:before {
    border-top: 2px solid #228bc8;
    border-right: 2px solid #228bc8;
  }

  @media (max-width: 480px) {

    .button_01 {
        width: 100%;
        margin: 0 auto;
      }
}

/*--HPとInstagramのリンクボタン--*/

.button_02 {
    width: 200px;
    margin: 0 auto;
  }
  a.btn_orange {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    position: relative;
    background: #c85f22;
    border: 1px solid #c85f22;
    border-radius: 30px;
    box-sizing: border-box;
    padding: 0 45px 0 25px;
    color: #fff;
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    transition-duration: 0.3s;
  }
  a.btn_orange:before {
    content: '';
    width: 8px;
    height: 8px;
    border: 0;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 25px;
    margin-top: -6px;
  }
  a.btn_orange:hover {
    background: #fff;
    color: #c85f22;
  }
  a.btn_orange:hover:before {
    border-top: 2px solid #c85f22;
    border-right: 2px solid #c85f22;
  }



/*===[TVer説明の囲み]==============================*/

.tver {
    border: 3px dashed #000;
    width: 100%;
    padding:20px;
    border-radius: 10px;
    background-color: #fff;
}



/*=================================*/
/*スクロールリンクの形状*/
.scroll-top {
    /*表示位置*/
    position: fixed;
    right: 20px;
    bottom: 10px;
    z-index: 2;
    /*はじめは非表示*/
    opacity: 0;
    visibility: hidden; 
    transition: opacity .5s, visibility .5s; /*それぞれに0.5秒の変化のアニメーション*/
    /*縦書き*/
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl; /* 追加 */
    writing-mode: vertical-rl;
    /*改行禁止*/
    white-space: nowrap;
    /*矢印の動き*/
    animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove{
      0%{bottom:20px;}
      50%{bottom:25px;}
     100%{bottom:20px;}
 }


/*.scroll-viewクラスがついたら出現*/
.scroll-top.scroll-view {
	opacity: 1;
	visibility: visible;
}

/*リンク全体の aタグの形状*/
.scroll-top a {
	text-decoration: none;
	color: #666;
	text-transform: uppercase;
	font-size:0.9rem;
    display: block;
}

/*スクロールリンクの形状*/

.js-scroll a::after{
	content:"";
	position: absolute;
	top:0;
	right:0;
	width:1px;
	height: 50px;
	background:#666;
}

.js-scroll a::before {
    content: "";
    position: absolute;
    top: 30px;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(-31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-scroll a::before{
	right:-11px;
}

/*ページトップリンクの形状*/

.js-pagetop a::after{
	content:"";
	position: absolute;
	top:0;
	right:0;
	width:1px;
	height: 50px;
	background:#666;
}

.js-pagetop a::before {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-pagetop a::before{
	right:0;
}



/*----------------------------------------------------*/
/*[フッターの設定*/
/*----------------------------------------------------*/

footer {
    text-align: center;
    background-color: #f1f1f1;
    padding:1rem 0 2rem 0;
    margin:0 auto;
}

footer p {
padding: 1rem 0;
}

footer ul.tvname {

    max-width: 960px;
    margin: 0 auto;
}