.clearfix {
   display: block;
   padding: 0;
 }

 .clearfix::after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
 }

/* ▼ */


#wrap {
width: 100%;
height: auto;
position: relative;
line-height: 1.5;
background: #fff;
color: #373737;
font-family: source-han-sans-japanese, sans-serif;
font-weight: 300;
font-style: normal;
}

/*  */

@keyframes RightToLeft {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}




#header{
position: relative;
}

#header img{
    width: 100%;
    height: 100%;
        margin-bottom: -5px;
}


.picture_wrap {
width: 100%;
height: auto;
max-width: 1100px;
margin: 0 auto;
position: relative;
padding: 0 1rem;
}


#header .picture_wrap .logo {
display: block;
position: absolute;
width: 100%;
height: auto;
left: 2.5%;
top: 5%;
max-width: 400px;
animation-duration: 1s;
animation-name: RightToLeft;
z-index: 5;
}

 .mail {
    text-align: center;
    background: #22b573;
    padding: 1.5em 0;
    transition: 0.3s;
}

.mail h3{
  font-size: calc(20px + 12 * (100vw - 320px)/1600)
}

.mail a{
    color: #fff;
}

.mail:hover {
background:rgb(255 147 0);
}

 .mail img {
  width: 100%;
  height: auto;
  max-width: 30px;
  max-height: 20px;
  margin-top: 4px;
  margin-right: 10px;
}



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

.description {
  width: 100%;
  height: auto;
  margin: 0 auto;
  position: relative;
  padding: 1em 0px 1em 0px;
  font-size: 20px;
  line-height: 1.5;
  color: #fff;
  background: #88c644;
  text-align: center;
}

.description hr {
  background: linear-gradient(to right, #22b573 0%, #ffbb00 100%);  
  width: 40px;
  height: 5px;
  border:none;
  display: block;
}

.description h3 {
font-size: 1.5rem;
}

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

#main {
  width: 100%;
  height: auto;
  z-index: 10;
  position: relative;
  margin: 0 auto;
  text-align: center;
  z-index: 2;
  background: url(../images/bg.jpg);
  background-repeat: repeat;
  box-sizing: border-box;
}

#main h1 {
font-size:35px;
letter-spacing: 0.05em;
color: #ff4740;
margin-bottom: 1em;
}

#main h5 {
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #373737;
  border-left: 6px solid #c9c9c9;
  padding-left: 0.5em;
}

#main h4 {
font-size: 16px;
color: #373737;
border-left: 6px solid #22b573;
padding-left: 0.5em;
margin-top: 10px;
margin-bottom: 10px;
text-align: left;
}

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

.podcast{
  max-width: 1100px ;
  justify-content: center;
  margin: 0 auto;
  margin: 5vh 0;
}


.pod_contents{
    width: 100%;
    display: flex;
    background: white;
}

.pod{
  width: 50%;
  padding: 2em;
}

.pod img{
  width: 100%;
  margin-top: 0.5em;
}

.item-movie {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}


.item-movie iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

.left_contetns {
width: 70%;
height: auto;
float: left;
box-sizing: border-box;
margin-top: 5vh;
margin-bottom: 5vh;
position: relative;
}



.left_contetns h2, .right_contents h2 {
  background: linear-gradient(to right, #22b573 0%, #05c0e3 100%);  
  color: #fff;
  padding: 0.3em 0.5em;
}



.left_contetns .box_li {
  box-sizing: border-box;
  margin: 1em;
}




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

.right_contents {
width: 25%;
height: auto;
float: right;
box-sizing: border-box;
margin: 5vh 0;
}


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

.personality {
  position: relative;
  width: 100%;
  max-width: 280px;
  height: auto;
  background: #fff;
  font-size: 15px;
  box-sizing: border-box;
  color: #373737;
  margin: 0 auto;
  padding-bottom: 1em;
}


.personality h2::before {
  content: url(../images/icon_personality.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

.personality ul li {
width: 100%;
height: auto;
margin: 1em 0 2em 0;
}

.personality ul li h3 {
font-size: 20px;
}

.personality ul li hr{
width: 80%;
border-top: solid 2px #373737;
}

.personality p {
font-size: 15px;
line-height: 1.5;
text-align: center;
}

.x{
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    padding-top: 3vh;
}

.x img{
  width: 100%;
}


/* //// */

a {
transition: 0.3s;
}

a:hover {
  filter: alpha(opacity=80);
  -moz-opacity:0.8;
  opacity:0.8;
}

.sp {
display: none;
}

.pc {
  display: block;
  }

hr {
border-top: 0px;
}

/*  ============================= */

@media screen and (max-width: 768px) {

  .sp {
  display: block;
  }

  .pc {
  display: none;
  }


	.radiko{
	display: none;
	}

	.radiko_sp {
	display: block;
	width: 100%;
	position: relative;
	}

	.radiko_sp a img {
	 position: relative;
	 width: 100%;
	 height: auto;
	}


#header img {
width: 100%;
height: auto;
margin: 0 auto;
vertical-align: bottom;
}


.mail{
  padding: 1em 0;
}


#main {
  width: 100%;
  padding: 0vh 0 5vh 0;
}

#header .picture_wrap {
width: 100%;
}

#main .picture_wrap {
width: 90%;
}

.description {
font-size: 15px;
}

.left_contetns {
width: 100%;
height: auto;
float: none;
position: relative;
}

.left_contetns h2 {
  font-size: 25px;
  width: 100%;
  display: inline-block;
  padding: 0.3em 0.5em;
  margin-left: 0em;
  margin-top: 0em;
}

.left_contetns hr {
display: none;
}

.left_contetns .btn {
  width: 230px;
  height: 35px;
  font-size: 15px;
}

.left_contetns .blog ul li {
width: 100%;
}

.left_contetns .blog .white_box {
margin-bottom: -5px;
}

.left_contetns .blog ul li {
display: none;
}

.left_contetns .blog ul li:first-child {
display: inline-block;
}

.left_contetns .blog ul li:last-child{
display: none;
}

.right_contents {
  width: 100%;
  height: auto;
  float: none;
  position: relative;
  margin-top: 8vh;
}

.personality {
width: 100%;
max-width: none;
}

.personality ul li {
    width: 100%;
    height: auto;
    margin: 2em 0 2em 0;
}

.personality img {
width: 100%;
height: auto;
max-width: 182px;
}

.pod_contents{
  display: block;
}

.pod{
  width: 95%;
  padding: 1em;
  margin: 0 auto;
}


}