@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap');
/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font-size: 1em;
}
html {
	font-size: 62.5%;
}
body, table, input, textarea, select, option {
	font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    /*font-family: 'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
img {
	vertical-align: top;
	max-width: 100%;
    height: auto;
}
a,
a:link {
	outline: none !important;
	color: #333333;
	text-decoration: none;
}
a:visited {
	color: #333333;
}
a:hover {
	color: #333333;
}
a:active {
	color: #333333;
}
/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
body {
	/*min-width: 1300px;*/
    width: 100%;
	color: #333333;
	font-size: 1.6rem;
	line-height: 1.5;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	background-color: #ffffff;
    }
#container {
    text-align: left;
    }
#main {
    display: block;
    }
a[href^="tel:"] {
    cursor: default;
    pointer-events: none;
    }
@media all and (min-width: 897px) {
	.sp {display: none !important;}
    }
@media all and (max-width: 896px) {
	body {
		min-width: inherit;
		font-size: 1.4rem;
	}
	body.fixed {
        position: fixed;
        width: 100%;
        height: 100%;
    }
	a:hover,
	a:hover img {
		opacity: 1 !important;
	}
	.pc {
		display: none !important;
	}
	a[href^="tel:"] {
		cursor: pointer;
		pointer-events: auto;
	}
}

#topcontrol{z-index: 99;}
#topcontrol img{transition: 0.7s;}
#topcontrol img:hover{opacity: 0.5;}

/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* clearfix */	
.clearfix:after {content: "";display: block;clear: both;}
/* flex */	
.flex,.flexA,.flexB,.flexC {display: flex;flex-wrap: wrap;}
.flexA {justify-content: space-around;}

@media screen and (max-width: 1040px){ 
    .flexA {
       flex-flow: column;
       row-gap: 20px;
    }
} 
.flexB {justify-content: space-between;}
.flexC {align-content: center;align-items: center;}
.row{flex-direction: column-reverse;flex-direction: row-reverse;}

.en{font-family: "Fugaz One", sans-serif;}
.cen{text-align: center;}
.txtGre{color: #0F692A;}
.txtWhi{color: #fff;}


.js-scroll-overlap:not(.is-disabled) {
    --sticky-offset: -1px;
    position: sticky;
    top: var(--sticky-offset);
    }
/*.c01{position: relative; color: transparent;}
.c01::before{
    content: "";
    position: absolute;
    z-index: 1;
    top: 0%;
    right: 100%;
    bottom: 0%;
    left: 0%;
    background : #096309;
    }
.c01.active{
    animation-name: kf_c01a;
    animation-duration: 0s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    }
.c01.active strong{opacity: 1;}
.c01.active::before{
    animation-name: kf_c01b;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    }*/

@keyframes kf_c01a {100%{color: inherit;}}
@keyframes kf_c01b {
    50%{left: 0%; right: 0%;}
    100%{left: 100%; right: 0%;}
    }
@media all and (max-width: 540px) {
    .js-scroll-overlap:not(.is-disabled) {z-index: -2;}
    .js-scroll-overlap:not(.is-disabled).js-scroll-overlap-top{
        --sticky-offset: 0;
    position: static;
    top: inherit}
    }
/*------------------------------------------------------------
	content
------------------------------------------------------------*/
.content {
    max-width: 1300px;
    width: 96%;
    margin: 0 auto;
    }
@media all and (max-width: 896px) {
    .content {width: 96%;margin: 0 auto;}
    }
@media all and (max-width: 540px) {
    .content {width: 90%;}
    }


/*------------------------------------------------------------
	ヘッダー
------------------------------------------------------------*/
#gHeader {
	width: 100%;
    padding: 0 0 0 10px;
    margin: 0;
	box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    background:rgba(255,255,255,0.9);
    }

#gHeader .hd-logo{
    width: 100%;
	max-width:210px;
    margin:0;
    box-sizing: border-box;
    }
#gHeader .hd-logo a{width: 100%;}
#gHeader .hd-logo img{}
#gHeader .hBox {
	/*max-width: 1800px;*/
    max-width: 100%;
	margin: 0 auto;
    align-content: center;
    align-items: center;
    }
#gHeader .hBox.contactHed{padding: 20px 0;}
#gHeader .rBox {
    width: calc(100% - 210px);
	max-width: 1100px;
    display: flex;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
    }
/* gNavi */
#gNavi {
    width: 100%;
    max-width: 740px;
    margin-right: 10px;
    box-sizing: border-box;
    }
#gNavi .naviList {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    box-sizing: border-box;
    }
#gNavi .naviList > li{
    box-sizing: border-box;
    width: 14%;
    text-align: center;
    padding: 0;
    }
#gNavi .naviList > li:nth-child(2){width: 18%;}
#gNavi .naviList > li:nth-child(5){width: 18%;}
#gNavi .naviList > li > a {
    padding: 0;
    display: block;
    width: 100%;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing:0;
    box-sizing: border-box;
    transition: 0.7s;
    color: #333;
    text-transform: uppercase;
    }
#gNavi .naviList > li i{transition: 0.7s;}
#gNavi .naviList > li > a:hover,
#gNavi .naviList > li.active a{color: #0F692A;}
#gHeader .rBox .hdmail{width: 20%;max-width: 190px;}
#gHeader .rBox .hdmail a{
    display: block;
    width: 100%;
    font-size: 1.6rem;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    padding: 20px 5px;
    transition: 0.7s;
    font-weight: 600;
    background: #0F692A;
    }
#gHeader .rBox .hdmail span{
    background: url("../images/common/icon_mail.png")no-repeat left 1px;
    background-size: 24px;
    padding-left: 28px;
    }
#gHeader .rBox .hdmail a:hover {background: #333;}
.naviList {position: relative;}
.naviList > li {}
.naviList > li a {display: block;}
.naviList > li a:hover {}

/*ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    }
.naviList > li:hover {
    -webkit-transition: all .7s;
    transition: all .7s;
    }
.menu__second-level li {border-top: 1px solid rgba(255,255,255,0.5);}
.menu__second-level li a:hover {background: #fff;}
.naviList > li.menu__single {position: relative;}
li.menu__single ul.menu__second-level {
    position: absolute;
    top: 30px;
    width: 100%;
    background:rgba(242,151,62,1); 
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    }

li.menu__single:hover ul.menu__second-level {
    top: 40px;
    visibility: visible;
    opacity: 1;
    }
li.menu__single ul.menu__second-level a{color: #fff;padding: 5px 0;transition: all .7s;}
li.menu__single ul.menu__second-level a:hover{background: rgba(248,123,3,1);}*/

@media all and (max-width: 1380px) {}
@media all and (max-width: 1220px) {}
@media all and (max-width: 1150px) {
    #gHeader .hBox.contactHed{padding: 9px 0;}
    #gHeader .hd-logo{max-width:180px;padding-top: 5px;}
    #gHeader .rBox {width: calc(100% - 180px);}
    #gNavi .naviList > li > a{font-size: 1.4rem;letter-spacing: -1px;}
    #gHeader .rBox .hdmail{width: 22%;}
    #gHeader .rBox .hdmail a{font-size: 1.4rem;letter-spacing: -1px;padding: 13px 2px;}
    #gHeader .rBox .hdmail span{
    background: url("../images/common/icon_mail.png")no-repeat left 2px;
    background-size: 19px;
    padding-left: 22px;
    }
}
@media all and (min-width: 896px) and (max-width: 950px) {}
@media all and (min-width:897px) {.menuBox {display: none !important;}}

@media all and (max-width: 896px) {
    #topcontrol{width: 50px;}
	#gHeader {padding: 10px;}
    #gHeader .hd-logo{}
	#gHeader .hBox {
		max-width: inherit;
		display: block;
        }
    #gHeader .hBox.contactHed{padding: 0;}
	#gHeader .rBox {
		width: auto;
		display: block;
		text-align: center;
        }
	#gNavi {display: none;}
    
    /* menu */
	.menu {
		width: 40px;
		height: 40px;
		position:fixed;
		right: 10px;
		top: 5px;
		cursor: pointer;
		z-index: 103;
		background-color: #333333;
        }
	.menu span {
		margin-left: -10px;
		width: 50%;
		height: 2px;
		position: absolute;
		left: 50%;
		top: 12px;
		background: #fff;
		transition: 0.3s;
        }
	.menu span:nth-child(2) {top: 19px;}
	.menu span:nth-child(3) {top: 26px;}
    .menu.on span{top: 15px;}
	.menu.on span:nth-child(1) {transform: translateY(5px) translateX(0) rotate(45deg);}
	.menu.on span:nth-child(2) {opacity: 0;}
	.menu.on span:nth-child(3) {transform: translateY(-6px) translateX(0) rotate(-45deg);top: 26px;}
	.menuBox {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(255, 255, 255, 0.95);
		overflow: auto;
		z-index: 100;
		display: none;
    	}
	.menuWrap {padding: 74px 20px;}
	.menuWrap .naviList {
		margin-bottom: 5%;
		border-bottom: 1px solid #ddd;
        }
	.menuWrap .naviList > li {
		border-top: 1px solid #ddd;
        }
	.menuWrap .naviList > li > a {
		padding: 10px 20px 10px 20px;
		font-size: 1.5rem;
        font-weight: 600;
		display: block;
		position: relative;
        text-transform: uppercase;
        }
    .menuWrap .naviList > li.naviList_ttl{
        padding: 10px 20px 10px 20px;
		font-size: 1.5rem;
        font-weight: 600;
		display: block;
        background: #333333;
        color: #fff;
        }
    .menuWrap .naviList > li.active > a,
    .menuWrap .naviList > li > a:hover{color: #0F692A;}
	.menuWrap .naviList > li.toggle > a {position: relative;}
	.menuWrap .naviList > li.toggle > a::before {
		width: 15px;
		height: 1px;
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		background: #000;
		content: '';
        }
	.menuWrap .naviList > li.toggle > a::after {
		width: 1px;
		height: 15px;
		position: absolute;
		right: 17px;
		top: 50%;
		transform: translateY(-50%);
		background: #000;
		content: '';
        }
	.menuWrap .naviList > li.toggle > a.on::after {
		display: none;
        }
	.menuWrap .subBox li a {
		padding: 10px;
		display: block;
		font-size: 1.4rem;
        }
	.menuWrap li .subBox {
		padding-bottom: 15px;
		display: none;
        }
	.menuWrap li.navi02 .subBox a {
		padding-left: 40px;
		position: relative;
        }
	.menuWrap li.navi02 .subBox .icon {
		width: 20px;
		position: absolute;
		left: 10px;
		top: 50%;
		transform: translateY(-50%);
        }

    .menuWrap .menuBtnBox {
		text-align: center;
        }
    .menuWrap .menuBtnBox a{
        display: block;
        width: 100%;
        background: #0F692A;
        color: #fff;
        padding: 15px 0;
        box-sizing: border-box;
        font-size: 1.7rem;
        font-weight: 600;
        }
    .menuWrap .menuBtnBox a span{background: url("../images/common/icon_mail.png")no-repeat left 1px;
    background-size: 24px;
    padding-left: 28px;}
    }

@media all and (max-width: 540px) {}

/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/
#gFooter {}
#gFooter .gFiner{
    background: #333333;
    color: #fff;
    padding: 100px 0 10px;
    box-sizing: border-box;
    font-size: 1.6rem;
    }
#gFooter .gFiner .content.flexB{}
#gFooter .fLogo{width: 42%;text-align: left;}
#gFooter .fLogo p{
    line-height: 1.8;
    font-size: 1.6rem;
    display: block;
    padding-top: 20px;
    }
#gFooter .fNavi{width: 55%;}
#gFooter .fNavi ul{overflow: hidden;margin-bottom: 40px;} 
#gFooter .fNavi li{
    float: left;
    margin-right: 40px;
    }
#gFooter .fNavi li:last-child{margin-right: 0}
#gFooter .fNavi li a{
    color: #fff;
    font-size: 1.5rem;
    }
#gFooter address {
    text-align: center;
    padding: 0;
    margin: 130px 0 0;
    font-style: normal;
    font-size: 1.2rem;
    box-sizing: border-box;
    }

@media all and (max-width: 896px) {
    #gFooter .gFiner{padding: 50px 0 10px;}
    #gFooter .fLogo{width: 100%;text-align: center;}
    #gFooter .fLogo p{
    font-size: 1.5rem;
    padding-top: 10px;
    }
    #gFooter .fNavi{width: 100%;margin-top: 40px;}
    #gFooter .fNavi ul{margin:0 auto 10px; max-width: 450px;} 
    #gFooter address {margin: 50px 0 0;}
}
@media all and (max-width: 540px) {
    #gFooter .fLogo a img{max-width: 200px;}
    #gFooter .fLogo p{font-size: 1.4rem;}
    #gFooter .fNavi{display: none;}
    #gFooter address {margin: 30px 0 0;}
}


/* contact */
#gFooter .contact{
    border-top: 1px solid #0F692A;
    overflow: hidden;
    }
#gFooter .contact .ttl-01{
    width: 40%;
    padding: 0 10px 10px 10px;
    box-sizing: border-box;
}

@media screen and (max-width: 1040px){ 
  #gFooter .contact .ttl-01{
        width: 100%;
        margin-bottom: 0;
    }

    br.sp-hidden {
        display: none !important;
    }
} 

#gFooter .contact .inner{
    width: 60%;
    border-left: 1px solid #0F692A;
    padding: 60px 70px;
    box-sizing: border-box;
}
@media screen and (max-width: 1040px){ 
  #gFooter .contact .inner{
    width: 100%;
    border-left: none;
  }
} 
#gFooter .contact .inner p{
    display: block;
    max-width: 780px;
    margin: auto;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.0;
    }
#gFooter .contact .flexB{
    margin:40px auto 0;
    max-width: 780px;
    }
#gFooter .contact .flexB li{
    width: 50%;
    align-content: center;
    align-items: center;
    }
#gFooter .contact .flexB li:nth-child(1){width:60% }
#gFooter .contact .flexB li:nth-child(2){width: 38%;}
@media screen and (max-width: 1040px){ 
    #gFooter .contact .flexB li:nth-child(1){
        width:50%; 
    }
    #gFooter .contact .flexB li:nth-child(2){
        width:50%; 
    }
}

@media screen and (max-width: 740px){ 
    #gFooter .contact .flexB {
        display: flex;
        flex-flow: column;
        row-gap: 15px;
    }
    #gFooter .contact .flexB li:nth-child(1){
        width:100%; 
    }
    #gFooter .contact .flexB li:nth-child(2){
        width:100%; 
    }
} 

#gFooter .contact .flexB li:nth-child(1) span{
    font-size: 5.0rem;
    font-weight: 400;
    line-height: 1.1;
    background:url("../images/common/icon_tel.png")no-repeat 0 16px;
    padding-left: 45px;
    color: #0F692A;
    letter-spacing: 0;
    text-align: left;
    }
#gFooter .contact .flexB li:nth-child(1) p{
    font-size: 1.8rem;
    display: block;
    color: #0F692A;
    text-align: left;
    font-weight: 600;
    margin-left: 55px;
    line-height: 1.0;
    }
#gFooter .contact .flexB li:nth-child(2) a{
    display: block;
    width: 100%;
    margin: auto;
    background: #0F692A;
    color: #fff;
    padding: 18px 10px;
    box-sizing: border-box;
    transition: 0.7s;
    text-align: center;
    }
#gFooter .contact .flexB li:nth-child(2) a span{
    background: url("../images/common/icon_mail.png")no-repeat 0 1px;
    padding-left:30px;
    font-weight: bold;
    font-size: 1.8rem;
    transition: 0.7s;
    }
#gFooter .contact .flexB li:nth-child(2) a:hover{background: #333;}

@media all and (max-width: 1380px) {
#gFooter .contact .inner{padding: 60px 40px;}
#gFooter .contact .flexB li:nth-child(1) span{
    font-size: 4.0rem;
    background:url("../images/common/icon_tel.png")no-repeat 0 16px;
    background-size: 25px;
    padding-left: 32px;
    }
#gFooter .contact .flexB li:nth-child(2) a span{
    background: url("../images/common/icon_mail.png")no-repeat 0 1px;
    background-size: 22px;
    font-size: 1.5rem;
    }
}
@media all and (max-width: 896px) {
#gFooter .contact{
    overflow: inherit;
    }
#gFooter .contact .ttl-01{
    width: 100%;
    padding: 0 25px;
    }
#gFooter .contact .inner{
    width: 100%;
    border-left:none;
    padding:0 25px 90px;
    }   
#gFooter .contact .inner p{
    font-size: 1.6rem;
    line-height: 1.8;
    }
    #gFooter .contact .flexB{margin-top: 20px;}
    
}
@media all and (max-width: 540px) {
    
    
#gFooter .contact .inner{
    padding:0 25px 40px;
    }
#gFooter .contact .inner p{
    font-size: 1.4rem;
    line-height: 1.6;
    } 
#gFooter .contact .flexB li:nth-child(1){width:100%;margin-bottom: 20px;text-align: center}
#gFooter .contact .flexB li:nth-child(1) span{
    font-size: 3.3rem;
    background:url("../images/common/icon_tel.png")no-repeat 0 10px;
    background-size: 23px;
    }   
#gFooter .contact .flexB li:nth-child(1) p{
    font-size: 1.5rem;
    margin-left:0;
    text-align: center;
    }
#gFooter .contact .flexB li:nth-child(2){width:100%;}  
#gFooter .contact .flexB li:nth-child(2) a span{
    background: url("../images/common/icon_mail.png")no-repeat 0 1px;
    background-size: 22px;
    font-size: 1.5rem;
    }
    
    
}




.menuWrap .contact{
    border-top: 1px solid #0F692A;
    overflow: hidden;
    }
.menuWrap .contact .ttl-01{
    width: 40%;
    padding: 0 10px 10px 10px;
    box-sizing: border-box;
    }
.menuWrap .contact .inner{
    width: 60%;
    border-left: 1px solid #0F692A;
    padding: 60px 70px;
    box-sizing: border-box;
    }
.menuWrap .contact .inner p{
    display: block;
    max-width: 780px;
    margin: auto;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.0;
    }
.menuWrap .contact .flexB{
    margin:40px auto 0;
    max-width: 780px;
    }
.menuWrap .contact .flexB li{
    width: 50%;
    align-content: center;
    align-items: center;
    }
.menuWrap .contact .flexB li:nth-child(1){width:60% }
.menuWrap .contact .flexB li:nth-child(2){width: 38%;}
.menuWrap .contact .flexB li:nth-child(1) span{
    font-size: 5.0rem;
    font-weight: 400;
    line-height: 1.1;
    background:url("../images/common/icon_tel.png")no-repeat 0 16px;
    padding-left: 45px;
    color: #0F692A;
    letter-spacing: 0;
    text-align: left;
    }
.menuWrap .contact .flexB li:nth-child(1) p{
    font-size: 1.8rem;
    display: block;
    color: #0F692A;
    text-align: left;
    font-weight: 600;
    margin-left: 55px;
    line-height: 1.0;
    }
.menuWrap .contact .flexB li:nth-child(2) a{
    display: block;
    width: 100%;
    margin: auto;
    background: #0F692A;
    color: #fff;
    padding: 18px 0px;
    box-sizing: border-box;
    transition: 0.7s;
    text-align: center;
    }
.menuWrap .contact .flexB li:nth-child(2) a span{
    background: url("../images/common/icon_mail.png")no-repeat 0 1px;
    padding-left:30px;
    font-weight: bold;
    font-size: 1.8rem;
    transition: 0.7s;
    }
.menuWrap .contact .flexB li:nth-child(2) a:hover{background: #333;}

@media all and (max-width: 1380px) {
.menuWrap .contact .inner{padding: 60px 40px;}
.menuWrap .contact .flexB li:nth-child(1) span{
    font-size: 4.0rem;
    background:url("../images/common/icon_tel.png")no-repeat 0 16px;
    background-size: 25px;
    padding-left: 32px;
    }
.menuWrap .contact .flexB li:nth-child(2) a span{
    background: url("../images/common/icon_mail.png")no-repeat 0 1px;
    background-size: 22px;
    font-size: 1.5rem;
    }
}
@media all and (max-width: 896px) {
.menuWrap .contact{
    overflow: inherit;
    border-top:none;
    }
.menuWrap .contact .ttl-01{
    width: 100%;
    padding: 0 25px;
    }
.menuWrap .contact .inner{
    width: 100%;
    border-left:none;
    padding:0 25px 90px;
    }   
.menuWrap .contact .inner p{
    font-size: 1.6rem;
    line-height: 1.8;
    }
    .menuWrap .contact .flexB{margin-top: 20px;}
    
}
@media all and (max-width: 540px) {
    
    
.menuWrap .contact .inner{
    padding:20px 15px 20px 15px;
    }
.menuWrap .contact .inner p{
    font-size: 1.4rem;
    line-height: 1.6;
    } 
.menuWrap .contact .flexB li:nth-child(1){width:100%;margin-bottom: 20px;text-align: center}
.menuWrap .contact .flexB li:nth-child(1) span{
    font-size: 3rem;
    background:url("../images/common/icon_tel.png")no-repeat 0 10px;
    background-size: 23px;
    }   
.menuWrap .contact .flexB li:nth-child(1) p{
    font-size: 1.5rem;
    margin-left:0;
    text-align: center;
    }
.menuWrap .contact .flexB li:nth-child(2){width:100%;}  
.menuWrap .contact .flexB li:nth-child(2) a span{
    background: url("../images/common/icon_mail.png")no-repeat 0 1px;
    background-size: 22px;
    font-size: 1.5rem;
    }
    
    
}



















/*------------------------------------------------------------
	comLink
------------------------------------------------------------*/
.comlink {
	max-width: 300px;
    width: 100%;
    margin: 60px 0 0 auto;
    }
.comlink.cen {margin:60px auto 0;}

.comlink a {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 25px 20px;
    display: block;
    font-size: 2.0rem;
    letter-spacing: 0.075rem;
    font-weight: 400;
    color: #fff;
    background:#0F692A;
    position: relative;
    transition: 0.7s;
    }
.comlink.comlink_w a{
    color: #0F692A;
    background: #fff;
    }
.comlink a span{
    display: block;
    background: url("../images/common/icon_arrow.png")no-repeat 94% center;
    transition: 0.7s;
    }
.comlink.comlink_w a span{
    background: url("../images/common/icon_arrow2.png")no-repeat 94% center;
    }
.comlink a:hover{ background:#333;}
.comlink.comlink_w a:hover{color: #fff;}
.comlink a:hover span{
    background: url("../images/common/icon_arrow.png")no-repeat 100% center;
    }
.comlink.comlink_w a:hover span{
    background: url("../images/common/icon_arrow.png")no-repeat 100% center;
    }
@media all and (max-width: 896px) {
.comlink {
	max-width: 96%;
    width: 96%;
    margin:20px auto 0;
    }
.comlink.cen {margin:20px auto 0;}
.comlink a {font-size: 1.6rem;}
}
@media all and (max-width: 540px) {
    .comlink a {
    width: 100%;
    font-size: 1.4rem;
    padding: 15px;    
    letter-spacing:0;
    }
}

/*------------------------------------------------------------
	over_effect
------------------------------------------------------------*/
.over_effect {width: 100%;overflow: hidden;}
.over_effect a {text-decoration: none;}
.over_effect img{transition: 0.7s;}
.over_effect a:hover img {
	display: block;
	transform: scale(1.1, 1.1);
	transition-duration: 0.8s;
	}