@charset "euc-jp";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width:100%;
}


/* モバイルレイアウト : 480 px およびそれ以下. */
.box {
	width: 100%;
	border: 4px solid #000;
	border-radius: 15px;
	padding: 50px 15px 15px;
	background-color: #fff;
}

	
.box02 {
	width: 100%;
	border: 4px solid #000;
	border-radius: 15px;
	padding: 20px 15px 15px;
	background-color: #fff;
}
	
.box02 strong{
		font-size: 13px;
	}	
	
.box02 p{
		font-size: 12px;
	}	

.box03 {
	width: 100%;

	background-color: #fff;
}
	
.box03 strong{
		font-size: 17px;
	}	
	
.box03 p{
		font-size: 11px;
	}

.reibun {
	width: 100%;
	padding: 20px 10px 5px 10px;

	background-color: #EFF6FC;
}	

.point-ttl{
		display: inline-block;
	background-color: #D32E31;
	color: #fff;
	font-weight: bold;
	border-radius: 5px;
	margin-right: 15px;
	padding: 7px 7px;
	}	
	

.ttl-mokuji {
  position: relative;
  display: block;
	width: 100%;
	height: 60px;
	align-items: center;
  padding: 5px 5px 5px 5px;
  border: 3px solid #000000;
  border-radius: 9999px;
  background-color: #E8434A;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.ttl-mokuji span {
  position: absolute;
	left: -2px;
	bottom:-2.5px;
  display: block;
	width: 60px;
	height: 60px;
	align-items: center;
  padding: 16px 19px;
  border: 3px solid #000000;
  border-radius: 9999px;
  background-color: #A4001D;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}

.ttl-mokuji2 {
  position: relative;
  display: block;
	width: 100%;
	height: 60px;
	align-items: center;
	 margin:auto auto -40px;
  padding: 5px 5px 5px 5px;
  border: 3px solid #000000;
  border-radius: 9999px;
  background-color: #E8434A;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.ttl-mokuji2 span {
  position: absolute;
	left: -2px;
	bottom:-2.5px;
  display: block;
	width: 60px;
	height: 60px;
	align-items: center;
  padding: 16px 19px;
  border: 3px solid #000000;
  border-radius: 9999px;
  background-color: #A4001D;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}


.ttl-box {
  position: relative;
  display: block;
	width: 80%;
  margin:auto auto -40px;
  padding: 16px 19px;
  border: 3px solid #000000;
  border-radius: 9999px;
  background-color: #FFE200;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: #000;
}
.ttl-box span{
	width: 50px;
	position: absolute;
	bottom:0;
	left:-5px;
}

	
.ttl-box2 {
  position: relative;
  display: block;
	width: 80%;
  margin:auto auto -100px;
  padding: 30px 19px;
 
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  color: #EE742A;
}
.ttl-box2 span{
	width: 70px;
	position: absolute;
	bottom:0;
	light:-5px;
	bottom: 30px;
}

.ttl-box3 {
  position: relative;
  display: block;
	width: 80%;
  margin:auto auto -100px;
  padding: 30px 19px;
 
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  color: #F5B323;
}
.ttl-box3 span{
	width: 70px;
	position: absolute;
	bottom:0;
	light:-5px;
	bottom: 30px;
}

.mokuji-box {
  position: relative;
  display: block;
  width: 40%;
  margin:auto auto -40px 15px;
  padding: 12px 14px;
  border: 5px solid #000000;
  border-radius: 9999px;
  background-color: #E8434A;
  text-align: center;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.5;
  color: #fff;
}	
	
.mokuji_inbox {
	width: 100%;
	border: 4px solid #000;
	border-radius: 15px;
	padding: 50px 30px 15px;
	background-color: #fff;
}	
.mokuji_inbox p {
font-size: 14px;
}	

.mokuji_inbox p :hover{
font-size: 14px;
}	


.dashed-note1,.dashed-note2,.dashed-note3 {
  background-size: 8px 100%, /* 点線1のサイズ */
                   100% 2.5em; /* 点線2のサイズ */
  line-height: 2.5em; /* 文字の高さ */
  padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}

.dashed-note1{
  background-color: #fff; /* 背景色 */
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), /* 点線1の色 */
                    linear-gradient(180deg, #ccc 1px, transparent 1px); /* 点線2の色と太さ */
}
.dashed-note2{
  background-color: #FDF7E0; /* 背景色 */
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #FDF7E0 50%, #FDF7E0 100%), /* 点線1の色 */
                    linear-gradient(180deg, #ccc 1px, transparent 1px); /* 点線2の色と太さ */
}
.dashed-note3{
  background-color: #FBE7E2; /* 背景色 */
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #FBE7E2 50%, #FBE7E2 100%), /* 点線1の色 */
                    linear-gradient(180deg, #ccc 1px, transparent 1px); /* 点線2の色と太さ */
}

.speechBubble {
  position: relative;
  display: block;
  margin-bottom: 20px;
  padding: 5px 10px;
  border: 3px solid #000000;
  border-radius: 9999px;
  background-color: #4ebdc0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
}

.speechBubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  border-style: solid;
  border-width: 20px 10px 0 10px;
  border-color: #000000 transparent transparent;
  translate: -50% 100%;
}

.speechBubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  border-style: solid;
  border-width: 13.3px 6.6px 0 6.6px;
  border-color: #4ebdc0 transparent transparent;
  translate: -50% 100%;
}
.wrap-2box{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.report{
	width:100%;
	margin: 25px 0px 0px;
}
  .heading-with-icon img {
	width: 30px;  
    vertical-align: middle;
    margin-right: 8px; /* 見出しテキストとの間隔を調整 */
  }
  .report p {
    padding-left: 1em; /* 見出しより1字分左に余白を追加 */
  }

.arrow-down {
  position: relative;
  display: inline-block;
  width: 47.6px;
  height: 27.8px;
}

.arrow-down::before,
.arrow-down::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 4px);
  width: 8px;
  height: 36px;
  border-radius: 9999px;
  background-color: #f6d019;
  transform-origin: 50% calc(100% - 4px);
}

.arrow-down::before {
  transform: rotate(45deg);
}

.arrow-down::after {
  transform: rotate(-45deg);
}
.box-osusume {
  position: relative;
  display: block;
  margin-top: 5px;
  margin-bottom: 20px;
  padding: 16px 19px;
  border-radius: 10px;
  background-color: #f6d019;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: #000;
}

	
.box-osusume2 {
  position: relative;
  display: block;
  margin-top: 5px;
  margin-bottom: 20px;
  padding: 16px 19px;
  border-radius: 10px;
  background-color: #EE742A;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: #FFFFFF;
}	
	
.box-osusume2 strong{
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: #FFFFFF;
border-bottom: 2px solid #FFFFFF;	
}		
	
	
	

.box-osusume3 {
  position: relative;
  display: block;
  margin-top: 5px;
  margin-bottom: 20px;
  padding: 16px 19px;
  border-radius: 10px;
  background-color: #F5B323;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: #FFFFFF;
}	
	
.box-osusume3 strong{
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: #FFFFFF;
border-bottom: 2px solid #FFFFFF;	
}	


.box-sample{
	width: 100%;
	padding: 15px 15px;
	line-height: 1.8em;
	border: solid 5px #00A29A;
	background-color: #fff;
	font-size: 0.8em;
}
.box-sample p{
	font-weight: 600;
	color:#f6d019;
	margin-bottom: 5px;
	font-size: 1.2em;
}
.ttl-sample{
	font-size: 14px;
	font-weight: 600;
}
.itembox_service {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0px 2px 5px 0px;
	
}
.itembox_service div {
	width: 100%;
	text-align: center;
	font-size: 10px;
	border-radius: 20px;
	margin: 20px 5px;
	background-color: #FBE7E2;
	
}
.itembox_service div p {
	/*width: 75px;*/
	margin: 0 ;
	padding:5px 20px 10px;
	text-align: center;
	font-size: 14px;
}
.itembox_service div strong{
	/*margin: 0 auto;*/
	color:#e4007f;
	font-size: 16px;
	
}
.itembox_service div img {
	width:50%;
	top:-20px;
	position: relative;
	
}
/* デスクトップレイアウト : 769 px 〜最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {
.box {
	width: 100%;
	border: 4px solid #000;
	border-radius: 15px;
	padding: 50px 30px;
	background-color: #fff;
}
	
.box02 {
	width: 100%;
	border: 4px solid #000;
	border-radius: 15px;
	padding: 20px 15px 15px;
	background-color: #fff;
}
	
.box02 strong{
		font-size: 25px;
	}	
	
.box02 p{
		font-size: 17px;
	}		
	
.box03 {
	width: 100%;
	background-color: #fff;
}
	
.box03 strong{
		font-size: 25px;
	}	
	
.box03 p{
		font-size: 17px;
	}	
	
.reibun {
	width: 100%;
	padding: 20px 10px 10px 10px;
	background-color: #EFF6FC;
}	
	
.point-ttl{
		display: inline-block;
	background-color: #D32E31;
	color: #fff;
	font-weight: bold;
	border-radius: 5px;
	margin-right: 15px;
	padding: 10px 10px;
	}	
	
.ttl-mokuji {
	width: 90%;
	height: 80px;
  padding: 16px 19px;
  border: 3px solid #000000;
  font-size: 30px;
  font-weight: 600;
}
.ttl-mokuji span {
  position: absolute;
	left: -2px;
	bottom:-2.5px;
	width: 80px;
	height: 80px;
  padding: 16px 19px;
  border: 3px solid #000000;
  font-size: 30px;
  font-weight: 600;
}
	
.ttl-mokuji2 {
	width: 90%;
	height: 80px;
  padding: 16px 19px;
  border: 3px solid #000000;
  font-size: 30px;
  font-weight: 600;
}
.ttl-mokuji2 span {
  position: absolute;
	left: -2px;
	bottom:-2.5px;
	width: 80px;
	height: 80px;
  padding: 16px 19px;
  border: 3px solid #000000;
  font-size: 30px;
  font-weight: 600;
}	
	
.ttl-box {
  position: relative;
  display: block;
	width: 60%;
  margin:auto auto -40px;
  padding: 16px 19px;
  border: 3px solid #000000;
  border-radius: 9999px;
  background-color: #FFE200;
  text-align: center;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.5;
  color: #000;
}
.ttl-box span{
	width: 70px;
	position: absolute;
	bottom:0;
	left:-5px;
}
	
.ttl-box2 {
  position: relative;
  display: block;
	width: 80%;
  margin:auto auto -100px;
  padding: 16px 19px;
 
  text-align: center;
  font-size: 50px;
  font-weight: 600;
  line-height: 1.5;
  color: #EE742A;
}
.ttl-box2 span{
	width: 100px;
	position: absolute;
	bottom:0;
	light:-5px;
	height:-10px;
}
	
.ttl-box3 {
  position: relative;
  display: block;
	width: 80%;
  margin:auto auto -100px;
  padding: 16px 19px;
 
  text-align: center;
  font-size: 50px;
  font-weight: 600;
  line-height: 1.5;
  color: #F5B323;
}
.ttl-box3 span{
	width: 100px;
	position: absolute;
	bottom:0;
	light:-5px;
	height:-10px;
}	
	
.mokuji-box {
  position: relative;
  display: block;
  width: 20%;
  margin:auto auto -40px 30px;
  padding: 16px 19px;
  border: 5px solid #000000;
  border-radius: 9999px;
  background-color: #E8434A;
  text-align: center;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.5;
  color: #fff;
}	
	
.mokuji_inbox {
	width: 100%;
	border: 4px solid #000;
	border-radius: 15px;
	padding: 50px 30px 15px;
	background-color: #fff;
}	
.mokuji_inbox p {
font-size: 20px;
}		

	
.mokuji_inbox p :hover{
font-size: 20px;
}		
	
.dashed-note1,.dashed-note2,.dashed-note3 {
  background-size: 8px 100%, /* 点線1のサイズ */
                   100% 2.5em; /* 点線2のサイズ */
  line-height: 2.5em; /* 文字の高さ */
  padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}
.speechBubble {
  position: relative;
  display: block;
  margin-bottom: 20px;
  padding: 16px 19px;
  border: 3px solid #000000;
  border-radius: 9999px;
  background-color: #4ebdc0;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #ffffff;
}

.speechBubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 29%;
  border-style: solid;
  border-width: 20px 10px 0 10px;
  border-color: #000000 transparent transparent;
  translate: -50% 100%;
}

.speechBubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 29%;
  border-style: solid;
  border-width: 13.3px 6.6px 0 6.6px;
  border-color: #4ebdc0 transparent transparent;
  translate: -50% 100%;
}
.wrap-2box{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.report{
	width:45%;
	margin: 15px;
}
  .heading-with-icon img {
	width: 50px;  
    vertical-align: middle;
    margin-right: 8px; /* 見出しテキストとの間隔を調整 */
  }
  .report p {
    padding-left: 1em; /* 見出しより1字分左に余白を追加 */
  }

.arrow-down {
  position: relative;
  display: inline-block;
  width: 47.6px;
  height: 27.8px;
}

.arrow-down::before,
.arrow-down::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 4px);
  width: 8px;
  height: 36px;
  border-radius: 9999px;
  background-color: #f6d019;
  transform-origin: 50% calc(100% - 4px);
}

.arrow-down::before {
  transform: rotate(45deg);
}

.arrow-down::after {
  transform: rotate(-45deg);
}
.box-osusume {
  position: relative;
  display: block;
  margin-top: 5px;
  margin-bottom: 20px;
  padding: 16px 19px;
  border-radius: 10px;
  background-color: #f6d019;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #000;
}
	
.box-osusume2 {
  position: relative;
  display: block;
  margin-top: 5px;
  margin-bottom: 20px;
  padding: 16px 19px;
  border-radius: 10px;
  background-color: #EE742A;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #FFFFFF;
}	
	
.box-osusume2 strong{
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  color: #FFFFFF;
border-bottom: 3px solid #FFFFFF;	
}		
	
	
.box-osusume3 {
  position: relative;
  display: block;
  margin-top: 5px;
  margin-bottom: 20px;
  padding: 16px 19px;
  border-radius: 10px;
  background-color: #F5B323;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #FFFFFF;
}	
	
.box-osusume3 strong{
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  color: #FFFFFF;
border-bottom: 3px solid #FFFFFF;	
}		
	
	
	
.box-sample{
	width: 100%;
	padding: 30px 40px;
	line-height: 2em;
	border: solid 10px #00A29A;
	background-color: #fff;
	font-size: 1em;
}
.box-sample p{
	font-weight: 600;
	color:#f6d019;
	margin-bottom: 5px;
}
.ttl-sample{
	font-size: 20px;
	font-weight: 600;
}
.itembox_service div {
	width: 48%;
	text-align: center;
	font-size: 10px;
	border-radius: 20px;
	margin: 20px 5px;
	background-color: #FBE7E2;
	
}
.itembox_service div p {
	/*width: 75px;*/
	margin: 0 ;
	padding:5px 20px 10px;
	text-align: center;
	font-size: 14px;
}
.itembox_service div strong{
	/*margin: 0 auto;*/
	color:#e4007f;
	font-size: 16px;
	
}
.itembox_service div img {
	width:30%;
	top:-20px;
	position: relative;
	
}	
}