﻿@import url("https://use.fontawesome.com/releases/v5.0.6/css/all.css");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@0,400;0,700;1,500&display=swap");

/*****************************************************************************
 RESET CSS
 *****************************************************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,figure { 
	margin:0;padding:0;
}
table { border-collapse:collapse;border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal;font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%;font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
img { vertical-align:top;max-width:100%;height:auto;-ms-interpolation-mode:bicubic; }
main { display:block; }

/*****************************************************************************
 CLEAR
 *****************************************************************************/
.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
.clearfix {display:inline-table;} /* Hides from IE-mac \*/
* html .clearfix{height:1%;}
.clearfix{display:block;} /* End hide from IE-mac */

/*****************************************************************************
 BASICS
 *****************************************************************************/
html {font-size:62.5%;}
body {
	background:#fbfcfe;
	font-family: 'Montserrat', 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	line-height:1.8;
	color:#222;
	font-size:12px;
	font-size:1.2rem;
	-webkit-text-size-adjust: none;
	letter-spacing:0.016em;
	min-width:1080px;
	}
body,html{height:100%;margin:0 auto;}
body *{box-sizing:border-box;}
a {text-decoration:none;color:#007e87;outline:none;transition:all 0.5s ease-out;}
a *{transition:all 0.5s ease-out;}
a:hover {text-decoration:none;color:#25a57f;}
a:hover img{opacity:0.8;}
::selection {background:rgba(8,130,139,0.2);}
::-moz-selection {background:rgba(8,130,139,0.2);}

/* common */
.inner{width:1080px;max-width:100%;margin:0 auto;position:relative;}
.sp{display:none;}
.mincho{font-family:游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;}
.cen{text-align:center;}
.bold{font-weight:bold;}
.right{text-align:right;}
.red{color:#810000;}
.green{color:#007e87;}
.blue{color:#005395;}

main{margin-top:70px;}

@media screen and (max-width: 768px) {
	.pc{display:none;}
	.sp{display:block;}
}

#fixedTop{right:10px;bottom:10px;width:50px;height:50px;line-height:48px;color:#fff;font-size:20px;text-align:center;display:none;background:rgba(8,130,139,0.9);position:fixed;z-index:9999;border-radius:50%;-webkit-transform:translateZ(0);border:1px solid #fff;}
#fixedTop:hover{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;opacity:0.7;}

.screen-reader-text {clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute !important;width:1px;word-wrap:normal !important;}

.row { clear:both;display:flex;flex-flow:row wrap;}
.row-reverse { clear:both;display:flex;flex-flow:row-reverse wrap;}
.col-01, .col-02, .col-024, .col-03, .col-04, .col-05, .col-06, .col-07, .col-08, .col-09, .col-10, .col-11, .col-12 {padding:0 15px;display:inline-block;border:0px solid red;}
.col-01 { width: 8.33333%; }
.col-02 { width: 16.66667%; }
.col-024 { width: 20%; }
.col-03 { width: 25%; }
.col-04 { width: 33.33333%; }
.col-05 { width: 41.66667%; }
.col-06 { width: 50%; }
.col-07 { width: 58.33333%; }
.col-08 { width: 66.66667%; }
.col-09 { width: 75%; }
.col-10 { width: 83.33333%; }
.col-11 { width: 91.66667%; }
.col-12 { width: 100%; }

.mb5{margin-bottom:5px!important;}
.mb10{margin-bottom:10px!important;}
.mb15{margin-bottom:15px!important;}
.mb20{margin-bottom:20px!important;}
.mb30{margin-bottom:30px!important;}
.mb40{margin-bottom:40px!important;}
.mb50{margin-bottom:50px!important;}
.mb60{margin-bottom:60px!important;}
.mb70{margin-bottom:70px!important;}
.mb80{margin-bottom:80px!important;}
.mt20{margin-top:20px!important;}
.mt30{margin-top:30px!important;}
.mt40{margin-top:40px!important;}
.mt60{margin-top:60px!important;}


/*--header--*/
.sb-slide{display:none;}
header{position:fixed;width:100%;height:70px;border-top:3px solid #007e87;background:#fbfcfe;box-shadow:0px 2px 4px rgba(0,0,0,0.1);z-index:9998;}
header h1{width:252px;float:left;}
header h1 a{display:block;padding:12px 15px 0px;}
header nav{max-width:calc(100% - 252px);float:right;font-size:16px;}
header nav ul li{display:inline-block;}
header nav > ul{position:relative;}
header nav > ul > li{display:inline-block;position:relative;}
header nav > ul > li > a{display:block;line-height:1.2;padding:22px 30px 20px 0px;color:#222;}
header nav > ul > li > a:hover{color:#007e87;}
header nav > ul > li ul{visibility:hidden;opacity:0;z-index:1;position:absolute;top:47px;width:240px;background:rgba(8,130,139,0.9);-webkit-transition:all .1s ease;transition:all .1s ease;text-align:left;}
header nav > ul > li ul li{display:block;width:100%;}
header nav > ul > li ul li:not(:last-child){border-bottom:1px dashed rgba(255,255,255,0.6);}
header nav > ul > li ul li a{color:#fff;display:block;width:100%;}
header nav > ul > li ul li a:before{content:"\f105";font-family:FontAwesome;margin-right:5px;}
header nav > ul > li:hover ul{visibility:visible;opacity:1;}
header nav > ul > li:hover ul a{color:#fff;padding:15px 15px;line-height:1.4;}
header nav > ul > li:hover ul a:hover{background:rgba(8,130,139,1);}
header nav > ul > li:hover{-webkit-transition:all .8s;transition:all .8s;}
header nav > ul {*zoom:1;}
header nav a .fa-search{color:#777;margin-right:4px;}
header nav a:hover .fa-search{color:rgba(8,130,139,0.9);}
header nav > ul > li.parent > a:after{content:"\f103";font-family:FontAwesome;margin-left:4px;color:rgba(8,130,139,0.9);}
header nav > ul > li.contact{}
header nav > ul > li.contact > a{padding:23px 30px 20px;color:#fff;background:#007e87;height:67px;}
header nav > ul > li.contact > a:hover{background:#006168;}
header nav > ul > li.contact > a i{margin-right:4px;}

/*--footer--*/
.footer_bnr{padding:40px 0px;background:#fff url("../img/index/bg_reco2.png") no-repeat center bottom;}
.footer_bnr li a{display:block;box-shadow:0px 2px 4px rgba(0,0,0,0.2);}
.footer_bnr li a:hover{box-shadow:none;}

footer{position:relative;background:#007e87 url("../img/common/foot_bg.jpg") repeat;color:#fff;padding:70px 0px 140px;font-size:14px;}
footer a{color:#fff;}
footer h1{margin-bottom:30px;}
footer h1 img{margin-top:5px;}
footer p{letter-spacing:0.05em;}
footer iframe{width:100%;height:280px;}
footer nav ul{padding:10px 0px 0px 40px;}
footer nav ul li a{display:block;padding:10px 50px;}
footer nav ul li a:before{content:"\f105";font-family:FontAwesome;margin-right:5px;}

.foot_fix{position:fixed;width:100%;bottom:0px;display:block;background:rgba(37,165,127,0.9);z-index:9998;-webkit-transform:translateZ(0);padding:10px 0px;text-align:center;height:70px;}
.foot_fix.sp{display:none;}
.foot_fix li{display:inline-block;padding:0px 15px;letter-spacing:0.05em;}
.foot_fix .contact{display:inline-block;width:250px;height:50px;vertical-align:top;}
.foot_fix .contact a{display:block;width:100%;height:100%;background:#fff;text-align:center;color:#007e87;font-size:16px;padding-top:10px;border:1px solid #fff;}
.foot_fix .contact a:hover{background:#007e87;color:#fff;}
.foot_fix .contact i{margin-right:5px;}
.foot_fix .phone{display:inline-block;color:#fff;font-size:36px;line-height:1.4;}
.foot_fix .phone a{display:block;color:#fff;font-size:36px;line-height:1.4;}
.foot_fix .phone small{display:inline-block;font-size:13px;vertical-align:middle;padding-right:5px;letter-spacing:0.03em;}
.foot_fix .phone small i{font-size:16px;}


@media screen and (max-width: 1260px) {
    header nav{font-size:14px;}
    header nav > ul > li > a{padding:26px 15px 20px 0px;}
    header nav > ul > li.contact > a{padding:26px 15px 20px;}
}
@media screen and (max-width: 1080px) {
    header h1{width:200px;}
    header h1 a{padding:15px 5px 0px;}
    header nav{max-width:calc(100% - 200px);}
    header nav > ul > li:first-child{display:none;}
    header nav > ul > li > a{font-size:12px;padding:26px 8px 20px 0px;}
    header nav > ul > li ul li a{font-size:12px;}
    header nav a .fa-search{display:none;}
    header nav > ul > li.parent > a:after{margin-left:2px;}
    header nav > ul > li.contact > a{padding:26px 8px 20px;}
    header nav > ul > li.contact > a i{margin-right:2px;}

}
@media screen and (max-width: 768px) {
	body{min-width:initial;min-width:auto;}
	.inner{width:100%;}
	img{max-width:100%;height:auto;}
	main{width:100%;}

	.col-01, .col-02, .col-024, .col-03, .col-04, .col-05, .col-06, .col-07, .col-08, .col-09, .col-10, .col-11, .col-12 { padding:0px 5px; }
	.col-01 { width: 100%; }
	.col-02 { width: 100%; }
	.col-024{ width: 100%; }
	.col-03 { width: 100%; }
	.col-04 { width: 100%; }
	.col-05 { width: 100%; }
	.col-06 { width: 100%; }
	.col-07 { width: 100%; }
	.col-08 { width: 100%; }
	.col-09 { width: 100%; }
	.col-10 { width: 100%; }
	.col-11 { width: 100%; }
	.col-12 { width: 100%; }
	.col-half{ width: 100%; }


	#sb-site{background:#fbfcfe;}

	/*--header--*/
	.sb-slide{width:50px;height:50px;display:block;position:fixed;right:10px;top:10px;z-index:9999;font-size:30px;line-height:1.2;-webkit-transform:translate3d(0, 0, 2px);transform:translate3d(0, 0, 2px);}
	.sb-slide .sb-close,
	.sb-active .sb-slide .sb-toggle-right{display:none;}
	.sb-active .sb-slide .sb-close{display:flex;}
	.sb-slide .menu{width:100%;height:100%;position:relative;color:#fff;background:rgba(8,130,139,1);display:flex;align-items:center;justify-content:center;padding:0;}
	.sb-toggle-right,
	.sb-close{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
    header h1{width:280px;}
    header nav{display:none;}

	/*--side navi--*/
	.sb-slidebar{background:rgba(8,130,139,0.9);min-height:100%;}
    .sb-slidebar ul{padding-bottom:70px;}
	.sb-slidebar ul li{border-bottom:1px dashed rgba(255,255,255,0.6);}
	.sb-slidebar ul li:hover a{background:rgba(8,130,139,1);}
	.sb-slidebar ul li a{display:block;padding:15px 20px;color:#fff;font-size:14px;}
	.sb-slidebar ul li a i{margin-right:5px;}

    /*--footer--*/
    .footer_bnr{padding:40px 25%;}
    .footer_bnr li{margin-bottom:10px;}
    footer{padding:40px 0px 70px;}
    footer h1,
    footer p.copy{text-align:center;}
    footer iframe{height:240px;}
    footer nav{display:none!important;}
    .foot_fix{height:50px;padding-right:60px;}
    .foot_fix.sp{display:block;}
    .foot_fix.pc{display:none;}
    .foot_fix li{padding:0px 5px;letter-spacing:0.016em;}
    .foot_fix .contact{width:auto;height:30px;}
    .foot_fix .contact a{padding:5px 30px;line-height:1.1;}
    .foot_fix .phone a{font-size:24px;line-height:1.2;}
    .foot_fix .phone a:hover{color:#006168;}

}
@media screen and (max-width: 480px) {

    .footer_bnr{padding:20px 10%;}
    footer{font-size:12px;}
    .foot_fix{height:55px;padding:7.5px 65px 7.5px 0px;}
    .foot_fix li{letter-spacing:0.01em;}
    .foot_fix .contact{height:40px;}
    .foot_fix .contact a{padding:10px 10px;font-size:12px;}
    .foot_fix .contact i{margin:-5px 2px 0px 0px;font-size:24px;vertical-align:middle;}
    .foot_fix .phone a{font-size:14px;padding-top:6px;}
    .foot_fix .phone a i{font-size:30px;vertical-align:middle;margin-right:2px;}


}



/*****************************************************************************
 PAGE COMMON
 *****************************************************************************/
h2.h2{color:#222;margin-bottom:30px;}
h2.h2 span{font-size:48px;line-height:1.4;color:#666;text-transform:uppercase;}
h2.h2 small{font-size:20px;line-height:1.4;padding:0px 15px;}
h2.h2.cen span{display:block;}
h2.h2.cen small{display:block;}

h3.h3{color:#222;margin-bottom:30px;}
h3.h3 span{font-size:38px;line-height:1.3;}
h3.h3 small{font-size:20px;line-height:1.3;display:inline-block;padding-left:15px;}
h3.h3:after{content:"";display:block;width:104px;height:2px;background:#b2a58a;opacity:0.5;}

h4.h4{font-size:22px;font-weight:bold;color:#7e6b59;text-align:center;line-height:1.6;margin-bottom:40px;}

.page_ttl{background:#3E524E url("../img/common/page_ttl.jpg") center center;background-size:cover;}
.page_ttl h2{/*background:rgba(3,83,89,0.85);*/background:rgba(50,50,50,0.8);margin-bottom:0px;padding:40px 0px;}
.page_ttl h2 span,
.page_ttl h2 small{color:#fff;text-shadow:0px 0px 6px #fff;}

h3.ttl{font-size:30px;font-weight:bold;line-height:1.4;margin-bottom:20px;position:relative;border-left:20px solid #25a57f;}
h3.ttl span{display:block;padding:2px 10px;}
h3.ttl:after{content:"";display:block;height:4px;background:-webkit-linear-gradient(to right, #25a57f, #007e87);background:linear-gradient(to right, #25a57f, #007e87);}

h4.ttl{font-size:24px;font-weight:bold;line-height:1.4;margin-bottom:20px;color:#006C74;border-bottom:2px solid #ddd;}

.link_btn{}
.link_btn a{display:inline-block;width:300px;height:50px;position:relative;margin:0px 5px;background:rgba(178,165,138,0.5);color:#007e87;text-align:center;padding-top:12px;font-size:14px;box-shadow:0px 2px 4px rgba(0,0,0,0.1);}
.link_btn a:after{content:"";width:50px;height:6px;border-bottom:1px solid #007e87;border-right:1px solid #007e87;transform:skew(45deg);position:absolute;right:-20px;top:20px;transition:all 0.5s ease-out;}
.link_btn a:hover{opacity:0.8;box-shadow:none;}
.link_btn a:hover:after{right:-10px;}

.page_nav{padding:50px 0px 40px;background:#efefef url("../img/index/transition_bg.jpg");}
.page_nav .col-03{margin-bottom:10px;}
.page_nav a{position:relative;display:block;width:100%;padding:10px 20px;color:#222;background:rgba(178,165,138,0.5);font-size:14px;border:1px solid #cdc7bb;}
.page_nav a:after{content:"\f13a";font-family:FontAwesome;position:absolute;right:15px;}
.page_nav a:hover{color:#007e87;background:#fff;}

.fade{opacity:0;transform:translateY(30px);transition:opacity 1.5s, transform 1s;}
.fade.active{opacity:1;transform:translateY(0px);}


@media screen and (max-width: 768px) {
    h2.h2 span{font-size:40px;}
    h2.h2 small{font-size:18px;}
    h3.h3{margin-bottom:20px;}
    h3.h3 span{font-size:32px;}
    h3.h3 small{font-size:18px;}
    h4.h4{font-size:18px;margin-bottom:30px;}

    h3.ttl{font-size:26px;}
    h4.ttl{font-size:20px;}

    .page_nav .col-03{width:50%!important;}
    .page_nav a{font-size:12px;}
}
@media screen and (max-width: 480px) {
    h2.h2 span{font-size:32px;}
    h2.h2 small{font-size:16px;}
    h3.h3 span{font-size:28px;}
    h3.h3 small{font-size:16px;}
    h4.h4{font-size:16px;margin-bottom:20px;}

    h3.ttl{font-size:22px;}
    h4.ttl{font-size:18px;}

    .page_ttl h2{padding:30px 0px;}

    .link_btn a{width:280px;}

    .page_nav{padding:40px 0px 30px;}
    .page_nav .col-03{width:80%!important;margin:0px auto 10px;}
}

