/*---------- common ----------*/
@charset "UTF-8";html, body{margin:0;padding:0;}
body{font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","游ゴシック","Yu Gothic",YuGothic,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;font-size:16px;-webkit-text-size-adjust:100%;margin:0}
img{border:none;}
a{margin:0;padding:0;text-decoration:none;color:#111111;}
a:hover{color:#cccccc;text-decoration:none;}
a img:hover{filter:invert(100%);}
.small{font-size:80%;}
ul{margin:0;padding:0;}
li{padding:0;list-style:none;}
h1, h2, h3, h4{margin:0;}
h3{font-size:1.2em;}
.clear{clear:both;}

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

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

/*1.フェードインアニメーションの指定*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
    animation-name: fadeInDown;
    animation-delay: .4s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes fadeInDown {
    0% {opacity: 0;}
    100% {opacity: 1;transform: translate(0);}
}
.updown {transform: translateY(-100px);}
.downup {transform: translateY(100px);}
.sect02{overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right {transform: translateX(40px);}
.slide-left {transform: translateX(-80px);}
.scale-large {transform:scale(0.6);}
.delay-second {animation-delay: .9s;animation-duration: 2s;}
.delay-third {animation-delay: 1.9s}
.scrollbg{background-repeat:no-repeat;transition-property:background-position;transition-duration:.5s;transition-delay:.02s;}

/*---------- header ----------*/
#header{margin:0;overflow:hidden;height:100vh;}
#header div{-moz-transition:.8s ease;-o-transition:.8s ease;-webkit-transition:.8s ease;transition:.8s ease;}
#header ul{width:1080px;margin:0 auto;text-align:center;line-height:80px;}
#header ul li a:hover{color:#999999;}
#header .top_navi{width:100%;height:130px;position:fixed;opacity:1;z-index:2;background:#ffffff;}
#header .top_navi ul{line-height:60px;}
#header .top_navi ul li{width:calc(100%/6);float:left;}
#header .top_navi a.logo{width:330px;margin:30px auto 15px auto;display:block;}
#header .top_navi a.netis{width:240px;margin:10px;top:0;right:0;position:absolute;display:block;}
#header .top_navi a.netis img:hover{filter:brightness(1.5);}
#header .top_navi li{color:#222222;}
#header .top_navi a{color:#222222;}
#header .main_navi{width:100%;height:80px;position:fixed;opacity:0;background-color:transparent;z-index:1;}
#header .main_navi ul li{width:calc((100% - 270px)/6);float:left;position:relative;top:-10px;}
#header .main_navi ul li.logo{width:270px;}
#header .update{position:relative;top:-100px;display:inline-block;padding:0 10px;
line-height:1.2em;font-size:0.8em;background:#4472c4;color:#ffffff;animation:flash 1s ease-in-out infinite alternate;}
#header .top_navi .update{top:-80px;}
#header div.video{position:relative;}
#header div video{width:100%;z-index:-1;position:fixed;top:110px;}
#header div.sp_btn{display:none;}
#header div.sp_navi{z-index:0;}

@keyframes flash{
0%{opacity:1;}
100%{opacity:0.1;}
}

@media screen and (min-width:768px){
#header{max-height:56.25vw;}
#header.scroll .top_navi{opacity:0;z-index:1;}
#header.scroll .main_navi{opacity:1;background-color:#ffffff;z-index:2;}
#header.scroll .main_navi ul li{top:0;}
#header div.sp_navi{display:none;}
#header div#sp_cover{display:none;}
}

@media screen and (max-width:767px){
#header{margin:0;}
#header .top_navi{display:none;}
#header .main_navi{display:none;}
#header div#sp_cover {width:100%;height:100%;}
.slick-slider{margin:0;padding:0;}
.slick-slider img {width:auto;height:100vh;object-fit:cover;}
#header div#sp_cover img.cover{height:100%;}
#header div#sp_cover img.logo{width:70%;position:absolute;top:45%;left:15%;z-index:1;}
#header div.sp_btn{display:block;width:80px;height:40px;;font-size:90%;text-align:center;line-height:20px;position:fixed;bottom:50px;right:-20px;background-color:#FFFFFF;
box-shadow:0 0 10px rgb(0 0 0 / 12%);z-index:2;transform: rotate(270deg);-moz-transition: all .5s ease;-o-transition: all .5s ease;-webkit-transition: all .5s ease;transition: all .5s ease;}
#header div.sp_navi{width:100%;height:100%;overflow:hidden;position:fixed;background:#cceeee;
top:0;left:0;z-index:2;display:none;justify-content:center;align-items:center;opacity:0;
-moz-transition:all .4s ease;-o-transition:all .4s ease;-webkit-transition:all .4s ease;transition:all .4s ease;}
#header.open-menu div.sp_navi{display:flex;opacity:1;}
#header div.sp_navi img{width:50%;margin:0 auto;}
#header div.sp_navi ul{width:100%;line-height:60px;}
}


/*---------- content ----------*/
#content{margin:0;padding:100px 0;background:#ffffff;position:relative;}
#content section{width:1080px;margin:0 auto;position:relative;}
#content ul{overflow:hidden;padding:10px 0;text-align:center;}
#content ul li{float:left;width:20%;margin-left:4%;overflow:hidden;}
#content ul li p{font-size:1.2em;}
#content ul li img{width:100%;}

#content #about{height:400px;margin-bottom:50px;}
#content #about .photo{width:585px;position:absolute;left:45.8%;top:3.5%;}
#content #about .txt{width:356px;position:absolute;left:10.1%;top:6.5%;}
#content #about .button{height:54px;position:absolute;left:10.1%;top:70.5%;}

#content #method{width:100%;background-image:url(/images/cnt_m_bg.png);background-size:contain;height:450px;}
#content #method div{width:1080px;height:450px;margin:0 auto;position:relative;}
#content #method .photo{width:304px;position:absolute;left:10.9%;top:37%;border:8px solid #ffffff;border-width:9px 8px 9px 8px;-webkit-filter:
drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.15));-moz-filter:drop-shadow(6px 6px 6px rgba(0, 0, 0, 0.15));
-ms-filter:drop-shadow(6px 6px 4px rgba(0, 0, 0, 0.15));filter:drop-shadow(6px 6px 4px rgba(0, 0, 0, 0.15));}
#content #method .arrow{width:120px;position:absolute;left:52.5%;top:24%;}
#content #method .illust{width:538px;position:absolute;left:41.7%;top:43.6%;}
#content #method .txt{width:334px;position:absolute;left:11%;top:7.6%;}
#content #method .button{height:55px;position:absolute;left:65.8%;top:20.2%;}

#content #research{background-image: url(/images/cnt_r_bg.svg);;height:450px;}
#content #research .photo{width:330px;border-radius:50%;position:absolute;left:12.8%;top:15.5%;}
#content #research .txt{width:228px;;position:absolute;left:46.5%;top:23.6%;}
#content #research .button{height:55px;position:absolute;left:46.2%;top:60.4%;}

#content #construction{width:100%;background-image: url(/images/cnt_c_bg.svg);background-repeat:no-repeat;background-position:top;height:480px;margin-top:-60px;}
#content #construction div{width:100%;height:357px;background:#E8F4EF;top:123px;position:relative;}
#content #construction .photo{height:357px;margin-left:calc((100% - 1080px)/2);}
#content #construction .txt{width:362px;position:absolute;left:calc((100% - 1080px)/2 + 138px);top:13%;}
#content #construction .button{height:55px;position:absolute;left:calc((100% - 1080px)/2 + 138px);top:77.3%;}

#content #news{margin:50px auto 50px calc((100% - 1080px)/2 + 138px);width:900px;}
#content #news h2 img{height:22px;margin-bottom:15px;}
#content #news dl{font-size:1em;margin:10px 0 0 0;display:inline-block;padding-bottom:10px;border-bottom:1px solid #cccccc;}
#content #news dt{width:120px;color:#00a395;}
#content #news dd{width:500px;}

@media screen and (min-width:768px){
#content{min-width:1080px;}
}

@media screen and (max-width:767px){
#content section{width:calc((100% - 20px));margin:0 auto 50px auto;position:relative;}
#content img{margin-bottom:10px;}
#content h3{margin:1em 0;}
#content .button{margin:10px;}

#content #about{background:none;height:auto;}
#content #about .photo{width:100%;position:relative;left:0;top:0;}
#content #about .button{position:relative;left:0;top:0;}

#content #method{width:calc((100% - 20px));background:none;height:auto;}
#content #method div{width:100%;height:auto;margin:0 auto;position:relative;}
#content #method .photo{width:100%;;position:relative;left:0;top:0;border:none;filter:none;}
#content #method .button{position:relative;left:0;top:0;}

#content #research{background:none;height:auto;}
#content #research .photo{width:100%;;position:relative;left:0;top:0;border-radius:0;}
#content #research .button{position:relative;left:0;top:0;}

#content #construction{width:calc((100% - 20px));background:none;height:auto;margin-top:0;}
#content #construction div{width:100%;height:auto;background:none;top:0;position:relative;}
#content #construction .button{position:relative;left:0;top:0;}

#content #news{margin:50px auto;width:calc((100% - 20px));}
#content #news dd{width:auto;}
}


/*---------- sub ----------*/
#header.sub{margin:0;width:100%;position:relative;}
#header img.key{width:100%;min-width:1080px;z-index:-1;position:fixed;top:0;display:block;}
#header img.title{margin:0 auto;height:90%;position:absolute;left:48%;bottom:-20%;opacity:0;}
#content section.sub{margin:0 auto 100px auto;}
#content section.sub h2 img{height:16.5px;margin-bottom:25px;}
#content section.sub h3 img{height:22px;margin-bottom:25px;}
#content section.sub p{margin:15px 0 40px 0;font-size:0.9em;line-height:1.8em;}
#content section.sub p.day{text-align:right;margin-top:-40px;}
#content section.sub div.right{float:right;margin:20px 0 0 15px;}
#content section.sub div.right img{width:100%;}
#content section.message div.right p{margin:0;width:auto;}
#content section.message div.right p.large{font-size:1.2em;}
img.organization{margin-top:15px;width:595px;}
dl{font-size:14px;margin:10px 0 0 0;display:inline-block;}
dt{width:240px;font-weight:normal;}
dd{width:405px;margin:0;}
dd.tel{width:115px;}
#content section.news{margin:50px auto}
#content section.news li{width:80%;margin:-100px auto 20px auto;padding-top:100px;border-bottom:1px solid #cccccc;}
#content section.news dl{font-size:1em;margin-bottom:20px;}
#content section.news dt{width:auto;color:#00a395;float:none;}
#content section.news dd{width:100%;float:none;}
#content section.research a{color:#3d69f9;}
#content section.research a:hover{color:#ccc;}
#content section.research .pdf{margin-left: 5px;padding: 1px 5px;background: #3678D9;border-radius: 5px;
text-align: center;color: #FFFfff;font-weight: bold;}
#content section.example figure{display:flex;height:100%;align-items:center;}
#content section.example h2{text-align:center;}
#content section.example p{font-size:110%;text-align:center;}
#content section.example p a{padding:10px 30px 10px 20px;color:#ffffff;background:#231714;border:2px solid #ffffff;position:relative;}
#content section.example p a::after{content: "";margin:auto;position:absolute;top:0;bottom:0;right:10px;
width:10px;height:10px;border-top:3px solid #ffffff;border-right:3px solid #ffffff;transform:rotate(45deg);}
#content section.example p a:hover{color:#231714;background:#ffffff;border:2px solid #231714;}
#content section.example p a:hover::after{border-top:3px solid #231714;border-right:3px solid #231714;}
#content section.example table{margin:20px auto;}
#content section.example td{padding:10px;}
#content section.example td.first{width:calc(4.5em + 20px);text-align:justify;}
#content section.method p{font-size:110%;}
#content section.method a{color:#3d69f9;}
#content section.method a:hover{color:#ccc;}
#content section.method .pdf{margin-left: 5px;padding: 1px 5px;background: #3678D9;border-radius: 5px;
text-align: center;color: #FFFfff;font-weight: bold;}
#content section.method img{margin:20px 0 40px 0;}
#content section.method h3{text-align:center;background:#00b2ff;padding:5px 0;margin:20px 0;color:#ffffff}
#content section.method .award{max-width:calc(100% - 20px);width:600px;padding:20px;margin:40px auto;border:2px solid #231714;background:#aaaaaa;color:#ffffff;border-radius:10px;font-weight:bold;}
#content section.method h4{text-align:center;margin:10px 0;}

@media screen and (min-width:768px){
#header.sub{min-width:1080px;height:520px;}
#content section.sub{width:760px;}
#content section.mission p{width:435px;}
#content section.message p{width:540px;}
#content section.mission div.right{width:312px;}
#content section.message div.right{width:200px;}
#content section.sub img.logo{width:300px;margin:0 0 0 50px;}
dt,dd{float:left;}
}

@media screen and (max-width:767px){
#header img.key{max-width:none;width:auto;height:100%;position:relative;}
#header img.title{left:0;}
#content section.sub h2 img{height:16.5px;}
#content section.sub h3 img{height:13px;}
#content section.sub div.right{float:none;margin:0;}
img.organization{width:100%;}
dl,dt,dd{width:100%;}
#content section.news li{width:100%;}
}

/*---------- forums ----------*/
#header.forums{height:100px;}
#content .button.drive{margin:0 auto;display:block;width:300px;height:5em;background:#05c6fe;color:#ffffff;
padding:1.5em .5em;font-size:2rem;font-weight:bold;line-height:2;border-radius:0.5em;text-align:center;vertical-align:middle;
transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;}
#content .button.drive:hover{background:#2d1497;}
#content #comments,.post-14{margin:0 auto 100px auto;}

.comments_area {background:#eeeeee;padding:25px;border-radius: 12px;margin-top:1em;line-height:1.4em;}
.comments_title{text-align:center;margin-bottom:20px;}
/*Comment List*/
.comments_area h2#comments {font-size:130%; margin:0 0 0.7em;}
.comments_area ol {list-style:none;padding:0;}
.comments_area ol li {overflow:hidden;background:rgba(255,255,255,0.5);}
.comments_area ol li.depth-1{border:1px solid #eee;margin-bottom:1em;padding:12px;border-radius:12px;}
.comments_area ol li ol.children{margin-top:20px;}
.comments_area ol li ol.children li{border:1px solid #eee;margin-bottom:1em;padding:12px;border-radius:12px;}
.comments_area ol li ul.children {margin-left: 10%;} /*children 返信部分*/
.comments_area ol li ul.children li {border-top:1px dotted #fff; margin-top:1em; padding-top:12px;}
span.says{display:none;}
cite.fn {font-size:90%;}
div.comment-meta {font-size:80%;}
div.comment-meta:after {content:''; display:block; height:0; clear:both; visibility:hidden;}
.comment-body p {font-size:90%;background:#fff;border-radius: 12px;padding:0.5em 1em;margin:0.8em 0 0.5em;border:1px solid #999;}
div.reply { margin-bottom:0.2em}/*返信button*/
div.reply:after {content:''; display:block; height:0; clear:both; visibility:hidden;}
div.reply a {font-size:80%;line-height:1em;display:block;float:right;padding:0.3em 1em;background:#05c6fe;border-radius: 8px;color:#fff;}
div.reply a:hover {background:#2d1497;text-decoration:none;}
/*Comment Form*/
#respond {background:rgba(255,255,255,0.5);padding:1em;border-radius: 9px;}
#respond h3#reply-title {font-size:130%; margin:0 0 0.7em; color:#2d1497;}
#respond h3#reply-title small a {font-size:70%; margin-left:1em; text-decoration:underline;}/*コメントをキャンセルの文字*/
#respond p { margin-bottom:0.5em;}
#respond p.commentNotesBefore, #respond p.commentNotesAfter {font-size:80%;}
#respond p.form-submit {margin-bottom:0;}
/*form element*/
input#author, input#email, textarea#comment {
    width:95%;
    border:none;
    border-radius:12px;
    margin-top:0;
    font-size:14px;
    padding:7px 12px;
    color:#333;}
textarea#comment {line-height:1.6em;}
input#submit {
    cursor:pointer;
    font-size:110%;
    padding: 5px 1em;
    margin:0;
    border-style:none;
    color: #fff;
    background: #05c6fe;
    border-radius: 18px;}
input#submit:hover {background:#2d1497;}

@media screen and (min-width:768px){
#content #comments,.post-14{width:760px;}
}
@media screen and (max-width:767px){
#header.forums{height:0;}
#content #comments,.post-14{width:calc((100% - 20px));margin:0 auto 50px auto;}
}

/*---------- footer ----------*/
#footer{background-color:#221714;margin:0px auto;height:360px;position:relative;font-size:90%;}
#footer p{text-align:center;color:#ffffff;}
#footer a{color:#ffffff;}
#footer a:hover{color:#cccccc;}
#footer .logo{width:330px;margin:0 auto 1em auto;filter:invert(100%);}
#footer div{padding:50px 0 0 0;}
#copyright{}

@media screen and (min-width:768px){
#footer{min-width:1080px;}
}

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

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.cf:before,
.cf:after{content:" ";display:table;}
.cf:after{clear:both;}
.cf{*zoom:1;}