@charset "UTF-8";
/* CSS Document */
/* Scss Document */
/* Scss Document */
/*
@mixin ll_pc_size{
  @media screen and (min-width: $l_desktop) {
    @content;
  }
}
*/
/*文字色*/
.red {
  color: #FF0000; }

/*メインイメージ*/
#mainimg .mainimg_wrap {
  position: relative;
  margin-top: 60px; }
  #mainimg .mainimg_wrap .main_logo {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    left: 0;
    transform: translateY(-50%); }
    #mainimg .mainimg_wrap .main_logo p {
      color: #fff;
      font-size: 1.4rem;
      text-align: center; }
      @media (min-width: 768px) {
        #mainimg .mainimg_wrap .main_logo p {
          font-size: calc( 1.4rem + ( 1vw - 7.68px ) * 2.1484375 ); } }
      @media (min-width: 1280px) {
        #mainimg .mainimg_wrap .main_logo p {
          font-size: 2.5rem; } }
    #mainimg .mainimg_wrap .main_logo img {
      max-width: 250px;
      width: 25%;
      display: block;
      margin: auto;
      filter: drop-shadow(5px 5px 5px #fff); }

#contents {
  margin-top: 0; }

.section_title {
  margin-bottom: 43.34px;
  padding-top: 78px; }

.icon_title {
  margin-bottom: 35px;
  line-height: 1.5; }

/*コンセプト*/
#concept .concept_wrap {
  background: -moz-linear-gradient(0deg, #fff, #BAE8FF);
  background: -webkit-linear-gradient(0deg, #fff, #BAE8FF);
  background: linear-gradient(90deg, #fff, #BAE8FF);
  position: relative;
  height: 100%;
  z-index: 1; }
  #concept .concept_wrap:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url("/img/home/back_concept.png") repeat;
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    opacity: .3; }
  #concept .concept_wrap .concept_box .concept_text_wrap {
    overflow: hidden; }
    #concept .concept_wrap .concept_box .concept_text_wrap .txt_wrap {
      font-size: 1.3rem;
      color: #707070; }
      @media (min-width: 768px) {
        #concept .concept_wrap .concept_box .concept_text_wrap .txt_wrap {
          font-size: calc( 1.3rem + ( 1vw - 7.68px ) * 0.390625 ); } }
      @media (min-width: 1280px) {
        #concept .concept_wrap .concept_box .concept_text_wrap .txt_wrap {
          font-size: 1.5rem; } }
      #concept .concept_wrap .concept_box .concept_text_wrap .txt_wrap .about_txt {
        margin-bottom: 20px; }
      #concept .concept_wrap .concept_box .concept_text_wrap .txt_wrap .btn {
        margin-bottom: 30px; }
    #concept .concept_wrap .concept_box .concept_text_wrap .img_wrap .fish {
      position: relative;
      top: -40px;
      left: 40%; }
      #concept .concept_wrap .concept_box .concept_text_wrap .img_wrap .fish .bubble_01 {
        display: inline-block;
        width: 12%; }
      #concept .concept_wrap .concept_box .concept_text_wrap .img_wrap .fish .aji {
        display: block;
        margin-left: 30px;
        width: 50%;
        transform: rotate(15deg); }

/*釣れる魚種について*/
#style {
  position: relative;
  background: #D5F0FF; }
  #style .wave {
    position: absolute;
    top: -8vw;
    z-index: 1;
    width: 100%; }
  #style .style_wrap .style_box .txt_wrap {
    margin-bottom: 20px;
    padding: 0 4%; }
    #style .style_wrap .style_box .txt_wrap .style_txt {
      margin-bottom: 20px; }
  #style .style_wrap .style_box .img_wrap {
    width: 60%; }

#contents #schedule {
  padding: 50px 0; }
  #contents #schedule h2 {
    color: #4b7cc7; }
  #contents #schedule .sp_calender .sp_date {
    box-sizing: border-box;
    padding: 5px 1em;
    font-size: 1.3rem;
    color: #fff;
    text-align: left;
    background: #707070; }
  #contents #schedule .sp_calender .sp_calender-cont {
    position: relative;
    padding: 15px;
    box-sizing: border-box; }
    #contents #schedule .sp_calender .sp_calender-cont .list_time {
      margin-bottom: .75em;
      line-height: 1; }
      #contents #schedule .sp_calender .sp_calender-cont .list_time .icon_time {
        position: relative;
        display: inline-block;
        vertical-align: sub;
        width: 1.25em;
        height: 1.25em;
        border-radius: 50%;
        border: 1px solid;
        margin-right: .5em;
        box-sizing: border-box;
        overflow: hidden; }
        #contents #schedule .sp_calender .sp_calender-cont .list_time .icon_time::after {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-0.5px, -0.5px);
          width: calc(50% + .5px);
          height: calc(50% + .5px);
          border-bottom: 1px solid;
          border-left: 1px solid;
          content: ''; }
    #contents #schedule .sp_calender .sp_calender-cont .list_info {
      position: relative; }
      #contents #schedule .sp_calender .sp_calender-cont .list_info .list_color {
        padding: 2px 0 2px .75em;
        border-left: 6px solid;
        box-sizing: border-box; }
        #contents #schedule .sp_calender .sp_calender-cont .list_info .list_color span {
          font-weight: 600;
          font-family: "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; }
      #contents #schedule .sp_calender .sp_calender-cont .list_info .reserve_btn {
        position: absolute;
        bottom: 0;
        right: 0; }
        #contents #schedule .sp_calender .sp_calender-cont .list_info .reserve_btn a {
          width: auto;
          padding: 2px 10px;
          font-size: 1.2rem; }
  #contents #schedule .sp_calender .sp_schedule {
    box-sizing: border-box;
    padding: 15px;
    border: 1px solid #707070; }
    #contents #schedule .sp_calender .sp_schedule li {
      position: relative;
      box-sizing: border-box;
      margin-bottom: 2px;
      padding: 14px 12px;
      font-size: 1.3rem;
      letter-spacing: 0.4px;
      border-left-width: 14px;
      border-left-style: solid;
      background: #f5f6f8; }
      #contents #schedule .sp_calender .sp_schedule li span.corse_name::after {
        position: absolute;
        top: 50%;
        transform: translate(4.4px, -50%);
        content: '';
        width: 1px;
        height: 15px;
        background: #EBEBEB; }
      #contents #schedule .sp_calender .sp_schedule li span.mark {
        font-size: 1.6rem;
        line-height: 1.4;
        color: #FF0000;
        float: right; }
      #contents #schedule .sp_calender .sp_schedule li:nth-last-child(1) {
        margin-bottom: 0; }
  #contents #schedule .selecter_wrap {
    position: relative; }
  #contents #schedule .display_selecteditem {
    position: relative;
    box-sizing: border-box;
    margin: 0 auto 20px;
    max-width: 523px;
    padding: 12px 18px;
    width: auto;
    font-size: 1.6rem;
    color: #707070;
    background: #F8F8F8;
    border: none;
    border-radius: 40px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none; }
    @media (min-width: 768px) {
      #contents #schedule .display_selecteditem {
        font-size: calc( 1.6rem + ( 1vw - 7.68px ) * 0.390625 ); } }
    @media (min-width: 1280px) {
      #contents #schedule .display_selecteditem {
        font-size: 1.8rem; } }
    #contents #schedule .display_selecteditem::before {
      position: absolute;
      top: 50%;
      right: 5%;
      transform: translateY(-4px);
      content: '';
      width: 16px;
      height: 16px;
      box-sizing: border-box;
      border-width: 8px;
      border-style: solid;
      border-color: transparent;
      border-top-color: #707070; }
  #contents #schedule .plan_selector {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    max-width: 500px;
    background: #fff;
    border: 1px solid #c5c5c5; }
    #contents #schedule .plan_selector li {
      padding: 12px 18px;
      width: auto;
      font-size: 1.2rem;
      color: #707070;
      border: none;
      cursor: pointer;
      outline: none;
      -webkit-appearance: none; }
      @media (min-width: 768px) {
        #contents #schedule .plan_selector li {
          font-size: calc( 1.2rem + ( 1vw - 7.68px ) * 0.390625 ); } }
      @media (min-width: 1280px) {
        #contents #schedule .plan_selector li {
          font-size: 1.4rem; } }
      #contents #schedule .plan_selector li:hover {
        background: #f8f8f8; }
  #contents #schedule .calendar tbody tr {
    border-bottom: 1px solid #EBEBEB; }
    #contents #schedule .calendar tbody tr th, #contents #schedule .calendar tbody tr td {
      padding: 14px 7px;
      text-align: left;
      border-right: 1px solid #EBEBEB; }
    #contents #schedule .calendar tbody tr th {
      color: #34578E; }
      #contents #schedule .calendar tbody tr th.sun {
        color: #D55A5A; }
    #contents #schedule .calendar tbody tr td.day_box ul li {
      font-size: 1.1rem; }
      @media (min-width: 768px) {
        #contents #schedule .calendar tbody tr td.day_box ul li {
          font-size: calc( 1.1rem + ( 1vw - 7.68px ) * 0.390625 ); } }
      @media (min-width: 1280px) {
        #contents #schedule .calendar tbody tr td.day_box ul li {
          font-size: 1.3rem; } }
    #contents #schedule .calendar tbody tr td.list_time {
      text-align: right; }

/*釣果情報*/
#blog {
  background: #A7D4FA; }
  #blog .blog_box {
    padding-top: 30px;
    padding-bottom: 20px; }
    #blog .blog_box .blog_list {
      display: grid;
      grid-template-columns: 47% 47%;
      justify-content: space-between;
      grid-gap: 3rem 0;
      padding-bottom: 30px; }
      #blog .blog_box .blog_list li {
        position: relative;
        z-index: 1; }
        #blog .blog_box .blog_list li .thum_image {
          position: relative;
          margin-bottom: 10px;
          aspect-ratio: 1/1; }
          #blog .blog_box .blog_list li .thum_image::before {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -2;
            width: 100%;
            aspect-ratio: 1/1;
            background: #b4b4b4;
            content: ''; }
          #blog .blog_box .blog_list li .thum_image::after {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
            font-size: 1.5rem;
            color: #FFF;
            width: 100%;
            text-align: center;
            content: 'NO IMAGE'; }
          #blog .blog_box .blog_list li .thum_image img {
            height: 100%;
            object-fit: cover;
            object-position: center;
            aspect-ratio: 1/1; }
        #blog .blog_box .blog_list li .day {
          font-size: 1.1rem;
          margin-bottom: 2px; }
        #blog .blog_box .blog_list li .blog_title {
          font-size: 1.3rem; }
          @media (min-width: 768px) {
            #blog .blog_box .blog_list li .blog_title {
              font-size: calc( 1.3rem + ( 1vw - 7.68px ) * 0.390625 ); } }
          @media (min-width: 1280px) {
            #blog .blog_box .blog_list li .blog_title {
              font-size: 1.5rem; } }
        #blog .blog_box .blog_list li p {
          color: #707070;
          line-height: 1.6; }

/*その他詳細ボタン*/
#detail_btn {
  padding-bottom: 60px;
  background: #D5F0FF; }
  #detail_btn .detail_btn_wrap {
    padding: 8%; }
    #detail_btn .detail_btn_wrap a .btn_wrap {
      position: relative;
      margin-bottom: 40px; }
      #detail_btn .detail_btn_wrap a .btn_wrap .btn_title {
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
        font-size: 1.6rem;
        color: #06004E;
        background: url("/img/home/btntext.png") no-repeat center/cover;
        height: 70px; }
        @media (min-width: 768px) {
          #detail_btn .detail_btn_wrap a .btn_wrap .btn_title {
            font-size: calc( 1.6rem + ( 1vw - 7.68px ) * 0.390625 ); } }
        @media (min-width: 1280px) {
          #detail_btn .detail_btn_wrap a .btn_wrap .btn_title {
            font-size: 1.8rem; } }
        #detail_btn .detail_btn_wrap a .btn_wrap .btn_title span {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 100%;
          text-align: center; }
    #detail_btn .detail_btn_wrap a:nth-last-child(1) .btn_wrap {
      margin-bottom: 0; }

/*------------------------------
		769px以上
------------------------------*/
/*------------------------------
		980px以上
------------------------------*/
@media screen and (min-width: 981px) {
  /*メインイメージ*/
  #mainimg .mainimg_wrap {
    margin-top: 0; }

  .section_title {
    margin-bottom: 72.24px;
    padding-top: 130px; }

  .icon_title {
    margin-bottom: 57px;
    line-height: 1.5; }

  /*コンセプト*/
  #concept .concept_wrap .concept_box {
    padding-bottom: 80px; }
    #concept .concept_wrap .concept_box .concept_text_wrap {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      flex-flow: row wrap;
      -webkit-box-align: stretch;
      -webkit-align-items: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
      -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
      align-content: flex-start;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      #concept .concept_wrap .concept_box .concept_text_wrap .txt_wrap {
        flex: 0 1 40%;
        width: 40%;
        max-width: 40%; }
        #concept .concept_wrap .concept_box .concept_text_wrap .txt_wrap .about_txt {
          margin-bottom: 100px; }
      #concept .concept_wrap .concept_box .concept_text_wrap .img_wrap {
        flex: 0 1 60%;
        width: 60%;
        max-width: 60%;
        position: relative; }
        #concept .concept_wrap .concept_box .concept_text_wrap .img_wrap .img {
          width: 100%; }
        #concept .concept_wrap .concept_box .concept_text_wrap .img_wrap .fish {
          top: -70px; }
          #concept .concept_wrap .concept_box .concept_text_wrap .img_wrap .fish .bubble_01 {
            display: inline-block;
            margin-bottom: 20px;
            width: 70px; }
          #concept .concept_wrap .concept_box .concept_text_wrap .img_wrap .fish .aji {
            display: block;
            transform: rotate(20deg) translate(30px, -15px);
            width: 90%;
            max-width: 350px; }

  /*釣れる魚種について*/
  #style .style_wrap .style_box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    justify-content: flex-end;
    flex-direction: row-reverse;
    position: relative;
    align-items: center; }
    #style .style_wrap .style_box .txt_wrap {
      flex: 0 1 calc((100% - 20px) * 0.5);
      width: calc((100% - 20px) * 0.5);
      max-width: calc((100% - 20px) * 0.5);
      margin-bottom: 0;
      margin-left: 20px;
      padding: 0;
      max-width: 795px; }
      #style .style_wrap .style_box .txt_wrap .section_title {
        margin-bottom: 53px;
        text-align: left;
        padding-top: 0; }
        #style .style_wrap .style_box .txt_wrap .section_title span {
          display: inline-block; }
      #style .style_wrap .style_box .txt_wrap .style_txt {
        margin-bottom: 56px; }
    #style .style_wrap .style_box .img_wrap {
      flex: 0 1 calc((100% - 20px) * 0.5);
      width: calc((100% - 20px) * 0.5);
      max-width: calc((100% - 20px) * 0.5);
      margin: -6vw 0 0 0; }
      #style .style_wrap .style_box .img_wrap img {
        position: relative;
        z-index: 1; }

  /*スケジュール*/
  #schedule {
    padding: 0 0 138px; }
    #schedule h2 {
      color: #4b7cc7; }
    #schedule .display_selecteditem {
      padding: 12px 27.76px 12px 40px; }
    #schedule .plan_selector {
      margin-bottom: 37px; }
      #schedule .plan_selector li {
        padding: 10px 40px; }
    #schedule .colors {
      margin: 0 auto;
      width: fit-content; }
      #schedule .colors .course_color {
        margin-right: 15px; }
        #schedule .colors .course_color::before {
          content: '';
          display: inline-block;
          margin-right: 8px;
          width: 26px;
          height: 26px;
          vertical-align: middle; }
        #schedule .colors .course_color:nth-child(1)::before {
          background-color: #FF83C4; }
        #schedule .colors .course_color:nth-child(2)::before {
          background-color: #74CFFF; }
        #schedule .colors .course_color:nth-child(3)::before {
          background-color: #E3FF53; }
        #schedule .colors .course_color:nth-child(4)::before {
          background-color: #FFE567; }
    #schedule .calender_navi {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      flex-flow: row wrap;
      -webkit-box-align: stretch;
      -webkit-align-items: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
      -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
      align-content: flex-start;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      margin-bottom: 33.5px; }
      #schedule .calender_navi .calendar_guide {
        flex: 0 1 auto;
        width: auto;
        max-width: auto; }
        #schedule .calender_navi .calendar_guide .month {
          font-size: 2rem;
          text-align: center;
          color: #4B7CC7; }
        #schedule .calender_navi .calendar_guide .cate p {
          display: inline-block;
          font-size: 1.5rem;
          line-height: 1;
          color: #707070; }
          #schedule .calender_navi .calendar_guide .cate p span {
            margin-right: 10px;
            color: #FF0000; }
      #schedule .calender_navi .btn_area {
        flex: 0 1 auto;
        width: auto;
        max-width: auto; }
    #schedule .calendar {
      margin-bottom: 30px; }
      #schedule .calendar tbody tr {
        border-bottom: 1px solid #EBEBEB; }
        #schedule .calendar tbody tr th {
          padding: 0;
          text-align: left;
          /*width: 14.28571428%;*/ }
          #schedule .calendar tbody tr th.day_box {
            background-color: #eff8fe; }
            #schedule .calendar tbody tr th.day_box .month_num {
              padding: 10.5px 0 10px 11px;
              line-height: 1; }
            #schedule .calendar tbody tr th.day_box ul {
              border-top: 1px solid #707070;
              border-bottom: 1px solid #707070; }
              #schedule .calendar tbody tr th.day_box ul li {
                position: relative;
                box-sizing: border-box;
                padding: 7.61% 4.68%;
                letter-spacing: 0.4px;
                border-left-width: 9px;
                border-left-style: solid;
                border-bottom: 1px solid #EBEBEB; }
                #schedule .calendar tbody tr th.day_box ul li span.corse_name::after {
                  position: absolute;
                  top: 50%;
                  transform: translate(4.4px, -50%);
                  content: '';
                  width: 1px;
                  height: 15px;
                  background: #EBEBEB; }
                #schedule .calendar tbody tr th.day_box ul li span.mark {
                  color: #FF0000;
                  float: right; }
                #schedule .calendar tbody tr th.day_box ul li:nth-last-child(1) {
                  border-bottom: none; }
        #schedule .calendar tbody tr td {
          padding: 0; }
          #schedule .calendar tbody tr td.list_time {
            width: 20%; }
          #schedule .calendar tbody tr td.list_color {
            width: 10px; }
          #schedule .calendar tbody tr td.list_plan {
            width: 50%; }
          #schedule .calendar tbody tr td.list_num {
            width: 15%;
            text-align: center; }
          #schedule .calendar tbody tr td.list_state {
            width: 5%;
            text-align: center; }
          #schedule .calendar tbody tr td.list_btn {
            width: 8%;
            text-align: center; }

  /*釣果情報*/
  #blog .blog_box {
    padding-top: 75px;
    padding-bottom: 53px; }
    #blog .blog_box .blog_list {
      padding-bottom: 40px;
      grid-template-columns: repeat(4, 23%);
      grid-gap: 4rem 0; }
      #blog .blog_box .blog_list li .thum_image {
        margin-bottom: 15px; }
      #blog .blog_box .blog_list li .day {
        margin-bottom: 5px;
        font-size: 1.3rem; }

  /*その他詳細ボタン*/
  #detail_btn .detail_btn_wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    #detail_btn .detail_btn_wrap a {
      flex: 0 1 calc((100% - 74px) / 3);
      width: calc((100% - 74px) / 3);
      max-width: calc((100% - 74px) / 3); }
      #detail_btn .detail_btn_wrap a .btn_wrap:nth-child(even) {
        margin: 0 37px; } }
/*------------------------------
		1280px以上
------------------------------*/