@charset "UTF-8";
@import "./object.css";

/* TOP
---------------------------------------------------------------- */
.top-hero {
  background: #000 url(../images/top/top01.jpg) no-repeat center;
  background-size: 2000px;
  height: 660px;
  position: relative;
}

.top-hero-text {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.top-concept-block {
  background: #000;
}
.top-concept-block .inner {
  padding-top: 50px;
  padding-bottom: 40px;
  border-bottom: 1px solid #b8b8b8;
  box-sizing: border-box;
}

.concept-title01 {
/*  float: left;
  width: 44%;
*/  font-size: 60px;
  color: #fff;
  line-height: 1.5;
  text-align: center;
}

.concept-text01 {
/*  float: left;
  width: 56%;
*/  padding-top: 2%;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
}
.concept-text01 h3 {
  font-size: 13px;
  margin-top: 20px;
}
.concept-text01 p {
  font-size: 23px;
}
.concept-text01 .subcatch {
  font-size: 18px;
}

.top-service-title-block {
  background: #000;
  padding-top: 40px;
  padding-bottom: 40px;
}

.service-bgpic01 {
  background: url(../images/top/top03.jpg) no-repeat center;
  background-size: cover;
}

.service-bgpic02 {
  background: url(../images/top/top05.jpg) no-repeat center;
  background-size: cover;
}

.service-bgpic03 {
  background: url(../images/top/top07.jpg) no-repeat center;
  background-size: cover;
}

.service-bgpic04 {
  background: url(../images/top/top09.jpg) no-repeat center;
  background-size: cover;
}

.service-bgpic05 {
  background: url(../images/top/top11.jpg) no-repeat center;
  background-size: cover;
}

.service-wagaya {
  background: url(../images/top/top-wagaya.jpg) no-repeat center;
  background-size: cover;
}

.service-bgpic07 {
  background: url(../images/top/top14.jpg) no-repeat center;
  background-size: cover;
}

.service-bgpic_waveroom {
  background: url(../images/top/waveroom.jpg) no-repeat center;
  background-size: cover;
}

.service-bgpic_maruna-ge {
  background: url(../images/service/maruna-ge/top-maruna-ge.jpg) no-repeat center;
  background-size: cover;
}

.service-logo01 {
  padding: 15px 0 0 0;
}

.service-logo02 {
  padding: 23px 0 0 0;
  width: 85%;
}

.service-logo03 {
  padding: 60px 0 0 0;
}

.service-logo04 {
  padding: 27px 116px 0 0;
}

.service-logo05 {
  padding: 29px 0 0 0;
}

.top-service-left {
  float: left;
}

.top-service-right {
  float: right;
}

.top-service-row {
  max-width: 2000px;
  margin-right: auto;
  margin-left: auto;
}

.top-service-pic {
  width: 50%;
}

.top-service-txtbox01 {
  width: 50%;
  position: relative;
  overflow: hidden;
  padding: 3% 5% 4% 6%;
  box-sizing: border-box;
}

.top-service-linkblock {
  display: block;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.top-service-linkblock:hover {
    opacity: 0.8;
}

.top-service-txtbox02 {
  width: 50%;
  position: relative;
  overflow: hidden;
  padding: 3% 6% 4% 5%;
  box-sizing: border-box;
}

.top-service-txtcontent01 {
  float: left;
  text-align: right;
}

.top-service-txtcontent02 {
  float: right;
  text-align: left;
}

.top-service-title01 {
  font-size: 20px;
  line-height: 1.2;
}

.top-topics-block {
  background-color: #f5f5f5;
  padding-top: 80px;
  padding-bottom: 120px;
}

.top-topics-list {
  padding-top: 40px;
  border-top: 2px solid #b8b8b8;
}
.top-topics-list li, .top-topics-list div {
  padding: 15px 0;
  border-bottom: 1px solid #b8b8b8;
}
.top-topics-list a{    
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.top-topics-list a:hover{
    color: #b8b8b8;
}

.topics-icon01 {
  display: inline-block;
  font-size: 13px;
  color: #fff;
  text-align: center;
  line-height: 1px;
  padding: 13px 20px;
  background-color: #cd0000;
  margin-right: 1%;
}

.topics-icon02 {
  display: inline-block;
  font-size: 13px;
  color: #fff;
  text-align: center;
  line-height: 1px;
  padding: 13px 20px;
  background-color: #1c4c8c;
  margin-right: 1%;
}

.top-topics-btn01 {
  text-align: right;
}
.topics-page-title01 {
    font-size: 22px;
    font-weight: bold;
    border-bottom: 1px solid #b8b8b8;
    padding-bottom: 10px;
}
.topics-page-text01 {
    font-size: 16px;
	margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .top-hero {
    background: #000 url(../images/top/top01.jpg) no-repeat center;
    background-size: cover;
    height: 330px;
  }

  .top-hero-text {
    width: 80%;
  }

  .concept-title-blake {
    display: none;
  }

  .concept-title01 {
    float: none;
    width: 100%;
    font-size: 34px;
  }

  .concept-text01 {
    float: none;
    width: 100%;
  }

  .service-logo01, .service-logo02, .service-logo03, .service-logo04, .service-logo05 {
    padding: 0;
  }

  .service-logo02 {
    width: auto;
  }
	
  .top-service-title01 {
    font-size: 18px;
  }

  .top-service-txtbox01, .top-service-txtbox02 {
    padding: 5%;
  }

  .top-service-txtcontent01, .top-service-txtcontent02 {
    float: none;
    text-align: center;
  }
}
@media screen and (max-width: 480px) {
  .top-hero-text {
    width: 90%;
  }

  .top-hero {
    height: 260px;
  }

  .top-concept-block .inner {
    padding-top: 10%;
    padding-bottom: 8%;
  }

  .top-service-title-block {
    padding-top: 8%;
    padding-bottom: 8%;
  }

  .top-service-left, .top-service-right {
    float: none;
  }

  .top-service-pic {
    width: 100%;
    height: 180px;
  }

  .top-service-txtbox01, .top-service-txtbox02 {
    width: 100%;
  }

  .service-logo01 {
    width: 60%;
  }

  .service-logo02 {
    width: 80%;
  }

  .service-logo03 {
    width: 70%;
  }

  .service-logo04 {
    width: 75%;
  }

  .service-logo05 {
    width: 60%;
  }

  .top-service-txtbox01, .top-service-txtbox02 {
    padding: 5% 5% 15%;
  }

  .top-topics-block {
    background-color: #f5f5f5;
    padding-top: 15%;
    padding-bottom: 20%;
  }
    
.topics-page-title01 {
    font-size: 20px;
}
    
}
/* service
---------------------------------------------------------------- */
.service-title-img {
  background: url(../images/service/page_title.jpg) no-repeat center;
  background-size: cover;
}

/* company
---------------------------------------------------------------- */
.company-title-img {
  background: url(../images/company/page_title.jpg) no-repeat center;
  background-size: cover;
}

.company-inner {
  max-width: 900px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.company-table01 {
  width: 100%;
  font-size: 16px;
}
.company-table01 tr {
  border-bottom: 1px solid #b8b8b8;
}
.company-table01 th {
  text-align: left;
  vertical-align: top;
  padding: 20px 50px 20px 5px;
}
.company-table01 td {
  padding: 20px 0;
}
.company-table01 a {
	text-decoration: underline;
}
.company-table01 a:hover {
	text-decoration: none;
}

.company-text01 {
  font-size: 16px;
}

.company-btn01 {
  text-align: center;
}

.company-title01 {
  font-size: 36px;
  text-align: center;
  font-family: "游明朝", "Yu Mincho", "游明朝体", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.company-text-yumin {
  font-size: 22px;
  line-height: 2;
  text-align: center;
  font-family: "游明朝", "Yu Mincho", "游明朝体", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.page-img-box02 {
  width: 26%;
}

.page-text-box02 {
  width: 74%;
  padding-right: 4%;
  box-sizing: border-box;
}

.no-pic {
  height: 290px;
  background: #fff;
}

.company-text02 {
  font-size: 14px;
}

.company-text03 {
  font-size: 14px;
  display: inline-block;
}

.company-text04 {
  font-size: 20px;
  display: inline-block;
}

.company-pad01 {
  padding-top: 50px;
  border-top: 1px solid #b8b8b8;
}

.philosopy-box {
  border: 1px solid #e1e1e1;
  background-color: #fff;
  padding: 50px;
}

.philosopy-text01 {
  font-size: 19px;
  font-weight: bold;
}

.philosopy-text02 {
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  .company-table01, .company-table01 tbody, .company-table01 tr, .company-table01 th, .company-table01 td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .company-table01 th {
    padding-bottom: 0;
    padding-left: 0;
  }

  .company-table01 td {
    padding: 10px 0 20px;
  }

  .page-img-box02 {
    width: 100%;
    text-align: center;
  }

  .page-text-box02 {
    margin-top: 4%;
    width: 100%;
    padding-right: 0;
  }

  .company-text02 {
    font-size: 14px;
  }

  .company-text03 {
    font-size: 14px;
    display: inline-block;
  }

  .company-text04 {
    font-size: 20px;
    display: inline-block;
  }
}
@media screen and (max-width: 480px) {
  .company-title01 {
    font-size: 28px;
  }

  .company-text-yumin {
    font-size: 18px;
	text-align: left;
  }

  .company-pad01 {
    padding-top: 6%;
  }

  .philosopy-box {
    padding: 6% 8%;
  }

  .philosopy-text01 {
    font-size: 18px;
  }
}

.company-plan {
  margin: 20px 0;
}
.company-plan *{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.company-plan::after {
  content: none;
}
.company-plan .flex-inner {
  border: 2px solid #18ADDA;
  text-align: center;
  padding: 15px !important;
  background: #fff;
}
@media screen and (max-width: 599px) {
  .company-plan .flex-inner{
    width: 100%;
    -webkit-box-ordinal-group: 1 !important;
    -ms-flex-order: 0 !important;
    order: 0 !important;
  }
}

.company-plan div:nth-of-type(1) {
  -webkit-box-ordinal-group: 6;
  -ms-flex-order: 5;
  order: 5;
}
.company-plan div:nth-of-type(2) {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}
.company-plan div:nth-of-type(3) {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
}
.company-plan div:nth-of-type(4) {
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
  order: 3;
}
.company-plan div:nth-of-type(5) {
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
  order: 4;
}
.company-plan div:nth-of-type(6) {
  -webkit-box-ordinal-group: 7;
  -ms-flex-order: 6;
  order: 6;
}
.company-plan div:nth-of-type(7) {
  -webkit-box-ordinal-group: 8;
  -ms-flex-order: 7;
  order: 7;
}
.company-plan div:nth-of-type(8) {
  -webkit-box-ordinal-group: 9;
  -ms-flex-order: 8;
  order: 8;
}
.company-plan div:nth-of-type(9) {
  -webkit-box-ordinal-group: 10;
  -ms-flex-order: 9;
  order: 9;
}

.company-plan figure {
  margin: 10px 0;
}
.company-plan figure.icon {
  height: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.company-plan p {
  font-size: 16px;
}

/* topics
---------------------------------------------------------------- */

.topics-title-img {
  background: url(../images/topics/page_title.jpg) no-repeat center;
  background-size: cover;
}
/* form
---------------------------------------------------------------- */
.contact-title-img {
  background: url(../images/contact/page_title.jpg) no-repeat center;
  background-size: cover;
}
.mailform tr {
    border-top: 1px solid #c7c7c7;
}
.mailform th {
  text-align: left;
}

.form-vt {
  vertical-align: top;
}

.form-vm {
  vertical-align: middle;
}

.mailform .form-no-bpad {
  padding-bottom: 0;
}

.form-radio {
  float: left;
  margin-right: 2%;
}

ul .form-radio:last-child {
  margin-right: 0;
}

@media screen and (max-width: 480px) {
  .form-radio {
    float: none;
  }
}
/* sitemap
---------------------------------------------------------------- */
.sitemap-text01 {
    border-bottom: 1px solid #b8b8b8;
}
.sitemap-text01 a {
    font-size: 20px;
    font-weight: bold;
        -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.sitemap-text02 a {
        -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.sitemap-text01 a:hover,.sitemap-text02 a:hover {
    color: #b8b8b8;
}

/* インスタグラム
---------------------------------------------------------------- */
.insta {
  padding: 20px 0;
}
.insta .title-text01 {
  margin-bottom: 20px;
}
@media screen and (min-width: 600px) {
  .insta {
    padding: 40px 0;
  }
}


.pagination {
  margin: 20px 0;
}
.pagination ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination ul strong,
.pagination ul a{
  padding: 10px;
}
.pagination ul a:hover{
  background: #f0f0f0;
}