@charset "utf-8";

/*
========== CSS of CONTENTS ==========

Created:
Modified:

1:base
2:header
3:contents
4:footer
5:others

========== /CSS of CONTENTS ==========
*/

/* 1:base
   -------------------------------------- */
html {
 font-size: 62.5%
}
body {
  margin: 0;
  background: #fff;
  text-align: left;
  font-size: 1.4rem;
  font-family:ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
  color: #484848;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,section,div,p,ul,li,dl,dt,dd {
  margin: 0;
  padding: 0;
}
ul, li {
  list-style-type: none;
}
a {
  color: #0080c6;
}
img {
  width: 100%;
  vertical-align: middle;
}
.taC {
  text-align: center;
}
.with_indent{
  padding-left: 1em;
  text-indent: -1em;
  list-style-position: inside;
}
.is-sp { display: block; }
.is-pc { display: none; }

@media (min-width: 768px) {
  .modImgOver:hover {
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
    zoom: 1;
  }
  img {
    width: auto;
    vertical-align: top;
  }
  .is-sp { display: none; }
  .is-pc { display: block; }
}

/* 2:header
   -------------------------------------- */

/* .head
   ------------------------------ */
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.33vw 6.67vw 3.33vw 4vw;
}
.headCommunityLogo {
  width: 22.13vw;
  height: 6vw;
}
.headNav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.headNav > li > a {
  display: inline-block;
  color: #333;
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
}
.headNav > li:not(:first-child) > a {
  margin-left: 15px;
}
@media (min-width: 768px) {
  .head {
    min-width: 910px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    height: 50px;
  }
  .headCommunityLogo {
    width: auto;
    height: auto;
  }
  .headNav > li > a {
    font-size: 15px;
  }
}

/* 3:contents
   -------------------------------------- */

/* .welcome
   ------------------------------ */
@media (min-width: 768px) {
  .welcome {
    min-width: 910px;
    height: 440px;
    margin: 0 auto;
    background-color: #40bfeb;
  }
  .welcomeImg {
    width: 609px;
    margin: 0 auto;
  }
}

/* .mainContent
   ------------------------------ */
.mainContent {
  padding: 5.33vw 0 1.6vw;
  background-color: #fff6be;
}
@media (min-width: 768px) {
  .mainContent {
    margin: 0 auto;
    padding: 30px 0 55px;
  }
  .mainContent > div {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 910px;
    margin: 0 auto;
  }
}

/* .chat
   ------------------------------ */
.chat {
  margin: 0 6.67vw 12vw;
}
.chatTtl {
  position: relative;
  width: 70.53vw;
  margin: 0 auto 3.33vw;
}
.chatTtl::before {
  content: "";
  display: block;
  width: 17.6vw;
  height: 29.73vw;
  position: absolute;
  bottom: -27vw;
  left: -12vw;
  background-image: url(../images/sp/chatIllust_s.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.chatList01 {
  width: 71.87vw;
  height: 30.13vw;
  margin-left: auto;
  margin-right: 0;
}
.chatList01 > a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 71.87vw;
  height: 30.13vw;
  background-image: url(../images/sp/chatBalloon01_s.png);
  background-repeat: no-repeat;
  background-size: cover;
  text-decoration: none;
  text-align: center;
  color: #333;
  font-size: 1.8rem;
  font-weight: bold;
}
.chatList01 > a > span {
  display: inline-block;
  text-align: left;
}
.chatList02 {
  width: 76.13vw;
  height: 32.8vw;
  margin-top: -1vw;
}
.chatList02 > a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 76.13vw;
  height: 32.8vw;
  padding-top: 2vw;
  background-image: url(../images/sp/chatBalloon02_s.png);
  background-repeat: no-repeat;
  background-size: cover;
  text-decoration: none;
  text-align: center;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
}
.chatList02 > a > span {
  display: inline-block;
  text-align: left;
}
@media (min-width: 768px) {
  .chat {
    width: 382px;
    margin: 0 0 0 15px;
  }
  .chatTtl {
    width: 318px;
    margin-bottom: 15px;
    margin-right: 5px;
  }
  .chatTtl::before {
    width: 66px;
    height: 112px;
    top: 55px;
    left: -75px;
    background-image: url(../images/pc/chatIllust.png);
  }
  .chatList01 {
    width: 318px;
    height: 134px;
  }
  .chatList01 > a {
    width: 318px;
    height: 134px;
    background-image: url(../images/pc/chatBalloon01.png);
    font-size: 21px;
  }
  .chatList01 > a > span {
  }
  .chatList01 > a:hover {
    opacity: .7;
  }
  .chatList02 {
    position: relative;
    width: 325px;
    height: 145px;
    margin-top: 0;
  }
  .chatList02 > a {
    width: 325px;
    height: 145px;
    padding-top: 10px;
    background-image: url(../images/pc/chatBalloon02.png);
    font-size: 21px;
  }
  .chatList02 > a > span {
  }
  .chatList02 > a:hover {
    opacity: .7;
  }
}

/* .latest
   ------------------------------ */
.latest {
  margin: 0 6.67vw;
}
.latestTtl {
  position: relative;
  width: 67.33vw;
  margin: 0 0 4vw 2vw;
  z-index: 0;
}
.latestTtl::before {
  content: "";
  display: block;
  width: 19.47vw;
  height: 35.87vw;
  position: absolute;
  top: -7vw;
  right: -18vw;
  background-image: url(../images/sp/latestIllust_s.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
.latestMore {
  text-align: right;
}
.latestMore > a {
  font-size: 1.1rem;
  color: #333;
  text-decoration: none;
}
@media (min-width: 768px) {
  .latest {
    width: 472px;
    margin: 0;
  }
  .latestTtl {
    width: 302px;
    margin: 0 auto 15px;
    text-align: center;
  }
  .latestTtl::before {
    width: 80px;
    height: 147px;
    top: -20px;
    right: -73px;
    background-image: url(../images/pc/latestIllust.png);
  }
  .latestMore > a {
    font-size: 11px;
  }
}

/* .step
   ------------------------------ */
.stepTtl {
  position: relative;
  width: 41.07vw;
  margin: 2.67vw auto 6.4vw;
}
.stepTtl::before {
  content: "";
  display: block;
  width: 13.87vw;
  height: 22.13vw;
  position: absolute;
  top: 0;
  left: -19.6vw;
  background-image: url(../images/sp/stepIllust01_s.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.stepTtl::after {
  content: "";
  display: block;
  width: 26.67vw;
  height: 27.33vw;
  position: absolute;
  top: 3.33vw;
  right: -26.67vw;
  background-image: url(../images/sp/stepIllust02_s.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.stepContent {
  position: relative;
  margin: 0 6.67vw 20px;
}
.stepContent::after {
  content: "";
  display: block;
  width: 41.87vw;
  height: 85.73vw;
  position: absolute;
  top: 9vw;
  right: 0;
  background-image: url(../images/sp/stepDevice_s.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.stepList {
  width: 39.6vw;
}
.stepList > li:not(:last-child) {
  margin-bottom: 2vw;
}
@media (min-width: 768px) {
  .step {
    width: 910px;
    margin: 0 auto;
  }
  .stepTxt {
    width: 475px;
    margin: 0 auto;
  }
  .stepTtl {
    width: 446px;
    margin: -5px auto 22px;
  }
  .stepTtl::before {
    width: 83px;
    height: 133px;
    top: 165px;
    left: -117px;
    background-image: url(../images/pc/stepIllust01.png);
  }
  .stepTtl::after {
    width: 137px;
    height: 128px ;
    top: 168px;
    right: -187px;
    background-image: url(../images/pc/stepIllust02.png);
  }
  .stepContent {
    margin: 0 0 30px;
  }
  .stepContent::after {
    width: 468px;
    height: 259px;
    top: -280px;
    left: 215px;
    right: auto;
    background-image: url(../images/pc/stepDevice.png);
  }
  .stepList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 910px;
    margin-top: 295px;
  }
  .stepList > li:not(:last-child) {
    margin-bottom: 0;
  }
}

/* 4:footer
   -------------------------------------- */
footer {
  padding-top: 20vw;
}
.footFixed {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 2.67vw 0 3.33vw;
  background: #fff;
  box-shadow: 0px 0px 10px 0px #c1bebe;
}
.footBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 6.67vw;
}
.footBtn01 {
  width: 44.53vw;
}
.footBtn02 {
  width: 39.87vw;
}
@media (min-width: 768px) {
  footer {
    padding-top: 90px;
  }
  .footFixed {
    padding: 12px 0;
  }
  .foot {
    width: 910px;
    margin: 0 auto;
  }
  .footBtn {
    width: 830px;
    margin: 0 auto;
    }
  .footBtn01 {
    width: 400px;
  }
  .footBtn02 {
    width: 400px;
  }
}