/*===============================================
		CompreView 製品サイト
		デザインCSS(カスケードスタイルシート)
================================================*/
/* Bodyタグ */
body {
  margin: 0px; /* Bodyタグ自体にマージンがあるので削除*/
  overflow-x: hidden;	/*自動で横スクロールが入るので横スクロールを削除*/
}
/* CompreViewロゴ + go liveエリア */
/* 背景イメージ表示用Class*/
.bg-Top {
  background-image: url("../images/cv_commingsoon1.jpg");		/* 背景画像の指定 */
  background-repeat: no-repeat; /*背景画像を繰り返さないよう指定*/
  /*background-size: 100%;*/ /*背景画像のサイズ指定*/
  background-size:100% 970px;
  height: 970px;		/* 高さを背景の画像の高さラインに合わせて設定 (4Kモニタは下で指定)*/
}
/* Go liveのキャッチを入れるdiv要素　*/
.message {
  position: absolute;   /* 要素の位置を絶対値で指定 */
  top: 40%;				/* 上から画面サイズの40%の位置 */
  left: 0%;				/* 左端に配置 */
}
/* Go liveのキャッチのイメージ画像のサイズ　*/
.message img {
  /*width: 70vw;*/
  width: 100vw;			/* 画面サイズいっぱい*/
}

/* Comming soon表示時に使用　-- 削除 */
/*
.comingsoon {
  position: absolute;
  bottom: 5%;
  right: 3%;
}
.comingsoon img {
  width: 25vw;
}
*/
/* セカンドセクション 「こんなお悩みありませんか?」*/
/* 背景イメージ表示用Class*/
.bg-second {
  background-image: url("../images/cv_middle.png");
  background-repeat: no-repeat; /*背景画像を繰り返さないよう指定*/
  background-size: 100% 1180px; /*背景画像のサイズ指定*/
  /*  height: 120vh;*/
  height: 1180px;
  padding-top: 17vh;
  text-align: center;
}
/* キャッチ１　
　日々の業務に欠かせないMicrosoft 365。
多機能で奥深い。その一方で、*/
.middle-msg-1 {
  font-family: Arial, Helvetica, "sans-serif";
  color: white;
  font-size: 1.8rem;
}

/*キャッチ2 
こんなお悩みはありませんか？*/
.middle-msg-2 {
  font-family: Arial, Helvetica, "sans-serif";
  color: white;
  padding-top: 1%;
  font-size: 2.8rem;
}
.middle-msg-2-line {
  border-bottom-color: #ffffff;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  width: 35vw;
}
.bg-third {
  height: 250px;
  background: #000C50;
}
.third-logo {
  font-family: Arial, Helvetica, "sans-serif";
  color: white;
  font-size: 3.0rem;
  padding-top: 4vh;
  text-align: center;
}
.third-msg {
  font-family: Arial, Helvetica, "sans-serif";
  color: white;
  font-size: 3.0rem;
  padding-top: 1vh;
  text-align: center;
}
.middle-msg-3-line {
  border-bottom-color: #ffffff;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  width: 300px;
  margin-right: 8vw;
}
/* 機能説明エリア */
.bg-fourth {
  background-image: url("../images/fourth-bg.png");
  background-repeat: no-repeat; /*背景画像を繰り返さないよう指定*/
  background-size: 100%; /*背景画像のサイズ指定*/
  height: 298vh;
}
/* Middle Area  */
.middle-body {
  height: 780px;
}
/* サイドボタンデザイン */
.side-frame {
  width: 13.5vw;
  height: 135px;
  /*  background: rgba(255, 255, 255, 0.7);*/
  border-radius: 18px 0px 0px 18px;
}
.side-frame.active {
  background: rgba(255, 255, 255, 0.6);

}
.side-frame.active button {
  font-weight: 500;
  color:#000000;
  border-color:#000000;
  border-width:3px;
}
.side-frame button {
  width: 12vw;
  height: 120px;
  margin: 7px;
  background-color: transparent;
  font-size: 1.3rem;
  border-radius: 15px;
  border-width: 1.5px;
}
.side-frame button:hover {
    color: #000000;
    background-color: #ffffff;
    border-color: #000000;
}
.msg-area-base {
  width: 61vw;
  height: 710px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  display: flex;
  justify-content: center; /* 横方向の中央揃え */
  align-items: center; /* 縦方向の中央揃え */
  margin-top:1.3rem;
}
/* 説明BOX */
.msg-area {
  width: 60vw;
  height: 690px;
  background-color: #FFFFFF;
  background-repeat: no-repeat; /*背景画像を繰り返さないよう指定*/
  background-size: contain;
  background-image: url("../images/compreview_Method_bg.jpg");
  background-position: center center;
  border-radius: 15px;
}
.msgBox {
  border: solid;
  border-radius: 15px;
  border-color: black;
  border-width: 3px;
  height: 690px;
  box-shadow: 0 0 200px rgba(255, 255, 255, 0.9); /* ぼかしの影 */
  cursor: pointer;
  border-radius: 15px;
  justify-content: center; /* 横方向の中央揃え */
  align-items: center; /* 縦方向の中央揃え */
  background-color:rgba(255,255,255,0.7);
/*	background-color:rgba(255,255,255,0.3);*/
}
.msgArea {
	width: 55vw;
	color:#000000;
	font-size: 2.3rem;
	margin-top: 30px;
  align-items: center; /* 縦方向の中央揃え */
}
.msg2 {
	color:#000000;
	font-size: 2.3rem;
	margin-top: 100px;
  align-items: center; /* 縦方向の中央揃え */
}
.subTitle{
	font-size: 2.1rem;
	font-weight: 500;
	margin-bottom: 25px;
}
.detail{
	font-size: 1.4rem;
	margin-bottom: 25px;
}
.msgBox.f-2 {
  font-size: 2rem;
}
/* Forth Area*/
/* メッセージエリアの表示内容非表示のためのcss */
.non-display {
  display: none !important;
}
.fourth-top-area {
  padding-left: 15vw;
  padding-top: 8vh;
  height: 13vh;
}
.fourth-top-area.msg {
  font-family: Arial, Helvetica, "sans-serif";
  color: #000000;
  font-size: 2.4rem;
}
.fourth-top-area .line {
  border-bottom-color: #000000;
  border-bottom-width: 1.5px;
  border-bottom-style: solid;
  width: 75vw;
  margin-left: -2vw;
}
.fourth-middle-map {
  height: 60vh;
  display: flex;
  justify-content: center; /* 横方向の中央揃え */
  align-items: center; /* 縦方向の中央揃え */
}
.fourth-middle-map img {
  width: 70vw;
}
.rings {
  width: 80vw;
  height: 50vh;
  background-image: url("../images/rings.png");
  background-repeat: no-repeat; /*背景画像を繰り返さないよう指定*/
  background-size: contain;
}
.rings .message-area {
  font-size: 1.5rem;
  justify-content: space-between;
}
.ring {
  width: 23vw;
  height: 33vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 上下に分ける */
  text-align: center;
  padding-top: 8vh; /* 上下の余白（任意） */
  /*align-content: center;*/
}
.left-ring {
  padding-left: 6vw;
  margin-top:15px;
}
.center-ring {

}
.right-ring {
  padding-right: 6vw;

}
.right-ring .title {
  font-size: 1.9rem;
}
.right-ring .bottom-text {
  margin-top: 1vh;
  font-size: 1.4rem;
}
.fifth-top-area {
  padding-left: 17vw;
  padding-top: 11vh;
  height: 65vh;
}
.fifth-top-area.msg {
  font-family: Arial, Helvetica, "sans-serif";
  color: #000000;
  font-size: 2.4rem;
}
.fifth-top-area .line {
  border-bottom-color: #000000;
  border-bottom-width: 1.5px;
  border-bottom-style: solid;
  width: 75vw;
  margin-left: -3vw;
}
.title {
  height: 15vh;
  font-size: 2.1rem;
  font-weight: 500;
  align-content: center;
}
.title-type {
  margin-top: 4vh;
  font-size: 1.8rem;
}
.sub-title-area {
  /*	margin-top: 4vh;*/
  margin-left: 3vw;
}
.sub-title-area .line2 {
  border-bottom-color: #000000;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  width: 75vw;
}
.sub-title {
  font-size: 3.5rem;
  font-family: Baskerville;
  margin-top: 10px;
}
.price-container {
  display: flex;
  align-items: flex-end;
  height: 80px;
  gap: 1rem; /* 適宜調整 */
  font-size: 2.8rem; /* 必要に応じて調整 */
  margin-left: 17vw;
  margin-top: 5vh;
  margin-bottom: 2vh;
  font-size: 4.0rem;
}
.price-container span {
  line-height: 1;
}
.price-container .yen {
  margin-bottom: 8px;
}
.price-container .amount {
  font-size: 6rem;
}
.price-container .separator {
  font-size: 4rem;
	margin-bottom: 13px;
}
.price-container .frequency {
  font-size: 2.5rem;
  ;
}
.caution {
  font-size: 1.2rem;
  text-align: center;
}
.field-bottom {
  height: 35vh;
  background-color: #000C50;
  text-align: center;
  align-content: center;
  color: white;
}
.field-bottom .main {
  font-size: 2rem;
  margin-top: -2vh;
}
.field-bottom .contact {
  text-align: end;
  font-size: 2.5rem;
  width: 100vw;
  margin-top: 3vh;
  margin-left: -18vw;
}
.field-bottom .contact a {
  color: white;
}
/*  */
.field-bottom .contact2 {
  text-align: end;
  font-size: 2.5rem;
  width: 100vw;
  margin-top: 1vh;
  margin-left: -20vw;
}
.field-bottom .contact2 a {
  color: white;
}
@media screen and (min-width : 2000px) {
  .bg-Top {
  background-size:100% 1300px;  
    height: 1300px;
  }
  .bg-second {
  background-size: 100% 120vh; /*背景画像のサイズ指定*/  
    height: 120vh;
  }
	.bg-fourth {
	  height: 290vh;
	}	
	.title {
	  font-size: 2.8rem;
	  font-weight: 500;
	}
	.right-ring .title {
	  font-size: 2.1rem;
	}
.subTitle{
	font-size: 2.6rem;
	margin-bottom: 25px;
}
.detail{
	font-size: 1.7rem;
	margin-bottom: 25px;
}
.msgArea {
	margin-top: 30px;
}
.middle-msg-3-line {
  border-bottom-color: #ffffff;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  width: 300px;
  margin-right: 6vw;
}	
}

@media screen and (min-width :1400px) and (max-width:1550px){
	.subTitle{
	font-size: 1.3rem;
		font-weight: 800;
	margin-bottom: 25px;
}
.detail{
	font-size: 1.2rem;
	margin-bottom: 25px;
}
	/* サイドボタンデザイン */
.side-frame {
  width: 13.5vw;
  height: 135px;
  /*  background: rgba(255, 255, 255, 0.7);*/
  border-radius: 18px 0px 0px 18px;
}
.side-frame.active {
  background: rgba(255, 255, 255, 0.6);

}
.side-frame.active button {
  font-weight: 500;
  color:#000000;
  border-color:#000000;
  border-width:3px;
}
.side-frame button {
  width: 12vw;
  height: 120px;
  margin: 7px;
  background-color: transparent;
  font-size: 1.0rem;
  border-radius: 15px;
  border-width: 1.5px;
}
.side-frame button:hover {
    color: #000000;
    background-color: #ffffff;
    border-color: #000000;
}
.fourth-middle-map {
  height: 70vh;
  display: flex;
  justify-content: center; /* 横方向の中央揃え */
  align-items: center; /* 縦方向の中央揃え */
}
.fourth-middle-map img {
  width: 70vw;
}
.rings .message-area {
  font-size: 1.3rem;
  justify-content: space-between;
}
.ring {
  width: 23vw;
  height: 33vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 上下に分ける */
  text-align: center;
  padding-top: 8vh; /* 上下の余白（任意） */
  /*align-content: center;*/
}
.left-ring {
  padding-left: 6vw;
  margin-top:15px;
}
.center-ring {

}
.right-ring {
  padding-right: 6vw;
	padding-top:6vh;

}
.right-ring .title {
  font-size: 1.7rem;
	margin-bottom: 1vh;
}
.right-ring .bottom-text {
  margin-top: 2vh;
  font-size: 1.2rem;
}
.fifth-top-area {
  padding-left: 17vw;
  padding-top: 11vh;
  height: 75vh;
}
	
	
}

@media screen and (max-width : 1400px) {
	body{
		width: 1500px;
		overflow-x:auto;
	}
	.fourth-middle-map {
	  height: 485px;
	  display: flex;
	  justify-content: center; /* 横方向の中央揃え */
	  align-items: center; /* 縦方向の中央揃え */
	}
	.fourth-middle-map img {
	  width: 1600px;
	}	
}