@charset"utf-8";
/* CSS Document */
.spNone {
	display: block!important;
}
.pcNone {
	display: none!important;
}
.contents02 {
    padding-top: 1px;
}
h2 {
	font-size: 35px;
    line-height: 1.4;
    background-image: repeating-linear-gradient(transparent 0 9%, rgba(255, 255, 255, .7) 10% 90%, transparent 91% 10%);
    padding: 20px 1%;
	margin-top: 140px;
    margin-bottom: 50px;
}
h2 small {
	font-size: 19px;
	font-weight: 600;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
.trialarea::before {
	background: #f2f2f2;
}
:hover {
	webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
/*---------------------------------------------------
  listedcomp_titlbox
----------------------------------------------------*/
.listedcomp_titlbox {
	width: 95%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 2%;
	border-radius: 8px;
	background: #FFFFFF;
	box-shadow: #d3c5ab 0 0 5px;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
}
.listedcomp_titlbox img {
	width: 25%;
	max-width: fit-content;
	height: auto;
	display: block;
	margin: auto;
}
.listedcomp_titlbox .titlbox_txt {
	width: 70%;
	margin-left: 5%;
}
.titlbox_txt h3 {
	font-size: 38px;
	font-weight: 800;
	color: #d43754;
}
.titlbox_txt h3 small {
	font-size: 28px;
	font-weight: 800;
	color: #333333;
}
.titlbox_txt .txt_01 {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.5;
	margin-top: 1.5%;
}
.titlbox_txt .txt_02 {
	font-size: 18px;
	margin: 1.5% auto 3.4%;
}
.titlbox_txt .lnkbox {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.titlbox_txt .lnkbox a,
.lnkboxtxt .lnkbox a {
	width: 300px;
	height: auto;
	min-height: 80px;
	border-radius: 8px;
	border: solid 2px #e2515d;
	background: #e2515d;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	align-content: center;
	color: #FFFFFF;
	box-sizing: border-box;
	display: block;
}
.titlbox_txt .lnkbox a:nth-child(2),
.lnkboxtxt .lnkbox a:nth-child(2) {
	margin-left: 2%;
	color: #e2515d;
	background: #FFFFFF;
}
.titlbox_txt .lnkbox a:first-child:hover,
.lnkboxtxt .lnkbox a:first-child:hover {
	color: #e2515d;
	background: #FFFFFF;
}
.titlbox_txt .lnkbox a:nth-child(2):hover,
.lnkboxtxt .lnkbox a:nth-child(2):hover {
	color: #FFFFFF;
	background: #e2515d;
}
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 52px solid transparent;
  border-left: 52px solid transparent;
  border-top: 32px solid #f2f2f2;
  border-bottom: 0;
}
/*---------------------------------------------------
  listedcomparea
----------------------------------------------------*/
.listedcomparea {
	width: 100%;
	margin: 30px 0 0;
	padding: 60px 0 100px;
	background: #FFFFFF;
}
.listedbox {
	width: 95%;
	max-width: 1100px;
	margin: 0 auto 100px;
}
.areatitl {
	font-size: 24px;
	font-weight: 600;
	padding-left: 10px;
	border-left: solid 5px #e2515d;
	border-bottom: solid 1px #e2515d;
}
.listedbox_inner {
	width: 95%;
	max-width: 1000px;
	margin: 40px auto 0;
	font-size: 18px;
}
.areatxt01 {
	font-size: 23px;
	font-weight: 600;
	margin-bottom: 20px;
}
.task .areatxt01 {
	text-indent: -0.5em;
}
.areatxt02 {
	font-size: 18px;
	line-height: 1.4;
	margin-bottom: 40px;
}
.taskbox p {
	font-size: 20px;
	font-weight: 600;
}
.listedbox_inner div ul.graybox {
	width: 100%;
	margin: 5px 0 50px;
	padding: 1.25em 1em;
	padding-left: 2.25em;
	background: #f2f2f2;
	box-sizing: border-box;
	position: relative;
}
.listedbox_inner div ul li {
	list-style-type: disc;
	/*padding-left: 1.4em;
	margin-left: 1.4em;
	text-indent: -1.4em;*/
}
.listedbox_inner div ul li::marker {
    font-size: 60%;
}
.taskbox .triangle {
	position: absolute;
	left: 0;
	right: 0; 
	bottom: -30px;
	margin: auto;
}
p.y_line_txt {
	width: fit-content;
	font-size: 25px;
	font-weight: 600;
	text-align: center;
	margin: auto;
}
p.y_line_txt span {
	background:linear-gradient(transparent 60%, #fcee21 60%);
}

/*---------------------------------------------------
 diagnosis
----------------------------------------------------*/
.diagnosis {
	margin: 60px auto 20px;
}
.diagnosis p {
	width: fit-content;
	height: 2.25em;
	padding: 0 1em;
	align-content: center;
	font-size: 23px;
	font-weight: 600;
	color: #FFFFFF;
	background: #e2515d;
}
.diagnosisul {
	border: solid 2px #cccccc; 
	padding: 1em 1em 1em 1.5em;
}
.diagnosisul li {
    position: relative;
    padding-left: 25px;
	list-style-type: none!important;
  }
.diagnosisul li:after {
    content: "";
    position: absolute;
    top: .5em;
    left: 0;
    width: 10px;
    height: 10px;
    border: 1px solid #333333;
}
.diagnosis + .triangle {
	width: fit-content;
	margin: 0 auto 20px;
	border-top-color: #cccccc;
	display: block;
}

/*---------------------------------------------------
 utilization
----------------------------------------------------*/
.utilization img {
    width: 100%;
    max-width: fit-content;
}
.utilization .triangle {
	margin: 40px auto 40px;
	border-top-color: #cccccc;
}
.utilization .utiltitl {
	display: flex;
	justify-content: center;
	font-size: 25px;
	font-weight: 600;
	margin-bottom: 10px;
}

span.circle_mark {
    width: 28px;
    height: 28px;
    position: relative;
    border: solid #e897a1 5px;
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
	margin: 0.15em 0.5em;
}
span.cross_mark {
    position: relative;
    display: block;
    width: 30px;
    height: 6px;
    background: #7ccae5;
    transform: rotate(45deg);
    vertical-align: middle;  
	margin: 0.5em;
}
span.cross_mark::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #7ccae5;
    transform: rotate(90deg);
}

/*---------------------------------------------------
 simple
----------------------------------------------------*/
.simple .titl {
    width: fit-content;
	font-size: 24px;
	font-weight: 600;
	text-align: center;
	margin: 50px auto 40px;
    position: relative;
}
.simple .titl span {
	color: #d43754;
}
.simple .titl::before, .simple .titl::after {
    position: absolute;
    display: inline-block;
    content: "";
    background: #333333;
    width: 2px;
    height: 1.5em;
    margin: 0 0.5em;
    margin-top: -.2em;
    vertical-align: middle;
}
.simple .titl:before {
    bottom: 0.25em;
    left: -1.5em;
    transform: rotate(-35deg);
}
.simple .titl:after {
    bottom: 0.25em;
    right: -1.5em;
    transform: rotate(35deg);
}
.simplebox {
    display: flex;
    justify-content: center;
	flex-wrap: wrap;
}
.s_box {
	width: 48%;
}
.s_box:nth-child(2) {
	margin-left: 2%;
}

.s_box .graybox {
	border: solid 2px #cccccc;
	background: #FFFFFF!important;
}
.s_box p {
	font-size: 24px;
	font-weight: 600;
	text-align: center;
	color: #d43754;
}
.s_box:last-child .graybox {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.s_box:last-child .graybox li {
	width: 49.5%;
}

/*---------------------------------------------------
 overall 
----------------------------------------------------*/
.overall img {
	width: 100%;
	max-width: fit-content;
	margin: 0 auto 30px;
}

/*---------------------------------------------------
 utilize
----------------------------------------------------*/
.utilize {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.utilize .box {
	width: 48%;
}
.utilize .box .graybox {
	height: auto;
	min-height: 7.5em;
	margin-bottom: 30px;
}
.utilize .box:last-child .graybox,
.utilize .box:nth-last-child(2) .graybox {
	height: auto;
	min-height: unset;
	margin-bottom: 0;
}
.utilize .box p {
	font-size: 23px;
	font-weight: 600;
	line-height: 1.25;
	border-left: solid 5px #cccccc;
	padding-left: 0.75em;
	margin-bottom: 15px;
}
.utilize .box p span {
	color: #d43754;
}

/*---------------------------------------------------
 costplan
----------------------------------------------------*/
.costbox {
	width: 80%;
    max-width: 650px;
    margin: 4em auto 0;
    padding: 2%;
    border: solid 2px #cccccc;
    box-sizing: border-box;
    position: relative;
    display: block;
}
.costbox .planname {
	width: fit-content;
	font-size: 25px;
	font-weight: 600;
    text-align: center;
	color: #d43754;
	background: #FFFFFF;
    margin: auto;
	padding: 0 0.5em;
	position: absolute;  
	top: -0.75em;
    left: 0;
    right: 0;
}
.costbox .costtitl {
	width: fit-content;
	margin: 0.75em auto 20px;
    font-size: 28px;
    font-weight: 600;
	line-height: 1.2;
    text-align: center;
}
.costbox .costtitl strong {
    font-size: 45px;
}
.costbox .costtitl span {
	display: inherit;
	background: linear-gradient(transparent 70%, #fcee21 70%);
}
.costbox .costtxt {
	font-size: 12px;
	text-align: center;
}
.costplan a.otherpln {
    width: fit-content;
    margin: 2% auto 0;
    font-size: 15px;
    text-align: center;
    text-decoration: underline;
    color: #282422;
    display: block;
}
.costplan a.otherpln:hover {
	text-decoration: none;
}

/*---------------------------------------------------
 question
----------------------------------------------------*/
.questionbox {
    width: 100%;
    margin: 0 auto 20px;
    border: solid 1px #cccccc;
    padding: 15px 20px;
    box-sizing: border-box;
}
.questionbox:last-child {
    margin-bottom: 0;
}
.questionbox .q_txt,
.questionbox .a_txt {
	font-size: 20px;
}
.questionbox .q_txt span ,
.questionbox .a_txt span {
	font-size: 25px;
	font-weight: 600;
	color: #d43754;
}
.questionbox .q_txt {
	font-weight: 600; 
	border-bottom: dashed 1px #cccccc;
	padding-bottom: 0.5em;
}
.questionbox .a_txt {
	padding-top: 0.5em;
}

/*---------------------------------------------------
 listedlnkarea
----------------------------------------------------*/
.listedlnkarea {
    width: 100%;
    padding: 3% 0 2%;
    background: #f2f2f2;
    box-sizing: border-box;
}
.listedlnkbox {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2%;
    border-radius: 8px;
    background: #ffffff;
    display: flex;
    justify-content: flex-start;
    box-sizing: border-box;
}
.listedlnkbox img {
	width: 25%;
	height: auto;
	max-width: fit-content;
	margin: auto;
}
.lnkboxtxt {
	width: 70%;
	margin-left: 5%;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.lnkboxtxt p {
	width: 100%;
	font-size: 35px;
	font-weight: 600;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	margin-bottom: 1em;
}
.listedlnkbox .lnkbox {
    display: flex;
    justify-content: flex-start;
}



@media screen and (max-width: 960px) {
/*////////////////////////////////////////////////
=pc→spに表示変更
////////////////////////////////////////////////*/
.spNone {
	display: block!important;
}
.pcNone {
	display: none!important;
}
/*---------------------------------------------------
 
----------------------------------------------------*/
.listedcomp_titlbox {
    padding: 2% 4%;
}
.listedcomp_titlbox .titlbox_txt {
    width: 75%;
}
.listedcomp_titlbox img {
    width: 20%;
}
.titlbox_txt h3 {
    font-size: 3.8vw;
    line-height: 1.25;
}
.titlbox_txt h3 small {
    font-size: 2.5vw;
}
.titlbox_txt .txt_01 {
	font-size: 2vw;
}
.titlbox_txt .txt_02 {
	font-size: 1.875vw;
}
.titlbox_txt .lnkbox a,
.lnkboxtxt .lnkbox a {
	width: 30vw;
	font-size: 1.875vw;
}

/*---------------------------------------------------
 
----------------------------------------------------*/	
.listedcomparea {
    width: 100%;
    margin: 5vw 0 0;
    padding: 6vw 0 1vw;
    background: #FFFFFF;
}
.listedbox_inner {
    margin: 4vw auto 0;
    font-size: 1.875vw;
}
.areatitl {
    font-size: 2.5vw;
}
.areatxt01 {
    font-size: 2.39vw;
    margin-bottom: 2vw;
}
.areatxt02 {
    font-size: 1.875vw;
    margin-bottom: 4vw;
}
.listedbox {
    margin: 0 auto 10vw;
}
/*---------------------------------------------------
 task
----------------------------------------------------*/
.taskbox p {
    font-size: 2vw;
}
p.y_line_txt {
    font-size: 2.6vw;
}
.diagnosis {
    margin: 6vw auto 2vw;
}
.diagnosis p {
    font-size: 2.3vw;
}

/*---------------------------------------------------
 utilization
----------------------------------------------------*/
.utilization .triangle {
    margin: 4vw auto;
}
.utilization .utiltitl {
    font-size: 2.6vw;
    margin-bottom: 1vw;
}
.listedbox_inner div ul.graybox {
    padding: 2vw 4vw 2vw;
}

/*---------------------------------------------------
 
----------------------------------------------------*/
/*---------------------------------------------------
 simple
----------------------------------------------------*/	
.simple .titl {
    font-size: 2.5vw;
    margin: 5vw auto 4vw;
}
.s_box:last-child {
    width: 60%;
}
.s_box p {
    font-size: 2.5vw;
}
.s_box .graybox {
	height: auto;
    min-height: 9.5em;
}
.s_box:last-child .graybox{
    min-height: unset;
}
.s_box:last-child .graybox li {
    width: 45%;
    margin-right: 5%;
}
.s_box:last-child .graybox li:nth-child(2n) {
    margin-right: 0;
}
/*---------------------------------------------------
 utilize
----------------------------------------------------*/	
.utilize .box p {
    font-size: 2vw;
    margin-bottom: 1.5vw;
}
.utilize .box:last-child .graybox,
.utilize .box:nth-last-child(2) .graybox {
    height: auto;
    min-height: 7.5em;
    margin-bottom: 0;
}
/*---------------------------------------------------
 costplan
----------------------------------------------------*/	
.costbox .planname {
    font-size: 2.6vw;
}
/*---------------------------------------------------
 question
----------------------------------------------------*/
.questionbox .q_txt,
.questionbox .a_txt {
    font-size: 2vw;
}
.questionbox .q_txt span, 
.questionbox .a_txt span {
    font-size: 2.6vw;
    font-weight: 600;
    color: #d43754;
}
/*---------------------------------------------------
 listedlnkarea
----------------------------------------------------*/
.listedlnkarea {
	padding: 3vw 0 0vw;
}
.lnkboxtxt p {
    font-size: 3.5vw;
}
.lnkboxtxt .lnkbox a {
    width: 27vw;
}
.listedlnkbox img {
	width: 20%;
}
    
    
    
    
}
@media screen and (max-width: 767px) {
/*////////////////////////////////////////////////
=pc→spに表示変更
////////////////////////////////////////////////*/
    .spNone {
        display: none!important;
    }
    .pcNone {
        display: block!important;
    }
	h2::before, h2::after {
        height: 14px;
    }
	h2 {
		font-size: min(38px, 5.06vw);
		background-image: repeating-linear-gradient(transparent 0 9%, rgba(255, 255, 255, .7) 10% 90%, transparent 91% 10%);
		padding: 7vw 2vw;
		margin-top: 20%;
		margin-bottom: 8%;
		box-sizing: border-box;
	}
	h2 small {
		font-size: 80%;
		line-height: 1.6;
	}
/*---------------------------------------------------

----------------------------------------------------*/ 
	.listedcomp_titlbox {
		display: block;
		padding: 5vw;
	}
	.listedcomp_titlbox img {
        width: 35%;
        max-width: fit-content;
    }
	.listedcomp_titlbox .titlbox_txt {
		width: 100%;
		margin: 5% auto 0;
    }
	.titlbox_txt h3 {
        font-size: min(45px, 6vw);
    }
	.titlbox_txt h3 small {
        font-size: min(35px, 4.6vw);
    }
	.titlbox_txt .txt_01 {
        font-size: min(28px, 3.73vw);
    }   
	.titlbox_txt .txt_02 {
		font-size: min(25px, 3.33vw);
		margin: 2% auto 5%;
	}
	.titlbox_txt .lnkbox {
		flex-wrap: wrap;
	}
	.titlbox_txt .lnkbox a, .lnkboxtxt .lnkbox a {
        width: 100%;
        height: 12vw;
        min-height: unset;
        font-size: min(25px, 3.33vw);
        margin: 0 auto 2%!important;
    }
	.titlbox_txt .lnkbox a:nth-child(2), .lnkboxtxt .lnkbox a:nth-child(2) {
        margin: 0 auto!important;
    }
/*---------------------------------------------------

----------------------------------------------------*/  
	.listedcomparea {
        width: 100%;
        margin: 7vw 0 0;
        padding: 8vw 0 1vw;
    }
	.areatitl {
        font-size: min(35px, 4.6vw);
		line-height: 1.3;
    } 
	.areatxt01 {
        font-size: min(35px, 4.6vw);
        margin-bottom: 3vw;
    }
	.areatxt02 {
        font-size: min(25px, 3.33vw);
        line-height: 1.5;
        margin-bottom: 7vw;
    }
	
/*---------------------------------------------------
task
----------------------------------------------------*/  
    .taskbox p {
        font-size: min(28px, 3.73vw);
    }
	.listedbox_inner div ul.graybox {
		padding: 5vw 3vw 5vw 7vw;
        margin: 2vw auto 35px;
    }
	.listedbox_inner div.taskbox ul.graybox {
		padding-bottom: 3vw;
    }
	.listedbox_inner div ul li {
		font-size: min(25px, 3.33vw);
		line-height: 1.25;
		margin-bottom: 1vw;
	}
	.listedbox_inner div ul li:last-child {
		margin-bottom: 0;
	}
	p.y_line_txt {
       font-size: min(35px, 4.66vw);
    }
	.triangle {
		width: 0;
		height: 0;
		border-style: solid;
		border-right-width: 28px;
		border-left-width: 28px;
		border-top-width: 17px;
		border-bottom: 0;
	}
	.taskbox .triangle {
		bottom: -17px;
	}
	.diagnosis p {
        width: 100%;
        height: 3.5em;
        font-size: min(28px, 3.73vw);
        text-align: center;
        box-sizing: border-box;
    }
	.diagnosisul {
		padding: 4vw 5vw;
	}
	.diagnosisul li:after {
		top: 0;
	}
/*---------------------------------------------------
 utilization
----------------------------------------------------*/  
	.utilization .utiltitl {
        font-size: min(32px, 4.26vw);
        margin-bottom: 1vw;
		align-items: center;
    }
/*---------------------------------------------------
 simple
----------------------------------------------------*/  
	.simple .titl {
        font-size: min(32px, 4.2vw);
		margin-bottom: 7vw;
    }
	.listedbox_inner .simplebox div ul.graybox {
        margin-bottom: 6vw;
    }
	.simplebox {
		display: block;
	}
	.s_box p {
        font-size: min(32px, 4.2vw);
    }
	.s_box,
	.s_box:nth-child(2), 
	.s_box:last-child {
		width: 100%;
		margin: 0 auto;
	}
	.s_box:last-child .graybox li {
        margin-bottom: 0;
    }
/*---------------------------------------------------
 overall
----------------------------------------------------*/ 
	.overall img {
		width: 100%;
		max-width: fit-content;
		margin: 0 auto 4vw;
	}
/*---------------------------------------------------
 utilize
----------------------------------------------------*/ 
	.utilize {
		display: block;
	}   
	.utilize .box {
		width: 100%;
	}
	.utilize .box p {
        font-size: min(32px, 4.26vw);
        margin-bottom: 2vw;
    }
	.utilize .box .graybox ,
	.utilize .box:last-child .graybox,
	.utilize .box:nth-last-child(2) .graybox {
		min-height: unset;
		margin-bottom: 5vw;
	}
/*---------------------------------------------------
 costplan
----------------------------------------------------*/ 
	.costbox {
		width: 100%;
		max-width: unset;
		padding: 2vw 3vw 3vw;
	}
	.costbox .costtitl {
		margin: 0.75em auto 3vw;
		font-size: min(49px, 6.53vw);
	}   
	.costbox .planname {
        font-size: min(35px, 4.66vw);
    }
	.costbox .costtxt {
		font-size: min(25px, 3.33vw);
	}
	.costplan a.otherpln {
		margin: 5% auto 0;
		font-size: min(20px, 3.33vw);
	}
 /*---------------------------------------------------
 question
----------------------------------------------------*/  
	.questionbox {
		margin: 0 auto 2.5vw;
		padding: 2.5vw 4vw;
	}
	.questionbox .q_txt, .questionbox .a_txt {
        display: flex;
        font-size: min(28px, 3.73vw);
		justify-content: flex-start;		
    }
	.questionbox .q_txt{
        align-items: center;
    }
	.questionbox .q_txt span, 
	.questionbox .a_txt span {
        font-size: min(32px, 4.33vw);
		margin-right: 2vw;
    }
/*---------------------------------------------------
 listedlnk
----------------------------------------------------*/  
	.listedlnkbox {
		width: 90%;
		padding: 5%;
        border-radius: 4px;
		display: block;
	}
	.listedlnkbox img {
        width: 30%;
        max-width: fit-content;
    }
	.lnkboxtxt {
		width: 100%;
		margin: 5vw auto 0;
	}
	.lnkboxtxt p {
        font-size: min(43px, 5.73vw);
    }
	.listedlnkbox .lnkbox {
		width: 100%;
		display: block;
	}

	
	
	
	
	
	
}