@charset "UTF-8";
body {
  font-family : "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic ProN, "メイリオ", meiryo, Helvetica Neue, sans-serif;
  font-size : 14px;
  line-height : 1.3;
  color : #101010;
  -webkit-text-size-adjust: 100%;
}
img {
  vertical-align : bottom;
}
.pc {
  display: none !important;
}
.sp {
  display: block !important;
}
/* header ----------------------------------------*/
header {
  position : relative;
  z-index : 999;
}
header h1 {
  width : 60%;
  max-width : 350px;
  padding-left : 46px;
  margin : 0 auto
}
header nav {
  max-width : 1140px;
  width : 100%;
  height : 50px;
  margin : 0px auto;
  display : flex;
  align-items : center;
  justify-content : space-between;
}
header nav ul {
  display : none;
  flex-direction : column;
  background : rgba(24, 25, 25, .9);
  position : absolute;
  top : 50px;
  left : 0px;
  width : 100%;
  z-index : 980;
  padding: 3% 0;
}
header nav ul li {
  text-align : center;
  font-size : 18px;
}
header nav ul li a {
  color : #FFFFFF;
  display : block;
  background : transparent;
  margin : 6% 0;
  text-decoration : none;
}
header .nav__icon, .nav__icon span {
  display : block;
}
header .nav__icon {
  width : 34px;
  height : 28px;
  margin-right : 3%;
  position : relative;
  cursor : pointer;
}
header .nav__icon span {
  background : #939596;
  position : absolute;
  left : 0;
  width : 100%;
  height : 4px;
  border-radius : 4px;
}
header .nav__icon span:nth-of-type(1) {
  top : 0;
}
header .nav__icon span:nth-of-type(2) {
  top : 12px;
}
header .nav__icon span:nth-of-type(3) {
  bottom : 0;
}
header .nav__icon.active span : nth-of-type(1) {
  transform : translateY(12px) rotate(-45deg);
}
header .nav__icon.active span : nth-of-type(2) {
  display : none;
}
header .nav__icon.active span : nth-of-type(3) {
  transform : translateY(-12px) rotate(45deg);
}
header .nav__icon, .nav__icon span {
  display : inline-block;
  transition : all .4s;
  box-sizing : border-box;
  z-index : 999;
}
/* main ----------------------------------------*/
#main {
  background-color : #507aff;
  background : url(/megahobby/megalauncher/cmn/images/main_bg.png) no-repeat center 0,  linear-gradient(-30deg, #507aff, #ff5b7b);
  background-size: cover;
  padding : 8% 0;
  color: #FFFFFF;
}
#main #main_logo {
  width: 40%;
  max-width: 316px;
  margin: 0 auto 4%;
}
#main #main_tit {
  width: 90%;
  max-width: 908px;
  margin: 0 auto 4%;
}
#main #main_tit img {
  width: 100%;
  height: auto;
}
#main #tit_about {
  font-family : 'Roboto', sans-serif;
  letter-spacing: 0.2em;
  font-size: 1.2em;
  text-align: center;
  border-bottom: 2px solid #FFFFFF;
  max-width: 240px;
  padding-bottom: 1%;
  width: 70%;
  margin-bottom: 3%;
}
#main p {
  width: 90%;
  margin: 0 auto;
  line-height: 1.4
}
/* info ----------------------------------------*/
#info {
  background : #FFFFFF;
  padding : 4% 0
}
#info ul {
  width : 90%;
  max-width : 1140px;
  margin : 0 auto;
}
#info li {
  width : 100%;
  text-align : left;
  margin-bottom: 2.4%;
  font-size : 14px;
  line-height: 1.2;
}
#info li:last-child {
  margin-bottom: 0;
}
#info li span {
  font-family : 'Roboto', sans-serif;
  margin-right: 2%;
}
/* project ----------------------------------------*/
#project {
  background : #eff2f3;
  padding : 6% 0 2%;
}
#project h2 {
  font-size : 24px;
  font-family : 'Righteous', cursive;
  text-align : center;
  letter-spacing : 0.2rem
}
#project h2:after {
  content : " ";
  display : block;
  width : 10%;
  height : 4px;
  background : #a987de;
  margin : 1% auto 4%
}
#project h3 {
  font-size : 18px;
  text-align : center;
  font-weight : bold;
  letter-spacing : normal;
  margin-bottom : 4%
}
#project .project_box {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto 5%;
  padding: 8% 0 4%;
  background: #FFFFFF;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.1));
  border-top: 4px solid #505050;
  position: relative;
}
#project .project_box:before {
  content: " ";
  width: 100%;
  height: 17px;
  background : url(/megahobby/megalauncher/cmn/images/project_bg.gif) repeat 0 center;
  display: block;
  position: absolute;
  top: 0;
  left: 0
}
#project .project_box:after {
  content: " ";
  width: 100%;
  height: 17px;
  margin-bottom: 3px;
  background : url(/megahobby/megalauncher/cmn/images/project_bg.gif) repeat 0 center;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0
}
#project .project_box h4 {
  width: 90%;
  max-width: 1140px;
  margin: 0 auto 3%;
  font-size: 21px;
}
#project .project_box h4 span {
  display: block;
  font-family : 'Roboto', sans-serif;
  margin-right: 2%;
  font-size: 14px;
  margin-bottom: 4px;
  color: #6c6c6c;
}
#project .project_box .project_box_thum {
  display: none;
}
#project .project_box .project_box_thum img {
  width: 100%;
  height : auto;
  flex: 1;
}
#project .project_box .iframe_makuake {
  width: 310px;
  margin: 0 auto;
  display: block;
}
#project .project_box .iframe_makuake .iframe_pc {
  display: none;
}
#project .project_box .iframe_makuake .iframe_sp {
  display: block;
}
#project .project_box .iframe_makuake p {
  background: #06cbb1;
  border-radius: 5px;
  margin-bottom: 16px;
  padding: 6px 10px;
  font-size: 21px;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  font-family : 'Roboto', sans-serif;
  text-align: center;
  position: relative;
}
#project .project_box .iframe_makuake p:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #06cbb1;
}
#project .project_box_detail {
  background: #f8f8f8;
  padding: 3% 0;
  margin-bottom: 3%
}
#project .project_box p {
  width: 90%;
  max-width: 1140px;
  margin: 0 auto 3%;
  line-height: 1.6;
}
#project .btn {
  width : 70%;
  max-width : 280px;
  margin: 0 auto 6%;
  padding : 16px 20px 16px 40px;
  display : block;
  background : #507aff;
  background : linear-gradient(-30deg, #ff995b, #ff5b7b);
  border-radius : 40px;
  font-size : 18px;
  color : #FFFFFF;
  text-align : center;
  text-decoration : none;
  position: relative;
  z-index: 200;
  transition : 0.3s
}
#project .btn:before {
  content: " ";
  width: 20px;
  height: 20px;
  display: block;
  background : url(/megahobby/megalauncher/cmn/images/project_btn_ico.svg) no-repeat 10% center;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 8%;
  margin-top: -10px;
}
#project .btn:hover {
  opacity : 0.6;
  transition : 0.6s
}
#project .hide-text {
  display: none;
  padding: 2% 0 5%
}
#project .readmore {
  width: 60px;
  height: 60px;
  background: #FFFFFF url(/megahobby/megalauncher/cmn/images/project_btn_more.svg) no-repeat center 52%;
  background-size: 60%;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -30px;
  cursor: pointer;
  z-index: 100
}
#project .on-click {
  width: 60px;
  height: 60px;
  background: #FFFFFF url(/megahobby/megalauncher/cmn/images/project_btn_close.svg) no-repeat center 52%;
  background-size: 60%;
}
/* survey ----------------------------------------*/
#survey {
  background : #507aff;
  background : linear-gradient(-30deg, #507aff, #ff5b7b);
  padding : 8% 0;
}
#survey .inner {
  width : 90%;
  max-width : 1140px;
  margin : 0 auto;
  display : block;
}
#survey p {
  margin-bottom: 3%;
  color : #FFFFFF;
  align-self : center;
  text-align : center;
  line-height: 1.4
}
#survey p span {
  font-size : 1.5em;
  padding-bottom : 2%;
  display : block
}
#survey .btn {
  margin: 0 auto;
  background : #FFF;
  border-radius : 40px;
  padding : 16px 20px 16px 40px;
  display : block;
  width : 60%;
  max-width : 280px;
  align-self : center;
  font-size : 18px;
  color : #6576ef;
  text-align : center;
  text-decoration : none;
  position: relative;
  transition : 0.3s
}
#survey .btn:before {
  content: " ";
  width: 20px;
  height: 20px;
  display: block;
  background : url(/megahobby/megalauncher/cmn/images/survey_btn_ico.svg) no-repeat 10% center;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 8%;
  margin-top: -10px;
}
#survey .btn:hover {
  opacity : 0.6;
  transition : 0.6s
}
/* comingsoon ----------------------------------------*/  
#bnr_comingsoon {
  width: 90%;
  max-width: 1140px;
  margin: 0 auto 5%;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.1));
}
#bnr_comingsoon img {
  width: 100%;
  height: auto;
}
/* footer ----------------------------------------*/
footer {
  width : 90%;
  max-width : 1140px;
  margin : 0 auto;
  padding : 2% 0 5%;
  font-size : 8px;
  display : flex;
}
footer a {
  margin-right : 2%;
}
footer a img {
  border : 1px solid #c4bfc7;
}

/* ---------------------------------------------------------------------
min-width: 768px
---------------------------------------------------------------------*/

@media screen and (min-width: 768px) {
body {
  font-size : 16px;
}
/* header ----------------------------------------*/
header h1 {
  width : 36%;
  margin: 0;
  padding-left : 0;
}
header nav {
  max-width : 1140px;
  width : 90%;
  height : 70px;
}
header nav ul {
  width: 56%;
  background: none;
  display : flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  position: static;
}
header nav ul li {
  font-size: 16px;
}
header nav ul li a {
  color : #353535;
  margin : 16px;
  text-decoration : none;
  position: relative;
}
header nav ul li:last-child a {
  margin-right: 0px
}
header .nav__icon, .nav__icon span {
  display : none;
}
header nav ul li a:before {
  content: " ";
  width: 0;
  left: 50%;
  bottom: -8px;
  transition: all 0.3s ease;
  border-bottom: 2px solid #353535;
  position: absolute;
  display: block;
}
header nav ul li a:hover:before {
  width: 50%;
  border-bottom: 2px solid #353535;
}
header nav ul li a:after {
  content: " ";
  width: 0;
  right: 50%;
  bottom: -8px;
  transition: all 0.3s ease;
  border-bottom: 2px solid #353535;
  position: absolute;
  display: block;
}
header nav ul li a:hover:after {
  width: 50%;
  border-bottom: 2px solid #353535;
}
/* main ----------------------------------------*/
#main {
  padding: 60px 0;
  background-size: 105%;
}
#main .inner {
  width: 90%;
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#main #main_logo {
  margin: 0 5% 0 0;
}
#main > div > div:nth-of-type(2) {
  max-width: 740px;
}
#main #main_tit {
  width: 100%;
}
#main p {
  width: 100%;
  font-size: 17px;
  line-height: 1.6
}
#main #tit_about {
  max-width: 260px;
  margin-bottom: 2%;
}
/* project ----------------------------------------*/

#project_tit {
  max-width: 1140px;
  width: 90%;
  display: flex;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 2%
}
#project h2 {
  font-size : 24px;
  font-family : 'Righteous', cursive;
  text-align : center;
  letter-spacing : 0.2rem;
  padding: 2% 6% 2% 0;
  margin-right: 2%;
  background : url(/megahobby/megalauncher/cmn/images/project_ico.png) no-repeat right center;
}
#project h2:after {
  display: none;
}
#project h3 {
  font-size : 24px;
  letter-spacing : 0.25rem;
  margin-bottom: 0;
}
#project .project_box {
  margin: 0 auto 30px;
  padding: 56px 0 50px;
}
#project .project_box h4 {
  margin: 0 auto 20px;
  font-size: 28px;
}
#project .project_box_detail {
  display: flex;
  margin-bottom: 20px;
}
#project .project_box_detail .project_box_thum {
  display: block;
  margin-right: 10px;
  align-self: center;
}
#project .project_box .iframe_makuake {
  width: 1000px;
  margin: 0 auto;
  display: block;
}
#project .project_box .iframe_makuake .iframe_pc {
  display: block;
}
#project .project_box .iframe_makuake .iframe_sp {
  display: none;
}
#project .project_box_detail .project_box_thum {
  display: block;
}
#project .btn {
  width : 86%;
  max-width: 320px;
  margin: 0 auto 20px;
  padding : 20px 40px 20px 60px;
  font-size: 26px;
}
#project .btn:before {
  height: 24px;
  left: 7%;
  margin-top: -12px;
}
#project .hide-text {
  padding: 20px 0 0
}
#project .readmore {
  width: 74px;
  height: 74px;
  border-radius: 40px;
  background: #FFFFFF url(/megahobby/megalauncher/cmn/images/project_btn_more.svg) no-repeat center 58%;
  background-size: 56%;
}
#project .on-click {
  width: 74px;
  height: 74px;
  background: #FFFFFF url(/megahobby/megalauncher/cmn/images/project_btn_close.svg) no-repeat center 58%;
  background-size: 56%;
}
/* info ----------------------------------------*/

#info ul {
  display : flex;
  justify-content : space-between;
}
#info li {
  width : 30%;
  text-align : center;
  line-height : 1.6;
  margin-bottom : 0;
}
#info li : last-child {
  padding-bottom : 0
}
#info li span {
  font-size : 22px;
  display : block;
}
/* survey ----------------------------------------*/
#survey .inner {
  display : flex;
  justify-content : space-between;
}
#survey p {
  color : #FFFFFF;
  text-align : left;
  margin : 0 5% 0 0;
}
#survey .btn {
  width : 60%;
  margin: 0;
  padding : 20px 40px 20px 60px;
  display : block;
  font-size : 26px;
}
#survey .btn:before {
  height: 24px;
  left: 7%;
  margin-top: -12px;
}
/* footer ----------------------------------------*/
footer {
  font-size : 10px;
}
}

/* ---------------------------------------------------------------------
min-width: 1200px
---------------------------------------------------------------------*/

@media screen and (min-width: 1200px) {
.pc {
  display: block !important;
}
.sp {
  display: none !important;
}
/* info ----------------------------------------*/
#info {
  padding : 60px 0
}
#info li {
  font-size : 16px;
}
#info li span {
  margin-right: 0%;
}
/* project ----------------------------------------*/
#project {
  padding : 60px 0 20px;
}
#project h2 {
  font-size : 46px;
}
#project h3 {
  font-size : 30px;
}
/* survey ----------------------------------------*/
#survey {
  padding : 100px 0;
}
/* comingsoon ----------------------------------------*/  
#bnr_comingsoon {
  margin-bottom: 40px;
}
/* footer ----------------------------------------*/
footer {
  padding : 24px 0 60px;
}
footer a {
  margin-right : 12px;
}
}
.mt100 {
  margin-top: 100px !important;
}