/*
Theme Name: COCOBOMB
Theme URL: 
Description: COCOBOMBのオリジナルテーマです。
Author: Tetsuya Shimogawa
Version: 1.0
*/

@charset "UTF-8";
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  word-break: break-word;
}

html, body {
  font-family:  "Noto Sans JP", "ヒラギノ角ゴ Pro", "游ゴシック", "ヒラギノ明朝 Pro", "Oswald", "メイリオ", "游ゴシック", "Noto Serif", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-size: 10px;
  font-weight: 400;
  color: #333;
}

a,a:hover {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

a:hover {
  cursor: pointer;
}

img {
  display: block;
  width: 100%;
}

h1, h2, h3, h4, h5,  h6, p {
  margin: auto;
  word-spacing: normal;
  white-space: pre-line;
}

p, dt, dd, td, strong, label {
  overflow-wrap: break-word;
  font-size: 1.6rem;
}

body {
  margin:auto; 
  position: relative;
}

/*--------------------------------------------------------------------------*/
/* Common
---------------------------------------------------------------------------------*/

body {
  position: relative;
  margin: 0;
}

section {
  padding: 20px;
}

footer {
  padding: 20px;
  text-align:center;
}


.disflex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

main {
  /*position: relative;*/
  overflow: hidden;
}

/*--------------------------------------------------------------------------*/
/* Contents
---------------------------------------------------------------------------------*/
.flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.box1200 {
  width: 1200px;
  max-width: 100%;
  margin:auto;
}
.center {
  text-align: center;
}
.relative {
  position: relative;
}
.back {
    background-image: url(/wp-content/uploads/2022/06/DSC_0358-1-scaled.jpg);
	background-size:cover;
	min-height:900px;
}
.fv {
  width: 65%;
  margin:0 auto;
}
.fv-date {
  position: absolute;
  top:2.1%;
  left:32%;
  font-size: 45px;
  font-weight: 600;
  color: #333;
  -webkit-text-stroke: 1px #FFF;
  text-stroke: 1px #FFF;
}
.contents {
  width: 80%;
  margin:40px auto 40px;
  background: rgba(255,255,255,0.8);
}
.bg-trans {
  background-color: #ffffff;
  opacity: 0.8;
}
.intro-txt {
  font-size: 16px;
  font-weight: 600;
  padding:40px 0 0;
}
.pickup {
  width: 98%;
  background:linear-gradient(to right bottom, #FC5F2A, #FDBA72);
  margin:0 auto;
  padding: 10px 10px;
  text-align: center;
}
.pickup-inner {
  background-color: #ffffff;
  padding: 0px 10px 20px 10px;
}
.pickup-h2 {
  font-size: 22px;
  font-weight: 600;
  color:#FE4898;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  margin: 20px 0;
}
.pickup-h2::before {
  content: "";
  position: absolute;
  left:0;
  right: 0;
  bottom: 0;
  border-bottom:4px solid #FE4898;
  width: calc(100% -35px);
  margin:0 auto;
}
.date {
  font-size: 16px;
  font-weight: 600;
  color: #FE4898;
  margin-bottom: 5px;
}
.pickup-img {
  width: 30%;
  padding:0px;
  margin:60px 10px;
  /*border:4px solid #eee;*/
  border-radius:50px;
  display: inline-block;
  font-size:18px;
  font-weight:600;
}
.name {
  font-size: 18px;
  margin-top: 5px;
  font-weight: 600;
  line-height: 22px;
}
.group-name {
  font-size: 12px;
}
.pickup-txt {
  font-size: 18px;
  font-weight: 600;
  margin-top: 10px;
  color:#FC5F2A;
}
.performer {
  width: 95%;
  margin:0 auto;
  padding: 40px 0 0;
  text-align: center;
}
.detail {
  width: 95%;
  margin:0 auto;
  padding: 40px 0 40px;
  text-align: left;
}

.detail-wid {
  width: 70%;
  margin: 0 auto;
}

.detail h3 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 20px;  
  margin-bottom: 10px;
}

.detail h4 {
  font-size: 16px;
  font-weight: 600;
  margin-top: 10px;  
  margin-bottom: 5px;
}

.detail p {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.detail img {
  margin:10px 0;
}

.ticket-link {
  margin: 10px 0;
}

.ticket-txt {
  font-size:14px;
}

.red-txt {
  color: red;
}
.unei {
  text-align: right;
  display: inline-block;
  width: 100%;
}

.youtube {
  width:100%;
  height:650px;
  margin:10px 0;
}

.table {
  width: auto;
  margin:auto;
  border:none;

}
.floating {
  position: fixed;
  z-index: 9999;
  bottom:2%;
  right:2%;
  width: 300px;
  /*box-shadow:0px 0px 25px 10px #ffffff;*/
}
th {
  border-radius: 5px;
  color:#fff;
  font-weight: bold;
  text-align: left;
  white-space: wrap;
  width: 25%;
}
th p {
  background-color: #FE4898;
  border-radius: 5px;
  color: #fff;
  padding: 5px 15px;
  margin:10px 30px 0 0;
  font-size: 16px!important;
  font-weight: 600!important;
}

td {
  font-size: 16px;
  font-weight: bold;
}
td a {
  color:#FE4898;
  transition: 0.3s;
}
td a:hover {
  color:#FE4898;
  opacity: 0.7;
}
.pc {
  display: block;
}
.sp {
  display: none;
}

/*--------------------------------------------------------------------------*/
/* Responsive
---------------------------------------------------------------------------------*/
@media screen and (max-width: 900px){
  /*.back::before{
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background-position:50% 100%;
    background:url(images/back.png) center no-repeat;
    background-size:cover;
  }*/
  section {
    padding: 10px;
  }
  .back {
    background-image: url(/wp-content/uploads/2022/06/detail_35827_16534467456347.jpg);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	min-height:250px;
  }
  /*.back {
    background: none;
    background-size: none;
  }*/
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .fv {
    width: 85%;
  }
  .fv-date {
  position: absolute;
    top:165px;
    left:17%;
    font-size: 20px;
    -webkit-text-stroke: 0.5px #FFF;
    text-stroke: 0.5px #FFF;
  }
  .contents {
    width: 100%;
    margin:20px auto 20px;
    background: rgba(255,255,255,0.8);
  }
  .intro-txt {
    font-size: 12px;
    font-weight: 600;
    padding:20px 20px;
  }
  .performer {
    padding: 10px 0 0;
  }
  .pickup-h2 {
    font-size: 22px;
    padding-bottom: 10px;
    margin: 20px 0;
  }
  .pickup-txt {
    font-size: 14px;
    margin-top: 10px;
  }
  .pickup-img {
    width: 100%;
    padding:0px;
    margin:5px 5px;
    text-align: center;
    /*border:4px solid #eee;*/
  }
  .name {
    font-size: 12px;
  }
  .group-name {
    font-size: 10px;
  }
  .detail h3 {
    font-size: 18px;
    margin-top: 10px;  
    margin-bottom: 5px;
  }
  .detail h4 {
    margin-top: 5px;  
    margin-bottom: 0px;
  }
  .detail p {
    line-height: 18px;
  }
  .detail-wid {
    width: 100%;
  }
  th,td {
    display: block;
  }
  th {
    width: 100%;
  }
  td {
    width: 95%;
    margin: 0 auto;
  }
  th p {
    background-color: #FE4898;
    border-radius: 5px;
    color: #fff;
    padding: 5px 5px;
    margin:10px 30px 5px 0;
    font-size: 12px;
    width: 100%;
  }

  .youtube {
    width:100%;
    height:200px;
  }
  .floating {
    position: fixed;
    z-index: 9999;
    bottom:1%;
    right:1%;
    width: 220px;
    box-shadow:0px 0px 25px 10px #ffffff;
  }
}

/* cocobomb用 */
.top-catch-area{
	width:50%;
	background-color:rgba(255, 255, 255,.7);
	padding:40px;
	margin:160px 40px 0;
	border-radius:50px
}

.top-catch-txt{
	font-size:48px;
	color:#000000;
	font-weight:600;
	text-align:center;
}
.txt-emphasis {
	font-size:64px;
	font-weight:800;
	border-bottom:12px solid #ffe600;
}
.txt-area-emphasis {
	font-size:22px;
	font-weight:700;
	border-bottom:4px solid #ffe600;
}
.sub-title {
	font-size:28px;
	color:#000000;
	margin-top:60px;
	font-weight:700;
}
.num-circle {
	background-color:#ffe600;
	color:#000000;
	width:50px;
	height:50px;
	padding:5px;
	margin:0px auto 20px;
	border-radius:50px;
	display:block;
	text-align:center;
	font-size:30px;
	font-weight:600;
}
.dark-circle {
	background-color:#000000;
	color:#ffffff;
	border-radius:50px;
	height:60px;
	width:80%;
	padding:10px 0;
}
.no-list-style {
	list-style:none;
}
.list-font-size {
	font-size:24px;
	font-weight:600;
	line-height:54px;
}
.worry-list {
	margin:60px auto;
	width:70%;
}
li{
    position: relative;
    padding-left: 15px;
  }
 
  li:before {
    content: "";
    position: absolute;
    top: 9px;
    left: -15px;
    -webkit-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    transform: rotate(50deg);
    width: 15px;
    height: 25px;
    border-right: 5px solid #ffe600;
    border-bottom: 5px solid #ffe600;
  }
.wid50 {
	width:45%;
	margin:20px;
}
.txt-area {
	font-size:18px;
	font-weight:500;
	line-height:32px;
	margin-top:40px;
}
.img-radius {
	border-radius:50px;
}
.mt-0 {
	margin-top:0px!important;
}
.mt-10 {
	margin-top:10px!important;
}
.mt-20 {
	margin-top:20px!important;
}
.mt-40 {
	margin-top:40px!important;
}

.mb-20 {
	margin-bottom:20px!important;
}
.bg-point {
	background-color:#000000;
	padding:40px 0;
}
.white-txt {
	color:#ffffff!important;
}
.point-box {
	color:#ffffff;
	font-size:18px;
	font-weight:600;
	width:30%;
	margin:5px;
	padding:40px 20px;
	text-align:center;
}
.bg-yellow {
	background-color:#ffe600;
}
.bg-gray {
	background-color:#efefef;
}
.camp {
	padding:20px;
	font-size:28px;
	font-weight:700;
}
.red {
	color:#cf2e2e!important;
}
.font-size-14 {
	font-size:14px!important;
}
.font-size-24 {
	font-size:24px!important;
}
.font-weight-700 {
	font-weight:700!important;
}
.yt {
    width: 100%;
    height: 350px;
}
.double-border {
	border-top:4px double #676767;
	border-bottom:4px double #676767;
	padding:20px 0!important;
}
.double-border-white {
	border-top:4px double #ffffff;
	border-bottom:4px double #ffffff;
	padding:20px 0!important;
}
.wpcf7-spinner {
	display:none!important;
}
.mail-input {
	padding:15px!important;
	border:2px solid #000000!important;
}
.mailbtn {
	background-color:#ffe600;
	border:2px solid #ffe600;
	padding:15px 85px;
	border-radius:5px;
	font-weight:700;
	font-size:22px;
	color:#000000!important;
}
.font-size-32 {
	font-size:32px!important;
}
@media screen and (max-width:900px) {
	.top-catch-area{
		width:90%;
		background-color:rgba(255, 255, 255,.7);
		padding:20px;
		margin:100px auto;
		border-radius:50px
	}
	
	.top-catch-txt{
		font-size:24px;
		color:#000000;
		font-weight:600;
		line-height:48px;
	}
	
	.txt-emphasis {
		font-size:30px;
		font-weight:800;
		border-bottom:8px solid #ffe600;
	}
	
	.sub-title {
		font-size:20px;
		color:#000000;
		margin:40px 0 40px;
		padding:0 20px;
		font-weight:700;
	}
	.dark-circle {
		background-color:#000000;
		color:#ffffff;
		border-radius:30px;
		height:75px;
		width:100%;
		padding:10px;
		
	}
	.no-list-style {
		list-style:none;
	}
	.list-font-size {
		font-size:16px;
		font-weight:600;
		line-height:28px;
	}
	.worry-list {
		margin:40px auto;
		width:90%;
	}
	li{
		position: relative;
		padding-left: 15px;
	  }

	  li:before {
		content: "";
		position: absolute;
		top: 4px;
		left: -10px;
		-webkit-transform: rotate(50deg);
		-ms-transform: rotate(50deg);
		transform: rotate(50deg);
		width: 10px;
		height: 15px;
		border-right: 5px solid #ffe600;
		border-bottom: 5px solid #ffe600;
	  }
	
	.wid50 {
		width:100%;
		margin:10px;
	}
	.mt-0-sp {
		margin-top:0px!important;
	}
	.mt-10-sp {
		margin-top:10px!important;
	}
	.mt-20-sp {
		margin-top:20px!important;
	}
	.mt-40-sp {
		margin-top:40px!important;
	}
	
	.mb-0-sp {
		margin-bottom:0px!important;
	}
	.point-box {
		color:#ffffff;
		font-size:18px;
		font-weight:600;
		width:90%;
		margin:5px auto;
		padding:40px 20px;
		text-align:center;
	}
	.yt {
        width: 100%;
        height: 200px;
    }
}