@charset "utf-8";

#about article{
	width:100%;
	max-width:1200px;
	margin:0 auto;
}

#about h2{
	text-align:center;
	color:#60c0bd;
	font-weight:normal;
	font-size:1.5em; 
	margin-top:0;  
	margin-bottom:1.5em;  
}

#about h3{
	color:#60c0bd;
	font-weight:normal;
	font-size:1.2em; 
}

#about #greeting{
	padding:60px 0;
	box-sizing:border-box; 
}

#about #greeting .intyo-name{
	display:inline-block;
	float:left;
	margin-right:30px; 
}

@media screen and (max-width:640px){
#about #greeting .intyo-name{
	display:inline-block;
	float:none;
	margin-right:0; 
}
}

#about #greeting .intyo-name h3{
	margin-top:0; 
}

#about #greeting .intyo-name h3 span{
	display:inline-block;
	padding:0.3em 0.5em;
	margin-right:0.5em; 
	box-sizing:border-box;
	color:#fff;
	background-color:#60c0bd;
	border-radius:10px; 
}

#about #greeting .intyo-name img{
	width:100%;
	max-width:350px; 
}

#about #greeting .intyo-prof{
	width:calc(100% - 400px);
	padding-left:400px; 
}

@media screen and (max-width:640px){
#about #greeting .intyo-prof{
	width:100%;
	padding-left:0; 
	margin-top:30px; 
}
}

#about #greeting .biography , #about #greeting .belongs{
	display:inline-block;
	width:100%; 
}

#about #greeting .biography h4 , #about #greeting .belongs h4{
	display:inline-block;
	padding:0.3em 0.5em;
	margin-top:0; 
	margin-right:0.5em; 
	margin-bottom:0.5em; 
	box-sizing:border-box;
	color:#fff;
	background-color:#60c0bd;
	border-radius:10px; 
	font-weight:normal;
	font-size:1.2em; 
}

#about #greeting .biography ul , #about #greeting .belongs ul{
	list-style:none;
	margin-bottom:1.5em;
	padding:0;
	box-sizing:border-box; 
}

#about #greeting .biography ul li{
    position: relative; 
	padding-left: 7em;
	margin-bottom:0.5em; 
}

#about #greeting .belongs ul li{
    position: relative; 
	margin-bottom:0.5em; 
}

#about #greeting .biography ul li span , #about #greeting .belongs ul li span{
    position: absolute;
    left: 0;
	color: #60c0bd;
}


#about #intyo-sheet{
	padding:60px 0;
	box-sizing:border-box;
	background-color: #fff0e5;
}

#about #intyo-sheet h2{
	 line-height:100px; 
}

#about #intyo-sheet ul{
	list-style:none;
	margin-top:1.5em;
	margin-bottom:0;
	padding:0;
	box-sizing:border-box; 
}

#about #intyo-sheet ul li{
	width:calc(50% - 15px);
	float:left; 
	margin-bottom:30px; 
}

#about #intyo-sheet ul li:nth-child(even){
	margin-left:30px; 
}

#about #intyo-sheet ul li:last-child{
	margin-bottom:0px; 
}

#about #intyo-sheet ul li:last-child(2){
	margin-bottom:0px; 
}

#about #intyo-sheet ul li a{
	width:100%;
	display:block;
	padding:0.8em 0;
	color:#ef8337; 
	border:2px solid #ef8337; 
	border-radius:20px;
	text-align:center;
	text-decoration:none;
	box-sizing:border-box;
	font-size:1.1em; 
	background-color:#fff; 
}

#about #intyo-sheet ul li a:hover{
	color:#fff;
	background-color:#ef8337;
}

#about #visit{
	padding:60px 0;
	box-sizing:border-box; 
}

#about #visit h2{
	margin:0 0 30px; 
}

#about #visit .v-contents{
	margin-top:30px; 
}

#about #visit .v-contents h3{
	margin-top:0; 
	float:left; 
	padding-bottom: 4px;
    border-bottom: 2px dotted #ef8337;
}

#about #visit .v-contents p{
	width:65%;
	float:left; 
}

@media screen and (max-width:640px){
#about #visit .v-contents p{
	width:100%;
	float:none; 
}
}

#about #visit .v-contents img{
	width:30%;
	float:right; 
}

@media screen and (max-width:640px){
#about #visit .v-contents img{
	width:100%;
	float:none; 
}
}

#about #visit .v-contents b{
	font-weight:normal;
	padding-bottom: 4px;
    border-bottom: 2px dotted #ef8337;
    color:#ef8337;
}

#about #feature{
	padding:60px 0;
	box-sizing:border-box; 
	background-color: #f3ffff;
}

#about #feature .f-contents{
	position: relative;
    padding: 2em;
    border: solid 3px #60c0bd;
    width:100%;
    box-sizing: border-box;
	border-radius: 15px;
	background-color:#fff;
	margin-bottom:45px; 
}

#about #feature .f-contents:last-child {
	margin-top:40px; 
}

#about #feature .f-contents:nth-last-child(2) {
	margin-top:40px; 
}

#about #feature .f-contents h3{
	position: absolute;
    display: inline-block;
    top: -13px;
    left: 1em;
    padding: 0 9px;
	margin:0; 
    line-height: 1;
    font-size: 1.5em;
	font-weight:normal;
    background: #FFF;
}

#about #feature .f-contents p.point{
	display:inline-block;
	width:100%; 
}

#about #feature .f-contents b{
	font-weight:normal;
	padding-bottom: 4px;
    border-bottom: 2px dotted #ef8337;
    color:#ef8337;
	margin-right:30px; 
}

@media screen and (max-width:640px){
#about #feature .f-contents b{
	display:inline-block;
	margin:0.5em auto 0;
	text-align:center;
	width:100%; 
}
}

#about #feature .f-contents p span{
	display:inline-block; 
	font-weight:normal;
	padding-bottom: 4px;
	margin-bottom: 10px;
    border-bottom: 2px dotted #ef8337;
    color:#ef8337;
}

#about #feature .f-contents .mail-button a{
	width:100%;
	display:block;
	padding:0.8em 0;
	color:#ef8337; 
	border:2px solid #ef8337; 
	border-radius:20px;
	text-align:center;
	text-decoration:none;
	box-sizing:border-box;
	font-size:1.1em; 
}

#about #feature .f-contents .mail-button a:hover{
	color:#fff;
	background-color:#ef8337;
}


#about #tour{
	padding:60px 0;
	box-sizing:border-box; 
}

@media screen and (max-width:640px){
#about #tour .img-auto-width .item , #about #feature .f-contents .img-auto-width .item {
    width: calc(50% - 15px);
	margin-right:0; 
}
#about #tour .img-auto-width .item:nth-child(odd) {
	margin-right:30px; 
}
#about #feature .f-contents .img-auto-width .item:nth-child(odd) {
	margin-right:30px; 
}
	#about #feature .f-contents .img-auto-width .item img{
		margin-bottom:30px; 
	}
}


#about #CofI{
	padding:60px 0;
	box-sizing:border-box;
    text-align: center;
    padding-bottom: 120px;
}

#about #CofI .phrase{
	text-align: center;
    color: #60c0bd;
    font-weight: normal;
    font-size: 1.5em;
    font-family: "Monotype Corsiva";
    margin-top: 0;
    margin-bottom: 1.5em;
}


#about #message{
	padding:60px 0;
	box-sizing:border-box; 
	background-color: #f3ffff;
}


#about #message .m-contents{
	position: relative;
    padding: 2em;
    border: solid 3px #60c0bd;
    width:100%;
    box-sizing: border-box;
	border-radius: 15px;
	background-color:#fff;
	margin-bottom:45px;
	
}

@media screen and (max-width:640px){
#about #message .m-contents{
	letter-spacing: -0.075em;
	padding: 2em 1.5em;
	}
}

#about #message .m-contents .sp-none{
	display: block;
}
@media screen and (max-width:640px){
#about #message .m-contents .sp-none{
	display: none;
	}
}

#about #message .m-contents h3{
	position: absolute;
    display: inline-block;
    top: -13px;
    left: 1em;
    padding: 0 9px;
	margin:0; 
    line-height: 1;
    font-size: 1.5em;
	font-weight:normal;
    background: #FFF;
}


#about #message .m-contents p{

}

@media screen and (max-width:640px){
#about #message .m-contents p{
	width:100%;
	float:none; 
}
}


.btn--blue,
a.btn--blue {
  color: #fff;
  background-color: #60c0bd;
  text-decoration: none;
  padding: 10px 20px;
}
.btn--blue:hover,
a.btn--blue:hover {
  color: #fff;
  background: #7bcfcc;
  text-decoration:underline;
}