/* CSS Document */
/* --------------------------------------------------------------------
	motohaku.okinawa
/* --------------------------------------------------------------------
	00. variable
	01. basic
	02. header
	03. footer
	04. top
	05. Otherpage
-------------------------------------------------------------------- */
/* --------------------------------------------------------------------

	00. variable
	
-------------------------------------------------------------------- */
/* --------------------------------------------------------------------

	01. basic mobile
	
-------------------------------------------------------------------- */
.br-pc2017 {
  display: none; }

@media only screen and (min-width: 900px) {
  .br-sp2017 {
    display: none; }
  .br-pc2017 {
    display: black; } }

/* -----------------------------------------------------
	header
----------------------------------------------------- */
#wrap {
  background: #fff; }
  #wrap #wrap-inner {
    width: 100%;
    padding: 0 0 0 0; }

.header-container {
  border-bottom: 1px solid #bdd6ef;
  width: 100%; }

header {
  display: none; }

.sp_header {
  width: 100%;
  background: #fff url(../img/top/logo_sp.png) no-repeat center top !important;
  background-size: contain !important;
  height: 50px;
  color: #003497;
  background: 000;
  padding: 0;
  display: block; }
  .sp_header h1 {
    height: 1px;
    margin: 0px auto 0 auto;
    padding: 0;
    float: left img; }
  .sp_header .button-toggle {
    position: absolute;
    right: 0;
    width: 30px;
    height: 30px;
    margin: 10px;
    color: #fff;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
    box-shadow: 0 0 0 2px #1e4ba2;
    cursor: pointer;
    background: #416ab9; }
    .sp_header .button-toggle img {
      width: 100%;
      height: 100%; }
  .sp_header .menu {
    position: absolute;
    top: 51px;
    width: 100%;
    background: #222;
    color: #999;
    overflow: hidden; }
    .sp_header .menu ul {
      width: 100%;
      margin: 0 auto;
      padding: 0; }
      .sp_header .menu ul li {
        position: relative;
        text-align: center;
        background: #003497;
        font-family: 'Hiragino Mincho ProN', serif; }
        .sp_header .menu ul li a {
          display: block !important;
          text-align: center !important;
          color: #fff !important;
          text-decoration: none !important;
          padding: 5px 20px !important;
          border-bottom: 1px solid #416ab9 !important;
          height: 42px !important;
          line-height: 40px !important;
          font-size: 18px !important; }

@media only screen and (min-width: 900px) {
  header {
    width: 960px;
    height: 80px;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    display: block; }
    header hgroup h1 {
      float: left;
      margin: 0;
      padding: 0; }
    header ul {
      display: block;
      position: absolute;
      margin: 31px 0 0 250px; }
      header ul li {
        color: #474747;
        font-size: 13px;
        float: left;
        margin-right: 30px; }
  .sp_header {
    display: none; } }

/* --------------------------------------------------------------------

	04. top
	
-------------------------------------------------------------------- */
.main-container .wrapper {
  width: 100%;
  margin: 0;
  padding: 0; }

#main_v .innermodules {
  width: 100%;
  margin: 0 auto;
  padding: 0; }
  #main_v .innermodules img {
    width: 100%; }

#interview .innermodules,
#item .innermodules,
#step .innermodules,
#efficacy .innermodules,
#about .innermodules {
  width: 90%;
  margin: 0 auto;
  padding: 30px 0 30px 0; }
  #interview .innermodules h2.tail,
  #item .innermodules h2.tail,
  #step .innermodules h2.tail,
  #efficacy .innermodules h2.tail,
  #about .innermodules h2.tail {
    width: 70%;
    margin: 0 auto;
    text-align: center; }
    #interview .innermodules h2.tail img,
    #item .innermodules h2.tail img,
    #step .innermodules h2.tail img,
    #efficacy .innermodules h2.tail img,
    #about .innermodules h2.tail img {
      width: 100%; }
  #interview .innermodules ul,
  #item .innermodules ul,
  #step .innermodules ul,
  #efficacy .innermodules ul,
  #about .innermodules ul {
    margin: 0;
    padding: 0; }
    #interview .innermodules ul li,
    #item .innermodules ul li,
    #step .innermodules ul li,
    #efficacy .innermodules ul li,
    #about .innermodules ul li {
      margin: 0;
      padding: 0; }

@media only screen and (min-width: 900px) {
  #main_v .innermodules,
  #item .innermodules,
  #step .innermodules,
  #efficacy .innermodules,
  #about .innermodules {
    width: 960px;
    margin: 0 auto;
    padding: 0 0 60px 0; }
    #main_v .innermodules h2.tail,
    #item .innermodules h2.tail,
    #step .innermodules h2.tail,
    #efficacy .innermodules h2.tail,
    #about .innermodules h2.tail {
      width: 296px;
      margin: 40px auto 30px auto; }
      #main_v .innermodules h2.tail img,
      #item .innermodules h2.tail img,
      #step .innermodules h2.tail img,
      #efficacy .innermodules h2.tail img,
      #about .innermodules h2.tail img {
        width: 296px; }
    #main_v .innermodules ul,
    #item .innermodules ul,
    #step .innermodules ul,
    #efficacy .innermodules ul,
    #about .innermodules ul {
      margin: 0;
      padding: 0; }
      #main_v .innermodules ul li,
      #item .innermodules ul li,
      #step .innermodules ul li,
      #efficacy .innermodules ul li,
      #about .innermodules ul li {
        margin: 0;
        padding: 0; }
  #interview .innermodules {
    width: 780px;
    margin: 0 auto;
    padding: 0 0 60px 0; }
    #interview .innermodules ul {
      margin: 0;
      padding: 0; }
      #interview .innermodules ul li {
        margin: 0;
        padding: 0; } }

/* -----------------------------------------------------
	#main_v
----------------------------------------------------- */
#main_v {
  background: #e9f2fa; }
  #main_v .v_pc {
    display: none; }
  #main_v .v_sp {
    width: 100%;
    margin: 0 auto; }
    #main_v .v_sp img {
      width: 100%; }
  #main_v #promo_movie {
    width: 100%;
    height: auto;
    border: 6px solid #fff; }
    #main_v #promo_movie .video-wrap {
      position: relative; }
      #main_v #promo_movie .video-wrap video {
        width: 100%; }
      #main_v #promo_movie .video-wrap p {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0; }

@media only screen and (min-width: 900px) {
  #main_v {
    background: #e9f2fa; }
    #main_v .innermodules {
      padding: 0 0 0 0; }
    #main_v .v_sp {
      display: none; } }

/* -----------------------------------------------------
	#interview
----------------------------------------------------- */
#interview {
  background: #003497;
  color: #fff; }
  #interview h2 {
    width: 100%;
    margin: 0 0 0 0; }
    #interview h2 img {
      width: 100%; }
  #interview ul li {
    width: 100%; }
    #interview ul li:nth-child(1) {
      text-align: right; }
      #interview ul li:nth-child(1) img {
        width: 50%; }
  #interview ul li.btn_aco {
    width: 130px;
    height: 40px;
    margin: 20px auto 0 auto;
    background: url(../img/top/btn_interview.png) no-repeat center top;
    background-size: cover;
    overflow: hidden;
    cursor: pointer; }
    #interview ul li.btn_aco img {
      width: 100%; }
  #interview ul li.on {
    background: url(../img/top/btn_interview.png) no-repeat center bottom; }
  #interview .interview_txt {
    font-size: 1.2em;
    font-family: 'Hiragino Mincho ProN', serif; }

@media only screen and (min-width: 900px) {
  #interview {
    background: #003497 url(../img/top/bg_interview.jpg) no-repeat center top; }
    #interview h2 {
      margin: 60px 0 0 0; }
      #interview h2 img {
        width: 660px; }
    #interview ul li:nth-child(2) {
      float: left; }
    #interview ul li:nth-child(1) {
      float: right;
      width: 267px; }
      #interview ul li:nth-child(1) img {
        width: 267px; }
    #interview ul li.btn_aco {
      width: 130px;
      height: 40px;
      margin: 70px 0 0 0;
      background: url(../img/top/btn_interviewpc.png) no-repeat;
      overflow: hidden;
      cursor: pointer; }
      #interview ul li.btn_aco a {
        width: 130px;
        height: 40px; }
    #interview ul li.on {
      background: url(../img/top/btn_interviewpc.png) no-repeat left -40px; }
    #interview .interview_txt {
      line-height: 2; } }

/* -----------------------------------------------------
	#item
----------------------------------------------------- */
#item img {
  width: 100%; }

#item .lead_pc {
  text-align: center; }

#item .type img {
  padding: 15px 0 0 0; }

#item .l_cont .pbtype img,
#item .r_cont .pbtype img {
  width: auto;
  height: 20px; }

#item .l_cont .txtgroup,
#item .r_cont .txtgroup {
  border-left: 1px solid #003c9b;
  padding-left: 20px; }

#item .l_cont ul li span,
#item .r_cont ul li span {
  color: #003c9b; }

/* -----------------------------------------------------
	#step
----------------------------------------------------- */
#step {
  text-align: center; }
  #step figure figcaption {
    margin: 10px 0 0 0; }
  #step figure img {
    width: 100%;
    padding-bottom: 15px; }
  #step figure.step1 {
    margin: 30px 0 0 0px; }
  #step figure.step2 {
    margin: 30px 0 0 0px; }

@media only screen and (min-width: 900px) {
  #step {
    font-size: 0.9em; }
    #step figure {
      width: 340px;
      display: block;
      float: left; }
      #step figure img {
        width: 340px;
        padding-bottom: 15px;
        border-bottom: 1px solid #003c9b; }
    #step figure.step1 {
      margin: 0 0 0 70px; }
    #step figure.step2 {
      margin: 0 0 0 140px; } }

/* -----------------------------------------------------
	#efficacy
----------------------------------------------------- */
#efficacy h3 {
  margin: 0 auto;
  text-align: center;
  width: 100%; }
  #efficacy h3 img {
    width: 100%; }

#efficacy .sp_glaph {
  width: 100%; }
  #efficacy .sp_glaph img {
    width: 100%; }

#efficacy ul {
  display: none; }

#efficacy p.ytbsp {
  width: 100%;
  margin: 15px auto 0 auto;
  text-align: center; }
  #efficacy p.ytbsp img {
    width: 100%; }

#efficacy p.ytb {
  display: none; }

@media only screen and (min-width: 900px) {
  #efficacy {
    background: url(../img/top/bg_efficacy.jpg) no-repeat center top;
    background-size: cover; }
    #efficacy .innermodules {
      background: url(../img/top/img_efficacy_lead01.png) no-repeat center 50px; }
    #efficacy p.glaph {
      width: 700px;
      text-align: center;
      padding: 50px 0 0 0;
      height: 350px; }
    #efficacy .sp_glaph {
      display: none; }
    #efficacy ul {
      height: 100px;
      display: block; }
      #efficacy ul li {
        width: 200px;
        font-size: 0.9em;
        display: block;
        float: left; }
        #efficacy ul li:nth-child(1) {
          margin: 0 10px 0 10px; }
        #efficacy ul li:nth-child(2) {
          margin: 0 10px 0 30px; }
        #efficacy ul li:nth-child(3) {
          width: 210px;
          margin: 0 0px 0 30px; }
    #efficacy h3 {
      width: 560px;
      margin: 0 auto; }
      #efficacy h3 img {
        width: 560px; }
    #efficacy p.ytb {
      display: block;
      width: 560px;
      margin: 20px auto 0 auto; }
      #efficacy p.ytb img {
        width: 560px; }
    #efficacy p.ytbsp {
      display: none; } }

/* -----------------------------------------------------
	#about
----------------------------------------------------- */
#about {
  background: url(../img/top/bg_about.jpg) no-repeat center top;
  background-size: cover;
  text-align: center; }
  #about .v_pc {
    display: none; }
  #about .v_sp {
    display: block; }
    #about .v_sp img {
      width: 100%; }
  #about .bnr_brand {
    width: 100%; }
    #about .bnr_brand img {
      width: 100%; }

@media only screen and (min-width: 900px) {
  #about .v_pc {
    display: block; }
  #about .v_sp {
    display: none; }
  #about p.bnr_brand {
    text-align: center;
    width: 728px;
    margin: 0 auto; } }

/* --------------------------------------------------------------------

	03. footer
	
-------------------------------------------------------------------- */
.footer-container {
  background: #fff;
  text-align: center;
  padding: 0 0 10px 0;
  border-top: 1px #d6d6d6 solid; }
  .footer-container footer {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0 0 0;
    text-align: center; }

#deepcareconceptwrap,
#medicalhydroxyapatitewrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; }
  #deepcareconceptwrap iframe,
  #medicalhydroxyapatitewrap iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important; }

#ytplayer1wrap,
#ytplayer2wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; }
  #ytplayer1wrap iframe,
  #ytplayer2wrap iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important; }