header div{text-align: center;}





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

  body {

      width:700px;

      margin: 0 auto!important;

      background-color: #f7f7f7;

      font-family: Helvetica,"游ゴシック" ,YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;  }

}



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

    body {

        width:100%;

        margin: 0 auto!important;

        background-color: #f7f7f7;

        font-family: Helvetica,"游ゴシック" ,YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;  }

      }



main{

    width:100%;

}



main article h1 img{margin:0 auto;display:block;}

main article p{text-align:center;color:gray;font-size:80%;margin-top:5px;}





.accordion-box {

  width: 100%;

}

.accordion-item{

  border-bottom: 1px solid #333;

}



.accordion-title {

  cursor: pointer;

  font-size: 16px;

  padding: 20px 40px;

  position: relative;

  margin:0 auto;

  display: block;

  width: 230px;

  text-align: center;

  font-size: 80%;

}



.accordion-lead {

  border-bottom: 1px solid #DDD;

  display: none;

  padding: 20px 40px;

}



.app_area{

  margin:20px 10px;

  box-sizing: border-box;

}



.app_box{

  margin:3em 0;

  margin-bottom: 4em;

  font-size:14px;

}





h2{

  background-color: coral;

  color: white;

  padding:20px;

}



h2.numbers {

  margin-bottom: 0 !important;

  font-weight: bold;

  display: inline-block;

  font-size: 110%;

  counter-increment: num;

  width: 100%;

  border-bottom: 2px solid crimson;

}



h2.numbers:before {

  background: white;

  color: black;

  content: counter(num) " ";

  padding: 1px 5px 1px 10px;

  margin-right: 1em;

  border-radius: 6px;

}





.flex-box{

  display: -webkit-flex;

  display: -moz-flex;

  display: -ms-flex;

  display: -o-flex;

  display: flex;

}



.flex-box-wrap{

  display: -webkit-flex;

  display: -moz-flex;

  display: -ms-flex;

  display: -o-flex;

  display: flex;

  flex-wrap: wrap;

}





.app_header{

  margin:25px 0;

}



.app-icon{

  width: 20%;

}



.app-icon a img{border-radius: 20px;}



  .app-info{

    width: 88%;

    margin-left:15px;

}



.app-features{

}



.app-star{

  margin-top:5px;

}



.star-g{

  color:#FFFF99;

}



.star-gg{

  color:#FFEB66;

}



.star-ggg{

  color:#FFD700 ;

}



.star-gggg{

  color:#CCAC00;

}



.star-ggggg{

  color:#997300 ;

}



.score{

  font-size:70%;

  color:grey;

  vertical-align: middle;

  margin-left: 5px;

}



ul.app-features-list{

  list-style: none;  

}



ul.app-features-list li{

  padding:5px;

  font-size:50%;

  margin-right: 5px;

  margin-top:5px;

}





.app-features-list li.tag1{

  border:1px solid #23cfa9;

  color:#23cfa9;

  font-weight: bold;

}



.app-features-list li.tag2{

  border:1px solid #f98ef9;

  color:#f98ef9;

  font-weight: bold;

}



.app-features-list li.tag3{

  border:1px solid coral;

  color:coral;

  font-weight: bold;

}



.app_link{

}



.main_img{

  line-height: 1;

}



.dl_btn{

  width: 100%;

  background-color: black;

  text-align: center;

  font-weight: bold;

  color: white;

  font-size:120%;

  padding:30px 0;

}



.mt5{  margin-top:5px;}

.mt10{  margin-top:10px;}

.mt15{  margin-top:15px;}

.mt20{  margin-top:20px;}

.mt25{  margin-top:25px;}

.mt30{  margin-top:30px;}

.mb5{ margin-bottom: 5px;}

.mb10{ margin-bottom: 10px;}

.mb15{ margin-bottom: 15px;}

.mb20{ margin-bottom: 20px;}

.mb25{ margin-bottom: 25px;}

.mb30{ margin-bottom: 30px;}

.mb35{ margin-bottom: 35px;}



.fs70{font-size:70%;}

.fs80{font-size:80%;}

.fs90{font-size:90%;}

.fs110{font-size:110%;}

.fs120{font-size:120%;}



header div img{

  margin:10px 0;

}



/*interesting*/



.interesting-point{

  background-color:#f98ef9;

  color: white;

  text-align: center;

  font-weight: bold;

  padding:7px;

}



.interesting-text{

  background-color: #fff4f9;

  padding:0 20px;

}



.interesting-text ul{

}



.interesting-text ul li{

  padding:15px 0;

  text-indent: -1.3em;

  line-height: 1.3em;

}



.interesting-text ul li:before{

  content: '・';

  color:#f98ef9;

  font-size:130%;

  font-weight: bold;

}



/*user*/



.user-point{

  background-color:#23cfa9;

  color: white;

  text-align: center;

  font-weight: bold;

  padding:7px;

}



.user-text{

  background-color: #f4fffd;

  padding:20px;

}





.user2{

  border-top:1px solid #23cfa9;

  padding-top:15px;

}



.user-text dl dd{

  line-height: 1.4em;

}



/*btn light*/



* {

  -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

       -o-box-sizing: border-box;

      -ms-box-sizing: border-box;

          box-sizing: border-box;

}



/* キラッと効果 */

.btn_shining {

  position: relative;

  overflow: hidden;

}

.btn_shining::after {

  content: '';

  display: block;

  position: absolute;

left: -50px; top: 0;

  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 90%);

width: 40px;

  height: 100%;

  transform: skew(-20deg, 0);

  opacity: 0;

  animation: anime_shining 3.5s infinite;

}

@keyframes anime_shining {

  0% {

      left: -50px;

      opacity: 0;

  }

  5% {

      opacity: 0;

  }

  8% {

      opacity: 1;

  }

  25% {

      opacity: 0;

  }

  40% {

      left: 110%;

  }

  100% {

      left: 110%;

      opacity: 0;

  }

}



/**/

.app_store_btn{

  width: 85%;

  display: block;

  margin:0 auto;

}



/*aco*/

details {

  --arrow-size: 18px;

  --anime-speed: 0.3s;

  margin:1em 0;

}



details summary {

  box-sizing: border-box;

  position: relative;

  display: block;

  font-weight: 700;

  padding: 1em;

  background: #fff;

  cursor: pointer;

  text-align: center;

  font-size:70%;

  width: 300px;

  background: antiquewhite;

  border-radius: 30px;

  margin:0 auto;

}



details summary::-webkit-details-marker {

  /* iOSで表示されるデフォルトの三角形アイコンを消す */

  display: none;

}





/* ※本来はafter要素の装飾で十分だが、iOSだと疑似要素に「transition」が効かないので、通常のタグを装飾 */

details summary .ico {

  position: absolute;

  top: 0;

  right: 1.5em;

  bottom: 0;

  display: block;

  width: var(--arrow-size);

  height: calc(var(--arrow-size) * 0.6);

  /*aspect-ratio: 1/0.6;*/

  /* ※追記 Windows版Chrome124にてaspect-ratioを指定した要素と、position: absoluteの位置調整の組み合わせに不具合が発生したため、height値をcalcの計算に切り替え */

  margin: auto;

  background: #ff7f50;

  clip-path: polygon(100% 13%, 50% 100%, 0 13%, 8% 0, 50% 73%, 92% 0);

  transition: transform var(--anime-speed);

}



details[open] summary .ico {

  transform: rotate(180deg);

}



details .inner {

  position: relative;

  padding: 1em 2em;

}



.select-app-search{

  margin:10px 0;

}



.select-app-search ul{

  display: flex;

}



.select-app-search ul li{

  width: 50%;

  margin:0 auto;

}



.select-app-search-submit{

  width: 70%;

  background-color: crimson;

  color: white;

  text-align: center;

  border-radius: 20px;

  padding: 15px;

  margin: 1.5em auto;

  font-weight: bold;

}



/*h3*/



h3 {

  position: relative;

  text-align: center;

}



h3:before,

h3:after {

  position: absolute;

  content: '';

}



h3:before {

  top: 4px;

  left: 4px;

  width: calc(100% - 8px);

  height: calc(100% - 8px);

}



h3 span {

  position: relative;

  display: block;

  padding: 2rem;

  letter-spacing: .05em;

  color: #fff;

  text-shadow: #000 2px 0, #000 -2px 0, #000 0 -2px, #000 0 2px, #000 2px 2px, #000 -2px 2px, #000 2px -2px, #000 -2px -2px, #000 1px 2px, #000 -1px 2px, #000 1px -2px, #000 -1px -2px, #000 2px 1px, #000 -2px 1px, #000 2px -1px, #000 -2px -1px, 4px 4px 0 #000, 0 4px 0 #000;

  font-size:100%;

}



h3 span:before,

h3 span:after {

  position: absolute;

  left: 10px;

  width: calc(100% - 20px);

  height: 2px;

  content: '';

}



h3 span:before {

  top: 15px;

}



h3 span:after {

  bottom: 15px;

}



strong{

  color:#0a64be;

  font-size:110%;

  margin:0 5px;

}



p.app_disc{

  margin-bottom: 1em;

  line-height: 1.6em;

  padding:0 1em;

}



p{

  line-height: 1.4em;

}



.store_reviw_text{

  text-align: right;

  color:#23cfa9;

  font-size:80%;

  font-weight: bold;

}



.app_copy{

  font-size:60%;

  color:gray;

  text-align: center;

  margin-bottom: 30px;

}



footer {

  font-size:80%;

  background-color: rgb(210, 210, 210);

  padding:20px 0;

}



footer p{

  text-align: center;

  margin-bottom: 1em;

}



footer ul{

  display:flex;

  justify-content: space-around;

}



footer ul li{

  text-align: left;

  padding-left: 2em;

  width: 50%;

  margin-top:10px;

}



.app_sort{

  display: flex;

  padding:0 1em;

}



.app_sort a{

  width: 100%;

}



.app_sort a div{

  border:#ff7f50 solid 1px;

  text-align: center;

  padding:10px;

  font-size: 80%;

  width:100%;

}



.app_sort a .on{

background-color: #ff7f50;

color:white;

}



.search-result{

  text-align: center;

  margin-top:2em;

}



.search-result span{

  font-size:150%;

  color:#ff7f50;

  padding

}



footer{

  margin-top:3em;

}