@charset "UTF-8";
html{
	font-size: 62.5%;
}

body {
	/*font-size: 1.4rem;*/
	line-height: 1.8;
	width: 100%;
	background-color: #2bafb1;
}


img{
	width:100%;
}

i{
	margin: 0 0.5rem;
}


/*写真にフレーム
---------------------*/
.photo_effect {
	padding: 11px;
	background-color: #FFFFFF;
	box-shadow: 0 3px 18px -4px rgba(0, 0, 0, 0.8);
}


/*マーカー風
---------------------*/

.marker-color_ {
background: linear-gradient(transparent 50%, #ffec61 0%);
}




/* PCのみ表示
------------------------------*/
@media only screen and (max-width: 750px) {

	.for_pc{
		display: none;
	}
	
}

/* スマホのみ表示
------------------------------*/

@media only screen and (min-width: 751px) {

	.for_sp{
		display: none;
	}
	
}


/* メインビジュアル 
----------------------------------------*/

.main{
	width: 100%;
	height: 700px;
	background-image: url(../img/main_bg_pc.png);
	background-size:cover;
	background-position: center center;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
  	z-index: 0;
}

.main h1{
	width:700px;

}


@media only screen and (max-width: 750px) {
.main{
	width: 100%;
	height: auto;
	background-image: url(../img/main_bg_sp.png);
	align-items: flex-end;
}
	
.main h1{
	width:75%;
	padding: 10rem 0;
}

}


.fuwafuwa {
    animation-name: fuwafuwa;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;

}

@keyframes fuwafuwa {
0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-15px)
    }
}





/*コンテンツを並べる
---------------------*/

#item{
	width: 100%;
	margin-bottom: 5rem;
	text-align: center;
}


/*コンテンツ
---------------------*/

section{
	width: 1100px;
	margin: auto;
	display: flex;
	flex-direction: column;
	margin-bottom: 5rem;
}


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

section{
	width: 95%;
	margin-bottom: 2rem;
}
	
}



/*見出し テキスト
---------------------*/
.ttl_txt{
	font-size: 2.5rem;
	line-height: 4rem;
	margin: 3rem auto;
	font-weight: bold;
	color: #FFF;
	
}

.ttl_txt a{
	color:#fff;
  }




.ttl_txt a:hover{
        opacity:0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha( opacity=70 )";
		transition: all 0.4s ease 0s;
  }



.midashi01 {
	position: relative;
	font-size: 3.5rem;
	text-align: center;
	border-bottom: 5px solid #2bafb1;
	margin-bottom: 4rem;
	color: white;
}

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


.midashi_report {
	text-align: center;
	margin-bottom: 3rem;
}

.midashi_report img{
	width: 90%;
}


@media only screen and (max-width: 750px) {
	.midashi_report img{
	width: 100%;
	margin-bottom: 0rem;
}

}

/*パーソナリティ(タイトル/アイコン)
---------------------*/


.ttl_personality_icon{
	margin-bottom: 3rem;
	text-align: center;
}

.ttl_personality_icon img{
	width: 70%;
	
}


@media only screen and (max-width: 750px) {
	
	.ttl_personality_icon img{
	width: 90%;
}
	.ttl_txt{
	font-size: 1.6rem;
	line-height: 2.5rem;	
}	
	.midashi01 {
	font-size: 2.5rem;
	margin-bottom: 2rem;
}
	
}


/*レポート記事 */




#box_report {
	width:100%;
}

.list {
	width:100%;
	margin: 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.list li{
	width:32%;
	padding: 1.5rem;
	list-style: none;
	background-color: whitesmoke;
	display: flex;
	justify-content: space-between;
	border-radius: 5px;
	margin-bottom: 3rem;
	box-shadow: 3px 3px 0px 2px #228c8e;
	/*全体リンク用*/
	position: relative;
	
}

.list::after {
display: block;
content:"";
	width:32%;
}



/*全体リンク用*/
.list li a{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.list li a:hover{
        opacity:0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha( opacity=70 )";
        background: #fff;
		transition: all 0.4s ease 0s;
  }



.reporter_photo{
	width:30%;
}

.reporter_profile{
	width:65%;
}


.on_air{
	font-size: 1.4rem;
	font-weight: bold;
}
.name{
	font-size: 2rem;
	font-weight: bold;
}

.profile_txt{
	font-size: 1.2rem;
}


@media only screen and (max-width: 750px) {
.list li{
	width:100%;
}
	
}


/*もっとみるボタン*/


.list li.is-hidden {
	display: none;
    /*opacity: 0;*/
    height: 0;
    margin: 0;
}

.more {
    position: relative;
    height: 6rem;
    width: 40%;
	background-color: white;
	color:#1a8587;
	border-radius: 30px;
	margin: 0 auto 5rem;
	font-size: 2rem;
}
.more button {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    /* buttonのスタイル削除 */
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}

.more button:hover{
        opacity:0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha( opacity=70 )";
		transition: all 0.4s ease 0s;
  }


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

	.more {
    width: 70%;
	font-size: 1.6rem;
}
}

/*パーソナリティ(タイトル/アイコン)
---------------------*/
.ttl_message{
	margin-bottom: 2rem;
	text-align: center;
}

.ttl_message img{
	width: 40%;
}


#message_btn_box{
	width: 960px;
	margin: 5rem auto;
}

.message_btn{
	margin: 1rem 0;	
}

.message_btn_txt{
	font-size: 2rem;
	text-align: center;
	color:white;
}

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

.ttl_message img{
	width: 70%;
}


#message_btn_box{
	width: 90%;
	margin: 3rem auto;
}
	

.message_btn_txt{
	font-size: 1.4rem;
}
	
}

a.button {
	max-width: 540px;
  display: block;
  color: #ffffff;
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  padding: 3rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid transparent;
  border-radius: 6px;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
}
a.button span {
  position: relative;
  display: block;
  transform: translate(-3px, -3px);
  transition: 0.3s;
  z-index: +1;
}
a.button:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: #1755aa;
  border-radius: 6px;
  box-sizing: border-box;
  transform: translate(-3px, -3px);
  transition: 0.3s;
}
a.button:hover span {
  transform: translate(0, 0);
}
a.button:hover:after {
  transform: translate(0, 0);
}

@media all and (max-width: 767px) {
  a.button {
    font-size: 1.5rem;
	  padding: 2rem;
  }
}

/* header/footer --------------------*/

.header_simple {
   background: #333333;
}

.footer_simple {
    background: #333333;
}

.footer_simple .copyright{
	color: #fff;
}