@charset "utf-8";

/* HTML on Word用 */

p.xhw-top-catchtext1 {
  font-weight: 400;
  font-size: 32px;
  margin-top: 30px;
}
p.xhw-top-catchtext2 {
  font-weight: 700;
  font-size: 17px;
}

p.common-link-btn a {
   color: #fff;
     margin: 0 10px 20px;
     padding: 10px 20px 6px 20px;
     border: 1px solid rgb(var(--image-color));
     text-align: center;
     border-radius: 6px;
     display: inline-block;
     background-color: rgb(var(--image-color));
     text-decoration: none;
 
 }
 p.common-link-btn a:hover {
     background-color: #fafafa;
     color: rgb(var(--image-color));
     transition: 0.3s ease-in-out;
 }
 
 .common-considerations {
   background-color:#f8f6eb;
   border-radius: 10px;
   padding-top:0px;
   padding-bottom:40px;
   /* max-width:900px; */
   margin:40px auto 60px;
   position: relative;
 }
 
 
 .common-considerations h2:before {
  content: none;
 }
 
 .common-considerations h2:after {
  content: none;
 }
 
 .common-considerations p {
   max-width:900px;
 }
 p.common-considerations-title {
   color:#fff;
   font-weight: normal;
   font-size: 18px;
   margin: 0 0 40px;
   border-bottom: 0;
   background-color: #333;
   display: block;
   padding-top:1.0em;
   padding-bottom: 0.6em;
   padding-right:60px;
   border-radius: 6px 6px 0 0;
   letter-spacing:0.05em;
   max-width: 100%;
 }
 
 
 .common-considerations-ribbon {  
   display: inline-block;
   position: absolute;
   top: 0;
   right: 10px;
   margin: 0;
   padding: 8px 0;
   z-index: 2;
   width: 40px;
   text-align: center;
   font-size: 17px;
   color: white;
   background: #ff785b;
 }
 
 .common-considerations-ribbon:after {
   content: '';
   position: absolute;
   left: 0;
   top: 100%;
   height: 0;
   width: 0;
   border-left: 20px solid #ff785b;
   border-right: 20px solid #ff785b;
   border-bottom: 10px solid transparent;
 }
 
 .common-considerations figure {
   padding:0;
 }
 
 .common-funcDigest-area ul {
   display: flex;
   flex-wrap: wrap;
   margin: 0 auto;
 }
 
 .common-top-title-area h1 {
   position: relative;
 }
 .common-top-title-ribbon-wrap { 
   position: absolute;
     top: 0;
     right: 0;
     width: 300px;
     height: 120px;
     overflow: hidden;
 }
 .common-top-title-ribbon { 
     display: inline-block;
     position: absolute;
     padding: 4px 0 2px;
     left: 70px;
     top: 26px;
     width: 340px;
     text-align: center;
     font-size: 32px;
     line-height: 1.4em;
     background: rgba(255,0,0,0.8);
     color: #fff;
     letter-spacing: 0.05em;
     -webkit-transform: rotate(30deg);
     transform: rotate(30deg);
     font-weight: 700;
 }
 
 
 
 
 .common-function-icon {
   position: relative;
 }
 
 .common-funcicon-ribbon-wrap { 
   position: absolute;
     top: 0px;
     right: 40px;
     width: 110px;
     height: 91px;
     overflow: hidden;
 
 }
 .common-funcicon-ribbon { 
    display: inline-block;
     position: absolute;
     padding: 4px 0 2px;
     left: -46px;
     top: 26px;
     width: 240px;
     text-align: center;
     font-size: 15px;
     line-height: 16px;
     background: red;
     color: #fff;
     letter-spacing: 0.05em;
     -webkit-transform: rotate(40deg);
     transform: rotate(40deg);
     font-weight: 700;
 }
 .common-option-flex-spacearound>div {
   width:33%;
   margin-bottom: 60px;
 }
 
 .common-pr-new-area {
   /* background-color: rgb(177, 203, 222); */
      /* background-color: rgb(230, 245, 255); */
      background-color: rgb(240, 245, 255);
   padding-bottom: 80px;
   font-size: 17px;
   border-radius: 10px;
   border: #ccc 1px solid;
   /* background-image: url("./xhw_img/func-new-bk.jpg");
   background-repeat: no-repeat;
   background-size: 100%; */
 }
 
 .common-pr-new-area .common-parallel-wrap {
   padding-left:1.0em;
   padding-right:1.0em;
 }
 
 
 .common-pr-new-area h2 {
   /* color:#01373d; */
   color: rgb(var(--image-color));
   font-size: 40px;
   font-weight: 700;
 }
 .common-pr-new-area h3 {
  /* color:#01373d; */
  color:#1c5f6d;
   font-size: 24px;
 }
 .common-pr-new-area p,
 .common-pr-new-area li {
   font-size: 16px;
   line-height: 1.5em;
 }
 .common-pr-new-area p a,
 .common-pr-new-area li a {
   /* color: #aef; */
   font-weight: 700;
 }
 
 .common-qrcode {
   color:#000;
   margin:30px;
   background-color: #fff;
   padding:0;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
   display: flex;
 }
 .common-qrcode p {
   margin:20px;
   padding:0;
 }
 .common-qrcode img {
   margin:10px;
   border:#333 1px solid;
   padding:20px;
   width:180px;
   height: 180px;
   max-width: none;
 }
 
 .common-movie-wrap {
     width:80%;
     margin:0 auto;
     padding:0;
 }
 .common-movie {
     margin-top: 10px;
 }
 .common-movie iframe {
     width:100%;
     height:100%;
     left:0;
 }
 .common-extra-block-lightgray h3 {
   margin-top: 20px;
 }
 .link-banner {
   margin-left:60px;
   margin-right: 60px;
 }
 
 
 .common-dl-tableType-A {
             background-color: #ffe;
             padding: 10px 20px 0;
             margin: 30px auto 80px;
             width: 90%;
             border-radius: 15px;
         }
 
 
         .common-dl-tableType-A dl {
             display: flex;
             flex-flow: row wrap;
             margin: 50px auto 10px;
         }
 
         .common-dl-tableType-A dt {
             font-weight: 700;
             font-size: 17px !important;
             line-height: 1.4em !important;
             width: 35%;
             border-bottom: 1px solid #666;
             padding: 1.0em 10px;
             padding-right: 1.2em;
             padding-left: 0;
             /* background-image: url(./ptl_img/pr-iamge-list.png); */
             background-size: 50px;
             background-repeat: no-repeat;
             text-align: left !important;
 
         }
         .announce-img {
           width:100%;
         }
 
         .common-dl-tableType-A dd {
             width: 65%;
             border-bottom: 1px solid #666;
             padding: 1.0em 10px;
             text-align: left !important;
         }
         .common-dl-tableType-A dd p {
           margin: 0 0 10px;
         }
 
 
         .common-dl-tableType-A ul {
             margin: 0;
             margin-left: 0.5em;
             padding: 0;
         }
 
         .common-dl-tableType-A ul li {
             margin: 10px;
             margin-top: 0;
             margin-bottom: 0.2em;
             padding: 0;
         }
 
         .common-dl-tableType-A dd:last-child,
         .common-dl-tableType-A dt:nth-last-child(2) {
             border-bottom: 0;
         }
         .common-dl-tableType-A a {
           color: #06c;
           text-decoration: none;
         }
         .common-dl-tableType-A a:hover {
           color: #f60;
         }





/* CTAボタン */

.cta_btn {
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.1em;
	align-items: center;
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	position: absolute;
	bottom: 8%;
	right: 0;
	width: 100%;
	/* padding-right: 50px; */
   padding-left:100px;
}

.cta_btn01,
.cta_btn02 {
	font-size: 16px;
	color: #fff;
	position: relative;
	display: inline-block;
	text-decoration: none;
	padding: 1em 1em 1em 60px;
	border-radius: 100vh;
	width: 100%;
	max-width: 300px;
	transition: all .2s;
	box-shadow: 0 3px 5px rgb(0 0 0 / 50%);

}

/* ボタンの色 */
.cta_btn01 {
	background: rgb(var(--image-color-accent));
}

.cta_btn02 {
	/* background: rgb(var(--image-color-accent)); */
   background: #e86b65;
}

.cta_btn01::before,
.cta_btn02::before {
	content: '';
	position: absolute;
	left: 30px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	background-repeat: no-repeat;
	background-size: cover;
}

/* カタログアイコン */
/* .cta_btn01::before {
	width: 40px;
	height: 40px;
	background-image: url(img/catalog-icon.png);
} */

/* ダウンロードアイコン */
.cta_btn02::before {
	width: 40px;
	height: 40px;
	background-image: url(xhw_img/trial-icon.png);
}

.cta_btn img {
	width: 1em;
	margin-right: 0.5em;
}

/* マウスオーバー時 */
.cta_btn01:hover,
.cta_btn02:hover {
	box-shadow: none;
	transform: scale(0.99, 0.99) translateY(2px);
}

.cta_btn-copy {
	font-size: 90%;
	font-weight: bold;
	color: initial;
	position: absolute;
	top: -2em;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 100%;
}

.cta_btn-copy:before {
	margin-right: .2rem;
	content: '＼';
}

.cta_btn-copy:after {
	margin-left: .1rem;
	content: '／';
}

.xhw-top-title-area {
	position: relative;
}


/* お客様の声 */

.user-voice-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content:space-around;
  
}
.user-voice {
  border: 1px solid #ccc;
  margin: 30px 10px;
  padding: 10px;
  width:48%;

}
.user-voice-voice {
  margin: 0;
  padding: 0;
  border-bottom: 3px solid #ccc; 

  position: relative;
  padding: 10px 15px 10px 40px;
  box-sizing: border-box;
  font-style: italic;
  color: #464646;
}
.user-voice-voice:before{
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;
  content: "“";
  font-family: "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  color: rgb(var(--image-color));
  font-size: 90px;
  line-height: 1;
}
.common-pr-area .user-voice-voice p {
  font-family: "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  text-align: left;
  margin: 10px 0;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 700;
  /* color: #489; */
  color: #789;
  font-style: italic;
 }
.user-voice-name {
  margin:10px 0 20px;
  padding: 0;
}
.common-pr-area .user-voice-name p {
  text-align: left;
  margin: 10px 0;
  padding: 0 10px;
  font-size: 14px;
}

.user-voice-logo {
background-color: #eee;
margin: 0;
padding: 0;
}
.user-voice-logo {
  width:100%;
  height:100px;
}





.common-pr-point {
	background-color: #fff;
	border: none;
  margin-top: 20px;
  padding-top: 20px;
}

/* 番号リスト */

.common-pr-point ol {
	counter-reset: list;
	list-style-type: none;
	padding: 0px;
	padding-left: 20px;
	max-width: 700px;
	margin: auto;
  margin-bottom: 60px;
}

.common-pr-point ol li {
    margin: 7px 10px 15px 30px;
}
.common-pr-point ol li p {
	font-weight: normal;
  padding-left:0;
  padding-right: 0;
}

.common-pr-point ol li:before {
	counter-increment: list;
	content: counter(list);
	position: absolute;
	left: -35px;
	width: 30px;
	height: 30px;
	top: 15px;
	background: rgb(var(--image-color-accent));
	text-align: center;
	color: #fff;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);

	background: rgb(var(--image-color-accent));
	border: rgb(var(--image-color-accent)) 1px solid;

	border-radius: 50%;
}

.common-pr-point .xhw-button {
	text-align: right;
	padding-right: 30px;
}

.common-pr-point p.common-link-btn {
  margin:1.0em auto !important;
  text-align: center !important;
}
.common-pr-point p.common-link-btn a {
  font-weight:400 !important;
}
.common-pr-point-flex {
  justify-content: flex-start;
  margin-top:0;
}

/* 小さいバナー用 */
a.common-small-banner-anker {
  text-decoration: none;
  display: flex;
  border:3px solid #ccc;
  border-radius: 12px;
}
a.common-small-banner-anker:hover {
  opacity: 0.8;
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.6);
  border-color: rgb(var(--image-color));
    transition: 0.3s ease-in-out;

}
.common-small-banner-wrap {
  max-width: 700px;
  margin: 30px auto;
}

.common-small-banner-image {
  width:200px;
  background-image: url(./xhw_img/banner-small-docx2html.png);
  background-repeat: no-repeat;
  background-size:contain;
  border-radius: 12px 0 0 12px;
  background-position: center;
  background-color: rgb(225, 237, 249);
}
.common-small-banner-image img {

}
.common-small-banner-text {

}
.common-small-banner-text p {
  text-align: left;
  margin: 10px 0;
  padding: 0 1.0em;
  text-decoration: none;
  color:#333;
}
p.common-small-banner-name {
  font-weight: 700;
  color: #06c;
  font-size: 15px;
}

ul.xhw-server-menu {
  border:1px solid rgb(var(--image-color),0.5);
  border-radius: 4px;
  margin-bottom:20px;
}

/* メニューに New アイコン */
.common-sidemenu ul li:nth-child(4) a::after {
  content: "New!";
  display: inline-block;
  margin-left: 4px;
  margin-bottom: 2px;
  /* background-image: url(../img/common_img/common-icon-window-open.png); */
  vertical-align: middle;
  background-color: #ed5250;
  color: #fff;
  height:1.2em;
  padding: 2px 4px 1px;
  line-height: 1.3em;
  font-size: 13px;
}



/* .common-pr-point a {
	color: inherit;
	text-decoration: none;
	font-size: 16px;
	padding: 0 .5em .2em;
}

.common-pr-point a {
	background:
		linear-gradient(to right,
			rgb(var(--image-color-accent)),
			rgb(var(--image-color-accent))),
		linear-gradient(to right,
			rgba(200, 200, 200, 1),
			rgba(100, 200, 200, 1));
	background-size: 100% 3px, 0 3px;
	background-position: 100% 100%, 0 100%;
	background-repeat: no-repeat;
	transition: background-size 400ms;
}

.common-pr-point a:hover {
	color: inherit;
	background-size: 0 3px, 100% 3px;
} */



/*-------------------------- レスポンシブ用CSS ここから -----------------------------------------*/


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


	/* CTAボタン */
	.cta_btn {
		bottom: 7%;
	}

	.cta_btn01,
	.cta_btn02 {
		font-size: 14px;
		padding: .5em .7em;
		max-width: 200px;
	}

	.cta_btn01::before,
	.cta_btn02::before {
		display: none;
	}

	.cta_btn-copy {
		font-size: 85%;
	}

}


@media screen and (max-width:640px) {
	/* ↓ここに個別のスマホ用スタイルを指定 */


  p.xhw-top-catchtext1 {
    font-weight: 700;
    font-size: 20px;
    margin-top: 30px;
  }
  p.xhw-top-catchtext2 {
    font-weight: 400;
  }


   .common-pr-area h2 {
      margin-bottom:20px;
    }
    dl.common-caution-text {
      margin-left:10px;
      margin-right:10px;
    }
    dl.common-caution-text p {
      padding:10px 0;
      margin:0;
    }
  
  
  
  .common-top-title-ribbon-wrap { 
    position: absolute;
      top: 0;
      right: 0;
      width: 200px;
      height: 90px;
      overflow: hidden;
  }
  .common-top-title-ribbon { 
    display: inline-block;
      position: absolute;
      padding: 4px 0 2px;
      left: 70px;
      top: 10px;
      width: 200px;
      text-align: center;
      font-size: 18px;
      line-height: 1.2em;
      background: rgba(255,0,0,0.8);
      color: #fff;
      letter-spacing: 0.05em;
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
      font-weight: 700;
  }
  
  
    .common-function-icon {
    position: relative;
  }
  .common-funcicon-ribbon-wrap { 
    position: absolute;
      top: 0px;
      right: 30px;
      width: 90px;
      height: 91px;
      overflow: hidden;
  }
  .common-funcicon-ribbon { 
     display: inline-block;
      position: absolute;
      padding: 4px 0 2px;
      left: -36px;
      top: 16px;
      width: 200px;
      text-align: center;
      font-size: 13px;
      line-height: 16px;
      background: red;
      color: #fff;
      letter-spacing: 0.05em;
      -webkit-transform: rotate(40deg);
      transform: rotate(40deg);
      font-weight: 400;
  }
  .common-option-flex-spacearound>div {
    width:100%;
    margin-bottom: 40px;
  }
  .common-qrcode {
    color:#000;
    margin:30px auto;
    background-color: #fff;
    padding:0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction:column;
  }
  .common-qrcode img {
    margin:10px auto;
    border:#333 1px solid;
    padding:20px;
    width:180px;
    max-width: none;
  }
  
  .common-movie-wrap {
      width:96%;
      margin:0 auto;
      padding:0;
  }
  .link-banner {
    margin-left: 0;
    margin-right: 0;
  }
  .common-dl-tableType-A {
                  background-color: #ffe;
                  padding: 10px;
                  margin: 30px 10px 80px;
                  width: auto;
                  /* border-radius: 1.0rem; */
              }
  
              .common-dl-tableType-A dl {
                  display: flex;
                  flex-flow: wrap;
  
              }
  
              .common-dl-tableType-A dt {
                  font-weight: 700;
                  font-size: 17px !important;
                  line-height: 1.4em !important;
                  width: 100%;
                  border-bottom: 0;
                  padding: 10px 10px 0;
                  /* background-image: url(./ptl_img/pr-iamge-list.png); */
                  background-size: 50px;
                  background-repeat: no-repeat;
                  text-align: left !important;
  
              }
  
              .common-dl-tableType-A dd {
                  width: 100%;
                  border-bottom: 1px solid #666;
                  padding: 1.4em 10px 10px;
                  text-align: left !important;
              }
              .user-voice {
                width:100%;
              
              }
              .common-small-banner-wrap {
                margin: 30px 10px;
              }

	/* ↑ここまでに個別のスマホ用スタイルを指定 */
}


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


	/* CTAボタン */
	.cta_btn {
		bottom: 7%;
		gap: 5px;
	}

	.cta_btn01,
	.cta_btn02 {
		font-size: 10px;
		padding: .3em .5em;
		max-width: 140px;
	}

	.cta_btn-copy {
		display: none;
	}

}

/*-------------------------- レスポンシブ用CSS ここまで ----------------------*/