@charset "utf-8";

/* RESPONSIVE BOTH---------------------------------------------------- */

body {
  font-family: Helvetica, ArialMT, "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
  font-weight: 200;
  font-size: 100%;
  background-color: #fbf9eb;
  color: #1f211f;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100vh;
  text-align: center;
  line-height: 0;
  letter-spacing: 0.025em;
}

/* clearfix */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

.clearfix {
  display: inline-block;
  min-height: 1%;
  /* for IE 7 and MacIE5.5*/
  width: 100%;
}

a:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 0;
}

/*a:hover{
filter: brightness(110%);
}*/

img {
  max-width: 100%;
}

.fbold{
	font-weight: bold;
	font-weight: 400;
	font-size: 22px;
}

.contents {
  margin: 0 auto;
}

.contents_inr {
  width: 100%;
  margin: 0;
}

.notice {
  padding: 5px 0;
  line-height: 1.2;
}

.notice p {
  font-weight: bold;
}

.notice a {
  text-decoration: underline;
  color: #08172b;
}

nav,footer{
    line-height: 1.6;
}

/*nav----------------- */
nav {
  background: #fbf9eb;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9998;
  color: #c6002f;
}

nav .text {
  display: inline-block;
  vertical-align: sub;
  font-weight: 600;
}

nav .social {
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
}

nav .social a:hover{
	filter: none;
}

nav .cross {
      display: inline-block;
      padding: 0 3px;
      vertical-align: top;
      font-size:24px;
      margin: 0 5px;
}

img.logo-menu {
    padding: 15px 0 15px 10px;
    width: 50%;
}

/*nav----------------- */
/*footer----------------- */
footer{
    background-color: #fbf9eb;
    color: #fff;
}

footer .wrap{
    /* width:860px; */
    margin:0 auto;
    width: 95%;
}

dl {
    padding-top: 15px;
    /* display: flex; */
    /* width: 814px; */
    margin: 0 auto;
    /* width: 95%; */
}
dl dt img {
    /* width: 436px; */
    padding: 20px 0px 20px 0;
    width: 28%;
}
dl dd {
    /* padding-left: 30px; */
    font-weight: normal;
    color: #11512b;
    text-align: left;
    font-size: 14px;
}

.txt-follow{
    padding: 8px 0 0 0;
}

ul.btn-sns{
    width: 60%;
    padding: 30px 0;
    box-sizing: content-box;
}
ul.btn-sns li img{
    width: 90px;
}


.box-sns {
	background:transparent url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/line_bottom.png") repeat-x 0 bottom;
	padding: 22px 0;
}

ul.btn-sns{
    display:flex;
    display: -webkit-flex;
    justify-content: space-around;
    margin: 0px auto;
    padding: 0;
}
.txt-follow{
    color: #11512b;
    text-align: center;
    font-weight: 700;
}
.photo{
  margin: 30px auto;
  /* width: 750px; */
}

.link-logo img{
    width: 96px;
    padding: 28px 22px 10px 16px;
}

.link-logo .k_logo{
  width: 590px;
  padding: 62px 30px 77px 16px;
}

footer a:hover{
filter: brightness(110%);
}

footer .contents{
    /* border-top: 4px solid #fff; */
}

.copyright {
    margin-top: 4px;
	color: #c5012b;
    /* border-top: 1px solid #fff; */
}

.friend__heading {
    font-family: "游ゴシック", YuGothic,"Yu Gothic","メイリオ", sans-serif;
    font-weight: 600;
    color: #fff;
    font-style: oblique;
    font-style: italic;
}

.friend__snsHeading {
    color: #fff;
    font-family: "Open Sans", Helvetica, ArialMT, "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
    font-weight: 600;
    font-size: 12px;
}

.lettar a{
text-decoration:none;
color:#fff;
}

.friend__list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.pagetop {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 99;
}

.pagetop .contents_inr{
    position: relative;
}

.pagetop__btn {
    display: block;
    position: absolute;
    opacity: 1;
    bottom: 10px;
    right: -10px;
}

/*footer----------------- */
 /*::::::::::中身::::::::::*/
a.btn{
    display: inline-block;
    box-sizing: border-box;
    border-radius: 40px;
    }

.main{
    background-color: #0ab7cf;
    color: #fff;
    line-height: 1.8;
    }

.main h2+p a{
    color: #e60113;
    text-decoration: underline;
}

.main .bold{
    font-weight: bold;
}

.main a.btn{
        background-color: #01502c;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
}

.main a.btn:hover{
        background-color: #fff;
        color: #01502c;
}

.intro{
	 font-family: 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'HGP明朝B', serif;
	line-height: calc(40/22);
}

.yellowbox{
	background-color: #fbcf38;
	box-sizing: border-box;
	border-radius: 30px;
}

.yellowbox .howTo article{
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 30px;
	color: #08172b;
	position: relative;
	text-align: left;
}

.yellowbox .howTo article:before{
	content: '';
	position: absolute;
	background-size: 100%;
}

.yellowbox .howTo article:nth-of-type(1):before{
	background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/howTo_01.png");
}

.yellowbox .howTo article:nth-of-type(2):before{
	background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/howTo_02.png")
}

.yellowbox .howTo article:nth-of-type(3):before{
	background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/howTo_03.png")
}

.yellowbox .howTo article:nth-of-type(4):before{
	background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/howTo_04.png")
}

.yellowbox .howTo article figcaption{
	line-height: 1.75;
}


.yellowbox .howTo article figcaption span{
	display: inline-block;
	font-weight: bold;
	line-height: 2;
}

.yellowbox .destination{
	position: relative;
	}

.yellowbox h2{
	display: inline-block;
	border-top:#555555 solid 3px;
	border-bottom:#555555 solid 3px;
	box-sizing: border-box;
}

.yellowbox .notice,.yellowbox .text{
	color: #08172b;
}

.yellowbox .notice,.yellowbox .text{
	line-height: 2;
}

.yellowbox .weight{
	font-weight:bold;
}

.yellowbox .midashi{
	font-weight:bold;
}

.yellowbox p.text:p:nth-of-type(1){
	line-height:calc(36/24);
}

.yellowbox .notice{
	text-align: left;
}

 /*::::::::::中身::::::::::*/
/* RESPONSIVE PC---------------------------------------------------- */
@media screen and (min-width: 940px) {

  #element {
    margin: 40px auto;
    text-align: center;
  }

  .hide_pc {
    display: none;
  }

  .hide_sp {
    display: block;
  }
    
  .item {
    margin: -16px auto;
  }

  .app {
    margin-top: 50px;
    margin-bottom: 0;
     color: #fff;
    font-weight: bold;
    text-align: center;
  }

  .app .radio {
    margin-bottom: 50px;
    margin-top: 40px;
  }

  .app .radio img {
    width: 123px;
    margin: 0 20px;
  }

  /*::::::::::contents::::::::::*/

  .contents {
    width: 940px;
  }

 	.contents h2{
		font-size:30px;
		padding-top: 9px;
		padding-bottom: 8px;
		line-height: 1.0;
	}
	
	.contents h2{
		padding-right: calc(105.594px / 2);
		padding-left: calc(105.594px / 2);
		color: #fff;
	}

.contents h2{
	display: inline-block;
	border-top:#fff solid 3px;
	border-bottom:#fff solid 3px;
	box-sizing: border-box;
	margin: 0px auto 20px;
}

  /*::::::::::contents::::::::::*/

  /*::::::::::付属物::::::::::*/

  .cr {
    text-align: center;
    color: #de3437;
    margin: 20px 0 50px;
    font-size: 11px;
  }

  .school {
    margin: 30px auto 0;
    text-align: center;
  }

  .school img {
    width: 125px;
  }

  .school a:hover {
    opacity: 0.8;
  }
/*nav----------------- */
    
  nav .social {
    max-width: 940px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    padding: 5px 40px;
    position: relative;
  }

  nav .social .logo a:first-child img {
    height: 30px;
    vertical-align: middle;
  }
    
  nav .social .logo a:last-child img{
    height: 36px;
    vertical-align: middle;
  }

  nav .cross{
        vertical-align: middle;
    }
    
  nav .social p {
    position: absolute;
    text-align: right;
    top: 6px;
    /*right: 42px;*/
    right: 63px;
  }

  nav .social p a img {
    height: 30px;
    margin-left: 5px;
    padding-top: 3px;
  }

  nav .social img {
    vertical-align: middle;
  }
    
  nav .text {
  display: inline-block;
  vertical-align: sub;
    }

/*nav----------------- */
/*フッター共通ここから*/
	footer {
    padding: 46px 0 100px;
	}
    
	footer .contents_inr {
    padding: 0;   
	}

	footer .wrap{
    width:860px;
    margin: -330px auto 0;
	}

   dl {
    padding-top: 50px;
    display: flex;
    width: 860px;
    margin: 0 auto;
	}

	dl dt img {
    width: 342px;
    padding: 20px 30px 20px 0;
    width: 88%;
 }
	
	dl dd {
    padding-left: 30px;
    font-weight: normal;
    color: #11512b;
    text-align: left;
    font-size: 18px;
	}
	
	.txt-follow{
    padding: 0px 0 0 0;
	}
	
	ul.btn-sns {
    width: 335px;
    padding-bottom: 40px;
	}

	ul.btn-sns li img{
    width: 114px;
    height: 114px;
	}


	.box-sns {
		background:transparent url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/line_bottom.png") repeat-x 0 bottom;
		padding: 22px 0;
	}
	
	ul.btn-sns{
    display:flex;
    display: -webkit-flex;
    justify-content: space-around;
    margin: 0px auto;
    padding: 0;
	}
	
	.txt-follow{
    color: #11512b;
    text-align: center;
    font-weight: 700;
	}
	
	.photo{
  	margin-top:30px;
	}
	
	.banner img{
    width: 730px;
    margin-bottom: 10px;
	}
	
	.link-logo img{
    width: 110px;
    padding: 28px 22px 10px 16px;
	}
    
    .friend {
    margin: 30px auto 0;
    text-align: center;
    border-bottom: 1px solid #fff;
    }  

    .friend__heading {
    font-size: 15px;
    width: 376px;
    margin: 0 auto;
    }

    .friend__list {
    width: 326px;
    margin: 22px auto;
    }

    .friend__list a img {
    width: 88px;
    height: 88px;
    }

    .copyright__logo {
    margin-top: 4px;
    border-top: 4px solid #fff;
    padding-top: 46px;
    }
    
    .copyright__logo img {
    width: 94px;
    }
    
    .copyright__text {
    margin-top: 24px;
    font-size: 12px;
    } 
    
    .footer_banner{
        width: 730px;
        margin: 0 auto;
        padding-bottom: 36px;
    }
    
    .footer_banner img{
        width: 730px;
        height: 90px;
    }
    
  /*::::::::::付属物::::::::::*/
    
  /*::::::::::中身::::::::::*/
    body{
    /*background-attachment: fixed;*/
    }
    
    a.btn{
        padding: 15px 30px;
    }
    
    .main .contents_inr{
        padding: 0px 0 39px;
    }
    
	.main h1{
		width: 552px;
		box-sizing: border-box;
		padding: 7.8px 0 0;
		margin: 46px auto 0;
	}
    
    .main a.btn{
        font-size:22px;
    }
    
	.main{
		background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/bg_pc_03.jpg?01");
		background-repeat: no-repeat;
		background-position: center bottom;
		padding-bottom: 1800px;
	}

ul.tegami{
	width: 760px;
	margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
}
ul.tegami li{
	/* display:table-cell; */
	width:375px;
}	

.btn-more {
    background-color: #fbcf38;
    color: #fff;
    border-radius: 40px;
    padding: 8px 0;
    width: 250px;
    font-size: 18px;
    text-align: center;
    margin: 50px auto;
}
	.bg1{
		background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/bg_pc_01.jpg");
		background-repeat: no-repeat;
		background-position: center -46px;
		/* padding-bottom: 46px; */
	}
	
	.bg2{
		background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/bg_pc_02.jpg");
		background-repeat: no-repeat;
		background-position: center -46px;
		background-repeat:repeat;
		/* margin-top: 20px; */
		/* padding-top: 39.9px; */
	}
	
	.intro{
		margin: 101.9px auto 0;
		font-size: 22px;
	}
	
	.yellowbox{
		width: 860px;
		margin: 89.9px auto 170px;
		padding:23.6px 61px 45px;
	}
	
	.yellowbox h2{
		font-size:30px;
		padding-top: 9px;
		padding-bottom: 8px;
		line-height: 1.0;
	}
	
	.yellowbox h2{
		padding-right: calc(105.594px / 2);
		padding-left: calc(105.594px / 2);
		color: #555555;
	}

	.yellowbox h1{
		font-size:30px;
		background: #fff;
		width:300px;
		color:#555555;
		padding-bottom:5px;
	}
	
	.yellowbox .howTo{
		width: 670px;
		margin: 0 auto;
		padding: 45px 40px 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.yellowbox .howTo article{
		width: 320px;
		padding: 15px 20px
	}
	
	.yellowbox .howTo article:before{
		width: 56px;
		height: 56px;
		top:-30px;
		left: 17px;
	}
	
	.yellowbox .howTo article:nth-of-type(3),.yellowbox .howTo article:nth-of-type(4){
		margin-top: 45px;
	}
	
	.yellowbox .howTo article figcaption span{
		padding-bottom: 4px;
	}
	
	.yellowbox .destination{
		padding: 0 40px 170px;
	}
	
	.yellowbox .destination h2{
		margin-top: 58px;
		padding-right: calc(227.188px / 2);
		padding-left: calc(227.188px / 2);
	}
	
	.yellowbox .destination:after{
		content: '';
		width: 241px;
		height: 192px;
		background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/stamp.png");
		background-size: 100%;
		background-repeat: no-repeat;
		position: absolute;
		bottom: 0; 
		right: -20px;
	}
	
	.yellowbox > p{
		margin-top: 21.3px;
	}
	
	.yellowbox > p img{
		width: 728px;
	}

	
	.yellowbox > .present img{
		width: 464px;
	}
	
	.yellowbox p.text:nth-of-type(1){
		font-size:24px;
		line-height: 1.5;
		margin-top: 29.9px;
	}
	
	.yellowbox p.text:nth-of-type(2){
		font-size:18px;
		line-height: 2;
		margin-top: 11.2px;
	}
	
	.yellowbox p.text:nth-of-type(3){
		font-size:14px;
		line-height: 2;
	}

.yellowbox .midashi{
	font-size:20px;
}

.lettar{
	font-size:20px;
	background:#c60230;
	width:350px;
	margin: 0px auto -56px;
	/* border-radius:40px; */
	/* border:1px solid; */
	line-height:1.3;
	padding:7px;
}
	
  /*::::::::::中身::::::::::*/


}

/* RESPONSIVE TABLET---------------------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 939px) {
  .hide_pc {
    display: none;
  }

  .hide_sp {
    display: block;
  }

 ul.tegami{
	width: 700px;
	display:table;
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 8px 0;　/*数字は「左右、上下」*/
}
ul.tegami li{
	display:table-cell;
	
}	

 	.contents h2{
		font-size:30px;
		padding-top: 9px;
		padding-bottom: 8px;
		line-height: 1.0;
	}
	
	.contents h2{
		padding-right: calc(105.594px / 2);
		padding-left: calc(105.594px / 2);
		color: #fff;
	}

.contents h2{
	display: inline-block;
	border-top:#fff solid 3px;
	border-bottom:#fff solid 3px;
	box-sizing: border-box;
	margin: 0px auto 20px;
}

.btn-more {
    background-color: #fbcf38;
    color: #fff;
    border-radius: 40px;
    padding: 8px 0;
    width: 250px;
    font-size: 18px;
    text-align: center;
    margin: 50px auto;
}
    
    /*::::::::::contents::::::::::*/
   .main .logo{
    background:url(https://podcasts.tfm.co.jp/lock/2020/summerletter/img/photo.jpg);
    background-size: 100%;
    background-repeat:no-repeat;
    background-position: top 91% center;
    margin: 6px auto;
    position: relative;
    }  
   
  .contents {
    width: 95.28%;
  }

  /*::::::::::contents::::::::::*/

  /*::::::::::付属物::::::::::*/
  /*nav----------------- */ 
    nav{
        height: 38px;    
    }
    
    nav .social {
        max-width: 90%;
    }
    
    nav .logo{
        display: inline-block;
        margin-top: 1px;
    }
    
    nav .social .logo a:first-child img {
        height: 30px;
        vertical-align: text-top;
    }
    
    nav .social .logo a:last-child img {
        height: 23px;
        /* vertical-align: text-top; */
        padding-top: 6px;
    }

    nav .cross {
        display: inline-block;
        font-size: 21px;
        margin: 0 5px;
    }
    nav .social p {
        position: absolute;
        text-align: right;
        top: 5px;
        right: 24.5px;
    }

    nav .social p a img {
        height: 29px;
        margin-left: 3px;
    }
    
    nav .social img {
        vertical-align: middle;
    }
/*nav-------*/
    
    footer {
        padding: 46px 0 100px;
     
    }
    
    footer .contents_inr {
    	padding: 0 0 53px;
    }
    
    
	footer .wrap{
		margin: -230px auto 0;
		width: 95%;
	}

   dl {
		padding-top: 50px;
		display: flex;
		/* width: 814px; */
		margin: 0 auto;
		/* width: 95%; */
	}
	dl dt img {
		width: 436px;
		padding: 20px 30px 20px 0;
	}
	dl dd {
		padding-left: 30px;
		font-weight: normal;
		color: #11512b;
		text-align: left;
		font-size: 18px;
	}
	.txt-follow{
		padding: 8px 0 0 0;
	}
	ul.btn-sns {
		width: 277px;
		padding-bottom: 40px;
	}
	ul.btn-sns li img{
		width: 99px;
		height: 114px;
	}


.box-sns {background:transparent url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/line_bottom.png") repeat-x 0 bottom;padding: 22px 0;}
ul.btn-sns{
    display:flex;
    display: -webkit-flex;
    justify-content: space-around;
    margin: 0px auto;
    padding: 0;
}
.txt-follow{
    color: #11512b;
    text-align: center;
    font-weight: 700;
}
.photo{
  margin: 30px auto;
  /* width: 750px; */
}
.ban
    .copyright__logo {
        margin-top: 4px;
        border-top: 4px solid #fff;
        padding-top: 46px;
    }

    .copyright__logo img {
        width: 94px;
    }

    .copyright__text {
        margin-top: 24px;
        font-size: 12px;
    } 
    
    .footer_banner{
        width: 730px;
        margin: 0 auto;
        padding-bottom: 36px;
    }
    
    .footer_banner img{
        width: 94.9%;
    }

	 .link-logo img{
		width: 96px;
		padding: 28px 22px 10px 16px;
	}
  /*::::::::::付属物::::::::::*/
    
  /*::::::::::中身::::::::::*/
    
    a.btn{
        padding: 15px 30px;
    }
    
    .main .contents_inr{
        padding: 22px 0 35px;
    }
     
    /*::::::::::中身::::::::::*/
    body{
    /*background-attachment: fixed;*/
    }
    
    a.btn{
        padding: 15px 30px;
    }
    
    .main{
		background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/bg_pc_03.jpg?01");
		background-repeat: no-repeat;
		background-position: center bottom;
		padding-bottom: 1048px;
		background-size: contain;
	}
	
	.bg1{
		background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/bg_pc_01.jpg");
		background-repeat: no-repeat;
		background-position: center -46px;
	}
	
	.bg2{
		background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/bg_pc_02.jpg");
		background-repeat: no-repeat;
		background-position: center -46px;
		margin-top: 0px;
		padding-top: 89.9px;
	}
    
    .main .contents_inr{
        padding: 0px 0 55px;
    }
    
	.main h1{
		width: 552px;
		box-sizing: border-box;
		padding: 7.8px 0 0;
		margin: 46px auto 0;
	}
    
    .main a.btn{
        font-size:22px;
    }
    
	.intro{
		margin: 101.9px auto 0;
		font-size: 22px;
	}
	
	.yellowbox{
		width: 100%;
		margin: 89.9px auto 30px;
		padding:23.6px 0 45px;
	}
	
	.yellowbox h2{
		font-size:30px;
		padding-top: 9px;
		padding-bottom: 8px;
		line-height: 1.0;
		padding-right: calc(105.594px / 2);
		padding-left: calc(105.594px / 2);
		color: #555555;
	}
	
	.yellowbox .howTo{
		width: 670px;
		margin: 0 auto;
		padding: 45px 0 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.yellowbox .howTo article{
		width: 320px;
		padding: 15px 20px
	}
	
	.yellowbox .howTo article:before{
		width: 56px;
		height: 56px;
		top:-30px;
		left: 17px;
	}
	
	.yellowbox .howTo article:nth-of-type(3),.yellowbox .howTo article:nth-of-type(4){
		margin-top: 45px;
	}
	
	.yellowbox .howTo article figcaption span{
		padding-bottom: 4px;
	}
	
	.yellowbox .destination{
		padding: 0 40px 170px;
	}
	
	.yellowbox .destination h2{
		margin-top: 58px;
		padding-right: calc(227.188px / 2);
		padding-left: calc(227.188px / 2);
	}

	.yellowbox h1{
		font-size:30px;
		background: #fff;
		width:300px;
		color:#555555;
		padding-bottom:5px;
	}
	
	.yellowbox .destination:after{
		content: '';
		width: 241px;
		height: 192px;
		background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/stamp.png");
		background-size: 100%;
		background-repeat: no-repeat;
		position: absolute;
		bottom: 0; 
		right: 4%;
	}
	
	.yellowbox > p{
		margin-top: 21.3px;
	}
	
	.yellowbox > p img{
		width: 92%;
		margin: auto;
	}
	
	.yellowbox p.text:nth-of-type(1){
		font-size:24px;
		line-height: 1.5;
		margin-top: 29.9px;
	}
	
	.yellowbox p.text:nth-of-type(2){
		font-size:18px;
		line-height: 2;
		margin-top: 48.2px;
	}
	
	.yellowbox p.text:nth-of-type(3){
		font-size:14px;
		line-height: 2;
	}

.lettar{
	font-size:20px;
	background:#C60230;
	width:400px;
	margin: 80px auto 0px;
	/* border:1px solid; */
	line-height:1.3;
	padding: 11px;
}
    
  /*::::::::::中身::::::::::*/
      
}

/* RESPONSIVE SP---------------------------------------------------- */

@media screen and (max-width: 767px) {
  .hide_pc {
    display: block;
  }
    
  .hide_sp {
    display: none;
  }
    
  #element {
    margin: 25px auto;
    width: 100%;
    text-align: center;
  }

 
.fbold{
	font-weight: bold;
	font-weight: 400;
	font-size: 18px;
}

  .item {
    margin: 0 auto;
    /* padding:0 10px; */
  }

  .item ul .mc {
    margin: 24px auto;
    margin-bottom: 15px;
    text-align: center;
  }

  .item .desc {
    font-size: 90%;
    padding: 0 5px;
  }

  .item ul {
    padding-top: 5px;
    width: 100%;
    margin: 0 auto;
  }

  .item ul li a {
    display: block;
  }

  .item ul li img {
    text-align: center;
    width: 35%;
  }

  .item .desc {
    padding: 0px 0px;
    font-weight: bold;
    color: #db1728;
    padding-top: 10px;
    font-size: 12px;
    line-height: 1.6;
    width: 100%;
    /* margin: 0 auto; */
    text-align: left;
    width: 95%;
    margin: 0 auto;
  }

  .item .desc a img {
    width: 100%;
    margin-top: 20px
  }

	.contents h2{
		width: 45.8vw;
		font-size:16px;
		padding-top: 9px;
		padding-bottom: 10px;
		line-height: 1.0;
		border-top: #fff solid 2px;
		border-bottom: #fff solid 2px;
		color: #fff;
		margin:0 auto 30px;
	}

  .app {
    /* margin-top: 20px; */
    /* margin-bottom: 20px; */
    color: #db1728;
    width: 95%;
    margin: 20px auto 0;
    text-align: center;
  }

  .app .radio {
    margin-bottom: 0;
    margin-top: 20px;
  }

  .app .radio img {
    width: 24%;
    margin: 0px 16px;
  }

  .hide_sp {
    display: none;
  }
    
.contents_inr {
  width: 94.53%;
  margin: 0 auto;
}
 
  /*::::::::::付属物::::::::::*/
  /*---nav---*/    
  nav .social {
    padding: 5px 2%;
    position: relative;
  }

  nav .social .logo {
      display: inline-block;
      margin-top: 2px;
    }

  nav .social .logo a:first-child img {
        height: 30px;
        vertical-align: middle;
    }
    
  nav .social .logo a:last-child img {
        height: 32px;
        vertical-align: middle;
    }

  nav .cross {
    vertical-align: middle;
    display: inline-block;
    font-size: 18px;
    margin: 0 5px;
    }

  nav .social p {
    position: absolute;
    text-align: right;
    top: 7px;
    right: 17px;
    }

  nav .text {
    display: none;      
    }
    
  nav .social p a img {
    height: 30px;
    margin-left: 3px;
  }

  nav .social img {
    vertical-align: middle;
  }
    /*---nav---*/
    
	footer{
		background-color: transparent;
	}
    
	footer .wrap{
	    margin: -90px auto 0;
	}
	
    footer .contents {
		border-top: none;
		padding: 10px 10px 20px;
    }
    
    footer .contents_inr{
    	padding: 16px 4% 53px;    
    }
    
    .copyright {
		margin-top: 4px;
		border-top: none;
		font-size: 12px;

    }
    
    .friend__heading {
    font-size: 14px;
    }
    
    .friend__list {
    margin: 16px auto;
    width: 260px;
    }
    
    .friend__list li {
    padding: 1px;
    }
    
    .friend__list a img {
    width: 70px;
    height: 70px;
    }
    
    .copyright__logo {
    margin-top: 4px;
    padding-top: 10px;
    }
    
    .copyright__logo img {
    width: 94px;
    }
    
    .copyright__text {
    margin-top: 24px;
    font-size: 9px;
    }
    
    .footer_banner{
        width: 100%;
        margin: 0 auto;
        padding-bottom: 36px;
    }
    
    .footer_banner img{
        width: 100%;
    }
    
	.link-logo .k_logo {
    	width: 76%;
    	padding: 48px 22px 45px 16px;
 }
	
    .pagetop__btn {
    display: block;
    position: absolute;
    opacity: 1;
    bottom: 10px;
    right:  0px;
    }
    
    .pagetop__btn img {
    width: 60px;
    }
    /*::::::::::付属物::::::::::*/
    
    /*::::::::::中身::::::::::*/
    
    a.btn{
        padding: 8px 29px;
    }
    
    .main .contents_inr{
        padding: 10px 0 25px;
    }
    
	/*::::::::::中身::::::::::*/
    body{
    /*background-attachment: fixed;*/
    }
    
    a.btn{
        padding: 15px 30px;
    }
    
    .main .contents_inr{
        padding: 0px 0 71px;
    }

   .btn-more {
    background-color: #fbcf38;
    color: #fff;
    border-radius: 40px;
    padding: 8px 0;
    width:60%;
    font-size: 18px;
    text-align: center;
    margin: 0px auto;
}
    
	.main h1{
		width: 82.93%;
		box-sizing: border-box;
		padding: 7.8px 0 0;
		margin: 46px auto 0;
	}
    
    .main a.btn{
        font-size:22px;
    }
    
	.intro{
		margin: 22px auto 0;
		font-size: 0.8rem;
	}
	
	.yellowbox{
		width: 100%;
		margin: 0 auto;
		padding:23.6px 0;
		border-radius: 20px;
	}
	
	.yellowbox h2{
		width: 38.8vw;
		font-size:16px;
		padding-top: 9px;
		padding-bottom: 10px;
		line-height: 1.0;
		border-top: #555555 solid 2px;
		border-bottom: #555555 solid 2px;
		color: #555555;
		margin-bottom: 1;
		margin-bottom: 16px;
	}
	
	.yellowbox .howTo{
		width: 92.94%;
		margin: 0 auto;
		padding: 45px 0 0;
		display: block;
		flex-wrap: nowrap;
		justify-content: center;
	}
	
	.yellowbox .howTo article{
		width: 100%;
		padding: 15px 20px;
		font-size: 0.9rem;
		border-radius: 10px;
	}
	
	.yellowbox .howTo article:before{
		width: 56px;
		height: 56px;
		top:-30px;
		left: 17px;
	}
	
	.yellowbox .howTo article:not(:first-of-type){
		margin-top: 45px;
	}
	
	.yellowbox .howTo article figcaption span{
		padding-bottom: 4px;
	}
	
	.yellowbox .howTo article:nth-of-type(3):before{
	background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/howTo_03.png")
}

.yellowbox .howTo article:nth-of-type(4):before{
	background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/howTo_04.png")
}
	
	.yellowbox .destination h2{
		margin-top: 40px;
	}

	.yellowbox h1{
		font-size:20px;
		background: #fff;
		width:40%;
		color:#555555;
		padding-bottom:5px;
	}
	
	.yellowbox > p{
		margin:21.3px auto 0;
	}
	
	.yellowbox > p img{
		width: 93.333%;
		margin: auto;
	}

	.yellowbox > .present img{
		width: 70%;
		margin: auto;
	}
	
	.yellowbox p.text{
		padding: 0 4%;
		/* margin-top: -10px; */
	}

	.yellowbox .weight{
		font-size: 0.8rem;
		line-height: 1.5;
		margin-top: 20px;
		margin-bottom:20px
	}
	
	.yellowbox p.text:nth-of-type(1),.yellowbox p.text:nth-of-type(2){
		font-size: 0.87rem;
		line-height: 1.5;
		margin-top: 8px;
	}
	
	.yellowbox p.text:nth-of-type(3){
		font-size: 0.8rem;
		line-height: 1.5;
		margin-top: 20px;
	}
	
	.yellowbox h4.notice{
		margin-top: 20px;
		font-weight: 200;
	}
    
	.yellowbox .notice{
		font-size: 0.75rem;
		line-height: 1.5;
		padding: 0 4%;
		width: 84%;
		margin: 0 auto;
	}

.lettar{
	font-size:20px;
	background:#C60230;
	width:60%;
	margin: 80px auto 0px;
	/* border:1px solid; */
	line-height:1.3;
	padding: 11px;
}
	
  /*::::::::::中身::::::::::*/
}



@media screen and (min-width: 1499px) {
	.main{
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: 100%;
		padding-bottom: 2017px;
	}
	
	.bg1{
		background-image: url("../img/inner/bg_pc_01.jpg");
		background-repeat: no-repeat;
		background-position: center -126px;
		background-size: cover;
		/* padding-bottom: 1px; */
	}
	
	.bg2{
		background-image: url("../img/inner/bg_pc_02.jpg");
		background-repeat:repeat;
		/* background-position: center -1000px; */
		background-size: 100%;
	}
	
	.yellowbox {
    margin: 89.9px auto 450px;
	}
	
	footer .wrap {
    margin: -380px auto 0;
	}

.lettar{
	font-size:20px;
	background:#C60230;
	width:400px;
	margin: 80px auto 0px;
	/* border:1px solid; */
	line-height:1.3;
	padding: 11px;
}


	
}

@media screen and (min-width: 1700px) {
	.main{
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: 100%;
		padding-bottom: 2300px;
	}
}

@media screen and (max-width: 459px){
	.main{
		background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/bg_sp_03.jpg?01");
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: 100%;
		padding-bottom: 800px;
	}
	
	.bg1{
		background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/bg_sp_01.jpg");
		background-repeat: no-repeat;
		background-position: center -49px;
		background-size: 100%;
	}
	
	.bg2{
		background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/bg_sp_02.jpg");
		background-repeat: no-repeat;
		background-position: center -46px;
		background-size: 100%;
		margin-top: -36px;
		/* padding-top: 89.9px; */
	}
}

/* RESPONSIVE SP横460px以上767px以下---------------------------------------------------- */
@media screen and (min-width: 460px)and (max-width: 767px) {
    .hide_sp{
        /* display: block; */
    }
    
    .hide_tablet{
        display: none;
    }
    
	.main{
		background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/bg_sp_03.jpg?01");
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: 770px;
		padding-bottom: 1693px;
	}
	
	.bg1{
		background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/bg_sp_01.jpg");
		background-repeat: no-repeat;
		background-position: center -76px;
		background-size: 100%;
	}
	
	.bg2{
		background-image: url("https://podcasts.tfm.co.jp/lock/2020/summerletter/img/bg_sp_02.jpg");
		background-repeat: repeat;
		background-position: center -46px;
		background-size: 100%;
		/* margin-top: -120px; */
		/* padding-top: 3.9px; */
	}

	.contents h2{
		width: 45.8vw;
		font-size:16px;
		padding-top: 9px;
		padding-bottom: 10px;
		line-height: 1.0;
		border-top: #fff solid 2px;
		border-bottom: #fff solid 2px;
		color: #fff;
		margin:0 auto 30px;
	}
	
	.intro {
    font-size: 1rem;
	}
	
	footer .wrap {
    margin: -160px auto 0;
	}
}
  
@media screen and (max-width: 320px) {
	
}