@charset "UTF-8";
/*CSS INFOMATION=======================


 File name : base.css

====================================*/
 /*

common
-----------------------------------*/
body {
  overflow-x: hidden;
  font-weight: 400;
  color: #222; }

main {
  text-align: center; }

#container {
  line-height: 1.6;
  background: #f5f5f5; }

.contents {
  max-width: 1100px;
  padding: 50px 0;
  margin: 0 auto; }

p {
  font-size: 1.6rem;
  line-height: 2; }
  @media screen and (max-width: 600px) {
    p {
      font-size: 1.3rem;
      line-height: 1.6; } }
  p .indentfront {
    text-indent: -1em;
    padding-left: 2em;
    padding-bottom: 0 !important;
    margin: 0 0 0 1em !important; }

a {
  color: #222;
  text-decoration: underline;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s; }

a:hover {
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s; }
  @media screen and (max-width: 768px) {
    a:hover {
      filter: alpha(opacity=100) !important;
      -moz-opacity: 1 !important;
      opacity: 1 !important;
      -moz-transition: all 0.3s;
      -o-transition: all 0.3s;
      -webkit-transition: all 0.3s;
      transition: all 0.3s; } }

/* header */
header {
  top: 0;
  position: fixed;
  z-index: 10;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #eee;
  height: 70px; }
  @media screen and (max-width: 600px) {
    header {
      height: 60px; } }
  header h1 {
    position: absolute;
    top: 5px;
    left: 15px;
    width: 140px; }
    @media screen and (max-width: 600px) {
      header h1 {
        top: 5px;
        left: 0px; } }
    header h1 img {
      width: 120px;
      height: auto; }
      @media screen and (max-width: 600px) {
        header h1 img {
          width: 100px; } }
  header nav {
    position: absolute;
    top: 25px;
    left: 200px; }
    @media screen and (max-width: 768px) {
      header nav {
        position: relative;
        width: 100%;
        top: auto;
        left: auto; } }
    header nav ul {
      display: flex;
      width: 700px; }
      @media screen and (max-width: 768px) {
        header nav ul {
          width: 100%;
          display: block; } }
      header nav ul li {
        list-style: none;
        margin: 0 30px 0 0; }
        @media screen and (max-width: 768px) {
          header nav ul li {
            width: 100%;
            margin: 0; } }
        header nav ul li a {
          text-decoration: none;
          color: #252525;
          font-size: 1.4rem;
          font-weight: 500; }
          @media screen and (max-width: 768px) {
            header nav ul li a {
              font-size: 1.8rem;
              padding: 0 0 15px;
              display: block; } }
  header .header__search {
    position: absolute;
    top: 0;
    right: 5px;
    width: 320px;
    z-index: 9999; }
    @media screen and (max-width: 768px) {
      header .header__search {
        position: relative;
        top: auto;
        right: auto;
        width: 50%;
        margin: 0 auto;
        padding: 8px 0 0 10px; } }
    @media screen and (max-width: 600px) {
      header .header__search {
        position: relative;
        top: auto;
        right: auto;
        width: 80%;
        margin: 0 auto;
        padding: 8px 0 0 10px; } }

/* footer */
footer {
  margin: 0;
  text-align: center;
  background: #282828;
  position: relative;
  z-index: 10;
  height: 48px;
  margin: 0 0 0; }
  @media screen and (max-width: 600px) {
    footer {
      height: 35px; } }
  footer .copy {
    font-size: 1.1rem;
    padding: 15px 0;
    margin: 0 0 0;
    font-weight: 100 !important;
    color: #fff; }
    @media screen and (max-width: 600px) {
      footer .copy {
        font-size: 1.0rem;
        padding: 15px 40px 0 0;
        width: 500px;
        display: block;
        font-size: 1.0rem;
        transform: scale(0.7);
        transform-origin: left top; } }
    footer .copy a {
      color: #fff;
      text-decoration: none; }

a.topBtn {
  position: fixed;
  bottom: 0px;
  right: 0px;
  display: block;
  color: #fff;
  width: 48px;
  height: 48px;
  padding: 0;
  z-index: 998;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s; }
  @media screen and (max-width: 600px) {
    a.topBtn {
      bottom: 0;
      width: 35px;
      height: auto; } }
  a.topBtn img {
    width: 100%;
    height: auto; }

a:hover.topBtn {
  filter: alpha(opacity=100) !important;
  -moz-opacity: 1 !important;
  opacity: 1 !important;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s; }

.attention {
  font-size: 1.4rem;
  color: #777; }
  @media screen and (max-width: 600px) {
    .attention {
      font-size: 1.1rem; } }

h2 {
  font-size: 2.4rem;
  margin: 0 0 20px;
  font-weight: 700;
  text-align: center;
  position: relative;
  z-index: 1; }
  @media screen and (max-width: 600px) {
    h2 {
      font-size: 1.8rem; } }

  /*

    google search
    ------------------*/
/*フォーム*/
.gsc-input-box {
  border: none !important;
  background: #eee !important;
  border-radius: 6px;
  padding: 0px !important;
  widows: 250px; }

.gsc-input {
  width: 200px !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  background: #eee !important;
  margin: 0;
  padding: 0 !important;
  border-radius: 6px; }

.gsc-input:focus {
  outline: none; }

.gsc-search-button {
  margin-left: 8px !important; }

.gsc-search-button-v2 {
  font-size: 0rem;
  padding: 10px 11px !important;
  width: auto;
  vertical-align: middle;
  border: none !important;
  border-radius: 6px !important;
  margin-top: 0px;
  background-color: #282828 !important;
  background-image: linear-gradient(top, #333, #333);
  box-sizing: border-box; }

.gsc-search-button-v2 svg {
  width: 15px !important;
  height: 15px !important; }

.gsc-clear-button {
  display: none !important; }

/*結果ページ*/
.gsc-adBlock {
  position: relative;
  display: block;
  border-bottom: 1px solid #e9e9e9;
  margin-bottom: 4px;
  padding-bottom: 5px;
  display: none !important; }

.gsc-orderby {
  display: none !important; }

.gsc-above-wrapper-area {
  border-bottom: 2px dotted #E6E6EB !important;
  padding: 5px 0 5px 0; }

.gsc-webResult.gsc-result {
  margin: 0;
  padding: 30px 10px !important;
  border: 1px solid #fff;
  border-bottom: 2px dotted #E6E6EB !important; }
  @media screen and (max-width: 600px) {
    .gsc-webResult.gsc-result {
      padding: 15px 2px !important; } }

.gs-result .gs-title, .gs-result .gs-title * {
  color: #222 !important;
  text-decoration: none;
  font-size: 1.8rem !important;
  font-weight: bold !important;
  padding: 0 0 10px;
  text-align: left; }
  @media screen and (max-width: 600px) {
    .gs-result .gs-title, .gs-result .gs-title * {
      font-size: 1.3rem !important; } }

.gs-visibleUrl {
  font-size: 1.1rem !important; }
  @media screen and (max-width: 600px) {
    .gs-visibleUrl {
      font-size: 1.0rem !important; } }

.gs-webResult .gs-snippet, .gs-fileFormatType {
  color: #000 !important;
  font-size: 1.4rem !important; }
  @media screen and (max-width: 600px) {
    .gs-webResult .gs-snippet, .gs-fileFormatType {
      font-size: 1.3rem !important; } }

.gsc-control-cse .gsc-table-result {
  font-family: 'Noto Sans JP', sans-serif !important; }

/*ページネイション*/
.gsc-results .gsc-cursor-box {
  margin: 30px 10px 50px !important;
  text-align: center !important; }

.gsc-results .gsc-cursor {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  width: 100% !important; }

.gsc-results .gsc-cursor-box .gsc-cursor-current-page, .gsc-results .gsc-cursor-box .gsc-cursor-page {
  font-size: 1.6rem;
  border: none;
  display: block !important;
  width: 30px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  padding: 10px 10px;
  margin: 0 10px 10px 0;
  line-height: 1.8;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px; }
  @media screen and (max-width: 600px) {
    .gsc-results .gsc-cursor-box .gsc-cursor-current-page, .gsc-results .gsc-cursor-box .gsc-cursor-page {
      width: 20px;
      height: 20px;
      font-size: 1.2rem;
      padding: 9px; } }

.gsc-results .gsc-cursor-box .gsc-cursor-page {
  color: #000 !important;
  background: #F5F5FA !important; }

.gsc-results .gsc-cursor-box .gsc-cursor-page:hover {
  text-decoration: none !important;
  background: #222 !important;
  color: #fff !important; }

.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
  color: #fff !important;
  background: #222 !important; }

.gsc-results .gsc-cursor-box .gsc-cursor-current-page:hover {
  text-decoration: none !important; }

@media screen and (max-width: 768px) {
  .sp__nav {
    position: relative;
    display: none;
    height: 100vh;
    background: #fff;
    top: 0;
    padding: 80px 0 0;
    right: -100%;
    z-index: 999; } }

#menuButton {
  display: block;
  width: 40px;
  height: 38px;
  position: fixed;
  display: none;
  z-index: 99991; }
  @media screen and (max-width: 768px) {
    #menuButton {
      top: 15px;
      right: 15px;
      display: block; } }
  @media screen and (max-width: 600px) {
    #menuButton {
      top: 10px;
      right: 15px;
      display: block; } }

a#menuButton:hover {
  opacity: 1 !important; }

#menuButton span {
  display: block;
  background: #000;
  width: 30px;
  height: 2px;
  position: absolute;
  left: 9px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s; }

#menuButton span:first-child {
  top: 11px; }

#menuButton span:nth-child(2) {
  margin-top: -1px;
  top: 50%; }

#menuButton span:last-child {
  bottom: 11px; }

#menuButton.active span:first-child {
  -webkit-transform: translateY(8px) rotate(45deg);
  -moz-transform: translateY(8px) rotate(45deg);
  -ms-transform: translateY(8px) rotate(45deg);
  transform: translateY(8px) rotate(45deg); }

#menuButton.active span:nth-child(2) {
  opacity: 0; }

#menuButton.active span:last-child {
  -webkit-transform: translateY(-6px) rotate(-45deg);
  -moz-transform: translateY(-6px) rotate(-45deg);
  -ms-transform: translateY(-6px) rotate(-45deg);
  transform: translateY(-6px) rotate(-45deg); }

 /*

archive list
-----------------------------------*/
#spogomi,
#kaiyougomi,
#bluecarbon,
#fishingport,
#other {
  margin: -100px 0 0;
  padding: 100px 0 50px; }
  @media screen and (max-width: 768px) {
    #spogomi,
    #kaiyougomi,
    #bluecarbon,
    #fishingport,
    #other {
      margin: -80px 0 0;
      padding: 80px 0 30px; } }

.archivebox {
  padding: 120px 0 50px;
  max-width: 1100px;
  margin: 0 auto; }
  @media screen and (max-width: 1100px) {
    .archivebox {
      margin: 0 30px 0;
      padding: 120px 0 30px; } }
  @media screen and (max-width: 768px) {
    .archivebox {
      margin: 0 30px 20px;
      padding: 120px 0 30px; } }
  @media screen and (max-width: 600px) {
    .archivebox {
      margin: 0 20px 0;
      padding: 90px 0 30px; } }
  .archivebox .ttl__bar {
    margin: 0 auto 45px; }
  .archivebox .sub__txt {
    margin: 0 0 60px; }
    @media screen and (max-width: 600px) {
      .archivebox .sub__txt {
        margin: 0 0 30px; } }
  .archivebox h3 {
    background: #282828;
    color: #fff;
    text-align: left;
    padding: 10px 20px;
    border-radius: 6px;
    margin: 0 0 36px; }
    @media screen and (max-width: 600px) {
      .archivebox h3 {
        padding: 8px 15px;
        font-size: 1.4rem;
        margin: 0 0 15px; } }
  .archivebox__inner {
    width: 103.3%;
    margin: 0 auto 0;
    text-align: left;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap; }
    @media screen and (max-width: 600px) {
      .archivebox__inner {
        width: 100%;
        display: block;
        margin: 25px auto 0; } }
  .archivebox__item {
    width: 30%;
    text-align: left;
    margin: 0 3.3% 4% 0; }
    @media screen and (max-width: 800px) {
      .archivebox__item {
        width: 47%;
        margin: 0 3% 4% 0; } }
    @media screen and (max-width: 600px) {
      .archivebox__item {
        width: 100%;
        margin: 0 0 30px; } }
    .archivebox__item .img-box {
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      overflow: hidden;
      margin: 0 0 10px;
      position: relative; }
      @media screen and (max-width: 600px) {
        .archivebox__item .img-box {
          margin: 0 0 10px; } }
      .archivebox__item .img-box img {
        width: 100%;
        height: auto; }
    .archivebox__item .info {
      padding: 0 0 3px; }
      .archivebox__item .info .area {
        font-size: 1.1rem;
        letter-spacing: 0; }
      .archivebox__item .info .day {
        font-size: 1.1rem;
        letter-spacing: 0; }
    .archivebox__item .ttl {
      font-size: 1.5rem;
      line-height: 1.4;
      padding: 5px 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 40px;
      /*IE対策*/
      line-height: 1.5em;
      max-height: 4.5em; }
      @media screen and (max-width: 600px) {
        .archivebox__item .ttl {
          font-size: 1.3rem;
          height: auto; } }
    .archivebox__item .btn {
      display: flex;
      justify-content: center;
      margin: 20px 0 0; }
      @media screen and (max-width: 600px) {
        .archivebox__item .btn {
          margin: 10px 0 0; } }
      .archivebox__item .btn .btn__preview {
        background: #ddd;
        color: #0F1B1A;
        text-align: center;
        display: block;
        padding: 5px;
        width: 100px;
        margin: 0 5px;
        text-decoration: none;
        font-size: 1.4rem;
        border-radius: 100px;
        font-weight: bold; }
        @media screen and (max-width: 600px) {
          .archivebox__item .btn .btn__preview {
            width: 90px;
            font-size: 1.2rem; } }
      .archivebox__item .btn .btn__download {
        background: #d4efee;
        color: #0F1B1A;
        text-align: center;
        display: block;
        padding: 5px;
        width: 200px;
        margin: 0 5px;
        text-decoration: none;
        font-size: 1.4rem;
        border-radius: 100px;
        font-weight: bold; }
        @media screen and (max-width: 600px) {
          .archivebox__item .btn .btn__download {
            width: 190px;
            font-size: 1.2rem; } }

 /*

detail
-----------------------------------*/
.detailbox {
  padding: 120px 0 100px;
  max-width: 800px;
  margin: 0 auto; }
  @media screen and (max-width: 800px) {
    .detailbox {
      margin: 0 30px;
      padding: 120px 0 30px; } }
  @media screen and (max-width: 768px) {
    .detailbox {
      margin: 0 30px;
      padding: 120px 0 30px; } }
  @media screen and (max-width: 600px) {
    .detailbox {
      margin: 0 20px 0;
      padding: 90px 0 30px; } }
  .detailbox__youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin: 0 0 20px; }
  .detailbox__youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important; }
  .detailbox__img img {
    width: 100%;
    height: auto;
    margin: 0 0 30px;
    border-radius: 6px;
    overflow: hidden; }
    @media screen and (max-width: 600px) {
      .detailbox__img img {
        margin: 0 0 20px; } }
  .detailbox__ttl {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0 0 10px;
    text-align: left !important; }
    @media screen and (max-width: 600px) {
      .detailbox__ttl {
        font-size: 1.6rem; } }
  .detailbox__info {
    font-size: 1.2rem;
    text-align: left;
    margin: 0 0 60px; }
    @media screen and (max-width: 600px) {
      .detailbox__info {
        font-size: 1.1rem; } }
  .detailbox__kiyaku--txt {
    line-height: 1.6 !important; }
    @media screen and (max-width: 600px) {
      .detailbox__kiyaku--txt {
        font-size: 1.2rem; } }
  .detailbox__kiyaku--box {
    overflow-y: auto;
    height: 200px;
    padding: 30px;
    background: #fff;
    border: 1px solid #ddd;
    margin: 30px 0 0; }
    @media screen and (max-width: 600px) {
      .detailbox__kiyaku--box {
        margin: 15px 0 0;
        padding: 20px; } }
    .detailbox__kiyaku--box h4 {
      font-size: 2.0rem;
      margin: 0 0 20px; }
      @media screen and (max-width: 600px) {
        .detailbox__kiyaku--box h4 {
          font-size: 1.6rem; } }
    .detailbox__kiyaku--box h5 {
      font-size: 1.5rem;
      text-align: left !important;
      margin: 30px 0 10px;
      border-bottom: 1px solid #ccc; }
    .detailbox__kiyaku--box p {
      text-align: left !important;
      font-size: 1.3rem !important;
      margin: 0 0 20px;
      line-height: 1.6; }
    .detailbox__kiyaku--box p.indent {
      padding-left: 1.5em;
      text-indent: -1.5em; }
  .detailbox__doui {
    margin: 20px 0 0; }
  .detailbox label {
    cursor: pointer; }
  .detailbox .btn__box {
    margin: 30px 0; }
  .detailbox .link__back a {
    text-align: center;
    font-size: 1.4rem;
    margin: 30px 0 0;
    color: #252525; }
    @media screen and (max-width: 600px) {
      .detailbox .link__back a {
        margin: 20px 0 0;
        font-size: 1.2rem; } }

 /*

form
-----------------------------------*/
.formbox {
  padding: 120px 0 100px;
  max-width: 800px;
  margin: 0 auto; }
  @media screen and (max-width: 800px) {
    .formbox {
      margin: 0 30px;
      padding: 120px 0 30px; } }
  @media screen and (max-width: 768px) {
    .formbox {
      margin: 0 30px;
      padding: 120px 0 30px; } }
  @media screen and (max-width: 600px) {
    .formbox {
      margin: 0 20px 0;
      padding: 90px 0 30px; } }
  .formbox .sub__txt {
    margin: 0;
    text-align: center; }
    .formbox .sub__txt p {
      padding: 0 0 20px; }
  .formbox__inner {
    background: #fff;
    border-radius: 6px;
    padding: 50px;
    margin: 30px 0 0; }
    @media screen and (max-width: 600px) {
      .formbox__inner {
        padding: 20px 20px 30px;
        margin: 10px 0 0; } }
  .formbox dt {
    text-align: left;
    margin: 0 0 5px; }
  .formbox dd {
    text-align: left;
    margin: 0 0 30px; }
  .formbox .font__red {
    color: #9D0000;
    font-size: 1.2rem; }
  .formbox .ttl__thanks {
    font-size: 2.4rem;
    margin: 0 0 20px;
    font-weight: 700; }
    @media screen and (max-width: 600px) {
      .formbox .ttl__thanks {
        font-size: 1.8rem; } }
  .formbox .btn__box {
    margin: 30px 0 0; }
  .formbox button, .formbox input, .formbox select, .formbox textarea {
    font-family: inherit;
    font-size: inherit; }
  .formbox input[type='text'],
  .formbox input[type='password'],
  .formbox input[type='search'],
  .formbox input[type='tel'],
  .formbox input[type='email'],
  .formbox input[type='datetime'],
  .formbox input[type='data'],
  .formbox input[type='month'],
  .formbox input[type='week'],
  .formbox input[type='time'] {
    font: 1.6rem;
    box-sizing: border-box;
    padding: 6px;
    border: 1px solid #eee;
    margin: 0 0 0;
    background: #eee;
    border-radius: 3px;
    width: 100%; }
  .formbox select {
    font: 1.4rem;
    box-sizing: border-box;
    border: 1px solid #eee;
    padding: 6px;
    margin: -3px 0 0;
    height: 35px;
    background: #eee;
    border-radius: 3px;
    width: 100%; }
  .formbox textarea {
    font: 1.4rem;
    box-sizing: border-box;
    padding: 6px;
    border: 1px solid #eee;
    margin: 0 0 0;
    padding: 15px;
    background: #eee;
    border-radius: 3px;
    width: 100%;
    height: 150px; }
  .formbox input[type="button"],
  .formbox input[type="submit"],
  .formbox button[type="button"],
  .formbox button[type="submit"] {
    cursor: pointer;
    outline: 0; }
  .formbox input[type="button"]:hover,
  .formbox input[type="submit"]:hover,
  .formbox button[type="button"]:hover,
  .formbox button[type="submit"]:hover {
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s; }
  .formbox input[type=checkbox] {
    transform: scale(1.4);
    margin: 0 6px 0 0;
    cursor: pointer; }

.thanks__inner {
  margin: 30px 0 400px; }
  @media screen and (max-width: 600px) {
    .thanks__inner {
      margin: 30px 0 400px; } }

.btn__large--download {
  border: 1px solid #d4efee;
  background: #d4efee;
  color: #0F1B1A;
  padding: 15px;
  display: block;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  width: 400px;
  margin: 0 auto;
  font-size: 2rem;
  border-radius: 50px;
  overflow: hidden;
  cursor: pointer; }
  @media screen and (max-width: 600px) {
    .btn__large--download {
      width: 300px;
      font-size: 1.4rem; } }

.btn__large--touroku {
  border: 1px solid #d4efee;
  background: #d4efee;
  color: #0F1B1A;
  padding: 15px;
  display: block;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  width: 480px;
  margin: 0 auto;
  font-size: 2rem;
  border-radius: 50px;
  overflow: hidden;
  cursor: pointer; }
  @media screen and (max-width: 600px) {
    .btn__large--touroku {
      width: 300px;
      font-size: 1.4rem; } }

.btn__large--submit {
  border: 1px solid #d4efee;
  background: #d4efee;
  color: #0F1B1A;
  padding: 10px;
  display: block;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  width: 200px;
  margin: 0 auto;
  font-size: 1.6rem;
  border-radius: 50px;
  overflow: hidden;
  cursor: pointer; }
  @media screen and (max-width: 600px) {
    .btn__large--submit {
      width: 200px;
      font-size: 1.4rem; } }

#btn__touroku:disabled {
  cursor: default;
  pointer-events: none;
  filter: alpha(opacity=40) !important;
  -moz-opacity: 0.4 !important;
  opacity: 0.4 !important; }

@media screen and (min-width: 769px) {
  .spBox {
    display: none; } }
@media all and (min-width: 0px) and (max-width: 768px) {
  .pcBox {
    display: none; } }