@charset: 'UTF-8';

/* Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  font:inherit;
}

html {
  line-height:1;
  height:100%;
}

ol, ul {
  list-style:none;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

caption, th, td {
  text-align:left;
  font-weight:normal;
  vertical-align:middle;
 
}

q, blockquote {
  quotes:none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content:'';
  content:none;
}

a img {
  border:none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display:block;
}

* {
  box-sizing:border-box;
}

/* HTML5 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display:block;
}

audio,
canvas,
video {
  display:inline-block;
  *display:inline;
  *zoom:1;
}

audio:not([controls]) {
  display:none;
  height:0;
}

[hidden] {
  display:none;
}

/* Typography */



/* All */

body {
  margin:0;
  overflow-wrap:break-word;
  word-break:normal;
  text-align:center;
  color:#1C1C1C;
}

a {
  -webkit-transition:all ease-in-out .3s;
  transition:all ease-in-out .3s;
}

a:focus, a:active, a:hover {
  outline:0;
}

* {
  box-sizing:border-box;
}

.b {
  font-weight:bold;
}



img {
  max-width:100%;
}

/* Clear */

.clear {
  clear:both;
}

.clearfix {
  *zoom:1;
}

.clearfix:before {
  display:inline-table;
}

.clearfix:after {
  content:'';
  display:block;
  clear:both;
}

.back{
margin-bottom:20px;

}



/* フェードインv1 */

.fadein01 {
    animation-name: fadein;
    animation-duration: 2s;
}
@keyframes fadein {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* フェードインv2　画面外にいる状態 */
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 500ms;
    }

/* フェードインv2　画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }


/* sp */

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

.vpc {
  display:none;
  line-height:0;
}



.vsp {
  display:block;
  line-height:0;
}



#intro{
   background-image:url(../img/main_sp.jpg);
   background-size: cover;
   background-position:center;
   background-repeat:no-repeat;
   min-height:370px;
   display: flex;
   align-items: center;
   }
   
   #intro h1{
   font-size:2.5em;
   font-weight:bold;
   text-shadow:0 0 10px #000;
   width:100%;
   color:#fff;
   text-align:center;
   line-height:140%;
   }
   
   #intro h1 span{
   font-size:0.6em;
   }
  
/* header */


#top-head{
background-color: #fff;
width:100%;
padding:5px 0;
position: fixed;
z-index:99
}

#top-head .inner{
display:flex;
justify-content: space-between;
align-items: center;
padding:5px 0 10px;
}

#top-head .inner h1{
font-size:1.4em;
padding:0 0 10px;
}

#top-head .inner h1 a{
color:#000;
text-decoration:none;
}

#top-head .inner #nav-toggle{
display:none;
}

#top-head .inner #global-nav ul{
display:flex;
width:100%;
}

#top-head .inner #global-nav ul li{
list-style-type:none;

}

#top-head .inner #global-nav ul li img{
width:100%;
}

#top-head .inner #global-nav ul span{
display:none;
}


/* Transition */
/*
#top-head,
#top-head .logo,
#global-nav ul li,
#global-nav ul li a {
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
}
*/
   
   
   /* POINT.2 目的別に施設を使い分ける */
   
   
   #point2{
   background-image:url(../img/point2_back.jpg);
   background-size:cover;
    background-position:center;
   padding:130px 5%; 50px

   }
   
   #point2 h2{
   font-size:1.5em;
   font-weight:bold;
   color:#fff;
   padding:10px;
   margin:0 5% 30px;
   line-height:140%;
   }
   
   #point2 h2 + p{
   margin:20px 0;
   line-height:140%;
   }
   
   
   #point2 p{
   font-size:1.2em;
   font-weight:bold;
   color:#fff;
   padding:10px;
   margin:30px 5% 30px;
   }
  
   
   #point2 h3{
   background: linear-gradient(transparent 60%, #ffd6a4 60%);
   padding:10px 10px 0;
   max-width:90%;
   margin:0 auto;
   font-size:1.2em;
   margin-bottom:15px;
   line-height:140%;
   font-weight:bold
   }
   
   #point2 h3.a{
   background: linear-gradient(transparent 60%, #DDFFDD 60%);
   padding:10px 10px 0;
   max-width:90%;
   margin:0 auto;
   font-size:1.2em;
   margin-bottom:10px;
   line-height:140%;
   font-weight:bold
   }
   
   #point2 h3.b{
   background: linear-gradient(transparent 60%, #ADD8E6 60%);
   padding:10px 10px 0;
   max-width:90%;
   margin:0 auto;
   font-size:1.2em;
   margin-bottom:10px;
   line-height:140%;
   font-weight:bold
   }
   
    #point2 h3.c{
   background: linear-gradient(transparent 60%, #EE82EE 60%);
   padding:10px 10px 0;
   max-width:90%;
   margin:0 auto;
   font-size:1.2em;
   margin-bottom:10px;
   line-height:140%;
   font-weight:bold
   }
   
   #point2 ul{
   
   margin:0 auto;
   }
   
   #point2 ul li {
   
   background-color:rgba(245,245,245,0.7);
   box-shadow: 2px 2px 4px gray;
   padding:20px;
   text-align:center;
   margin-bottom:20px;
   border-radius:10px;
   }
   
   #point2 ul li div{
   margin-bottom:5px;
   }
   
   #point2 ul li p{
   color:#000;
   text-align:center;
   font-weight:bold;
   margin-bottom:5px;
   }
   
   #point2 ul li p span{
   font-size:0.8em;
   }
   

}


/* tab */

@media screen and (min-width:641px) and (max-width:1024px) {

.vpc {
  display:none;
  line-height:0;
}



.vsp {
  display:block;
  line-height:0;
}


#intro{
   background-image:url(../img/main_sp.jpg);
   background-size: cover;
   background-position:center;
   background-repeat:no-repeat;
   min-height:370px;
   display: flex;
   align-items: center;
   }
   
   #intro h1{
   font-size:2.8em;
   font-weight:bold;
   text-shadow:0 0 10px #000;
   width:100%;
   color:#fff;
   text-align:center;
   line-height:140%;
   }
   
   #intro h1 span{
   font-size:0.6em;
   display:block;
   line-height:120% ;
   }
  
/* header */


#top-head{
background-color: #fff;
width:100%;
padding:10px 0;
position: fixed;
z-index:99
}

#top-head .inner{
display:flex;
justify-content: space-between;
align-items: center;
padding:5px 0 60px;
position: relative;
}

#top-head .inner h1{
font-size:2em;
}

#top-head .inner h1 a{
color:#000;
text-decoration:none;
}

#top-head .inner #nav-toggle{
display:none;
}

#top-head .inner #global-nav ul{
display:flex;
width:100%;
}

#top-head .inner #global-nav ul li{
list-style-type:none;

}

#top-head .inner #global-nav ul li img{
width:100%;
}

#top-head .inner #global-nav ul span{
display:none;
}


#top-head .inner .box_textLeft {
  position: absolute;
  left: 0;
}
#top-head .inner .box_imageRight {
  position: absolute;
  right: 0;
}


/* Transition */
/*
#top-head,
#top-head .logo,
#global-nav ul li,
#global-nav ul li a {
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
}
*/


   
   /* POINT.2 目的別に施設を使い分ける */
   
   
   #point2{
   background-image:url(../img/point2_back.jpg);
   background-size:cover;
    background-position:center;
   padding:100px 0; 70px

   }
   
   #point2 h2{
   font-size:1.8em;
   font-weight:bold;
   color:#fff;
   padding:10px;
   margin:0 5% 30px;
   line-height:140%;
   }
   
   #point2 p{
   font-size:1em;
   font-weight:bold;
   color:#fff;
   padding:10px;
   margin:30px 5% 30px;
   }
   
   #point2 h3{
   background: linear-gradient(transparent 60%, #ffd6a4 60%);
   padding:10px 10px 0;
   max-width:90%;
   margin:0 auto;
   font-size:1.1em;
   margin-bottom:15px;
   line-height:140%;
   font-weight:bold
   }
   
   #point2 h3.a{
   background: linear-gradient(transparent 60%, #DDFFDD 60%);
   padding:10px 10px 0;
   max-width:90%;
   margin:0 auto;
   font-size:1.6em;
   margin-bottom:10px;
   line-height:140%;
   font-weight:bold
   }
   
   #point2 h3.b{
   background: linear-gradient(transparent 60%, #ADD8E6 60%);
   padding:10px 10px 0;
   max-width:90%;
   margin:0 auto;
   font-size:1.6em;
   margin-bottom:10px;
   line-height:140%;
   font-weight:bold
   }
   
    #point2 h3.c{
   background: linear-gradient(transparent 60%, #EE82EE 60%);
   padding:10px 10px 0;
   max-width:90%;
   margin:0 auto;
   font-size:1.6em;
   margin-bottom:10px;
   line-height:140%;
   font-weight:bold
   }
   
   #point2 > p{
   margin:20px 0;
   line-height:140%;
   }
   
   #point2 ul{
   
   width:90%;
   margin:0 auto;
   }
   
   #point2 ul li {
   
   background-color:rgba(245,245,245,0.7);
   box-shadow: 2px 2px 4px gray;
   padding:20px;
   text-align:center;
   margin:25px;
   border-radius:10px;
   }
   
   #point2 ul li div{
   margin-bottom:5px;
   }
   
   #point2 ul li p{
   color:#000;
   text-align:center;
   font-weight:bold;
   margin-bottom:5px;
   }
   
   #point2 ul li p span{
   font-size:0.8em;
   }
   

}




/* pc */

@media screen and (min-width:1025px) {

.vsp {
  display:none;
  line-height:0;
}

.tab {
  display:none;  
  line-height:0;
}

.vpc {
  display:block;
  line-height:0;
}

/* メインビジュアル */

#intro{
   background-image:url(../img/main_pc.jpg);
   background-size: cover;
   background-position:center;
   background-repeat:no-repeat;
   height:0;
   padding-top:42.857142857%;
   width: 100%;
   position: relative;
   }
   
   #intro h1{
   font-size:3.7em;
   font-weight:bold;
   text-shadow:0 0 10px #000;
   width:100%;
   color:#fff;
   text-align:right;
   letter-spacing:0.1em;
   padding-top:-42.857142857%;
   padding-right:5%;
    position: absolute;
    top: 40%;
  width: 100%;

   }
   
   #intro h1 span{
   font-size:0.5em;
   }



/* header */


#top-head{
background-color: #fff;
width:100%;
padding:10px 0;
position: fixed;
z-index:99
}

#top-head .inner{
display:flex;
justify-content: space-between;
align-items: center;
padding:5px 0 60px;
position: relative;
}

#top-head .inner h1{
font-size:2em;
}

#top-head .inner h1 a{
color:#000;
text-decoration:none;
}

#top-head .inner #nav-toggle{
display:none;
}

#top-head .inner #global-nav ul{
display:flex;
width:100%;
}

#top-head .inner #global-nav ul li{
list-style-type:none;

}

#top-head .inner #global-nav ul li img{
width:100%;
}

#top-head .inner #global-nav ul span{
display:none;
}


#top-head .inner .box_textLeft {
  position: absolute;
  left: 0;
}
#top-head .inner .box_imageRight {
  position: absolute;
  right: 0;
  margin:0px 70px;
}


   
   /* POINT.2 目的別に施設を使い分ける */
   
   
   #point2{
   background-image:url(../img/point2_back.jpg);
   background-size:cover;
    background-position:bottom;
   padding:90px 0;

   }
   
   #point2 h2{
   font-size:2.5em;
   font-weight:bold;
   color:#fff;
   padding:10px;
   margin:30px 5% 30px;
   }
   
   #point2 p{
   font-size:1em;
   font-weight:bold;
   color:#fff;
   padding:10px;
   margin:30px 5% 30px;
   }
   
   #point2 h3{
   background: linear-gradient(transparent 60%, #ffd6a4 60%);
   padding:10px 10px 0;
   max-width:90%;
   margin:0 auto;
   font-size:1.6em;
   margin-bottom:10px;
   line-height:140%;
   font-weight:bold
   }
   
   #point2 h3.a{
   background: linear-gradient(transparent 60%, #DDFFDD 60%);
   padding:10px 10px 0;
   max-width:90%;
   margin:0 auto;
   font-size:1.6em;
   margin-bottom:10px;
   line-height:140%;
   font-weight:bold
   }
   
   #point2 h3.b{
   background: linear-gradient(transparent 60%, #ADD8E6 60%);
   padding:10px 10px 0;
   max-width:90%;
   margin:0 auto;
   font-size:1.6em;
   margin-bottom:10px;
   line-height:140%;
   font-weight:bold
   }
   
    #point2 h3.c{
   background: linear-gradient(transparent 60%, #EE82EE 60%);
   padding:10px 10px 0;
   max-width:90%;
   margin:0 auto;
   font-size:1.6em;
   margin-bottom:10px;
   line-height:140%;
   font-weight:bold
   }
   
   #point2 > p{
   margin:20px 0;
   line-height:140%;
   }
   
   #point2 ul{
   display:flex;
   justify-content:center;
   flex-wrap: wrap;
   width:80%;
   max-width:1000px;
   margin:0 auto;
   }
   
   #point2 ul li {
   width:40%;
   background-color:rgba(245,245,245,0.9);
   box-shadow: 2px 2px 4px gray;
   padding:20px;
   text-align:center;
   margin:15px;
   border-radius:10px;
   }
   
   #point2 ul li div{
   margin-bottom:5px;
   }
   
   #point2 ul li p{
   color:#000;
   text-align:center;
   font-weight:bold;
   margin-bottom:5px;
   }
   
   #point2 ul li p span{
   font-size:0.8em;
   }


}