/****************************************
基本
****************************************/
body {
  font-size: 1.4em;
  font-family: 'Noto Sans Japanese', sans-serif;
  color: #333;
}

section {
  padding: 50px 0;
  font-size: 1.6rem;
}

.wrap {
  width: 960px;
  margin: auto;
  position: relative;
}

h1 {
  position: absolute;
  top: 8%;
  right: 0;
  left: 0;
  width: 90%;
  max-width: 850px;
  margin: auto;
}

h1 img {
  width: 100%;
}

h2 {
  text-align: center;
  font-size: 3.4rem;
  color: #0e89ff;
  font-weight: 700;
  line-height: 1.4;
}

h2 img {
  display: block;
  width: 250px;
  margin: 0 auto 25px;
}

.divisionList {
  display: flex;
  justify-content: space-between;
}

.divisionList li {
  width: 47%;
}

.pcObj {
  display: block;
}

.spObj {
  display: none;
}

@media only screen and (max-width: 768px) {

section {
  padding: 30px 0 0;
}

.wrap {
  width: 90%;
}

h1 {
  position: absolute;
  top: 10px;
  right: 0;
}

h2 {
  font-size: 7.4vw;
  line-height: 1.3;
}

h2 img {
  width: 75%;
  margin: 0 auto 15px;
}

.divisionList {
  flex-wrap: wrap;
}

.divisionList li {
  width: 100%;
}

.pcObj {
  display: none;
}

.spObj {
  display: block;
}
}

/****************************************
トップ
****************************************/
#topCts {
  background-image: url("../img/bg_top.jpg");
  background-size: cover;
  background-position: center top;
  height: 100vh;
  min-height: 750px;
}

@media only screen and (max-width: 768px) {

#topCts {
  background-image: none;
  height: auto;
  min-height: auto;
}
}

/****************************************
アバウト
****************************************/
#phAboutBoat,
#phAboutGirl {
  position: absolute;
}

#phAboutBoat {
  width: 290px;
  top: 30px;
  left: 0;
}

#phAboutGirl {
  width: 160px;
  top: 0;
  right: 0;
}

.phAboutMain {
  width: 100%;
  margin-top: 20px;
}

#aboutCts {
  margin-top: 50px;
}

#aboutCts dt {
  text-align: center;
}

#aboutCts dt img {
  width: 740px;
}

#aboutCts dt img:last-child {
  display: none;
}

#aboutCtsList {
  margin-top: 50px;
}

#aboutCtsList li:first-child p:first-child {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.8;
}

#aboutCtsList li:first-child p:last-child {
  margin-top: 30px;
  line-height: 2;
}

#aboutCtsList li:last-child img {
  width: 100%;
  border-radius: 30px;
}

@media only screen and (max-width: 768px) {

#phAboutBoat,
#phAboutGirl {
  display: none;
}

.phAboutMain {
  margin-top: 15px;
  border-radius: 25px;
}

#aboutCts {
  margin-top: 30px;
}

#aboutCts dt img {
  width: 75%;
  margin: auto;
}

#aboutCts dt img:first-child {
  display: none;
}

#aboutCts dt img:last-child {
  display: block;
}

#aboutCts dd > img {
  width: 70%;
  margin: 25px auto 0;
}

#aboutCtsList {
  margin-top: 30px;
}

#aboutCtsList li:first-child p:first-child {
  font-size: 1.8rem;
  line-height: 1.7;
}

#aboutCtsList li:first-child p:last-child {
  margin-top: 15px;
  line-height: 1.8;
}

#aboutCtsList li:last-child img {
  margin-top: 15px;
  border-radius: 25px;
}
}

/****************************************
ロケーション
****************************************/
#location {
  background-image: url("../img/bg_location.jpg");
  background-size: cover;
  background-position: left bottom;
}

#locationCtsWrap {
  width: 600px;
  margin-left: auto;
}

#locationCtsWrap > img {
  width: 100%;
}

#locationCtsWrap > img:first-of-type {
  vertical-align: bottom;
}

#locationCts {
  margin: 20px 10px 0;
  background-color: rgba(255,255,255,0.85);
  padding: 0 40px;
}

#locationCts h2 {
  margin-top: -20px;
}

#locationCts dl {
  margin-top: 25px;
}

#locationCts dl dt {
  line-height: 1.8;
}

#locationCts dl dd {
  margin-top: 30px;
}

#locationCts dl dd img {
  width: 100%;
}

@media only screen and (max-width: 768px) {

#location {
  background: none;
}

#locationCtsWrap {
  width: 100%;
}

#locationCtsWrap > img {
  display: none;
}

#locationCts {
  background: none;
  padding: 0;
}

#locationCts h2 {
  margin-top: 0;
}

#locationCts dl {
  margin-top: 15px;
}

#locationCts dl dt {
  line-height: 1.7;
}

#locationCts dl dd {
  margin-top: 15px;
}
}

/****************************************
ラーニング
****************************************/
#phLearning01,
#phLearning02 {
  position: absolute;
  top: -10px;
  width: 230px;
}

#phLearning01 {
  left: 0;
}

#phLearning02 {
  right: 0;
}

#learningCtsWrap {
  position: relative;
}

#wakuLeft,
#wakuRight {
  position: absolute;
  top: 90px;
}

#wakuLeft {
  left: 0;
}

#wakuRight {
  right: 0;
}

#learningCts {
  width: 720px;
  margin: 30px auto 0;
}

#learningCts dt {
  text-align: center;
}

#learningCts dt img {
  width: 420px;
}

#learningCts dd p:first-of-type {
  color: #0eb2ff;
  font-size: 3rem;
  text-align: center;
  margin: 30px 0 10px;
  font-weight: 700;
}

#learningCts dd p:last-of-type {
  line-height: 2;
  margin-top: -10px;
}

#learningCts dd p:last-of-type span {
  color: #0eb2ff;
  font-weight: 500;
}

@media only screen and (max-width: 768px) {

#phLearning01,
#phLearning02,
#wakuLeft,
#wakuRight {
  display: none;
}

#learningCts {
  width: 100%;
  margin: 20px auto 0;
}

#learningCts dt img {
  width: 100%;
}

#learningCts dd p:first-of-type {
  font-size: 7.6vw;
  margin: 20px 0 10px;
  line-height: 1.3;
}

#learningCts dd p:last-of-type {
  line-height: 1.8;
}
}

/*****ボタン*****/
#learningBtnCts {
  width: 700px;
  margin: 30px auto;
}

#learningBtnCts ul {
  display: flex;
  align-items: center;
  justify-content: center;
}

#learningBtnCts ul li {
  width: 49%;
  text-align: center;
}

#learningBtnCts ul li:first-child img {
  width: 100%;
}

#learningBtnCts ul li:last-child img {
  width: 80%;
}

#learningBtnCts a {
  display: block;
}

#learningBtnCts a:hover {
  opacity: 0.6;
}

#learningBtnCts a img {
  width: 100%;
}

@media only screen and (max-width: 768px) {

#learningBtnCts {
  width: 100%;
  margin: 30px auto;
}

#learningBtnCts ul {
  flex-wrap: wrap;
}

#learningBtnCts ul li {
  width: 100%;
}

#learningBtnCts ul li:first-child img {
  width: 90%;
  margin: auto;
}

#learningBtnCts ul li:last-child img {
  width: 70%;
}

#learningBtnCts a {
  display: block;
}

#learningBtnCts a:hover {
  opacity: 1;
}
}

/****************************************
フォトチャレンジ
****************************************/
#phChallenge01,
#phChallenge02 {
  position: absolute;
  top: 0;
}

#phChallenge01 {
  left: 0;
}

#phChallenge02 {
  right: 0;
}

#challengeCtsList {
  margin-top: 60px;
}

#challengeCtsList li:first-child img {
  width: 400px;
  display: block;
  margin: auto;
}

#challengeCtsList li:first-child p:first-of-type {
  font-size: 2.6rem;
  font-weight: 700;
  margin-top: 15px;
}

#challengeCtsList li:first-child p:last-of-type {
  margin-top: 20px;
  line-height: 1.8;
}

#challengeCtsList li:last-child img {
  width: 100%;
  border-radius: 30px;
}

@media only screen and (max-width: 768px) {

#phChallenge01,
#phChallenge02 {
  display: none;
}

#challengeCtsList {
  margin-top: 30px;
}

#challengeCtsList li:first-child img {
  width: 100%;
}

#challengeCtsList li:first-child p:first-of-type {
  font-size: 2.4rem;
  margin-top: 10px;
}

#challengeCtsList li:first-child p:last-of-type {
  margin-top: 10px;
  line-height: 1.7;
}

#challengeCtsList li:last-child img {
  margin-top: 15px;
  border-radius: 25px;
}
}

/*****フロー*****/
#flowWaveTop,
#flowWaveBottom {
  display: block;
  width: 100%;
}

#flowWaveTop {
  margin-top: 40px;
  vertical-align: bottom;
}

#flowWrap {
  background-color: #0eb2ff;
  padding: 25px 0 40px;
  margin: 0;
}

#flowCts li {
  position: relative;
}

#flowCamera {
  position: absolute;
  top: 0;
  left: 0;
  width: 85px;
}

#flowStep {
  text-align: center;
}

#flowStep dt img {
  width: 240px;
}

#flowStep dd {
  margin-top: 20px;
}

#flowStep dd img {
  width: 100%;
}

#flowBoat {
  width: 240px;
}

#flowPointPh {
  display: block;
  position: absolute;
  top: 65px;
  right: 0;
  width: 200px;
  border-radius: 50%;
}

#flowPoint {
  margin-top: 20px;
  color: #FFF;
  position: relative;
  z-index: 2;
}

#flowPoint p {
  margin-top: 10px;
  line-height: 1.6;
  font-weight: 500;
}

#flowPoint p:first-child {
  font-size: 2.6rem;
  font-weight: 700;
}

#flowPoint p:nth-child(2) {
  font-size: 1.4rem;
  text-indent: -1em;
  margin-left: 1em;
  font-weight: 400;
}

#flowPoint p span {
  color: #ffee00;
}

@media only screen and (max-width: 768px) {

#flowWaveTop {
  margin-top: 30px;
}

#flowWrap {
  background-color: #0eb2ff;
  padding: 30px 0;
}

#flowCamera {
  display: none;
}

#flowStep dt img {
  width: 70%;
}

#flowStep dd {
  margin-top: 15px;
}

#flowBoat {
  display: none;
}

#flowPointPh {
  top: 10px;
  width: 45%;
}

#flowPoint {
  margin-top: 40px;
  color: #FFF;
}

#flowPoint p:first-child {
  font-size: 6.8vw;
}
}

/****************************************
メンバーの声
****************************************/
#voiceListWrap > li {
  margin-top: 50px;
}

.voiceList {
  display: flex;
  justify-content: space-between;
}

.voiceList li:first-child {
  width: 150px;
}

.voiceList li:first-child img {
  width: 100%;
}

.voiceList li:last-child {
  width: 780px;
}

.voiceList li:last-child p:first-child {
  font-size: 2rem;
}

.voiceList li:last-child p:last-child {
  margin-top: 5px;
  font-size: 1.4rem;
  line-height: 1.8;
}

#voiceBg {
  margin-top: -200px;
  background-image: url("../img/bg_voice.jpg");
  background-size: cover;
  background-position: center bottom;
  height: 400px;
}

@media only screen and (max-width: 768px) {

#voiceListWrap > li {
  margin-top: 30px;
}

.voiceList {
  flex-wrap: wrap;
}

.voiceList li:first-child {
  width: 50%;
  margin: auto;
}

.voiceList li:last-child {
  margin-top: 10px;
  width: 100%;
}

.voiceList li:last-child p:first-child {
  font-size: 2rem;
  text-align: center;
}

.voiceList li:last-child p:last-child {
  margin-top: 5px;
  font-size: 1.4rem;
  line-height: 1.7;
}

#voiceBg {
  display: none;
}
}

/****************************************
ギャラリー
****************************************/
#gallery {
  background-color: #fffff0;
}

#voiceText {
  text-align: center;
  margin-top: 20px;
  font-size: 2rem;
  font-weight: 500;
}

#galleryList {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 10px;
}

#galleryList li {
  width: 180px;
  margin-top: 15px;
}

#galleryList li a:hover {
  opacity: 0.6;
}

#galleryList li a img {
  width: 100%;
}

#btnInstagram {
  display: block;
  width: 700px;
  margin: 50px auto 60px;
}

#btnInstagram:hover {
  opacity: 0.6;
}

#btnInstagram img {
  width: 100%;
}

#copyRight {
  font-size: 1.3rem;
  text-align: center;
  background-color: #0e89ff;
  color: #FFF;
  padding: 5px 0;
}

@media only screen and (max-width: 768px) {

#gallery {
  margin-top: 40px;
}

#voiceText {
  margin-top: 15px;
  font-size: 1.8rem;
}

#galleryList li {
  width: 31%;
  margin-top: 4%;
}

#galleryList li:last-of-type {
  display: none;
}

#galleryList li a:hover {
  opacity: 1;
}

#btnInstagram {
  width: 100%;
  margin: 15px auto 30px;
}

#btnInstagram:hover {
  opacity: 1;
}

#copyRight {
  font-size: 1rem;
  text-align: center;
  background-color: #0e89ff;
  color: #FFF;
  padding: 5px 0;
}
}

/****************************************
フッタ
****************************************/
#goTop {
  position: fixed;
  bottom: 40px;
  right: 20px;
  z-index: 1000;
}

#goTop a {
  display: block;
  color: #FFF;
  font-size: 1.4em;
  border: 1px solid #FFF;
  background-color: #0e89ff;
  padding-top: 7px;
  text-align: center;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

#goTop a:hover {
  opacity: 0.6;
}

@media only screen and (max-width: 768px) {

#goTop {
  bottom: 40px;
  right: 10px;
}

#goTop a:hover {
  opacity: 1;
}
}