@charset "UTF-8";
/*#########################################################

基本設定

#########################################################*/
/* ========================================================
単位用設定
=========================================================*/
/* ========================================================
色用設定
=========================================================*/
/* ========================================================
フォント用設定
=========================================================*/
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Noto+Sans+JP:wght@300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap");
/*#########################################################

レイアウト用設定

#########################################################*/
/* ========================================================
mixin mq用の変数設定
=========================================================*/
/*
▼iOSデバイス
iPhone5: 320 × 568
iPhone 6-8: 375 × 667（1334x750）
iPhone 6-8 plus: 414 × 736（1920x1080）
iPhone X,XS,11Pro: 375 × 812（1125x2436）
iPhone XR,11: 414 × 896（828x1792）

iPad/iPad Mini: 768 × 1024
iPad Pro: 1024 × 1366
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

▼ブートストラップ
xs： ～767px
sm： 768～991px
md： 992～1119px
lg： 1120px～
*/
/* ========================================================
メディアクエリ用Mixin
=========================================================*/
/*
ステップ1.モバイルファーストかデスクトップファーストかを選ぶ
ステップ2.該当する設定を有効化、その他をコメントアウトする。
ステップ3.選択したタイプにより、「▼モバイルファーストの例」、「▼デスクトップファーストの例」のどちらかを参考にブレイクポイントを設定する。
→実際の設定は_base.scssではなく、インポート元で行う。
*/
/*
// ステップ2：モバイルファースト用（デスクトップファーストの場合はコメントアウト）
$breakpoints: (
	// タブレット
	'md': 'screen and (min-width: ' + ($screen-sm-max + 1) + ') and (max-width: ' + ($screen-md-max) + ')',
	// デスクトップ
	'lg': 'screen and (min-width: ' + ($screen-sm-max + 1) + ')',
) !default;
*/
/*
// ステップ3：▼モバイルファーストの例
// メディアクエリのブロック外にベースになるCSSを書く。
// モバイルファーストでは小さい画面サイズから順々に指定。
main{
	// デフォルト
	background: yellow;
	// タブレット
	@include mq(md){
		background: orange;
	}
	// デスクトップ
	@include mq(lg){
		background: red;
	}
}
//------------------------------
*/
/*
// ステップ3：▼デスクトップファーストの例
// メディアクエリのブロック外にベースになるCSSを書く。
// デスクトップファーストでは大きい画面サイズから順々に指定。
main{
	// デフォルト
	background: red;
	// タブレット
	@include mq(md){
		background: orange;
	}
	// スマートフォン
	@include mq(sm){
		background: yellow;
	}
}
//------------------------------
*/
/* ========================================================
Components
=========================================================*/
/* ========================================================
キービジュアル
=========================================================*/
.keyvisual {
  position: relative;
  z-index: 1;
  margin: 10px auto 20px;
  padding: 10px;
  width: 99%;
  height: 830px;
  background: linear-gradient(to top, #076a65, #118d88 250px, #21a19c 250px, #2ac6c0);
  border-radius: 10px;
}
@media screen and (max-width: 599px) {
  .keyvisual {
    width: 94%;
    height: auto;
    background: -webkit-gradient(linear, left bottom, left top, from(#076a65), color-stop(40vw, #118d88), color-stop(40vw, #21a19c), to(#2ac6c0));
    background: linear-gradient(to top, #076a65, #118d88 40vw, #21a19c 40vw, #2ac6c0);
  }
}
.keyvisual .inr-box {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  height: 830px;
}
@media screen and (max-width: 599px) {
  .keyvisual .inr-box {
    height: auto;
  }
}
.keyvisual .det {
  padding: 100px 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width: 599px) {
  .keyvisual .det {
    position: relative;
    display: block;
    padding: 2.667vw;
  }
}
.keyvisual .det .txt-box {
  width: 50%;
  color: #fff;
}
@media screen and (max-width: 599px) {
  .keyvisual .det .txt-box {
    width: 100%;
  }
}
.keyvisual .det .txt-box > p {
  margin-bottom: 25px;
  font-size: 1.6rem;
}
@media screen and (max-width: 599px) {
  .keyvisual .det .txt-box > p {
    font-size: 3.84vw;
  }
}
.keyvisual .det .txt-box > p.border {
  display: inline-block;
  padding: 7px 10px;
  font-size: 1.5rem;
  line-height: 1;
  border: 2px solid #fff;
  border-radius: 6px;
  letter-spacing: 0.1rem;
}
@media screen and (max-width: 599px) {
  .keyvisual .det .txt-box > p.border {
    font-size: 2.997vw;
  }
}
.keyvisual .det .txt-box h2.tit {
  margin-bottom: 60px;
  font-size: 3.68rem;
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.3rem;
}
@media screen and (max-width: 599px) {
  .keyvisual .det .txt-box h2.tit {
    font-size: 5.547vw;
  }
}
.keyvisual .det .img-box {
  position: relative;
  padding-top: 45px;
  width: 50%;
}
@media screen and (max-width: 599px) {
  .keyvisual .det .img-box {
    padding-top: 0;
    position: absolute;
    top: 25%;
    right: -3%;
    z-index: -1;
    width: 100%;
    text-align: right;
  }
}
.keyvisual .det .img-box::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 100px;
  right: 60px;
  width: 220px;
  height: 150px;
  background: url(../img/top/bgimg_kv.png) top left/220px no-repeat;
}
@media screen and (max-width: 599px) {
  .keyvisual .det .img-box::after {
    content: none;
  }
}
.keyvisual .det .img-box img {
  width: 450px;
}
@media screen and (max-width: 599px) {
  .keyvisual .det .img-box img {
    width: 48vw;
  }
}
.keyvisual .det .img-box .prize {
  position: absolute;
  bottom: 0;
  left: -80px;
}
.keyvisual .det .img-box .prize img {
  width: 300px;
}
@media screen and (max-width: 599px) {
  .keyvisual .det .prize.sp {
    padding-top: 13.333vw;
    position: static;
    width: 100%;
  }
  .keyvisual .det .prize.sp img {
    width: 100%;
  }
}
.keyvisual .copy {
  position: absolute;
  bottom: 20px;
  left: 0;
  color: #fff;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.28rem;
  font-weight: 700;
}
.keyvisual div.bnr-box {
  position: absolute;
  bottom: 10px;
  right: 20px;
}

ul.bnr-box {
  text-align: center;
}
@media screen and (max-width: 599px) {
  ul.bnr-box li {
    margin-bottom: 5.333vw;
    width: 100%;
  }
  ul.bnr-box li img {
    width: 100%;
  }
  ul.bnr-box li:last-of-type {
    padding: 0 5.333vw;
  }
}

.logo-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  overflow: hidden;
}
@media screen and (max-width: 599px) {
  .logo-box {
    height: 14.667vw;
  }
}
.logo-box img {
  -webkit-animation: logoslide 30s infinite linear 1s both;
          animation: logoslide 30s infinite linear 1s both;
}
@media screen and (max-width: 599px) {
  .logo-box img {
    -webkit-animation: logoslide 20s infinite linear 1s both;
            animation: logoslide 20s infinite linear 1s both;
    height: 100%;
  }
}

@-webkit-keyframes logoslide {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes logoslide {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
.invoice-msg {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 30px auto 100px;
  padding: 30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  background: #fff5d1;
  border-radius: 8px;
  font-size: 2rem;
  font-weight: 400;
}
@media screen and (max-width: 599px) {
  .invoice-msg {
    margin: 8vw auto 26.667vw;
    display: block;
    padding-left: 24vw;
    width: 94%;
    font-size: 4.267vw;
    line-height: 1.8;
  }
}
.invoice-msg::before {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 30px;
  content: "";
  width: 50px;
  height: 53px;
  background: url(../img/top/icon_light.svg) top left/50px no-repeat;
}
.invoice-msg span {
  padding-top: 10px;
  margin-right: 5px;
}
.invoice-msg img {
  width: 175px;
}
@media screen and (max-width: 599px) {
  .invoice-msg img {
    vertical-align: bottom;
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    width: 32vw;
  }
}

/* ========================================================
動画でわかるCO-NECT
=========================================================*/
.bl1 {
  margin-bottom: 150px;
}
@media screen and (max-width: 599px) {
  .bl1 {
    margin-bottom: 26.667vw;
  }
}
.bl1 .inr-box {
  position: relative;
}
.bl1 .inr-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 96%;
  height: 80%;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(135deg, #d0faf7 0%, #b3e4e1 100%);
}
.bl1 .movie-box {
  position: relative;
  margin: 0 auto;
  padding-top: 38.5%;
  width: 100%;
  max-width: 1000px;
}
@media screen and (max-width: 599px) {
  .bl1 .movie-box {
    padding-top: 56.25%;
  }
}
.bl1 .movie-box iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/*=========================================================
CO-NECTのメリット
=========================================================*/
.bl2 {
  margin-bottom: 150px;
}
@media screen and (max-width: 599px) {
  .bl2 {
    margin-bottom: 38.4vw;
  }
}
.bl2 h2.tit-box .jp {
  top: 30%;
  left: 0;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
@media screen and (max-width: 599px) {
  .bl2 h2.tit-box .jp {
    top: 50%;
    left: 2%;
  }
}
.bl2 .inr-box li {
  position: relative;
  margin-bottom: 80px;
}
@media screen and (max-width: 599px) {
  .bl2 .inr-box li {
    margin-bottom: 10.667vw;
  }
}
.bl2 .inr-box li::after {
  position: absolute;
  content: "";
  bottom: 0;
  right: 0;
  z-index: -2;
  width: 50%;
  height: 260px;
  background: linear-gradient(135deg, #ffe89a 0%, #fff7cf 100%);
  border-radius: 8px 0 0 8px;
}
@media screen and (max-width: 599px) {
  .bl2 .inr-box li::after {
    width: 96%;
    height: 48vw;
  }
}
.bl2 .inr-box li:nth-of-type(even)::after {
  right: auto;
  left: 0;
  border-radius: 0 8px 8px 0;
}
.bl2 .inr-box li:nth-of-type(even) .txt-box {
  padding: 10px 10px 10px 80px;
}
@media screen and (max-width: 599px) {
  .bl2 .inr-box li:nth-of-type(even) .txt-box {
    line-height: 2;
  }
}
@media screen and (max-width: 599px) {
  .bl2 .inr-box li:nth-of-type(even) .txt-box {
    padding: 2.667vw 5.333vw;
  }
}
.bl2 .inr-box li:last-of-type::after {
  content: none;
}
.bl2 .inr-box .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}
@media screen and (max-width: 599px) {
  .bl2 .inr-box .box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media screen and (max-width: 599px) {
  .bl2 .inr-box .box.reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.bl2 .inr-box .box .txt-box {
  padding: 10px 20px;
  width: 50%;
}
@media screen and (max-width: 599px) {
  .bl2 .inr-box .box .txt-box {
    width: 100%;
  }
}
.bl2 .inr-box .box .txt-box h3.lead {
  margin-bottom: 20px;
  color: #3f4649;
  font-size: 3.68rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.5rem;
}
@media screen and (max-width: 599px) {
  .bl2 .inr-box .box .txt-box h3.lead {
    font-size: 5.547vw;
  }
}
.bl2 .inr-box .box .txt-box .txt {
  letter-spacing: 0.15rem;
}
@media screen and (max-width: 599px) {
  .bl2 .inr-box .box .txt-box .txt {
    font-size: 3.84vw;
  }
}
.bl2 .inr-box .box .img-box {
  width: 50%;
  line-height: 0;
}
@media screen and (max-width: 599px) {
  .bl2 .inr-box .box .img-box {
    width: 100%;
  }
}
.bl2 .inr-box .box .img-box img {
  width: 100%;
}
.bl2 .inr-box .box.-half {
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.bl2 .inr-box .box.-half > div > div {
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.bl2 .inr-box .box.-half > div .img-box {
  margin-bottom: 16px;
  width: 280px;
}
@media screen and (max-width: 599px) {
  .bl2 .inr-box .box.-half > div .img-box {
    width: 53.333vw;
  }
}
.bl2 .inr-box .box.-half > div .txt-box {
  width: 340px;
  font-weight: 700;
}
@media screen and (max-width: 599px) {
  .bl2 .inr-box .box.-half > div .txt-box {
    width: 90.667vw;
    font-size: 4.267vw;
  }
}
.bl2 .inr-box .box.-half .left {
  margin-right: 250px;
}
@media screen and (max-width: 599px) {
  .bl2 .inr-box .box.-half .left {
    margin-bottom: 8vw;
    margin-right: 0;
  }
}

/*=========================================================
発注の流れ
=========================================================*/
.bl3 {
  margin-bottom: 150px;
}
@media screen and (max-width: 599px) {
  .bl3 {
    margin-bottom: 26.667vw;
  }
}
@media screen and (max-width: 599px) {
  .bl3 h2.tit-box {
    margin-bottom: 8vw;
  }
}
.bl3 .inr-box {
  position: relative;
}
.bl3 .inr-box::after {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 95%;
  height: 100%;
  content: "";
  border-radius: 0 8px 8px 0;
  background: linear-gradient(135deg, #d0faf7 0%, #b3e4e1 100%);
}
.bl3 .inr-box .img-box {
  margin: 0 auto;
  width: 1200px;
}
@media screen and (max-width: 599px) {
  .bl3 .inr-box .img-box {
    width: 100%;
  }
}
.bl3 .inr-box .img-box img {
  padding: 60px;
  width: 100%;
}
@media screen and (max-width: 599px) {
  .bl3 .inr-box .img-box img {
    padding: 5.333vw;
  }
}

/*=========================================================
主な機能
=========================================================*/
.bl4 {
  margin-bottom: 150px;
}
@media screen and (max-width: 599px) {
  .bl4 {
    margin-bottom: 29.867vw;
  }
}
.bl4 h2.tit-box .en {
  position: absolute;
  right: 0;
}
.bl4 > .inr-box {
  position: relative;
}
.bl4 > .inr-box::after {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 95%;
  height: 100%;
  content: "";
  border-radius: 8px 0 0 8px;
  background: linear-gradient(135deg, #2ac7c1 0%, #07746e 100%);
}
.bl4 > .inr-box .slide-box {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  padding: 70px 0;
  width: 1080px;
}
@media screen and (max-width: 599px) {
  .bl4 > .inr-box .slide-box {
    padding: 5.333vw 0 13.333vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
  }
}
.bl4 > .inr-box .tab {
  width: 324px;
}
@media screen and (max-width: 599px) {
  .bl4 > .inr-box .tab {
    position: relative;
    width: 100%;
  }
}
.bl4 > .inr-box .tab li {
  padding: 20px 16px;
  margin-bottom: 3px;
  width: 80%;
  height: 110.25px;
  line-height: 1.6;
  color: #fff;
  background: #07746e;
  border-radius: 8px;
  letter-spacing: 0.2rem;
}
@media screen and (max-width: 599px) {
  .bl4 > .inr-box .tab li {
    position: absolute;
    top: 0;
    left: 52.5%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    margin-bottom: 18.667vw;
    padding: 1.6vw 4.267vw;
    width: 90% !important;
    height: 21.333vw;
    color: #07746e;
    background: #fff;
  }
}
@media screen and (max-width: 599px) and (max-width: 599px) {
  .bl4 > .inr-box .tab li p {
    color: #333;
    font-size: 4.267vw;
  }
}
.bl4 > .inr-box .tab li .step {
  font-weight: 800;
}
@media screen and (max-width: 599px) {
  .bl4 > .inr-box .tab li .step {
    font-size: 4.267vw;
  }
}
.bl4 > .inr-box .tab li .step span {
  font-size: 2.4rem;
}
@media screen and (max-width: 599px) {
  .bl4 > .inr-box .tab li .step span {
    font-size: 6.4vw;
  }
}
.bl4 > .inr-box .tab li.active {
  width: 85%;
  background: #fff;
  position: relative;
  margin-left: 0;
  color: #07746e;
}
@media screen and (max-width: 599px) {
  .bl4 > .inr-box .tab li.active {
    z-index: 200;
    width: 100%;
  }
}
.bl4 > .inr-box .tab li.active .step span {
  color: #333;
}
@media screen and (max-width: 599px) {
  .bl4 > .inr-box .tab li.active .step span {
    color: #07746e;
  }
}
.bl4 > .inr-box .tab li.active::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -16%;
  width: 13%;
  height: 10px;
  background: url("../img/top/img_bl7_active.png") no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 599px) {
  .bl4 > .inr-box .tab li.active::after {
    content: none;
  }
}
.bl4 > .inr-box .slide {
  position: absolute;
  top: 62px;
  left: 390px;
  width: 600px;
  height: 410px;
  overflow: hidden;
}
@media screen and (max-width: 599px) {
  .bl4 > .inr-box .slide {
    position: static;
    margin: 0 auto;
    width: 56.533vw;
    height: 50.667vw;
  }
}
.bl4 > .inr-box .slide .inr-box {
  width: 2400px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
@media screen and (max-width: 599px) {
  .bl4 > .inr-box .slide .inr-box {
    width: 226.132vw;
  }
}
.bl4 > .inr-box .slide .img-box {
  width: 600px;
  height: 100%;
}
@media screen and (max-width: 599px) {
  .bl4 > .inr-box .slide .img-box {
    width: 56.533vw;
  }
}
.bl4 > .inr-box .slide .img-box img {
  width: 600px;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
@media screen and (max-width: 599px) {
  .bl4 > .inr-box .slide .img-box img {
    width: 56.533vw;
  }
}
.bl4 > .inr-box .slide .img-box p {
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 599px) {
  .bl4 > .inr-box .slide .img-box p {
    font-size: 3.84vw;
  }
}

/*=========================================================
CO-NECTをさらに知る
=========================================================*/
.bl5 {
  margin-bottom: 150px;
}
.bl5 h2.tit-box {
  margin-bottom: 40px;
}
.bl5 h2.tit-box .jp {
  top: 30%;
  left: 0;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
@media screen and (max-width: 599px) {
  .bl5 h2.tit-box .jp {
    top: 50%;
    left: 2%;
  }
}
.bl5 .inr-box {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}
.bl5 .inr-box ul.list-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 599px) {
  .bl5 .inr-box ul.list-box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.bl5 .inr-box ul.list-box li {
  padding: 0 24px;
  width: 400px;
  text-align: center;
}
@media screen and (max-width: 599px) {
  .bl5 .inr-box ul.list-box li {
    margin-bottom: 16vw;
    padding: 0 5.333vw;
    width: 100%;
  }
  .bl5 .inr-box ul.list-box li:last-of-type {
    margin-bottom: 0;
  }
}
.bl5 .inr-box ul.list-box li .img-box {
  margin: 0 auto;
  width: 247px;
}
@media screen and (max-width: 599px) {
  .bl5 .inr-box ul.list-box li .img-box {
    margin-bottom: 2.667vw;
    width: 54.4vw;
  }
}
.bl5 .inr-box ul.list-box li .img-box img {
  width: 100%;
}
.bl5 .inr-box ul.list-box li .txt-box h3 {
  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;
  margin-bottom: 10px;
  height: 75px;
  font-size: 2rem;
  line-height: 1.6;
}
@media screen and (max-width: 599px) {
  .bl5 .inr-box ul.list-box li .txt-box h3 {
    font-size: 5.333vw;
    height: auto;
  }
}
.bl5 .inr-box ul.list-box li .txt-box .txt {
  line-height: 1.8;
  letter-spacing: 0.1rem;
}
@media screen and (max-width: 599px) {
  .bl5 .inr-box ul.list-box li .txt-box .txt {
    font-size: 3.84vw;
  }
}

/*=========================================================
ご利用業種
=========================================================*/
.bl6 {
  position: relative;
  margin-bottom: 150px;
}
.bl6::after {
  content: "";
  width: 70%;
  height: 94%;
  position: absolute;
  z-index: -1;
  top: -64px;
  left: 0;
  opacity: 0.5;
  background: url(../img/top/bgimg_bl6.png) top left/100% auto no-repeat;
  border-radius: 0 8px 8px 0;
}
@media screen and (max-width: 599px) {
  .bl6::after {
    background-size: auto 37%;
  }
}
.bl6 h2.tit-box {
  margin-bottom: 40px;
}
.bl6 h2.tit-box .en {
  position: absolute;
  right: 0;
}
.bl6 h2.tit-box .jp {
  top: 30%;
  right: 0;
  left: auto;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
@media screen and (max-width: 599px) {
  .bl6 h2.tit-box .jp {
    top: 50%;
    right: 2%;
  }
}
.bl6 .inr-box .list-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 599px) {
  .bl6 .inr-box .list-box {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 0 9.333vw;
  }
}
.bl6 .inr-box .list-box li {
  margin-right: 30px;
  width: 178px;
  text-align: center;
}
@media screen and (max-width: 599px) {
  .bl6 .inr-box .list-box li {
    margin-right: 0;
    width: 33.867vw;
  }
}
.bl6 .inr-box .list-box li:last-of-type {
  margin-right: 0;
}
.bl6 .inr-box .list-box li .img-box {
  margin-bottom: 20px;
}
.bl6 .inr-box .list-box li .txt {
  font-size: 2rem;
  font-weight: 700;
}
@media screen and (max-width: 599px) {
  .bl6 .inr-box .list-box li .txt {
    font-size: 5.333vw;
  }
}

/*=========================================================
受発注システムCO-NECT 導入事例
=========================================================*/
.bl7 {
  margin-bottom: 150px;
  position: relative;
}
@media screen and (max-width: 599px) {
  .bl7 {
    margin-bottom: 29.867vw;
  }
}
.bl7::after {
  content: "";
  position: absolute;
  top: -70px;
  right: 0;
  z-index: -1;
  width: 70%;
  height: 71%;
  opacity: 0.2;
  border-radius: 8px 0 0 8px;
  background-color: #2ac7c1;
}
@media screen and (max-width: 599px) {
  .bl7::after {
    top: -13.333vw;
    height: 76%;
  }
}
@media screen and (max-width: 599px) {
  .bl7 h2.tit-box {
    margin-bottom: 8vw;
  }
}
.bl7 h2.tit-box .jp {
  top: 30%;
  left: 0;
  right: auto;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
@media screen and (max-width: 599px) {
  .bl7 h2.tit-box .jp {
    top: 50%;
    right: 2%;
    left: auto;
    text-align: right;
  }
}
.bl7 .inr-box {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}
.bl7 .inr-box ul.list-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 599px) {
  .bl7 .inr-box ul.list-box {
    margin-bottom: 21.333vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.bl7 .inr-box ul.list-box > li {
  width: 356px;
}
@media screen and (max-width: 599px) {
  .bl7 .inr-box ul.list-box > li {
    margin: 0 auto 8vw;
    width: 78.667vw;
  }
  .bl7 .inr-box ul.list-box > li:last-of-type {
    margin-bottom: 0;
  }
}
.bl7 .inr-box ul.list-box > li a {
  position: relative;
}
.bl7 .inr-box ul.list-box > li a .type {
  position: absolute;
  top: 16px;
  right: 0;
  padding: 2px 15px;
  color: #fff;
  font-size: 1.2rem;
  background: #07746e;
}
.bl7 .inr-box ul.list-box > li a .img-box {
  width: 356px;
}
@media screen and (max-width: 599px) {
  .bl7 .inr-box ul.list-box > li a .img-box {
    margin-bottom: 2.133vw;
    width: 78.667vw;
  }
}
.bl7 .inr-box ul.list-box > li a .img-box img {
  width: 100%;
  border-radius: 8px;
}
.bl7 .inr-box ul.list-box > li a .cate-box {
  margin-bottom: 5px;
  line-height: 1.8;
}
.bl7 .inr-box ul.list-box > li a .cate-box li {
  display: inline;
  padding: 3px 16px;
  margin-right: 5px;
  font-size: 1.3rem;
  background: #18c1bb;
  color: #ffffff;
  border-radius: 13px;
  letter-spacing: 0.13em;
  white-space: nowrap;
  line-height: 26px;
}
.bl7 .inr-box ul.list-box > li a .txt-box h3.name {
  color: #07746e;
  font-size: 1.6rem;
}
@media screen and (max-width: 599px) {
  .bl7 .inr-box ul.list-box > li a .txt-box h3.name {
    font-size: 3.733vw;
  }
}
.bl7 .inr-box ul.list-box > li a .txt-box .txt {
  letter-spacing: 0.2rem;
  height: 135px;
}
@media screen and (max-width: 599px) {
  .bl7 .inr-box ul.list-box > li a .txt-box .txt {
    font-size: 3.733vw;
    height: auto;
  }
}
.bl7 .inr-box ul.list-box > li a .btn-more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  color: #07746e;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
}
@media screen and (max-width: 599px) {
  .bl7 .inr-box ul.list-box > li a .btn-more {
    font-size: 3.733vw;
  }
}
.bl7 .inr-box ul.list-box > li a .btn-more::after {
  margin-top: -4px;
  margin-left: 5px;
  content: "";
  width: 25px;
  height: 18px;
  background: url(../img/top/icon_arrow_g.svg) no-repeat;
  background-size: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/*=========================================================
料金プラン
=========================================================*/
.bl8 {
  margin-bottom: 150px;
}
@media screen and (max-width: 599px) {
  .bl8 {
    margin-bottom: 29.867vw;
  }
}
.bl8 h2.tit-box {
  margin-bottom: 40px;
}
.bl8 h2.tit-box .en {
  position: absolute;
  right: 0;
}
@media screen and (max-width: 599px) {
  .bl8 h2.tit-box .en {
    right: 2%;
  }
}
.bl8 .inr-box ul.list-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}
@media screen and (max-width: 599px) {
  .bl8 .inr-box ul.list-box {
    padding: 0 2.667vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.bl8 .inr-box ul.list-box > li {
  position: relative;
  width: 234px;
  background: #d0faf7;
  letter-spacing: 0.1rem;
}
@media screen and (max-width: 599px) {
  .bl8 .inr-box ul.list-box > li {
    margin-bottom: 1.333vw;
    width: 100%;
  }
  .bl8 .inr-box ul.list-box > li:last-of-type {
    margin-bottom: 0;
  }
}
.bl8 .inr-box ul.list-box > li:nth-of-type(even) {
  background: #e7fdfc;
}
.bl8 .inr-box ul.list-box > li:first-of-type {
  border-radius: 8px 0 0 8px;
}
@media screen and (max-width: 599px) {
  .bl8 .inr-box ul.list-box > li:first-of-type {
    border-radius: 2.133vw 2.133vw 0 0;
  }
}
.bl8 .inr-box ul.list-box > li:last-of-type {
  border-radius: 0 8px 8px 0;
}
@media screen and (max-width: 599px) {
  .bl8 .inr-box ul.list-box > li:last-of-type {
    border-radius: 0 0 2.133vw 2.133vw;
  }
}
.bl8 .inr-box ul.list-box > li .favorite-tag {
  position: absolute;
  top: -40px;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 10px 5px;
  width: 100%;
  height: 40px;
  background: #07746e;
  color: #ffffff;
  font-size: 1.4rem;
  border-radius: 8px 8px 0 0;
}
@media screen and (max-width: 599px) {
  .bl8 .inr-box ul.list-box > li .favorite-tag {
    position: static;
  }
}
.bl8 .inr-box ul.list-box > li h3.tit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 10px 20px;
  height: 70px;
  font-size: 1.6rem;
  font-weight: 700;
  border-bottom: 1px solid #bfe6e3;
}
@media screen and (max-width: 599px) {
  .bl8 .inr-box ul.list-box > li h3.tit {
    font-size: 4.267vw;
    height: 18.667vw;
  }
}
.bl8 .inr-box ul.list-box > li .cost {
  margin-bottom: 10px;
  padding: 4px;
  width: 100%;
  background: #07746e;
  color: #ffffff;
  font-size: 1.28rem;
  text-align: center;
}
@media screen and (max-width: 599px) {
  .bl8 .inr-box ul.list-box > li .cost {
    font-size: 3.413vw;
  }
}
.bl8 .inr-box ul.list-box > li .det {
  padding: 0 20px 8px 20px;
  width: 100%;
  font-size: 1.28rem;
}
@media screen and (max-width: 599px) {
  .bl8 .inr-box ul.list-box > li .det {
    font-size: 3.413vw;
  }
}
.bl8 .inr-box ul.list-box > li .det li {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 8px;
  padding-left: 23px;
  width: 194px;
  line-height: 1.8;
}
@media screen and (max-width: 599px) {
  .bl8 .inr-box ul.list-box > li .det li {
    font-size: 3.072vw;
    width: 100%;
  }
}
.bl8 .inr-box ul.list-box > li .det li::before {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  content: "";
  margin-right: 8px;
  width: 14px;
  height: 13px;
  background: #18c1bb;
  border-radius: 100px;
}
.bl8 .inr-box ul.list-box > li .txt {
  padding: 20px 20px 10px 20px;
  color: rgba(63, 70, 73, 0.8);
  font-size: 1.28rem;
  text-align: center;
  letter-spacing: 0.2rem;
}
@media screen and (max-width: 599px) {
  .bl8 .inr-box ul.list-box > li .txt {
    font-size: 3.413vw;
  }
}
.bl8 .inr-box ul.list-box > li .txt span {
  display: block;
  margin-bottom: 10px;
  color: #07746e;
  font-size: 2.4rem;
  font-weight: 700;
}
.bl8 .inr-box .btn-box.green {
  margin-top: 60px;
}

/*=========================================================
 よくある質問
=========================================================*/
.bl9 {
  margin-bottom: 150px;
}
@media screen and (max-width: 599px) {
  .bl9 {
    margin-bottom: 29.867vw;
  }
}
.bl9 h2.tit-box {
  padding-bottom: 30px;
  border-bottom: 1px solid #000;
}
@media screen and (max-width: 599px) {
  .bl9 h2.tit-box {
    margin-bottom: 0;
    width: 94%;
  }
}
.bl9 h2.tit-box .jp {
  top: 50%;
}
.bl9 .inr-box .faq-list {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}
@media screen and (max-width: 599px) {
  .bl9 .inr-box .faq-list {
    padding: 0 2.667vw;
    width: 94%;
  }
}
.bl9 .inr-box .faq-list dl {
  padding-top: 30px;
  border-bottom: 1px solid #ebecec;
}
@media screen and (max-width: 599px) {
  .bl9 .inr-box .faq-list dl {
    padding-top: 8vw;
  }
}
.bl9 .inr-box .faq-list dl dt {
  margin-bottom: 30px;
  position: relative;
  padding: 0 50px 0 45px;
  font-size: 1.76rem;
  font-weight: 700;
  line-height: 1.8;
}
@media screen and (max-width: 599px) {
  .bl9 .inr-box .faq-list dl dt {
    font-size: 4.693vw;
  }
}
.bl9 .inr-box .faq-list dl dt::before {
  position: absolute;
  top: 55%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  content: "Q";
  display: block;
  margin-right: 20px;
  color: #07746e;
  font-family: "Josefin Sans", sans-serif;
  font-size: 3.6rem;
  font-weight: 700;
}
@media screen and (max-width: 599px) {
  .bl9 .inr-box .faq-list dl dt::before {
    top: -2.667vw;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.bl9 .inr-box .faq-list dl dt::after {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url(../img/top/icon_plus_g.svg) left top/24px no-repeat;
}
.bl9 .inr-box .faq-list dl dd {
  position: relative;
  padding: 0 50px 20px 45px;
}
@media screen and (max-width: 599px) {
  .bl9 .inr-box .faq-list dl dd {
    font-size: 3.84vw;
    line-height: 1.8;
  }
}
.bl9 .inr-box .faq-list dl dd::before {
  position: absolute;
  top: 40%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 3px;
  content: "A";
  display: block;
  margin-right: 20px;
  color: #0064da;
  font-family: "Josefin Sans", sans-serif;
  font-size: 3.6rem;
  font-weight: 700;
}
@media screen and (max-width: 599px) {
  .bl9 .inr-box .faq-list dl dd::before {
    top: -2.667vw;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.bl9 .inr-box .faq-list dl:first-of-type {
  padding-top: 20px;
}
.bl9 .inr-box .faq-list dl:last-of-type {
  border: none;
}

/*=========================================================
お知らせ
=========================================================*/
.bl10 {
  margin-bottom: 150px;
}
@media screen and (max-width: 599px) {
  .bl10 {
    margin-bottom: 29.867vw;
  }
}
.bl10 h2.tit-box {
  margin-bottom: 20px;
}
.bl10 h2.tit-box .en {
  position: absolute;
  right: 0;
}
.bl10 h2.tit-box .jp {
  top: 30%;
  right: 0;
  left: auto;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.bl10 .inr-box .news-list {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  border-top: 1px solid #ebecec;
  border-bottom: 1px solid #ebecec;
}
.bl10 .inr-box .news-list li {
  border-bottom: 1px solid #ebecec;
}
.bl10 .inr-box .news-list li:last-of-type {
  border: none;
}
.bl10 .inr-box .news-list li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 30px 20px;
}
@media screen and (max-width: 599px) {
  .bl10 .inr-box .news-list li a {
    display: block;
  }
}
.bl10 .inr-box .news-list li a .date {
  margin-right: 8px;
  color: #07746e;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 2.4;
}
@media screen and (max-width: 599px) {
  .bl10 .inr-box .news-list li a .date {
    font-size: 3.733vw;
  }
}
.bl10 .inr-box .news-list li a .cate {
  margin: 0 15px 3px 0;
  padding: 0 16px;
  width: 90px;
  font-size: 1.3rem;
  background: #18c1bb;
  color: #fff;
  border-radius: 100px;
  letter-spacing: 0.1rem;
  line-height: 28px;
}
@media screen and (max-width: 599px) {
  .bl10 .inr-box .news-list li a .cate {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    line-height: 6.133vw;
    font-size: 3.467vw;
    width: 24vw;
    text-align: center;
  }
}
.bl10 .inr-box .news-list li a .txt {
  letter-spacing: 2px;
}
@media screen and (max-width: 599px) {
  .bl10 .inr-box .news-list li a .txt {
    font-size: 3.456vw;
    line-height: 1.8;
  }
}
.bl10 .inr-box .btn-box.green {
  margin-top: 10.667vw;
}

/*=========================================================
フッタービジュアル
=========================================================*/
.foot-visial {
  height: 600px;
  background: linear-gradient(to top, #076a65, #118d88 150px, #21a19c 150px, #2ac6c0);
}
@media screen and (max-width: 599px) {
  .foot-visial {
    height: auto;
    background: -webkit-gradient(linear, left bottom, left top, from(#076a65), color-stop(66.667vw, #118d88), color-stop(66.667vw, #21a19c), to(#2ac6c0));
    background: linear-gradient(to top, #076a65, #118d88 66.667vw, #21a19c 66.667vw, #2ac6c0);
  }
}
.foot-visial .inr-box {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}
.foot-visial .visual-box {
  padding: 75px 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 540px;
}
@media screen and (max-width: 599px) {
  .foot-visial .visual-box {
    position: relative;
    display: block;
    padding: 13.333vw 5.333vw 0;
    height: 144vw;
  }
  .foot-visial .visual-box::after {
    content: "";
    position: absolute;
    bottom: 42.4vw;
    left: 0;
    z-index: 1;
    width: 90.667vw;
    height: 32vw;
    background: url(../img/top/bgimg_kv.png) top left repeat-x;
    background-size: 46.4vw;
  }
}
.foot-visial .txt-box {
  margin-right: 30px;
  color: #fff;
}
@media screen and (max-width: 599px) {
  .foot-visial .txt-box {
    margin-right: 0;
  }
}
.foot-visial .txt-box h2.tit {
  margin-bottom: 35px;
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: 0.2rem;
}
@media screen and (max-width: 599px) {
  .foot-visial .txt-box h2.tit {
    margin-bottom: 0;
    font-size: 5.867vw;
  }
}
.foot-visial .txt-box .btn-container {
  position: relative;
  z-index: 100;
}
@media screen and (max-width: 599px) {
  .foot-visial .txt-box .btn-container p {
    width: 46.933vw;
    text-align: center;
  }
}
.foot-visial .txt-box .btn-box-visual a {
  margin-bottom: 30px;
  width: 259px;
}
@media screen and (max-width: 599px) {
  .foot-visial .txt-box .btn-box-visual a {
    width: 46.933vw;
  }
}
.foot-visial .txt-box .prize {
  width: 270px;
}
@media screen and (max-width: 599px) {
  .foot-visial .txt-box .prize {
    position: absolute;
    bottom: 10.667vw;
    right: 20%;
    z-index: 200;
    width: 61.333vw;
  }
}
.foot-visial .txt-box .prize img {
  width: 100%;
}
.foot-visial .img-box {
  position: relative;
  padding-top: 65px;
  width: 360px;
}
@media screen and (max-width: 599px) {
  .foot-visial .img-box {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40vw;
  }
}
.foot-visial .img-box img {
  position: relative;
  z-index: 100;
  width: 100%;
}
.foot-visial .img-box::after {
  content: "";
  position: absolute;
  bottom: 89px;
  right: -150px;
  z-index: 10;
  width: 220px;
  height: 150px;
  background: url(../img/top/bgimg_kv.png) top left/220px no-repeat;
}
@media screen and (max-width: 599px) {
  .foot-visial .img-box::after {
    content: none;
  }
}
.foot-visial .attention {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
}
@media screen and (max-width: 599px) {
  .foot-visial .attention {
    padding: 0 5.333vw 8vw;
  }
}

/*#########################################################

TOP共通パーツ

#########################################################*/
h2.tit-box {
  position: relative;
  margin: 0 auto 20px;
  width: 1200px;
  height: 96px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 599px) {
  h2.tit-box {
    margin-bottom: 5.333vw;
    padding: 0 2.667vw;
    width: 100%;
    height: 17.067vw;
  }
}
h2.tit-box .en {
  font-weight: 700;
  display: block;
  font-family: "Josefin Sans", sans-serif;
  color: #3f4649;
  color: rgba(64, 70, 75, 0.1);
  font-size: 13rem;
  letter-spacing: 2.5rem;
}
@media screen and (max-width: 599px) {
  h2.tit-box .en {
    font-size: 16vw;
    letter-spacing: 2.133vw;
  }
}
h2.tit-box .jp {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: block;
  font-size: 2.9rem;
  font-weight: 900;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.5rem;
  color: #07746e;
  text-align: center;
}
@media screen and (max-width: 599px) {
  h2.tit-box .jp {
    top: 70%;
    font-size: 5.973vw;
    white-space: nowrap;
  }
}

.btn-container {
  width: 280px;
}
.btn-container > p {
  margin: 0;
  font-size: 1.3rem;
  text-align: center;
}
@media screen and (max-width: 599px) {
  .btn-container > p {
    text-align: left;
    font-size: 2.933vw;
  }
}
.btn-container .btn-box-visual a {
  position: relative;
  display: block;
  margin-bottom: 10px;
  width: 277px;
  height: 60px;
  line-height: 60px;
  color: #07746e;
  font-size: 1.8rem;
  font-weight: 400;
  text-align: center;
  background: #fff;
  border-radius: 100px;
}
@media screen and (max-width: 599px) {
  .btn-container .btn-box-visual a {
    width: 49.333vw;
    height: 12vw;
    line-height: 12vw;
    font-size: 3.467vw;
  }
}
.btn-container .btn-box-visual a::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: -25px;
  display: block;
  width: 40px;
  height: 10px;
  background: url(../img/top/icon_arrow_lg.svg) top left/40px no-repeat;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.btn-container .btn-box-visual a:hover::after {
  right: -35px;
}
.btn-container .btn-box-visual a.sml {
  width: 165px;
  height: 37px;
  line-height: 37px;
  font-size: 1.3rem;
  background: #b3e4e1;
}
@media screen and (max-width: 599px) {
  .btn-container .btn-box-visual a.sml {
    width: 40vw;
  }
}
.btn-container .btn-box-visual a.sml::after {
  background-image: url(../img/top/icon_arrow_wh.svg);
}

.btn-box.green {
  margin-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 599px) {
  .btn-box.green {
    margin-top: 8vw;
  }
}
.btn-box.green a {
  position: relative;
  padding: 8px 28px 6px 28px;
  background: #07746e;
  color: #ffffff;
  cursor: pointer;
  width: 200px;
  font-size: 1.3rem;
  text-align: center;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border-radius: 100px;
}
@media screen and (max-width: 599px) {
  .btn-box.green a {
    padding: 4vw 7.467vw;
    width: 53.333vw;
    font-size: 3.467vw;
  }
}
.btn-box.green a::after {
  background: url(../img/top/icon_arrow_lg.svg) no-repeat;
  content: "";
  width: 40px;
  height: 10px;
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: -25px;
  z-index: 1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.btn-box.green a:hover::after {
  right: -35px;
}



/* 簡易ページ-------
------------------------ */


.sec_ttl{
  font-size: 25px;
  margin-bottom: 10px;
  text-align: left;
  line-height: 1.6;
}
.sec01.main_sec .sec_ttl {
  font-size: 36px;
  text-align: center;
  margin-bottom: 30px;
}
@media screen and (max-width: 900px) {
  .sec01.main_sec .sec_ttl {
    /* font-size: 20px; */
    font-size: 19px;
    margin-bottom: 23px;
    line-height: 1.8;
  }
}
.sec01_texts-sub {
  font-size: 19px;
  text-align: center;
  margin-bottom: 45px;
}
@media screen and (max-width: 900px) {
  .sec01_texts-sub {
    font-size: 14px;
    margin-bottom: 34px;
    text-align: left;
  }
}
.top_sec01_box {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 900px) {
  .top_sec01_box {
    display: block;
  }
}
.top_sec01_textarea {
  width: 55%;
  padding-top: 10px;
}
@media screen and (max-width: 900px) {
  .top_sec01_textarea {
    width: 100%;
  }
}
.top_sec01_textarea h3 {
  font-size: 20px;
  margin-bottom: 25px;
}
@media screen and (max-width: 900px) {
  .top_sec01_textarea h3 {
    font-size: 16px;
    /* line-height: 1.6; */
    line-height: 2;
    /* margin-bottom: 20px; */
    margin-bottom: 15px;
  }
}
.sec_subttl{
  text-align: center;
}
.sec_item{
  margin-bottom: 60px;
}
.sec03 .sec_item {
  /* margin-bottom: 50px; */
  margin-bottom: 45px;
}
@media screen and (max-width: 900px) {
  .sec03 .sec_item {
    margin-bottom: 38px;
  }
}
.sec03 .sec_item.last {
  margin-bottom: 0;
}
.inner{
  /* max-width: 1200px; */
  margin: 0 auto;
  text-align: center;
}
#toc01 .inner {
  max-width: 1200px;
}
.sec03.main_sec .inner {
  max-width: 1200px;
}
@media screen and (max-width: 599px) {
  .sec03.main_sec .inner {
    width: 90.4vw;
    margin: 0 auto;
  }
}
.sec04.main_sec .inner {
  max-width: 1200px;
}
@media screen and (max-width: 599px) {
  .sec04.main_sec .inner {
    width: 90.4vw;
    margin: 0 auto;
  }
}
.top_sec18 .inner {
  max-width: 1200px;
}
.top_sec20 .inner {
  max-width: 1200px;
}
.top_sec21 .inner {
  max-width: 1200px;
}
.top_sec15 .inner {
  max-width: 1200px;
}
#toc02 .inner {
  max-width: 1200px;
}
#toc03 .inner {
  max-width: 1200px;
}
#toc04 .inner {
  max-width: 1200px;
}
#toc05 .inner {
  max-width: 1200px;
}
.category1 .inner {
  max-width: 1200px;
}
.category.main_sec .inner {
  max-width: 1200px;
}
.colum.main_sec .inner {
  max-width: 1200px;
}
@media screen and (max-width: 599px) {
  .colum.main_sec .inner {
    width: 90.4vw;
    margin: 0 auto;
    /* padding: 77px 0 0; */
    padding: 58px 0 0;
  }
}
.inner .top_sec02_notion.top {
  text-align: left;
}
.inner .top_sec18_box .top_sec18_ttl01 {
  text-align: left;
}
.inner .top_sec21_box_textarea {
  text-align: left;
}
.main_sec{
  /* margin: 84px 30px 0; */
  margin: 74px 30px 0;
}
@media screen and (max-width: 599px) {
  .sec07.main_sec{
    margin: 0 auto;
  }
}
.sec01.main_sec{
  margin: 69px 30px 0;
}
@media screen and (max-width: 599px) {
  .sec01.main_sec{
    width: 90.4vw;
    /* margin: 69px auto 0; */
    margin: 48px auto 0;
  }
}
.sec03.main_sec{
  /* padding: 77px 30px 50px; */
  padding: 77px 30px 45px;
  margin: 0;
  background: #EEEEEE;
}
@media screen and (max-width: 599px) {
  .sec03.main_sec{
    /* padding: 77px 0 45px; */
    padding: 58px 0 45px;
  }
}
.sec04.main_sec{
  margin: 0;
  /* padding: 77px 30px 1px; */
  padding: 77px 30px 9px;
  background: #FFF9BF;
}
.category.main_sec{
  margin: 77px 30px 0;
}
.item_text{
  font-size: 16px;
  text-align: left;
}
@media screen and (max-width: 599px) {
  .item_text{
    font-size: 14px;
  }
  .sec04.main_sec{
    /* padding: 69px 30px 30px; */
    /* padding: 69px 0 30px; */
    padding: 48px 0 45px;
  }
}
.item_ttl{
  font-size: 20px;
  text-align: left;
  margin-bottom: 6px;
}
.item_texts{
  margin-bottom: 30px;
}
/* sec01------- */
.sec01 .inner{
    /* display: flex;
    justify-content: space-between; */
    max-width: 1200px;
}
@media screen and (max-width: 900px) {
  .sec01 .inner{
    display: block;
  }
}
.sec01_texts{
    /* width: 60%; */
    width: 100%;
    text-align: left;
}
@media screen and (max-width: 900px) {
  .sec01_texts{
    width: 100%;
  }
}
.sec01_img img{
    width: 100%;
    height: auto;
    padding-top: 28px;
}

/* sec02------- */



.sec02_item{
    width: 30%;
    margin: 0 50px;
    text-align: left;
}
.sec02_item_img{
  width: 100%;
  height: auto;
  margin-top: 30px;
}
/* sec03------ */

.sec03_item{
    margin-bottom: 80px;
}
.sec03_item01{
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
}
.sec03_item01,
.sec03_item02 {
  gap: 0 10px;
} 

@media screen and (max-width: 900px){
  .sec03_item01{
    display: block;
  }
}
.sec03_item02{
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 900px){
  .sec03_item02{
    display: block;
  }
}
.sec03_item_img{
  margin-top: 20px;
}
@media screen and (max-width: 900px){
  .sec03_item_img{
    /* margin-bottom: 5px; */
    margin-bottom: 10px;
  }
}
.sec03_item_img img{
    width: 100%;
    height: auto;
}
.sec03_item_texts{
  width: 60%;
    text-align: left;
    padding: 10px 30px;
}
@media screen and (max-width: 900px){
  .sec03_item_texts{
    width: 100%;
    padding: 0;
  }
  .sec03_item_texts h3 {
    font-size: 17px;
    margin-bottom: 9px;
  }
}

/* sec04------ */

.sec04 .sec_item{
  display: flex;
  justify-content: space-around;
  /* justify-content: space-between; */
  /* margin: 30px 0 60px; */
  /* margin: 35px 37px 69px; */
  /* margin: 30px 37px 61px; */
  margin: 30px 37px 53px;
  background: #fff;
}
@media screen and (max-width: 900px){
  .sec04 .sec_item{
    display: block;
    margin: 0;
  }
}
.sec04_item_texts{
  width: 50%;
  text-align: left;
}
.sec04_item_texts p {
  margin-bottom: 0;
}
@media screen and (max-width: 900px){
  .sec04_item_texts{
    width: 100%;
  }
}
.sec04_item_img{
  width: 40%;
}
@media screen and (max-width: 900px){
  .sec04_item_img{
    width: 100%;
    margin-top: 25px;
  }
}
.sec04_item_img img{
  max-width: 100%;
  height: auto;
}

/* merit------ */
.merit.main_sec {
  /* background-color: #f4f4f4; */
  background-color: #fff;
  /* padding: 84px 30px 0; */
  padding: 77px 30px 0;
  margin: 0;
}

.merit.main_sec.merit-white {
  background-color: unset;
}

.merit_item_img{
  width:100%;
  height: auto;
  margin: 30px auto;
}

@media screen and (max-width: 599px){
  .merit_item_img img{
    width:100%;
  }
}

/* colum------ */
.colum.main_sec {
  /* background-color: #f4f4f4; */
  background-color: #EEEEEE;
  /* padding: 84px 30px 0; */
  padding: 77px 30px 0;
  margin: 0;
}
@media screen and (max-width: 599px) {
  .colum.main_sec {
    /* padding: 77px 0 0; */
    padding: 0;
  }
}

.colum .sec_item{
  display: flex;
  justify-content: space-around;
  margin-bottom: 60px;
}
@media screen and (max-width: 900px){
  .colum .sec_item{
    display: block;
  }
}
.colum_item_texts{
  width: 60%;
  text-align: left;
}
@media screen and (max-width: 900px){
  .colum_item_texts{
    width: 100%;
  }
}
.colum_item_img{
  width: 40%;
}
@media screen and (max-width: 900px){
  .colum_item_img{
    width: 100%;
  }
}
.colum_item_img img{
  max-width: 100%;
  height: auto;
}

/* sec05------ */

.sec05 ul{
    width: 70%;
    margin: 0 auto;
    text-align: left;
}
@media screen and (max-width: 900px){
  .sec05 ul{
    width: 100%;
  }
}
.sec05 li{
    margin-bottom: 50px;
}
.question{
    margin-bottom: 12px;
    border-bottom: 1px solid #c2c2c2;
}

/* sec07 ------*/

.sec07 .inner{
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}
@media screen and (max-width: 599px) {
  .sec07 .inner{
    width: 90.4vw;
    margin: 51px auto 0;
  }
}
.news{
  /* width: 70%; */
  width: 100%;
  margin: 0 auto;
}
.sec07_link_btn {
  text-align: right;
  margin-top: 16px;
}
.sec07_link_btn a {
  text-decoration: underline;
}

@media screen and (max-width: 900px){
  .news{
    width: 100%;
  }
  .sec07_link_btn a {
    font-size: 13px;
  }
}
/* .news_item {
    display: flex;
    margin-bottom: 0;
    border-bottom: 1px solid #eeeeee;
    padding: 14px 10px 4px 0;
} */
.news_item a {
  display: flex;
  margin-bottom: 0;
  border-bottom: 1px solid #eeeeee;
  padding: 14px 10px 4px 0;
  width: 100%;
}
.news_day {
    /* padding-right: 20px; */
    margin-right: 32px;
    /* width: 20%; */
    width: 18%;
    margin-bottom: 0;
}
.recommend{
  text-align: center;
}
.news .sec_ttl{
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 900px){
  .news .sec_ttl{
    font-size: 17px;
  }
}


/* youtube */

@media screen and (max-width: 900px){
  .movie_box{
    margin: 48px auto 0;
  }
}
.movie_box iframe{
  width: 100%;
  height: 100%;
  border-style: none !important;
}
.sec_ttl.movie{
  text-align: center;
  font-size: 36px;
}

@media screen and (max-width: 768px){
.news_item a {
  display: block;
  margin-bottom: 0;
  border-bottom: 1px solid #eeeeee;
  padding: 14px 10px 4px 0;
}
.news_day{
  margin-bottom: 0;
  width: 100%;
}
.news_text{
  padding-left: 0;
}
}
/* category---- */
.category.main_sec.category1 {
  background-color: #f4f4f4;
  /* padding: 84px 30px 0; */
  padding: 69px 30px 0;
  margin: 0;
}
.h2-style.category1-first {
  margin-bottom: 90px;
}

.category{
  /* text-align: center; */
  margin-bottom: 80px;
}

.cate_item_img{
  width: 100%;
  height: auto;
  margin: 30px 0;
}

@media screen and (max-width: 599px){
  .cate_item_img img{
    width:100%;
  }
}
.brsma {
  display: none;
}
@media screen and (max-width: 600px){
  .brsma {
    display: block;
  }
}
.smanone {
  display: block;
}
@media screen and (max-width: 600px){
  .smanone {
    display: none;
  }
}