@charset "utf-8";
/* 共通設定 */
@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;width:100%; margin:0; padding:0;
  -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; }
div, ul, ul li, section, dl, dl dt, dl dd{ box-sizing:border-box; }
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:500; width:50px} 

header{ background-image:url(../img/top/second_top.jpg); background-repeat:repeat; background-size:cover;
background-position:center; padding:50px 0 ; margin:0 !important; box-sizing:border-box}
header dl{ padding:0; margin:0 auto;background-color:#43B8A6; color:#FFF; width:80%; max-width:500px; text-align:center }
header dl dt{ padding:10px 0 0 0; margin:0; font-size:3.6rem; line-height:4.0rem; font-family:Georgia, "Times New Roman", Times, serif}
header dl dd{ padding:0; margin:0; font-size:1.6rem; line-height:3.0rem; font-family:"noto", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace; font-weight:bold}
span{display: inline-block; }
h2{ font-size:4.0rem; line-height:4.6rem; }
/* ハンバーガー */
#toggle {position: fixed; top: 10px; right: 10px;}
#toggle-box { position: relative; width:48px; height:44px; cursor: pointer;background-color:#FFF;box-shadow:3px 3px 3px rgba(0,0,0,0.6);}
#toggle-box > span { width:38px; height:2px;left:5px; display: block; background-color:#43B8A6;  position: absolute;
  transition: transform .6s ease-in-out, top .5s ease, bottom .5s ease;}
#toggle-box > span:nth-child(1) { top: 9px;}
#toggle-box > span:nth-child(2) { top: 50%;transform: translatey(-50%);}
#toggle-box > span:nth-child(3) { bottom:9px;}
#toggle { z-index: 1000;}
#main { position: relative; z-index: 990;}
#nav-content { z-index: 900; overflow-x:hidden; width:100%; height: 100%;
 background-color:rgba(255,255,255,0.9); color: #43B8A6; position: fixed; 
 box-sizing:border-box; top: 0; right: 0; text-align: center; padding:0;
 transform: translateX(100%);transition:  transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);}
#nav-content ul{ box-sizing:border-box; margin:0; padding: 20px; }
.is-open { overflow: hidden;}
.is-open #toggle-box > span { background: #43B8A6;}
.is-open #toggle-box > span:nth-child(1) {top: 50%; transform: rotate(45deg) translatey(-50%);}
.is-open #toggle-box > span:nth-child(2) { width: 0;}
.is-open #toggle-box > span:nth-child(3) { top: 50%; transform: rotate(-45deg) translatey(-50%);}
.is-open #nav-content { z-index: 999; transform: translateX(0);}
.is-open #toggle-box { background-color:rgba(0,204,204,0.2); box-shadow:3px 3px 3px rgba(0,0,0,0.6);}
li.dropmenu ul.drop { list-style:none; position: absolute; top:0; left:0; width: 90%; -webkit-transition: all .2s ease; transition: all .2s ease;}
li.dropmenu:hover ul.drop { top: 20px; visibility: visible; opacity: 1;}
.navmenu > li { width: 90%; line-height:50px; padding:0; margin:20px auto; 
font-size:2.0rem; border-bottom:#099 1px solid; box-sizing:border-box}
.menulogo{ border:none !important; line-height:2.0rem !important}
.navmenu { position: relative;width: 100%;  margin: 0 auto; list-style:none}
.navmenu > li.dropmenu { position: relative; padding:0;}
.navmenu > li a {display: block; color:#666;}
ul.drop { visibility: hidden; opacity: 0;  z-index: 1; padding:0; margin:0}
.navmenu > li:hover { color:#099; -webkit-transition: all .5s; transition: all .5s;}
.drop li { border-top: 1px solid #CCC; background:#FCC;}
.drop li a:hover { background:#9CC}
.menuttl:after {  content: ''; display: inline-block;width: 6px; height: 6px;
    margin: 0 0 0 15px; border-right: 1px solid #999; border-bottom: 1px solid #999;
    -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.navmenu:before,
.navmenu:after { content: " "; display: table;}
.navmenu:after { clear: both;}
.navmenu { *zoom: 1;}
.dropmenu { padding:0 0 10px 0 !important}
/* /ハンバーガー */
.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; 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; }
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; line-height:2.6rem}
footer .menu2{ color:#666 !important; }
.menu2{ padding:0; margin:5px 0; }
.menu3{ padding:0 0 0 10px; margin:5px 0;}
.menu4 a{ padding:0 !important; margin:5px 0 !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}
header{ padding:30px 0  !important; }
header dl { max-width:350px}
header dl dt{ padding:5px 0 0 0; margin:0; font-size:2.6rem;line-height:3.0rem;}
header dl dd{ font-size:1.4rem; line-height:2.4rem;}
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;}
.menu1 li a , footer{ font-size:14px; line-height:20px}
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

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