@charset "UTF-8";

/* ------------------------------------------------------
   基本設定
------------------------------------------------------ */
:root {
	--v-space: max(30px, min(3vw, 120px));
	--base-color: #ddeff1; /* 薄緑 */
	--base-color-a: #D9CD90; /* 水色 */
	--main-color: #D0104C; /* 桃 */
	--main-color-lt: #B28FCE; /* 薄紫 */
	--main-color-md: #F19483; /* ピンク */
	--sub-color: #3A8FB7; /* 青 */
	--accent-color: #B1B479; /* 黄色 */
	--accent-color-a: #2E5C6E; /* 緑 */
	/*--accent-color-rgb: 45, 79, 227;*/
}

body {
	background: url(../img/bg.png) var(--base-color) center center / cover no-repeat;
	background-size: cover;
}
a {
	color: var(--sub-color);
}
.hidden {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
.cg {
	pointer-events: none;
}

/* sticky-footer
---------------------- */
/* html, body { height: 100%;} */
body > #global-footer {
	position: sticky;
	top: 100vh;
}
#global-footer {
	padding: calc(var(--v-space) / 2) 1em;
	background: var(--accent-color-a);
	color: #fff;
	text-align: center;
}

/* footer
---------------------- */
.colophon {
	margin-top: 0;
	font-size: var(--12px);
}
.colophon strong {
	padding-left: .5em;
	font-size: max(1rem, min(.909rem + .45vw, 1.25rem)); /* 16px20px */
	font-weight: bold;
	line-height: 2;
}
.colophon a {
	color: #fff;
}
.copyright {
	margin: 0;
	padding: 2em 0 0;
	font-size: var(--14px);
	text-align: center;
}

/* breadcrumb
---------------------- */
.breadcrumb {
	padding: 1em 1.5em;
	background: var(--sub-color);
	font-size: var(--14px);
}
.breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.breadcrumb-list li + li::before {
	content: "/";
	padding: 0 .3em;
	color: #ddd;
}
.breadcrumb-item {
	color: #fff;
	line-height: 1.2;
}
.breadcrumb-item a {
	color: #fff;
}
@media (max-width: 768px) {
	.breadcrumb {
		font-size: var(--12px);
	}
	.breadcrumb-item span {
		display: none;
	}
}
@media (min-width: 769px) {
	.breadcrumb {
		padding: 1em 4%;
	}
	.breadcrumb-list {
		margin: auto;
		max-width: 1200px;
	}
}


/* ------------------------------------------------------
   ヘッダー hero
------------------------------------------------------ */
.hero {
	margin: auto;
	max-width: 1200px;
	text-align: center;
}
.hero-container {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: center;
	grid-template-rows: auto;
}
.hero-container > * {
	grid-area: 1 / 1;
}
.hero-content-wrap {
	padding-top: 20%;
}
.hero-img {
	order: -1;
}
.program-title {
	margin: auto;
	width:80vw;
}
.produced {
	margin: 5% auto 5%;
	width: 80vw;
}
.onair-date {
	margin: auto;
	width: 80vw;
}

@media (min-width: 769px) {
	.hero {
		margin: auto 4%;
		padding-top: var(--v-space);
	}
	.hero-content-wrap {
		padding-top: 30%;
	}
	.program-title {
		width: min(80vw, 860px);
	}
	.produced {
		position: absolute;
		top: 0;
		left: 0;
		margin: 1em 0 0 1em;
		width: min(25vw, 370px);
	}
	.onair-date {
		margin: 3% auto;
		width: min(40vw, 660px);
	}
}
@media (min-width: 1300px) {
	.hero {
		margin: auto;
	}
}


/* ------------------------------------------------------
   コンテンツ
------------------------------------------------------ */
main section {
	padding: var(--v-space) 0;
}
.i-container {
	margin: auto 4%;
	background: #fff;
}
@media (min-width: 769px) {
	.i-container {
		max-width: 1200px;
	}
}
@media (min-width: 1300px) {
	.i-container {
		margin: auto;
	}
}

.c-title {
	position: relative;
	margin-bottom: 1em;
	padding: calc(var(--v-space) / 4) .5em;
	background: var(--main-color);
	border: 3px solid var(--main-color);
	color: #fff;
	font-size: max(1.5rem, min(1.227rem + 1.36vw, 2.25rem)); /* 24px?36px */
	text-align: center;
}
.c-title::before {
	content: "";
	position: absolute;
	bottom: -14px;
	left: 1em;program-title
	width: 0;
	height: 0;
	border-width: 14px 12px 0 12px;
	border-style: solid;
	border-color: var(--main-color) transparent transparent transparent;
}
.c-title::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 1em;
	width: 0;
	height: 0;
	border-width: 14px 12px 0 12px;
	border-style: solid;
	border-color: var(--main-color) transparent transparent transparent;
}
.br {
	display: inline-block;
}
.small {
	font-size: 65%;
}



.introduction {
	background: #fff url(../img/bg.jpg) center center / cover no-repeat;
	width: 100%;
	padding-top:20px;
	padding-bottom:0px;
}







/* 予告動画
---------------------- */
.promotion {
padding: 2% 4%;
width:100%;
}
/*@media (min-width: 769px) {
	.promotion {
		margin: auto;
		max-width: 800px;
	}
}
*/
.youtube-video {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.youtube-video iframe {
	width: 100%;
	height: 100%;
}
@supports not (aspect-ratio: 16 / 9) {
	.youtube-video {
		position: relative;
		padding-top: 100%;
	}
	.youtube-video iframe {
		position: absolute;
		top: 0;
		right: 0;
		object-fit: cover;
	}
}


/* 概要 intro
---------------------- */
.intro-content {
	display: flex;
	flex-direction: column;
	padding: 4% 4%;
	font-size: max(1rem, min(.909rem + .45vw, 1.25rem)); /* 16px～20px */
}
.intro-img {
	margin-top: 3em;
}
.deco-1 {
	color: var(--main-color);
	font-size: 1.2em;
}
.deco-2 {
	background: linear-gradient(transparent 70%, #fdd6ff 70%);
}

h4.aomori {
color:#1eaa39;
border-bottom: solid 2px #1eaa39;
}

h4.kagoshima {
color:#2ca6e0;
border-bottom: solid 2px #2ca6e0;
}

p.gaiyou{
font-weight:bold;
font-size:1.1em;
}

.intro-text ul{
margin:0;
padding:0;
list-style:none;
}
.intro-text li:first-child{
margin-bottom:2em;
}

@media (min-width: 769px) {
	.intro {
		padding-top: 0;
	}
	.intro-content {
	padding: 0 4% 4%;
}
}
@media (min-width: 801px) {
	.intro-content {
		flex-direction: row;
		margin-top: 4%;
	}
	.intro-text {
		flex: 1.5;
		margin-right: 1.5em;
		min-width: 20em;
		max-width: 29em;
	}
	.intro-text p:first-child {
		margin-top: 0;
	}
	.intro-img {
		flex: 1;
		margin-top: 0;
	}
}


/* 内容 segment
---------------------- */
.segment {
	background: #fff url(../img/bg-map.jpg) center center / cover no-repeat;
}
.segment .i-container {
	background: none;
	filter: none;
}
.segment-title {
	position: relative;
	display: grid;
	place-items: center;
	margin-bottom: calc(var(--v-space) / 2);
	padding: 0 .5em;
	color: var(--accent-color-a);
	font-size: max(1.5rem, min(1.227rem + 1.36vw, 2.25rem)); /* 24px?36px */
	text-align: center;
	text-shadow: 2px 1px 0 #fff;
}
.segment-title > * {
	grid-area: 1 / 1;
}
.rotate-circle {
	display: inline-block;
/*	width: min(30vw, 5em);
	height: min(30vh, 5em);*/
	width: min(40vw, 7em);
	height: min(40vh, 7em);
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3Cdefs%3E%3Cstyle%3E.cls-2%7Bfill%3A%232e6282%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22m334.11%2046.95-13.33%2012.21c4.8%201.78%209.51%203.74%2014.12%205.86l-.79-18.07ZM453.05%20165.89l-18.07-.79c2.12%204.62%204.08%209.33%205.86%2014.12l12.21-13.33ZM453.05%20334.11l-12.21-13.33c-1.78%204.8-3.74%209.51-5.86%2014.12l18.07-.79ZM334.11%20453.05l.79-18.07c-4.62%202.12-9.33%204.08-14.12%205.86l13.33%2012.21ZM165.89%20453.05l13.33-12.21c-4.8-1.78-9.51-3.74-14.12-5.86l.79%2018.07ZM46.95%20334.11l18.07.79c-2.12-4.62-4.08-9.33-5.86-14.12l-12.21%2013.33ZM46.95%20165.89l12.21%2013.33c1.78-4.8%203.74-9.51%205.86-14.12l-18.07.79ZM165.89%2046.95l-.79%2018.07c4.62-2.12%209.33-4.08%2014.12-5.86l-13.33-12.21ZM269.82%2047.46%20250%205l-19.82%2042.46c6.52-.63%2013.13-.96%2019.82-.96s13.29.33%2019.82.96ZM452.54%20269.82%20495%20250l-42.46-19.82c.63%206.52.96%2013.13.96%2019.82s-.33%2013.29-.96%2019.82ZM47.46%20230.18%205%20250l42.46%2019.82c-.63-6.52-.96-13.13-.96-19.82s.33-13.29.96-19.82ZM379.2%20407.23l44.04%2016.01-16.01-44.04a205.106%20205.106%200%200%201-28.03%2028.03ZM230.18%20452.54%20250%20495l19.82-42.46c-6.52.63-13.13.96-19.82.96s-13.29-.33-19.82-.96ZM92.77%20379.2l-16.01%2044.04%2044.04-16.01a205.106%20205.106%200%200%201-28.03-28.03ZM120.8%2092.77%2076.76%2076.76l16.01%2044.04c8.41-10.22%2017.8-19.61%2028.03-28.03ZM407.23%20120.8l16.01-44.04-44.04%2016.01c10.22%208.41%2019.61%2017.8%2028.03%2028.03Z%22%2F%3E%3Ccircle%20cx%3D%22250%22%20cy%3D%22250%22%20r%3D%22203.5%22%20style%3D%22fill%3Anone%3Bstroke%3A%232e6282%3Bstroke-miterlimit%3A10%3Bstroke-width%3A3px%22%2F%3E%3C%2Fsvg%3E')
	center center no-repeat;
	filter: opacity(60%);
	transform-origin: calc(100% * 250 / 500) calc(100% * 250 / 500);
	animation: rotate 10s linear infinite;
}
@keyframes rotate {
	to {
		transform:rotate(1turn);
	}
}
.point {
	margin: 0 .5em;
}
.point-title {
	position: relative;
	margin-bottom: 1em;
	padding: .5em .5em .5em 3.5em;
	background: var(--main-color);
	border-radius: 100vh;
	color: #fff;
	font-size: max(1.125rem, min(.898rem + 1.14vw, 1.75rem)); /* 18px～28px */
}
.point-title::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	background-color: #fff;
	width: 3em;
	height: 3em;
	border: 3px solid var(--main-color);
	border-radius: 50%;
}
.point-title::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 2%;
	transform: translate(-2%, -50%);
	z-index: 2;
	display: block;
	background: url(../img/icon-ship.svg) center center no-repeat;
	width: 2em;
	height: 2em;
	animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
	transition: 1.5s ease-in-out;
}
@keyframes fuwafuwa {
	0% {
		transform: translate(-2%, -50%) rotate(-3deg);
	}
	50% {
		transform: translate(-2%, -45%) rotate(0deg);
	}
	100% {
		transform: translate(-2%, -50%) rotate(3deg);
	}
}
.point + .point {
	margin-top: max(48px, min(7.5vw, 90px));
}
.point p {
	margin-left: max(48px, min(7.5vw, 90px));
	margin-right: max(16px, min(3.3vw, 48px));
	font-size: max(1rem, min(.955rem + .23vw, 1.125rem)); /* 16px～18px */
}
.point p + p {
	margin-top: .5em;
}
@media (min-width: 769px) {
	.point {
		margin-left: auto;
		margin-right: auto;
		width: max(50%, 700px);
	}
}


/* 出演者 cast
---------------------- */
.cast-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
.castlist-wrap {
	padding: 2em 1em;
	width: calc(100% /4);
	text-align: center;
}
.cast-img {
	margin: auto;
	max-width: 200px;
}
.cast-img img {
	margin: auto;
	border-radius: 100vh;
}
.cast-name {
	margin-top: .7em;
	color: var(--main-color);
	font-size: max(1.25rem, min(1.068rem + .91vw, 1.75rem)); /* 20px?28px */
	font-weight: bold;
}
.cast-meta {
	margin-top: .5em;
	margin-bottom: 1em;
	color: var(--main-color);
	font-size: var(--14px);
	line-height: 1;
}
.cast-desc {
	margin: auto;
	padding-left: 1em;
	padding-right: 1em;
	max-width: 16em;
	font-size: var(--14px);
	text-align: left;
}
/*.cast-list div:first-child > .cast-desc {
	max-width: 18em;
}*/

@media (max-width: 768px) {
	.castlist-wrap {
		width: calc(100% / 2);
	}
/*	.cast-list div:first-child {
		flex-basis: 100%;
	}
	.cast-list div:first-child > dt,
	.cast-list div:first-child > dd {
		margin-left: auto;
		margin-right: auto;
		width: calc(50% - 1em);
	}
*/
	.cast-img {
		max-width: 150px;
	}
	.cast-meta {
		margin-bottom: .5em;
	}
	.cast-desc {
		padding: 0;
/*		max-width: 10em;*/
	}
/*	.cast-list div:first-child > .cast-desc {
		max-width: 16em;
	}
*/
}
@media (max-width: 480px) {
	.castlist-wrap {
		width: calc(100%);
	}
}



/* プレゼント present
---------------------- */
.present {
text-align: center;
}

.present ul{
margin: 0 0 2rem 0;
padding:0;
list-style:none;
box-sizing: border-box;
}

.present li{
padding:1em;
box-sizing: border-box;
}

.present li img{
margin: 0 5%;
width:90%;
}

.present li h4{
font-size:1.15em;
}

.pre-btn{
margin-top:2em;
}

.pre-btn a{
display:inline-block;
background: var(--main-color);
color: #fff;
padding: 10px 30px;
border: 5px double white;
text-decoration: none;
outline: none;
transition:.3s ease-out;
font-size:1.25em;
}
.pre-btn a:hover{
background:var(--sub-color);
border-radius:20px; 
}

@media (min-width: 769px) {
.present ul{
margin: 0 2rem;
display: flex;
flex-wrap: wrap;
}
.present ul li{
width: calc(100% / 2);
}

}


/* ギャラリー gallery
---------------------- */
.gallery {
	background: var(--sub-color);
}
.gallery .i-container {
	background: none;
	filter: none;
}
.gallery-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
	grid-gap: 1px;
	padding-left: 0;
	list-style: none;
}
.gallery-item {
	display: inline-block;
	overflow: hidden;
}
.gallery-item a {
	position: relative;
	display: block;
	padding-top: 100%;
	transition-duration: .5s;
}
.gallery-item a:hover {
	transform: scale(1.2);
}
.gallery-item img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: inline;
	margin: auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 769px) {
	.gallery-list {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
		grid-gap: 3px;
	}
	.gallery-item a {
		padding-top: 66.67%; /* 3:2 */
	}
}


/* お店リスト shop
---------------------- */
.shop-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	grid-gap: 1em;
	padding: 1em;
}
.shoplist-wrap {
	display: flex;
	flex-direction: column;
	padding: 1em;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, .1);
}
.shop-name {
	margin: .75em 0 .5em;
	font-size: max(1rem, min(.909rem + .45vw, 1.25rem)); /* 16px?20px */
	font-weight: bold;
}
.shop-img {
	order: -1;
}
.shoplist-wrap > dd {
	font-size: max(.875rem, min(.83rem + .23vw, 1rem)); /* 14px?16px */
}
@media (min-width: 769px) {
	.shop-list {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	}
}



hr {
    height: 6px;
    background-color: #f2f2f2;
    width: 90%;
    border: none;
    margin: 2rem auto;
    border-radius: 20px;
}


h4 {
	font-size:1.4rem;
	margin:1rem auto;
	padding-bottom: 0.3em;
	font-family: 'Kosugi Maru', sans-serif;
}