@charset "utf-8";
/* CSS Document */

/* ==== 全体のはみ出し保険 ==== */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html, body { margin:0; padding:0; overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
*, *::before, *::after { box-sizing: border-box; }

/*----------------------------------------------*/
/*	色付き帯（このページ：type_D）
/*----------------------------------------------*/
main .type_D{
    width: 100%;
    height: auto;
    margin: 0;
    padding-top: 25px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 5rem;
    background-color: #DFE7F0;
}
@media (max-width:770px) {
	main .type_D{
		padding-bottom: 3rem;
	}
}

/*----------------------------------------------*/
/*	パンくずリスト
/*----------------------------------------------*/
main .pan_list{
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 1rem;
    font-size: 0.9rem;
    max-width: 990px;
    width: 96%;
    overflow: auto; /*スクロールさせる*/
    white-space: nowrap;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
}

/*----------------------------------------------*/
/*	ヘッダー帯（type_B）
/*----------------------------------------------*/
main .type_B{
    width: 96%;
    margin-right: auto;
    padding: 0;
    margin-left: auto;
    max-width: 990px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    height: auto;
}
@media (max-width:730px) {
	main .type_B{
		width: 100%;
		margin-right: auto;
		padding: 0;
		margin-left: auto;
		max-width: 1300px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 3rem;
		height: auto;
		flex-flow: column;
	}
}

/*----------------------------------------------*/
/*	ソフトアイコンエリア
/*----------------------------------------------*/
#soft_ico2{
    width: 32%;
    height: auto;
}

/*----------------------------------------------*/
#soft_title{
    width: 65%;
    padding-left: 20px;
    display: flex;
    flex-flow: column;
    height: auto;
}
@media (max-width:730px) {
	#soft_title{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
	}
}

#soft_sub{
    width: 100%;
    position: relative;
    height: auto;
	margin-top: 20px;
}
#soft_sub div{
    background-color: #FFFFFF;
    padding: 1rem;
    border-radius: 10px;
    line-height: normal;
    width: 100%;
    text-align: center;
    font-weight: bold;
    margin: 0;
	position: relative;
}
@media (max-width:730px) {
	#soft_sub div{
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
}

#soft_name{
    width: 100%;
    height: auto;
    position: relative;
}

/* サブ画像＋説明リスト */
#soft_sub div ul{
    text-align: left;
    list-style-type: none;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-weight: bold;
    font-style: normal;
    color: #333333;
    margin-top: 0;
    margin-right: 0;
    margin-left: calc(150px + 1rem);
    margin-bottom: 0;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1.75;
    font-variant: normal;
}
#soft_sub div ul li{
    margin-bottom: 0;
    line-height: 1.5;
}
#soft_sub div ul li:last-child{
	margin-bottom: 0;
}

/* サブ画像（customer用） */
#soft_sub div .img_box3{
    position: absolute;
    width: 100%;
    height: auto;
    top: 1rem;
    margin: 0;
    padding: 0;
    left: 1rem;
    max-width: 135px;
}
#soft_sub div img{
    width: 100%;
    margin-left: 0;
    padding: 0;
    height: auto;
}

@media (max-width:850px) {
	#soft_sub div ul{
		font-size: 1rem;
		line-height: normal;
		margin-left: calc(140px + 1rem);
	}
	#soft_sub div img{
		width: 88%;
		height: auto;
	}
	#soft_sub div .img_box3{
		width: 88%;
		max-width: 130px;
	}
}
@media (max-width:510px) {
	#soft_sub div img{
    	width: 50%;
		height: auto;
	}
	#soft_sub div ul{
		margin-left:30%;
	}
	#soft_sub div ul li{
		padding: 0;
		margin: 0;
		line-height: 1.5;
	}
}
@media (max-width:400px) {
	/* 画像が大きい場合は非表示 */
	#soft_sub div img{
	    display: none;
	}
	/* 画像分、詰める */
	#soft_sub div ul{
		margin-left:0;
	}
}
@media (max-width:380px) {
	#soft_sub div{
    	display: none;
	}
}

/*----------------------------------------------*/
/*	ソフト名称
/*----------------------------------------------*/
#soft_name h1{
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-weight: bold;
    padding: 0;
    font-size: 6.3rem;
    margin: 0;
    font-feature-settings: "palt" 1;
    font-style: normal;
    font-variant: normal;
}

/*----------------------------------------------*/
/*	サブタイトル
/*----------------------------------------------*/
#soft_name p{
    color: #333;
    font-size: 2rem;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    padding: 0;
    margin: 0;
    font-feature-settings: "palt" 1;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
}
#soft_name .mini2{
	font-size: 1.8rem;
}

@media (max-width:1005px) {
	#soft_name h1{
	    font-size: 5rem;
	}
	#soft_name p{
		font-size: 1.5rem;
	}
}
@media (max-width:810px) {
	#soft_sub div{
		font-size: 1.2rem;
		width: 100%;
	}
	#soft_name h1{
		font-size: 4.5rem;
	}
	#soft_name p{
		font-size: 1.5rem;
	}
}
@media (max-width:730px) {
	#soft_name h1{
		text-align: center;
	}
	#soft_name p{
		text-align: center;
	}
}
@media (max-width:510px) {
	#soft_sub div{
		font-size: 1rem;
		width: 90%;
		padding: 0.5rem;
	}
	#soft_sub div img{
		width: 90%;
		height: auto;
	}
	#soft_name h1{
	    font-size: 4rem;
	}
	#soft_name p{
		font-size: 1.2rem;
	}
}
@media (max-width:450px) {
	#soft_name h1{
	    font-size: 3.8rem;
	}
	main .type_B{
    	padding-bottom: 2rem;
	}
	#soft_sub div img{
		width: 80%;
		height: auto;
	}
}
@media (max-width:430px) {
	#soft_sub div{
		font-size: 0.9rem;
		padding-top: 5px;
		padding-bottom: 5px;
		width: 100%;
	}
	#soft_name h1{
	    font-size: 3.5rem;
	}
}

/*----------------------------------------------*/
/*	このページのh2
/*----------------------------------------------*/
h2{
    margin-top: 6rem;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 2rem;
    width: 100%;
    padding: 0;
    text-align: center;
    display: inline-block;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 2.2rem;
    color: #333;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
}

/*----------------------------------------------*/
/*	特長（box_type3）
/*----------------------------------------------*/
.box_type3{
    display: flex;
    width: 100%;
    max-width: 1300px;
    margin-left: auto;
    padding: 0;
    margin-right: auto;
	flex-direction: column;
    margin-bottom: 20rem;
}
@media (max-width:730px) {
	.box_type3{
		margin-bottom: 5rem;
	}
}
.box_type3 div{
    border-radius: 5px;
    border: 1px solid #CCCCCC;
    height: auto;
    width: 100%;
    padding: 1.5rem;
    word-break: break-all;
    margin-top: 0;
    font-size: 1.4rem;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    margin-bottom: 1rem;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
}
.box_type3 div span{
    font-weight: bold;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    color: #555555;
}

/* 画像サイズ（このHTMLで使用しているものだけ） */
.resize3{
    height: auto;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 1rem;
    padding: 0;
    margin-top: 0;
}
.resize4{
    height: auto;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 2rem;
    margin-top: 2rem;
    max-width: 200px;
}
@media (max-width:730px) {
	.resize3{
		height: auto;
		width: 90%;
	}
}

/*----------------------------------------------*/
/*	詳細ブロック（box_type4）
/*----------------------------------------------*/
.box_type4{
    width: 100%;
    max-width: 1300px;
    margin-left: auto;
    padding: 0;
    margin-right: auto;
}
@media (max-width:730px) {
	.box_type4{
		width: 90%;
		margin-bottom: 10rem;
	}
}
.box_type4 .sub_title{
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 0.6rem;
    font-style: normal;
    font-variant: normal;
}
@media (max-width:730px) {
	.box_type4 .sub_title{
		font-size: 1.5rem;
		margin-bottom: 0rem;
		padding-bottom: 0.5rem;
	}
}

.txt_box{
    width: 100%;
    max-width: 1300px;
    padding-top: 0.8rem;
    font-size: 1.4rem;
    line-height: 1.5;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    padding-bottom: 0;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
}
.txt_box p{
    margin: 0;
    padding: 0;
}
@media (max-width:730px) {
	.txt_box{
		width: 94%;
		font-size: 1rem;
		margin-left: auto;
		margin-right: auto;
	}
	.txt_box p{
	    margin-bottom: 1rem;
	}
}

/*-------------------------------------*/
/*  canvasを埋め込むiframe
/*-------------------------------------*/
.canvas_frame{
  width: min(100%, 1000px);
  aspect-ratio: 25 / 17;
  margin: 1rem auto;
  outline: 1px solid #CCC;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  position: relative;
  line-height: 0;
}
.canvas_frame iframe{
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  overflow: hidden;
  scrollbar-width: none;
}
.canvas_frame iframe::-webkit-scrollbar { display: none; }

/*-------------------------------------*/
/*  その他レイアウト（box_type5）
/*-------------------------------------*/
.box_type5{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1300px;
    padding: 0;
    margin-top: 10rem;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}
@media (max-width:730px) {
	.box_type5{
		margin-bottom: 20rem;
	}
}
.box_type5 div{
    height: auto;
    width: 31%;
    word-break: break-all;
    margin-top: 0;
    font-size: 1.4rem;
    margin-bottom: 3%;
    margin-right: 3%;
	display: flex;
}
.box_type5 div:nth-child(3n){
	margin-right: 0%;
}
.box_type5 div a{
    text-decoration: none;
    display: block;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    background-color: #FFFFFF;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.box_type5 div a:hover{
    border: 1px dotted #BC4042;
    background-color: #F9EFEF;
}
.box_type5 div span{
    font-weight: bold;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    color: #555555;
    margin-bottom: 0.6rem;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-style: normal;
    font-variant: normal;
}
.box_type5 div img{
    width: 100%;
    height: auto;
    display: block;
    max-width: 100px;
    margin-left: auto;
    margin-right: auto;
}
.box_type5 div p{
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 1rem;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    color: #333333;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
}
@media (max-width:730px) {
	.box_type5{
		display: flex;
		width: 100%;
		flex-flow: column;
	}
	.box_type5 div,
	.box_type5 div:nth-child(3n){
		width: 90%;
		margin-top: auto;
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 2rem;
		display: block;
	}
}

/*-------------------------------------*/
/*  余白ユーティリティ（このHTMLで使用分のみ）
/*-------------------------------------*/
.margin-bottom30{ margin-bottom: 30rem; }
.margin-bottom20{ margin-bottom: 20rem; }
.margin-bottom10{ margin-bottom: 10rem; }
.margin-top4{     margin-top: 4rem; margin-bottom: 0; }

/*-------------------------------------*/
/*  customerページ固有
/*-------------------------------------*/
.customer_img{
    width: 250px !important;
    height: auto;
    display: block;
}
#soft_sub div .customer_v{
    margin-left: calc(250px - 20px) !important;
}


/*---------------------------------------------------------------*/
/*  サブソフトメニュー（カードグリッド）                        */
/*---------------------------------------------------------------*/
#sub_soft_menu {
  max-width: 1300px;
  width: 100%;
  margin-top: 5rem;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem 1.2rem;
}
@media (max-width: 980px) {
  #sub_soft_menu {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 566px) {
  #sub_soft_menu {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
#sub_soft_menu .card {
  border: 1px solid #CCC;
  border-radius: 6px;
  background: #fff;
  /*transition: box-shadow .2s ease, transform .1s ease, border-color .2s ease;*/
  transition: transform 0.3s ease;
}
#sub_soft_menu .card > a {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.5rem;
  text-decoration: none;
  width: 100%;
  height: 100%;
}
#sub_soft_menu .thumb {
  margin: 0;
  width: 50px;
  height: 50px;
  border-radius: 4px;
  overflow: hidden;
  flex: 0 0 50px;
}
#sub_soft_menu .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#sub_soft_menu .body {
  flex: 1 1 auto;
  min-width: 0;
}
#sub_soft_menu h2 {
    margin: 0;
    color: #333;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.2;
    text-align: left;
}
#sub_soft_menu p {
  margin: 0;
  color: #333;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: .9rem;
  line-height: 1.2;
}
@media (hover:hover) {
  #sub_soft_menu .card:hover {
    border-color: #bbb;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
    transform: translateY(-5px);
  }
}
@media (hover:none) {
  #sub_soft_menu .card:active {
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
  }
}
/* ホバー時の画像のバウンド処理 */
@media (hover: hover) {
  #sub_soft_menu .card:hover img {
    animation: thumb-pop-bounce .5s ease-out infinite;
    transform-origin: center bottom;
  }
}