@charset "UTF-8";
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

Home CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
/* Variables
-------------------------------------------- */
/* Content
-------------------------------------------- */
#container #main {
  position: relative;
  width: 100%;
  max-width: inherit;
  padding: 50% 0 0;
  overflow: hidden;
  background: url(../img/index/bg-main.jpg) center center no-repeat;
  background-size: cover; }
  @media (max-width: 640px) {
    #container #main {
      padding-top: 100vw;
      background: url(../img/index/bg-main_sp.jpg) left top no-repeat;
      background-size: 100% auto; } }
  #container #main header {
    position: absolute;
    width: 46%;
    left: 2%;
    top: 50%;
    transform: translateY(-50%); }
    @media (max-width: 640px) {
      #container #main header {
        position: relative;
        width: calc(100% - 20px);
        top: 0;
        left: 10px;
        transform: translateY(0);
        text-align: center; } }
    #container #main header h1 {
      margin-top: 20px;
      width: 100%;
      font-size: 7.2vw;
      font-family: miller-banner, serif;
      font-weight: 400;
      font-style: normal; }
      @media (max-width: 640px) {
        #container #main header h1 {
          font-size: 12vw; } }
      #container #main header h1 span {
        display: block;
        margin-top: -10px;
        font-size: 2.1vw;
        font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, serif;
        letter-spacing: 0.2em; }
        @media (max-width: 640px) {
          #container #main header h1 span {
            font-size: 4.2vw; } }
    #container #main header p {
      margin: 40px auto;
      font-size: 2.0rem;
      font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, serif;
      letter-spacing: 0.2em; }
      @media (max-width: 1024px) {
        #container #main header p {
          font-size: 1.8vw; } }
      @media (max-width: 640px) {
        #container #main header p {
          font-size: 3.6vw;
          text-align: center; } }
      #container #main header p.btn {
        position: relative;
        display: inline-block;
        margin: 0 auto 40px; }
        @media (max-width: 640px) {
          #container #main header p.btn {
            margin-left: -80px; } }
        #container #main header p.btn::before {
          position: absolute;
          content: "";
          right: -80px;
          top: -12px;
          width: 47px;
          height: 47px;
          border-radius: 50%;
          background: #CCAC00; }
        #container #main header p.btn a {
          position: relative;
          font-size: 1.8rem;
          font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, "Segoe UI", sans-serif;
          font-weight: bold;
          letter-spacing: 0.03em;
          line-height: 1; }
          @media (max-width: 1024px) {
            #container #main header p.btn a {
              font-size: 1.8vw; } }
          @media (max-width: 640px) {
            #container #main header p.btn a {
              font-size: 3.2vw; } }
          #container #main header p.btn a::before, #container #main header p.btn a::after {
            position: absolute;
            content: "";
            bottom: 6px;
            right: -65px;
            width: 50px;
            height: 1px;
            background: #000; }
          #container #main header p.btn a::after {
            width: 14px;
            bottom: 12px;
            transform: rotate(45deg); }
#container section.news {
  padding: 40px 60px 0;
  background: #EEE; }
  @media (max-width: 768px) {
    #container section.news {
      padding: 40px 20px 0; } }
  @media (max-width: 670px) {
    #container section.news {
      margin-bottom: 60px; } }
  @media (max-width: 480px) {
    #container section.news {
      padding: 40px 10px 0; } }
  #container section.news h2 {
    margin-top: -70px;
    text-align: center;
    font-size: 3.8rem;
    font-family: miller-banner, serif;
    font-weight: 400;
    font-style: normal;
    color: #CCAC00; }
    @media (max-width: 480px) {
      #container section.news h2 {
        font-size: 3.2rem; } }
  #container section.news ul {
    border-top: 1px solid #CCC; }
    #container section.news ul li {
      position: relative;
      padding: 12px 0 12px 140px;
      border-bottom: 1px solid #CCC; }
      @media (max-width: 640px) {
        #container section.news ul li {
          padding: 35px 0 12px 35px; } }
      #container section.news ul li span {
        position: absolute;
        left: 40px;
        top: 12px; }
        @media (max-width: 640px) {
          #container section.news ul li span {
            left: 35px; } }
      #container section.news ul li::before {
        position: absolute;
        content: "";
        left: 0;
        top: calc(14px + 0.7rem);
        width: 15px;
        height: 2px;
        background: #CCAC00; }
#container section.guide {
  padding: 0 0 40px;
  background: none; }
  @media (max-width: 670px) {
    #container section.guide {
      padding-bottom: 0;
      margin-bottom: 60px; } }
  #container section.guide header {
    position: absolute;
    width: 50%;
    right: 0;
    bottom: 0;
    padding: 40px;
    background: #374252; }
    @media (max-width: 1024px) {
      #container section.guide header {
        padding: 30px; } }
    @media (max-width: 860px) {
      #container section.guide header {
        position: relative;
        width: 100%;
        padding: 20px; } }
    @media (max-width: 480px) {
      #container section.guide header {
        padding: 10px 10px 20px; } }
    #container section.guide header h2 {
      color: #FFF;
      line-height: 1; }
    #container section.guide header p {
      margin: 20px auto 0;
      color: #FFF;
      font-size: 1.5rem;
      letter-spacing: 0.15rem; }
      @media (max-width: 480px) {
        #container section.guide header p {
          margin-top: 0; } }
      #container section.guide header p.view-more {
        position: relative;
        padding: 20px 0 0;
        text-align: right; }
        @media (max-width: 480px) {
          #container section.guide header p.view-more {
            margin-right: 10px; } }
        #container section.guide header p.view-more a {
          padding-right: 65px;
          color: #FFF; }
          #container section.guide header p.view-more a::before {
            border-top: 1px solid #FFF; }
          #container section.guide header p.view-more a::after {
            width: 50px;
            background: #FFF; }
        #container section.guide header p.view-more::before {
          position: absolute;
          content: "";
          right: -10px;
          top: 10px;
          width: 47px;
          height: 47px;
          border-radius: 50%;
          background: #CCAC00; }
#container section.reason {
  margin-bottom: 40px;
  padding: 0 0 40px;
  background: none; }
  @media (max-width: 670px) {
    #container section.reason {
      padding-bottom: 0;
      margin-bottom: 60px; } }
  @media (max-width: 480px) {
    #container section.reason {
      margin-bottom: 40px; } }
  #container section.reason header {
    position: absolute;
    width: 50%;
    left: 0;
    bottom: 0;
    padding: 40px;
    background: #374252; }
    @media (max-width: 1024px) {
      #container section.reason header {
        padding: 30px; } }
    @media (max-width: 860px) {
      #container section.reason header {
        position: relative;
        width: 100%;
        padding: 20px; } }
    @media (max-width: 480px) {
      #container section.reason header {
        padding: 10px 10px 20px; } }
    #container section.reason header h2 {
      color: #FFF;
      line-height: 1; }
    #container section.reason header p {
      margin: 20px auto 0;
      color: #FFF;
      font-size: 1.5rem;
      letter-spacing: 0.15rem; }
      @media (max-width: 480px) {
        #container section.reason header p {
          margin-top: 0; } }
      #container section.reason header p.view-more {
        position: relative;
        padding: 20px 0 0;
        text-align: right; }
        @media (max-width: 480px) {
          #container section.reason header p.view-more {
            margin-right: 10px; } }
        #container section.reason header p.view-more a {
          padding-right: 65px;
          color: #FFF; }
          #container section.reason header p.view-more a::before {
            border-top: 1px solid #FFF; }
          #container section.reason header p.view-more a::after {
            width: 50px;
            background: #FFF; }
        #container section.reason header p.view-more::before {
          position: absolute;
          content: "";
          right: -10px;
          top: 10px;
          width: 47px;
          height: 47px;
          border-radius: 50%;
          background: #CCAC00; }
  #container section.reason .bgBox {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    background: #CCAC00; }
    @media (max-width: 670px) {
      #container section.reason .bgBox {
        flex-direction: column-reverse; } }
    #container section.reason .bgBox img {
      width: 55.8%; }
      @media (max-width: 860px) {
        #container section.reason .bgBox img {
          width: 50%; } }
      @media (max-width: 670px) {
        #container section.reason .bgBox img {
          width: 100%; } }
    #container section.reason .bgBox .reasons {
      width: 44.2%;
      height: 100%;
      padding: 30px 30px 0; }
      @media (max-width: 1200px) {
        #container section.reason .bgBox .reasons {
          padding: 2vw 30px 0; } }
      @media (max-width: 960px) {
        #container section.reason .bgBox .reasons {
          padding: 2vw 10px 0 20px; } }
      @media (max-width: 860px) {
        #container section.reason .bgBox .reasons {
          width: 50%;
          padding: 8vw 10px 0 20px; } }
      @media (max-width: 768px) {
        #container section.reason .bgBox .reasons {
          padding: 30px 10px 0 15px; } }
      @media (max-width: 670px) {
        #container section.reason .bgBox .reasons {
          width: 100%;
          padding: 25px 10px 5px; } }
      #container section.reason .bgBox .reasons li {
        position: relative;
        margin-bottom: 20px;
        padding-left: 30px;
        font-size: 1.6rem;
        color: #FFF; }
        @media (max-width: 1200px) {
          #container section.reason .bgBox .reasons li {
            font-size: 1.2vw;
            padding-left: 2.4vw; } }
        @media (max-width: 960px) {
          #container section.reason .bgBox .reasons li {
            margin-bottom: 10px; } }
        @media (max-width: 860px) {
          #container section.reason .bgBox .reasons li {
            margin-bottom: 20px;
            font-size: 1.6vw; } }
        @media (max-width: 768px) {
          #container section.reason .bgBox .reasons li {
            font-size: 1.3rem; } }
        @media (max-width: 670px) {
          #container section.reason .bgBox .reasons li {
            font-size: 1.6rem;
            padding-left: 2.4rem; } }
        @media (max-width: 480px) {
          #container section.reason .bgBox .reasons li {
            font-size: 3.2vw; } }
        @media (max-width: 360px) {
          #container section.reason .bgBox .reasons li {
            font-size: 3.0vw; } }
        #container section.reason .bgBox .reasons li span {
          position: absolute;
          left: 0;
          top: -1.8rem;
          font-size: 3.2rem;
          font-family: "Oswald", sans-serif; }
          @media (max-width: 1200px) {
            #container section.reason .bgBox .reasons li span {
              font-size: 2.6vw;
              top: -1.2vw; } }
          @media (max-width: 670px) {
            #container section.reason .bgBox .reasons li span {
              font-size: 2.4rem;
              top: -1.0rem; } }
#container section.content {
  padding: 0;
  margin-bottom: 0; }
  #container section.content h2 {
    text-align: center; }
  #container section.content ul {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #container section.content ul li {
      width: calc(25% - 9px);
      background: #374252; }
      #container section.content ul li.wide {
        width: calc(33.333% - 6px); }
        @media (max-width: 720px) {
          #container section.content ul li.wide {
            width: 100%; } }
        #container section.content ul li.wide a {
          display: flex;
          flex-direction: row-reverse;
          align-items: flex-start;
          padding-bottom: 0; }
          #container section.content ul li.wide a img, #container section.content ul li.wide a h3 {
            width: 50%; }
          #container section.content ul li.wide a h3 {
            margin-bottom: 6px;
            padding-top: 30px;
            /*padding-top:50px;
            font-size: 6.7rem;*/
            font-size: 5rem;
            font-family: "Oswald", sans-serif;
            font-weight: normal;
            color: #CCAC00; }
            @media (max-width: 1200px) {
              #container section.content ul li.wide a h3 {
                padding-top: 3vw; } }
            @media (max-width: 1024px) {
              #container section.content ul li.wide a h3 {
                /*font-size:5.2rem;*/
                font-size: 4.5rem; } }
            @media (max-width: 768px) {
              #container section.content ul li.wide a h3 {
                display: flex;
                flex-direction: column;
                justify-content: center;
                height: 100%;
                margin-bottom: 0;
                padding: 0 20px 30px;
                font-size: 3.2rem; } }
            @media (max-width: 640px) {
              #container section.content ul li.wide a h3 {
                padding: 0 15px 30px; } }
            @media (max-width: 480px) {
              #container section.content ul li.wide a h3 {
                padding: 0 10px 30px; } }
            #container section.content ul li.wide a h3 span {
              display: block;
              font-size: 1.5rem;
              color: #FFF; }
              @media (max-width: 480px) {
                #container section.content ul li.wide a h3 span {
                  font-size: 1.2rem; } }
            #container section.content ul li.wide a h3::after {
              content: none; }
      #container section.content ul li:nth-child(5).wide a, #container section.content ul li:nth-child(6).wide a {
        align-items: inherit; }
        #container section.content ul li:nth-child(5).wide a h3, #container section.content ul li:nth-child(6).wide a h3 {
          display: flex;
          align-items: center;
          text-align: left;
          /*padding-top: 80px;*/
          padding-top: 0; }
          #container section.content ul li:nth-child(5).wide a h3 span, #container section.content ul li:nth-child(6).wide a h3 span {
            display: block;
            width: 100%;
            /*font-size: 2.5rem;*/
            font-size: 2rem;
            font-weight: bold;
            font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, "Segoe UI", sans-serif;
            color: #FFF;
            display: block;
            position: relative; }
            #container section.content ul li:nth-child(5).wide a h3 span::after, #container section.content ul li:nth-child(6).wide a h3 span::after {
              position: absolute;
              content: "";
              width: 30px;
              height: 2px;
              left: 0;
              bottom: -20px;
              background: #CCAC00; }
            @media (max-width: 1024px) {
              #container section.content ul li:nth-child(5).wide a h3 span, #container section.content ul li:nth-child(6).wide a h3 span {
                font-size: 1.6rem; } }
            @media (max-width: 480px) {
              #container section.content ul li:nth-child(5).wide a h3 span, #container section.content ul li:nth-child(6).wide a h3 span {
                font-size: 1.4rem; } }
          @media (max-width: 1024px) {
            #container section.content ul li:nth-child(5).wide a h3, #container section.content ul li:nth-child(6).wide a h3 {
              /*padding-top: 65px;*/ } }
          @media (max-width: 768px) {
            #container section.content ul li:nth-child(5).wide a h3, #container section.content ul li:nth-child(6).wide a h3 {
              padding-top: 0; } }
      #container section.content ul li:nth-child(n+5) {
        margin-top: 12px; }
      @media (max-width: 720px) {
        #container section.content ul li {
          width: calc(50% - 6px); }
          #container section.content ul li:nth-child(n+3) {
            margin-top: 12px; } }
      #container section.content ul li a {
        position: relative;
        display: block;
        height: 100%;
        padding-bottom: 40px;
        color: #FFF; }
        #container section.content ul li a:hover {
          opacity: 0.6; }
        #container section.content ul li a img {
          vertical-align: top; }
        #container section.content ul li a h3 {
          position: relative;
          margin-bottom: 32px;
          padding: 20px 15px 10px;
          font-size: 2.0rem;
          font-weight: bold; }
          @media (max-width: 1024px) {
            #container section.content ul li a h3 {
              font-size: 1.6rem; } }
          @media (max-width: 480px) {
            #container section.content ul li a h3 {
              padding: 10px;
              font-size: 1.4rem; } }
          #container section.content ul li a h3::after {
            position: absolute;
            content: "";
            width: 30px;
            height: 2px;
            left: 15px;
            bottom: -10px;
            background: #CCAC00; }
            @media (max-width: 480px) {
              #container section.content ul li a h3::after {
                left: 10px; } }
        #container section.content ul li a .view-more.no-link {
          display: inline-block;
          position: absolute;
          white-space: nowrap;
          right: 20px;
          bottom: 12px;
          margin: 0 auto;
          padding: 0 35px 0 0;
          font-family: "Oswald", sans-serif; }
          #container section.content ul li a .view-more.no-link::before {
            position: absolute;
            content: "";
            bottom: 1px;
            right: 0;
            width: 12px;
            height: 10px;
            border-top: 1px solid #FFF;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg); }
          #container section.content ul li a .view-more.no-link::after {
            position: absolute;
            content: "";
            width: 30px;
            height: 1px;
            right: 0;
            left: auto;
            bottom: 5px;
            background-color: #FFF; }