@charset "UTF-8";
/* CSS Document */
html {
  font-size: 62.5%;
}

body {
  color: #3a3a3a;
  font-family: "Noto Serif JP", serif, "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Yu Mincho TT R1215165", "HG明朝E", "MS Ｐ明朝", "MS 明朝", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.025rem;
  line-height: 1.8;
  background-color: #f8f8f8;
}
@font-face {
  src: url(//font/Noto-Serif-B.woff) format("woff");
  font-family: "Noto Sans JP";
  font-style: Bold;
  font-display: swap;
}
@font-face {
  src: url(//font/Noto-Serif-M.woff) format("woff");
  font-family: "Noto Sans JP";
  font-style: medium;
  font-display: swap;
}

@media screen and (min-width: 1200px) {
  body {
    font-size: 1.6rem;
  }
}

li {
  list-style: none;
}

a {
  color: #3a3a3a;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

.text_center {
  text-align: center;
}

.vertical_rl {
  -moz-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  display: inline-block;
  text-align: center;
  font-family: "Noto Serif JP", serif, "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Yu Mincho TT R1215165", "HG明朝E", "MS Ｐ明朝", "MS 明朝", sans-serif;
  font-weight: bold;
  line-height: initial;
  letter-spacing: 0.3em;
}

.vertical_rl_2 {
  -moz-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  display: inline-block;
  text-align: center;
  font-family: "Noto Serif JP", serif, "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Yu Mincho TT R1215165", "HG明朝E", "MS Ｐ明朝", "MS 明朝", sans-serif;
  font-weight: bold;
  line-height: initial;
  letter-spacing: 0.3em;
}
@media screen and (min-width: 900px) {
  .vertical_rl_2 {
    writing-mode: horizontal-tb;
  }
}

.section_title {
  font-size: 1.8rem;
  font-family: "Noto Serif JP", serif, "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Yu Mincho TT R1215165", "HG明朝E", "MS Ｐ明朝", "MS 明朝", sans-serif;
  padding: 20px 0 20px;
  text-align: center;
  margin: 0 15px 0;
}

.section {
  padding: 40px 20px 80px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 1200px) {
  .section {
    padding: 80px 20px 160px;
  }
}

.wrap {
  position: relative;
  overflow: hidden;
  max-width: 1140px;
  margin: auto;
}

.select_btn a {
  border-bottom: solid #3a3a3a 0.5px;
}

/***** フェードインの動作*****/
@-webkit-keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-wrap{
	animation: fadein 3s forwards;
}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}

/*************************
*   header
*************************/
.header {
  box-sizing: border-box;
  position: fixed;
  display: flex;
  justify-content: space-between;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  padding: 15px 20px;
  z-index: 3;
  background-color: #f8f8f8;
}
@media screen and (min-width: 1200px) {
  .header {
    padding-left: 5vw;
    margin: auto;
  }
}

.logo {
  right: 5vw;
  padding: 4px 0;
}
.logo img {
  padding-bottom: 2px;
}

/*************************
*   navigation
*************************/
/*======ハンバーガーメニュー=====*/
.btn {
  position: fixed;
  width: 2em;
  height: 2.5em;
  cursor: pointer;
  font-size: 1.6rem;
  left: 92vw;
}
@media screen and (min-width: 1200px) {
  .btn {
    padding: 0;
    left: 80vw;
  }
}

.btn__menu {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  top: 40%;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #3a3a3a;
  margin: 0;
  padding: 0;
  border: none;
  transition: all 0.5s;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
@media screen and (min-width: 1200px) {
  .btn__menu {
    display: none;
  }
}

.btn__menu::before {
  display: block;
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  height: 100%;
  background: #3a3a3a;
  transition: all 0.5s;
}

.btn__menu::after {
  display: block;
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 100%;
  background: #3a3a3a;
  transition: all 0.5s;
}

.btn__menu.active {
  background: transparent;
  z-index: 1;
}

.btn__menu.active::before {
  top: 0;
  transform: rotate(-45deg);
}

.btn__menu.active::after {
  bottom: 0;
  transform: rotate(45deg);
}

@media (max-width: 910px) {
  .btn {
    left: 84vw;
    margin-right: 10px;
  }
}
/*======/ハンバーガーメニュー=====*/
.navigation {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  padding-top: 80px;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
}
@media screen and (min-width: 1200px) {
  .navigation {
    display: flex;
    position: relative;
    padding: 0;
  }
}

.nav_item {
  margin-bottom: 30px;
}
@media screen and (min-width: 1200px) {
  .nav_item {
    margin-left: 50px;
  }
}
@media (max-width: 1190px) {
  .nav_item {
    margin-left: 20px;
  }
}

.nav_item a {
  color: #3a3a3a;
}

.nav_item a:hover {
  opacity: 0.5;
  color: #3a3a3a, 50%;
}

.nav_list {
  margin: 50px 0;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .nav_list {
    display: flex;
    position: absolute;
    width: 690px;
    font-size: 1.3rem;
    margin-top: 0;
    margin-left: -38vw;
  }
}

@media screen and (min-width: 1200px) {
  .nav_pc {
    display: none;
  }
  .pc_select {
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
    -webkit-text-decoration-color: #9a9a9a;
            text-decoration-color: #9a9a9a;
  }
  .select_container {
    margin: 2vw;
  }
}
/*************************
*   top
*************************/
/*=== 画像の表示エリア ================================= */
.slide {
  position: relative;
  overflow: hidden;
  /* 画像のサイズに合わせて変更ください */
  width: 100%;
  height: 350px;
  margin: auto;
  /* サンプルは中央寄せの背景：白 */
  background: #f8f8f8;
}
@media screen and (min-width: 1200px) {
  .slide {
    height: 600px;
    width: 100%;
    margin-right: 0;
  }
}

/*=== 画像の設定 ======================================= */
.slide img {
  display: block;
  position: absolute;
  /* 画像のサイズを表示エリアに合せる */
  width: inherit;
  height: inherit;
  opacity: 0;
  -webkit-animation: slideAnime 12s ease infinite;
          animation: slideAnime 12s ease infinite;
  -o-object-fit: cover;
     object-fit: cover;
}

/*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.slide img:nth-of-type(2) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}

.slide img:nth-of-type(3) {
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
}

/*=== スライドのアニメーション ========================= */
@-webkit-keyframes slideAnime {
  0% {
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  49% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slideAnime {
  0% {
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  49% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.hero_area {
  position: relative;
  top: 60px;
}
@media screen and (min-width: 1200px) {
  .hero_area {
    position: relative;
    height: 600px;
    margin-bottom: 80px;
  }
}

.explain {
  display: block;
  background-image: url(../images/index/yama.webp);
  background-size: 100% auto;
  background-repeat: no-repeat;
  height: 55vh;
  background-position: bottom;
}
@media (max-width: 400px) {
  .explain {
    height: 550px;
  }
}
@media (min-width: 690px) {
  .explain {
    height: 550px;
  }
}
@media (min-width: 945px) {
  .explain {
    height: 650px;
  }
}
@media screen and (min-width: 1200px) {
  .explain {
    color: #3a3a3a;
    height: 433px;
    line-height: 1.5;
    margin-top: 80px;
    background-position: bottom;
    background-size: 100% auto;
    background-repeat: no-repeat;
    height: 105vh;
  }
}
.explain h1 {
  font-size: 2rem;
  margin: 20px auto;
  width: 90%;
}
@media screen and (min-width: 1200px) {
  .explain h1 {
    color: #3a3a3a;
    font-size: 2.4rem;
    margin-left: 30vw;
    width: 50vw;
    margin-bottom: 20px;
  }
}
.explain p {
  font-size: 1.4rem;
  margin: auto;
  width: 90%;
  line-height: 2.5;
}
@media (max-width: 1380px) {
  .explain p {
    font-size: 1.6rem;
    line-height: 2.5;
  }
}
@media screen and (min-width: 1200px) {
  .explain p {
    font-size: 1.8rem;
    line-height: 2.5;
    margin-left: 30vw;
    width: 50vw;
  }
}
@media (max-width: 767px) {
  .explain p {
    font-size: 1.4rem;
    line-height: 2.5;
    margin: auto;
  }
}
@media (max-width: 767px) {
  .explain .explain h2 {
    font-size: 2rem;
    margin: auto;
    width: 100%;
  }
}

.youtube {
  width: 90vw;
  margin: auto;
  margin-top: -90px;
}
@media screen and (min-width: 1200px) {
  .youtube {
    max-width: 1140px;
    height: auto;
    margin: 600px auto 160px;
  }
}

.youtube_explain {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 80px;
}
@media screen and (min-width: 1200px) {
  .youtube_explain {
    font-size: 1.6rem;
  }
}

/*************************
*   index
*************************/
/* カードレイアウト部分をラッピングし、
Flexboxを指定"space-between"で各アイテムを均等に配置し、
最初と最後のアイテムを端に寄せます。*/
#cardlayout-wrap {
  position: relative;
  display: flex;
  -ms-flex-pack: justify;
  margin: 0 auto 0 auto;
  max-width: 1140px;
  width: 96%;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* リンクテキストの下線を非表示 */
a.card-link {
  text-decoration: none;
}

/* カードレイアウト内の画像を幅いっぱいに表示 */
#cardlayout-wrap img {
  display: block;
  width: 100%;
  max-height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
}

.card-figure {
  margin: 0;
  padding: 0;
  width: auto;
}

/* カードレイアウトのタイトル部分 */
.card-title {
  margin: 0.4em 0 0;
  color: #3a3a3a;
  font-size: 2rem;
  width: 200px;
}

/* カードレイアウトの説明文部分 */
.card-text-tax {
  margin: 0;
  text-align: left;
}

.card-list-textarea{
  padding: 0 10px;
}

.index-btn {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 4px 24px;
  width: 130px;
  margin: 12px auto 32px auto;
  gap: 10px;
  border: 1px solid #000000;
  border-radius: 30px;
}

.index-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* カードレイアウトを1カラムで配置 */
.card-list {
  margin: 0.5em auto;
  padding: 0;
  width: 100%;
  background: #f8f8f8;
}

/* 画面幅768px以上の場合カードレイアウトを2カラムで配置 */
@media all and (min-width: 768px) {
  .card-list {
    margin: 0.5em 0;
    width: 48%;
    /* 100%幅を2で割るという指定 */
  }
}
/* 画面幅992px以上の場合カードレイアウトを3カラムで配置 */
@media all and (min-width: 992px) {
  .card-list {
    width: 32%;
    /* 100%幅を3で割るという指定 */
  }
  /* 最後の行が3列より少ない場合左寄せにレイアウトさせる */
  #cardlayout-wrap::after {
    content: "";
    display: block;
    width: 33.3333333333%;
  }
}
.info_newslist05 {
  max-width: 1100px;
  background-color: #FFFFFF;
  border-top: 1px solid #ccc;
  margin: 0 auto 24px;
}
.info_newslist05 li {
  border-bottom: 1px solid #ccc;
}
@media screen and (min-width: 1200px) {
  .info_newslist05 li {
    font-size: 1.6rem;
  }
}
.info_newslist05 li a {
  box-sizing: border-box;
  display: table;
  text-decoration: none;
  transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -webkit-transition: 0.2s ease-in-out;
  width: 100%;
}
.info_newslist05 li a:hover {
  background: #EEEEEE;
  text-decoration: none;
}
.info_newslist05 li time {
  border-right: 1px solid #ccc;
  display: table-cell;
  padding: 16px;
  text-align: center;
  vertical-align: middle;
  width: 15%;
}
.info_newslist05 li .ttl {
  display: table-cell;
  padding: 16px;
  vertical-align: middle;
}

.index_container {
  margin-bottom: 80px;
  font-size: 1.4rem;
}

.company_container {
  width: 240px;
  margin: auto;
}
@media screen and (min-width: 1200px) {
  .company_container {
    width: 500px;
    margin-top: 40px;
  }
}

.form-detail {
  margin-bottom: 20px;
}
@media screen and (min-width: 1200px) {
  .form-detail {
    padding: 10px 0;
  }
}

.company_section {
  padding-top: 0;
}

.link {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0 20px;
}

/*************************
*    list　商品一覧
*************************/
.page_top {
  height: 180px;
  margin-top: 60px;
  background-image: url(../images/list/list_top.webp);
  background-position: center;
  background-size: cover;
}
.page_top h2 {
  color: #fff;
  font-size: 3rem;
}

.page_top_container {
  display: grid;
  justify-items: center;
  align-content: center;
  height: 100%;
}

.list-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-top: 16px;
}
@media screen and (min-width: 1200px) {
  .list-title {
    height: 50px;
  }
}

.list-subtitle {
  width: 90%;
  margin: 0 auto 48px auto;
}
@media screen and (min-width: 1200px) {
  .list-subtitle {
    width: 68%;
  }
}

.category_text_2 {
  position: relative;
  z-index: 2;
  display: flex;
  padding: 64px 0 20px 5vw;
  background: url(../images/list/logo2-bg.webp);
  background-repeat: no-repeat;
  background-size: 200px auto;
  background-origin: border-box;
}
@media screen and (min-width: 1200px) {
  .category_text_2 {
    padding-left: 2vw;
    font-size: 2.2rem;
  }
}
.category_text_2 .category_sub {
  position: absolute;
  bottom: 16%;
  padding-left: 64px;
}

.category_title_2 {
  font-size: 2rem;
  height: 82px;
  padding: 5px;
  border: 2px solid #3a3a3a;
}
@media screen and (min-width: 1200px) {
  .category_title_2 {
    font-size: 2.4rem;
    height: 110px;
  }
}

/* 手動スクロール */
.list_scroll {
  width: 100%;
  max-width: 700px;
  height: auto;
  position: relative;
  margin-bottom: 48px;
}
@media (min-width: 699px) {
  .list_scroll {
    width: 600px;
    left: 14.5vw;
    top: -12vh;
  }
}
@media (min-width: 900px) {
  .list_scroll {
    width: 700px;
    left: 24vw;
    top: -12vh;
  }
}

.list_scroll img {
  width: 100%;
  max-width: 700px;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.list_scroll p {
  font-size: 1.5rem;
  width: 100%;
  height: auto;
  padding: 20px 20px 40px;
}

.arrow {
  top: 0;
  position: absolute;
  width: 8%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  cursor: pointer;
}

.arrow::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-left: 4px solid gray;
  border-bottom: 4px solid gray;
}

.left {
  left: 0;
}

.left::before {
  top: calc(50% - 10px);
  left: calc(50% - 4px);
  transform: rotate(45deg);
}

.right {
  right: 0;
}

.right:before {
  top: calc(50% - 10px);
  left: calc(50% - 6px);
  transform: rotate(-135deg);
}

.raicho {
  width: 90%;
  margin: 48px auto;
  text-align: center;
}

.raicho_text {
  max-width: 668px;
  margin: 24px auto 48px auto;
  text-align: left;
}

/*************************
*   enjoy 体験教室
*************************/
.page_top_enjoy {
  height: 180px;
  margin-top: 60px;
  background-image: url(../images/enjoy/enjoy_top.webp);
  background-position: center;
  background-size: cover;
}
.page_top_enjoy h2 {
  color: #fff;
  font-size: 3rem;
}

.pege_title {
  font-size: 20px;
  font-weight: bold;
}

.category_title_3 {
  font-size: 2rem;
  height: 120px;
  padding: 5px;
  border: 2px solid #3a3a3a;
}
@media screen and (min-width: 1200px) {
  .category_title_3 {
    font-size: 2.4rem;
    height: 160px;
  }
}

.enjoy_image {
  width: 100%;
  max-width: 750px;
  height: auto;
  position: relative;
  margin-bottom: 48px;
}
@media (min-width: 699px) {
  .enjoy_image {
    width: 600px;
    left: 14.5vw;
  }
}
@media (min-width: 900px) {
  .enjoy_image {
    width: 700px;
    left: 27vw;
    top: -18vh;
  }
}
.enjoy_image img {
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.enjoy_image_text {
  padding: 8px 20px 20px 20px;
}
.enjoy_image_text ul {
  margin-bottom: 20px;
}

.fee {
  font-weight: bolder;
}
@media screen and (min-width: 1200px) {
  .fee {
    font-size: 1.8rem;
    line-height: 2.5;
  }
}

.fee_contents {
  font-size: 2.2rem;
  color: crimson;
}
@media screen and (min-width: 1200px) {
  .fee_contents {
    font-size: 2.4rem;
  }
}

.enjoy_info {
  border: 1px solid #3a3a3a;
  padding: 20px;
  margin: 80px 40px;
}
@media screen and (min-width: 1200px) {
  .enjoy_info {
    margin: 80px auto 80px;
    padding: 30px;
  }
}

.colona {
  border-top: 1px solid #3a3a3a;
  border-bottom: 1px solid #3a3a3a;
  padding: 40px 20px;
}
@media screen and (min-width: 1200px) {
  .colona {
    margin: auto;
    margin: 80px auto 160px;
    padding-left: 80px;
    padding-right: 80px;
    max-width: 900px;
  }
}

.colona h2 {
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 20px;
}

.link_process a {
  color: crimson;
}

/*****電話番号ボタン*****/
.button {
  /*ボタンの形状*/
  border-radius: 30px;
  text-decoration: none;
  border: 1px solid #A19761;
  font-size: 2.4rem;
  color: #fff;
  background-color: #A19761;
  outline: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 24px;
  width: 280px;
  margin: auto;
  /*アニメーションの指定*/
  transition: all 0.4s ease-out;
}
.button svg {
  display: inline-block;
  vertical-align: middle;
  fill: #fff;
  width: 20px;
  margin-right: 5px;
  margin-bottom: -3px;
}

/*hoverした際、グラデーションを付ける*/
.button:hover {
  /*ボタンの形状*/
  border-color: transparent;
  color: #fff;
  /*背景の色と形状*/
  background: linear-gradient(270deg, rgb(136, 128, 82) 0%, rgb(37, 35, 23) 100%);
  background-size: 200% auto;
  background-position: right center;
}

/*****メールボタン*****/
.button2 {
  /*ボタンの形状*/
  border-radius: 30px;
  text-decoration: none;
  border: 1px solid #666;
  font-size: 1.8rem;
  color: #fff;
  background-color: #666;
  outline: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 13px 24px;
  width: 280px;
  margin: auto;
  /*アニメーションの指定*/
  transition: all 0.4s ease-out;
}
.button2 svg {
  display: inline-block;
  vertical-align: middle;
  fill: #fff;
  width: 20px;
  margin-right: 5px;
  margin-bottom: -3px;
}

/*hoverした際、グラデーションを付ける*/
.button2:hover {
  /*ボタンの形状*/
  border-color: transparent;
  color: #fff;
  /*背景の色と形状*/
  background: linear-gradient(270deg, rgb(102, 102, 102) 0%, rgb(14, 14, 14) 100%);
  background-size: 200% auto;
  background-position: right center;
}

.info_button {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  max-width: 700px;
  margin: 20px auto 40px auto;
}

.button_text {
  text-align: center;
  width: 316px;
  margin: 8px auto 24px auto;
  font-size: 1.5rem;
}

.maps_outer {
  position: relative;
  padding-top: 75%;
}
@media screen and (min-width: 1200px) {
  .maps_outer {
    position: relative;
    padding-top: 75%;
    width: 100%;
    max-height: 680px;
  }
}

.maps {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media screen and (min-width: 1200px) {
  .maps {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 680px;
    border: 0;
  }
}

.outer {
  display: flex;
}

.info_title {
  flex: 0 0 auto;
  width: 70px;
  margin-right: 30px;
  text-align: right;
}

.info_detail {
  flex: 1 1 auto;
}

.access {
  margin: 40px 0 50px;
}

.access_use {
  font-size: 2rem;
  margin-bottom: 10px;
}

@media screen and (min-width: 1200px) {
  .access_outer {
    display: flex;
    max-height: 680px;
  }
  .text_contents_map {
    margin: 0 0 0 40px;
    line-height: 2;
    min-width: 267px;
  }
}
/*************************
*    process　作業工程
*************************/
.page_top_enjoy2 {
  height: 180px;
  margin-top: 60px;
  background-image: url(../images/process/process_top.webp);
  background-position: center;
  background-size: cover;
}
.page_top_enjoy2 h2 {
  color: #fff;
  font-size: 3rem;
}

.category_title_4 {
  font-size: 2rem;
  height: 140px;
  padding: 5px;
  border: 2px solid #3a3a3a;
}
@media screen and (min-width: 1200px) {
  .category_title_4 {
    font-size: 2.4rem;
    height: 160px;
  }
}

.sub_title {
  padding: 0 40px;
}

.process_title2 {
  height: 105px;
}
@media screen and (min-width: 1200px) {
  .process_title2 {
    height: 125px;
  }
}

.itinerary {
  line-height: 1.3;
  margin: 0 auto 24px auto;
  padding: 20px;
  border-radius: 10px;
}
@media screen and (min-width: 400px) {
  .itinerary {
    padding-left: 40px;
  }
}
.itinerary p {
  height: auto;
  line-height: 1.1;
  margin: auto;
  font-size: 1.3rem;
}

.enjoy_image_2 {
  position: relative;
  width: 100%;
  max-width: 750px;
  height: auto;
  position: relative;
  margin-bottom: 48px;
}
@media (min-width: 699px) {
  .enjoy_image_2 {
    width: 600px;
    margin: auto;
  }
}
@media (min-width: 900px) {
  .enjoy_image_2 {
    width: 700px;
  }
}
.enjoy_image_2 img {
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.process_wrap {
  display: flex;
}
@media (max-width: 900px) {
  .process_wrap {
    display: block;
  }
}

.height {
  color: #aaa;
  margin-top: 5px;
  font-size: 1rem;
}
@media screen and (min-width: 900px) {
  .height {
    transform: rotate(-90deg);
  }
}

/*************************
*    info お問い合わせ
*************************/
.info-title{
  width: 90%;
  margin: 120px auto 24px;
  text-align: center;
}

.tel_wrap p {
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .tel_wrap {
    margin-top: -300px;
  }
}

.info_tel {
  font-size: 3rem;
  font-weight: bolder;
  margin: 0 0 0 10px;
}
@media screen and (min-width: 1200px) {
  .info_tel {
    font-size: 4.8rem;
    color: #666;
    margin-left: 10px;
    margin-right: 0;
  }
}

.tel-area {
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 1200px) {
  .tel-area {
    display: flex;
    justify-content: center;
  }
}

.mail_text {
  margin: 0 auto 36px;
  text-align: center;
}

.form-parts {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  box-sizing: border-box;
  border: solid 1px #d7d7d7;
  background-color: #fff;
}

.form-parts__text {
  width: 100%;
  padding: 9px 8px;
  border-radius: 3px;
  color: #3a3a3a;
  font-size: 1.6rem;
}
@media screen and (min-width: 1200px) {
  .form-parts__text {
    height: 60px;
    width: 450px;
    margin-left: 20px;
    margin-bottom: 40px;
  }
}

.caution {
  width: 30px;
  margin-left: 15px;
  padding: 0px 4px;
  border-radius: 3px;
  background-color: #a93030;
  color: #fff;
  font-size: 1rem;
  text-align: center;
  vertical-align: middle;
}

.form-title {
  font-size: 1.4rem;
}
@media screen and (min-width: 1200px) {
  .form-title {
    width: 190px;
    margin: 0 30px 0 0;
    padding: 10px 0;
    text-align: right;
  }
}

.btn-submit {
  background-color: #6a6a6a;
  color: #fff;
  border-radius: 30px;
  letter-spacing: 0.5rem;
  padding: 10px 100px;
}

.btn-submit-area{
  text-align: center;
}

.mail_area {
  background-color: #fff;
}

.company_category {
  margin-bottom: 40px;
}

@media screen and (min-width: 1200px) {
  .form {
    max-width: 814px;
    margin: 0 auto;
  }
  .form-item {
    display: flex;
  }
  .form-parts__text_last {
    height: 200px;
  }
}

/*************************
*   PRIVACY POLICY
*************************/

.policy-area{
  width: 90%;
  margin: 120px auto;
  text-align: left;
}

h4{
  font-size: 3rem;
  margin: 24px 0;
  text-align: center;
}

h5{
  margin-top: 16px;
}

/* ポップアップウインドウの設定 */
.popup {
  background-color: #efefef;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
  border-radius: 5px;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 56vw;
  height: 80vh;
  overflow-y: scroll;
}

 /* 幅が949px以下 */
 @media (max-width:949px){
  .popup{
    width: 90vw;
    height: 80vh;
  }
 }

.pop-img img{
  border-radius: 5px;
}

.policy-link{
  color: #FFFFFF;
  font-size: 14px;
  margin-top: 24px;
}

/* チェックボックスの初期設定 */
#popup-on-1{
  display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on-1:checked + .popup{
  display: block;
  z-index: 2;
}

/* 閉じるアイコン（右上） */
.icon-close{
  color: var(--black);
  font-size: 30px;
  padding: 0 10px;
  position: absolute;
  right: 0;
}

/* 閉じるボタン */
.x-close{
  font-family: 'Raleway';
  font-weight: 600;
  background: var(--white);
  border-radius: 30px;
  color: var(--black);
  padding: 10px;
  cursor: pointer;
  margin: 10px auto;
  width: 90%;
  text-align: center;
}

/* 開くボタン */
.x-open{
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
  margin-bottom: 16px;
}

/* ポップアップの内容 */
.pop-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}
.popup-content{
  margin: 40px auto 40px auto;
  width: 90%;
  animation-name: fade;
  animation-duration: 2s;
}

@keyframes fade{
0%{
  opacity: 0;
}
100%{
  opacity: 1;
}
}

/*************************
*   footer
*************************/
.footer {
  position: relative;
  line-height: 2;
  background-color: #3a3a3a;
  padding-top: 16px;
  padding-bottom: 40px;
  text-align: center;
}
.footer a {
  color: #fff;
}
.footer a:hover {
  opacity: 0.5;
  color: #3a3a3a, 50%;
}

.footer_nav_item {
  padding-top: 24px;
}
.footer_nav_item img {
  padding-top: 32px;
}

.copyright {
  color: #fff;
  font-size: 1rem;
}

/*************************
*   pege top btn
*************************/
.btn_pageTop {
  display: block;
  position: absolute;
  right: 0;
  bottom: 50px;
  width: 44px;
  height: 44px;
  background-color: #707070;
}

.btn_pageTop > .fa {
  position: relative;
  top: 0;
  color: #3a3a3a;
  width: 100%;
  height: 100%;
  line-height: 44px;
  transition: all 0.2s;
}

.btn_pageTop:hover > .fa {
  top: -10%;
}

@media screen and (min-width: 1200px) {
  .pointer_events_img {
    pointer-events: auto;
  }
}
/*# sourceMappingURL=style.css.map */