/************************************************************************************

	https://www4.hp-ez.com/hp/kawamoto/  User Setting CSS
	Last Updated: 2021/03/23  K'z Style 

************************************************************************************/

* {
	margin: 0;
	padding: 0;
}

.container:after,
.headerNav h2:after,
.headerNav ul:after,
.footerNav ul:after,
.mainWidth:after,
.recentNews:after,
.companyArea:after,
.auth-captcha:after,
.metaArea:after,
.metaArea ul:after,
.widgetArea ul:after {
	content: "";
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}

.display-none{
	display:none;
}
h1,h2,h3,h4,h5{
	font-weight:normal;
}
body {
	margin:0;
	padding:0;
	color: #666666;
	font-family: "メイリオ", "ＭＳ Ｐゴシック", sans-serif; 
	/* font-size: 18px; */
}
a{/*リンクされた文字*/
	color:#555;
	font-style:normal;
	text-decoration:underline;
}
a:link {/*未訪問のリンク*/
	color:#555;
	font-style:normal;
	text-decoration:none;
}
a:visited {/*訪問後のリンク*/
	color:#6DAE0F;
	text-decoration:none;
}
a:hover {/*マウスをのせたとき*/
	color:#BAD98E;
	text-decoration:underline;
}
a:active {/*クリック中*/
	text-decoration:none;
}
a:hover img {
	opacity: 0.6;
}
th{
	padding:5px;
}
td{
	padding:5px;
}
input {
	margin:3px;
}
img {
	border:none;
}
pre {
	padding:10px 20px;
	background: #fff;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	font-size:12px;
	margin-bottom: 5px;
	color:#000;
	font-family:Verdana,Arial,sans-serif;
	line-height: 1.6em;
}

@font-face {
	font-family: 'FontAwesome';
	font-style: normal;
	font-weight: normal;
	src: url("fontawesome/fontawesome-webfont.eot");
	src: url("fontawesome/fontawesome-webfont.eot?#iefix") format("eot"), url("fontawesome/fontawesome-webfont.woff") format("woff"), url("fontawesome/fontawesome-webfont.ttf") format("truetype"), url("fontawesome/fontawesome-webfont.svg#FontAwesomeRegular") format("svg");
}



[class*="fontawesome-"]:before {
	margin-right: 5px;
	font-family: 'FontAwesome', sans-serif;
}


/* clearfix
----------------------------------------------- */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}

/* Display Control
----------------------------------------------- */
.fb_reset {height:0;}

@media only screen and (min-width: 769px) {
	.sp_only {display: none;}
}
@media only screen and (max-width: 768px) {
	.pc_only {display: none;}
}

/* Header
----------------------------------------------- */
header {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,127661+100 */
	background: #6edac3; /* Old browsers */
	background: -moz-linear-gradient(top,  #6edac3 0%, #127661 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #6edac3 0%,#127661 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #6edac3 0%,#127661 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6edac3', endColorstr='#127661',GradientType=0 ); /* IE6-9 */

	border-bottom: 1px #DDD solid;
	box-shadow:  0 1px 1px 1px rgba(0, 0, 0, 0.03) ;
	-moz-box-shadow : 0 1px 1px 1px  rgba(0, 0, 0, 0.03) ;
	-webkit-box-shadow : 0 1px 1px 1px rgba(0, 0, 0, 0.03) ;
	color: #203431;
}
header hr {
	clear: both;
}

#Header-page{
	margin: 0 auto;
	padding-top: 20px;
}

#logo h1 {
	margin-top: 20px;
	margin-left: 20px;
}
#logo .address {
	margin-top: 20px;
	margin-left: 10px;
	font-size: 80%;
}
#info .contact {
}

#info .tel {
	color: red;
	font-size:180%;
}
#info .eigyo {
	font-size: 80%;
}

@media only screen and (min-width: 769px) {
	#Header-page{
		height:120px;
	}
	#logo {
		float:left;
	}
	
	header .description {
		margin-left: 30px;
	}

	#info {
		float:right;
		margin-right: 20px;
		margin-bottom: 20px;
	}
		
}
@media only screen and (max-width: 768px) {
	header .description {
		margin: 1rem;
	}
	#info {
		margin: 1rem;
	}
	#info .tel {
		display: block;
		text-decoration: none;
		text-align: center;
		border: 2px solid red;
		border-radius: 7px;
		padding: 0.7rem 0;
	}
	#info .eigyo {
		font-size: 90%;
	}
			
}

/* mainVisual
----------------------------------------------- */
.slick-list {
	width: 100%;
	height: 400px;
}
.slick-prev {
    left: 25px !important;
    z-index: 100;
}

.slick-next {
    right: 25px !important;
    z-index: 100;
}
.slick-arrow　{
    z-index:2!important;
}
.slick-next:before, .slick-prev:before {
    font-size: 30px;
	color: #2f9480;
}

.slider {
	width: 100%;
	margin: 0 auto;
}
.slide {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
.slide img {
	width: 100%;
}

#pc_topimage {
	width: 100%;
}
#pc_topimage .slide_content_wrap {
    position: absolute;
    width: 60%;
    top: -10%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#pc_topimage .slide_content {
    display: block;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    padding: 1.5em;
    opacity: 0;
    transform: translateY(100%);
    transition: 0s;
}

#pc_topimage .slide_content.on {
    opacity: 1;
    transform: translateY(0%);
    transition: 4s;
}
#pc_topimage .slide_content_img {
	position: absolute;
	width: 20%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
#pc_topimage .slide_title {
    font-size: 250%;
    color: #DA6E9D;
    margin-top: 15%;
    text-align: center;
}
#pc_topimage .slide_title span {
	color: #555;
}
#pc_topimage .slide_text {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
    font-size: 150%;
    color: #555;
    line-height: 1.2em;
    text-align: center;
}
#pc_topimage .slide_text3 {
    font-size: 100%;
	text-align: left;
}
#pc_topimage .kuwashiku {
    width: 25%;
    margin: 5.5em auto 0 auto;
    padding: 10px;
    border: 3px solid #2f9480;
    border-radius: 5px;
    text-align: center;
    color: #2f9480;
}
#pc_topimage .kuwashiku a {
    display: block;
    color: #2f9480;
    text-decoration: none;
}

@media only screen and (max-width: 768px) {
	.slick-list {
		width: 100%;
		height: 200px;
	}
	#pc_topimage .slide_content_wrap {
		width: 97%;
	}
	#pc_topimage .slide_content_img {
		width: 25%;
	}
	#pc_topimage .slide_title {
		margin-top: 10%;
		font-size: 150%;
	}
	#pc_topimage .slide_text {
		font-size: 90%;
	}
	#pc_topimage .slide_text3 {
		font-size: 80%;
		width: 60%;
	}
	#pc_topimage .kuwashiku {
		width: 55%;
		margin: 6em auto 0 auto;
	}
	#pc_topimage .kuwashiku2 {
		margin: 3em auto 0 auto;
	}
				
}


/* GlobalNavi
----------------------------------------------- */
#naviArea {
}

#gnav {
	width: 80%;
	margin:0 auto;
	padding-top: 40px;
	padding-bottom: 40px;
}
#gnav ul {
	text-align: center;
}

#gnav li {
	float: left;
	list-style: none;
	width: 14.2%;
}
#gnav hr {
	clear: both;
}

#gnav a:hover {
	position: relative;
	top: -10px;
	left:0px;
}

navi {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	background: #127661;
	z-index: 100;
}

navi ul {
	margin: 0 auto;
	width: 95%;
	list-style: none;
	list-style-image: none;
}

navi li {
	float: left;
	margin: 0;
	padding: 0;
	width: 14.2%;
	height: 57px;
}

navi li a {
	display: block;
	padding-top: 15px;
	width: 100%;
	height: 42px;
	color: #fff;
	text-align: center;
	text-decoration: none;
}

navi li a:hover{
	text-decoration: underline;
	background: #6edac3;
	opacity: 0.8;
}

navi li a,
navi li a:link,
navi li a:visited {
	color: #fff;
}

navi li a:hover,
navi li a:focus {
	color: #BAD98E;
}

 @media only screen and (max-width: 768px) {
	#naviArea, navi {
		display: none;
	}
}

/* Footer
----------------------------------------------- */
#Footer {
	text-align: center;
	background:#393e4f;
	color: #fff;
}

#footer-menu{
   	margin: 0 auto;
	padding-top: 20px;
	color:#FFFFFF;
}
#footer-menu p{
	margin-top:15px;
}
#footer-menu a{
	color:#FFFFFF;
}
#footer-menu a:hover{
	color:#BAD98E;
}

#footerArea {
	width: 90%;
	margin:0px auto auto auto;
	text-align: left;
}

#footerArea .right {
	float: right;
}

#footerArea .message {
}

#footerArea .footer_tel {
	font-size: 150%;
	margin-top: 10px;
	margin-bottom: 10px;
}
#footerArea .footer_tel a {
	color: #fff;
}
#footerArea .address {
	float: left;
}

#footerArea hr {
	clear: both;
	border: 0px;
}

#footerArea .copyright {
	text-align: right;
	margin-top: 30px;
	padding-bottom: 20px;
}

@media only screen and (min-width: 769px) {
	#footer-menu ul{
		display: inline-block;
	}
	#footer-menu li{
		display: inline;
		float: left;
		margin: 0 10px;
	}
	
}
@media only screen and (max-width: 768px) {
	#Footer {
		padding-bottom: 60px;
	}
	#footer-menu li{
		margin: 1rem 10px;
	}

}

/* スマホ専用メニューボタン（最下部に表示）
----------------------------------------------- */
@media only screen and (min-width: 769px) {
	#sp_navi {
		display: none;
	}
}
@media only screen and (max-width: 768px) {
	#sp_navi {
        width: 100%;
        display: inline-block;
        z-index: 9999;
        position: fixed;
        bottom: 0px;
        left: 0;
        height: 60px;
        background-color: #127661;
        opacity: 0.8;
        color: #fff;
    }

    .inner {
        margin: 0 auto;
    }

    #sp_navi ul {
        margin: 0;
        padding: 0;
        font-size: 0;
    }

    #sp_navi .sp_navi_item {
        display: inline-block;
        width: calc( 100% / 4 - 2px);
        padding-top: 10px;
        height: 60px;
        border-right: 1px solid #bbb;
        text-align: center;
        vertical-align: bottom;
    }

	#sp_navi .sp_navi_item i {
		font-size: 200%;
		margin-bottom: 5px;
	}

    #sp_navi .sp_navi_item:last-child {
        border-right: none;
    }

    #sp_navi .sp_navi_item a,
	#sp_navi .sp_navi_item button {
        display: block;
        text-decoration: none;
        font-size: 11px;
        color: #fff;
	}

    #sp_navi .sp_navi_item a,
    #sp_navi .sp_navi_item a:link,
    #sp_navi .sp_navi_item a:visited {
        color: #fff;
    }

    #sp_navi_menu {
        border-left: 1px solid #bbb;
    }

    #sp_navi_access {
    }

    #sp_navi_inq {
    }

	#sp_navi_tel {
    }

	/* スマホナビメニュー */
	#nav_container {
		position: fixed;
		height: 100vh;
		width: 100%;
		pointer-events: none;
	}
	#nav_container .bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: calc(100% - 70px);
		visibility: hidden;
		opacity: 0;
		transition: .3s;
		background: #000;
	}
	#sp_navi_menu:focus-within .bg {
		visibility: visible;
		opacity: .9;
	}
	#sp_navi_menu * {
		visibility: visible;
	}
	#sp_navi_menu:focus-within {
		pointer-events: none;
	}
	#sp_navi_menu:focus-within button {
		pointer-events: none;
	}
	#sp_navi_menu button {
		background-color: transparent;
		border: none;
		margin: 0;
		width: 100%;
		font-size: 11px;
		cursor: pointer;
		pointer-events: auto;
		touch-action: manipulation;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
	  
	#nav_content {
		position: fixed;
		top: 0;
		left: 0;
		width: 90%;
		max-width: 300px;
		height: calc(100% - 70px);
		background: #ececec;
		opacity: 1;
		pointer-events: auto;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		transform: translateX(-100%);
		transition: transform .3s;
		will-change: transform;
		contain: paint;
	}
	#sp_navi_menu:focus-within #nav_content {
		transform: none;
	}

	#nav_content li a,
    #nav_content li a:link,
    #nav_content li a:visited {
		font-size: 16px;
		color: #000 !important;
		padding: 1rem 0;
		border-bottom: 1px solid #ccc;
	}
}

/* mainContents
----------------------------------------------- */
#mainContents {
	background: #f8f8f8;
	text-align: center;
}

article {
	background: #fff;
	width: 80%;
	padding-top: 30px;
	margin-left: auto;
	margin-right: auto;
}

.vertical {
/*
	font-family: "游明朝", "ＭＳ 明朝", serif;
	color: #555;
	height: 16em;
	line-height: 1.5em;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	text-align: left;
*/
}

article h3 {
	margin: 30px 20px 30px 20px;
	padding:20px 0 10px 10px;
	font-size: 180%;
	text-align: center;
	font-weight: bold;
	color: #40A892;
	border-bottom: 3px solid #6aa52e;
}

article h3 {
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	position: relative;
}

article h3:hover {
	text-indent: 40px;
}

section {
	padding-bottom: 30px;
	margin-bottom: 50px;
	border-bottom: 1px #ccc dotted;
}

@media only screen and (max-width: 768px) {
	article h3 {
		margin: 1rem;
	}
	section {
		padding-bottom: 0;
		margin-bottom: 0;
	}
	
}
/*------------------------------------------------------
 * Last Update
 *-----------------------------------------------------*/
#last_update {
	text-align:right;
}
@media only screen and (max-width: 768px) {
	#last_update {
		margin-right: 1rem;
	}
}
/*------------------------------------------------------
 * whatsNew
 *-----------------------------------------------------*/
#whatsNew {
	margin: 20px 30px 50px 30px;
	border: 1px solid #E3E3E3;
	box-shadow:  0 0 2px 2px rgba(0, 0, 0, 0.05) ;
	-moz-box-shadow :0 0 2px 2px rgba(0, 0, 0, 0.05) ;
	-webkit-box-shadow :0 0 2px 2px rgba(0, 0, 0, 0.05) ;
}

#whatsNew h3 {
	text-align: left;
	color: #DA6E9D;
}

#whatsNew table {
	text-align: left;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
}
#whatsNew td {
	font-weight: bold;
	border-bottom:1px #CCCCCC dotted;
}
#whatsNew th {
	width: 20%;
	text-align: right;
	font-weight: normal;
	border-bottom:1px #CCCCCC dotted;
}

@media only screen and (max-width: 768px) {
	#whatsNew {
		margin: 0 1rem 2rem;
	}
}
/*------------------------------------------------------
 * point5
 *-----------------------------------------------------*/
#point5 h2 .point-5{
	font-size: 250%;
	color: #da6e9d;
}

#point5 .point {
	width: 100%;
	margin: 30px auto 30px auto;
}

#point5 .point img {
	margin-left: 2em;
	margin-right: 2em;
}

#point5 .point h4 {
	color: #da6e9d;
	font-weight: bold;
	font-size: 150%;
}

@media only screen and (min-width: 769px) {
	#point5 h2 {
		font-size: 200%;
		margin-bottom: 30px;
	}
	
	#point5 .right {
		float: right;
	}
	
	#point5 .left {
		float: left;
	}

	#point5 .area_contents {
		width: 70%;
		float: left;
	}
	
	#point5 .area_space {
		width: 30%;
		float: left;
		color: #fff;
	}
	#point5 .point h4 {
		margin-left: 20px;
	}
}
@media only screen and (max-width: 768px) {
	#point5 h2 {
		font-size: 160%;
	}

	#point5 .point h4 {
		margin-top: 1rem;
	}
	#point5 .area_contents {
		width: 100%;
		float: none;
	}
}
/*------------------------------------------------------
 * contact
 *-----------------------------------------------------*/
#contact {
	margin-bottom: 50px;
}
#contact h3 {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,127661+100 */
	background: #6edac3; /* Old browsers */
	background: -moz-linear-gradient(top,  #6edac3 0%, #127661 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #6edac3 0%,#127661 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #6edac3 0%,#127661 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6edac3', endColorstr='#127661',GradientType=0 ); /* IE6-9 */

	margin-top: 30px;
	margin-bottom: 30px;
	padding:20px 0 20px 0;
	text-align: center;
	color: #eee;
}
#contact #contact_left {
	float: left;
	width: 54%;
	border-right:1px #CCCCCC dotted;
}
  #contact #tel {
	/* background: url("../img/tel_icon.png") no-repeat scroll 0 2px transparent; */
	font-size: 150%;
}
#contact #contact_right {
	float: right;
	width: 44%;
}
#contact #guide {
	clear: both;
}

@media only screen and (min-width: 769px) {
	#contact #tel {
		float:left;
		height: 100px;
		margin-top: 10px;
		padding: 10px 0;
		font-size: 150%;
		top: 0;
		left: 30px;
		position: relative;
	}
	#contact #contact_right {
		float: right;
		width: 44%;
	}
	
}

@media only screen and (max-width: 768px) {
	#contact {
		padding: 0 0.5rem 2rem;
	}
	#contact #tel {
		padding: 10px 0;
	}

}
/*------------------------------------------------------
 * suina
 *-----------------------------------------------------*/
#suina {
	background :#F7FFFD;
}

#suina .contents p {
	margin-left: 1.5em;
}
@media only screen and (min-width: 769px) {
	#suina .contents{
		margin-right: 100px;
		float: right;
		height: 20em;
	}
}
@media only screen and (max-width: 768px) {
	#suina{
		padding-bottom: 2rem;
	}
	#suina .contents{
		margin: 2rem 0.5rem;
		line-height: 2;
	}
}

/*------------------------------------------------------
 * sejutsu
 *-----------------------------------------------------*/
#sejutsu {
	text-align: left;
}

#sejutsu h4 {
	font-size: 130%;
	background: #ddd;
	margin: 50px 0 30px 0;
	padding:20px 0 20px 20px;
	color: #666;
	font-weight: bold;
	border-left: 15px #6aa52e solid;
}

#sejutsu h5 {
	font-size: 150%;
	font-weight: bold;
	margin:20px 0 20px 0;
	padding-left: 10px;
	border-left: 15px #6aa52e solid;
	border-bottom: 1px #6aa52e solid;
}

#sejutsu .comment {
}

#sejutsu .comment p {
	margin-bottom: 30px;
}

#sejutsu img {
	float: left;
	margin: 1em 2em 2em 2em;
}

#sejutsu h6 {
	font-size: 120%;
	margin:20px 0 20px 0;
	padding-left: 10px;
	border-left: 10px #6aa52e solid;
}

#sejutsu .syoujou {
	border: 3px #da6e9d solid;
	border-radius: 10px;
}

#sejutsu table {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	padding: 3px;
	border: 1px #ccc solid;
	border-collapse: collapse;
}
#sejutsu th {
	border: 1px #ccc solid;
	margin: 0px;
	text-align: center;
	background: #ddd;
}
#sejutsu td {
	border: 1px #ccc solid;
	margin: 0px;
}
#sejutsu .price {
	text-align: right;
	padding: 5px;
}

#sejutsu .comment dt {
	font-weight: bold;
}

@media only screen and (min-width: 769px) {
	#sejutsu .description {
		padding-left: 50px;
		padding-right: 50px;
	}

	#sejutsu .desc {
		margin:0px 10px 30px 30px;
	}
	
	#sejutsu .comment dl {
		margin: -20px 0px 20px 50px;
		line-height: 2em;
	}
	
	#sejutsu .comment dt {
		float: left;
		margin-right: 3em;
		width: 3.2em;
		font-weight: bold;
	}
	
	#sejutsu .comment dd {
	}

	#sejutsu .syoujou {
		margin: 0 30px 0 20px;
		padding: 20px;
	}
		
}

@media only screen and (max-width: 768px) {
	#sejutsu .description {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	#sejutsu .desc {
		margin:0 0.5rem 30px;
	}
	
	#sejutsu .comment dl {
		margin-top: -20px;
		line-height: 2em;
	}

	#sejutsu .syoujou {
		margin: 0 0 3rem;
		padding: 20px;
	}

}
/*------------------------------------------------------
 * voice
 *-----------------------------------------------------*/
#voice {
	background :#F7FFFD;
}
#voice h2 {
	font-size: 200%;
	margin-bottom: 30px;
}

#voice .voices {
	width: 100%;
	margin: 10px auto 10px auto;
}

#voice .voices img {
	margin-left: 2em;
	margin-right: 2em;
}

#voice .voices h4 {
	color: #da6e9d;
	font-weight: bold;
	font-size: 150%;
}

#voice .link a{
	background: #6edac3; /* Old browsers */
	background: -moz-linear-gradient(top,  #6edac3 0%, #127661 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #6edac3 0%,#127661 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #6edac3 0%,#127661 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6edac3', endColorstr='#127661',GradientType=0 ); /* IE6-9 */

	margin:0 auto;
	padding: 15px;
	width: 300px;
	height: 35px;
	text-align: center;
	font-weight: bold;
	font-size: 150%;
	border-radius: 10px;
	color: #eee;
	display: block;
}	

@media only screen and (min-width: 769px) {
	#voice .area_contents {
		width: 70%;
		float: left;
	}
	
	#voice .area_space {
		width: 30%;
		float: left;
		color: #fff;
	}

	#voice .right {
		float: right;
	}
	
	#voice .left {
		float: left;
	}

	#voice .voices h4 {
		margin-left: 20px;
	}
				
}

@media only screen and (max-width: 768px) {
	#voice {
		padding: 2rem 0;
	}

	#voice .vertical {
		margin-bottom: 2rem;
	}
	
	#voice .voices h4 {
		margin-top: 1rem;
	}
}

/*------------------------------------------------------
 * profile
 *-----------------------------------------------------*/
#profile {
	margin-bottom: 0px;
}

#profile .contents {
	float: left;
	padding: 0 0 20px 0;
	text-align: left;
}
#profile hr {
	clear: both;
	border-width: 0px;
	margin: 10px auto;
}
#profile .galary {
	text-align: center;
}

@media only screen and (min-width: 769px) {
	#profile .photo {
		float: left;
		width: 30%;
		padding: 0px 20px 10px 30px;
	}

	#profile .galary {
		margin: 20px 30px 20px 30px;
		text-align: center;
	}

	#profile .galary img{
		float: left;
		margin-left: 20px;
		margin-top: 10px;
	}
		
}

@media only screen and (max-width: 768px) {
	#profile .photo {
		margin: 1.5rem auto;
	}

	#profile .galary img{
		margin: 1rem auto;
	}
	
}

/*------------------------------------------------------
 * sns
 *-----------------------------------------------------*/
#sns {
	margin-bottom: 0px !important;
}

#sns .facebook_page {
	text-align: center;
	margin: 10px;
}

#sns .button {
	float: left;
	margin: 10px;
}
#sns .button .banner {
	font-size: 80%;
}
#sns hr {
	clear: both;
	border: 0px;
}

@media only screen and (min-width: 769px) {
	#sns .left {
		float: left;
		width: 30%;
	}
	
	#sns .right {
		float: left;
		width: 70%;
	}	
	#sns .button .banner {
		float: left;
	}
	
}
@media only screen and (max-width: 768px) {
	#sns .button {
		width: 100%;
		margin: 0;
	}
	#sns .button .banner {
		margin-bottom: 1rem;
	}
	#facebook, #twitter, #line {
		float: none !important;
		margin: 1rem 0 !important;
	}

}

/* Page Top
----------------------------------------------- */
#page-top {
    position: fixed;
}
#page-top a {
    background: #40A892;
    text-decoration: none;
    color: #fff;
    text-align: center;
    display: block;
    border-radius: 50%;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}
@media only screen and (min-width: 769px) {
	#page-top {
		bottom: 20px;
		right: 20px;
		font-size: 77%;
	}
	#page-top a {
		width: 100px;
		height: 20px;
		padding: 40px 0;
	}
	
}
@media only screen and (max-width: 768px) {
	#page-top {
		bottom: 93px;
		right: 20px;
		font-size: 77%;
	}
	#page-top a {
		width: 60px;
		padding: 15px 0;
	}
}

/*!
 * smart phone START
 * ---------------------------------------------
 */

@media only screen and (max-width: 480px) {
	body {
		/* font-size: 10px; */
		font-size: 14px;
	}
	
	.vertical p {
		text-align: left;
		/* margin-left: 2em; */
		margin-left: 1rem;
		margin-right: 1rem;
		line-height: 2;
	}

	.mainWidth {
		margin: 0 auto;
		width: 100%;
	}
	
	#gnav {
		display: none;
	}

	#contact #contact_left {
		float: left;
		width: 100%;
		margin-bottom: 20px;
	}
	  #contact #tel {
		height: 50px;
	  }
	#contact #contact_right {
		float: right;
		width: 100%;
		margin-bottom: 20px;
	}

}
/*!
 * smart phone END
 * ---------------------------------------------
 */

/*!
 * tablet START
 * ---------------------------------------------
 */

/* @media only screen and (min-width: 481px) and (max-width: 1100px) {*/
@media only screen and (min-width: 481px) and (max-width: 768px) {
	.mainWidth {
		margin: 0 auto;
		width: 100%;
	}

	.vertical p {
		text-align: left;
		margin-left: 2em;
	}

	navi {
		font-size: 12px;
	}

	#contact #contact_left {
		float: left;
		width: 100%;
		margin-bottom: 20px;
	}
	  #contact #tel {
		height: 50px;
	  }
	#contact #contact_right {
		float: right;
		width: 100%;
		margin-bottom: 20px;
	}

}
/*!
 * tablet END
 * ---------------------------------------------
 */


/*!
 * PC START
 * ---------------------------------------------
 */

/* @media only screen and (min-width: 1101px) { */
@media only screen and (min-width: 769px) {

	.mainWidth {
		margin: 0 auto;
		width: 1100px;
	}

	.vertical {
		font-family: "游明朝", "ＭＳ 明朝", serif;
		color: #555;
		height: 16em;
		line-height: 1.5em;
	/*    	margin-left: 2em; */
		-ms-writing-mode: tb-rl; /* for MS IE8+ */
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		text-align: left;
	}


	.headerNav ul {
		display: block !important;
	}

	.articleArea { /* fontawesome */
	}

	.articleArea h2 {
		-webkit-transition: all 0.5s ease-out;
		-moz-transition: all 0.5s ease-out;
		-o-transition: all 0.5s ease-out;
		-ms-transition: all 0.5s ease-out;
		transition: all 0.5s ease-out;
		position: relative;
	}

	.articleArea h2[class*="fontawesome-"]:before {
		display: none;
	}

	.articleArea:hover { /* fontawesome */
	}

	.articleArea:hover h2 {
		text-indent: 40px;
	}

	.articleArea:hover h2[class*="fontawesome-"]:before {
		position: absolute;
		top: 0;
		left: -38px;
		font-family: 'FontAwesome', sans-serif;
		font-size: 40px;
		font-size: 2.5rem;
		display: block;
	}

/*
	.mainHeadline {
*/
	article h2 {
		-webkit-transition: all 0.5s ease-out;
		-moz-transition: all 0.5s ease-out;
		-o-transition: all 0.5s ease-out;
		-ms-transition: all 0.5s ease-out;
		transition: all 0.5s ease-out;
	}

/*
	.mainHeadline:hover {
*/
	article h2:hover {
		-webkit-transform: scale(1.2);
		-moz-transform: scale(1.2);
		-o-transform: scale(1.2);
		-ms-transform: scale(1.2);
		transform: scale(1.2);
	}

}