@charset "utf-8";
body {
    width: 100%;
    overflow-x: hidden;
}

.subpage-inner {
    margin: 0 auto;
    width: 1000px;
}

#top {
    overflow: hidden;
}

/*.mainimage {
    height: 450px;
    background-image: url("/Japanese/SDGs/img/shioji-topimage1-pc.jpg");
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;*/
    /* [disabled]margin-top: 60px; */
/*}*/
/*.mainimage .inner h2 {
  font-size: 65px;
  position: absolute;
  bottom: 0px;
  font-weight: normal;
  color: #FFFFFF;
  margin-top: 130px;
}*/
/*.mainimage .main_imgBox .inner h2 {
  font-size: 65px;
  position: absolute;
  bottom: 0px;
  font-weight: normal;
  color: #FFFFFF;
  margin-top: 130px;
}
*/

/* 写真　ふわっと切り替え*/
/* --- 全体のBOX定義 ---------------------------------------- */
.main_imgBox {
  position   : relative;
  max-width  : 100%;
  height     : 450px;
  margin     : auto;
  overflow   : hidden;
}

/* --- 背景の指定 ------------------------------------------- */
.main_imgBox .main_img {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
    background-size: cover;
  animation  : bgAnime 40s 0s infinite;   /* 4画像 × 各10s = 40s */
}


/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.main_imgBox .src1 {
  background-image : url("/Japanese/SDGs/img/shioji-topimage1-pc.jpg");   /* 背景の画像を指定  いよいよ海上公試*/
}
.main_imgBox .src2 {
  background-image : url("/Japanese/SDGs/img/shioji-topimage2-pc.jpg");   /* 背景の画像を指定  係留　編集 */
  animation-delay  : 10s;
}
.main_imgBox .src3 {
  background-image : url("/Japanese/SDGs/img/shioji-topimage3-pc.jpg");   /* 背景の画像を指定　 */
  animation-delay  : 20s;
}
.main_imgBox .src4 {
  background-image : url("/Japanese/SDGs/img/shioji-topimage4-pc.jpg");   /* 背景の画像を指定　 */
  animation-delay  : 30s;
}


@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { 
      opacity: 0;
      transform: scale(1.2) ;
      z-index:5;
}
 100% { opacity: 0; }
}

/* --- 前面の文字定義 ----- */
.main_imgBox .logo{
    position   : absolute;
    display    : inline-block;
    /*padding    : 10px;*/
    /*background : rgba(0, 127, 255, 0.7);           半透明の青 */
    /*background-color: rgba(216,232,247,0.05);*/
    background-blend-mode: lighten;
    color      : #fff;
    /* top        : 30%;  */                             /* 中央寄せ */
 /* left       : 50%;  
  transform  : translate(-50%,-50%);*/
    z-index    : 6;
    font-size: 50px;
    margin-top: 320px;
    /*margin-left: 20%;*/
    text-shadow: 2px 1px #000;
}

/* 写真　ふわっと切り替え　ここまで*/



.gakubu-t {
    display: flex;
    margin-top: 125px;
    margin-bottom: 80px;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.t-box {
    width: 500px;
    margin-right: 50px;
}
.gakubu-sdgs {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    /* [disabled]display: flex; */
    /* [disabled]justify-content: space-between; */
    margin-bottom: 80px;
}
.sdgs-box {
    /* [disabled]margin-left: 10px; */
    /* [disabled]margin-right: 10px; */
    width: 100%;
    display: flex;
    justify-content: space-between;
}



.gakubu-inner h3:before {
    color: #92bfbb;
    content: "■";
}

.prof {
    /* [disabled]padding: 40px; */
    background-color: #f6f1d6;
    margin-top: 0;
    margin-right: -200%;
    margin-left: -200%;
    margin-bottom: 120px;
    padding: 5% 200%;
    align-items: flex-start;
    justify-content: center;
    display: flex;
}


.prof-outer   {
    width: 400px;
    margin-left: 0px;
    margin-right: auto;
}

.goal3-outer p{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;   
    text-align: center;
}

.goal3-text{
    display: flex;
    justify-content: center;
    flex-flow: row nowrap;
    align-items: stretch;
}

.goal3-text span{
    flex: 0 0 auto;
    text-align: left;
}

.goal3-text::before,.goal3-text::after{
    content: "";
    flex: 0 0 2px;
    height: auto;
    margin: 0px 30px;
    background: #92bfbb;
}

.goal3-text::before{
    transform: rotate(-30deg)
}

.goal3-text::after{
    transform: rotate(30deg)
}


.goal-top3 {
    display: flex;
    margin: 30px 0;
}

.goal-top3 img{
    transform: scale(0.8)
}



.each-g{
    display: flex;
    flex-wrap: wrap;
	padding-bottom: 100px;
}

.each-box{
    width: 480px;
    margin-top: 40px;
    margin-right: 40px;
}
.each-box:nth-child(even){
    margin-right: 0px;
}

.link {
    background-color: #92bfbb;
    border-radius: 20px;
    margin: 20px 0;
    width: 500px;
    height: 50px;
    position: relative;
/*    margin: 0 auto;*/
    padding-top: 12px;
}
.link:after {
    content: ">";
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 17px;
    right: 70px;
}
.link a {
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    width: calc( 100% - 20px );
    height: 100%;
    line-height: 2;
    padding-left: 20px;
}

.link:hover{
    background-color: #7FA6A2;
    
}

.link-douga {
    background-color: #92bfbb;
    border-radius: 20px;
    margin: 20px 0;
    width: 350px;
    position: relative;
}
.link-douga:after {
    content: ">";
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 5px;
    right: 10px;
}
.link-douga a {
   display: block;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  width: calc( 100% - 20px );
  height: 100%;
  line-height: 2;
  padding-left: 20px;
  padding-top: 6px;
  padding-bottom: 6px;
  text-decoration: none;
}

.link-douga:hover{
    background-color: #7FA6A2;
    
}

.goal3-outer a:hover img {
    transform: scale(1.1);
    transition: 0.5s;
}

/*body {
  min-width: 1040px;
}*/


.item-shio {
    padding: 0 0 0 10px;
    margin: 0 auto;
    /*border: 5px solid #000;*/
    width: 550px;
    overflow: hidden;
}

.item-shio p {
    padding: 0 10px 010px;
    /*float: left;   */ 
}

.boxarea-shio {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
}
.box-shio {
    position: relative;
    float: left;
    border: 2px solid #92bfbb;
    border-radius: 10px 10px 0px 0px;
    height: 500px;
    width: 300px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
}

.box-shio h4 {
    height: 20px;
    text-align: center;
}

.grad-btn {
    background-color: #7AC9C1;  /*.grad-btnのCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
}
.grad-btn::before {
  content: "続きを読む"
}
.grad-item {
    position: relative;
    overflow: hidden;
    height: 80px; /*隠した状態の高さ*/
    width: 294px;
    /* [disabled]margin-left: 5px; */
    /* [disabled]margin-right: 5px; */
    padding-left: 5px;
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
  content: "閉じる" /*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

.grad-wrap {
    /* [disabled]float: left; */
}
.photo {
    width: 300px;
    height: 250px;
    top: -10px;
    position: relative;
    overflow: hidden;
}

.photo a {
    overflow: hidden;
}


.no-grad-item {
    margin-left: 5px;
    margin-right: 3px;
    height: 180px;
    overflow: auto;
    overflow-x: hidden;
    scrollbar-color: #7AC9C1 #e0e0e0; /*#6969dd：青*/
    scrollbar-width: thin;
    padding-right: 7px;
}

.box-shio .kaig {
    line-height: 1.1em;
}


.box-shio:last-child {
    margin-right: auto;
    margin-left: 0px;
}
.box-shio.f_item {
    margin-left: 15px;
}

/*画像をズーム*/
.img_zoom{
/*  border: 1px solid #ddd;*/
  width: 300px;
  height: 250px;
  margin: 0 auto;
  overflow: hidden;
/*  cursor: pointer;*/
}
.img_zoom img{
    width: 100%;
    transition-duration: 0.5s;
    height: 100%;
}
.img_zoom:hover img{
  transform: scale(1.1);
  transition-duration: 0.5s;
}

li {
    list-style-type: none;
}
.subpage-inner li::before {
    content: '● ';
    color: #92BFBB;
    text-indent: 30px;
}

.detail {
    margin-bottom: 30px;
    margin-left: 30px;
}

.design {
    position: relative;
    padding: 0.5em;
    background: #92bfbb;
    color: white;
    margin-bottom: 30px;
}
.design::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}

.number-shio a:hover img {
    box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.5);
    transform: translateY(-5px);
}

/*アコーデオン
*,
*::after,
*::before {
  box-sizing: border-box;
}*/

.accordion {
    width: 550px;
    margin-top: 30px;
    margin-right: auto;
    margin-left: auto;
    max-width: 100%;
    margin-bottom: 50px;
}

/*------------------------------

ここからアコーディオンのCSS

------------------------------*/
/* チェックボックスは非表示 */
.accordion-hidden{
  display: none;
}

/* Question部分 */
.accordion-open {
    display: block;
    padding: 10px;
    background: #66cdaa;
    cursor: pointer;
    margin: 5px 0;
    font-weight: 700;
    position: relative;/* 変更部分 */
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

/* 開閉状態を示すアイコン+の作成 */
.accordion-open::before,
.accordion-open::after {
  content: '';
  width: 20px;
  height: 3px;
  background: #fff;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

/* 一本は縦にして+を作る */
.accordion-open::after {
  transform: translateY(-50%) rotate(90deg);
  transition: .5s;
}

/* アコーディオンが開いたら縦棒を横棒にして-にする */
.accordion-hidden:checked + .accordion-open:after {
  transform: translateY(-50%) rotate(0);
}

/* Answer部分 */
.accordion-close {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: 0.5s;/* 表示速度の設定 */
}

/* チェックボックスにチェックが入ったらAnswer部分を表示する */
.accordion-hidden:checked + .accordion-open + .accordion-close {
    height: auto;
    opacity: 1;
    padding: 10px;
    background: #f0ffff;
    font-weight: 700;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.anima {
    margin-top: 30px;
    margin-bottom: 80px;
}
.list{
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    padding: 10px;    /*margin-bottom: 10px;*/
}
.list table th{
    /*background-color: #7fffd4;  /*明るいグリーン*/
    /*background-color: #28C994;  /*グリーン*/
    background-color: #D39105;  /*からし色*/
    border-radius: 10px;
    padding: 10px 5px 10px 10px;
    text-align: left;
    /* [disabled]height: 50px; */
    width: 350px;
    color: #FFF;
    -webkit-box-shadow: 5px 5px 5px #ADAD9B;
    box-shadow: 5px 5px 5px #ADAD9B;
}
.list table td{
    padding-top: 10px;
    padding-bottom: 10px;
    /*background: #f0ffff;　薄水色　　#F9F8E6ベージュ　#ffffe0*/
    background: #F9F8E6;
    -webkit-box-shadow: 5px 5px 5px #ADAD9B;
    box-shadow: 5px 5px 5px #ADAD9B;
    padding-left: 5px;
    border-radius: 10px;
    padding-right: 5px;
}

.right{
    margin-left: auto;   
}

/* */
.scroll-fade {
  transition: all 2000ms;
  opacity: 0;
  visibility: hidden;
  transform: translate(0px, 50px);
}

.scroll-fadein {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, 0px);
} 

.subpage-inner .haichi img {
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 50px;
}

.all{
    overflow: hidden;
}

#lightbox .lb-container { padding: 0px; }
#lightbox .lb-outerContainer { padding: 0px; }
.lb-data {
    margin-top: 5px;
}

.sns{
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: 0px;
}

.youtube-box{
    margin: 0 auto;
    width: 66%;
}

.youtube {
    position: relative;
    padding-top: 56.25%;
    margin: 0 auto;
}
.youtube iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}


@media screen and (max-width:1040px){
/*@media screen and (max-width:800px){*/

    
/*.subpage-inner {
    width: 90vw;
}*/

img {
    max-width: 100%;
    height: auto;
}
.inner {
    width: calc(100% - 40px);
}

.lightbox {
    overflow: hidden;
    }
    

.list{
    width: 98%;
}

/*footer a {
    white-space: nowrap;
}
footer .inner {
    padding-left: 20px;
    padding-right: 20px;
    width: 95vw;
    height: auto;
}*/

/*   #lightboxOverlay .lightboxOverlay{
        width: 1040px;
    }*/
}

/**/
@media (min-width:601px) {
  html {
    min-width:1040px;
  }
 /*   #lightbox.lightbox{
        width: 1040px;
    }*/
}


/* 横長の時 
@media (orientation: landscape){
  html {
    min-width:1040px;
  }   
     #lightbox.lightbox{
        width: 1040px;
    }

    
}*/

@media screen and (max-width:600px){
body {
    min-width: initial;
  }

.lightbox {
    overflow: hidden;
    }
.lb-image {
    margin-right: 0;    
    }
    
.mainimage {
  height: 230px;
  background-image: url("/Japanese/SDGs/img/shioji-topimage1-sp.jpg");
}
.mainimage .inner {
  height: 230px;
  position: relative;
}
.mainimage .inner h2 {
    display: block;
    position: absolute;
    bottom: 0px;
    font-size: 36px;
    margin-left: 0px;
    left: 20px;
    text-shadow: 2px 0px #000000;
}

.main_imgBox {
  height     : 230px;
}

.main_imgBox .logo{
    margin-top: 220px;
    width: 100%;
}
    
    
/* --- 段差で背景画像のアニメーションを実行 -----スマホ用------------ */
.main_imgBox .src1 {
  background-image : url(/Japanese/SDGs/img/shioji-topimage1-sp.jpg);   /* 背景の画像を指定  いよいよ海上公試*/
}
.main_imgBox .src2 {
  background-image : url(/Japanese/SDGs/img/shioji-topimage2-sp.jpg);   /* 背景の画像を指定  係留　編集 */
  animation-delay  : 10s;
}
.main_imgBox .src3 {
  background-image : url(/Japanese/SDGs/img/shioji-topimage3-sp.jpg);   /* 背景の画像を指定　 */
  animation-delay  : 20s;
}
.main_imgBox .src4 {
  background-image : url(/Japanese/SDGs/img/shioji-topimage4-sp.jpg);   /* 背景の画像を指定　 */
  animation-delay  : 30s;
}    
    
    
img {
    height: auto;
    width: 100%;
}
.subpage-inner {
    width: 90vw;
}
.subpage-inner .prof {
    flex-wrap: wrap;
}
.subpage-inner .item-img p:last-child {
    width: 15vw;
}

.prof-inner {
    margin-bottom: 10px;
    width: 82vw;
}
.prof-inner:last-child {
    margin-bottom: 0px;
}
   
.gakubu-t{
    display: block;
    flex-wrap: wrap;
}
.gakubu-t p img {
    width: 90%;
    height: auto;
}
.gakubu-sdgs {
    /* [disabled]flex-wrap: wrap; */
    width: 90vw;
}




.goal-top3 {
    display: block;
}

.goal-top3 img{
    width: 40vw;
}

.link{
    width: 90vw;
}

.link a{
    font-size: 16px;
    line-height: 1.3;
    text-align: left;
    padding-left: 14vw;
}

.link:after {
    content: ">";
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 17px;
    right: 10vw;
}

.each-box:nth-child(odd){
    margin-right: 0px;
}
    
.gakubu-t p img,.gakubu-t p{
    width: 90vw;
        
    }
.all {
    overflow: hidden;
}
.sdgs-box {
    display: block;
}

.sdgs-box p img  {
    width: 30%;
    height: auto;
    margin-top: 0px;
}
.photo {
    overflow: hidden;    
}

.subpage-inner {
    overflow: hidden;
}

.no-grad-item {
    margin-right: 0px;
}
    
.box-shio.f_item {
    margin-left: auto;
}
    
/*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
} */
    
.detail {
    margin-bottom: 30px;
    margin-left: 0px;
    font-size: 90%;
}

.number-shio{
    width: 90%    
}
    
.number-shio a img {
    width: 20%;
}
    
.list {
    width: 95%;
    font-size: 90%;
}

.list td {
    width: 100%;    
    }
.list tr {
    width: 100%;    
    }

    
.right {
    margin-left: 0px;    
}
 
/*.youtube {
    margin-bottom: 3em;
}*/
.boxarea {
    /*display: flex;
    justify-content: space-around;
    flex-wrap: wrap;*/
    width: 50%;
    margin-left: 0px;
}
.youtube-box{
    margin: 0;
    }
    
}