@charset "UTF-8";

/*****************************************************************

    header

*****************************************************************/
header {
  width: 100%;
  overflow: hidden;
}
header h1 {
  width: 100%;
  height: 140vw;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
header h1 img { width: 100%; margin: auto;}

@media print, screen and (min-width: 640px) {
header h1 {
  width: 134vw;
  height: 60vw;
  margin: 0 0 auto -17vw;
}
}
@media print, screen and (min-width: 1280px) {
header h1 {
  width: 120vw;
  height: 52vw;
  margin: 0 0 auto -10vw;
}
}
@media print, screen and (min-width: 1720px) {
header h1 {
  width: 108vw;
  height: 46vw;
  margin: 0 0 auto -4vw;
}
}
@media print, screen and (min-width: 1920px) {
header h1 {
  width: 100vw;
  height: 890px;
  margin: 0 0 auto 0;
}
}
/* main------------------------------------------------------------------------------*/
.main_area,footer { width: 100%; margin: 0 auto; 
	background-image: url("../image/back_about.png"); 
	background-size: 180% auto;
	background-position: top center;
}
.main_area{ background-position: top center; }
footer{ background-position: -40% center; }
.main_area section{ margin-bottom: 12%; }
.main_area section:last-of-type { margin-bottom: 0; }
@media print, screen and (min-width: 960px) {
.main_area section { margin-bottom: 8%; }
.main_area,footer{ background-size: 140% auto;}
}
@media print, screen and (min-width: 1280px) {
.main_area,footer{ background-size: 1920px auto;}
}
/* area_back------------------------------------------------------------------------------*/

.area_spot_hokkaido{ background-image: url("../image/back_blue.png"); }
.area_spot_okinawa{ background-image: url("../image/back_orange.png"); }
.area_cast { background-image: url("../image/back_graph_pink.png");}

/* common------------------------------------------------------------------------------*/
h2 , h3 , h4 {
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h3 { font-size: 3.6rem;}
h4 { font-size: 2.4rem;}

.font_blue { color: #007ef6;}
.font_orange { color: #f06917;}
.font_green { color: #1d6f09;}

@media print, screen and (min-width: 540px) {
h3 { font-size: 4.2rem;}
h4 { font-size: 3.2rem;}

}

@media print, screen and (min-width: 1280px) {
h3 { font-size: 4.8rem;}
h4 { font-size: 3.6rem;}
}

/* About------------------------------------------------------------------------------*/

.about_caption{ font-family: "Mochiy Pop P One", sans-serif;
  font-weight: 400;
  font-style: normal;}

/*-----CM・CAPTION-----*/
.area_about{ margin-bottom: 15%; }

.about_caption{
	width: 92%;
	margin: 0 auto 7.85%;
	text-align: center;
	font-size: 1.8rem;
}
.about_caption span{
	display: inline-block
}

.cm_movie{
	width: 84%;
	max-width: 640px;
	margin: 0 auto;
	background: #222222;
	border: solid 2px #222222;
}

.btn_tw{
	width: 66%;
	max-width: 320px;
	margin: 6.5% auto 0;
}

@media screen and (min-width: 640px) {
.area_about{ margin-bottom: 6%; }
.about_caption { width: 73%; margin: 0 auto 3.5%; }
.cm_movie { width: 59%; border: solid 10px #000000;}
.btn_tw { width: 29%; margin: 3% auto 0; }
}

@media screen and (min-width: 1024px) {
.about_caption { width: 68%; margin: 0 auto 3.75%; font-size: 2.4rem; }
.btn_tw { width: 29%; margin: 3.75% auto 0; }
}

/*取材先紹介-----------------*/
.area_spot_hokkaido ,
.area_spot_okinawa { padding: 3% 0 0;}
.area_spot_hokkaido .spot ,.area_spot_okinawa .spot
{ width: 92%; justify-content: center; margin-bottom: 3.5%; }

.area_spot_hokkaido h3,.area_spot_okinawa h3 { width: 92%; margin-top: calc(-4% - 3.6rem); }
.area_spot_hokkaido h4,.area_spot_okinawa h4 { width: 96%; margin:0 auto calc(-2% - 1.4rem) auto; }

.spot_swiper{ margin: 0 auto 6%; }
.spot_unit { width: 100%; }
.txt_unit  { 
	width: 100%;
	padding: 1.6rem;
	background:#ffffff;
	border-radius: 0.8rem;
	border: solid 2px #222222;
}
.txt_unit p { margin: 0.4rem 0; font-size: 1.4rem; }
/*情報*/
.area_spot_hokkaido .spot_txt ul {
	background-image: url("../image/back_graph_blue.png");
}
.area_spot_okinawa .spot_txt ul {
	background-image: url("../image/back_graph_orange.png");
}

.spot_txt ul{
	/*display:flex;
	flex-wrap:wrap;
	justify-content:space-between;*/
	width:100%;
	margin: 0 auto;
	padding:6% 3% 6%;
	display: grid;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	grid-template-columns: repeat(1, 1fr);
}

.spot_txt li{
	width:100%;
	margin: 0;
	padding: 1rem;
	background: #ffffff;
	border-radius: 5px;
	font-size: 1.4rem;
	border: solid 2px #222222;
}

.spot_txt h5 { font-weight: bold; }

@media screen and (min-width: 640px) {/*タブレット小*/
.spot_txt ul { grid-template-columns: repeat(2, 1fr);}
.spot_txt li { /*width:48.25%;*/}
}
@media screen and (min-width: 1024px) {/*タブレット小*/
.area_spot_hokkaido , .area_spot_okinawa { padding: 3%;}
.area_spot_hokkaido h3,.area_spot_okinawa h3 { margin-top: calc(-4% - 3.8rem); }
.area_spot_hokkaido h4,.area_spot_okinawa h4 { margin:0 auto calc(-1% - 1.4rem) auto; }
.spot_txt ul { padding:3% 3% 3%;grid-template-columns: repeat(3, 1fr);}
.spot_txt li{ /*width: 32%;*/ margin: 0; padding:1.4rem }
.spot_unit { width: 80%; }
.txt_unit { width: 80%; }
.txt_unit p { font-size: 1.6rem; }
}

@media screen and (min-width: 1366px) {/*タブレット小*/
.area_spot_hokkaido .spot ,.area_spot_okinawa .spot { justify-content: space-between; }
.area_spot_hokkaido h3,.area_spot_okinawa h3 { margin-top: calc(-4% - 4rem); }
.spot_unit { width: 54%; }
.txt_unit { width: 42%;}

}

/*出演者--------------------------------------------------------------------------------*/
.area_cast { margin: 0 auto; padding: 3% 0; }
.area_cast h3 { width: 92%; margin-top: calc(-4% - 3.6rem); }
.cast_box { width: 92%; margin: 0 auto; }
.cast_box h4 { width: 100%; }
.unit_s { width: 46%;}
.unit_l { width: 92%; }
.cast_unit{margin-left: 4%; margin-bottom: 4%;}
.cast_unit img,.cast_unit_2 img{ width: 100%; border: solid 2px #222222; border-radius: 0.8rem;/*border: solid 8px #ffffff; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);*/ }

figcaption { font-weight: bold; margin-top: 1.4rem; line-height: 1.2; }
figcaption span { display: inline-block; font-size: 1.4rem; margin-left: 4px; }

@media screen and (min-width: 640px) {
.unit_s { width: 22%; }
.unit_l { width: 44%; }
}

@media screen and (min-width: 960px) {
.cast_box { margin: 0 auto; }
}


/*フッターバナー*/
ul.footer_bn{display:flex;flex-wrap:wrap;justify-content:center;width:260px;margin: 0 auto;}
.footer_bn li{width:100%;padding:0 0 1.6rem;}

@media screen and (min-width: 640px) {/*タブレット小*/
ul.footer_bn{justify-content:space-between;width: 80%;max-width: 640px;}
.footer_bn li{width:48.25%;padding:1rem 0.2rem;}
}