@charset "UTF-8";
/*================================================

------------- テーマカラー： #c70012 -------------
上記カラーを置換するとテーマカラーを変更できます。

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

/***** ▼base▼ *****/
html {
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;/*10px*/
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

body {
	/*文字色*/
	color: #111;
	font-family: 'Noto Sans JP', 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'sans-serif';
	font-size: calc(1.4rem + ((1vw - .32rem) * .41));
  font-weight: 700;
	line-height: 1.5;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

* {
	margin: 0 auto;
	padding: 0;
	word-break: break-all;
	list-style-type: none;
	border-style: none;
	font-style: normal;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

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

li{
	padding-left:1em;
	text-indent:-1em;
}

a {
	color: #f90;
	text-decoration: none;
}

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background: #fefefe;
}

main > section:nth-child(even){
	/*セクション背景(偶数)*/
  background: #fefefe;
}

main > section:nth-child(odd){
	/*セクション背景(奇数)*/
  background: #fefefe;
}

.content-wrap{
	max-width: 1024px;
  margin: 0 auto;
	padding: calc(3.4rem + ((1vw - .32rem) * 3.33)) calc(1.6rem + ((1vw - .32rem) * 15));
}

.content-wrap > *:not(:last-child){
	/*.content-wrap直下の子要素に任意のmargin-bottomを付与*/
	margin-bottom: calc(3.2rem + ((1vw - .32rem) * 3.33));
}

.d-flex {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
}
/***** ▲base▲ *****/

/*****▼ action ▼*****/
/*ホバー時に半透過*/
.hover-opacity{
	transition: .5s;
}
.hover-opacity:hover{
	opacity: .5;
}
/*スクロール時に半透過*/
.js_translucent{
	opacity: .4!important;
}

.hover-icon {
  transition: .3s;
}

.hover-icon:hover {
  transform: scale(1.05);
  filter: brightness(.9);
}
/*****▲ action ▲*****/

/*****▼ update ▼*****/
.update {
	padding: .8rem;
	font-size: .8em;
	text-align: center;
	color: white;
	background-color: #cc0813;
}
/*****▲ update ▲*****/

/*****▼ dl-top ▼*****/
#dl-top {
  color: #fff;
  background: #111;
}

.dl-top-wrap {
  max-width: 1280px;
  margin: 0 auto;
	padding: 1rem calc(1.6rem + ((1vw - .32rem) * 1.66));
}

.dl-top-catch {
  font-size: 2rem;
  text-align: center;
}

.dl-top-badge-wrap {
  justify-content: center;
}

.dl-top-badge {
  margin: 0;
  width: 50%;
  max-width: 180px;
}

.dl-top-badge a {
  display: block;
  width: 100%;
}

.dl-top-badge img {
  min-height: 40px;
  width: 100%;
}

.dl-top-badge.apple img  {
  padding: 1rem;
}

/*****▲ dl-top ▲*****/

/*****▼ merit ▼*****/
#merit h2 {
  width: 80%;
  max-width: 600px;
}

.merit-intro {
  max-width: 600px;
  flex-wrap: wrap;
  justify-content: center;
}

.merit-intro-icon {
  width: 33.3%;
  width: calc(100%/3);
  margin: 0;
  padding: .4rem .8rem;
}


.merits {
  padding: 3.2rem 0;
}

.merit {
  align-items: flex-start;
  padding: calc(1.6rem + ((1vw - .32rem) * 1.67)) 0;
}

.merit:not(:last-of-type) {
  margin-bottom: 6.4rem;
}

.merit > * {
  width: 50%;
}

.merit-txt {
  z-index: 1;
}

.merit-img {
  z-index: 0;
}

.merit-img img {
  margin-right: 0;
}

.merit-number {
  width: 30%;
  margin-right: calc(0.8rem + ((1vw - .32rem) * 0.83));
}

.merit-icon {
  width: 70%;
  max-width: 340px;
  margin: 0 0 1.6rem;
}

.merit-title,
.merit-cap {
  width: 120%;
  padding: .5rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  filter: drop-shadow(3px 3px 0px #ccc);
  transform: translateZ(0);
}

.merit-title {
  margin-bottom: 1rem;
  font-size: 2.8rem;
  font-size: calc(1.4rem + ((1vw - .32rem) * 1.46));
}

.merit-cap {
  font-size: calc(1.2rem + ((1vw - .32rem) * 0.63));
}

.merit-cap span {
  display: inline-block;
  font-size: 80%;
  font-weight: 500;
}

.merit:nth-last-of-type(even) {
  flex-direction: row-reverse;
}

.merit:nth-last-of-type(even) .merit-img img {
  margin: 0;
}

.merit:nth-last-of-type(even) .merit-number {
  margin-right: 0;
}

.merit:nth-last-of-type(even) .merit-icon {
  margin-left: calc(0.8rem + ((1vw - .32rem) * 0.83));
}

.merit:nth-last-of-type(even) .merit-title,
.merit:nth-last-of-type(even) .merit-cap {
  position: relative;
  right: 20%;
}

/*****▲ merit ▲*****/

/*****▼ dl-bottom ▼*****/
#dl-bottom {
  color: #fff;
  background: #cc0813;
}

.dl-bottom-wrap {
  position: relative;
  align-items: flex-start;
  height: calc(22rem + ((1vw - .32rem) * 41.67));
  max-width: 80rem;
  margin: 0 auto;
	padding: 1.6rem calc(1.6rem + ((1vw - .32rem) * 1.66)) 0;
  overflow: hidden;
}

.dl-bottom-wrap > * {
  width: 50%;
}

.dl-bottom-body {
  padding-left: .8rem;
}

.dl-bottom-catch {
  width: 100%;
  margin: .8rem auto;
  text-align: center;
  font-size: calc(1.4rem + ((1vw - .32rem) * 2.29));
}

.dl-bottom-search {
  width: 90%;
}

.dl-bottom-badge-wrap {
  width: 100%;
  justify-content: center;
}

.dl-bottom-badge {
  margin: 0;
  width: 100%;
  max-width: 180px;
}

.dl-bottom-badge p {
  text-align: center;
  display: none;
}

.dl-bottom-badge a {
  display: block;
  width: 100%;
}

.dl-bottom-badge img {
  min-height: 40px;
  width: 100%;
}

.dl-bottom-badge.apple img  {
  padding: 1rem;
}

.dl-bottom-qr {
  display: none;
}

/*****▲ dl-bottom ▲*****/

/***** ▼button▼ *****/
.btn-wrap{
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: justify;
  justify-content: space-between;
}

.btn{
	display: block;
	padding: 10px;
	color: #fff;
	font-size: 90%;
	text-align: center;
}

.sns-wrap{
	width: 70%;
	max-width: 250px;
}

.sns-btn{
	width: 30%;
}
/***** ▲button▲ *****/


/***** ▼footer▼ *****/
footer{
	height: 10vh;
	background: #000;
}

.footer-logo img{
	height: 6vh;
}

.footer-pagetop {
  position: fixed;
  bottom: 2vh;
  right: 5vw;
	z-index: 100;
	color: #c70012;
  width: calc(3rem + ((1vw - .32rem) * 1.04));
}
/***** ▲footer▲ *****/

@media (min-width:640px){
  .merit-img {
    width: 40%;
  }
  
  .merit-txt {
    width: 60%;
  }
  
  .dl-bottom-wrap {
    height: 34rem;
    padding-top: 3.2rem;
  }
}

@media (min-width:960px){
  .update {
    font-size: 1em;
    padding: 1.6rem;
  }

  .content-wrap {
		padding: 6.4rem 10rem;
	}
  
  .merit-img {
    width: 35%;
  }
  
  .merit-txt {
    width: 65%;
  }
  
  .merit-icon {
    position: relative;
    top: -50px;
  }
  
  .merit-number {
    margin-right: 1.6rem;
  }
  
  .merit-title,
  .merit-cap {
    position: relative;
    top: -150px;
    width: 71%;
    padding: 1rem;
  }
  
  .merit-title {
    font-size: 2.6rem;
  }
  
  .merit-cap {
    font-size: 1.6rem;
  }

  .merit-intro-icon {
    padding: .8rem;
  }
  
  .merit:nth-last-of-type(even) .merit-title,
  .merit:nth-last-of-type(even) .merit-cap {
    right: -15%;
  }
  
  .merit:nth-last-of-type(even) .merit-icon {
    margin-left: 1.6rem;
  }
  
  .dl-bottom-wrap {
    height: 42rem;
  }
  
  .dl-bottom-img img {
    height: 600px;
  }

  .dl-bottom-catch {
    margin: 0 auto .8rem;
    font-size: 3.6rem;
  }
  
  .dl-bottom-badge-wrap {
    margin-bottom: .8rem;
  }
  
  .dl-bottom-badge {
    width: 50%;
  }
  
  .dl-bottom-qr {
    display: block;
    padding: 1rem;
  }
  
  .dl-bottom-badge.apple .dl-bottom-qr {
    padding: 1rem;
  }
  
}

@media (min-width:1280px){
	/*▼可変サイズの最大値▼*/
	body {
		font-size: 1.8rem;
	}
  
  .dl-wrap {
		padding: 6.4rem 10rem;
	}
	
	/*▲可変サイズの最大値▲*/
}