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

/* ================================================================================

	sub_column

================================================================================ */
/* --------------------------------------------------

	sub_nav

-------------------------------------------------- */
#main .sub_nav h2{ font-size: 30px;}
#main .sub_nav h2:after{ font-size: 100px;}

@media screen and (max-width:768px){
#main .sub_nav:before,
#main .sub_nav:after{ display: none;}
}

@media screen and (max-width:640px){
#main .sub_nav{
	background: none;
	margin: 0 auto;
	padding: 0 0 50px;
	box-sizing: border-box;}

#main .sub_nav:after,
#main .sub_nav:before{ display: none;}

#main .sub_nav:last-of-type{ margin-top: 0;}

#main .sub_nav h2{ font-size: 20px;}

#main .sub_nav p span{ background: none;}



/* ---- ul ------------------ */
#main .sub_nav .nav_list .sub_nav01 a:before{ content: "\e94a"; color: #ff9000;}
#main .sub_nav .nav_list .sub_nav02 a:before{ content: "\e95f"; color: #007eda;}
#main .sub_nav .nav_list .sub_nav03 a:before{ content: "\e93d"; color: #cc0000;}
#main .sub_nav .nav_list .sub_nav04 a:before{ content: "\e944"; color: #626999;}

#main .sub_nav .nav_list .sub_nav01:hover{ background: #ff9000;}
#main .sub_nav .nav_list .sub_nav02:hover{ background: #007eda;}
#main .sub_nav .nav_list .sub_nav03:hover{ background: #cc0000;}
#main .sub_nav .nav_list .sub_nav04:hover{ background: #626999;}

}





/* ----------------------------------------------------

	sub_column Common 1023

---------------------------------------------------- */
article section:nth-of-type(n + 2) {
	width: 100%;
    margin: 50px auto 0;
	background-color: #FFF;}


/* ----------------------------------------------------

	#first_contact sub_column 1023

---------------------------------------------------- */
#first_contact #main .sub_nav{ padding: 0;}

#first_contact #main .sub_column h2{ font-size: 30px;}

#first_contact #main .sub_column h3{
    padding: 10px;
    box-sizing: border-box;
    font-size: 24px;}



/* ----------------------------------------------------

	#choose sub_column 1023

---------------------------------------------------- */
#choose #main .sub_column h2{ font-size: 30px;}

#choose #main dl{ width: 100%;}

#choose #main .sub_column dl dt{ width: 100%;}

#choose #main .sub_column dt:after{
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 10px solid transparent;
    border-top: 10px solid #fce8d1;}

#choose #main .sub_column dd:nth-of-type(odd) figure{
	margin: 10px auto 30px;
	float: inherit;
	width: 50%;
	text-align: center;}

#choose #main .sub_column dd:nth-of-type(even) figure{
	margin: 10px auto 30px;
	float: inherit;
	width: 50%;
	text-align: center;}

#choose #main .sub_column dd figure img{
	width: 100%;
	height: auto;}




/* ----------------------------------------------------

	#caution sub_column 1023

---------------------------------------------------- */
#caution #main .sub_column h2{ font-size: 30px;}
#caution #main .sub_column:nth-of-type(2) dl dt,
#caution #main .sub_column:nth-of-type(2) dl dd li{ font-size: 16px;}



/* ----------------------------------------------------

	#bad_company sub_column 1023

---------------------------------------------------- */
#bad_company #main .sub_column h2{ font-size: 30px;}
#bad_company #main .sub_column:nth-of-type(2) dl dt,
#bad_company #main .sub_column:nth-of-type(2) dl dd li{ font-size: 16px;}




/* ----------------------------------------------------

	#merit sub_column 1023

---------------------------------------------------- */
#merit #main .sub_column:first-of-type h2{ font-size: 30px;}

#merit #main .sub_column dl dt:after{
    left: 10%;
    border: 10px solid transparent;
    border-top: 10px solid #fce8d1;}




	
@media screen and (max-width:768px){
#main article section:nth-of-type(n + 2){ margin-top: 50px;}


/* ----------------------------------------------------

	#first_contact .sub_column 768

---------------------------------------------------- */
#first_contact #main .sub_column:first-of-type:before,
#first_contact #main .sub_column:first-of-type:after{ display: none;}

#first_contact #main .sub_column .graph{ display: none;}
#first_contact #main .sub_column:nth-of-type(2) .graph_sp{
	display: block;
	width: 100%;
	margin: 30px auto;}

#first_contact #main .sub_column:nth-of-type(2) .graph_sp img{ width: 100%;}




/* ----------------------------------------------------

	#choose .sub_column 768

---------------------------------------------------- */
#choose #main .sub_column:first-of-type:before,
#choose #main .sub_column:first-of-type:after{ display: none;}



/* ----------------------------------------------------

	#caution .sub_column 768

---------------------------------------------------- */
#caution #main .sub_column:first-of-type:before,
#caution #main .sub_column:first-of-type:after{ display: none;}



/* ----------------------------------------------------

	#bad_company .sub_column 768

---------------------------------------------------- */
#bad_company #main .sub_column:first-of-type:before,
#bad_company #main .sub_column:first-of-type:after{ display: none;}

#bad_company #main .sub_column:nth-of-type(2) h3 {
    width: 100%;
    position: relative;
    margin: 0 auto;
    padding: 16px 16px 16px 80px;
    box-sizing: border-box;
    color: #FFF;
    line-height: 2.2rem;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: .06rem;
    border-radius: 6px;}



/* ----------------------------------------------------

	#merit .sub_column 768

---------------------------------------------------- */
#merit #main .sub_column:first-of-type:before,
#merit #main .sub_column:first-of-type:after{ display: none;}

#merit #main .sub_column dl dt { width: 80%;}
#merit #main .sub_column dl dt:after { left: 10%;}


}





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

	.sub_column Common 640

---------------------------------------------------- */
article section{ padding: 0;}

#main .sub_column,
#main section.sub_nav:nth-of-type(n + 3){
	margin: 0 auto;
	padding: 0 0 50px;
	box-sizing: border-box;}

#first_contact #main .sub_nav .sp_contact,
#merit         #main .sub_column .sp_contact,
#choose        #main .sub_column .sp_contact,
#caution       #main .sub_column .sp_contact,
#bad_company   #main .sub_column .sp_contact{ margin-bottom: 50px;}

#merit #main .sub_column + .sub_column{ margin-top: 50px;}

#merit       #main section.sub_nav:nth-of-type(n + 2),
#choose      #main section.sub_column:nth-of-type(2),
#choose      #main section.sub_nav:nth-of-type(n + 3),
#caution     #main section.sub_column:nth-of-type(n + 2),
#caution     #main section.sub_nav:nth-of-type(n + 3),
#bad_company #main section.sub_column:nth-of-type(n + 2),
#bad_company #main section.sub_nav:nth-of-type(n + 3){ padding-top: 50px;}




/* ---- p ---- */
#main .sub_nav p + p,
#main .sub_column p + p{ margin-top: 16px;}

#main .sub_nav p:not(.text):not(.number),
#main .sub_column p:not(.text):not(.number){
	width: 94%;
	margin-left: auto;
	margin-right: auto;}





/* ----------------------------------------------------

	#first_contact sub_column 640

---------------------------------------------------- */
#first_contact #main .sub_nav h2 {
	position: relative;
	margin: 0 auto;
	box-sizing: border-box;
	height: 180px;
	color: #000;
	font-size: 18px;
	line-height: 180px;
	background-color: #FFF;
	z-index: 1;}

#first_contact #main .sub_nav h2:after {
	position: absolute;
	font-family: "icons";
	content: "\e907";
	left: 0;
	right: 0;
	bottom: insert;
	margin: auto;
	height: 0;
	top: -100%;
	color: #00ad9c;
	opacity: .1;
	font-size: 140px;
	font-weight: normal;
	background: none;
	z-index: -1;}

#first_contact #main .sub_column h3{ font-size: 18px;}

#first_contact #main .sub_nav .nav_list{
	width: 94%;
	margin-top: 30px;}



/* ----------------------------------------------------

	#choose sub_column 640

---------------------------------------------------- */
#choose #main .sub_column h2 {
	position: relative;
	margin: 0 auto;
	box-sizing: border-box;
	height: 180px;
	color: #000;
	font-size: 18px;
	line-height: 180px;
	background-color: #FFF;
	z-index: 1;}

#choose #main .sub_column h2:after{
	position: absolute;
	font-family: "icons";
	content: "\e95f";
	left: 0;
	right: 0;
	bottom: insert;
	margin: auto;
	height: 0;
	top: -100%;
	color: #007eda;
	opacity: .1;
	font-size: 140px;
	font-weight: normal;
	background: none;
	z-index: -1;}

#choose #main .sub_nav h2{ width: 94%;}

#choose #main .sub_column dd:nth-of-type(odd) figure,
#choose #main .sub_column dd:nth-of-type(even) figure{
	width: 80%;
	max-width: 320px;
	margin: 10px auto 30px;
	float: inherit;
	text-align: center;}


#choose #main .sub_column dl{
	width: 94%;}

#choose #main .sub_column dl dt{
    padding: 16px 10px 10px 10px;
	text-align: center;}

#choose #main .sub_column dl dt:before{
	top: -14px;
    left: 0;
	right: 0;
	margin: auto;}




/* ----------------------------------------------------

	#caution sub_column 640

---------------------------------------------------- */
#caution #main .sub_column h2 {
	position: relative;
	margin: 0 auto;
	box-sizing: border-box;
	height: 180px;
	color: #000;
	font-size: 18px;
	line-height: 180px;
	background-color: #FFF;
	z-index: 1;}


#caution #main .sub_column h2:after{
	position: absolute;
	font-family: "icons";
	content: "\e93d";
	left: 0;
	right: 0;
	bottom: insert;
	margin: auto;
	height: 0;
	top: -100%;
	color: #cc0000;
	opacity: .1;
	font-size: 140px;
	font-weight: normal;
	background: none;
	z-index: -1;}

#caution #main .sub_nav h2{ width: 94%;}

#caution #main .sub_column h3{ font-size: 20px;}

#caution #main .sub_column dl{
	width: 94%;}

#caution #main .sub_column dl dd ol {
    width: 100%;
    margin: 30px 0;}



/* ----------------------------------------------------

	#bad_company sub_column 640

---------------------------------------------------- */
#bad_company #main .sub_column h2{
	position: relative;
	margin: 0 auto;
	box-sizing: border-box;
	height: 180px;
	color: #000;
	font-size: 18px;
	line-height: 180px;
	background-color: #FFF;
	z-index: 1;}

#bad_company #main .sub_column h2:after{
	position: absolute;
	font-family: "icons";
	content: "\e944";
	left: 0;
	right: 0;
	bottom: insert;
	margin: auto;
	height: 0;
	top: -100%;
	color: #626999;
	opacity: .1;
	font-size: 140px;
	font-weight: normal;
	background: none;
	z-index: -1;}

#bad_company #main .sub_column:nth-of-type(2) h3{
	width: 94%;
    padding: 10px 0;
	font-size: 16px;
	text-align: center;
    line-height: 1.8rem;}

#bad_company #main .sub_column:nth-of-type(2) h3 span{
	display: block;
	font-size: 18px;}
	
#bad_company #main .sub_column:nth-of-type(2) h3:after{
    font-family: "icons";
    content: "\e93b";
    position: absolute;
    display: block;
	top: 50%;
	right: 10px;
    font-size: 18px;}

#bad_company #main .sub_column:nth-of-type(2) h3:before {
    position: absolute;
    top: 50%;
    left: 10px;
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;}

#bad_company #main .sub_column:nth-of-type(2) h4{ font-size: 16px;}

#bad_company #main section.sub_nav{ padding-bottom: 0;}
	
#bad_company #main .bad_box:first-of-type h5,
#bad_company #main .bad_box:nth-of-type(2) h5,
#bad_company #main .bad_box:nth-of-type(3) h5{
    width: 100%;
    margin: 70px 0 30px auto;
    padding: 22px 10px 10px;
    font-size: 18px;
    text-align: center;}

#bad_company #main .bad_box:first-of-type h5:before,
#bad_company #main .bad_box:nth-of-type(2) h5:before,
#bad_company #main .bad_box:nth-of-type(3) h5:before{
    display: block;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 36px;
    text-align: center;}

#bad_company #main .sub_column .bad_box{ padding: 10px;}

#bad_company #main .bad_point dt{
    width: 100%;
    padding: 20px 10px 10px;
	text-align: center;}

#bad_company #main .bad_point dt:before {
    position: absolute;
    display: block;
	top: -10px;
    left: 0;
	right: 0;
	margin: auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;}

#bad_company #main .bad_point dt:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #fce8d1;}



#bad_company #main .bad_box:first-of-type ol{
	width: 94%;
	margin-left: auto;
	margin-right: auto;}

#bad_company #main .bad_box:first-of-type ol li{
	font-size: 16px;}


#bad_company #main .bad_box:nth-of-type(2) ol {
    width: 94%;
    margin: 30px auto 0;
    counter-reset: number;}

#bad_company #main .bad_box:nth-of-type(3) ol{
	width: 94%;}

#bad_company #main .bad_box:nth-of-type(3) ol li {
    padding: 10px 10px 4px 40px;
    font-size: 16px;}

#bad_company #main .blog {
    position: relative;
    margin: 50px auto;
    padding: 10px;
    box-sizing: border-box;
    background-color: #eaf2f2;}

#bad_company #main .blog:before,
#bad_company #main .blog:after { font-size: 36px;}

#bad_company #main .blog .link { text-align: inherit;}

#bad_company #main .blog .link a {
    position: relative;
    margin: 0 26px 0 0;
    color: #006666;
    transition: all .2s;}




/* ----------------------------------------------------

	#merit sub_column 640

---------------------------------------------------- */
#merit #main .sub_column:first-of-type h2 {
	position: relative;
	margin: 0 auto;
	box-sizing: border-box;
	height: 180px;
	color: #000;
	font-size: 18px;
	line-height: 180px;
	background-color: #FFF;
	z-index: 1;}

#merit #main .sub_column:first-of-type h2:after{
	position: absolute;
	font-family: "icons";
	content: "\e94a";
	left: 0;
	right: 0;
	bottom: insert;
	margin: auto;
	height: 0;
	top: -100%;
	color: #ff9000;
	opacity: .1;
	font-size: 140px;
	font-weight: normal;
	background: none;
	z-index: -1;}

#merit #main .sub_nav h2{ width: 94%;}

#merit #main .sub_column h3{
	width: 94%;
	font-size: 18px;}

#merit #main .sub_column h4{
    width: 94%;
	display: block;
    margin: 70px auto 30px;
    padding: 22px 10px 10px;
    font-size: 18px;
    text-align: center;}

#merit #main .sub_column h4:before{
    display: block;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 36px;
    text-align: center;}

#merit #main .sub_column dl{
	width: 94%;}

#merit #main .sub_column dl dt { width: 100%;}