@charset "UTF-8";
/*===========
body
============*/
@media screen and (orientation: landscape) {/* 横向きの場合のスタイル*/}
@media screen and (orientation: portrait) {/* 縦向きの場合のスタイル */}

/* html/body
------------------------------------------------- */
html{width: 100%;height: 100%; font-size: 62.5%;-webkit-font-smoothing: antialiased;
/* font-family: 'Noto Sans JP', sans-serif; */
}

@media only screen and (max-width:640px){
/*html {overflow-x: hidden;}*/
}
body {
position: relative;
width: 100%;
height: 100%;
font-size:1.6rem;/* 16px*/
line-height: 1.7;
letter-spacing: 0.05em;
color: #333;
font-family:'Noto Sans JP',"メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;overflow-x: hidden;position: relative;transition: 0.4s;overflow-x: hidden;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;text-size-adjust: 100%;-webkit-text-size-adjust: 100%;/*Chrome,Safari*/-ms-text-size-adjust: 100%;/*EgdeMobile*/-moz-text-size-adjust: 100%;/*firefox*/
font-feature-settings: "palt";-webkit-font-feature-settings: "palt";
text-align: justify;
}
img{width: 100%;height: auto}

 /*<a id="test" class="anker"></a>*/
  a.anker{display: block; margin-top:-100px;}

/*STYLE
------------------------------------------------- */
/* loading------------------------------------------------ */
#loading {background: #32A2C2;width: 100%;  position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; display: flex; justify-content: center; align-items: center;}
#loading img{width: 30%;height: auto}
@media screen and (max-width: 640px) {
#loading img{width: 60%;height: auto}
}
@-webkit-keyframes animate-svg-fill-1{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-1{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-1{-webkit-animation:animate-svg-fill-1 0.5s ease-out 0.5s both;animation:animate-svg-fill-1 0.5s ease-out 0.5s both}@-webkit-keyframes animate-svg-fill-2{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-2{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-2{-webkit-animation:animate-svg-fill-2 0.5s ease-out 0.6s both;animation:animate-svg-fill-2 0.5s ease-out 0.6s both}@-webkit-keyframes animate-svg-fill-3{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-3{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-3{-webkit-animation:animate-svg-fill-3 0.5s ease-out 0.7s both;animation:animate-svg-fill-3 0.5s ease-out 0.7s both}@-webkit-keyframes animate-svg-fill-4{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-4{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-4{-webkit-animation:animate-svg-fill-4 0.5s ease-out 0.8s both;animation:animate-svg-fill-4 0.5s ease-out 0.8s both}@-webkit-keyframes animate-svg-fill-5{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-5{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-5{-webkit-animation:animate-svg-fill-5 0.5s ease-out 0.9s both;animation:animate-svg-fill-5 0.5s ease-out 0.9s both}@-webkit-keyframes animate-svg-fill-6{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-6{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-6{-webkit-animation:animate-svg-fill-6 0.5s ease-out 1s both;animation:animate-svg-fill-6 0.5s ease-out 1s both}@-webkit-keyframes animate-svg-fill-7{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-7{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-7{-webkit-animation:animate-svg-fill-7 0.5s ease-out 1.1s both;animation:animate-svg-fill-7 0.5s ease-out 1.1s both}@-webkit-keyframes animate-svg-fill-8{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-8{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-8{-webkit-animation:animate-svg-fill-8 0.5s ease-out 1.2000000000000002s both;animation:animate-svg-fill-8 0.5s ease-out 1.2000000000000002s both}

.inner--base{
  margin:auto;
    width: 640px;
    position: relative;background: #eaf8ff;
    box-shadow: 0 0 15px rgba(0, 0, 0, .3);
    
}
.for_bg{
/*    background-image: url("../images/naoshima_bg.jpg");*/
/*    background-attachment: fixed;*/
    background: #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.for_bg_1{
    background-image: url("../images/ocean_bg.webp");
/*    background-attachment: fixed;*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
@media screen and (max-width:640px) {/*スマホのスタイル*/
    body{
        overflow-x: hidden;
    }
.inner--base{
width: 100%;
box-shadow: 0 0 0px rgba(0, 0, 0, 0);

}   
h2.catch{
font-size: 13px;        
}
p.nami{
margin-top: 0!important;        
}
.timeF {
/*    width: 25%;*/
    margin: 5px;
}
.txt-5{
    font-size: 13px!important;
    margin-top: 0;
}
}

@media screen and (min-width: 641px) {/*PCスタイル*/
#wrapper {
    opacity: 1;
    position: relative;
    min-height: 100vh;
}

#wrapper::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/shodoshima_bg.webp);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: left top;
    z-index: -1;
    pointer-events: none;
}
.microbus {
    font-size: 15px !important;
    color: #000 !important;
}

/*
p.nami{
    margin-top: -30px;
}
*/
.txt-5{
    font-size: 16px;
}
#logo{padding-top:10%;padding-bottom: 80px;}
#logo h1{width: 82%;margin: auto;}
#logo_1{padding-top:10%;padding-bottom: 80px;}
#logo_1 h1{width: 10%;margin: auto;}

/*#header{position: fixed;left: 0;right: 0;margin: auto; top: -50%;width:640px;z-index: 99}*/
#header .bt{position: absolute;right: 20px;top: 20px; width: 20%}

#footer{position: fixed;left: 0;right: 0;margin: auto; bottom: -50%;width:640px;height: 100px;}
#footer .box{width: 90%;text-align: center;position: absolute;top: 73%;left: 50%;-webkit-transform: translate(-50%, -90%);transform: translate(-50%, -90%);}
#footer .box img{width: 68%;}
#footer .box .bt{margin-bottom: 10px}
}
@media screen and (max-width: 640px) {/*スマホのスタイル*/
#header,#footer{width: 100%}
#logo_1 h1{width: 10%;margin: auto;padding: 60px;}
        #footer .box {
        width: 90%;
        max-width: 340px;
        width: 100%;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -75%);
        transform: translate(-50%, -75%);
    }
    #footer{position: fixed;left: 0;right: 0;margin: auto; bottom: -50%;width:100%;height: 100px;}
}



#main #section1{background: url("/web/20220707125643im_/https://web.seto.ac.jp/opencampus_shima-cam/images/section1_bg.png");position:relative;text-align: center;}
#main #section1 ul.icon{width: 70%;margin:auto;}
#main #section1 ul.icon li{width: 40%;margin: -40px 4% 0}
#main #section1 h2.catch{display: inline-block;padding:12%; text-align: left;color: #32A2C2;text-align:justify;text-justify: inter-ideograph;}
#main #section1 h3.lets{width: 80%;margin:auto;padding: 60px 0 30px}
#main #section1 .tab{width: 80%;margin: auto}
#main #section1 .tab li{width: 46%}

/* p{
    font-family: Noto Sans JP, sans-serif !important;
} */
h2.catch{
/*    color: #fff;*/
/*    width: 85%;*/
    letter-spacing: 5px;
    margin: auto;
    font-size: 16px;
    /* font-family: Noto Sans JP, sans-serif !important; */
}
h2.catch .L-1{
    float: left;
}
h2.catch .L-1-1{
    float: left;
    margin-left: 10%;
}

h2.catch .R-1{
    float: right;
}

span.time_box {
    color: #fff !important;
    background: #000;
    padding: 0px 15px;
    margin: 5px auto !important;
}
#date0{ 
/*    background:url("../images/date0_bg.jpg") center center;*/
    background: #fff;
}

.simato{
   margin: 20px auto 0;
    letter-spacing: 1px;
    line-height: 1.7;
    font-size: 14px;
    /* font-family: Noto Sans JP, sans-serif !important; */
    text-align: justify; 
}


.txt0{
    color: #fff;
    background: #000;
    line-height: 2.5;
    padding: 30px;
}

.about0{
    color:#0077C4;
/*    background:url("../images/about0_bg.jpg") no-repeat center center;*/
    background-size: cover;
/*
    padding: 30px;
    margin: 50px auto;
*/
}
.about0 dt{
    text-align: center;
    font-size: 25px;
    font-weight: 500;   
    /* font-family: 'Noto Sans JP', sans-serif; */
    letter-spacing: 5px;
}
.about001{
    color:#0077C4;
    background:url("../images/sodshima_bg_map.svg") no-repeat center center;
    background-size: cover;
    padding: 30px;
    margin: 50px auto;
    line-height: 1.2;
}
.about001 dt{
    text-align: center;
    font-size: 25px;
    font-weight: 500;   
    /* font-family: 'Noto Sans JP', sans-serif; */
    letter-spacing: 5px;
}
.t1{
    font-size: 25px;
    text-align: center;
    margin: 30px auto;
    font-weight: 600;
}
.t2{
    text-align: center;
    margin: 50px auto;
    font-size: 25px;
    letter-spacing: 3px;
    color: #0075C2;
    font-weight: 600;
}
.p2{
    text-align: center;
    color:#0075C2;
}

.txtW li{
    font-size: 15px;
}
.small_img{width: 15%;margin: auto;}
.sch_sm{font-size: 17px;}
#date1{
/*    background:#4FC7E8;*/
    background:#fff;
    margin-top: 80px;
    padding-bottom: 40px}
#date1 h2,
#date2 h2{margin-bottom: 30px}
#date1 .txt1,
#date2 .txt1{text-align: left;text-align:justify;text-justify: inter-ideograph;}

#date1 .about{padding: 70px 0 50px ; color:#32A2C2;background: url("/web/20220707125643im_/https://web.seto.ac.jp/opencampus_shima-cam/images/date1_about.svg") no-repeat center center;background-size: 20%}
#date1 .about dt,
#date2 .about dt{font-weight: 700;font-size: 2.6rem;margin-bottom: 30px }
#date1 .about dd,
#date2 .about dd{text-align: left;text-align:justify;text-justify: inter-ideograph;}

#date1 h3{margin: 0px auto 50px;width: 88%;
    font-size: 50px;
    color: #000;
    letter-spacing: 10px;
    text-align: center;
    line-height: 25px;
    /* font-family: Noto sans-serif; */
}


.txtW{
    color: #fff;
}

.txtW a{
    color: #000;
    text-align: center;
    text-decoration: underline;
    text-underline-offset:5px;
}

.img-mid{
    width: 50%;
    text-align: center;
    margin: 10px auto;
}
.img-mid-s{
    width: 20%;
    text-align: center;
    margin: 10px auto;
}
#section2{
    padding: 50px 0 163px 0;
    background-color: #fff;
    
}
.sec-t1{
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 4px;
    text-decoration: underline 3px #1A74BC;
    text-underline-offset:10px;
    text-align: center;
}

.txt-5{
    padding: 10px;
    text-align: center;
    margin-top: 5px;
    letter-spacing: 2px;
}


#date1 .sche dt,
#date2 .sche dt{margin-bottom: 20px;line-height: 1.5; color:#000; font-size: 20px; text-align: center;
    /* font-family: 'Noto Sans JP'; */
}
#date1 .sche dt span,
#date2 .sche dt span{font-size: 20px;color: #000;}
#date1 .txt2,
#date2 .txt2{text-align: left;font-size: 1.4rem;line-height: 1.3;text-align:justify;text-justify: inter-ideograph;}
#date1 .arrow,
#date2 .arrow{width: 3%;margin: 20px auto}
#date1 h4{margin: 90px auto 0;padding: 60px 0; font-weight: 700;font-size: 1.7rem;background: url("./images/date1_access.png") no-repeat center center;background-size: 100% auto}
#date1 .access dt,
#date2 .access dt{font-size: 1.7rem;margin-bottom: 20px}
#date1 .access dt.t2,
#date2 .access dt.t2{margin-top: 50px;color: #32A2C2}
#date1 .access dd.p2,
#date2 .access dd.p2{color: #32A2C2;font-size: 1.3rem;}
#date1 .access dd.p2 img,
#date2 .access dd.p2 img{width: 70%;margin: auto}

.mT20{margin-top: 20px}
.p12{padding: 12% 10% 12%; overflow: hidden;}
.fo13{font-size: 0.7em!important; font-weight: 100!important;}
.gmap {height: 0;overflow: hidden;padding-top: 80%/*56.25%*/;position: relative;}
.gmap iframe {position: absolute;left: 0;top: 0;height: 100%;width: 100%;}

#date2{background: #FFF5F9;margin-top: 80px;padding-bottom: 40px}
#date2 .about{padding: 70px 0; color:#32A2C2;background: url("./images/date2_about.svg") no-repeat center center;background-size: 100%}
#date2 .txt3{margin: 50px 0 0; text-align: left;color: #32A2C2;}
#date2 .txt3 span{display: block;margin-left: 20px;font-size: 1.4rem;}
#date2 .link{margin:0px 0 50px; font-size: 1.4rem;}
#date2 .link a{text-decoration: underline}
#date2 .link img{width: 18px;vertical-align: middle}
#date2 .sche dt span{color: #F2A3AC;}
#date2 .sche dt span strong{color: #31A2C1;font-size: 3rem}
#date2 .sche .waku{padding: 20px;background: #fff}
#date2 .sche .waku .c1{color:#31A2C1;}
#date2 .txt4{font-size: 1.4rem;margin-top: 10px;color: #31A2C1;}
#date2 h4{margin: 90px auto 0;padding: 60px 0;font-size: 1.7rem;background: url("/web/20220707125643im_/https://web.seto.ac.jp/opencampus_shima-cam/images/date2_access.png") no-repeat center center;background-size: 100% auto}
#date2 .access dd.p3{width: 70%;margin:20px auto 0;color: #000;}


#main #section2{background: #fff;position:relative;text-align: center;padding: 80px 0 20px}
#main #section2 h2{font-weight: 700;font-size: 3rem;margin-bottom: 60px;position:relative; }
#main #section2 h2::after{position: absolute;content: "";left: 0;right: 0;bottom: -10px;margin: auto;background: #1A74BC;height: 4px;width: 36%}
#main #section2 .txt{font-size: 1.4rem}

#main #section2 li a,
#footer .box a,
#main #section1 .tab li a,
#header .bt a{display: block}
#main #section2 li a:hover,
#footer .box a:hover,
#main #section1 .tab li a:hover,
#header .bt a:hover{
  animation: hoverShake 0.15s linear 3;
  opacity: 0.8;
}
@keyframes hoverShake {
  0% {transform: skew(0deg,0deg);}
  25% {transform: skew(1deg, 1deg);}
  75% {transform: skew(-1deg, -1deg);}
  100% {transform: skew(0deg,0deg);}
}

@media screen and (min-width:640px) and ( max-width:1200px) {
/*　画面サイズが768pxから1200pxまではここを読み込む　*/
#wrapper {opacity: 0; position: relative;background: #eaf8ff;}
#wrapper:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url("../images/shodoshima_bg.webp");
    background-size: cover;
}
.inner--base{margin:auto;width: 60%;position: relative;background: #eaf8ff;box-shadow: 0 0 15px rgba(0, 0, 0, .3);
  /*background-image: url("../images/naoshima_bg.jpg");*/
  background-attachment: fixed;
  background-size: contain;
  background-position: center;
}
#header,#footer{width: 60%;}
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
/*デバイス横向きで画面の横幅が 1024px 以下の場合のスタイルを記述*/
.inner--base{margin:auto;width: 60%;position: relative;background: #eaf8ff;box-shadow: 0 0 15px rgba(0, 0, 0, .3);
  /*background-image: url("../images/naoshima_bg.jpg");*/
  background-attachment: fixed;
  background-size: contain;
  background-position: center;}
    
#header{width: 100%;position: absolute}
#footer{width: 60%;margin: auto; position: absolute}
#logo h1{width: 18%;margin: auto;}
}


/****************************************
effect-fade
*****************************************/
.effect-fade {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}
.effect-fade.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.access{
    background:#fff;
    padding: 50px 0;
}