@charset "UTF-8";
@media screen and (max-width: 640px) {
  body {
    -webkit-text-size-adjust: 100%;
    max-height: 100%;
  }

  div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fildset, input, textarea, p, blockquote, table, th, td, address {
    font-size: 22px;
  }

  h2 {
    font-size: 140%;
  }

  img.smp {
    display: inline;
  }

  br.smp {
    display: inline;
  }
  br.pc {
    display: none;
  }

  img.smp + img {
    display: none;
  }

  #wrapper {
    min-width: 640px;
    padding: 0;
    overflow: hidden;
  }

  table th, table td {
    display: block;
    width: 560px;
    padding: 40px 0;
  }
  table th {
    border-bottom: none;
  }
  table td {
    border-top: none;
    padding-top: 0;
  }
  table td input {
    width: 100%;
    border: 1px solid #ccc;
  }

  textarea {
    width: 100%;
    border: 1px solid #ccc;
  }

  .btn {
    width: 560px;
  }

  /****************head****************/
  #head {
    width: 640px !important;
  }
  #head #inner {
    position: relative;
    width: 640px;
    height: 140px;
  }
  #head #linkArea {
    display: none;
    width: 640px;
  }
  #head #inner #navArea {
    background-color: #00ABEB;
    position: absolute;
    top: 140px;
    left: 0;
    width: 640px;
    height: 20000px;
    margin: 0;
  }
  #head #navArea ul#gnav li {
    height: auto;
    color: #fff;
    text-align: left;
    padding: 20px 40px;
    border-bottom: 1px solid #fff;
    float: none;
    margin: 0;
  }
  #head #navArea ul#gnav li a {
    color: #fff;
    display: block;
    width: 100%;
    height: 100%;
  }
  #head #navArea ul#gnav li span {
    text-indent: 0;
    width: 100% !important;
    height: 100% !important;
    margin-bottom: 20px;
    padding-left: 40px;
  }
  #head #navArea ul#gnav li span a {
    display: block;
    width: 100%;
    height: 100%;
    background: none !important;
    text-indent: 0px;
  }
  #head #navArea ul#gnav li .navChild {
    position: static;
    background: none;
    text-align: left;
  }
  #head #navArea ul#gnav li .navChild .inner ul {
    background-color: #fff;
    padding: 0;
  }
  #head #navArea ul#gnav li .navChild .inner ul li {
    background: none;
    border-bottom: 1px dotted #00ABEB;
    padding-left: 80px;
  }
  #head #navArea ul#gnav li .navChild .inner ul li a {
    color: #00ABEB;
  }
  #head #inner #headLogo {
    position: absolute;
    background: url(../img/common/logo.png) left top no-repeat;
    background-size: 300px 61px;
    width: 300px;
    height: 61px;
    top: 60px;
    left: 20px;
  }
  #head #telBtn {
    right: 180px;
    top: 20px;
    width: 70px;
    height: 70px;
    background: url(../img/common/640/telIcon.jpg) 50% 50% no-repeat #0D1D7B;
    text-indent: -99999px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  #head #telBtn a {
    display: block;
    width: 100%;
    height: 100%;
  }
  #head #entryBtn {
    right: 90px;
    width: 70px;
    font-size: 38%;
  }
  #head #entryBtn a {
    height: 100%;
    padding: 26px 0;
  }
  #head p#kyach {
    width: 640px;
    text-align: center;
  }
  #head p#headContact {
    display: none;
  }
  #head p.openTime {
    display: block;
  }
  #head #headContactMob {
    display: block;
    margin: 0;
    width: 640px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-flex-pack: justify;
    -moz-flex-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
  }
  #head p.openTime {
    width: 640px;
    padding: 20px 0;
    color: #fff;
    text-align: center;
  }
  #head #headContactMob a#mobCont, #head #headContactMob a#mailCont, #head #headContactMob a#telCont {
    display: block;
    padding: 0;
    width: 315px;
    height: 100px;
    margin: 0;
    border: 1px #fff solid;
    text-align: left;
    text-indent: -9999px;
  }
  #head #headContactMob a#mailCont {
    background: url(../img/common/640/mailIcon.png) 50% 50% no-repeat;
  }
  #head #headContactMob a#telCont {
    background: url(../img/common/640/telIcon.png) 50% 50% no-repeat;
  }
  #head #headContactMob a#mobCont {
    background: url(../img/common/640/mobIcon.png) 50% 50% no-repeat;
  }

  .menuBtn {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
    position: absolute;
    top: 73px;
    right: 140px;
    width: 50px;
    height: 44px;
  }
  .menuBtn span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #00ABEB;
    border-radius: 4px;
  }
  .menuBtn span:nth-of-type(1) {
    top: 0;
  }
  .menuBtn span:nth-of-type(2) {
    top: 20px;
  }
  .menuBtn span:nth-of-type(3) {
    bottom: 0;
  }
  .menuBtn.active span:nth-of-type(1) {
    -webkit-transform: translateY(20px) rotate(-45deg);
    transform: translateY(20px) rotate(-45deg);
  }
  .menuBtn.active span:nth-of-type(2) {
    opacity: 0;
  }
  .menuBtn.active span:nth-of-type(3) {
    -webkit-transform: translateY(-20px) rotate(45deg);
    transform: translateY(-20px) rotate(45deg);
  }

  /****************foot****************/
  #pageTop {
    bottom: 130px;
  }

  #contactBtn {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    z-index: 2;
  }
  #contactBtn p.btn {
    width: 213px;
    border-radius: 0;
    height: inherit;
  }
  #contactBtn p.btn:last-child {
    width: 214px;
  }
  #contactBtn p.btn:last-child > a {
    background-color: #FFF000;
  }
  #contactBtn p.btn a {
    border-radius: 0;
  }

  #bannerArea {
    background: url(../img/common/640/bannerAreaBg.jpg) 50% top no-repeat;
    padding-top: 160px;
  }
  #bannerArea .h2cont {
    width: 640px;
  }
  #bannerArea h2 {
    font-size: 130%;
    padding: 0 40px;
  }
  #bannerArea .h2cont p {
    width: 558px;
    margin: 0 40px 40px;
  }
  #bannerArea .h2cont p:last-child {
    width: 558px;
    margin: 0 40px 40px;
    margin-bottom: 0;
  }

  #foot .inner .corpInfo {
    display: block;
    width: 100vw;
    padding: 0;
    margin: 0 0 8vw;
  }
  #foot .inner .corpInfo .leftArea {
    text-align: center;
    margin-bottom: 40px;
  }
  #foot .inner .corpInfo #afetyBanner {
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  #foot .inner .corpInfo #afetyBanner img {
    width: 68vw;
    height: auto;
    margin: 4vw 16vw;
  }
  #foot .inner p {
    float: none;
    margin: 0 auto 40px;
  }
  #foot .inner ul {
    width: 100%;
  }
  #foot .inner ul li {
    float: none;
    padding: 20px 40px;
    margin: 0;
    text-align: left;
    border: none;
    border-bottom: 1px dotted #fff;
  }
  #foot .inner ul li a {
    display: block;
    width: 100%;
    height: 100%;
  }
  #foot .inner #linkArea {
    width: 640px;
  }
  #foot .inner ul {
    border-top: 1px dotted #fff;
  }
  #foot .inner ul li {
    width: 640px;
  }
  #foot .inner #linkArea h3 {
    text-align: center;
    margin: 0 auto 40px;
  }
  #foot .inner #linkArea ul {
    width: 100%;
  }
  #foot .inner #linkArea ul li {
    width: 100%;
  }
  #foot .inner .facebookArea {
    margin: 0 auto 40px;
  }

  /****************main****************/
  h1 {
    font-size: 200%;
    padding: 0 0 40px;
  }

  #h1Area {
    padding-bottom: 100px;
  }

  #main {
    margin: 0;
    width: 560px;
  }

  #index #main {
    padding: 0;
    width: 640px;
  }

  #main h3 {
    font-size: 161%;
  }

  h2 {
    padding: 0;
  }

  #topics ul {
    width: 640px;
    padding: 20px 30px;
  }
  #topics ul li:nth-last-child(2) {
    background: none;
  }
  #topics ul li:last-Child {
    display: none;
  }

  #h1Area .cont, .inner {
    width: 640px;
  }

  /***********************index***********************/
  #index .flexslider ul.slides {
    height: calc(100vh - 130px );
  }

  #vaslider .flexslider {
    width: 640px;
    height: calc(100vh - 130px );
    z-index: 0;
  }

  ul.flex-direction-nav {
    display: none;
  }

  .slides, .flex-control-nav, #carousel .flex-direction-nav {
    width: 640px;
  }

  .flexslider .slides > li {
    width: 640px !important;
    overflow: hidden;
  }
  .flexslider .slides > li img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: auto;
    height: 100vh;
  }

  #index #vaslider {
    position: relative;
    height: calc(100vh - 130px );
    min-height: 890px;
  }
  #index #videoArea {
    display: none;
  }
  #index .smahoSlider {
    display: block;
  }
  #index .smahoSlider h1 {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 100;
    color: #fff;
    width: 560px;
    padding: 40px;
  }
  #index .aboutArea .inner {
    flex-wrap: wrap;
    padding: 16vw 0;
    box-sizing: border-box;
  }
  #index .aboutArea .inner figure {
    width: 100%;
    padding: 0 4vw;
    margin-bottom: 8vw;
  }
  #index .aboutArea .inner figure img {
    width: 29.666vw;
    height: 16.48vw;
  }
  #index .aboutArea .inner figure img:last-child {
    margin-right: 0;
  }
  #index .aboutArea .inner .detail {
    width: 100%;
    padding: 0 8vw;
  }
  #index .aboutArea .inner .detail figure {
    width: 100%;
    padding: 0;
    margin: 0 auto 4vw;
    text-align: center;
  }
  #index .aboutArea .inner .detail figure img {
    margin: 0 auto;
  }
  #index .aboutArea .inner .detail h1 {
    width: 100%;
    font-size: 200%;
  }
  #index .aboutArea .inner .detail p {
    width: 100%;
  }
  #index #choice .inner {
    padding: 8vw 4vw 16vw;
    width: 100vw;
  }
  #index #choice .inner item {
    width: 44vw;
    margin-bottom: 10vw;
    padding: 4vw 2vw;
  }
  #index #choice .inner item:nth-child(4) {
    margin-bottom: 10vw;
  }
  #index #choice .inner item:nth-child(5), #index #choice .inner item:nth-child(6) {
    margin-bottom: 0;
  }
  #index #choice .inner item p.num {
    margin: -70px auto 0;
    font-size: 259%;
  }
  #index #choice .inner item h3 {
    font-size: 83%;
    font-weight: bold;
  }
  #index #blog .inner {
    width: 640px;
  }
  #index #blog .inner .blogItem {
    width: 560px;
    margin: 0 auto 40px;
  }
  #index #blog .inner .blogItem dl {
    width: 360px;
  }
  #index #insta .inner ul {
    margin: 0 40px 0;
  }
  #index #insta .inner ul li {
    width: 275px;
    height: 275px;
  }
  #index .flowArea h2 {
    padding: 0;
    margin-bottom: 8vw;
  }
  #index .flowArea .inner .flowList .flowCont {
    padding: 0 8vw;
    margin: 0 0 8vw;
    width: 100vw;
    box-sizing: border-box;
    position: relative;
    background: url("../img/index/flow/nextAlor45.png") left 50% bottom 0 no-repeat;
  }
  #index .flowArea .inner .flowList .flowCont .flowNum {
    width: 16vw;
    height: 16vw;
    font-size: 200%;
    position: absolute;
    top: -8vw;
    left: 4vw;
    background-color: #fff;
  }
  #index .flowArea .inner .flowList .flowCont img {
    width: 84vw;
    height: 52vw;
    margin-bottom: 4vw;
    padding: 0;
  }
  #index .flowArea .inner .flowList .flowCont dl {
    padding-bottom: 8vw;
    margin-bottom: 4vw;
    width: 84vw;
  }
  #index .flowArea .inner .flowList .flowCont dl dt {
    font-size: 200%;
    margin-bottom: 4vw;
  }
  #index .flowArea .inner .flowList .flowCont:last-child {
    padding: 0 8vw;
  }
  #index #access {
    padding-top: 4vw;
  }
  #index #access h2 {
    padding: 0;
    margin-bottom: 8vw;
  }
  #index #access .cont dl {
    width: 640px;
  }
  #index #access .cont dl dt, #index #access .cont dl dd {
    display: block;
    text-align: center;
  }
  #index #access .cont dl dt {
    width: 560px;
    margin: 0 auto 20px;
  }
  #index #access .inner {
    width: 92vw;
    padding: 0 4vw;
  }
  #index #access .inner dl {
    width: 92vw;
  }
  #index #access .inner dl dt {
    width: 100%;
    margin: 0 0 4vw;
    box-sizing: border-box;
  }
  #index .faqArea .inner {
    padding: 0 8vw 16vw;
  }
  #index .faqArea .inner dl {
    width: 84vw;
    padding: 0;
    border-bottom: none;
    margin: 0;
  }
  #index .faqArea .inner dl:last-child {
    margin-bottom: 8vw;
  }
  #index .faqArea .inner p.btn {
    width: 84vw;
    margin: 0;
    box-sizing: border-box;
  }
  #index #recruit .inner {
    width: 100%;
    margin: 0 auto;
  }
  #index #recruit .inner figure {
    width: 100%;
    height: auto;
  }
  #index #recruit .inner figure img {
    width: 100%;
    height: auto;
  }
  #index #recruit .inner .detail {
    width: 100%;
  }

  #parasailing h2,
  #marineSports h2,
  #setcourse h2 {
    padding: 0;
    margin-bottom: 8vw;
  }
  #parasailing .inner,
  #marineSports .inner,
  #setcourse .inner {
    width: 640px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0;
  }

  .comBanner a img {
    width: 100%;
    height: auto;
  }

  /****************courseList ****************/
  .courseList .inner {
    width: 640px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .courseList .inner .courseItem {
    width: 560px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    background: url(../img/course/common/640/moreBg.jpg) 50% bottom no-repeat #fff;
    margin-right: 0;
  }
  .courseList .inner .courseItem p.kyachIcon {
    top: 180px;
    min-width: 160px;
    min-height: 160px;
    background: url(../img/course/common/640/kyachIconBg.png) 50% 50% no-repeat;
    padding: 50px 34px;
  }
  .courseList .inner .courseItem p.kyachIcon3 {
    top: 180px;
    min-width: 160px;
    min-height: 160px;
    background: url(../img/course/common/640/kyachIconBg.png) 50% 50% no-repeat;
    padding: 50px 34px;
    padding: 50px 34px;
    background: url(../img/course/common/640/kyachIconSPBg.png) 50% 50% no-repeat;
  }
  .courseList .inner .courseItem:nth-child(3) > p.kyachIcon {
    background: url(../img/course/common/640/kyachIconSPBg.png) 50% 50% no-repeat;
  }

  #courseList section#parasailing {
    background: none;
  }

  /****************course****************/
  #course .cont {
    width: 640px;
  }

  p.kyachIcon {
    background: url(../img/course/common/640/kyachIconBg.png) 50% 50% no-repeat;
    padding: 50px 34px;
    min-width: 160px;
    min-height: 160px;
  }

  #h1Area {
    background: url(../img/common/640/sech1Bg.jpg) 50% top no-repeat;
    padding: 700px 0 40px;
  }

  #course #main {
    padding: 0;
    width: 640px;
  }
  #course #h1Area .cont p.kyachIcon {
    background: url(../img/course/common/640/kyachIconSPBg.png) 50% 50% no-repeat;
    top: -150px;
  }
  #course #point .cont {
    width: 640px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #course #point .cont .pointcont {
    width: 560px;
  }
  #course #point .cont .pointcont p.kyachIcon {
    top: 160px;
    left: 20px;
  }
  #course #point .cont .pointcont .pointImg {
    text-align: center;
  }
  #course #point .cont .pointcont .pointImg img {
    margin: 0 auto 20px;
  }
  #course #imgArea .cont {
    width: 640px;
  }
  #course #imgArea .cont h2.kyach, #course #imgArea .cont p {
    width: 560px;
    margin: 0 auto 40px;
  }
  #course #main .mainVisual {
    width: 640px;
    height: 320px;
  }
  #course #main .mainVisual .flex-viewport {
    width: 640px;
    height: 320px;
  }
  #course #main .mainVisual .flex-viewport ul li {
    width: 640px;
    height: 320px;
  }
  #course #main .mainVisual .flex-viewport ul li img {
    width: 640px;
    height: 320px;
  }
  #course #main .mainVisual ol {
    display: none;
  }
  #course #flow .flowCont {
    display: block;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 560px;
    text-align: center;
    margin: 0 auto 40px;
    background: url(../img/course/common/flowNextIcon.jpg) 50% bottom no-repeat;
  }
  #course #flow .flowCont .flowNum {
    width: 40px;
    height: 40px;
    margin: 0 auto 40px;
    text-align: center;
    padding: 50px;
  }
  #course #flow .flowCont img {
    text-align: center;
    width: 490px;
    margin: 0 0 40px;
  }
  #course #flow .flowCont p {
    text-align: center;
    width: 560px;
  }

  table {
    width: 560px;
    margin-bottom: 40px;
  }

  #course #main section#disc, #course #main section#fee dl {
    width: 560px;
    margin-bottom: 40px;
  }

  table tr th {
    background-color: #E5F6FD;
    padding: 20px;
    width: 520px;
  }
  table tr td {
    padding: 20px;
    width: 520px;
  }

  #course #main section#googleMap {
    margin-bottom: 80px;
  }
  #course #main section#reserv p.btn {
    width: 560px;
    margin: 0 auto 40px;
  }
  #course #main section#fee .payArea {
    display: block;
  }
  #course #main #fee .cont dl {
    width: 640px;
  }

  table {
    margin: 0 auto 40px;
  }

  #course #main section#disc {
    margin: 0 auto 40px;
  }
  #course #main section#fee dl {
    margin: 0 auto 40px;
  }
  #course #main section#fee .fishing {
    padding: 0 40px;
  }
  #course #main section#fee .fishing dl {
    display: block;
  }
  #course #main section#fee .fishing dl dt, #course #main section#fee .fishing dl dd {
    width: 100%;
    box-sizing: border-box;
  }
  #course .inner h2 {
    text-align: center;
  }

  /****************ACCESS****************/
  #access #main {
    width: 640px;
    padding: 0;
  }
  #access section#access h3 {
    width: 560px;
    margin: 0 auto 80px;
  }
  #access section#access ol li {
    margin: 0 40px 40px;
    width: 560px;
  }

  /****************SOCIAL****************/
  #index #social .inner .leftArea, #index #social .inner .rightArea {
    margin: 0 40px 40px;
    width: 560px;
  }

  /****************FAQ****************/
  #faq #main {
    padding: 0;
  }
  #faq section ul.janpLink li {
    width: 560px;
    margin: 0 40px 40px;
    height: 140px;
  }
  #faq section ul.janpLink li a {
    height: 120px;
  }

  .faq dl {
    background: none;
    border-right: 0;
    border-left: 0;
    padding: 0 40px 0 40px;
  }
  .faq dl:last-child {
    border-right: 0;
    border-left: 0;
    border-bottom: solid 3px #B6BBD7;
  }
  .faq dl.open {
    background: none;
  }

  /****************STAFF****************/
  #staff .staffDetail {
    width: 560px;
    padding-bottom: 40px;
    border-bottom: 1px dotted #00ABEB;
    margin: 0 40px 40px;
  }
  #staff .staffDetail:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
  #staff .staffDetail img {
    margin: 0 50px 20px;
    width: 460px;
    height: auto;
  }

  /****************CONTACT****************/
  #contact #main textarea {
    width: 520px !important;
  }
  #contact #div.mfp_err {
    font-size: 161%;
  }
  #contact #main {
    width: 560px;
  }

  /****************thanks****************/
  #thanks #main {
    width: 560px;
  }

  /******************会社概要******************/
  #company #main {
    width: 640px;
  }
  #company figure.mapImg {
    width: 100%;
    margin-bottom: 16vw;
  }
  #company figure.mapImg img {
    width: 92vw;
  }

  /******************bloglist******************/
  .post_list .subtitle h2 {
    font-size: 140%;
  }
  .post_list p.spcen {
    width: 560px;
    padding: 0;
  }
  .post_list p.spcen a img {
    width: 560px;
    height: 280px;
    margin-bottom: 40px;
  }
  .post_list .desc_area {
    width: 560px;
  }
}
/* CSS Document */