@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=Noto+Serif+JP:wght@200..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');


 
 .notoSerif{font-family: "Noto Serif", serif;}
 
 
 
 html{
 font-family: "Noto Sans JP", sans-serif;
 font-size: 62.5%;
 scroll-behavior: auto !important;
 }
 


 
 .container{
 max-width:1240px;
 padding-left: 20px;
 padding-right: 20px;
 margin: 0 auto;
 /*outline: 1px dashed rgba(102,133,255,1.00);*/
 }
 
 
 
 
 /* margin */
.mt-8 {  margin-top: -8px !important;}
.mt0 {  margin-top: 0 !important;}
.mt1 {  margin-top: 8px !important;}
.mt2 {  margin-top: 16px !important;}
.mt3 {  margin-top: 24px !important;}
.mt4 {  margin-top: 32px !important;}
.mt5 {  margin-top: 40px !important;}
.mt6 {  margin-top: 48px !important;}
.mt7 {  margin-top: 56px !important;}
.mt8 {  margin-top: 64px !important;}
.mt9 {  margin-top: 72px !important;}
.mt10 {  margin-top: 80px !important;}

.mb0 {  margin-bottom: 0 !important;}
.mb1 {  margin-bottom: 8px !important;}
.mb2 {  margin-bottom: 16px !important;}
.mb3 {  margin-bottom: 24px !important;}
.mb4 {  margin-bottom: 32px !important;}
.mb5 {  margin-bottom: 40px !important;}
.mb6 {  margin-bottom: 48px !important;}
.mb7 {  margin-bottom: 56px !important;}
.mb8 {  margin-bottom: 64px !important;}
.mb9 {  margin-bottom: 72px !important;}
.mb10 {  margin-bottom: 80px !important;}

/* padding */
.pt0 {  padding-top: 0 !important;}

.pb0 {  padding-bottom: 0 !important;}


/**/
.mod_c{text-align: center !important;}
.mod_b{font-weight: 700;}



/*--------*/
.sp_inline{display: none;}
.sp_block{display: none;}

@media only screen and (max-width:767px) {
.pc_inline{display: none;}
.sp_inline{display: inline;}

.sp_block{display: block;}
.pc_block{display: none;}

}/*768*/



/* ---------------------------------------------------------------------------------------------------
header
--------------------------------------------------------------------------------------------------- */


header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,.0));
z-index: 1000;
}


header.h_lower,
header.is-scroll {
background: rgba(255,255,255,.8);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
color: #000; 
}

header .header_inner {
display: flex;
justify-content:flex-end;
align-items: center;
width: 100%;
margin: 0 auto;
padding: 10px 20px;

}

header .header_nav {
position: static;
height: auto;
width: auto;
background: none;
padding: 0;
}

header .nav_items {
display: flex;
flex-direction: row;
justify-content: flex-end;
/*gap:3rem;*/
}
  
header .nav_items li a {
display: block;
color: #fff;
text-decoration: none;
font-size: 1.8rem;
padding: 1rem 2rem;
}
header .nav_items li a:hover{text-shadow: 0 0 5px rgba(0,0,0,1),0 0 15px rgba(0,0,0,1);}
header.h_lower .nav_items li a,
header.is-scroll .nav_items li a {color: #000;}
header.h_lower .nav_items li a:hover,
header.is-scroll .nav_items li a:hover{text-shadow:none; color:#009944;}

header .hamburger {
display: none;
}


/* ハンバーガー表示はスマホだけ */
@media (max-width: 1199px) {


header.h_lower .nav_items li a{color: #fff;}
header.h_lower .nav_items li a:hover{color: #fff;}

/* ハンバーガーボタン */
header .hamburger {
/*
outline: 2px dashed red;
*/
  /*display: none;*/
  display: block;
  position: relative;
  width: 30px;
  height: 21px;
  cursor: pointer;
  z-index: 1001;
  /*border: none;*/
  /*background: rgba(0,0,0,0.48);*/
}

header .hamburger span {
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  left: 0;
  transition: 0.3s;
}

header .hamburger span:nth-child(1) {
  top: 0;
}

header .hamburger span:nth-child(2) {
  top: 9px;
}

header .hamburger span:nth-child(3) {
  top: 18px;
}

/* メニュー開閉時のアニメーション */
header .hamburger.is-active span:nth-child(1) {
  transform: rotate(45deg);
  top: 9px;
}

header .hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

header .hamburger.is-active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 9px;
}

/* ナビゲーション初期状態 */

header {
  background-image:linear-gradient(to bottom,rgba(0,0,0,.3),rgba(0,0,0,.0));
  position: relative;
}

header .header_inner {
position: fixed;
 top: 0;
    right: 0;
padding: 12px 12px;
width: 54px;
margin: 0 0 0 auto;
background: rgba(0,0,0,.3);
}

/*
header .header_inner {

display: flex;
justify-content:flex-end;
align-items: center;
width: 100%;
margin: 0 auto;
padding: 10px 20px;

}
*/



header .header_nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,.7);
  padding-top: 60px;
  transition: 0.3s ease;
  z-index: 1000;
}

header .header_nav.is-active {
  right:0;
}

/* ナビゲーション内のリスト */
header .nav_items {
display: block;
  list-style: none;
  padding: 0;
}

header .nav_items li {
  margin: 20px 0;
  text-align: center;
}


.hamburger {
display: block;
}

.header_nav {
display: block;
}

.nav_items {
display: flex;
flex-direction: column;
}


}/*1199*/







/*----------------------------------------------------------------------------
eye_catch
----------------------------------------------------------------------------*/
.eye_catch{
background: #ccc url(/sue/img/img_01.jpg) no-repeat center top;
width: 100%;
height:96rem;
position: relative;
z-index:1;
}

.eye_catch .container{
width: 100%; 
max-width: 100%; 
height: calc(100% - 12rem);
margin: 0;
padding: 0;
/*
position: absolute;
left:0;
top:12rem;
*/
}

.eye_catch .pege_title{
/*outline: 2px dashed red;*/
display: inline-block;
color: #fff;
background-image:linear-gradient(to right,rgba(0,96,43,.77)80%,rgba(0,96,43,.0));
font-weight: 700;
text-shadow: 0 3px 6px rgba(0,0,0,.5);
padding-left: 9rem;
padding-right:30rem;
padding-top:4rem;
padding-bottom:4rem;
position: absolute;
left:0;
top:12rem;
}
.eye_catch .pege_title p{
font-size:2.2rem;
line-height: 1.7;
border-bottom:1px solid #fff;
padding-bottom: 1rem;
}
.eye_catch .pege_title h1{
font-size:4rem;
line-height: 1.4;
margin-top: 1rem;

}


.eye_catch .img_comment{
position: absolute;
left:2rem;
bottom:2rem;
}
.eye_catch .img_comment p{
font-size: 1.8rem;
color: #fff;
font-weight: 500;
text-shadow: 0 0 5px rgba(0,0,0,1),0 0 10px rgba(0,0,0,1);
}

.eye_catch .completion_image{
/*outline: 1px dashed rgba(255,58,253,1.00);*/
width: 480px;
height: 320px;
position: absolute;
right:5rem;
bottom:6rem;
border:2px solid #fff;
border-radius: 1rem;
box-shadow: 0 3 6px rgba(0,0,0,.5);
}
.eye_catch .completion_image img{width: 100%;border-radius: 1rem;position: relative;}
.eye_catch .completion_image p{
position: absolute;
font-size: 1.6rem;
color: #fff;
left:1.2rem;
top:1.2rem;
}


@media (max-width: 1920px) {

.eye_catch .completion_image{
width: 25vw;
height:16.67vw;
right:2.6vw;
bottom:3.1vw;
}

}/*1920*/


@media (max-width: 1299px) {

.eye_catch .pege_title{
padding-left:6vw;
padding-right:12vw;
padding-top:4rem;
padding-bottom:4rem;
}


.eye_catch .completion_image{
width:33rem;
height:22rem;

}

}/*1499*/



@media (max-width: 768px) {

.eye_catch{
background: #ccc url(/sue/img/img_01.jpg) no-repeat left 55% top;
height:172.8vw;
background-size: 370%;
}

.eye_catch .pege_title{
display:block;
background-image:linear-gradient(to right,rgba(0,96,43,.77)80%,rgba(0,96,43,.0));
padding-left: 3.2vw;
padding-right:8vw;
padding-top:6.13vw;
padding-bottom:6.13vw;
left:0;
top:13.33vw;
}
.eye_catch .pege_title p{
font-size:3.73vw;
padding-bottom:3.2vw;
}
.eye_catch .pege_title h1{
font-size:5.33vw;
margin-top:3.2vw;
}

.eye_catch .img_comment{
left:1.5rem;
bottom:2rem;
}
.eye_catch .img_comment p{
font-size: 1.4rem;
}

.eye_catch .completion_image{
width: 53.33vw;
height: 35.55vw;
right: 3.2vw;
bottom:4.8vw;
}
.eye_catch .completion_image img{width: 100%;border-radius: 1rem;position: relative;}
.eye_catch .completion_image p{
position: absolute;
font-size: 1.4rem;
color: #fff;
left:1.2rem;
top:1.2rem;
}



}/*768*/




/*----------------------------------------------------------------------------
summary
----------------------------------------------------------------------------*/

#sec_01::before,#sec_02::before,#sec_03::before{
content: "";
display: block;
height: 40px; /* 調整したい高さ（固定ヘッダーの高さ） */
margin-top: -40px; /* heightと同じ分のネガティブマージン */
visibility: hidden;
}



section.summary{
padding-top: 2rem;
padding-bottom: 14rem;
background-image:url(/sue/img/img_03_1.png),url(/sue/img/img_03_2.png);
background-repeat: no-repeat;
background-position: left top,right bottom;
}


@media (max-width: 1199px) {
section.summary{
background-size: 80%;
}
}/*1199*/


@media (max-width: 768px) {
section.summary{
padding-top:16vw;
padding-bottom:28vw;
}
}/*768*/



.mod_h2,
.mod_h1_lower{
font-size:3.4rem;
font-weight:500;
text-align: center;
margin-top: 12rem;
}
.mod_h2::after,
.mod_h1_lower::after{
content:'';
display:block;
height:2px;
width: 4em;
margin: 0 auto;
margin-top: 1.5rem;
background:#009944;
}

.mod_p{font-size:1.6rem; line-height: 2;}

@media (max-width: 768px) {
.mod_h2,
.mod_h1_lower{font-size: clamp(24px, 5.87vw, 3rem); margin-top: 18.67vw;}


}/*768*/



.summary #sec_01 ul{
margin-top:6rem;
border-top:1px solid #ccc;
}

.summary #sec_01 ul>li{
border-bottom:1px solid #ccc;
}

.summary #sec_01 ul>li>a,
.summary #sec_01 ul>li.no_link{
padding: 1.5rem .3rem;
display: flex;
vertical-align: middle;
}

.summary #sec_01 ul>li>a:hover{opacity: 0.6;}

.summary #sec_01 ul>li>a .tag,
.summary #sec_01 ul>li.no_link .tag{
font-size:1.4rem;
font-weight: 500;
color: #fff;
line-height: 1;
width: 7rem;
background:#009944;
display: inline-block;
text-align: center;
margin-right: 4rem;
padding-top: 6px;
padding-bottom: 6px;
}
.summary #sec_01 ul>li>a time,
.summary #sec_01 ul>li.no_link time{
margin-right: 1.5em;
}


@media (max-width: 768px) {

.summary #sec_01 ul {
  margin-top: 10.67vw;
}

.summary #sec_01 ul>li>a,
.summary #sec_01 ul>li.no_link{
  padding: 4vw 0.8vw;
  display: flex;
  align-items: center; /* vertical-align の代替 */
  width: 100%;
  gap:20px /* margin-right の代わりに gap を使うのも可 */
}


.summary #sec_01 ul>li>a .tag,
.summary #sec_01 ul>li.no_link .tag{
  width:4em;
  padding: 1.6vw;
  flex-shrink: 0;
  margin-right: 0;
}

.summary #sec_01 ul>li>a .mod_p,
.summary #sec_01 ul>li.no_link .mod_p{
  flex: 1;
  /*outline: 2px dashed red;*/
}

.summary #sec_01 ul>li>a time,
.summary #sec_01 ul>li>a span,
.summary #sec_01 ul>li.no_link time,
.summary #sec_01 ul>li.no_link span{
  display: inline-block;
}

}/*768*/


.summary table{
font-size: 1.6rem;
line-height:2;
width: 100%;
margin-top:6rem;
border-top:1px solid #ccc;
}


.summary table th{
width:10em;
font-weight: 500;
text-align: left;
color: #009944;
padding-left: 1.5em;
background: #EDF8F2;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
border-bottom:1px solid rgba(0,0,0,.2);
}

.summary table td{
padding-left: 1.5em;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
border-bottom:1px solid rgba(0,0,0,.2);
}


@media (max-width: 768px) {

.summary table{
margin-top: 10.67vw;
}

.summary table th{
width:6em;
padding-left: .5em;
padding-right: .5em;
}

.summary table td{
padding-left: .7em;
}


}/*768*/





/*----------------------------------------------------------------------------
basic
----------------------------------------------------------------------------*/

section.basic{
background:#CCEBD9;
padding: 120px 0 100px;
}

.basic .box{
margin-top: 6rem;
background:#fff;
border:3px solid #33AD69;
padding: 3rem;
display: flex;
justify-content:center;
align-items: center;
}

.basic .box h3{
font-size: 2rem;
line-height: 1.5;
font-weight: 700;
color: #33AD69;
border:3px solid #33AD69;
width: 15rem;
height: 15rem;
text-align: center;
padding-top: 4rem;
border-radius:50%;
margin-right: 7rem;
}

.basic .box ol li{
font-size: 2rem;
line-height: 1.8;
padding: .7rem .3rem;
}

.basic .box ol li .number{
font-size: 3rem;
color:#33AD69;
vertical-align: -5%;
margin-right:.5rem;
}


@media (max-width: 768px) {

section.basic{
padding: 16vw 0;
}

.basic .box{
margin-top: 10.67vw;
border:2px solid #33AD69;
padding: 8vw 4vw;
display: block;
}

.basic .box h3{
font-size: clamp(1.8rem, 4.8vw, 2rem);
width: 90%;
height: auto;
line-height: 4rem;
border-radius:2.5rem;
padding-top:0;
margin: 0 auto;
border:1px solid #33AD69;
}

.basic .box ol{margin-left: 2em;margin-top: 5vw;}

.basic .box ol li{
font-size: 1.8rem;
padding: .7rem .3rem;
text-indent: -1.3em;
}

.basic .box ol li .number{
font-size: 2rem;
margin-right:.3rem;
}


}/*768*/





/*----------------------------------------------------------------------------
schedule
----------------------------------------------------------------------------*/

section.schedule{
padding: 120px 0 100px;
}

.schedule figure{
margin-top: 6rem;
}

.schedule figure img{width: 100%;}


@media (max-width: 768px) {
section.schedule{
padding: 16vw 0;
}

.schedule figure{
width: 90%;
margin: 10.67vw auto 0;
}

}/*768*/



/*----------------------------------------------------------------------------
status
----------------------------------------------------------------------------*/

section.status{
background:#EDF8F2;
padding: 120px 0 100px;
position: relative;
z-index:auto; 
}


.anchor_link{
margin-top: 10rem;
}

.anchor_link ul{
display: flex;
justify-content:center;
gap:1.5rem 2rem;
flex-wrap: wrap;
}
.anchor_link ul li a{
font-size: 1.8rem;
padding: 1rem 3rem;
font-weight: 500;
color: #fff;
background: #009944;
display: block;
border-radius: 2rem;
}
.anchor_link ul li a:hover{background: #56BB83; transition:all .1s;}

.mod_h2_lower{
font-size: 2.8rem;
text-align: center;
font-weight: 700;
margin-top: 10rem;
color:#009944;
}

.status h3{
font-size: 1.8rem;
line-height: 1.5;
font-weight: 500;
text-align: center;
margin-top: 5.5rem;
width: 100%;
  position: relative;
  display: inline-block;
  z-index: 1;
}
.lower_1 .status h3{
margin-top: 8rem;
}

.status h3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1em; /* テキストからの距離 */
  width: 100%;
  height: 0.5em; /* 色の高さ */
  background-color:#C5E8D4;
  z-index:-1; /* テキストの下に配置 */
}



ul.col3{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 3rem;
}

ul.col3 li{width:30%;}

ul.col3 li img{width: 100%;}


.status .btn{position: relative;
z-index: 2;}

.status .btn a{
font-size: 1.8rem;
font-weight: 500;
color: #fff;
display: block;
width: 430px;
background: #2FAB66;
margin: 7rem auto 0;
line-height: 1.8;
padding: 1.5rem .5rem;
text-align: center;
box-shadow: 0 3px 6px rgba(0,0,0,.2);

}






@media (max-width: 768px) {

section.status{
padding: 16vw 0;

}
.anchor_link{
margin-top:8rem;
margin-bottom:-2rem;
}

.anchor_link ul li a{
font-size: 1.6rem;
padding: 1rem 2rem;
}


.mod_h2_lower{
font-size: 2.4rem;
text-align: center;
margin-top-top: 8rem;
color:#009944;
}


.status h3{
font-size: clamp(1.8rem, 4.8vw, 2rem);
}
.lower_1 .status h3{
margin-top: 6rem;
}

ul.col3{
display: block;
margin-top: 3rem;
}
ul.col3 li{width:90%;margin: 8vw auto 0;}


.status .btn a{
font-size: 1.6rem;
font-size: clamp(1.6rem, 4.27vw, 1.8rem);
width:85%;
margin: 11.73vw auto 0;
}



}/*768*/



/*　モーダル　-------------------------　*/

.col3 img {
  cursor: pointer;
}

.modal {
  display: none; 
  position: fixed;
  z-index: 9999;
  padding-top: 120px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 90%;
  animation: zoom 0.3s;
}

@keyframes zoom {
  from { transform: scale(0.7); }
  to { transform: scale(1); }
}

.close {
  position: absolute;
  top: 30px;
  right: 40px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  font-weight: 100;
}



/*----------------------------------------------------------------------------
access
----------------------------------------------------------------------------*/

section.access{
background:#fff;
padding: 120px 0 100px;
}


.access .p_address{
font-size: 2rem;
line-height: 1.8;
text-align: center;
margin-top: 6rem;
}

.access .map{
border:2px solid #009944;
width:100%;
max-width: 54rem;
padding: 2rem;
margin: 3rem auto 0;
}

.access .map img{
width: 100%;
}


@media (max-width: 768px) {

section.access{
padding: 16vw 0;
}

.access .p_address{
font-size: clamp(1.8rem, 4.8vw, 2rem);
margin-top:10.67vw;
}


}/*768*/


/*----------------------------------------------------------------------------
collaboration
----------------------------------------------------------------------------*/

section.collaboration{
background:#EDF8F2;
padding: 100px 0;
}

ul.col4{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: -6rem;
}

ul.col4 li{
width:21.67%;
margin-top:6rem; 
}

ul.col4 li a{
display: block;
text-align: center;
}
ul.col4 li a:hover{
opacity: .6;
transition:all .2s;
}


ul.col4 li a img{
width: 100%;
}


ul.col4 li a .mod_p{
line-height: 1.6;
margin-top: 1rem;
}


@media (max-width: 768px) {

section.collaboration{
padding: 10.67vw 0;
}

ul.col4{
margin-top: -8vw;
}

ul.col4 li{
width:47.5%;
margin-top:8vw; 
}


}/*768*/





/*----------------------------------------------------------------------------
footer
----------------------------------------------------------------------------*/

footer{
padding: 100px 0 210px;
background-image:url(/sue/img/img_19.png);
background-repeat: no-repeat;
background-position: center bottom;
background-size: contain;
}

.mod_h2.small{
font-size: 2rem;
}

footer h3{
font-size: 2.4rem;
line-height: 1.5;
text-align: center;
margin-top: 3.5rem;
}


@media (max-width: 768px) {
footer{
padding: 16vw 0 39.2vw;
background-image:url(/sue/img/img_19sp.png);
}
footer h3{
font-size: clamp(1.8rem, 4.8vw, 2.4rem);
line-height: 1.7;
margin-top: 3.5rem;
}


}/*768*/



.pagetop {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 10px 15px;
  font-size: 12px;
  line-height: 1.5;
  background: rgba(0,0,0,.3);
  color: #fff;
  text-align: center;
  border: none;
  cursor: pointer;
  display: none; /* 最初は非表示 */
  z-index: 888;
  border-radius: 50%;
  /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);*/
  transition: opacity 0.4s ease;
    opacity: 0;
  pointer-events: none;
}
.pagetop:hover {
  background: rgba(0,0,0,.6);
  transition:all .3s;
}