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

/* ============================
		Reset
 ============================ */

/*
@font-face {
  font-family: "lowline-only";
  src: local("Hiragino Sans"), local("Hiragino-Sans"), local("游ゴシック体"),
    local("YuGothic"), local("Meiryo"), local("Meiryo UI"), local("メイリオ");
  unicode-range: U+005F, U+FF3F;
}
*/

* { margin:0;padding:0;}

html {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 62.5%;
vertical-align: baseline;
background: transparent;
}

body, div,span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 1.6rem;
vertical-align: baseline;
background: transparent;
}

body {
/*font-family:"lowline-only", 'BIZ UDPGothic', sans-serif;*/
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Segoe UI, "Helvetica Neue", HelveticaNeue, "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
background-color:#fff;
font-size: 1.6rem;
line-height:1.0em;
text-align:left;
color: #000;
-webkit-text-size-adjust: 100%;
/*font-feature-settings : "palt" 1;*/
}

.container {
width:100%;
position: relative;
}

a { 
color: #000;
text-decoration:none;
}

a img {
border:0;
text-decoration:none;
}


/*	this is my short cut clear fix.
	with note "display:flex" */
.cfx:before, .cfx:after,.cf:before, .cf:after {
content:"";
display: table;
}
.cfx:after,.cf:after { clear:both; }
.cfx,.cf { *zoom:1; }

/* unnuber list is clear fix */
ul:before, ul:after,ol:before, ol:after {
content:"";
display: table;
}
ul:after,ol:after { clear:both; }
ul,ol { *zoom:1; }

li { list-style:none; }

/* data list is clear fix */
dl:before, dl:after {
content:"";
display: table;
}
dl:after { clear:both; }
dl { *zoom:1; }

header *,
article *,
main *,
footer * {
font-size: 1.6rem;
line-height: 1em;
}





/*	---------------------------
   		display control
	--------------------------- */

/* basic : all hits media class */
.spDisplayNone {}
.tbDisplayNone {}
.pcDisplayNone {}
.smartContainer {}
.spDisplayOn,
.tbDisplayOn,
.pcDisplayOn {
display: none;
}




/* ============================
		header
 ============================ */

header {
/*background-color: #fa9a00;
background-color: #fdb81e;*/
background-color:#fdb81e;
}
header .siteName {
font-size: 1.6rem;
font-weight: bold;
line-height: 40px;
}



article {
background-color: #fef5e5;
background-image: url("../images/bg_wall002.gif");
background-repeat: repeat-x;
padding: 0 20px;
}



/* ============================
		siteNameSection
 ============================ */

.siteNameSection {
padding-top: 50px;
padding-bottom: 100px;
position: relative;
}


.siteNameSection .siteName001 {
text-align: center;
margin-bottom: 30px;
}

.siteNameSection .siteName001 img {
height: auto;
width: 640px;
max-width: none;
}

.siteNameSection .catchIllust001 {
text-align: left;
position: absolute;
bottom: -38px;
right: 0
}

.siteNameSection .catchIllust001 img {
width: 415px;
height: auto;
}

.siteNameSection h3 {
margin-bottom:10px;
}

.siteNameSection h3 img {
width: auto;
height: 40px;
}

.siteNameSection .noteList {
margin-bottom: 1.0em;
}

.siteNameSection .noteList li {
font-size: 2.0rem;
font-weight: bold;
line-height: 1.5em;
padding-left: 1em;
background-image: url("../images/fig_list001.svg");
background-repeat: no-repeat;
background-position: left top 6px;
}


.siteNameSection .noteList.second {
width: 520px;
line-height: 1.5em;
}





/* ============================
		siteNameSection
 ============================ */



.mainWrap {
border: 6px solid #fa9a00;
border-radius: 30px;
background-color: #fff;
position: relative;
}





/* ============================
		siteNameSection
 ============================ */

.mainSection {
}

.mainWrap {
border: 6px solid #fa9a00;
border-radius: 30px;
background-color: #fff;
position: relative;
}

.mainSection h2 {
/*background-color: #40ad5d;*/
background-color: #2e8540;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
}

.mainSection h2 span {
display: inline-block;
font-size: 2.4rem;
color: #fff;
line-height: 1.25em;
padding: 15px 15px 15px 75px;
background-image: url("../images/fig_check_mark001.svg");
background-repeat: no-repeat;
background-size: 46px;
background-position: left 15px center;
}

.mainSection .mainList {
}

.mainSection .mainList > li {
position: relative;
padding-left: 0px;
padding-top: 40px;
padding-bottom: 30px;
box-sizing: border-box;
min-height: 113px;
border-bottom: 1px solid #fa9a00;
margin: 0 15px 30px 15px;
}


.mainSection .numberPlate {
position: absolute;
top: 30px;
left: -15px;
width: 40px;
height: 83px;
box-sizing: border-box;
/* 2e8540 
background-color: #2e8540;
border-bottom: 1px solid #fff;
border-top-right-radius: 100%;
border-bottom-right-radius: 100%;
*/
}

.mainSection .numberPlate img {
width: 40px;
}


.mainSection .titleWrap {
padding-left: 35px;
}

.mainSection h3 {
font-size: 2.0rem;
font-weight: bold;
/*color: #40ad5d;
color: #4e8540;*/
color:#2e8540;
line-height: 1em;
margin-bottom: 5px;
}

.mainSection h4 {
font-size: 2.6rem;
font-weight: bold;
line-height: 1.4em;
}
.mainSection h4 .red {
color: #cc3333;
font-size: 2.6rem;
}

.mainSection .illustCut001 {
text-align: center;
padding: 15px 0;
}

.mainSection .illustCut001 img {
max-width: 100%;
}

.mainSection .illustCut002 {
text-align: center;
padding: 15px 0;
}

.mainSection .illustCut002 img {
max-width: 100%;
}

.mainSection .illustCut003 {
text-align: center;
padding: 15px 0;
}

.mainSection .illustCut003 img {
max-width: 100%;
}

.mainSection .illustCut004 {
text-align: center;
padding: 15px 0;
}

.mainSection .illustCut004 img {
max-width: 100%;
}

.mainSection .illustCut005 {
text-align: center;
padding: 15px 0;
}

.mainSection .illustCut005 img {
max-width: 320px;
}

.mainSection .body {
font-size: 1.8rem;
line-height: 1.75em;
}

.mainSection .body .underline {
font-size: 1.8rem;
text-decoration: underline;
}


.mainSection .yesNoButtonList {
display: flex;
justify-content: center;
margin: 30px 0 0 0;
}

.mainSection .yesNoButtonList input[type=radio] {
display: none;
}

.mainSection .yesNoButtonList label {
display: block;
background-color: #fff;
width: 120px;
line-height: 60px;
text-align: center;
font-size: 2.5rem;
font-weight: bold;
border: 2px solid #ccc;
}

.mainSection .yesNoButtonList li:nth-child(1) label {
border-right: none;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.mainSection .yesNoButtonList li:nth-child(1) label:has(input[type=radio]:checked) {
background-color: #cc3333;
color: #fff;
border: 2px solid #cc3333;
border-right: none;
}

.mainSection .yesNoButtonList li:nth-child(2) label {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.mainSection .yesNoButtonList li:nth-child(2) label:has(input[type=radio]:checked) {
/*background-color: #ccc;*/
background-color: #0066cc;
color: #fff;
}

#calcButton {
text-align: center;
margin: 30px 0;
}



.mainSection .calc-btn {
display: inline-block;
width: calc(100% - 30px);
max-width: 470px;
height: 65px;
line-height: 1.2em;
font-size: 2.4rem;
font-weight: bold;
text-align: center;
box-sizing: border-box;
background-color: #2e8540;
border: none;
outline: none;
color: #fff;
border-radius: 15px;
}

.mainSection .calc-btn:hover {
cursor: pointer;
opacity: 0.5;
}

#calcButton input[type=reset] {
margin-top: 15px;
background-color: #666;
}


.mainSection .illustCut005 .caption005 {
display: block;
margin-top: 1em;
font-size: 2.2rem;
font-weight: bold;
color: #2e8540;
line-height: 1.25em;
}



	.mainSection {
	}

	.mainSection .mainWrap {
	top: -80px;
	}

	.mainSection h2 {
	text-align: center;
	padding:  0;
	}

	.mainSection h2 span {
	font-size: 3.2rem;
	line-height: 1.5em;
	padding: 20px 0 20px 75px;
	background-size: 60px;
	background-position: left center;
	text-align: left;
	text-indent: 15px;
	}

	.mainSection .mainList {
	}

	.mainSection .mainList > li {
	padding-top: 50px;
	padding-bottom: 50px;
	min-height:  none;
	margin: 0 30px 0 30px;
	}

	.mainSection .numberPlate {
	position: absolute;
	top: 50px;
	left: -30px;
	background-size: 80px auto;
	background-position: left top;
	width: 80px;
	height: 165px;
	font-size: 6.0rem;
	line-height: 160px;
	padding-right: 15px;
	}
	
	.mainSection .numberPlate img {
	width: 80px;
	}

	

	.mainSection .titleWrap {
	padding-left: 80px;
	height: 168px;
	display: table-cell;
	vertical-align: middle;

	}

	.mainSection h3 {
	width: 100%;
	line-height: 1em;
	margin-bottom: 10px;
	}

	.mainSection h4 {
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 2.8rem;
	line-height: 1.5em;
	}
	.mainSection h4 .red {
	color: #cc3333;
	font-size: 2.8rem;
	}

	.mainSection .illustCut001 {
	text-align: center;
	padding: 0;
	position: absolute;
	left: 680px;
	bottom: 40px;
	}

	.mainSection .illustCut001 img {
	max-width:  none;
	}


	.mainSection .illustCut002 {
	text-align: center;
	padding: 0;
	position: absolute;
	left: 380px;
	bottom: 50px;
	}

	.mainSection .illustCut002 img {
	max-width:  none;
	}


	.mainSection .illustCut003 {
	text-align: center;
	padding: 0;
	position: absolute;
	left: 700px;
	bottom: 30px;
	}
	
	.mainSection .mainList > li:nth-child(3) {
	padding-bottom: 80px;
	}
	
	.mainSection .mainList > li:nth-child(5) {
	padding-bottom: 140px;
	}

	.mainSection .illustCut003 img {
	max-width:  none;
	}
	
	.mainSection .mainList > li:nth-child(3) .body {
	padding-left: 0;
	}

	.mainSection .illustCut004 {
	text-align: center;
	padding: 0;
	position: absolute;
	left: 430px;
	bottom: 40px;
	}

	.mainSection .illustCut004 img {
	max-width:  none;
	}

	.mainSection .illustCut005 {
	text-align: center;
	padding: 0;
	position: absolute;
	left: 560px;
	bottom: 30px;
	}

	.mainSection .illustCut005 img {
	max-width:  320px;
	}
	
	.mainSection .illustCut005 .caption005 {
	font-size: 2.6rem;
	}
	
	.mainSection .mainList > li:nth-child(5) .body {
	width: 430px;
	padding-left: 0px;
	padding-top: 1em;
	font-size: 2.2rem;
	}

	.mainSection .body {
	font-size: 2.0rem;
	line-height: 1.75em;
	padding-left: 80px;
	}
	
	.mainSection .body .underline {
	font-size: 2.0rem;
	}

	
	.mainSection li:nth-child(1) .body {
	width: 500px;
	}

	.mainSection .yesNoButtonList {
	display: flex;
	justify-content: center;
	margin: 30px 0 0 0;
	position: absolute;
	z-index: 10;
	top: 80px;
	right: 0;
	}
	
	.mainSection li:nth-child(5) .yesNoButtonList {
	top: 50px;
	}

	.mainSection .yesNoButtonList input[type=radio] {
	display: none;
	}

	.mainSection .yesNoButtonList label {
	display: block;
	background-color: #fff;
	width: 120px;
	line-height: 60px;
	text-align: center;
	font-size: 2.5rem;
	font-weight: bold;
	border: 2px solid #ccc;
	}

	.mainSection .yesNoButtonList li:nth-child(1) label {
	border-right: none;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	}
	.mainSection .yesNoButtonList li:nth-child(1) label:has(input[type=radio]:checked) {
	background-color: #cc3333;
	color: #fff;
	border: 2px solid #cc3333;
	border-right: none;
	}

	.mainSection .yesNoButtonList li:nth-child(2) label {
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	}
	.mainSection .yesNoButtonList li:nth-child(2) label:has(input[type=radio]:checked) {
	}
	
	.mainSection .yesNoButtonList label:hover {
 	cursor: pointer;
	}


	.mainSection .calc-btn {
	font-size: 2.8rem;
	height: 90px;
	}

	#calcButton {
	margin: 70px 0;
	}

	#calcButton input[type=reset] {
	margin-top: 0;
	margin-left: 15px;
	max-width: 180px;
	}




/* ============================
		resultSection
 ============================ */

.resultSection {
padding: 20px 0;
}

.resultSection .mainWrap {
padding: 15px;
box-sizing: border-box;
}

.resultSection h2 {
display: inline-block;
font-size: 2.0rem;
font-weight: bold;
color: #fff;
width: 150px;
text-align: center;
background-color: #40ad5d;
margin-bottom: 10px;
border-radius: 15px;
align-self: flex-start;
line-height: 60px;
}

.resultSection .resultMessage {
font-weight: bold;
line-height: 1.2em;
border-bottom: 6px solid #40ad5d;
padding-bottom: 5px;
font-size: 1.2rem;
margin-bottom: 0;
}
.resultSection .resultMessage span {
font-weight: bold;
color: #cc3333;
margin: 0 0.2em;
font-size: 1.8rem;
}

.resultSection .detailMessage {
font-size: 1.3rem;
font-weight: bold;
line-height: 1.25em;
margin-bottom: 0.75em;
}
.resultSection .detailMessage span {
color: #cc3333;
margin: 0 0.2em;
font-size: 1.8rem;
}

.resultSection .detailMessage span input {
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Segoe UI, "Helvetica Neue", HelveticaNeue, "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
font-size: 1.8rem;
font-weight: bold;
color: #cc3333;
border: none;
outline: none;
width: 1em;
text-align: center;
padding: 0;
margin: 0;
background-color: transparent;
}



.resultSection .illust006 {
margin: 0;
position: absolute;
bottom: 0px;
right: 0px;
}
.resultSection .illust006 img {
width: 100px;
}



.resultSection .resultMainList {
border-top: 1px solid #fa9a00;
padding-top: 10px;
}

.resultSection .resultMainList > li {
position: relative;
border-bottom: 1px solid #fa9a00;
padding-bottom: 10px;
margin-bottom: 10px;
}
.resultSection .resultMainList > li:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}




.resultSection .numberPlate {
position: absolute;
top: 0;
left: 0;
font-weight: bold;
color: #fff;
background-image: url("../images/bg_result_numbers001.svg");
background-repeat: no-repeat;
text-align: center;

width: 30px;
height: 30px;
line-height: 30px;
font-size: 2.4rem;
background-size: 30px;
}


.resultSection .titleWrap {
padding-left: 40px;
margin-bottom: 5px;
}



.resultSection .resultMainList h3 {
font-size: 1.2rem;
font-weight: bold;
color: #40ad5d;
line-height: 1em;
margin-bottom: 0;
}

.resultSection .resultMainList h4 {
font-size: 1.4rem;
font-weight: bold;
line-height: 1.2em;
}
.resultSection .resultMainList h4 .red {
color: #cc3333;
font-size: 1.4rem;
}

.resultSection .detailBlock {
margin-left: 0px;
}

.resultSection .detailBlock dl {
background-color: #fee6bf;
border-radius: 15px;
padding: 10px 10px 5px 10px;
display: flex;
margin-bottom: 0;
}

.resultSection .detailBlock dt {
text-align: center;
font-size: 1.6rem;
font-weight: bold;
background-color: #cc3333;
color: #fff;
align-self: flex-start;
width: 60px;
line-height: 35px;
border-radius: 10px;
margin-bottom: 5px;
}
.resultSection .detailBlock dt.yes {
background-color: #cc3333;
color: #fff;
}
.resultSection .detailBlock dt.no {
background-color: #0066cc;
color: #fff;
}

.resultSection .detailBlock dd {
width: calc(100% - 60px);
box-sizing: border-box;
font-size: 1.2rem;
padding-left: 10px;
margin-bottom: 0;
padding-bottom: 0;
line-height: 1.5em;
}


.resultSection .underline {
text-decoration: underline;
font-size: 1.4rem;
}


#printButton {
display: none
}

#printButton a {
display: inline-block;
width: calc(100% - 30px);
max-width: 470px;
line-height: 1.2em;
font-size: 2.4rem;
font-weight: bold;
text-align: center;
box-sizing: border-box;
background-color: #40ad5d;
border: none;
outline: none;
color: #fff;
padding: 10px 0;
border-radius: 15px;
}

#printButton a:hover {
cursor: pointer;
}


.reloadButton {
display: none;
}

#reloadButton {
-moz-appearance: none;
-webkit-box-sizing: none;
-webkit-appearance: none;
appearance: none;
outline: none;
border: none;
background-color: #999;
font-size: 2.4rem;
font-weight: bold;
color: #fff;
line-height: 1.25em;
width: 100px;
height: 100px;
border-radius: 100px;
}

.resultSection .topBlock {
display: flex;
position: relative;
padding-bottom: 0px;
}



.resultSection .topBody {
padding-left: 40px;
box-sizing: border-box;
padding-top: 0px;
padding-right: 100px;
}



.resultSection .topLead {
font-size: 1.2rem;
line-height: 1.6em;
margin-bottom: 10px;
}







/* ============================
		footer
 ============================ */


footer {
}

footer .siteName {
font-size: 1.2rem;
text-align: center;
background-color: #fad980;
line-height: 1.2em;
padding: 0.5em 0;
}

footer .copyright {
font-size: 1.2rem;
text-align: center;
line-height: 30px;
background-color: #fdb81e;
}



/* ============================
		other
 ============================ */

/* for SP */
@media screen and (max-width: 767px) {
}

/* for TB */
@media screen and (max-width: 945.5px) and (min-width: 768px){
}

/* for PC */
@media screen and (min-width: 946px) {
}