@charset "UTF-8";

html{
  font-size: 100%;
  font-family: 'Noto Sans', sans-serif;
  font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}
body{
	background-color: #fff;
	animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

h2,h3,h4,h5 {
  font-family: 'M+ P Type-1 (basic latin) Medium','M+ Type-1 (general-j) Medium', sans-serif;
}
p {
  font-size: 0.875rem;
  line-height: 180%;
  //font-weight: bold;
}
img{
max-width: 100%;
height: auto;
//width /***/:auto;
vertical-align:bottom;　
}
a:hover img.over{
opacity:0.6;
filter:alpha(opacity=60);
-ms-filter: "alpha( opacity=60 )";
}
a {
transition: color 0.3s ease 0s;
}
.box_link {
	position:relative;
}
.box_link a {
	position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-indent:-9999px;
}
.box_link a:hover{
    background-color:#FFF;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.pc {
	display: block;
}
.mob {
	display: none;
}

header, main, footer {
	width: 100%;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
section {
}
.container {
	width: 100%;
}
.bar  {
	font-size: 1.5rem;
	text-align: center;
	line-height: 130%;
	color: #fff;
	padding: 20px;
}
.list {
	text-indent: -1em;
	padding-left: 1em;
}

.float_btn {
	position: fixed;
	right: 0;
	bottom: 100px;
	width: 100px;
}
.float_btn img {
	margin-bottom: 10px;
}

h3  {
	font-size: 2rem;
	line-height: 150%;
	font-weight: bold;
	color: #173155;
	margin-bottom: 20px;
}
.action {
	text-align: center;
	margin: 50px 10px;
	font-weight: bold;
	line-height: 140%;
}
.action img {
	margin-top: 10px;
	box-shadow: 2px 2px 4px gray;
}
.face {
	width: 200px;
	height: 200px;
	line-height: 45px;
	margin: 0px auto 10px;
	text-align: center;
	border-radius: 50%;
	-webkit-border-radius: 50%; /* Safari、Google Chrome */
	-moz-border-radius: 50%;
}
.p_info {
    margin: 10px 50px;
    text-indent: -1em;
	padding-left: 1em;
	line-height: 140%;
	font-size: .9rem;
}
/* header
-----------------------------------------------*/

header {
	position: relative;
	display: block;
}
/*
h1 {
	width: 96%;
	margin-left: 2%;
	margin-right: 2%;
	padding-top: 2%;
	position: absolute;
	z-index: 2;
}
*/
header .back {
	position: absolute;
	z-index: 1;
}
header .btn {
	position: absolute;
	z-index: 3;
	margin-left: 6%;
	margin-right: 6%;
	padding-top: 38%;
	max-width: 563px;
	width: 88%;
}
header .bar {
	background-color: #173155;
	font-size: 1.3rem;
}

/* 1st
---------------------------------------------*/
#first .bar  {
	background-color: #FFCC00;
	color: #173155;
	font-weight: bold;
}
#first .container  {
	text-align: center;
	margin-bottom: 50px;
}
#first .point_circle {
	width: 70px;
	height: 70px;
	text-align: center;
	margin: -35px auto 30px;
	border-radius: 50%;
	-webkit-border-radius: 50%; /* Safari、Google Chrome */
	-moz-border-radius: 50%;
	background-color: #FFCC04;
	z-index: 10;
	line-height: 70px;
	position: relative;
	font-size: 14px;
	color: #173155;
}
#first .point_circle span {
	font-size: 20px;
	font-weight: bold;
}

/* 2nd
----------------------------------------------*/
#second {
	background-color: #173155;
	color: #fff;
}
#second .bar  {
	background-color: #FFCC00;
	color: #173155;
	font-weight: bold;
	padding: 30px 0px;
}
#second .container {
	padding: 40px 0px 50px 0px;
}
#second .container p.info {
	text-align: center;
	font-size: 1.1rem;
	font-weight: bold;
	margin-bottom: 40px;
}
#second .container p.info span {
	color: #FFCC00;
}

#second article {
	margin-left: auto;
	margin-right: auto;
	max-width: 550px;
}
#second article .box {
	padding: 20px 0px;
	background-color: #fff;
	border-radius: 0px 0px 10px 10px ;
	-webkit-border-radius: 0px 0px 10px 10px; /* Safari、Google Chrome */
	-moz-border-radius: 0px 0px 10px 10px;
	color: #000;
	margin-bottom: 30px;
}
#second article h3 {
	padding: 20px;
	background-color: #FD3237;
	color: #fff;
	font-size: 1.6rem;
	border-radius: 10px 10px 0px 0px ;
	-webkit-border-radius: 10px 10px 0px 0px; /* Safari、Google Chrome */
	-moz-border-radius: 10px 10px 0px 0px;
	margin-bottom: 0px;
	text-align: center;
}

#second .circle {
	width: 45px;
	height: 45px;
	line-height: 45px;
	margin: 0px auto 20px;
	text-align: center;
	border-radius: 50%;
	-webkit-border-radius: 50%; /* Safari、Google Chrome */
	-moz-border-radius: 50%;
	background-color: #FC3336;
	font-size: 1.6rem;
	font-weight: bold;
	color: #fff;
}

#second article h4 {
	color: #FC3336;
	text-align: center;
	font-size: 1.4rem;
	font-weight: bold;
	margin-bottom: 20px;
}
#second article p {
	color: #000;
}

#second article .box article {
	border-bottom: dotted 1px #ccc;
	padding: 40px 0px 40px;
	margin: auto 30px;
}

#second article .box article.merit {
	border-bottom: none;
	text-align: center;
}
#second article .box article.merit h3 {
	background-color: transparent;
	color: #183256;
	font-size: 1.3rem;
	line-height: 190%;
	letter-spacing: 0.15rem;
}
#second article .box article.merit ul li {
	margin-bottom: 10px;
	line-height: 150%;
	font-size: 1.3rem;
}
#second article .box article.merit ul li strong {
	font-weight: bold;
}
#second article .box article.merit p {
	font-size: 1rem;
	line-height: 130%;
	margin-bottom: 10px;
}

#second article.career h3 {
	background-color: #0CB49B;
}
#second article.career .box article {
	border-bottom: none;
	padding-bottom: 0px;
}
#second article.career .box article h3 {
	background-color: transparent;
	color: #0CB49B;
	font-size: 1.4rem;
	margin: 30px auto 10px;
}
#second article.career .box article .face {
	width: 200px;
	height: 200px;
	line-height: 45px;
	margin: 0px auto 10px;
	text-align: center;
	border-radius: 50%;
	-webkit-border-radius: 50%; /* Safari、Google Chrome */
	-moz-border-radius: 50%;
}
#second article.career .box article .name {
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 160%;
	margin-bottom: 20px;
}
#second article.career .box article .name span {
	font-size: .8rem;
}
#second article.career .box article .company {
	text-align: left;
	background-color: #E8E8E8;
	padding: 25px 30px;
	line-height: 150%;
}
#second article.career .box article .company strong {
	font-weight: bold;
}
#second article.consul h3 {
	background-color: transparent;
	margin-bottom: 20px;
}
#second article.consul h3 span.salon {
	color: #FC3336;
}
#second article.consul h3 span.career {
	color: #0CB49B;
}
#second article.consul h3 span.consul {
	color: #FFCC01;
}
#second article.consul h4 {
	color: #fff;
	font-size: 1.2rem;
	line-height: 150%;
	margin-bottom: 0px;
}
#second article.consul h4 span {
	color: #FFCC00;
}
#second article.consul .action {
	margin: 20px auto 30px;;
}
#second article.consul p {
	color: #fff;
}

/* 3rd
----------------------------------------------*/
#third {
	background-color: #ECEFF0;
}
#third .bar  {
	background-color: #1D5FC0;
	color: #fff;
	font-weight: bold;
	padding: 30px 0px;
	font-size: 1.8rem;
}
#third .container {
	padding: 20px 0px 50px 0px;
}
#third article {
	margin-left: auto;
	margin-right: auto;
	max-width: 550px;
}
#third article.box {
	padding: 30px 20px;
	background-color: #fff;
	border-radius: 10px ;
	-webkit-border-radius: 10px; /* Safari、Google Chrome */
	-moz-border-radius: 10px;
	color: #000;
	margin-bottom: 30px;
}
#third article.box h3 {
	text-align: center;
	font-size: 1.6rem;
}




#third p  {
	font-size: 1.07rem;
	font-weight: normal;
}
#third ul {
	margin: 30px;
}
#third ul li {
	border-bottom: 1px dotted #E1E1E1;
	margin-bottom: 20px;
	padding-bottom: 20px;
}
#third ul li img {
	float: left;
}
#third ul li div {
	margin-left: 15%;
}
#third ul li h3 {
	color: #287FE1;
	font-size: 1.05rem;
	margin-bottom: 10px;
}


/* 4th
----------------------------------------------*/
#fourth {
	
}
#fourth .container {
	padding: 50px 0px 80px;
}
#fourth h2 {
	text-align: center;
	font-weight: bold;
	font-size: 1.4rem;
}
.accordionbox{
	max-width: 580px;
	margin: 30px auto 0px;
}
.accordionlist dt{
	display: block;
	margin-top: 15px;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 20px;
	font-weight: bold;
	text-indent: -1.4em;
	border-bottom: 1px dotted #eee;
}
.accordionlist dt:last-child{
    border-bottom: none !important;
}
.accordionlist dt .title{
    padding-left: 10px;
	width: 85%;
	float: left;
	text-align: left;
}
.accordionlist dt .title p{
	font-size: 1.05rem;
}
.accordionlist dd{
	display: none;
	text-align: left;
	padding-top: 10px;;
	padding-right: 35px;
	padding-bottom: 20px;
	padding-left: 30px;
	font-size: .9rem;
	line-height: 150%;
	margin-bottom: 10px;
	border-bottom: 1px solid #CCCCCC;
}
.accordion_icon,
.accordion_icon span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.accordion_icon {
	position: relative;
	width: 30px;
	height: 30px;
	float: right;
	margin-right: 5px;
	margin-top: 10px;
}
.accordion_icon span {
	position: absolute;
    left: 6px;
    width: 50%;
	height: 2px;
    background-color: #CCCCCC;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-ms-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
}
.accordion_icon span:nth-of-type(1) {
    top: 5px;
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
    top: 5px;
	transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}
/*＋、－切り替え*/
.accordion_icon.active span:nth-of-type(1) {
	display:none;
}
.accordion_icon.active span:nth-of-type(2) {
	top: 5px;
	transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}



/* 5th
----------------------------------------------*/
#fifth {
	background-color: #ECEFF0;
}
#fifth .container {
	padding: 20px 0px;
}
#fifth article {
	margin-left: auto;
	margin-right: auto;
	max-width: 550px;
}
#fifth .action img {
	margin-bottom: 10px;
}

/* 12th
----------------------------------------------*/

#seminar .container {
	padding: 20px 0px 50px 0px;
}
#seminar .bar  {
	background-color: #287FE1;
	padding: 30px 30px 5px;
}
#seminar h2  {
	color: #FFD202;
	font-size: 1.8rem;
	margin-bottom: 30px;
	font-weight: bold;
}
#seminar p  {
	font-size: 1.07rem;
	font-weight: normal;
}
#seminar ul {
	margin: 30px;
}
#seminar ul li {
	border-bottom: 1px dotted #E1E1E1;
	margin-bottom: 20px;
	padding-bottom: 20px;
}
#seminar ul li h3 {
	color: #287FE1;
	font-size: 1.05rem;
	margin-bottom: 10px;
}



/* footer
-----------------------------------------------*/

footer {
	text-align: center;
	background-color: #173155;
	padding: 20px 0px 20px 0px;
	color: #fff;
}





@media (min-width: 641px) and (max-width: 950px) {
	

}


@media screen and (min-width: 641px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}



@media (max-width: 640px) {

* {
	box-sizing: border-box;
}
.float_btn {
	width:  60px;
}
.pc {
	display: none;
}
.mob {
	display: block;
}
.container {
	width: 96%;
	margin-left: 2%;
	margin-right: 2%;
}
	
header .btn {
	margin-left: 4%;
	margin-right: 4%;
	padding-top: 37%;
}
#second article {
	max-width: 90%;
}
#fourth .container {
	padding-left: 2%;
	padding-right: 2%;
	width: 96%;	
}	
#fourth .flexbox ul li {
	width:47%;
}
#fifth .container {
	padding-left: 2%;
	padding-right: 2%;
	width: 96%;	
}
#sixth .container {
	padding-left: 2%;
	padding-right: 2%;
	width: 96%;	
}
#seventh .container {
	padding-left: 2%;
	padding-right: 2%;
	width: 96%;	
}
#eighth .container {
	padding-left: 2%;
	padding-right: 2%;
	width: 96%;	
}
#ninth .container {
	padding-left: 2%;
	padding-right: 2%;
	width: 96%;	
}
#ninth article {
	max-width: 90%;
}	
#tenth .container {
	padding-left: 2%;
	padding-right: 2%;
	width: 96%;	
}
#eleventh .container {
	padding-left: 2%;
	padding-right: 2%;
	width: 96%;	
}
	



}