@charset "utf-8";
/* CSS Document */

/*home mv*/
#home .mv {
	padding-top: 6%;
	position: relative;
	background-image: url("../img/top/mv_bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
	padding-bottom: 13%;
	box-sizing: border-box;
}

#home .mv .inner{
	position:relative;
	top:0;
	z-index: 1;
	text-align:center;
}

#home .mv h2.catch{
	transform:rotate(-7deg);
	font-size: 4.0rem;
	/*margin-left: 11%;*/
	background-image: url("../img/top/mv_catch_bg.png");
	background-repeat: no-repeat;
	background-position: center 6px;
	background-size: 90% 90%;
	margin-top:-40px;
	padding: 0% 6% 6% 12%;
	box-sizing: border-box;
	text-align: left;
	letter-spacing: 5px;
	text-shadow: white 2px 0px 2px, white -2px 0px 2px, white 0px -2px 2px, white -2px 0px 2px, white 2px 2px 2px, white -2px 2px 2px, white 2px -2px 2px, white -2px -2px 2px, white 1px 2px 2px, white -1px 2px 2px, white 1px -2px 2px, white -1px -2px 2px, white 2px 1px 2px, white -2px 1px 2px, white 2px -1px 2px, white -2px -1px 2px, white 1px 1px 2px, white -1px 1px 2px, white 1px -1px 2px, white -1px -1px 2px, 5px 4px 4px rgba(0, 0, 0, 0.8);
	height: 340px;
}

#home .mv h2.catch b{
	color:#c1272d;
	font-size:7rem;
}

#home .mv h2.catch strong{
	margin-left:2em;
	margin-top: -37px;
	display:block;
	color:#c1272d;
	font-size:7rem;
}

#home .mv img.mv_logo{
  width: 60%;
  height: auto;
  margin-top: -12%;
  position: relative;
  z-index: 1;
}

#home .mv ul{
	display:flex;
	justify-content: center;
	align-items: center;
}

#home .mv ul li img{
	height:85px;
	width:auto;
	transform: scale(1);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

#home .mv ul li img:hover{
	transform: scale(1.1);/*拡大の値を変更したい場合はこの数値を変更*/
}

#home .mv ul li:first-child img{
	margin-right:40px;
}




/*home content*/
#home section.content{
	background-image:url("../img/top/content_bg.png");
	background-repeat: repeat;
	background-position: left top;
	background-size: auto;
	padding-top:200px;
	box-sizing: border-box;
}

#home section.content div.topics{
	background-color:#fff;
	padding:50px 85px;
	box-sizing: border-box;
	position: relative;
	margin-bottom:100px;
}

#home section.content div.topics h3{
  position: absolute;
  width: 13%;
  background-image: url("../img/top/topics_bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  padding: 4.5% 3.5% 3.5% 3.5%;
  left: -2.2%;
  top: -10%;
}

#home section.content div.topics h3 span{
  font-family: "Kalam", cursive;
  font-weight: 400;
  font-style: normal;
  color: #00a99d;
  font-size: 2.6rem;
  transform: rotate(-24deg);
  display: block;
}

#home section.content div.topics ul{
  height: 385px;
  overflow-y: scroll;
  padding: 0 20px;
  box-sizing: border-box;
}

#home section.content div.topics ul li{
	padding-bottom:20px;
	margin-bottom: 20px;
	border-bottom: dashed 1px #49290e;
}

#home section.content div.topics ul li p.date{
	margin-bottom:10px;
}

#home section.content div.topics ul li p.date span{
	display:inline-block;
	margin-left: 20px;
	font-size: 0.9rem;
	background-color: #00a99d;
	padding:3px 15px 0;
	box-sizing: border-box;
	color: #fff;
}

#home section.content div.topics ul li p.date span.update{
	background-color: #f7931e;
}

#home section.content .intro{
	margin-bottom:150px;
	padding:50px;
	background-color:#fff5e6;
	box-sizing: border-box;
}

#home section.content .intro h3{
	text-align:center;
	font-size:2rem;
	margin-bottom: 30px;
}

#home section.content .intro h3 span.en{
	display:block;
	color:#b48a76;
	font-weight: normal;
	font-family: "Kalam", cursive;
}

#home section.content .intro h3 strong{
	color:#c1272d;
	font-size:4rem;
}

.is-pc{
	display:block;
}

.is-sp{
	display:none;
}


@media only screen and (max-width: 1023px){
#home .mv h2.catch {
    margin-top: -2%;
    padding: 0% 0% 6% 5%;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
	
#home .mv h2.catch strong {
  margin-left: 1em;
  margin-top: -37px;
  display: block;
  color: #c1272d;
  font-size: 7rem;
}
	
#home section.content {
  position: relative;
  z-index: -2;
	padding-top: 120px;
}
	
#home section.content div.topics h3 {
  width: 16%;
}
	
#home section.content div.topics {
  padding: 50px 40px;
}
	
}

@media only screen and (max-width: 768px){
header .inner > ul > li:last-child .app_bnr {
    display: none;
  }
	
#home .mv {
  padding-top: 63px;
  padding-bottom: 30%;
}
	
#home .mv h2.catch  {
    font-size: 1.8rem;
    height: 210px;
    letter-spacing: 2px;
    margin-top: 0;
    padding: 0% 0% 6% 9%;
    background-position: center -15px;
    box-sizing: border-box;
    width: 93%;
    margin-left: auto;
    margin-right: auto;
  }
	
#home .mv h2.catch b,
#home .mv h2.catch strong{
  font-size: 3rem;
}
	
#home .mv h2.catch strong {
    margin-top: -9px;
}
	
#home .mv img.mv_logo {
  width: 75%;
  margin-top: -25%;
}

#home .mv ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
	
#home .mv ul li img {
  height: auto;
  width: 60%;
}
	
#home .mv ul li:first-child img {
  margin-bottom: 10px;
	margin-right:0;
}
	
 #home section.content div.topics h3 {
  width: 33%;
  left: -5.2%;
  top: -7%;
	 padding: 4.5% 3.5% 3.5% 7.5%;
 }
	
#home section.content div.topics h3 span {
  font-size: 1.8rem;
  transform: rotate(-17deg);
}
	
#home section.content div.topics {
    padding: 30px 20px;
  }
	
#home section.content div.topics ul li {
  font-size: 0.9rem;
}
	
#home section.content div.topics ul {
  height: 345px;
}
	
#home section.content .intro {
  padding: 20px;
	margin-bottom: 100px;
}
	
#home section.content .intro h3 {
  font-size: 1.3rem;
}
	
#home section.content .intro h3 strong {
  font-size: 1.8rem;
}

	
	
.is-pc{
	display:none;
}

.is-sp{
	display:block;
}
}