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

h1 { color: #6553a2;}
h2 { color: #6553a2;}

.page a:link {
	color: #333;
}

.page a:visited {
	color: #333;
}

.page a:hover {
	color: #333;
}

#que .container,
#cost .container,
#system .container,
#examination .container,
#congenital .container,
#prompt .container {
    width: 900px;   
}

.page{
    margin-bottom: 60px;
}

header .siteName a,
header .siteName a:link,
header .siteName .page a:visited,
header .siteName .page a:hover{
	color: #e9746f;
}

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

#que .container, #cost .container, #system .container, #examination .container, #congenital .container, #prompt .container {
    width: auto;
}

}

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

section .container {
    width: auto;
}

}

#que h3 {
    width: 414px;
    height: 46px;
    background-image: url("../images/additional/hl_see.png");
    background-repeat: no-repeat;
    margin: 30px auto 40px;
    text-indent: -10000px;   
}

#que .see {
    display: flex;
    justify-content: space-between;
    width: 780px;
    margin: 0 auto 30px auto;
}

#que .see dl {
    width: 268px;
    height: 205px;
    background-image: url("../images/additional/illu_see01.png");
    background-repeat: no-repeat;
    text-indent: -10000px;
}

#que .result {
    padding: 14px;
    width: 380px;
    height: auto;
	background-color: #eae7f0;
    font-family: dnp-shuei-mgothic-std, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.8rem;
    text-align: center;
    border-radius: 10px;
}

#que .result h4 {
    font-size: 1.8rem;
	font-weight: 700;
    color: #9d734d;
}

#que .result ul{
	margin-bottom: 10px;
    position: relative;
    height: 130px;
}

#que .result li{
    width: 60%;
	padding: 10px;
    display: block;
    border-radius: 5px;
    color: #fff;
    margin: 0 auto;
    font-size: 2.0rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

#que .result li:first-child{
    background-color: #DE9315;
    position: absolute;
    top: 10px;
}

#que .result li:nth-child(2){
    background-color: #666666;
    width: 24px;
    height: 24px;
    border-radius: 24px;
    font-size: 2.4rem;
    line-height: 2.2rem;
    position: absolute;
    top: 50px;
    z-index: 1;
}

#que .result li:last-child{
    background-color: #3CA1B6;
    position: absolute;
    top: 80px;
}

#que .result p {
	margin-bottom: 0;
    color: #9d734d;
    font-size: 1.8rem;
}

#que .result p span{
    font-size: 2.2rem;
    color: #e9746f;
}

#que .see .arrow{
    width: 60px;
    height: 205px;
    background-image: url("../images/additional/arrow_see.png");
    background-repeat: no-repeat;
    background-position: center;
}

@media screen and (max-width: 640px){
#que .see {
    display: block;
    width: auto;
}
    
#que .see dl {
    width: 400px;
    height: 310px;
    background-image: url(../images/additional/illu_see01.png);
    background-repeat: no-repeat;
    text-indent: -10000px;
    margin: 0 auto;
    background-size: cover;
    background-position: center;
}
    
#que .see .arrow {
    width: 60px;
    height: 100px;
    background-image: url(../images/additional/arrow_see_down.png);
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
}
    
#que h3 {
    width: 518px;
    height: 56px;
    background-image: url(../images/additional/hl_see.png);
    background-repeat: no-repeat;
    margin: 30px auto 40px;
    text-indent: -10000px;
    background-size: cover;
    background-position: center;
}
    
#que .result {
    width: 100%;
    height: auto;
    border-radius: 10px;
    text-align: center;
    font-family: dnp-shuei-mgothic-std, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.8rem;
    padding: 14px;
    margin: 0 auto;
	box-sizing: border-box;
}
    
#que .result ul {
    position: relative;
    height: 160px;
}    
    
#que .result li {
    font-size: 3.0rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
    
#que .result h4 {
    color: #9d734d;
	font-size: 2.8rem; 
}
    
#que .result p {
    font-size: 2.8rem;
}
#que .result p span {
	font-size: 2.8rem;
}
    
#que .result li:nth-child(2) {
    position: absolute;
    top: 60px;
}
    
#que .result li:last-child {
    position: absolute;
    top: 90px;
}

}

#cost .inner{
    background-color: #eae7f0;
    border-radius: 20px;
    padding: 20px 40px 30px;
    width: 800px;
    margin-top: 30px;
}

#cost h3{
    font-size: 2.7rem;
    background-color: #fff;
    display: inline-block;
    margin: 0 auto 20px;
    padding: 0 10px;
    text-align: center;
    color: #6553a2;
}

#cost p span{
    color: #6553a2;
    font-size: 2.2rem;
}

#cost .inner p span{
    color: #f6524b;
}

@media screen and (max-width: 640px){
#cost .inner {
    width: auto;
}
}


#system .inner {
    /*margin-top: 30px;*/
    padding: 30px 160px 30px 30px;
	position: relative;
    background-color: #eae7f0;
    border-radius: 20px;
	box-sizing: border-box;
}
#system .inner h3 {
    font-size: 2.7rem;
    background-color: #fff;
    display: inline-block;
    margin: 0 auto 20px;
    padding: 0 10px;
    text-align: center;
    color: #6553a2;
}
#system .inner img {
	position: absolute;
	bottom: -20px;
	right: -20px;
}
#system p span{
    color: #6553a2;
    font-size: 2.2rem;
}

#system .inner p span{
    color: #f6524b;
}

@media screen and (max-width: 640px){
#system .inner {
	padding-right: 0px;
    width: auto;
}
}


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

#system .container{
    width: auto;
}    
}

@media screen and (min-width: 641px){
#system ul{
    display: flex;
    justify-content: space-between;
    width: 900px;
    margin: 0 auto;
    text-align: center;
    flex-wrap: wrap;
}}

#system li {
    width: 304px;
    height: 190px;
    border-radius: 20px;
    background-color: #fbf1e4;
    padding: 20px 0 0;
}

#system li:nth-child(5){
    width: 100%;
    height: auto;
    border-radius: 304px;
    background-color: #fbf1e4;
    padding: 10px 0;
}

#system li h3{
    display: inline-block;
    font-size: 2.7rem;
    color:#e67f22;
    margin-bottom: 0.5em;
    padding: 0 5px;
}

#system li:nth-child(5) h3{
    margin-bottom: 0;
}

#system li p{
    margin-bottom: 10px;
}

#system li.arrow{
    width: 25px;
    height: 304px;
    background-color: #fff;
    padding-top: 0;
}
@media screen and (min-width: 641px){
#system li.arrow.right{
    width: 25px;
    height: 210px;
    background-image: url("../images/what/to_right.png");
    background-repeat: no-repeat;
    background-position: center;
}

#system li.arrow.left{
    width: 25px;
    height: 304px;
    background-image: url("../images/what/to_left.png");
    background-repeat: no-repeat;
    background-position: center;
}
}

#system li.arrow.down{
    width: 900px;
    height: 75px;
    background-image: url("../images/what/to_down.png");
    background-repeat: no-repeat;
    background-position: 85% center;
}

#system li.arrow.down2{
    width: 33%;
    height: 50px;
    background-image: url("../images/what/to_down.png");
    background-repeat: no-repeat;
    background-position: center;
}

#system li.system01 {
    position: relative;
	width: 520px;
}

#system li.system01 img{
    position: absolute;
    bottom: -10px;
    right:-15px;
}

#system li.system01 h3 {
    background-color: none;
}

#system li.system01 h3 span{
	display: block;
    padding: 0 5px;
}

#system li.system02 {
    position: relative;
}
#system li.system02 p {
	padding: 0 30px;
	text-align: left;
	box-sizing: border-box;
	}

#system li.system02 img{
    position: absolute;
    bottom: -10px;
    right:-15px;
}

#system li:nth-child(2){
    width: 100%;    
}

#system li:nth-child(6),
#system li:nth-child(7),
#system li:nth-child(8){
    width: 33%;
    height: auto;
    background-color: none;
    padding: 10px 0;
}

#system li.system01 h3{
    margin-bottom: 1.6rem;
}

#system li.system01 .ShueiMGoStd{
}
#system li.system01 p {
	padding: 0 30px;
	text-align: left;
	box-sizing: border-box;
	}

#system li.results{
    padding: 1em 1.5em;
    width: 32%;
    height: auto;
    border-radius: 20px;
	text-align: left;
	box-sizing: border-box;
	position: relative;
}
#system li.results img{
	position: absolute;
	bottom: -10px;
	right: -10px;
	width: 130px;
}

#system li:nth-child(9){
    background-color: #d6f2fc;
}

#system li:nth-child(10){
    background-color: #dff3dc;
}

#system li:nth-child(11){
    background-color: #fee8ef;
}

#system li:nth-child(3) h3,
#system li:nth-child(5) h3{
}

#system li:nth-child(9) h3{
    color: #22a3e6;
}
#system li:nth-child(10) h3{
    color: #11cc4e;
}

#system li:nth-child(11) h3{
    color: #f581bd;
}

@media screen and (max-width: 640px){
#system ul{
    width: auto;
    margin: 0 auto;
    text-align: center;
}
    
#system li {
    margin: 0 auto;
    padding: 35px 0 0;
    width: 100% !important;
    height: auto;
    background-color: #fbf1e4;
}
    
#system li.arrow.right{
    width: 480px;
    height: 24px;
    background-image: url("../images/what/to_down.png");
    background-repeat: no-repeat;
    background-position: center;
    margin: 30px auto;
}
    
#system li.arrow.down {
    width: 480px;
    height: 24px;
    background-image: url(../images/what/to_down.png);
    background-repeat: no-repeat;
    background-position: 50% center;
    margin: 30px auto;
}
    
#system li.arrow.left{
    width: 480px;
    height: 24px;
    background-image: url("../images/what/to_down.png");
    background-repeat: no-repeat;
    background-position: center;
    margin: 30px auto;
}
    
#system li:nth-child(1) img{
        width: 26%;
        height: auto;
    } 
    
#system li:nth-child(3) img{
        width: 30%;
        height: auto;
    }    
    
#system li:nth-child(5) img{
        width: 40%;
        height: auto;
    }
#system li:nth-child(7) img{
        width: 45%;
        height: auto;
    }
    
#system li p {
    text-align: left;
}
#system li.system01 { padding-bottom: 15px;}
#system li.system01 p:first-of-type { width: 90%;}
#system li.system01 p:nth-of-type(2) { width: 70%;}

#system li.system02 { padding-bottom: 15px;}
#system li.system02 p:first-of-type { width: 70%;}
    
#system li h3 {
}
    
#system li.arrow.down2 {
    width: 33%;
    height: 35px;
    background-image: url(../images/what/to_down.png);
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
}
    
#system li.results {
    width: auto;
    height: auto;
    border-radius: 20px;
    padding: 5%;
    margin-bottom: 20px;
}
    
#system li.system01 h3 {
	font-size: 3.0rem;
    }

}

#examination{
    margin-bottom: 50px;
}

#examination h3{
    color: #6553a2;
    font-size: 3.6rem;
}

#examination .main {
    width: 735px;
    float: left;
}

#examination .sub {
    float: right;
}

@media screen and (max-width: 640px){
#examination .main {
    width: auto;
    float: none;
}
}

#congenital {
    margin-bottom: 75px;
}

#congenital li.disease{
    border-radius: 20px;
    padding: 30px;
}

#congenital li.disease .about {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: dashed 2px #F7E8CB;
	display: flex;
	justify-content: space-between;
}
#congenital li.disease .about .about-box {
	width: 375px;
	}
#congenital li.disease .about .about-box p {
	margin-bottom: 0;}

#congenital li.same01{
    width: 830px;
    height: auto;
	background-color: #D6EBEF;}
#congenital li.same01 h3 {
	color: #3CA1B6;}
#congenital li.same01 h5 {
    margin-bottom: 10px;
    padding: 5px 15px;
    border-radius: 5px;
    background-color: #3CA1B6;
    color: #fff;
    display: inline-block;
    text-align: center;
    font-size: 1.6rem;
}
#congenital li.disease.same01 .about ul li span {
	color: #3CA1B6;
} 
	
#congenital li.same02 {
    margin-bottom: 30px;
    width: 830px;
    height: auto;
	background-color: #F7E8CB;
}
#congenital li.same02 h3 {
    color: #DE9315;}
#congenital li.same02 .inner {
	padding: 20px 30px;
	background-color: #fff;
	border-radius: 10px;
}
#congenital li.same02 .inner:first-of-type {
	margin-bottom: 20px;}

#congenital li.same02 .inner p.caution {
    padding: 10px 80px;
    border-radius: 5px;
    background-color: #DE9315;
    color: #fff;
    font-size: 1.6rem;
	position: relative;
}
#congenital li.same02 .inner p.caution img.caution1{
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
}
#congenital li.same02 .inner p.caution img.caution2{
	position: absolute;
	top: -10px;
	right: 10px;
}

#congenital li.disease h3{
    margin-bottom: 20px;
    font-size: 3.0rem;
    border-radius: 20px;
}

#congenital li.disease ul {
}

#congenital li.disease ul h4 {
    border-radius: 14px;
    background-color: #9d734d;
    color: #fff;
    display: inline-block;
    text-align: center;
    padding: 0 10px;
    margin-bottom: 15px;
    font-size: 1.4rem;
}

#congenital li.disease ul li span {
	color: #DE9315;
}

#congenital .method{
    text-indent: -10000px;
}

#congenital li.same01 .method{
    float: right;
    width: 340px;
    height: 176px;
    background-image: url("../images/additional/method01.png");
    background-repeat: no-repeat;
}

#congenital li.same02 .method{
    float: right;
    width: 340px;
    height: 198px;
    background-image: url("../images/additional/method02.png");
    background-repeat: no-repeat;
}

#congenital li.same02 .b_saibou .method{
    float: right;
    width: 340px;
    height: 198px;
    background-image: url("../images/additional/method03.png");
    background-repeat: no-repeat;
}

#congenital li.disease p{
    margin-bottom: 20px;
}

#congenital li.same02 h4 {
    margin-bottom: 25px;
    color: #DE9315;
    font-size: 2.7rem;
}

#congenital li.same02 .inner p {
}

#congenital li.same02 .inner h5 {
    margin-bottom: 10px;
    padding: 5px 15px;
    border-radius: 5px;
    background-color: #DE9315;
    color: #fff;
    display: inline-block;
    text-align: center;
    font-size: 1.6rem;
}

#congenital li.same02 .line{
    border-bottom: dashed 2px #f1b910;
    padding-bottom: 40px;
}

#congenital li.same02 .b_saibou{
    padding-top: 40px;
}

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

#congenital li.disease .about {
	display: inherit;
}
#congenital li.disease .about .about-box {
	width: auto;}

#congenital li.same01 {
    width: auto;
    height: auto;
}
    
#congenital li.same02 {
    width: auto;
    height: 910px;
}
    
#congenital li.disease ul {
    width: auto;
    border-radius: 10px;
    float: none;
    margin-bottom: 30px;
}    
    
#congenital li.disease ul h4 {
    font-size: 2.6rem;
    border-radius: 26px;
}
    
#congenital li.same01 .method {
    float: right;
    width: 550px;
    height: 284px;
    background-image: url(../images/additional/method01.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}
    
#congenital li.same02 .method {
    float: right;
    width: 550px;
    height: 315px;
    background-image: url(../images/additional/method02.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}
    
#congenital li.same02 .b_saibou .method {
    float: right;
    width: 550px;
    height: 315px;
    background-image: url("../images/additional/method03.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}
    
#congenital li.same02 {
    width: auto;
    height: auto;
}
    
#congenital li.same02 .inner p {
    float: none;
    width: auto;
}
    
#congenital li.same02 h4 {
    float: none;
}

#congenital li.same01 h5,
#congenital li.same02 .inner h5 {
    border-radius: 26px;
    font-size: 2.6rem;
}
}

#prompt{
    margin: 0 20px 90px;
}

#prompt .container{
    width: 810px;
    background-color: #fbf1e4;
    border-radius: 20px;
    padding: 50px 40px 25px;
}

#prompt .main{
    float: left;
    width: 560px;
}

#prompt .sub{
    float: right;
}

#prompt .main span{
     color: #f6524b;
    font-size: 2.7rem;
}
@media screen and (max-width: 640px){
#prompt .container {
    width: auto;
}
    
#prompt .main {
    width: auto;
}
}

.btn a {
background-color:#9d734d;
    color:#fff; 
    right: 15px;
    font-size: 1.9rem;
    color: #fff;
    width: 340px;
    height: 10px;
    background-image: url(../images/arrow.png);
    background-repeat: no-repeat;
    display: block;
    border-radius: 10px;
    background-position: right 15px center;
    text-align: center;
    line-height: 10px;
    padding: 15px;
    margin-top: 20px;
}

div.msg-box {
	margin-top: 50px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	color:#e9746f;
}
div.msg-box p{
	margin-right:20px;
	width: 50%;
}
div.msg-box p span{
	background:linear-gradient(transparent 70%, #fddcda 0%);
	line-height: 1.8;
}
@media screen and (max-width: 640px){
div.msg-box p{
	margin-right:20px;
	width: 100%;
}
}