@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap');


body {background : rgba(153,181,180,.15)}


@media screen and (max-width: 767px) {
  #undercolumn_blog　{ width: 100% !important}
  .only_pc { display: none}
  .PageWrapper { }
  .PageWrapper { width: 100%; margin: 0 auto; padding-bottom: 0; color: #000; font-size: 12px; /*letter-spacing: 0.05em;*/ line-height: 1.4em; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'Noto Sans JP', sans-serif;}
  .PageWrapper a:link { text-decoration: none; color: #000}
  .PageWrapper a:visited { text-decoration: none; color: #000}
  .PageWrapper a:hover { text-decoration: underline; color: #000}
  .PageWrapper a.bottom { display: inline-block; margin-top: 8px}
  .PageWrapper img { max-width: 100%}

  .mainVisual { opacity: 0; margin: 0 auto 40px; text-align: center}
  .mainVisual .pic img { width: 100%; height: auto}
  .mainVisual { animation: fadein 1.5s ease 0.5s 1 forwards}
  .mainVisual .text { margin: 40px auto; font-size: 14px}

  @-webkit-keyframes fadein {
  	100% { opacity: 1}
  }

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

  .section {
    max-width: 1000px;
    margin: 0 auto 100px;
    box-sizing: border-box;
  }
  .section > ul {
    margin: 0;
  }
  .section > ul li {
    margin-bottom: 20px;
    /* padding: 0 7.89%; */
  }
  .section > ul li img {
    display: block;
    max-width: 100%;
  }
  .section > ul a {
    display: block;
  }
  .section .text {
    font-size: 10px;
    text-align: center;
  }
  .section .btns { display: flex; justify-content: center; width: 100%}
  .section .btns li { width: 50%; margin: 0 5px}
  .section .btns li a { display: block; padding: 15px 0; text-align: center; border: 1px solid #007C8A; background: #fff; color: #007C8A; font-size: 10px; font-weight: bold}
  .section .btns li:nth-of-type(1) a { background: #007C8A; color: #fff}
  .section .btns li a span.arrow {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    margin: -1px 0 0 4px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 0.475em 0.7em;
    border-left-color: currentColor;
    border-right: 0;
  }
  .section .btns li:last-child a span.arrow {
    color: #007C8A;
  }

  .section .detail { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 20px; padding: 0 5.62%}
  .section .detail .text { margin-bottom: 10px}

  .num01_03 {
    margin-bottom: 0;
    padding-bottom: 70px;
    background: url(/user_data/packages/ravijour/feature/swim2024_2/images/bg.jpg) no-repeat;
    background-size: cover;
  }
  .num01_03 .img {
    width: 74.24%;
    margin: 20px auto 0;
  }

  .section .slick-dotted.slick-slider {
    margin-bottom: 0;
  }
  .section .slick-dots {
    bottom: 0;
  }
  .section .slick-dots li {
    width: 7px;
    height: 7px;
    margin: 0 6px;  
  }
  .section .slick-dots li button {
    width: 7px;
    height: 7px;
    padding: 0;
  }
  .section .slick-dots li button:before {
    content: "";
    width: 7px;
    height: 7px;
    background: #CBD5CD;
    border-radius: 100%;
    opacity: 1;
  }
  .slick-dots li.slick-active button:before {
    opacity: 1;
    background: #99B5B4;
  }


  .num01_06 {
    margin-bottom: 0;
  }
  .num01_06 > p {
  	margin-bottom: 20px;
  	font-size: 12px;
  	text-align: center;
  }
  .num01_06 .profile {
    margin-top: 80px;
  	padding: 30px;
  	background: #FAF4EB;
  }
  .num01_06 .profile .img {
  	margin-bottom: 30px;
  }
  .num01_06 .profile .text p {
  	margin: 0;
  	font-size: 13px;
    text-align: left;
  }
  .num01_06 .profile .text p.name {
  	margin-bottom: 30px;
  	font-size: 18px;
    text-align: center;
  }


  .pagetop { position: fixed; bottom: 0; right: 0; z-index: 2}
  .pagetop a { background: #212121; color: #fff; display: inline-block; padding: 20px; position: relative; text-indent: -9999px; width: 30px; height: 30px; box-sizing: border-box}
  .pagetop a:after { position: absolute; top: 6px; bottom: 0; left: 14px; margin: auto; content: ""; vertical-align: middle; width: 10px; height: 10px; border: 1px solid; border-color: #fff #fff transparent transparent; transform: rotate(-45deg); transition: all .2s}
  .pagetop:hover a:after { top: 0}
  #hide { display: none !important}


  .PageWrapper p.check { max-width: 400px; margin: 0 auto; text-align: center}
  .PageWrapper p.check a { background: #007C8A; color: #fff; display: inline-block; font-size: 12px; letter-spacing: 0.05em; padding: 15px; position: relative; width: 86.666%; text-decoration: none; box-sizing: border-box; transition: background 1s ease}
  .PageWrapper p.check a span.arrow {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    margin: -1px 0 0 4px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 0.475em 0.7em;
    border-left-color: currentColor;
    border-right: 0;
  }
  .PageWrapper p.bnnr { margin: 80px auto 0}
  .PageWrapper p.bnnr img { width: 100%; height: auto}
  .video_wrap { position: relative; width: 100%; margin: 0 auto 80px}
  .video { position: relative; width: 100%; padding: 56.25% 0 0}
  .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%}
}


@media screen and (min-width: 768px) {
	.only_sp { display: none}
	.wrapper { position: relative; background: transparent}
	.wrapper { color: #000; font-size: 14px; line-height: 1.8; margin: 0 auto; padding-bottom: 0; width: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'Noto Sans JP', sans-serif}
	.wrapper a:link { text-decoration: none; color: #000}
	.wrapper a:visited { text-decoration: none; color: #000}
	.wrapper a:hover { text-decoration: underline; color: #000}
	.wrapper img { max-width: 100%}

	.section { position: relative; width: 960px; margin: 0 auto 150px}
	.section > ul { display: flex; justify-content: center; flex-wrap: wrap; margin: 0 -8px}
	.section > ul > li { width: calc(100% / 3 - 16px); margin: 0 8px 16px; box-sizing: border-box}
	.section > ul > li img { width: 100%; height: auto}
	.section .btns { display: flex; justify-content: center}
	.section .btns li { min-width: 200px; margin: 0 5px}
	.section .btns li a { display: block; padding: 12px 15px; text-align: center; border: 1px solid #007C8A; background: #fff; font-size: 12px; color: #007C8A; font-weight: bold}
	.section .btns li:nth-of-type(1) a { background: #007C8A; color: #fff}
	.section .btns li a span.arrow {
	  display: inline-block;
	  vertical-align: middle;
	  color: #fff;
	  line-height: 1;
	  margin: -1px 0 0 4px;
	  width: 0;
	  height: 0;
	  border-style: solid;
	  border-color: transparent;
	  border-width: 0.475em 0.7em;
	  border-left-color: currentColor;
	  border-right: 0;
	}

	.section .btns li:last-child a span.arrow {
	  color: #007C8A
	}

	.section .detail { display: flex; flex-direction: column; justify-content: center; align-items: center}
	.section .detail .text { margin: 30px 0 10px; text-align: left; font-size: 12px; line-height: 1.5}
	.section li.detail { margin-top: 0}

	.num01_03 > ul li:nth-of-type(4) {
		width: 260px;
		margin-top: 45px;
	}
	.num01_05 { width: 636px; margin-bottom: 100px}
	.num01_05 > ul > li {
		width: calc(100% / 2 - 16px);
	}
	.num01_05 > ul > li:nth-of-type(1) {
		width: 100%;
		margin-bottom: 14px;
	}

	.num01_06 {
		width: 100%;
		margin-bottom: 0;
		padding: 105px 0 140px;
		background: url(/user_data/packages/ravijour/feature/swim2024_2/images/bg_pc.jpg) center top no-repeat;
		background-size: cover;
	}
	.num01_06 > p {
		margin-bottom: 20px;
		font-size: 14px;
		text-align: center;
		color: #fff;
	}
	.num01_06 .profile {
		display: flex;
		align-items: center;
		width: 963px;
		margin: 80px auto 0;
		padding: 20px;
		background: #fff;
	}
	.num01_06 .profile .img {
		flex-shrink: 0;
		width: 218px;
		margin: 0 86px;
	}
	.num01_06 .profile .text p {
		margin: 0;
		font-size: 13px;
	}
	.num01_06 .profile .text .name {
		margin-bottom: 35px;
		font-size: 16px;
	}
	.wrapper p.bnnr { margin: 160px auto 0; text-align: center}

	.mainVisual { width: 100%; margin: 0 auto; opacity: 0;}
	.mainVisual { animation: fadein-main 2.5s ease 0.5s 1 forwards}
	.mainVisual { position: relative; width: 970px; margin: 0 auto 60px; text-align: center}
	.mainVisual img { max-width: 100%}
	.mainVisual .text { margin: 60px auto; font-size: 14px}
	.mainVisual p.check { width: 470px; margin: 0 auto; text-align: center}
	.mainVisual p.check a { display: block; padding: 2%; font-size: 17px; background: #007C8A; color: #fff}
	.mainVisual p.check a span.arrow {
	  display: inline-block;
	  vertical-align: middle;
	  color: #fff;
	  line-height: 1;
	  margin: -1px 0 0 4px;
	  width: 0;
	  height: 0;
	  border-style: solid;
	  border-color: transparent;
	  border-width: 0.475em 0.7em;
	  border-left-color: currentColor;
	  border-right: 0;
	}
	@-webkit-keyframes fadein-main {
		100%  { opacity: 1}
	}

	@keyframes fadein-main {
		100%  { opacity: 1}
	}
}