@charset "utf-8";
/* CSS Document */
header{z-index:20; position:fixed; background-color:#FFF; margin:0 !important; width:100%; top:0; left:0}
.top{ background-color:#666; background-image:url(../img/top/main_top.jpg); min-height:100vh; margin-top:80px !important}
section{ width:100% !important; margin:0 !important; max-width:100% !important; background-size:cover; background-position:center center; background-repeat:no-repeat; height:auto; position:relative; box-sizing:border-box; padding:0 ; }
h1{ font-size:3.0rem; font-family:"noto" ; font-weight:normal; line-height:4.0rem; margin:20px 10%; padding:0; display:inline-block; text-align:center}
.top h2{ font-size:8.0rem; line-height:10.0rem; color:#FFF;
 margin:0; padding:0 20px 20px 0; position:absolute; bottom:80px; left:10%; border-bottom:1px solid #FFF}
.top h3{ font-size:2.0rem; font-family:"noto" ; font-weight:normal; line-height:3.0rem; color:#FFF; margin:0; padding:0; 
position:absolute; bottom:50px; left:10%}
.second{ background-image:url(../img/top/second_top.jpg); z-index:9; margin:0; padding:0 0 100px 0; min-height:100vh;}
.copy{ width:80%; max-width:900px; margin:0 auto 70px auto; padding:0; color:#FFF;}
.copycont{ z-index:20; position:absolute; top:-40px; left:0; width:100%;text-align:center; }
.copybk{ z-index:0; position:relative; min-height:250px; width:100%; top:100px; left:0; padding:60px 0 20px 0;
box-shadow: 0px 0px 15px 2px #777777; background-color:#43B8A6}
h4{ font-size:60px; line-height:70px; margin:0; padding:0; font-weight:normal; text-align:center; font-family:"noto";}
h5{ font-size:20px; line-height:30px; margin:0; padding:0; font-weight:normal; text-align:center}
.second p{ margin:30px 0 20px 30px ; width:50%; font-size:1.8rem; line-height:3.0rem}
.more{ display:inline-block; width:200px; font-family:"noto";position:absolute; padding:10px 0; bottom:20px; left:20px;
background-color:#FF0; text-align:center; font-size:20px; line-height:20px; color:#999}
.more1{margin:0 0 0 50px;}
.more2{margin-left:calc(50% - 100px);}
.more3{margin-left:calc(50% - 300px);}
.more::after{ top:0; bottom:0;right:10px;width:15px;height:15px; border-top:2px solid #666; border-right:2px solid #999;
-webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; margin: auto; content: ""; vertical-align: middle;}
.ttl4{padding-top:30px !important; color:#404040}
.ttl5{width:300px; margin:0 auto}
.copyphoto{z-index:10; position:absolute; bottom:-40px; right:-40px; width:50%;}
.third{ background-color:#FCE9CF;background-image:url(../img/top/bg_news2.gif); background-position:bottom right; background-repeat:no-repeat; background-size:93px; margin:0; padding:0 0 30px 0;}
.thirdttl{background-image:url(../img/top/bg_news1.gif); background-position:top left; background-repeat:no-repeat; background-size:148px; min-height:150px}
.third dl{ background-color:#FFF; width:80%; margin:20px auto; padding: 40px; font-size:2.0rem; line-height:2.8rem;
display: flex; flex-flow: row wrap; box-sizing:border-box; border:#FFF 1px solid}
.third dl dt{ width : 200px; padding:5px; margin:0; text-align:center; border-bottom:1px solid #43B8A6; box-sizing:border-box;}
.third dl dd{width : calc(100% - 200px) ; padding:5px; margin:0; border-bottom:1px solid #43B8A6; box-sizing:border-box;}
.four{background-color:#F5F0EC;}
.fourbg1{background-image:url(img/top/bg_bz1.gif); background-position:top left; background-repeat:repeat-y; background-size:120px; min-height:150px}
.four p{  width:100%; margin:0 auto; padding:30px 120px; text-align:center; box-sizing:border-box; font-size:2.0rem; line-height:3.0rem}
.fourbg2{ background-image:url(../img/top/bg_bz2.gif); background-position:right 100px; background-repeat:repeat-y; background-size:81px; margin:0; padding:0 0 100px 0;  }
.fourbase{ position:relative; margin:0; padding:0; z-index:1; border:#F5F0EC 1px solid }
.fourttl{ font-size:2.7rem; line-height:3.7rem; color:#FFF; position:absolute; z-index:10; top:0; padding:20px 0 0 20%; height:200px;  box-sizing:border-box;}
.fourttl1{ width:100%; left:0;background: linear-gradient(90deg, #3399CC 0%, #3399CC 60%, #F5F0EC 60%, #F5F0EC 100%);}
.fourttl2{ width:60%; right:0; }
.fouricon{ margin:100px 0 0 20%; width:80%; position:relative; display: flex; z-index:20; }
.fouricon1{margin:100px 0 0 20%;}
.fouricon2{margin:100px 20% 0 0;}
.fouricon a {width:calc(100% / 3); padding:0 0 50px 0; text-align:center; color:#333;font-size:1.6rem; line-height:2.0rem;}
.fouricon a img{width:100%;}
.arrowg::before { background:#43B8A6 !important;}
.arrowg::after { border-top:15px double #FFFFFF !important; border-right:15px double #FFFFFF !important}
a:hover{ color:#F00}
.conbase{max-width:1080px; margin:0 auto}
.flex { display: flex;  flex-flow: row wrap;}
.fifth{ background-image:url(../img/top/fifthbg.jpg);  }
.fifth a { width:20%; margin:30px 2%; font-size:2.0rem; line-height:3.0rem; color:#FFF; max-width:1700px}
.flex img { width:100%}
.fifth div {justify-content: center;}
.bg{ background-position:50% 50%; background-repeat:no-repeat; background-size:cover; margin:0; padding:0;  }
.sixth{ background-image:url(../img/top/sixthbg.jpg); }
.sixth a { width:46%; margin:30px auto; max-width:600px }
.seventh{ background-image:url(../img/top/seventhbg.jpg); padding-bottom:40px }
.seventh1{ margin:30px auto 0 2%; width:55%; }
.seventh2{ margin:30px 2% 0 40%; width:55%; }
.eighth{ background-color:#F5F0EC !important;text-align:center; }
.eighth1{ padding:0 0 50px 0; width:90%; margin:0 auto 30px auto;  background:linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 70px, #C1B68B 70px, #C1B68B 100%);}
.eighth2{ position:relative; width:90%; margin:30px auto; padding:0 8% 50px 8%; max-width:1080px; box-sizing:border-box; background:linear-gradient(0deg, #fff 0, #fff 90%, rgba(255,255,255,0) 90%,  rgba(255,255,255,0) 100%);}
.ttl8{ margin:50px auto; font-size:5.0rem; line-height:6.0rem; }
.eighth2 img{ width:100%;}
.wrap-img-hover-04{	width:100%;display: block;}
.wrap-img-hover-04 figure{overflow: hidden;position: relative; padding:0 !important; margin:0 !important}
.wrap-img-hover-04 figure figcaption{transition: all .3s;opacity: 0;background: rgba(0,0,0,0.7);position: absolute;
	top: 0;	left: 0;width: 100%;height: 100%;display: block;color: #fff;}
.wrap-img-hover-04 figure:hover figcaption{	opacity: 1;}
.wrap-img-hover-04 figure figcaption p{	display: block;	position: absolute;	top: 50%;left:50%;	transform: translate(-50%,-50%);
	text-align: center;	width:100%; padding:0 !important; margin:0 !important; font-size:1.4rem}
.genre{ display:none;}
.ttlleft{display:inline-block; margin:30px 2%}
.font{ font-size:2.6rem; line-height:3.0rem}
.ninth{ background-color:#FCE9CF; padding-bottom:50px !important}
.ninthcon { margin:30px 2%;justify-content: space-between;}
.ninthcon a{ width:24%; margin:20px auto}
.ninthbt{ display:block; text-align:center; margin:50px 3%; padding:20px 0; background-color:#E37E69; color:#FFF; font-size:3.0rem }
.ninthbt:hover { background-color:#099; color:#FFF !important}
.ninthttl{ color:#49BAA8; font-size:40px; line-height:50px; margin:0; padding:0; font-weight:bold}
.dogear{position: relative;width:90%; margin:10px auto;padding: 30px;box-sizing: border-box; border:#49BAA8 2px solid}
.dogear::after { content: ""; position: absolute; top: 0; left: 0; width:40px; height:40px; border:20px solid #49BAA8;
  border-right-color: #FCE9CF; border-bottom-color: #FCE9CF;  box-sizing: border-box;}
footer{ border: none !important;}
.brief{width:400px; margin:20px auto}
@media only screen and (max-width: 1024px) {
	h2{ font-size:6.0rem; line-height:8.0rem; bottom:200px;}
	h3{ bottom:150px}
	h1{ font-size:3.0rem; line-height:3.0rem; margin:30px 10%;  }
	.copyphoto{ width:40%; right:25px; }
	.copybk{min-height:180px;}
.fourbg1{ background-size:80px}
.fourbg2{ background-size:51px;}
.fourttl{ padding:10px 0 0 10%;font-size:2.0rem; line-height:3.0rem; height:100px }
.fouricon{ width:90%;}
.fouricon1{ margin:50px 0 0 10%; }
.fouricon2{margin:50px 10% 0 0;}
.four p{ padding:30px 90px; }
.fifth a { width:30%; margin:30px 1%; font-size:1.6rem; line-height:2.0rem;}
.ttl8{ font-size:3.0rem; line-height:4.0rem; }
.font{ font-size:2.0rem; line-height:2.4rem}
.ninthcon a{ width:48%;}
.top h1{ display:none}
nav li h4{ display:none !important }
}
@media only screen and (max-width: 768px) {
h1{ font-size:1.6rem; line-height:2.0rem; }
h2{ font-size:3.0rem; line-height:4.0rem; bottom:150px; }
h3{ font-size:1.6rem; line-height:2.0rem; bottom:120px; }
.bt{ width:30px}
.copy{ width:90%;}
.more{width:120px; text-align:center; font-size:12px; line-height:12px;  }
.more3{margin:0;}
.copyphoto{ bottom:-40px }
.copybk{min-height:200px;}
.second p{width:90%;}
h4{ font-size:4.0rem; line-height:4.0rem; }
h5{ font-size:2.0rem; line-height:3.0rem; }
.third dl dt{ width :100%; background-color:rgba(0,153,153,0.3)}
.third dl dd{ width :100%; margin:0 0 20px 0; border:none}
.fourbg1{ background-size:50px}
.fourbg2{ background-size:41px; }
.four p{ padding:30px 35px 30px 55px; text-align:left }
.fourttl1{ background: linear-gradient(90deg, #3399CC 0%, #3399CC 80%, #F5F0EC 80%, #F5F0EC 100%);}
.fouricon { flex-flow: row wrap;}.fouricon a { width:100%; padding:0 0 20px 0;}
.fourttl2{ width:80%; right:0; }
.top{ background-image:url(../img/top/main_top2.jpg); }
.genrettl{ border-left:10px solid #099; text-align:left; font-size:2.0rem; padding:0 0 10px 10px}
.genrettl2{ border-left:10px solid #06C !important; }
.genre{ display:block;text-align:left; font-size:1.6rem; padding:0 0 10px 20px}
.fifth a { width:90%; margin:30px auto; background:#333; padding:0 0 5px 0}
.seventh{ padding-bottom:20px }
.font{ font-size:1.6rem; line-height:2.0rem}
.eighth1{ background:linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 50px, #C1B68B 50px, #C1B68B 100%);}
.ninthcon a{ width:90%;}
.seventh1{ margin:10px 5%; width:90%; }
.seventh2{ margin:10px 5%; width:90%; }
.sixth a { width:90% }
.ninthbt{ font-size:20px }
}
@media only screen and (max-width: 600px) {
.copyphoto{ bottom:-10px }
}
@media only screen and (max-width: 468px) {
.second p{ font-size:1.6rem; line-height:2.0rem}
.third dl dd{ font-size:1.6rem; line-height:2.0rem}
.four p{ font-size:1.6rem; line-height:2.0rem}
.fourttl{ font-size:1.8rem; padding:20px 0 0 20px; }
.copyphoto{ bottom:-50px }
}
header{ background-image: none !important; padding:0  !important; }

@font-face { font-family: "hannari"; font-style: normal; font-weight:normal; line-height:100%;
 src: url('../font/hannari.woff') format('woff'), url('../font/hannari.ttf') format('truetype');}
@font-face { font-family: "noto"; font-style: normal; font-weight:normal; line-height:100%;
 src: url('../font/notosans_regular.woff') format('woff'), url('../font/notosans_regular.ttf') format('truetype');
}
@font-face { font-family: "noto"; font-style: normal; font-weight:bold; line-height:100%;
 src: url('../font/notosans_bold.woff') format('woff'), url('../font/notosans_bold.ttf') format('truetype');
}
.noto { font-family:"noto" !important; }
.meiryo{font-family: "游ゴシック",YuGothic,"Hiragino Sans","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif !important;} 
body { font-size: 1.6rem; line-height:2.4rem; overflow-x: hidden !important; 
  font-family:"hannari","noto","游ゴシック体","Yu Gothic",YuGothic,"ＭＳ Ｐゴシック","MS PGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,Osaka,sans-seri;
   margin:0; padding:0; width:100%;
    word-wrap : break-word; overflow-wrap : break-word;
	animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;}
html { font-size: 62.5%; overflow-x: hidden !important; overflow:scroll;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  width:100%; margin:0; padding:0; }

a img{border:none;}
a { text-decoration:none; }
.cf:before,
.cf:after { content: " "; display: table;}
.cf:after { clear: both;}
.cf { *zoom: 1;}
.flex{display: flex; flex-flow: row wrap;}
.news { list-style:none; width:80vw; margin:0 auto; padding:0; }
.news li { width:30%; float:left; margin:1%; padding:0; position:relative;  text-align:center; }
.news li img { max-width:380px; margin:10px 0;}
.newspdf { margin:20px 0 !important; padding:0 0 0 20px !important; text-align:left !important; border-left: #060 3px solid; }
.newspdf a { text-decoration:underline;}
.newspdf img { max-width:80px !important;}
/* カラーパレット */
.m_color{ background-color:#43B8A6; color:#FFF }
.f_color{ color:#43B8A6 }
/* アニメーション */
.fadeIn{animation-name:fadeInAnime;animation-duration:1s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadeInAnime{ from { opacity: 0; } to { opacity: 1;}}
.fadeUp{animation-name:fadeUpAnime;animation-duration:0.5s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadeUpAnime{ from { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: translateY(0); }}
.fadeDown{animation-name:fadeDownAnime;animation-duration:0.5s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadeDownAnime{ from { opacity: 0; transform: translateY(-100px); }
  to { opacity: 1; transform: translateY(0); }}
.fadeLeft{animation-name:fadeLeftAnime;animation-duration:0.5s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadeLeftAnime{ from { opacity: 0; transform: translateX(-100px); }
  to { opacity: 1;transform: translateX(0); }}
.fadeRight{animation-name:fadeRightAnime;animation-duration:0.5s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadeRightAnime{ from { opacity: 0; transform: translateX(100px); }
  to {  opacity: 1; transform: translateX(0); }}
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;}
.delay1{ animation-duration: 1s !important;}
.delay2{ animation-duration: 1.5s !important;}
.delay3{ animation-duration: 2s !important;}
.delay4{ animation-duration: 2.5s !important;}
.delay5{ animation-duration: 3s !important;}
.delay6{ animation-duration: 3.5s !important;}

a:hover{ color:#F00}

section{ width:80%; max-width:1080px; margin:30px auto; box-sizing:border-box}
.bt{ position:fixed; right:0; top:130px; z-index:10; width:50px} 

span{display: inline-block; }
h2{ font-size:4.0rem; line-height:4.6rem; }
.arrow { position: absolute; bottom:8%; left:50%;animation: arrowmove 10s ease-in-out infinite; z-index:500}
.arrow::before { content: ""; position: absolute; margin: auto; top:10px; bottom: 0;
  left: 3px; width:70px; height:70px; border-radius: 50%; background:#FFF;}
.arrow::after { content: ""; position: absolute; margin: auto; top: 0; bottom: 0;
  left:17px; width:25px; height:25px; border-top:15px double #666;
  border-right:15px double #666666; transform: rotate(135deg);}
  
footer{ padding:20px 2%; box-sizing:border-box; font-family:"noto"; background-color:#FFF;font-size:20px; line-height:25px; border-top:#43B8A6 3px double; clear:both }
.footlogo{ display:inline-block; text-align:center; padding-left:80px; 
background:url(../img/common/logo.png) no-repeat left center; background-size:auto 50px }
footer ul{ width:24%; padding:0; list-style:none; margin:10px 0}
footer ul li a{ color:#333; padding:0 0 0 30px; font-size:1.6rem; line-height:2.4rem}
footer ul li a:before { content: "-　";  }
footer .menu1 li { margin:10px 0 0 10%; padding:0  }
footer .menu1 li a{ color:#666 !important;}
.menu1 li a{ font-size:1.8rem !important; line-height:2.6rem !important}
footer .menu2{ color:#666 !important; }
.menu2{ padding:0; margin:5px 0; font-size:1.8rem !important; line-height:2.6rem !important}
.menu3{ padding:0 0 0 10px; margin:5px 0; font-size:1.8rem !important; line-height:2.6rem !important}
.menu4 a{ padding:0 !important; margin:5px 0 !important; font-size:1.8rem !important; line-height:2.6rem !important}
footer .menu4 a{ color:#666 !important; }
.foot{ margin:60px 0 0 0; }
.foot div:nth-child(1){ font-size:15px; width:20%}
.foot div:nth-child(2){ width:50%; font-size:15px; text-align:center}
.foot div:nth-child(3){ font-size:11px; text-align:right; width:30%}

@keyframes arrowmove{0%{transform: translateY(-15px); opacity: 0;}
    50%{transform: translateY(0px); opacity: 1;} 
	100%{ transform: translateY(15px); opacity: 0;  } }
.pconly { }
.tabonly { display:none !important }
.phoneonly { display:none !important}

/* clearfix */

.clearfix:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden;}
.clearfix{display: inline-block;} 
/* Hides from IE Mac */
* html .clearfix{ height: 1%;}
.clearfix{ display:block;}
/* End Hack */

.secondphoto{ width:80%; max-width:600px;}
/* ------------------------------
   MEDIAQUERIES LAYOUT
----------------------------- */
@media print, screen and (max-width: 1500px) {
footer ul{ width:32%}
footer .menu1 li { margin:10px 0 0 0; padding:0  }
.menu2{ padding:0 20px !important}
.menu3{ padding:0 20px !important}
.navmenu > li { width: 48%; min-width:480px;line-height: 30px; padding:5px 0; margin:20px 1%;}
li.dropmenu:hover ul.drop { top: 30px; }
}
@media only screen and (max-width: 1024px) {
.pconly { display:none !important }
.tabonly { display:block !important }
.phoneonly { display:none !important}
footer ul{ width:48%}
.navmenu > li { width: 98%; min-width:98%; }
.foot{ flex-flow: row wrap;}
.foot div{ width:100% !important}
}
@media print, screen and (max-width: 768px) {
.language{ display:none}
.logo img { height:40px; }
.name1{ font-size:2.0rem;}
.name2{ font-size:1.4rem;}
label { width:50px; height:50px; margin:10px 10px 0 0 }
label span { border-bottom:solid 3px #B8DCEF;}
label span:nth-child(1) {top:14px}
label span:nth-child(2) {top:24px}
label span:nth-child(3) {top:34px}
.arrow { position: absolute; bottom:10%; left:40%;}
.bt img{ width:40px}
.pconly { display:none !important }
.tabonly { display:block !important }
.phoneonly { display:block !important}
.bt{ width:30px}
section h2{ font-size:2.8rem; line-height:3.5rem;}
footer ul{ width:98%}
.news li { width:100%; float:none; margin:0; }
.news li img { width:80%; float:none; margin:0; }
.newspdf { width:100% !important; margin-top:0 !important;}
.newspdf img { max-width:80px !important;}
.navmenu > li { line-height: 20px; margin:20px 1% 0 1%; }
.drop li a { padding:10px 0;}
}

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

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