@charset "UTF-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*--clearfix--*/
.cf {
 *zoom: 1;
}

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

/* ==== common =========================== */
iframe{
  max-width:100%;
  max-height:100%;
}
@media screen and (min-width: 769px) {
#menu {
  display:none !important;
}
#logo_s {
  display:none;
}
.slicknav_menu {
}
}
@media screen and (max-width:768px) {
.cont_p {
  display:none !important;
}
#logo_s {
  position:absolute;
  z-index:10000;
  top:10px;
  left:2%;
  width:42%;
  height:auto;
}
#logo_s img {
  width:100%;
  height:auto;

}
}


@media screen and (max-width: 767px) {
#menu {
 display:none;
}

.slicknav_menu {
 display:block !important;
}
}
@media screen and (max-width:768px) {


p#menu {
  width:24px;
  right:20px;
  top:15px;
  position:absolute;
  z-index:10000;
}

p#menu img {
  display:block;
}

/*ドロップダウン*/
p#menu a {
  display:block;
  cursor:pointer;
  z-index:10000;
}

#dl-menu {
  display:none;
  width:100%;
  position:absolute;
  top:100px;
  right:0;
  z-index:10000;
}

#dl-menu ul {
  border:3px solid #F5F4F5;
  background:#F5F4F5;
  box-shadow:rgba(113, 135, 164, 0.2) 0px 1px 6px 3px;
  -webkit-box-shadow:rgba(113, 135, 164, 0.2) 0px 1px 6px 3px;
  -moz-box-shadow:rgba(113, 135, 164, 0.2) 0px 1px 6px 3px;
}

#dl-menu li {
  width:50%;
  float:left;
  padding:10px;
  box-sizing : border-box;
  background:#fff;
  border:3px solid #F5F4F5;
}

#dl-menu li:first-child {
  width:100%;
}

#dl-menu li:last-child {
  clear:both;
  width:60%;
  text-align:center;
  margin:0 auto;
  float:none;
  color:#fff;
  cursor:pointer;
  background:#6392b9;
  border:5px solid #F5F4F5;
  width:60%;
}

#dl-menu li a {
  display:block;
  font-size:12px;
  background:url(../_img/common/arrow01.png) no-repeat 0 center;
  padding:0 0 0 15px;
  color:#D1707F;
  text-decoration:none;
}
}




body *{
  font-family: 'Noto Sans Japanese', sans-serif;
}
h1,h2{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 900;
}
h3,h4,h5{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 700;
}

p,li {
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: normal;
}
#tel {
  width: 260px;
  height: 45px;
  background-color: #5FAAD0;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  display: inline-block;
}
#tel img{
  display: block;
  margin: 11px auto 0;
  text-align: center;
}
#tel:hover {
  background-color: #B19230;
  -webkit-transition: 0.2s ease-in-out;
       -moz-transition: 0.2s ease-in-out;
         -o-transition: 0.2s ease-in-out;
            transition: 0.2s ease-in-out;
}
/* =========================================================
topimage
========================================================= */
#topimage {
  position: relative;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  height: auto;
  overflow: hidden;
}

#topimage img {
  height: auto;
  z-index: 30;
}
#topic {
  min-width: 1460px;
}

#topimage h1 {
  width: 408px;
  height: auto;
  position: absolute;
  left: 50%;
  margin-left: -204px;
  z-index: 30;
  top: 60%;
}

#toptitle {
  width: 328px!important;
}

#topimage a {
}

#scroll {
  position: absolute;
  top: 70%;
  left: 50%;
  margin-left: -40px;
  width: 80px;
  height: 80px;
  -webkit-transition: 0.1s ease-in-out;
       -moz-transition: 0.1s ease-in-out;
         -o-transition: 0.1s ease-in-out;
            transition: 0.1s ease-in-out;
            z-index: 30;
}
#scroll:hover {
  top: 71%;
  -webkit-transition: 0.1s ease-in-out;
       -moz-transition: 0.1s ease-in-out;
         -o-transition: 0.1s ease-in-out;
            transition: 0.1s ease-in-out;
}

/* =========================================================
htnavi
========================================================= */
#htnavi {
  position: absolute;
  top: 0;
  right: 15%;
  background: url(../img/bk_htop.png) no-repeat;
  width: 381px;
  height: 41px;
  z-index: 40;
}

#htnavi ul {
}

#htnavi ul li {
  float: left;
  margin: 7px auto 0 24px;
}

#htnavi ul li a {
}

#htnavi ul li a img {
}

/* =========================================================
header
========================================================= */
#header {
  width: 100%;
  height: 68px;
  overflow: hidden;
}
#logo_sub {
  margin: 19px 0 0 0;
}
#logo_sub img {
}
/* =========================================================
htnavi_sub
========================================================= */
#htnavi_sub {
  position: absolute;
  top: 0;
  right: 0;
  background: url(../img/bk_htop.png) no-repeat;
  width: 381px;
  height: 41px;
}

#htnavi_sub a {
}

#htnavi_sub a img {
  float: left;
  margin: 6px 0 0 24px;
}


/* =========================================================
gnavi_wrapp
========================================================= */
#gnavi_wrapp {
  position: relative;
  width: 100%;
  overflow: hidden;
  text-align: center;
  background: url(../img/bk_gnunder.gif) repeat-x;
  background-position: 0 bottom;
  height: 70px;
  margin: 0;
  background-color: #fff;
  z-index:1000;
}

/* =========================================================
gnavi
========================================================= */
#gnavi {
  width: 100%;
  text-align: center;
  position: relative;
}

#gnavi a {

}

#gnavi a img {
}
#logo {
  margin: -6px 0 0 10px;
  height: 54px;
  display: inline-block;
  position: relative;
  background: none !important;
}
#logo img {
  padding: 4px 17px 0 !important;
}
#gnavi ul {
  display: inline-block;
  padding-top: 5px;
  height: 70px;

}

#gnavi ul li {
  display: inline-block;
  margin: 5px 10px;
  height: 48px;
  position: relative;;;
}

#gnavi ul li a {
  height: 100%;
  display: block;
  background-image: url(../img/bk_gn.gif);
  background-color: #A8C8FF;
  -webkit-transition: 0.1s ease-in-out;
       -moz-transition: 0.1s ease-in-out;
         -o-transition: 0.1s ease-in-out;
            transition: 0.1s ease-in-out;
}
#gnavi ul li a:hover {
  background-color: #A8C8FF;
  background-image:none;
  -webkit-transition: 0.2s ease-in-out;
       -moz-transition: 0.2s ease-in-out;
         -o-transition: 0.2s ease-in-out;
            transition: 0.2s ease-in-out;
  background-image:none;
}

#gnavi ul li a img {
  display: block;
  padding: 11px 24px 0;
}

/* =========================================================
gnavi_sub_wrapp
========================================================= */
#gnavi_sub_wrapp {
  position: fixed;
  width: 100%;
  overflow: hidden;
  text-align: center;
  background: url(../img/bk_gnunder.gif) repeat-x;
  background-position: 0 bottom;
  height: 130px;
  margin: 0px 0 0 0;
  background-color: #fff;
  z-index: 999;
}

/* =========================================================
gnavi_sub
========================================================= */
#gnavi_sub {
  width: 980px;
  text-align: center;
  position: relative;
  margin: 0 auto;
}

#gnavi_sub a {
  float: left;

}

#gnavi_sub a img {
}
#logo {
  height: 54px;
  display: inline-block;
  position: relative;
  background: none !important;
  margin: 5px 0 0 4px;
}
#logo img {
  padding: 4px 17px 0 !important;
}
#gnavi_sub ul {
  padding-top: 2px;
  height: 60px;
  display: block;
  width: 100%;

}

#gnavi_sub ul li {
  height: 43px;
  position: relative;

  float: left;
  margin: 5px 5px;;;
}

#gnavi_sub ul li a {
  height: 100%;
  display: block;
  background-image: url(../img/bk_gn.gif);
  background-color: #A8C8FF;
  -webkit-transition: 0.1s ease-in-out;
       -moz-transition: 0.1s ease-in-out;
         -o-transition: 0.1s ease-in-out;
            transition: 0.1s ease-in-out;
}
#gnavi_sub ul li a:hover {
  background-color: #A8C8FF;
  background-image:none;
  -webkit-transition: 0.2s ease-in-out;
       -moz-transition: 0.2s ease-in-out;
         -o-transition: 0.2s ease-in-out;
            transition: 0.2s ease-in-out;
  background-image:none;
}

#gnavi_sub ul li a img {
  display: block;
  padding: 8px 22px 0;
}

#h-tell {
  float: right;
  margin: 43px 0 0 0;
  overflow: hidden;
}
#h-tell img {
  margin: 2px 10px 0 0;
  float: left;
  height: auto;
}
#h-sns {
  position: absolute;
  width: 112px;
  height: 25px;
  top: 86px;
  right: 0;
}
#h-sns a {
}
#h-sns a img {
  margin: 0 10px 0 0;
}


#ct2_link {
}
.link_btn {
  width: 300px;
  height: 40px;
  background-color: #5FAAD0;
  display: inline-block;
  border-radius: 4px;        /* CSS3草案 */
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 4px;   /* Firefox用 */
  -webkit-transition: 0.2s ease-in-out;
       -moz-transition: 0.2s ease-in-out;
         -o-transition: 0.2s ease-in-out;
            transition: 0.2s ease-in-out;
            margin: 40px auto 30px;
}
.link_btn:hover {
  background-color: #B19230;
  -webkit-transition: 0.2s ease-in-out;
       -moz-transition: 0.2s ease-in-out;
         -o-transition: 0.2s ease-in-out;
            transition: 0.2s ease-in-out;

}

.link_btn img {
  margin: 12px auto 0;
}

/* =========================================================
footer_wrapp
========================================================= */
#footer_wrapp {
  width: 100%;
  margin: 0px auto;
  text-align: center;
  overflow: hidden;
  background: url(../img/bk_nami.jpg) repeat-x;
  background-color: #F7F8FB;
  padding-top: 50px;
  position: relative;
}

/* =========================================================
footer
========================================================= */
#footer {
  width: 980px;
  margin: 0 auto;
  position: relative;
}

#footer a {
}

#footer a img {
}

/* =========================================================
links_wrapp
========================================================= */
#links_wrapp {
  width: 100%;
  overflow: hidden;
  margin: 48px auto 40px;
  color: #484848;
}

/* =========================================================
nfbox
========================================================= */
#nfbox {
  float: left;
  text-align: left;
  width: 430px;
}

/* =========================================================
news
========================================================= */
#news {
  height: 215px;
}

#news h3 {
}

#news h3 img {
}

/* =========================================================
news_box
========================================================= */
#news_box {
  border-top: solid 1px #484848;
}

#news_box ul {
}

#news_box ul li {
  border-bottom: dashed 1px #333333;
  height: 57px;;
}

#news_box ul li span {
  font-size: 12px;
}

#news_box ul li p {
  font-size: 14px;
}

/* =========================================================
follow
========================================================= */
#follow {
  margin: 31px auto 0;
}

#follow ul {
  border-top: solid 1px #484848;
}

#follow ul li {
  float: left;
  margin: 10px 10px 0 0;
}

#follow ul li a {
}

#follow ul li a img {
}

/* =========================================================
linkbox
========================================================= */
#linkbox {
  float: right;
  width: 520px;
  text-align: left;
}

#linkbox h3 {
}

#linkbox h3 img {
}

/* =========================================================
link_box
========================================================= */
#link_box {
  border-top: solid 1px #484848;
}

#link_box ul {
  margin: 15px auto 0;
}

#link_box ul li {
  width: 100%;
  overflow: hidden;
  height: 142px;
  border-bottom: dashed 1px #373737;
  margin: 10px auto;
}

#link_box ul li a {
  width: 120px;
  height: 120px;
  display: block;
  margin: 0 10px 0 0;
  float: left;
}

#link_box ul li a img {
}

#link_box ul li .link_text {
  float: left;
  width: 390px;
}

#link_box ul li .link_text h4 {
  font-size: 15px;
  color: #C01C5F;
}

#link_box ul li .link_text p {
  font-size: 13px;
  line-height: 22px;
  margin: 3px auto;
  letter-spacing: -0.03em;
}

#link_box ul li .link_text a {
  width: 84px;
  height: 22px;
}

#link_box ul li .link_text a img {
}
#totop {
}
#totop img{
  position: absolute;
  right: -10%;
  bottom: -53px;
  -webkit-transition: 0.2s ease-in-out;
       -moz-transition: 0.2s ease-in-out;
         -o-transition: 0.2s ease-in-out;
            transition: 0.2s ease-in-out;
}
#totop img:hover{
  position: absolute;
  right: -10%;
  bottom: -45px;
  -webkit-transition: 0.2s ease-in-out;
       -moz-transition: 0.2s ease-in-out;
         -o-transition: 0.2s ease-in-out;
            transition: 0.2s ease-in-out;
}

/* =========================================================
copy
========================================================= */
#copy {
  background: url(../img/bk_footer.jpg) repeat-x;
  background-color: #759BC4;
  height: 80px;
  z-index: 20;
  position: relative;
}

#copy p {
  color: #fff;
  padding: 30px 0 0 0;
  font-size: 13px;
}



#formWrap {
  max-width:98%;
  margin:0 1%;
  color:#555;
  line-height:120%;
  font-size:90%;
}
table.formTable{
  width:100%;
  margin:0 auto;
  border-collapse:collapse;
}
table.formTable td,table.formTable th{
  border:1px solid #ccc;
  padding:2%;
  width:70%;
}
table.formTable th{
  width:25%;
  font-weight:normal;
  background:#efefef;
  text-align:left;
}
.red {
    color:#d67a73;
    font-weight:bold;
}

.pc_display {
 display: block;

}
.sm_display {
  display:none;
}
/*レスポンシブ設定*/
@media screen and (min-width:769px) and ( max-width:1145px)  {
  #gnavi ul li {
    display: inline-block;
    margin: 5px 0px;
    height: 48px;
    position: relative;
  }
  #gnavi ul li a img {
    display: block;
    padding: 11px 0px 0;
  }
  #logo img {
    padding: 4px 0px 0 !important;
    width:180px;
    height:auto;
  }
}

@media screen and (max-width:768px) {
  #gnavi_sub_wrapp {
    display:none;
  }
  br {
    display: none;
  }
  #htnavi {
    display: none;
  }
  #scroll {
    display:none;
  }
  #ct01 h2 {
    width:90%;
    margin:20px 5% !important;
  }
  #ct01 h2 img {
    width:100%;
    height:auto;
  }
  #sct01_wrapp {
    padding:30px 0 0 !important;
  }
  #sct01 img {
    width: 100%;
    height:auto;
  }
  #sct01 {
    width:96% !important;
    margin: auto 2% !important;
    overflow: initial !important;;
  }
  #sct01 h1 img {
    position:relative !important;

    top:initial !important;
    left:initial  !important;
    height:auto;
    margin:0 auto !important;
    width:40%;
  }
  #sct02 h2 img {
    width:50% !important;
    height:auto;
  }
  #sct02 img {
    width:100%;
    height:auto;
  }
  .p-beach,.p-sea,.p-marine,.p-ocean {
    background:initial !important;
    height: auto !important;
  }
  #pbeach,#psea,#pmarine,#pocean  {
    position:relative !important;
    top: initial !important;
    left: initial !important;;
  }
  #sct06 .p_back {
    width:100%;
    margin:30px auto 80px;
    text-align:center !important;

  }
  #sct06 .p_back h3 {
    width:80%;
    margin:30px 10% 0 !important;

  }
  #sct06 .p_back h3 img {
    width:100%;
    height:auto;
  }
  #sct06 .p_back h4 {
    width:80%;
    margin:30px 10% 0 !important;

  }
  #sct06 .p_back h4 img {
    width:100%;
    height:auto;
  }
  #sct06 .p_back a img {
    margin:10px auto 0 !important;;

  }

  #ct01,#ct02,#ct03,#ct04,#ct05,#cont,#ct06,#footer,#sct02,#sct06,#sct07,#sct05,#sct03,#sct04 {
    width:96% !important;
    margin: auto 2% !important;
  }
  #bread {
    width:96% !important;
    margin:33px 2% 10px !important;
    padding:10px 0 0 0 !important;;;
  }
  .infiniteslide1 {
    margin:25px auto 20px !important;

  }
  #gmap {
    width:96% !important;
    margin: auto 2%;
    height: 280px !important;
  }
  #ct06 ul {
    height: 400px !important;
  }
  #ct06_wrapp {
    height: 200px;
  }
  #link_box ul li a {
  }
  .sm_img {
    width:96%;
    margin: auto 2%;
    height: auto;
  }
    #link_box ul li {
    width: 100%;
  }
  #link_box ul li a img {
  }
  .sm_del {
    display: none !important;
  }
  .link_text {
    width: 100% !important;
    float: none !important;
  }
  #link_box ul li .link_text p {
    float: right;

  }
  #links_wrapp {
    width:96%;
    margin: auto 2%;
    height: auto;
  }
  #nfbox {
    float: none;
    text-align: left;
    width: 100%;
  }
  #linkbox {
    float: none;
    width: 100%;
    text-align: left;
  }
  #pslider {
    width:96% !important;
    margin: 20px 2%  !important;
    position:relative;
    overflow:hidden;

  }
  .content {
    clear: both;
    overflow: hidden;
    width: 100%;
    height: 1600px !important;
  }
  .content ul li img {
    width:90%;
    height:auto;
    margin:0 10%;
  }
  #sct07 .tab {
    width:100%;

  }
  #sct07 .tab li {
    width:100%;

  }
  .pc_display {
    display:none !important;
  }
  .sm_display {
    display:block;
    margin:20px 2%;
    width:96%;
  }
  .sm_display h3 {
    margin:50px auto 0;
  }
  .sm_display h3 img {
    width:80%;
    height:auto;
    margin:0 10%;
  }
  .sm_display ul li {
  }
  .sm_display ul li img {
    width:80%;
    height:auto;
  }
  .flow_no{
    float:left;
    margin:1%  !important;
    width:48% !important;
    height:300px !important;
  }
  .flow_no img {
    width:100%;
    height:auto;
  }
  .flow_no p {
    width:90%;
    font-size:70% !important;
    margin:5% 1% 5% 9% !important;;
  }
  #pt {
    width:96% !important;
    margin:0 2% !important;

  }
  #pt img {
    width:100%;
    height:auto;

  }
  #pt a img {
    width:initial !important;

  }
  #pt h2 {
    width:90%;
    margin:25px 5% !important;

  }
  #pt h2 img {
    width:100%;
    height:auto;

  }
  #pt h3 {
    width:50%;
    margin:25px 25% !important;

  }
  #pt h3 img {
    width:100%;
    height:auto;

  }

  #grn_box {
  }
  #grn_box .brn {
    width:48% !important;
    margin:1% !important;
    height:300px !important;

  }
  #grn_box .brn img {
    width:100%;
    height:auto;

  }
    #grn_box .brn h3 {
    width:90% !important;
    margin:5% 1% 5% 9% !important;
    font-size:90% !important;

    }
  #grn_box .brn p {
    width:90% !important;
    font-size:80% !important;
    margin:5% 1% 5% 9% !important;

  }
  #sct04 .ac_wrapp .ac_left {
    width:96% !important;
    margin:20px 2%;;

  }
  #sct04 .ac_wrapp .ac_right {
    width:96% !important;
    margin:2%;;

  }
  table.formTable {
    width:96%;
    margin:0 2%;
  }
  table.formTable th {
    width:100%;
  }
  tbody tr{
        display: block;
        margin-bottom: 0;
    }
    tbody th,
    tbody td{
        border: none;
        display: list-item;
        list-style: none;
        width: 100% !important;
    }
    #cont h1 {
    font-size:120% !important;

    }
    #cont h2 {
    font-size:110% !important;

    }
}


@media screen and (max-width:414px) {
#logo_s {
  position:absolute;
  z-index:10000;
  top:10px;
  left:2%;
  width:54%;
  height:auto;
}
#logo_s img {
  width:100%;
  height:auto;

}
}